/* Landing /combo - tinh chỉnh MOBILE (≤767px).
   Mọi rule scope trong .cbf-search-overlay → desktop và các trang khác dùng chung
   box/local_search_bar.php KHÔNG bị ảnh hưởng.

   Gồm 2 nhóm:
     1. "Phòng & Số khách" → bottom-sheet đẩy từ dưới lên (kiểu .hsr-sort-sheet bên
        trang kết quả khách sạn).
     2. Điểm đi / Điểm đến → mã sân bay lớn + tên thành phố (kiểu /ve-may-bay). */

@media (max-width: 767px) {

    /* ── 1. Bottom-sheet "Phòng & Số khách" ──────────────────────────────────
       Không đổi markup/JS: dropdown vẫn do #lsComboGuestTrigger toggle class
       .active như cũ. Ở đây chỉ đổi cách trình bày.
       Dùng transform + visibility (KHÔNG dùng display:none) để có animation
       trượt lên — display:none làm transition không chạy. */
    .cbf-search-overlay .ls-combo-pax-dd {
        display: block !important;
        background: #fff !important;
        color: #1f2937 !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 22px 18px 26px !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .18) !important;
        z-index: 9972 !important;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
    }
    .cbf-search-overlay .ls-combo-pax-dd.active {
        transform: translateY(0);
        visibility: visible;
    }

    /* Nền mờ phía sau sheet.
       KHÔNG đặt trên chính .ls-combo-pax-dd: sheet có transform nên tạo stacking
       context riêng, ::before z-index:-1 sẽ nằm TRÊN nền trắng của sheet → cả
       pop-up bị phủ xám. Đặt lên #ls-panel-combo (không có transform) để scrim là
       một lớp độc lập, thấp hơn sheet.
       :has() không hỗ trợ ở trình duyệt cũ → chỉ mất lớp mờ, sheet vẫn chạy. */
    /* .cbf-search-overlay có z-index:10 → tạo stacking context, mọi thứ bên trong
       bị kẹp ở mức 10 nên FAB Zalo/Chat (.dlv-bot-fab z-index:1000) đè lên sheet.
       Khi sheet mở thì nâng cả stacking context lên trên FAB (vẫn < header 9990). */
    .cbf-search-overlay:has(.ls-combo-pax-dd.active) {
        z-index: 9970 !important;
    }

    .cbf-search-overlay #ls-panel-combo:has(.ls-combo-pax-dd.active)::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .42);
        z-index: 9971;
    }

    /* Thanh kéo nhỏ trên đỉnh sheet */
    .cbf-search-overlay .ls-combo-pax-dd::after {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: #e5e7eb;
    }

    .cbf-search-overlay .ls-combo-pax-dd .ls-pax-row {
        padding: 13px 0 !important;
    }

    /* Trigger dạng FIELD (giống các ô Điểm đi / Ngày đi bên dưới) thay cho pill viền:
         hàng 1 = nhãn nhỏ xám · hàng 2 = icon + giá trị + chevron · gạch chân dưới cùng.
       Dùng grid 3 cột để chevron luôn dính mép phải dù giá trị dài ngắn khác nhau. */
    .cbf-search-overlay #ls-panel-combo .ls-combo-paxtop { width: 100%; margin-left: 0 !important; }
    .cbf-search-overlay #ls-panel-combo .ls-combo-paxtop .ls-pax-trigger {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "cap cap cap" "ic val chev";
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
        width: 100% !important;
        height: auto !important;
        padding: 4px 0 10px !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        background: transparent !important;
        white-space: normal !important;
    }
    .cbf-search-overlay #ls-panel-combo .ls-combo-paxtop-cap {
        grid-area: cap;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #333 !important;
    }
    .cbf-search-overlay #ls-panel-combo .ls-combo-paxtop-ic {
        grid-area: ic;
        font-size: 16px !important;
    }
    .cbf-search-overlay #ls-panel-combo #lsComboGuestLabel {
        grid-area: val;
        font-size: 15px;
        font-weight: 700;
        color: #1f2937;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cbf-search-overlay #ls-panel-combo .ls-combo-paxtop .ls-pax-trigger .fa-angle-down {
        grid-area: chev;
        color: #9ca3af;
    }

    /* ── 2. Điểm đi / Điểm đến kiểu /ve-may-bay ─────────────────────────────
       Khối .cbf-od-display do combo-landing-mobile.js chèn vào .ls-typeahead.
       Ô nhập phủ trong suốt lên trên → chạm là focus gõ tìm được như cũ;
       khi focus, JS gắn .is-editing để đổi vai trò hai lớp. */
    .cbf-search-overlay .ls-combo-area-from .ls-typeahead,
    .cbf-search-overlay .ls-combo-area-to .ls-typeahead {
        position: relative;
    }
    .cbf-search-overlay .cbf-od-display {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        padding: 2px 0;
    }
    .cbf-search-overlay .cbf-od-code {
        font-size: 23px;
        font-weight: 800;
        line-height: 1.05;
        color: #1f2937;
    }
    .cbf-search-overlay .cbf-od-city {
        font-size: 12.5px;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .cbf-search-overlay .ls-typeahead.is-editing .cbf-od-display {
        display: none;
    }
    /* Cột "Đến" canh phải cho đối xứng qua nút đảo chiều; lúc đang gõ trả về
       canh trái cho dễ nhập (giống cách làm ở /ve-may-bay). */
    .cbf-search-overlay .ls-combo-area-to .cbf-od-display {
        align-items: flex-end;
    }
    .cbf-search-overlay .ls-combo-area-to .ls-typeahead.is-editing {
        text-align: left;
    }
    .cbf-search-overlay .ls-typeahead:not(.is-editing) .ls-typeahead-text {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        margin: 0;
        padding: 0;
        border: 0;
        cursor: pointer;
    }
}