/* The Hotels tab: search panel fields and the results layout. */
.fs-query.is-hotel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.fs-query.is-hotel .fs-date input { font-size: .9rem; letter-spacing: -.01em; }
.fs-query.is-hotel .fs-search { padding: 0 1.5rem; }
/* The date wrapper shares the box with the icon, so it must flex, not be 100%. */
.fs-query.is-hotel .fs-date { width: auto; flex: 1; min-width: 0; }
.fs-query.is-hotel .fs-field { overflow: hidden; }
.fs-query.is-hotel .fs-field:has(.fs-ac), .fs-query.is-hotel .fs-field.fs-guests { overflow: visible; }
.fs-query.is-hotel .fs-field input, .fs-query.is-hotel .fs-field select { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-field.is-plain input[type="text"], .fs-field.is-plain input::placeholder { text-transform: none; letter-spacing: 0; }
.fs-field.is-plain input { padding-right: 1.3rem; }
.fs-field .fs-x { position: absolute; right: .6rem; top: 1.15rem; border: 0; background: none; color: var(--fs-faint); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; }
.fs-ac .fs-ac-city.is-place { text-transform: none; }
.fs-query.is-hotel .fs-date input { width: 100%; min-width: 0; padding-right: 0; }
.fs-query.is-hotel input[type="date"]::-webkit-calendar-picker-indicator { width: 14px; height: 14px; margin: 0; padding: 0; opacity: .55; cursor: pointer; }
.fs-guests { cursor: pointer; }
.fs-guests input { cursor: pointer; padding-right: 1.3rem; }
.fs-guests .fs-caret { position: absolute; right: .7rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--fs-muted); pointer-events: none; }
.fs-guests-pop { position: absolute; z-index: 40; left: 0; top: calc(100% + .35rem); width: min(300px, calc(100vw - 3rem)); padding: .9rem; background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: 12px; box-shadow: 0 12px 32px rgb(16 24 40 / .14); cursor: default; }
.fs-guests-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; font-size: .88rem; color: var(--fs-ink); }
.fs-guests-row small { display: block; color: var(--fs-muted); font-size: .72rem; }
.fs-guests-row input { width: 64px; border: 1px solid var(--fs-line); border-radius: 8px; padding: .3rem .5rem; font-weight: 600; background: var(--fs-surface); color: var(--fs-ink); text-align: center; cursor: text; }
.fs-ages { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.fs-ages input { width: 56px; border: 1px solid var(--fs-line); border-radius: 8px; padding: .3rem .4rem; font-weight: 600; background: var(--fs-surface); color: var(--fs-ink); text-align: center; cursor: text; }

/* The row is sized by the panel's own width, not the viewport: with the
   sidebar open a 1440px screen leaves the panel ~1100px, which is too
   narrow for six fields even though the screen is not. */
.fs-panel { container: fs-panel / inline-size; }
/* Narrow panel: two per row, the destination and the button on their own. */
@container fs-panel (max-width: 1240px) {
.fs-query.is-hotel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-query.is-hotel .fs-field.is-plain, .fs-query.is-hotel .fs-search { grid-column: 1 / -1; }
.fs-query.is-hotel .fs-search { padding: .9rem 1rem; }
}
/* Phone: one per row. */
@container fs-panel (max-width: 600px) {
.fs-query.is-hotel { grid-template-columns: minmax(0, 1fr); padding-left: .8rem; padding-right: .8rem; }
}

.hs-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .hs-body { grid-template-columns: 1fr; } }
.hs-card { background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: 16px; }
.hs-side { display: flex; flex-direction: column; gap: .8rem; }
.hs-box { padding: 1rem; }
.hs-box h4 { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 700; color: var(--fs-ink); display: flex; align-items: center; justify-content: space-between; }
.hs-reset { border: 1px solid var(--fs-accent); color: var(--fs-accent); background: transparent; border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; cursor: pointer; }
.hs-name { display: flex; align-items: center; border: 1px solid var(--fs-line); border-radius: 10px; padding: .45rem .7rem; gap: .5rem; background: var(--fs-surface); }
.hs-name input { flex: 1; border: 0; background: transparent; outline: none; color: var(--fs-ink); min-width: 0; }
.hs-name svg { width: 18px; height: 18px; color: var(--fs-accent); }
.hs-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-chip { border: 1px solid var(--fs-line); background: var(--fs-sunk); color: var(--fs-ink); border-radius: 8px; padding: .4rem .8rem; font-size: .9rem; cursor: pointer; }
.hs-chip.on { background: var(--fs-accent); border-color: var(--fs-accent); color: var(--fs-accent-ink); }
.hs-chip .st { color: #f79009; }
.hs-chip.on .st { color: #fff; }
.hs-check { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .95rem; color: var(--fs-ink); cursor: pointer; }
.hs-check input { width: 18px; height: 18px; accent-color: var(--fs-accent); }
.hs-more { margin-top: .4rem; border: 0; background: var(--fs-sunk); color: var(--fs-ink); border-radius: 6px; padding: .3rem .6rem; font-size: .85rem; cursor: pointer; }
.hs-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.hs-tool { padding: .6rem 1.1rem; border: 1px solid var(--fs-line); border-radius: 10px; background: var(--fs-surface); color: var(--fs-ink); font-weight: 600; cursor: pointer; }
.hs-tool.count { cursor: default; }
.hs-tool.on { background: var(--fs-accent); border-color: var(--fs-accent); color: var(--fs-accent-ink); }
.hs-list { display: flex; flex-direction: column; gap: .8rem; }
.hs-hotel { display: grid; grid-template-columns: 290px minmax(0, 1fr) 220px; gap: 1rem; padding: .8rem; }
@media (max-width: 1100px) { .hs-hotel { grid-template-columns: 1fr; } }
.hs-photo { border-radius: 10px; background: var(--fs-sunk) center/cover no-repeat; min-height: 250px; }
.hs-hname { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 700; color: var(--fs-ink); margin: .2rem 0; flex-wrap: wrap; }
.hs-stars { color: #f79009; letter-spacing: 1px; font-size: 1rem; }
.hs-stars .off { color: var(--fs-line); }
.hs-addr { display: flex; gap: .4rem; align-items: flex-start; color: var(--fs-ink); font-size: .95rem; margin: .25rem 0; }
.hs-addr svg { width: 18px; height: 18px; flex: none; color: var(--fs-muted); margin-top: .15rem; }
.hs-rating { color: var(--fs-ok); font-weight: 600; margin: .3rem 0 .6rem; font-size: .95rem; }
.hs-rating span { color: var(--fs-muted); font-weight: 500; }
.hs-panel { background: var(--fs-sunk); border-radius: 10px; padding: .7rem .9rem; }
.hs-panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.hs-perk { font-weight: 600; color: var(--fs-ink); }
.hs-free { color: var(--fs-ok); font-size: .9rem; margin-top: .15rem; }
.hs-details { border: 1px solid var(--fs-line); background: var(--fs-surface); border-radius: 8px; padding: .4rem .8rem; font-weight: 600; color: var(--fs-ink); cursor: pointer; white-space: nowrap; }
.hs-panel-bot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.hs-icons { display: flex; gap: .3rem; flex-wrap: wrap; }
.hs-ico { width: 30px; height: 26px; border: 1px solid var(--fs-line); border-radius: 6px; background: var(--fs-surface); display: grid; place-items: center; color: var(--fs-ink); font-size: .7rem; font-weight: 700; }
.hs-meta { display: flex; align-items: center; gap: .6rem; color: var(--fs-muted); font-size: .85rem; }
.hs-tag { border: 1px solid var(--fs-line); background: var(--fs-surface); border-radius: 6px; padding: .2rem .5rem; color: var(--fs-ink); font-weight: 600; }
.hs-facs { margin-top: .6rem; color: var(--fs-muted); font-size: .85rem; line-height: 1.6; }
.hs-buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; gap: .25rem; }
.hs-amt { font-size: 1.6rem; font-weight: 800; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.hs-note { color: var(--fs-muted); font-size: .8rem; line-height: 1.35; }
.hs-see { margin-top: .5rem; display: inline-flex; align-items: center; gap: .3rem; background: var(--fs-accent); color: var(--fs-accent-ink); border-radius: 8px; padding: .6rem 1.1rem; font-weight: 700; text-decoration: none; }
.hs-see svg { width: 16px; height: 16px; }
.hs-empty { padding: 2rem; text-align: center; color: var(--fs-muted); }
.hs-filters-btn { display: none; }
/* While a filter tick is in flight: the sidebar dims and stops taking
   clicks, and the list gives way to placeholder cards. */
.hs-side.is-busy { opacity: .55; pointer-events: none; }
.hs-skeleton { display: none; flex-direction: column; gap: .8rem; }
.hs-skel { display: grid; grid-template-columns: 290px minmax(0, 1fr) 220px; gap: 1rem; padding: .8rem; }
@media (max-width: 1100px) { .hs-skel { grid-template-columns: 1fr; } }
.hs-bone { border-radius: 8px; background: linear-gradient(90deg, var(--fs-sunk) 25%, color-mix(in srgb, var(--fs-sunk) 60%, var(--fs-surface)) 50%, var(--fs-sunk) 75%); background-size: 400% 100%; animation: hs-shimmer 1.3s ease-in-out infinite; }
.hs-bone.photo { min-height: 250px; border-radius: 10px; }
.hs-bone.line { height: 14px; margin-bottom: .6rem; }
.hs-bone.title { height: 24px; width: 60%; margin-bottom: .8rem; }
.hs-bone.block { height: 96px; margin-top: .4rem; border-radius: 10px; }
.hs-bone.price { height: 30px; width: 70%; margin-left: auto; }
.hs-bone.btn { height: 40px; width: 55%; margin-left: auto; margin-top: 1rem; }
@keyframes hs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hs-bone { animation: none; } }
.hs-more-btn { margin-top: .4rem; width: 100%; padding: .8rem; border: 1px solid var(--fs-line); border-radius: 12px; background: var(--fs-surface); color: var(--fs-ink); font-weight: 700; cursor: pointer; }
.hs-more-btn:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
@media (max-width: 640px) {
.hs-body { margin-top: 1rem; gap: .8rem; }
/* Filters fold away on a phone so the first hotel is not a screen of
   checkboxes down; the Filters button opens them above the list. */
.hs-side { display: none; }
.hs-side.is-open { display: flex; }
.hs-filters-btn { display: inline-flex; align-items: center; gap: .35rem; }
.hs-filters-btn svg { width: 16px; height: 16px; }
.hs-tools { gap: .4rem; }
.hs-tool { padding: .5rem .8rem; font-size: .85rem; }
.hs-photo { min-height: 180px; }
.hs-hname { font-size: 1.15rem; }
.hs-buy { align-items: flex-start; text-align: left; }
.hs-see { width: 100%; justify-content: center; }
.hs-chips { gap: .4rem; }
.hs-chip { padding: .35rem .6rem; font-size: .85rem; }
}