/* Home v4: a photo hero with one search bar, stay types, rows of stay cards,
   destinations, the booking promise, hosting and FAQ. Phones get a compact
   search pill that opens a full-screen sheet and sticks once scrolled past.
   Builds on experience.css tokens; card styles live in stay-card.css.
   Layers: sticky search 120, search sheet 380, dialog backdrop 390, dialogs 400. */

.guest-home #app {overflow-x: clip}
.home-page {padding-bottom: 32px}

/* ---------- Hero ---------- */
.home-hero {padding: 16px 0 0}
.home-hero__stage {position: relative; isolation: isolate; width: min(calc(100% - 32px), 1440px); min-height: clamp(380px, 36vw, 520px); display: grid; place-items: center; margin-inline: auto; padding: 48px 24px 124px; overflow: hidden; border-radius: 28px; background: #2a1d23; text-align: center}
.home-hero__media {position: absolute; z-index: -2; inset: 0}
.home-hero__media img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%}
.home-hero__stage::after {content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 42%, rgb(20 10 16 / 46%), rgb(20 10 16 / 12%) 70%, transparent), linear-gradient(to top, rgb(20 10 16 / 50%), transparent 55%)}
.home-hero__copy {max-width: 760px; color: #fff}
.guest-home .home-hero h1 {margin: 0 0 12px; color: #fff; font: 800 clamp(2rem, 1.2rem + 2.8vw, 3.4rem)/1.3 var(--font-display); text-shadow: 0 2px 26px rgb(0 0 0 / 32%)}
.home-hero h1 em {color: #ffd9ea; font-style: normal}
.home-hero__copy p {max-width: 640px; margin: 0 auto; color: rgb(255 255 255 / 92%); font-size: clamp(.95rem, .85rem + .3vw, 1.1rem); line-height: 1.9; text-shadow: 0 1px 14px rgb(0 0 0 / 35%)}

/* ---------- Search bar (inline on wide screens) ---------- */
.home-search-wrap {position: relative; z-index: 5; width: min(calc(100% - 64px), 1060px); margin: -88px auto 0; scroll-margin-top: 110px}
.home-search-pill, .home-search__sheet-head {display: none}
.home-search {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr) auto; align-items: center; min-height: 84px; padding: 8px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--elev-3)}
.search-field {position: relative; min-width: 0; display: grid; gap: 3px; padding: 10px 16px; border-radius: 18px; transition: background-color 180ms ease}
.search-field:hover {background: var(--soft)}
.search-field + .search-field::before {content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 0; width: 1px; background: var(--border); transition: opacity 180ms ease}
.search-field:hover::before, .search-field:hover + .search-field::before {opacity: 0}
.search-field__label {padding-inline-start: 30px; color: var(--muted); font-size: .74rem; font-weight: 600}
.home-search .destination-picker__trigger, .home-search .search-date-trigger {width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: start; cursor: pointer}
.home-search .destination-picker__trigger > .ui-icon, .home-search .search-date-trigger > .ui-icon, .search-field__select > .ui-icon {width: 20px; height: 20px; flex: 0 0 20px; color: var(--brand)}
.home-search .destination-picker__trigger > span, .home-search .search-date-trigger > span {min-width: 0}
.home-search .destination-picker__trigger b, .home-search .search-date-trigger b {display: block; overflow: hidden; color: var(--ink-strong); font-size: .95rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis}
.home-search .destination-picker__trigger small {display: block; max-width: none; overflow: hidden; color: var(--muted); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis}
.home-search .search-date-trigger:not(.has-value) b {color: var(--muted); font-weight: 600}
.search-field__select {display: flex; align-items: center; gap: 10px}
.search-field__select select {width: 100%; min-height: 34px; padding: 0; border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink-strong); font: 700 .95rem/1 var(--font-ui); cursor: pointer}
.search-field__select select option {background: var(--surface); color: var(--ink)}
.guest-home .home-search__submit {min-height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-inline-start: 6px; padding: 0 28px; border-radius: 20px; font-size: 1rem; box-shadow: 0 10px 24px rgb(142 23 79 / 26%)}
.home-search__submit .ui-icon {width: 20px; height: 20px}
.home-search__status {grid-column: 1 / -1; margin: 6px 16px 4px; color: var(--home-error); font-size: .84rem}
.home-search__status:empty {display: none}
.search-field [aria-invalid="true"] {border-radius: 8px; outline: 2px solid var(--home-error); outline-offset: 4px}

