/* ============================================================================
 * Search page — mobile compact bar + bottom-sheet filter
 *
 * Used by: templates/properties/search.html
 * Companion JS: static/js/pages/search.js
 *
 * Layout: a thin sticky `.rs-mobile-bar` (search input + quick chip row) sits
 * above the page on <992px viewports; tapping the "Lọc" button slides the
 * `.rs-filter-bar` up from the bottom as a modal sheet. Desktop (>=992px)
 * hides everything and falls back to the standard `.search-container` UI.
 * ========================================================================== */

/* ----- Defaults (desktop & ≥992px) ---------------------------------------- */
.rs-mobile-bar { display: none; }

.rs-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--z-modal, 1050) - 1);
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.rs-sheet-overlay.is-visible { opacity: 1; display: block; }

/* Sheet decorations & sheet itself hidden on desktop */
.rs-sheet-handle,
.rs-sheet-header,
.rs-sheet-footer,
.rs-filter-bar { display: none; }


/* ----- Mobile (<992px) ---------------------------------------------------- */
@media (max-width: 991px) {

    /* ----- Compact mobile search bar ----- */
    .rs-mobile-bar {
        display: block;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.5rem;
    }
    .rs-mob-row1 {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.4rem;
    }
    .rs-mob-search-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }
    .rs-mob-search-icon {
        position: absolute;
        left: 0.55rem;
        color: #9ca3af;
        width: 15px;
        height: 15px;
        pointer-events: none;
    }
    .rs-mob-search-input {
        width: 100%;
        height: 36px;
        padding: 0 0.75rem 0 2rem;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        font-size: 0.85rem;
        background: #f3f4f6;
        color: #374151;
        outline: none;
    }
    .rs-mob-search-input:focus {
        border-color: var(--primary-blue, #2563eb);
        background: #fff;
    }

    /* ----- Quick chip row ----- */
    .rs-mobile-quick-row {
        display: flex;
        gap: 0.4rem;
        padding: 0.1rem 0 0.1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rs-mobile-quick-row::-webkit-scrollbar { display: none; }

    .rs-mob-chip {
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        height: 30px;
        padding: 0 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #f9fafb;
        font-size: 0.75rem;
        color: #374151;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex: 1;
    }
    .rs-mob-chip.is-active {
        border-color: var(--primary-blue, #2563eb);
        background: #dbeafe;
        color: var(--primary-blue, #2563eb);
        font-weight: 600;
    }
    /* Invisible native <select> overlays the chip so tap opens the OS picker */
    .rs-mob-chip__select {
        position: absolute;
        inset: 0;
        opacity: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 16px;
    }

    /* ----- Filter button (opens sheet) ----- */
    .rs-mob-filter-btn {
        flex-shrink: 0;
        height: 30px;
        padding: 0 0.55rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #f3f4f6;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        color: #374151;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    .rs-mob-filter-btn:active { background: #e5e7eb; }
    .rs-mob-filter-btn svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }
    .rs-mob-filter-badge {
        background: var(--primary-blue, #2563eb);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* ----- Bottom sheet ----- */
    .rs-filter-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 88vh;
        background: #fff;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: var(--z-modal, 1050);
        overflow-y: auto;
        box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.14);
        padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
        overscroll-behavior: contain;
    }
    .rs-filter-bar.is-sheet-open { transform: translateY(0); }

    .rs-sheet-handle {
        display: flex;
        justify-content: center;
        padding: 0.75rem 0 0.25rem;
    }
    .rs-sheet-handle span {
        display: block;
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
    }

    .rs-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.25rem 1rem 0.75rem;
        border-bottom: 1px solid #f3f4f6;
    }
    .rs-sheet-header__title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #111827;
    }
    .rs-sheet-header__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: #f3f4f6;
        border-radius: 50%;
        cursor: pointer;
        color: #6b7280;
        -webkit-tap-highlight-color: transparent;
    }
    .rs-sheet-header__close:active { background: #e5e7eb; }

    .rs-sheet-body { padding: 0.75rem 1rem 1rem; }
    .rs-sheet-body .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 0.85rem;
    }
    .rs-sheet-body .form-group > label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .rs-sheet-body .form-group > select,
    .rs-sheet-body .form-group > input[type="text"] {
        height: 38px;
        padding: 0 0.6rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        font-size: 0.9rem;
        color: #111827;
        outline: none;
    }
    .rs-sheet-body .form-group > select:focus,
    .rs-sheet-body .form-group > input[type="text"]:focus {
        border-color: var(--primary-blue, #2563eb);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    .rs-mob-chip-section {
        width: 100%;
        padding: 0.75rem 0 0.5rem;
        border-top: 1px solid #f3f4f6;
    }

    .rs-sheet-footer {
        display: block;
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 0.75rem 1rem;
        z-index: 1;
    }
    .btn-filter--sheet-cta {
        width: 100%;
        height: 44px;
        font-size: 0.95rem;
        font-weight: 700;
        border-radius: 10px;
        background: var(--primary-blue, #2563eb);
        color: #fff;
        border: none;
        cursor: pointer;
    }
    .btn-filter--sheet-cta:active { background: var(--primary-blue-dark, #1d4ed8); }
}