/* Hotel search widget — one markup, two modes:
   .sw--hero    large card for the home page, floating SEARCH pill
   .sw--compact slim inline bar for the listing header
   Brand colours live in :root; sizes live on .sw so modes only swap the scale. */

:root {
    --sw-primary: #0084ff;
    --sw-primary-hover: #006fd6;
    --sw-on-primary: #fff;
    --sw-surface: #fff;
    --sw-border: #e0e0e0;
    --sw-text: #141823;
    --sw-muted: #6b7280;
    --sw-shadow: 0 8px 28px rgba(16, 24, 40, .12);
    --sw-header-bg: #0084ff;
    --sw-btn-bg: linear-gradient(135deg, #7a32e6 0%, #e632a1 100%);
    --sw-btn-bg-hover: linear-gradient(135deg, #6a26d4 0%, #d4268f 100%);

    /* where the sticky site header (60px) + compact search bar (88px) end —
       other sticky page elements (Details tabs, booking card) sit below this */
    --sw-sticky-bottom: 148px;

    --sw-radius-card: 20px;
    --sw-radius-field: 12px;
    --sw-radius-btn: 30px;
}

.sw, .sw *, .sw *::before, .sw *::after { box-sizing: border-box; }

.sw {
    /* hero scale */
    --sw-pad: 20px 20px 40px;
    --sw-gap: 12px;
    --sw-field-h: 84px;
    --sw-field-pad: 10px 14px;
    --sw-label: 12px;
    --sw-value: 17px;
    --sw-value-where: 24px;
    --sw-placeholder-where: 18px;
    --sw-sub: 12px;

    position: relative;
    font-family: inherit;
    color: var(--sw-text);
    background: var(--sw-surface);
    border-radius: var(--sw-radius-card);
    box-shadow: var(--sw-shadow);
    padding: var(--sw-pad);
}

.sw--compact {
    --sw-pad: 8px;
    --sw-gap: 8px;
    --sw-field-h: 52px;
    --sw-field-pad: 6px 12px;
    --sw-label: 11px;
    --sw-value: 14px;
    --sw-value-where: 16px;
    --sw-placeholder-where: 15px;
    --sw-sub: 11px;
    border-radius: var(--sw-radius-field);
}

.sw-row {
    display: flex;
    gap: var(--sw-gap);
    align-items: stretch;
}

/* ---------- fields ---------- */
.sw-field {
    position: relative;
    min-width: 0;                       /* lets ellipsis work inside flex */
    height: var(--sw-field-h);
    padding: var(--sw-field-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-field);
    background: var(--sw-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.sw-field:hover { border-color: var(--sw-primary); }
.sw-field:focus-within,
.sw-field[open],
.sw-field.is-open {
    border-color: var(--sw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-primary) 15%, transparent);
}

.sw-field--where  { flex: 2.5; min-width: 320px; cursor: text; }
.sw-field--date,
.sw-field--guests { flex: 1; }

.sw-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sw-label);
    font-weight: 500;
    color: var(--sw-muted);
    white-space: nowrap;
    line-height: 1.2;
}
.sw-label::after {                     /* dropdown chevron */
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border: solid var(--sw-primary);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.sw-field--where .sw-label::after { display: none; }

.sw-value,
.sw-input {
    display: block;
    width: 100%;
    font-size: var(--sw-value);
    font-weight: 700;
    line-height: 1.25;
    color: var(--sw-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sw-input {
    font-family: inherit;
    font-size: var(--sw-value-where);
    border: 0;
    padding: 0;
    background: transparent;
    outline: none;
}
.sw-input::placeholder { color: var(--sw-muted); font-weight: 500; font-size: var(--sw-placeholder-where); }

.sw-sub {
    font-size: var(--sw-sub);
    color: var(--sw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sw--compact .sw-sub { display: none; }

/* native date input sits invisibly over the field; JS opens its picker */
.sw-date-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    cursor: pointer;
}

/* ---------- guests popover (native <details>) ---------- */
/* <details> can't reliably be a flex container, so the summary fills the box instead */
details.sw-field--guests { display: block; padding: 0; }
details.sw-field--guests > summary {
    list-style: none;
    height: 100%;
    padding: var(--sw-field-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    outline: none;
}
details.sw-field--guests > summary::-webkit-details-marker { display: none; }

.sw-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 260px;
    padding: 12px 16px;
    background: var(--sw-surface);
    border: 1px solid var(--sw-border);
    border-radius: var(--sw-radius-field);
    box-shadow: var(--sw-shadow);
    cursor: default;
}
.sw-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
}
.sw-step + .sw-step { border-top: 1px solid var(--sw-border); }
.sw-step-ctrl { display: flex; align-items: center; gap: 12px; }
.sw-step-ctrl output { min-width: 16px; text-align: center; }
.sw-step-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--sw-primary);
    border-radius: 50%;
    background: var(--sw-surface);
    color: var(--sw-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.sw-step-btn:disabled { border-color: var(--sw-border); color: var(--sw-border); cursor: not-allowed; }

/* ---------- dual-month calendar (anchored to the check-out field) ---------- */
.sw-cal {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 50;
    width: min(672px, calc(100vw - 2rem));
    padding: 20px;
    background: var(--sw-surface);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    cursor: default;
}

/* ---------- SEARCH button ---------- */
.sw-btn {
    border: 0;
    border-radius: var(--sw-radius-btn);
    background: var(--sw-btn-bg, var(--sw-primary));
    color: var(--sw-on-primary);
    font: inherit;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, transform .2s, box-shadow .2s;
}
.sw-btn:hover { background: var(--sw-btn-bg-hover, var(--sw-primary-hover)); box-shadow: 0 6px 18px rgba(230, 50, 161, .35); }
.sw-btn:active { transform: scale(.97); }
.sw-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-primary) 40%, transparent); outline-offset: 2px; }

.sw--hero { margin-bottom: 22px; }    /* room for the floating pill */
.sw--hero .sw-btn {
    position: absolute;
    left: 50%;
    bottom: -22px;
    height: 44px;
    padding: 0 64px;
    font-size: 18px;
    transform: translateX(-50%);
}
.sw--hero .sw-btn:hover  { transform: translateX(-50%) translateY(-2px); }
.sw--hero .sw-btn:active { transform: translateX(-50%) scale(.97); }

.sw--compact .sw-btn {
    flex: none;
    height: var(--sw-field-h);
    padding: 0 24px;
    font-size: 14px;
}

/* ---------- listing header shell ---------- */
.sw-header {
    position: sticky;
    top: 60px;                         /* sticks just under the 60px site header (_Layout) */
    z-index: 999;
    background: var(--sw-header-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    padding: 10px 16px;
}
.sw-header .sw { max-width: 1200px; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .sw-header { position: static; }  /* stacked bar is too tall to pin on phones */
    :root { --sw-sticky-bottom: 60px; }
    .sw-row { flex-wrap: wrap; }
    .sw-field--where  { flex: 1 1 100%; min-width: 0; }
    .sw-field--date   { flex: 1 1 calc(50% - var(--sw-gap)); }
    .sw-field--guests { flex: 1 1 100%; }
    .sw--compact .sw-btn { flex: 1 1 100%; }
    .sw-pop { left: 0; right: auto; width: 100%; }
    /* dates sit side by side: span both (check-in + gap + check-out) */
    .sw-cal { right: auto; left: calc(-100% - var(--sw-gap)); width: calc(200% + var(--sw-gap)); }
}
@media (max-width: 480px) {
    .sw:not(.sw--compact) { --sw-pad: 16px 16px 36px; --sw-field-h: 72px; --sw-value: 17px; --sw-value-where: 20px; }
    .sw--hero .sw-btn { padding: 0 48px; font-size: 16px; }
}