.home-quick {width: min(calc(100% - 64px), 1060px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0}
.home-quick > span {color: var(--muted); font-size: .82rem}
.home-quick a {min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .82rem; text-decoration: none; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease}
.home-quick a:hover {border-color: var(--brand); background: var(--tint); color: var(--brand)}

.home-sticky-search {display: none}

/* ---------- Sections ---------- */
.home-section {padding-top: clamp(40px, 5vw, 64px)}
.home-section__head {display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px}
.home-section__head h2 {margin: 0; color: var(--ink-strong); font: 800 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.4 var(--font-display)}
.home-section__head p {margin: 4px 0 0; color: var(--muted); font-size: .88rem}
.home-section__actions {display: flex; flex: 0 0 auto; align-items: center; gap: 14px}
.home-section__more {display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap}
.home-section__more .ui-icon {width: 16px; height: 16px; transition: translate 200ms ease}
.home-section__more:hover .ui-icon {translate: -3px 0}
.home-rail-nav {display: flex; gap: 6px}
.home-rail-nav[hidden] {display: none}
.home-rail-nav button {width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease}
.home-rail-nav button:hover:not(:disabled) {border-color: var(--ink); box-shadow: var(--elev-1)}
.home-rail-nav button:disabled {opacity: .35; cursor: default}
.home-rail-nav .ui-icon {width: 16px; height: 16px}

/* Stay types: icon tiles with live counts. */
.home-types__grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px}
.home-type {display: grid; justify-items: center; align-content: start; gap: 6px; padding: 18px 10px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--ink); text-align: center; text-decoration: none; transition: border-color 200ms ease, box-shadow 200ms ease, translate 200ms ease}
.home-type:hover {border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: var(--elev-2); translate: 0 -2px}
.home-type__icon {width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 18px; background: var(--tint); color: var(--brand)}
.home-type__icon .ui-icon {width: 28px; height: 28px; stroke-width: 1.6}
.home-type b {color: var(--ink-strong); font-size: .9rem; font-weight: 700}
.home-type small {color: var(--muted); font-size: .74rem}

/* Rows: four cards across, scrolled with the arrows or a swipe. */
.home-rail {display: grid; grid-auto-columns: calc((100% - 3 * 20px) / 4); grid-auto-flow: column; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none}
.home-rail::-webkit-scrollbar {display: none}
.home-rail > * {scroll-snap-align: start}
.home-rail--cities {grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px}
.home-city {display: grid; gap: 8px; color: var(--ink); text-decoration: none}
.home-city img {width: 100%; height: auto; aspect-ratio: 1 / 1.08; border-radius: 20px; background: var(--soft); object-fit: cover; transition: filter 240ms ease}
.home-city:hover img {filter: brightness(1.06) saturate(1.08)}
.home-city span {display: grid; gap: 1px; padding-inline: 2px}
.home-city b {color: var(--ink-strong); font-size: .95rem}
.home-city small {color: var(--muted); font-size: .76rem}

.home-empty {display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px dashed var(--border); border-radius: 20px}
.home-empty > span {width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; border-radius: 14px; background: var(--tint); color: var(--brand)}
.home-empty h2 {margin: 0; font-size: 1.05rem}
.home-empty p {margin: 2px 0 0; color: var(--muted)}

