/* ============================================================
   HOTEL RESULT MODIFY (search-pill)
   ============================================================ */

.hotel-modify-wrap {
    width: 100%;
    padding: 22px 0 14px;
}
.hotel-modify-wrap .search-pill {
    display: flex;
    align-items: stretch;
    background: #c10f25;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(193, 15, 37, 0.25);
    min-width: 720px;
    max-width: 100%;
    margin: 0 auto;
}
.hotel-modify-wrap .search-pill .seg {
    flex: 1 1 0;
    min-width: 0;
    color: #fff;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hotel-modify-wrap .search-pill .seg--dest {
    font-weight: 600;
}
.hotel-modify-wrap .search-pill .seg:last-of-type { border-right: none; }
.hotel-modify-wrap .search-pill .seg svg { flex-shrink: 0; opacity: 0.95; }
.hotel-modify-wrap .search-pill .modify-btn {
    background: #ff5a00;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 38px;
    font-weight: 600;
    font-size: 15px;
    margin: -6px -6px -6px 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.hotel-modify-wrap .search-pill .modify-btn:hover {
    background: #ff5a00;
    transform: translateY(-1px);
}

/* RTL: mirror the modify button gap */
[dir="rtl"] .hotel-modify-wrap .search-pill .modify-btn {
    margin: -6px 0 -6px -6px;
}

/* Tablet */
@media (max-width: 991px) {
    .hotel-modify-wrap .search-pill {
        min-width: 0;
        box-shadow: 0 4px 12px rgba(193, 15, 37, 0.18);
    }
    .hotel-modify-wrap .search-pill .seg {
        padding: 10px 16px;
        font-size: 13px;
    }
    .hotel-modify-wrap .search-pill .modify-btn {
        padding: 0 22px;
        font-size: 13px;
    }
}

/* Mobile: pill wraps and the Modify button stretches across the bottom */
@media (max-width: 767px) {
    .hotel-modify-wrap { padding: 14px 0 10px; }
    .hotel-modify-wrap .search-pill {
        flex-wrap: wrap;
        border-radius: 18px;
        padding: 6px;
    }
    .hotel-modify-wrap .search-pill .seg {
        border-right: none;
        padding: 10px 14px;
        flex: 1 1 50%;
        justify-content: center;
    }
    .hotel-modify-wrap .search-pill .seg--dest {
        flex: 1 1 100%;
        padding: 10px 14px;
    }
    .hotel-modify-wrap .search-pill .modify-btn {
        flex: 1 1 100%;
        padding: 12px;
        margin: 4px 0 0;
        border-radius: 999px;
    }
}


/* ============================================================
   HOTEL SEARCH PANEL
   ============================================================ */

/* form rows */
.search-form { display: flex; flex-direction: column; gap: 22px; }
.sf-row {
    display: flex;
    align-items: stretch;
}
.sf-row--top {
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 0;
    gap: 0;
    position: relative;
}
.sf-row--bottom {
    align-items: flex-end;
    gap: 32px;
    padding: 4px 8px 0;
}

.sf-field {
    flex: 1;
    padding: 6px 18px;
    border-right: 1px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sf-field:last-child { border-right: none; }
.sf-field--location { flex: 3.2; }
.sf-field--location.is-locked {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.city-ac-input--locked {
    color: #8a8a8a;
    cursor: not-allowed;
    min-height: 1.2em;
}

.sf-label {
    font-size: 13px;
    color: #4b5463;
    font-weight: 700;
}

/* city autocomplete */
.city-ac {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
}
.city-ac-label {
    font-size: 28px;
    font-weight: 800;
    color: #4b5463;
    line-height: 1.05;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.city-ac-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--muted, #6c6c6c);
    padding: 0;
    font-family: inherit;
    width: 100%;
}
.city-ac-input::placeholder { color: #4b5463; font-size: 14px; }

.city-ac-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: -12px;
    width: 460px;
    max-width: 80vw;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
}
.city-ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.city-ac-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.city-ac-option:hover {
    background: #fff5ee;
}
.city-ac-list li:last-child .city-ac-option {
    border-bottom: none;
}
.city-ac-option-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel_location_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5a00'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.6 7.4 11.7 7.7 11.9.2.1.4.1.6 0C12.6 21.7 20 15.6 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.city-ac-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.city-ac-option-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.city-ac-option-country {
    font-size: 12px;
    color: var(--muted, #6c6c6c);
}
.city-ac-option-code {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #ff5a00;
    background: #fff5ee;
    padding: 3px 8px;
    border-radius: 4px;
}
.hotel_building_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5a00'%3E%3Cpath d='M3 21h18v-2H3v2zM5 4v15h14V4H5zm4 4h2v2H9V8zm0 4h2v2H9v-2zm4-4h2v2h-2V8zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.city-ac-empty,
.city-ac-loading {
    margin: 0;
    padding: 12px 0;
    color: var(--muted, #6c6c6c);
    font-size: 13px;
    text-align: center;
}

/* date fields */
.sf-date {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border-bottom: 1px solid #8a8a8a;
    padding-bottom: 4px;
    width: fit-content;
    margin-top: 2px;
}
.sf-date-day {
    font-size: 24px;
    font-weight: 800;
    color: #4b5463;
    line-height: 1;
}
.sf-date-month {
    font-size: 14px;
    color: var(--text, #2b2b2b);
    font-weight: 500;
}
.sf-weekday {
    font-size: 13px;
    color: var(--muted, #6c6c6c);
    margin-top: 6px;
}

/* date divider */
.sf-date-divider {
    position: relative;
    align-self: stretch;
    height: auto;
    width: 24px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8c8c8c;
    flex-shrink: 0;
    margin: 0 22px;
}
.sf-date-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 11px;
    width: 1px;
    background: #cfcfcf;
    pointer-events: none;
}
.sf-divider--icon { margin: 0 8px; }
span.hmcalround {
    position: relative;
    z-index: 9;
    background: #f5f5f5;
    padding: 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* date field as button trigger */
.sf-field--date { position: relative; border-right: none; }
.sf-field--date.is-active {
    background: rgba(255, 90, 0, 0.08);
    border-radius: 8px;
}
.sf-field-trigger {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-field-trigger:focus { outline: none; }

/* date range popover */
.dr-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 660px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    padding: 24px 28px 18px;
    z-index: 40;
    color: var(--text, #2b2b2b);
}
.dr-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    position: relative;
}
.dr-nav {
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e3e3e3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    z-index: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dr-nav:hover { background: #ff5a00; color: #fff; border-color: #ff5a00; }
.dr-nav--prev { left: -14px; }
.dr-nav--next { right: -14px; }

.cm-head {
    text-align: center;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text, #2b2b2b);
    font-size: 14px;
}
.cm-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    gap: 4px;
}
.cm-wd {
    text-align: center;
    font-size: 11px;
    color: #999;
    font-weight: 500;
    padding: 4px 0 6px;
}
.cm-day {
    background: none;
    border: none;
    cursor: pointer;
    height: 34px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text, #2b2b2b);
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.cm-day:hover:not(:disabled) { background: #fff1e3; color: #ff5a00; }
.cm-day:disabled { cursor: default; color: #d0d0d0; }
.cm-day.muted { color: #cfcfcf; }
.cm-day.past:not(.muted) { color: #b8b8b8; text-decoration: line-through; }
.cm-day.in-range {
    background: rgba(255, 90, 0, 0.18);
    color: var(--text, #2b2b2b);
    border-radius: 5px;
}
.cm-day.range-start,
.cm-day.range-end {
    background: #ff5a00;
    color: #fff;
    font-weight: 700;
}
.cm-day.today { color: #ff5a00; font-weight: 700; }

.dr-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
}
.dr-cancel,
.dr-apply {
    border: none;
    border-radius: 6px;
    padding: 10px 32px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, opacity 0.2s;
}
.dr-cancel { background: var(--red, #c10f25); color: #fff; }
.dr-cancel:hover { background: var(--red-dark, #9d0c1e); }
.dr-apply { background: #ff5a00; color: #fff; }
.dr-apply:hover:not(:disabled) { background: #ff5a00; }
.dr-apply:disabled { opacity: 0.5; cursor: not-allowed; }

/* travellers picker */
.sf-bottom-field {
    flex: 1;
    position: relative;
    border-bottom: 1px solid #d6d6d6;
    min-width: 0;
}

.tp { position: relative; }
.tp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 4px;
    font-size: 14px;
    color: var(--text, #2b2b2b);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    gap: 8px;
}
.tp-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-trigger-chev { color: #888; flex-shrink: 0; }
.tp-trigger:hover .tp-trigger-chev { color: #ff5a00; }

.tp-popover {
    position: absolute;
    top: calc(100% + 12px);
    left: -8px;
    width: 360px;
    max-width: 92vw;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    padding: 18px;
    z-index: 30;
    /* Height is capped to the space below the trigger (set inline by
       TravellersPicker); the rooms scroll so the actions stay reachable. */
    display: flex;
    flex-direction: column;
}
.tp-popover .tp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Stop the wheel from chaining to the results page behind the modal. */
    overscroll-behavior: contain;
    /* Keep the room content clear of the scrollbar, and hold the gutter open
       so adding the room that starts the overflow doesn't shift the layout. */
    padding-right: 12px;
    margin-right: -6px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #ff5a00 #ededed;
}
/* Chrome/Safari ignore scrollbar-color, and their default bar is easy to miss
   against the white panel — make the thumb read as an affordance. */
.tp-popover .tp-scroll::-webkit-scrollbar {
    width: 8px;
}
.tp-popover .tp-scroll::-webkit-scrollbar-track {
    background: #ededed;
    border-radius: 4px;
}
.tp-popover .tp-scroll::-webkit-scrollbar-thumb {
    background: #ff5a00;
    border-radius: 4px;
}
.tp-popover .tp-scroll::-webkit-scrollbar-thumb:hover {
    background: #e04e00;
}
.tp-popover .tp-actions {
    flex: 0 0 auto;
    background: #fff;
}
.tp-actions .tp-apply { margin-top: 12px; }

.tp-room { padding: 4px 0 12px; border-bottom: 1px dashed #ececec; }
.tp-room:last-of-type { border-bottom: none; }
.tp-room + .tp-room { padding-top: 14px; }

.tp-room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
/* Room title and its occupancy count read as one line without a gap between
   them ("Room 11/7 Guest"), so space them out and set the count as a chip. */
.tp-room-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tp-room-title { font-size: 14px; font-weight: 700; color: #ff5a00; }
.tp-room-cap {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f3f5;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
/* The room is at MAX_PAX_PER_ROOM — the counters stop here. */
.tp-room-cap.is-full {
    background: #fff0e6;
    color: #ff5a00;
}
.tp-room-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f1f1;
    color: #555;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.tp-room-remove:hover { background: var(--red, #c10f25); color: #fff; }

/* Room rows: label on the left, counter on the right (demo layout) */
.tp-row-info { display: flex; flex-direction: column; gap: 2px; }
.tp-row-info .tp-row-label { margin: 0; font-weight: 600; }
.tp-row-info .tp-row-sub { margin: 0; }
.tp-room .tp-counter { gap: 12px; }
.tp-room .tp-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: #fff;
    color: var(--text, #2b2b2b);
    font-size: 16px;
}
.tp-room .tp-step:hover:not(:disabled) {
    border-color: #ff5a00;
    color: #ff5a00;
    background: #fff;
}

.tp-room-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tp-room-col { display: flex; flex-direction: column; gap: 8px; }
.tp-room-col .tp-row-label { font-size: 13px; }
.tp-room-col .tp-row-sub { font-weight: 400; color: #999; font-size: 11px; margin-left: 4px; }
.tp-room-col .tp-counter {
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    padding: 4px 10px;
    justify-content: space-between;
    width: 100%;
}
.tp-room-col .tp-step {
    background: transparent;
    color: var(--text, #2b2b2b);
    border: 1px solid #e3e3e3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
}
.tp-room-col .tp-step:hover:not(:disabled) {
    background: #ff5a00;
    color: #fff;
    border-color: #ff5a00;
}

.tp-add-room {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 14px 0 0;
    padding: 10px;
    background: #fff;
    border: 1.5px dashed #ff5a00;
    border-radius: 6px;
    color: #ff5a00;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.tp-add-room:hover:not(:disabled) { background: #fff5f0; }
.tp-add-room:disabled { opacity: 0.4; cursor: not-allowed; }
.tp-add-room-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: #ff5a00;
}
.tp-add-room:disabled .tp-add-room-plus { color: #c9c9c9; }

/* Per-child age pickers — "Age of children at check-in" block */
.tp-children-ages {
    padding: 12px 0 4px;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.tp-ages-label {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin-bottom: 10px;
}
.tp-ages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.tp-age-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tp-age-field label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

/* Custom child-age dropdown (replaces the native <select>, whose OS popup
   clipped off-screen inside the bottom sheet). */
.tp-age-dd {
    position: relative;
}
.tp-age-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text, #2b2b2b);
    background-color: #fff;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.tp-age-dd.open .tp-age-dd-trigger,
.tp-age-dd-trigger:focus {
    border-color: #ff5a00;
}
.tp-age-dd-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-age-dd-chev {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #888;
    transition: transform 0.15s;
}
.tp-age-dd-chev.open {
    transform: rotate(180deg);
}
/* The list is portalled to <body> and placed against the field by
   ChildAgeDropdown (position/top/left/width are set inline), so it is never
   clipped by the picker's scrolling room list. Scrolls internally so every
   option is always reachable. This block is the upward variant. */
.tp-age-dd-list {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
    max-height: 190px;
    overflow-y: auto;
    z-index: 60;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
/* Downward is the normal case; the list only flips up when it would run off
   the bottom of the viewport. */
.tp-age-dd-list.down {
    bottom: auto;
    top: calc(100% + 4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.tp-age-opt {
    padding: 8px 12px;
    font-size: 13px;
    color: #373e43;
    cursor: pointer;
    transition: background 0.12s;
}
.tp-age-opt:hover {
    background: #fff0e6;
    color: #ff5a00;
}
.tp-age-opt.active {
    background: #ff5a00;
    color: #fff;
    font-weight: 600;
}
/* RTL: text aligns right; chevron/padding already symmetric. */
[dir="rtl"] .tp-age-dd-trigger,
[dir="rtl"] .tp-age-opt {
    text-align: right;
}

.tp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.tp-title { font-size: 15px; font-weight: 700; color: var(--text, #2b2b2b); }
.tp-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2b2b2b;
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tp-close:hover { background: var(--red, #c10f25); }

.tp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f3f3;
}
.tp-row:last-of-type { border-bottom: none; }
.tp-row-label { margin: 0; font-weight: 700; font-size: 13px; color: var(--text, #2b2b2b); }
.tp-row-sub { margin: 2px 0 0; color: #999; font-size: 11px; }

.tp-counter { display: inline-flex; align-items: center; gap: 14px; }
.tp-step {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #ff5a00;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
}
.tp-step:hover:not(:disabled) { background: #ff5a00; }
.tp-step:disabled { opacity: 0.4; cursor: not-allowed; }
.tp-count {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text, #2b2b2b);
}

.tp-apply {
    width: 100%;
    background: #ff5a00;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    margin-top: 12px;
}
.tp-apply:hover { background: #ff5a00; }

/* star rating dropdown */
.sf-rating {
    position: relative;
    flex: 1;
    border-bottom: 1px solid #d6d6d6;
    min-width: 0;
}
.sf-rating-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 4px;
    font-size: 14px;
    color: var(--text, #2b2b2b);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.sf-rating-value { color: var(--text, #2b2b2b); }
.sf-rating-icon {
    color: #ff5a00;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
.sf-rating-chev {
    margin-left: auto;
    color: #888;
    flex-shrink: 0;
}
.sf-rating-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 30;
}
.sf-rating-option {
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 14px;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    color: var(--text, #2b2b2b);
    cursor: pointer;
}
.sf-rating-option:hover { background: #f7f3ee; color: #ff5a00; }
.sf-rating-option.selected {
    background: #fff5e9;
    color: #ff5a00;
    font-weight: 600;
}

/* nationality field — reuses .sf-rating trigger/menu, adds a stacked label,
   a search box and a country list (name + code). */
.sf-nationality-trigger {
    flex-wrap: wrap;
    row-gap: 2px;
    align-items: center;
}
.sf-nationality-tag {
    flex: 0 0 100%;
    font-size: 13px;
    font-weight: 700;
    color: #4b5463;
    line-height: 1;
}
.sf-nationality-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted, #6c6c6c);
}
.sf-nationality-menu {
    padding: 0;
    overflow: hidden;
}
.sf-nationality-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.sf-nationality-search {
    width: 100%;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.sf-nationality-search:focus { border-color: #ff5a00; }
.sf-nationality-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}
.sf-nationality-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sf-nationality-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-nationality-code {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #ff5a00;
    background: #fff5ee;
    padding: 2px 8px;
    border-radius: 4px;
}
.sf-nationality-empty {
    padding: 14px;
    text-align: center;
    color: var(--muted, #6c6c6c);
    font-size: 13px;
    list-style: none;
}

/* search button */
.sf-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ff5a00;
    color: #fff;
    padding: 13px 42px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(255, 90, 0, 0.4);
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
    align-self: center;
}
.sf-search-btn:hover { background: #e04d00; transform: translateY(-1px); }


/* ============================================================
   RESPONSIVE — TABLET (≤ 991px)
   ============================================================ */
@media (max-width: 991px) {
    .search-form { gap: 16px; }

    .sf-row--top {
        flex-wrap: wrap;
        border-radius: 14px;
    }
    .sf-field { padding: 6px 14px; }
    .sf-field--location {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #e3e3e3;
    }

    .city-ac-label { font-size: 24px; }
    .sf-date-day { font-size: 22px; }
    .sf-date-month { font-size: 13px; }

    .sf-date-divider { margin: 0 12px; width: 18px; }

    .dr-popover {
        min-width: auto;
        width: min(660px, calc(100vw - 24px));
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        padding: 18px 18px 14px;
    }
    .city-ac-dropdown {
        width: min(460px, calc(100vw - 32px));
    }

    .sf-row--bottom { gap: 16px; flex-wrap: wrap; padding: 0 4px; }
    .sf-bottom-field, .sf-rating { flex: 1 1 calc(50% - 8px); }
    .sf-search-btn {
        flex: 1 1 100%;
        justify-content: center;
        align-self: stretch;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
    .search-form { gap: 14px; }

    /* Switch the top row to a 2-row grid:
         row 1 -> Location (spans all columns)
         row 2 -> Check-in | calendar divider | Check-out
       DOM children of .sf-row--top:
         1) .sf-field--location
         2) .sf-field--date  (check-in)
         3) .sf-date-divider
         4) .sf-field--date  (check-out)
         (5) .dr-popover    (conditional; positioned fixed on mobile, ignored by grid) */
    .sf-row--top {
        display: grid;
        grid-template-columns: 1fr 36px 1fr;
        grid-template-rows: auto auto;
        align-items: stretch;
        gap: 0;
        border-radius: 14px;
        padding: 6px 0;
    }
    .sf-row--top > .sf-field--location {
        grid-column: 1 / -1;
        grid-row: 1;
        border-right: none;
        border-bottom: 1px solid #e3e3e3;
        padding: 10px 14px;
    }
    .sf-row--top > :nth-child(2) {       /* check-in field */
        grid-column: 1;
        grid-row: 2;
        border-right: none;
        padding: 12px 14px;
    }
    .sf-row--top > .sf-date-divider {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        width: auto;
        align-self: center;
        justify-self: center;
    }
    .sf-row--top > .sf-date-divider::after { display: block; }
    .sf-row--top > :nth-child(4) {       /* check-out field */
        grid-column: 3;
        grid-row: 2;
        border-right: none;
        padding: 12px 14px;
    }
.sf-date-divider::after {
    content: "";
    position: absolute;
    top: -39px;
    bottom: auto;
    right: 7px;
    width: 1px;
    background: #cfcfcf;
    pointer-events: none;
    height: 105px;
}
    .city-ac { padding: 6px 4px; }
    .city-ac-label { font-size: 20px; margin-bottom: 2px; }
    .city-ac-input { font-size: 13px; }
    .city-ac-dropdown {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: 60vh;
    }

    .sf-date { gap: 4px; }
    .sf-date-day { font-size: 20px; }
    .sf-date-month { font-size: 12px; }
    .sf-weekday { font-size: 12px; margin-top: 4px; }

    /* Date range popover: collapse to single month, edge-to-edge sheet. */
    .dr-popover {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        min-width: 0;
        max-height: 86vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 16px 14px 12px;
    }
    .dr-months { grid-template-columns: 1fr; gap: 24px; }
    .dr-nav { width: 28px; height: 28px; }
    .dr-nav--prev { left: 0; }
    .dr-nav--next { right: 0; }
    .cm-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .cm-day { height: 38px; font-size: 13px; }
    .dr-actions { padding-top: 12px; margin-top: 12px; gap: 8px; }
    .dr-cancel, .dr-apply { flex: 1; padding: 11px 0; font-size: 14px; }

    /* Bottom row: each control on its own line, full width. */
    .sf-row--bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0 4px;
    }
    .sf-bottom-field, .sf-rating {
        flex: 1 1 100%;
        width: 100%;
    }
    .sf-search-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 15px;
    }

    /* Travellers popover -> bottom sheet on mobile. */
    .tp-popover {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 86vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
        z-index: 1200;
    }

    /* Nationality menu -> bottom sheet on mobile. */
    .sf-rating-menu.sf-nationality-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
        z-index: 1200;
    }
    .sf-nationality-menu .sf-nationality-list { max-height: 62vh; }

    /* Star rating menu already fills its trigger via left:0/right:0 — keep. */
}


/* ============================================================
   RESPONSIVE — RTL ADJUSTMENTS
   ============================================================ */
[dir="rtl"] .sf-field {
    border-right: none;
    border-left: 1px solid #e3e3e3;
}
[dir="rtl"] .sf-field:last-child { border-left: none; }
/* Date fields use the calendar divider, not a field border (mirror the LTR
   `.sf-field--date { border-right: none }` exception on the flipped side). */
[dir="rtl"] .sf-field--date { border-left: none; }
[dir="rtl"] .city-ac-option { text-align: right; }
[dir="rtl"] .city-ac-option-code { margin-right: auto; margin-left: 0; }
[dir="rtl"] .dr-nav--prev { left: auto; right: -14px; }
[dir="rtl"] .dr-nav--next { right: auto; left: -14px; }
/* The RTL rules above swap the prev/next button positions, but the chevron
   glyphs still point the LTR way. Mirror them so "previous" points right
   (toward the earlier month, which sits on the right in RTL) and "next"
   points left. */
[dir="rtl"] .dr-nav svg { transform: scaleX(-1); }
[dir="rtl"] .city-ac-dropdown { left: auto; right: -12px; }
[dir="rtl"] .tp-popover { left: auto; right: -8px; }
[dir="rtl"] .sf-rating-trigger { text-align: right; }
[dir="rtl"] .sf-rating-option { text-align: right; }
[dir="rtl"] .sf-rating-chev { margin-left: 0; margin-right: auto; }
/* Date fields: right-align text but keep the date block at the start in Arabic. */
[dir="rtl"] .sf-field-trigger { text-align: right; align-items: self-start; }
/* Travellers (Room, Guests) trigger: right-align in Arabic. */
[dir="rtl"] .tp-trigger { text-align: right; }
[dir="rtl"] .sf-row--top { direction: rtl; }
[dir="rtl"] .sf-row--bottom { direction: rtl; }

@media (max-width: 991px) {
    [dir="rtl"] .sf-field--location {
        border-left: none;
        border-bottom: 1px solid #e3e3e3;
    }
}
@media (max-width: 767px) {
    /* In the mobile grid only the location row gets a separator. The two
       date fields share row 2 and need no bottom/left border. */
    [dir="rtl"] .sf-row--top > .sf-field--location {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #e3e3e3;
    }
    [dir="rtl"] .sf-row--top > .sf-field--date {
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    [dir="rtl"] .dr-nav--prev { right: 0; left: auto; }
    [dir="rtl"] .dr-nav--next { left: 0; right: auto; }
    [dir="rtl"] .city-ac-dropdown { left: 12px; right: 12px; }
}

/* ============================================================
   MOBILE BOTTOM SHEETS (react-spring-bottom-sheet content)
   The date / travellers / nationality pickers render their body
   inside a bottom sheet on mobile; give that body comfortable
   padding since the popover's own padding no longer wraps it.
   ============================================================ */
.dr-sheet { padding: 6px 14px 18px; }
.tp-sheet { padding: 16px 18px 24px; }
.sf-nationality-sheet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 12px;
}
.sf-nationality-sheet .sf-nationality-list { max-height: 60vh; }