/* The booking promise. */
.home-promise__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px}
.home-promise article {display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 20px; background: var(--soft)}
.home-promise article > span {width: 44px; height: 44px; display: grid; flex: 0 0 44px; place-items: center; border-radius: 14px; background: var(--surface); color: var(--brand); box-shadow: var(--elev-1)}
.home-promise .ui-icon {width: 22px; height: 22px}
.home-promise h3 {margin: 0 0 4px; color: var(--ink-strong); font-size: .95rem}
.home-promise p {margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.8}
.home-promise a {color: var(--brand); font-weight: 700; text-decoration: none; white-space: nowrap}

/* Hosting. */
.home-host {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--tint)}
.home-host__image {order: 2; width: 100%; height: 100%; min-height: 280px; object-fit: cover}
.home-host__copy {display: grid; align-content: center; gap: 12px; padding: 40px}
.home-host__copy h2 {margin: 0; color: var(--ink-strong); font: 800 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.4 var(--font-display)}
.home-host__copy p {max-width: 440px; margin: 0; color: var(--muted); line-height: 1.9}
.home-host__copy .button {justify-self: start; margin-top: 6px}

/* FAQ. */
.home-faq__grid {display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: start; gap: 32px}
.faq-list {display: grid; gap: 10px}
.faq-item {overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface)}
.faq-item button {width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 0; background: transparent; color: var(--ink-strong); font: 700 .95rem/1.6 var(--font-ui); text-align: start; cursor: pointer}
.faq-icon {width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: rotate 220ms ease}
.faq-item.is-open .faq-icon {rotate: 45deg}
.faq-item > div > p {margin: 0; padding: 0 18px 16px; color: var(--muted); line-height: 1.9}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .home-hero__copy > * {animation: motion-rise .8s var(--motion-ease-out, cubic-bezier(.2, .8, .2, 1)) backwards}
    .home-hero__copy p {animation-delay: .1s}
    .home-hero__media img {animation: motion-ken-burns 2.8s var(--motion-ease-out, ease-out) backwards}
    .home-search-wrap {animation: motion-rise .9s var(--motion-ease-out, ease-out) .2s backwards}
}
@keyframes home-sheet-in {from {opacity: 0; translate: 0 24px}}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
    .home-search {grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto}
    .search-field {padding-inline: 12px}
    .search-field__label {padding-inline-start: 0}
    .home-search .destination-picker__trigger > .ui-icon, .home-search .search-date-trigger > .ui-icon, .search-field__select > .ui-icon {display: none}
    .guest-home .home-search__submit {padding: 0 20px}
    .home-rail {grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px}
    .home-rail--cities {grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px}
    .home-promise__grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .home-faq__grid {grid-template-columns: 1fr; gap: 8px}
}

@media (max-width: 767px) {
    body.guest-home .guest-header {position: relative}
    .home-hero {padding-top: 10px}
    .home-hero__stage {width: calc(100% - 32px); height: 236px; min-height: 0; place-items: end start; padding: 20px 18px 50px; border-radius: 24px; text-align: start}
    .home-hero__stage::after {background: linear-gradient(to top, rgb(20 10 16 / 80%), rgb(20 10 16 / 24%) 62%, transparent)}
    .home-hero__media img {object-position: 50% 68%}
    .guest-home .home-hero h1 {margin-bottom: 4px; font-size: 1.55rem}
    .home-hero__copy p {margin: 0; font-size: .82rem; line-height: 1.7}
    .home-search-wrap {width: calc(100% - 48px); margin-top: -30px}
    .home-search-pill {width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 8px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; text-align: start; box-shadow: var(--elev-3); cursor: pointer}
    .home-search-pill__icon {width: 46px; height: 46px; display: grid; flex: 0 0 46px; place-items: center; border-radius: 50%; background: var(--home-action); color: var(--home-on-action)}
    .home-search-pill__icon .ui-icon {width: 20px; height: 20px}
    .home-search-pill__text {min-width: 0; display: grid; line-height: 1.5}
    .home-search-pill__text strong {color: var(--ink-strong); font-size: .98rem}
    .home-search-pill__text small {color: var(--muted); font-size: .76rem}

    /* The form becomes a full-screen sheet. */
    .home-search {display: none}
    .home-search.is-open {position: fixed; z-index: 380; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 10px; min-height: 0; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 0; background: var(--canvas); box-shadow: none; animation: home-sheet-in 260ms cubic-bezier(.2, .8, .2, 1)}
    .home-search.is-open .home-search__sheet-head {position: sticky; z-index: 1; top: 0; grid-column: 1 / -1; min-height: 64px; display: flex; align-items: center; justify-content: space-between; background: var(--canvas)}
    .home-search__sheet-head strong {color: var(--ink-strong); font-size: 1.1rem}
    .home-search__sheet-head button {width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer}
    .home-search__sheet-head .ui-icon {width: 20px; height: 20px}
    .home-search.is-open .search-field {gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface)}
    .home-search.is-open .search-field::before {display: none}
    .home-search.is-open .search-field--destination, .home-search.is-open .search-field--guests, .home-search.is-open .home-search__status {grid-column: 1 / -1}
    .home-search .destination-picker__trigger > .ui-icon, .home-search .search-date-trigger > .ui-icon, .search-field__select > .ui-icon {display: block}
    .home-search .destination-picker__trigger, .home-search .search-date-trigger, .search-field__select select {min-height: 40px}
    .guest-home .home-search.is-open .home-search__submit {grid-column: 1 / -1; width: 100%; min-height: 58px; margin: 6px 0 0}
    body.home-search-sheet-open {overflow: hidden}
    /* The wrapper's own stacking level would otherwise keep the sheet under the site header. */
    body.home-search-sheet-open .home-search-wrap {z-index: 380; animation: none}
    body.home-search-sheet-open .guest-tabbar, body.home-search-sheet-open .home-sticky-search {visibility: hidden}

    .home-quick {width: auto; flex-wrap: nowrap; justify-content: flex-start; margin: 18px 0 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none}
    .home-quick::-webkit-scrollbar {display: none}
    .home-quick > *, .home-quick a {flex: 0 0 auto}

    .home-sticky-search {position: fixed; z-index: 120; top: 0; right: 0; left: 0; display: block; padding: 10px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 24px rgb(52 24 38 / 8%); translate: 0 -110%; transition: translate 260ms cubic-bezier(.2, .8, .2, 1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px)}
    .home-sticky-search.is-visible {translate: 0 0}
    .home-sticky-search button {width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; text-align: start; box-shadow: var(--elev-1); cursor: pointer}
    .home-sticky-search .ui-icon {width: 20px; height: 20px; color: var(--ink)}
    .home-sticky-search span {display: grid; line-height: 1.4}
    .home-sticky-search strong {color: var(--ink-strong); font-size: .9rem}
    .home-sticky-search small {color: var(--muted); font-size: .72rem}

    .home-section {padding-top: 34px}
    .home-section__head {align-items: center; margin-bottom: 14px}
    .home-section__head h2 {font-size: 1.12rem}
    .home-section__head p {font-size: .8rem}
    .home-rail-nav {display: none}

    .home-types__grid {display: grid; grid-auto-columns: 98px; grid-auto-flow: column; grid-template-columns: none; gap: 10px; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none}
    .home-types__grid::-webkit-scrollbar {display: none}
    .home-type {gap: 4px; padding: 14px 6px 12px; border-radius: 18px}
    .home-type:hover {translate: none}
    .home-type__icon {width: 48px; height: 48px; border-radius: 16px}
    .home-type__icon .ui-icon {width: 25px; height: 25px}
    .home-type b {font-size: .8rem}
    .home-type small {font-size: .68rem}

    .home-rail {grid-auto-columns: 78%; gap: 14px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px}
    .home-rail--cities {grid-auto-columns: 40%; gap: 12px}
    .home-rail .stay-card__media {border-radius: 16px}
    .home-city img {border-radius: 18px}

    .home-promise__grid {gap: 10px}
    .home-promise article {flex-direction: column; gap: 10px; padding: 16px}
    .home-promise article > span {width: 40px; height: 40px; flex-basis: 40px}

    .home-host {grid-template-columns: 1fr; border-radius: 24px}
    .home-host__image {order: 0; min-height: 0; aspect-ratio: 16 / 9}
    .home-host__copy {padding: 20px 20px 22px}
    .home-host__copy .button {justify-self: stretch}
    .faq-item button {min-height: 56px; padding: 12px 16px; font-size: .9rem}
    .faq-item > div > p {padding: 0 16px 14px; font-size: .88rem}
}

}

@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto}
    .home-search.is-open, .home-sticky-search, .home-type, .home-city img, .faq-icon, .home-section__more .ui-icon {animation: none; transition: none}
}

/* ---------- Destination and Jalali-calendar dialogs (structure used by main.js) ---------- */
.destination-picker{position:relative}.destination-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0;border:0;color:#fff;background:transparent;text-align:right;cursor:pointer}.destination-picker__trigger>span{min-width:0}.destination-picker__trigger b,.destination-picker__trigger small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.destination-picker__trigger b{font-size:.86rem}.destination-picker__trigger small{margin-top:1px;color:rgba(255,255,255,.58);font-size:.61rem;font-weight:400}.destination-picker__trigger>.ui-icon{width:21px;height:21px;flex:0 0 21px;color:#f2b8cc}.destination-panel{position:absolute;z-index:40;top:calc(100% + 18px);right:-24px;width:min(570px,calc(100vw - 40px));max-height:min(610px,72vh);padding:18px;border:1px solid #eadde2;border-radius:20px;color:var(--ink);background:#fff;box-shadow:0 26px 80px rgba(26,15,20,.3);overflow:hidden}.destination-panel[hidden]{display:none}.destination-panel__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.destination-panel__header b,.destination-panel__header small{display:block}.destination-panel__header b{font-family:Peyda,IRANSansX,sans-serif;font-size:1.05rem}.destination-panel__header small{margin-top:2px;color:var(--muted);font-size:.68rem}.destination-panel__header button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--ink);background:var(--soft);cursor:pointer}.destination-panel__header button .ui-icon{width:20px;height:20px}.destination-panel__search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:#fff}.destination-panel__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(142,23,79,.1)}.destination-panel__search .ui-icon{width:20px;height:20px;flex:0 0 20px;color:var(--muted)}.destination-panel__search input{width:100%;height:46px;padding:0;border:0;outline:0;color:var(--ink);background:transparent;font-family:inherit}.destination-panel__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:13px 0;padding:4px;border-radius:12px;background:var(--soft)}.destination-panel__tabs button{min-height:40px;border:0;border-radius:9px;color:var(--muted);background:transparent;font-weight:700;cursor:pointer}.destination-panel__tabs button.is-active{color:var(--brand);background:#fff;box-shadow:0 3px 12px rgba(49,27,37,.08)}.destination-options{max-height:370px;overflow:auto;overscroll-behavior:contain;padding-left:4px}.destination-options[hidden]{display:none}.destination-options__heading{display:block;margin:10px 2px 8px;color:var(--muted);font-size:.65rem}.destination-options__popular{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.destination-options__popular button{min-height:68px;padding:10px;border:1px solid #eadde2;border-radius:12px;color:var(--ink);background:#fffafc;cursor:pointer}.destination-options__popular b,.destination-options__popular small{display:block}.destination-options__popular b{font-size:.78rem}.destination-options__popular small{margin-top:2px;color:var(--muted);font-size:.6rem}.destination-options__list{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.destination-options__list button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 10px;border:0;border-radius:10px;color:var(--ink);background:transparent;text-align:right;cursor:pointer}.destination-options__list button:hover,.destination-options__list button:focus-visible,.destination-options button.is-selected{color:var(--brand);background:var(--tint);outline:0}.destination-options__list button span{min-width:0}.destination-options__list b,.destination-options__list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.destination-options__list b{font-size:.76rem}.destination-options__list small{margin-top:2px;color:var(--muted);font-size:.58rem}.destination-options__list .ui-icon{width:16px;height:16px;flex:0 0 16px;color:var(--muted)}.destination-option__arrow{flex:0 0 auto;color:var(--muted);font-size:.9rem}.destination-panel__empty{margin:20px 0;color:var(--muted);font-size:.78rem;text-align:center}
.destination-options__global{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:11px;min-height:64px;margin-bottom:12px;padding:10px 12px;border:1px solid #dfc6d1;border-radius:14px;color:var(--brand-dark);background:#fff8fb;text-align:right;cursor:pointer}.destination-options__global:hover,.destination-options__global:focus-visible{border-color:var(--brand);outline:3px solid rgba(142,23,79,.12)}.destination-options__global-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;color:var(--brand);background:var(--tint)}.destination-options__global-icon .ui-icon{width:22px;height:22px}.destination-options__global>span:nth-child(2){min-width:0}.destination-options__global b,.destination-options__global small{display:block}.destination-options__global b{font-size:.8rem}.destination-options__global small{margin-top:2px;color:var(--muted);font-size:.59rem}.destination-options__global-check{width:18px;height:18px;color:transparent}.destination-options__global.is-selected .destination-options__global-check{color:var(--brand)}
.search-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0;border:0;color:#fff;background:transparent;text-align:right;cursor:pointer}.search-date-trigger>span{min-width:0}.search-date-trigger b,.search-date-trigger small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-date-trigger b{font-size:.82rem}.search-date-trigger small{margin-top:1px;color:rgba(255,255,255,.58);font-size:.59rem;font-weight:400}.search-date-trigger>.ui-icon{width:20px;height:20px;flex:0 0 20px;color:#f2b8cc}.search-date-trigger.has-value b{color:#fff}.search-date-trigger:focus-visible,.search-calendar-panel button:focus-visible{outline:3px solid rgba(142,23,79,.22);outline-offset:2px}.search-field .search-date-trigger[aria-invalid=true]{outline:3px solid #ffb5a3;outline-offset:3px;border-radius:8px}
.search-calendar-panel{position:fixed;z-index:240;top:50%;left:50%;width:min(470px,calc(100vw - 32px));max-height:calc(100svh - 40px);padding:18px;overflow:auto;transform:translate(-50%,-50%);border:1px solid #eadde2;border-radius:22px;color:var(--ink);background:#fff;box-shadow:0 30px 100px rgba(25,14,19,.42)}.search-calendar-panel[hidden]{display:none}.search-calendar-panel__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.search-calendar-panel__header b,.search-calendar-panel__header small{display:block}.search-calendar-panel__header b{font-family:Peyda,IRANSansX,sans-serif;font-size:1.1rem}.search-calendar-panel__header small{min-height:20px;margin-top:2px;color:var(--muted);font-size:.7rem}.search-calendar-panel__header>button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--ink);background:var(--soft);cursor:pointer}.search-calendar-panel__header .ui-icon{width:20px;height:20px}.search-calendar-panel__toolbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;padding:9px 0;border-block:1px solid var(--border)}.search-calendar-panel__toolbar button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--brand);background:var(--tint);cursor:pointer}.search-calendar-panel__toolbar button:disabled{color:#bcb3b7;background:var(--soft);cursor:not-allowed}.search-calendar-panel__toolbar .ui-icon{width:20px;height:20px}.search-calendar-panel__toolbar strong{text-align:center;font-family:Peyda,IRANSansX,sans-serif;font-size:.95rem}.search-calendar-panel__months{padding-top:12px}.search-calendar-panel__month[hidden]{display:none}.search-calendar-panel__weekdays,.search-calendar-panel__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.search-calendar-panel__weekdays{margin-bottom:5px}.search-calendar-panel__weekdays span{padding:5px 0;color:var(--muted);font-size:.68rem;font-weight:700;text-align:center}.search-calendar-panel__weekdays span:last-child{color:#a83232}.search-calendar-panel__blank{min-height:48px}.search-calendar-panel__days button{position:relative;display:flex;min-width:0;min-height:48px;padding:5px 2px;align-items:center;justify-content:center;flex-direction:column;border:1px solid transparent;border-radius:11px;color:var(--ink);background:#fff;cursor:pointer}.search-calendar-panel__days button:hover:not(:disabled){border-color:#d9a9bf;background:var(--tint)}.search-calendar-panel__days button b{font-size:.76rem}.search-calendar-panel__days button small{color:var(--brand);font-size:.48rem}.search-calendar-panel__days button:disabled{color:#b9b2b6;background:#f7f5f6;cursor:not-allowed}.search-calendar-panel__days button.is-range{border-radius:5px;background:#f7e5ec}.search-calendar-panel__days button.is-entry,.search-calendar-panel__days button.is-exit{border-color:var(--brand);border-radius:11px;color:#fff;background:var(--brand);box-shadow:0 0 0 3px rgba(142,23,79,.12)}.search-calendar-panel__days button.is-entry small,.search-calendar-panel__days button.is-exit small{color:#fff}.search-calendar-panel__footer{display:grid;grid-template-columns:1fr 8px 1fr auto;align-items:center;gap:10px;margin-top:14px;padding:13px;border:1px solid #eadde2;border-radius:14px;background:#fffafb}.search-calendar-panel__footer span,.search-calendar-panel__footer b{display:block}.search-calendar-panel__footer span{color:var(--muted);font-size:.58rem}.search-calendar-panel__footer b{margin-top:2px;font-size:.68rem}.search-calendar-panel__footer i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.search-calendar-panel__footer button{min-height:40px;padding:7px 9px;border:0;color:var(--brand);background:transparent;font-size:.65rem;font-weight:700;cursor:pointer}

.search-modal-backdrop{position:fixed;z-index:390;inset:0;background:rgba(22,13,18,.66);backdrop-filter:blur(8px);animation:search-modal-fade .18s ease-out}.search-modal-backdrop[hidden]{display:none}body.search-modal-open{overflow:hidden}.destination-panel,.search-calendar-panel{z-index:400;animation:search-modal-rise .2s ease-out}.destination-panel{position:fixed;top:50%;right:auto;left:50%;width:min(680px,calc(100vw - 48px));max-height:calc(100svh - 48px);transform:translate(-50%,-50%);box-shadow:0 32px 110px rgba(18,10,14,.45)}.destination-options{max-height:min(420px,calc(100svh - 300px))}.search-calendar-panel{width:min(500px,calc(100vw - 48px));max-height:calc(100svh - 48px);box-shadow:0 32px 110px rgba(18,10,14,.45)}@keyframes search-modal-fade{from{opacity:0}to{opacity:1}}@keyframes search-modal-rise{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* Dialogs use the page tokens, including dark mode. */
.destination-panel, .search-calendar-panel {background: var(--surface); color: var(--ink); border-color: var(--border); border-radius: 24px; animation: none}
.destination-picker__trigger, .search-date-trigger {color: var(--ink); min-height: 44px}
.destination-picker__trigger b, .search-date-trigger b {font-size: .875rem}
.destination-picker__trigger small, .search-date-trigger small {color: var(--muted); font-size: .75rem; margin-top: 2px}
.destination-picker__trigger small {max-width: 160px}
.destination-picker__trigger > .ui-icon, .search-date-trigger > .ui-icon {color: var(--brand)}
.search-date-trigger.has-value b {color: var(--brand)}
.destination-panel__header small, .search-calendar-panel__header small {font-size: .8125rem}
.destination-panel__header button, .search-calendar-panel__header > button {background: var(--home-soft)}
.destination-panel__search {background: var(--surface); border-color: var(--border); border-radius: 12px}
.destination-options__popular button, .destination-options__global {background: var(--canvas); color: var(--ink); border-color: var(--border); border-radius: 12px}
.destination-options__popular b, .destination-options__list b, .destination-options__global b {font-size: .875rem}
.destination-options__popular small, .destination-options__list small, .destination-options__global small {font-size: .75rem}
.destination-options__heading {font-size: .8125rem}
.destination-options button.is-selected {background: var(--tint); color: var(--brand); border-color: var(--brand)}
.search-calendar-panel__days button {color: var(--ink); background: var(--surface)}
.search-calendar-panel__days button b {font-size: .875rem}
.search-calendar-panel__days button small {font-size: .6875rem}
.search-calendar-panel__days button:disabled, .search-calendar-panel__toolbar button:disabled {color: var(--muted); background: var(--home-soft); opacity: .5}
.search-calendar-panel__days button.is-range {background: var(--tint)}
.search-calendar-panel__days button.is-entry, .search-calendar-panel__days button.is-exit {background: var(--home-action); color: var(--home-on-action); border-color: var(--home-action)}
.search-calendar-panel__days button.is-entry small, .search-calendar-panel__days button.is-exit small {color: var(--home-on-action)}
.search-calendar-panel__footer {background: var(--canvas); border-color: var(--border); grid-template-columns: 1fr 1fr auto}
.search-calendar-panel__footer i {display: none}
.search-calendar-panel__footer span {font-size: .75rem}
.search-calendar-panel__footer b {font-size: .8125rem}
.search-calendar-panel__footer button {font-size: .8125rem; min-height: 44px}
.search-modal-backdrop {background: rgb(25 17 23 / 64%); backdrop-filter: none; animation: none}

/* ---------- Destination picker: one sectioned, searchable list ---------- */
.destination-options {max-height: min(480px, calc(100svh - 240px)); margin-top: 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent}
.destination-options__heading {position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 2px 8px; background: var(--surface); color: var(--muted); font-size: .8125rem; font-weight: 600}
.destination-options__heading[hidden], [data-destination-section][hidden], .destination-options [data-destination-option][hidden] {display: none}
/* While typing, matching provinces come right after "all of Iran", above cities. */
.destination-options.is-searching {display: flex; flex-direction: column}
.destination-options.is-searching > [data-destination-heading="provinces"], .destination-options.is-searching > [data-destination-section="provinces"] {order: 1}
.destination-options.is-searching > [data-destination-heading="cities"], .destination-options.is-searching > [data-destination-section="cities"] {order: 2}
.destination-options__popular button small {color: var(--muted)}
.destination-options__list {gap: 2px 8px; margin-bottom: 4px}
.destination-options__list button {min-height: 56px; padding: 8px 12px; border-radius: 12px}
.destination-options__list button span {display: grid; gap: 2px; min-width: 0}
.destination-options__list b {color: var(--ink)}
.destination-options__list small {color: var(--muted)}
.destination-options__list button.is-empty b {color: var(--muted); font-weight: 500}
.destination-options__list button.is-empty small {opacity: .8}
.destination-options__list .destination-option__check {width: 18px; height: 18px; flex: 0 0 18px; color: transparent}
.destination-options__list button.is-selected .destination-option__check {color: var(--brand)}
.destination-panel__search {min-height: 52px}

/* Phones: the destination and date dialogs rise from the bottom (after the dialog base rules above). */
@media (max-width: 650px) {
    .destination-panel, .search-calendar-panel {inset: auto 0 0; width: 100%; max-height: 88dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); transform: none; border-radius: 24px 24px 0 0}
    .destination-options {max-height: calc(88dvh - 170px)}
    .destination-options__list {grid-template-columns: 1fr}
    .destination-options__popular {grid-template-columns: repeat(3, 1fr)}
    .search-calendar-panel__weekdays, .search-calendar-panel__days {gap: 3px}
    .search-calendar-panel__days button, .search-calendar-panel__blank {min-height: 44px}
    .search-calendar-panel__footer {grid-template-columns: 1fr 1fr}
    .search-calendar-panel__footer button {grid-column: 1 / -1}
    body.guest-home.search-modal-open .guest-tabbar {visibility: hidden}