/* =============================================================================
   SearchBar.razor.css — Antologa
   Prefix: sb-
   ============================================================================= */

/* ── Keyframes ──────────────────────────────────────────────────────────────── */

@keyframes sb-fade-up {
    from { opacity: 0; transform: translateY(1.4rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sb-slide-down {
    from { opacity: 0; transform: translateY(-0.6rem) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sb-hint-in {
    0%   { opacity: 0; transform: translateY(0.5rem); }
    25%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-0.4rem); }
}

@keyframes sb-btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(7, 130, 130, 0.55); }
    60%  { box-shadow: 0 0 0 1rem rgba(7, 130, 130, 0); }
    100% { box-shadow: 0 0 0 0 rgba(7, 130, 130, 0); }
}

@keyframes sb-tab-slide-in {
    from { opacity: 0; transform: translateX(-0.6rem); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes sb-pill-switch {
    0%   { opacity: 0.6; transform: scaleY(0.97) translateY(0.3rem); }
    100% { opacity: 1;   transform: scaleY(1) translateY(0); }
}

@keyframes sb-section-pop {
    0%   { transform: scale(0.97); opacity: 0.5; }
    60%  { transform: scale(1.01); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes sb-popover-in {
    from { opacity: 0; transform: translateY(-0.5rem) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sb-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Backdrop ───────────────────────────────────────────────────────────────── */

.sb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1299;
    background: transparent;
    cursor: default;
}

/* ── Container ──────────────────────────────────────────────────────────────── */

.sb-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 72rem;
    padding: 0 1.4rem;
    position: relative;
    z-index: 1300;
    opacity: 0;
    transform: translateY(1.4rem);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-container--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */

.sb-tabs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding-bottom: 1.2rem;
    background: transparent;
    animation: sb-tab-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    margin: 0 auto;
}

.sb-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    /* Note: MudButton nests icon + label inside .mud-button-label, so the gap
       below (on .mud-button-label) is what actually separates them. */
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.45em 1em;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.2s ease,
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.15s ease;
}

.sb-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.sb-tab--active {
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: #ffffff;
}

.sb-tab__icon {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
    color: inherit !important;
    transition: transform 0.2s ease;
}

.sb-tab:hover .sb-tab__icon {
    transform: scale(1.15);
}

.sb-tab--active .sb-tab__icon {
    transform: scale(1.1);
}

.sb-tab__label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: inherit;
    color: inherit;
}

/* MudButton wraps the icon + label in this span — it's the real flex parent,
   so the icon/label spacing must be set here, not on .sb-tab. */
.sb-tab .mud-button-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* ── Hint ───────────────────────────────────────────────────────────────────── */

.sb-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
    opacity: 0;
    pointer-events: none;
    min-height: 2rem;
    margin: 0 auto;
}

.sb-hint--visible {
    animation: sb-hint-in 10s ease forwards;
}

.sb-hint__icon {
    font-size: 1rem !important;
    width: 0.95rem !important;
    height: 0.95rem !important;
    color: var(--antologa-contrast) !important;
}

.sb-hint__text {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.01em;
}

/* ── Pill ───────────────────────────────────────────────────────────────────── */

.sb-pill {
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 5.8rem;
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
    padding-right: 5.4rem;
    overflow: visible;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    animation: sb-pill-switch 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top center;
}

.sb-pill:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14);
}

.sb-pill--ready {
    border-color: rgba(7, 130, 130, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(7, 130, 130, 0.2);
}

/* ── Dividers ───────────────────────────────────────────────────────────────── */

.sb-divider {
    width: 1px;
    height: 2.8rem;
    background: #e8e8e8;
    flex-shrink: 0;
    align-self: center;
    transition: background-color 0.2s ease;
}

/* ── Sections ───────────────────────────────────────────────────────────────── */

.sb-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    height: 100%;
    padding: 0 0.95em;
    gap: 0.55rem;
    cursor: pointer;
    border-radius: 0.8rem;
    min-width: 0;
    transition: background-color 0.18s ease, transform 0.15s ease;
}

/* Location/destination fields hold the longest placeholders
   ("Where are you going?") — give them extra width so the text isn't clipped. */
.sb-section--location {
    flex: 1.5;
}

.sb-section:hover {
    background-color: #f7f7f7;
}

.sb-section:active {
    transform: scale(0.995);
}

.sb-section--active,
.sb-section:focus-within {
    background-color: #ffffff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    z-index: 21;
    animation: sb-section-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Guests section should not use :focus-within (it uses click toggles, not inputs) */
.sb-section--guests:focus-within:not(.sb-section--active) {
    background-color: transparent;
    box-shadow: none;
    z-index: auto;
    animation: none;
}

.sb-section--guests {
    flex: 1.3;
}

.sb-section--filled .sb-section__label {
    color: var(--antologa-primary);
}

/* ── Section icon ────────────────────────────────────────────────────────────── */

.sb-section__icon {
    flex-shrink: 0;
    color: #aaaaaa !important;
    font-size: 1.4rem !important;
    width: 1.4rem !important;
    height: 1.4rem !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sb-section--active .sb-section__icon,
.sb-section--filled .sb-section__icon {
    color: var(--antologa-primary) !important;
}

.sb-section:hover .sb-section__icon {
    transform: scale(1.1);
}

/* ── Section text ────────────────────────────────────────────────────────────── */

.sb-section__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 0.15rem;
}

.sb-section__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.sb-section__placeholder {
    font-family: 'Nunito', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #9e9e9e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    transition: opacity 0.15s ease;
}

.sb-section__value {
    font-family: 'Nunito', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    animation: sb-fade-up 0.2s ease both;
}

.sb-section__value--truncate {
    max-width: 14rem;
}

/* ── Location Autocomplete (MudAutocomplete inside sb-section) ──────────────── */

/* Wrapper that stacks the manual label above the MudAutocomplete input */
.sb-auto-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: 0;
}

/* The manual <span> label sits above the autocomplete input */
.sb-auto-field .sb-section__label {
    line-height: 1 !important;
    margin-bottom: 0.1rem;
}

/* ── Strip MudBlazor form-field chrome from the autocomplete ── */

.sb-location-auto {
    width: 100%;
    /* Remove MudBlazor's default bottom margin on form controls */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove bottom padding that creates space for the underline */
.sb-location-auto .mud-input-root.mud-input-root-text {
    padding-bottom: 0 !important;
    min-height: auto !important;
}

/* Remove the Text-variant underline entirely */
.sb-location-auto .mud-input-underline::before,
.sb-location-auto .mud-input-underline::after {
    border-bottom: none !important;
    display: none !important;
}

/* Hide MudBlazor's internal floating label — we use our own <span> above */
.sb-location-auto label.mud-input-label {
    display: none !important;
}

/* Hide the dropdown chevron toggle adornment — keep autocomplete functionality. */
.sb-location-auto .mud-input-adornment-end {
    display: none !important;
}

/* ...but keep the Clearable "✕" button visible (it may render inside the
   adornment depending on MudBlazor version, so re-show it explicitly). */
.sb-location-auto .mud-input-clear-button {
    display: inline-flex !important;
}

/* Slot padding (contains the actual <input>) */
.sb-location-auto .mud-input-slot {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

/* The HTML <input> element — match sb-section__value typography */
.sb-location-auto input {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    line-height: 1.2 !important;
}

.sb-location-auto input::placeholder {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #9e9e9e !important;
    opacity: 1 !important;
}

/* No focus ring on the raw input — the section's :focus-within handles it */
.sb-location-auto input:focus {
    outline: none !important;
}

/* Remove dense-margin class bottom spacing */
.sb-location-auto.mud-input-control-margin-dense {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Autocomplete dropdown list items (applies when PopoverClass uses sb-popover) */
.sb-popover .mud-list-item-clickable {
    border-radius: 0.65rem !important;
    margin-bottom: 0.1rem;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.sb-popover .mud-list-item-clickable:hover,
.sb-popover .mud-selected-item {
    background-color: #f5f5f5 !important;
}

.sb-popover .mud-list-item-clickable:hover {
    transform: translateX(0.2rem);
}

.sb-popover .mud-list {
    padding: 0.2rem 0 0 !important;
    max-height: 26rem;
    overflow-y: auto;
}

/* ── Search button ──────────────────────────────────────────────────────────── */

.sb-btn-wrap {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    flex-shrink: 0;
}

.sb-search-btn {
    background-color: #c8c8c8 !important;
    color: #ffffff !important;
    width: 4.4rem !important;
    height: 4.4rem !important;
    border-radius: 0.75rem !important;
    opacity: 0.65;
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.2s ease !important;
}

.sb-search-btn:hover {
    transform: scale(1.04);
}

.sb-search-btn--ready {
    background-color: var(--antologa-primary) !important;
    opacity: 1 !important;
    animation: sb-btn-pulse 1.8s ease-out 0.3s 1;
}

.sb-search-btn--ready:hover {
    background-color: var(--antologa-secondary) !important;
    box-shadow: 0 6px 20px rgba(7, 130, 130, 0.45) !important;
    transform: scale(1.06);
}

/* ── Popovers ───────────────────────────────────────────────────────────────── */

.sb-popover {
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.2rem;
    animation: sb-popover-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sb-popover--location {
    min-width: 28rem;
    max-width: 36rem;
}

.sb-popover--calendar {
    min-width: 34rem;
}

.sb-popover--guests {
    min-width: 24rem;
    max-width: 30rem;
}

.sb-popover__search {
    margin-bottom: 0.8rem;
}

.sb-popover__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f0f0;
    margin-top: 0.6rem;
}

.sb-popover__clear {
    color: #444444 !important;
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    padding: 0.3em 0.6em;
    transition: color 0.15s ease !important;
}

.sb-popover__clear:hover {
    color: var(--antologa-primary) !important;
}

.sb-popover__apply {
    background-color: var(--antologa-primary) !important;
    color: #ffffff !important;
    border-radius: 0.65rem !important;
    font-family: 'Nunito', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.45em 1.4em;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.sb-popover__apply:hover {
    background-color: var(--antologa-secondary) !important;
    transform: scale(1.02);
}

/* ── Destination list ───────────────────────────────────────────────────────── */

.sb-dest-list {
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.2rem 0 0 !important;
}

.sb-dest-item {
    border-radius: 0.65rem !important;
    margin-bottom: 0.15rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.sb-dest-item:hover {
    transform: translateX(0.2rem);
}

.sb-dest-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
}

.sb-dest-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.65rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sb-dest-item:hover .sb-dest-icon {
    transform: scale(1.08);
}

.sb-dest-icon--nature { background: rgba(7, 130, 130, 0.08);  color: var(--antologa-primary); }
.sb-dest-icon--beach  { background: rgba(0, 79, 113, 0.08);   color: var(--antologa-secondary); }
.sb-dest-icon--city   { background: rgba(225, 169, 81, 0.10); color: #b8851e; }

.sb-dest-info {
    flex: 1;
    min-width: 0;
}

.sb-dest-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
}

.sb-dest-type {
    font-family: 'Nunito', sans-serif;
    font-size: 0.775rem;
    color: #9e9e9e;
    margin-top: 0.1rem;
}

.sb-dest-count {
    font-size: 0.72rem;
    color: #07a0a0;
    font-weight: 600;
}

.sb-dest-arrow {
    font-size: 0.85rem !important;
    width: 0.85rem !important;
    height: 0.85rem !important;
    color: #cccccc;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-dest-item:hover .sb-dest-arrow {
    opacity: 1;
    transform: translateX(0.25rem) translateY(-0.25rem);
}

/* ── Guests popover ─────────────────────────────────────────────────────────── */

.sb-guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    transition: background-color 0.15s ease;
}

.sb-guest-divider {
    height: 1px;
    background: #f0f0f0;
}

.sb-guest-info { flex: 1; }

.sb-guest-name {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.sb-guest-age {
    font-family: 'Nunito', sans-serif;
    font-size: 0.775rem;
    color: #9e9e9e;
    margin-top: 0.15rem;
    line-height: 1.2;
}

.sb-guest-counter {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.sb-counter-btn {
    border: 1.5px solid #d4d4d4 !important;
    color: #444444 !important;
    width: 2.8rem !important;
    height: 2.8rem !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: border-color 0.18s ease,
                background 0.18s ease,
                transform 0.15s ease !important;
}

.sb-counter-btn:hover:not(:disabled) {
    border-color: #444444 !important;
    background: #f5f5f5 !important;
    transform: scale(1.08);
}

.sb-counter-btn:active:not(:disabled) {
    transform: scale(0.93);
}

.sb-counter-btn:disabled {
    opacity: 0.3 !important;
}

.sb-counter-val {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
    width: 2rem;
    text-align: center;
    transition: transform 0.15s ease;
}

.sb-pets-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 0.4rem;
}

.sb-pets-switch { margin-left: auto; }

.sb-guest-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(196, 84, 50, 0.07);
    border-radius: 0.55rem;
    padding: 0.5rem 0.8rem;
    margin-top: 0.6rem;
    animation: sb-fade-up 0.2s ease both;
}

.sb-guest-warning__icon {
    font-size: 0.95rem !important;
    color: var(--antologa-terciary);
    flex-shrink: 0;
}

.sb-guest-warning__text {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    color: var(--antologa-terciary);
    font-weight: 600;
}

/* =============================================================================
   TABLET (max-width: 1279px)
   ============================================================================= */

@media (max-width: 1279px) {

    .sb-container {
        padding: 0 1.6rem;
        max-width: 100%;
    }

    .sb-tabs {
        gap: 0;
        padding-bottom: 1.5rem;
    }

    .sb-tab {
        padding: 0.4em 0.8em;
        font-size: 1rem;
    }

    .sb-pill {
    cursor: default;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0.6rem 0.6rem 0;
        border-radius: 1.4rem;
        align-items: stretch;
        overflow: hidden;
    }

    .sb-section {
        width: 100%;
        height: auto;
        flex: none;
        padding: 1.1rem 1.2rem;
        border-radius: 0;
        border-bottom: 1px solid #f0f0f0;
        flex-direction: row;
        align-items: center;
    }

    .sb-section:last-of-type { border-bottom: none; }

    .sb-section--guests {
        flex: none;
        padding-right: 1.2rem;
    }

    .sb-divider { display: none; }

    .sb-section__value--truncate { max-width: 100%; }

    .sb-btn-wrap {
        position: static !important;
        transform: none !important;
        margin: 0.6rem -0.6rem 0;
        width: calc(100% + 1.2rem);
    }

    .sb-search-btn {
        width: 100% !important;
        height: 5.4rem !important;
        border-radius: 0 0 1.4rem 1.4rem !important;
        background-color: var(--antologa-primary) !important;
        opacity: 1 !important;
        box-shadow: none !important;
        animation: none !important;
        transform: none !important;
    }

    .sb-search-btn:not(.sb-search-btn--ready) {
        background-color: rgba(7, 130, 130, 0.55) !important;
    }

    .sb-search-btn .mud-button-label::after {
        content: "Search";
        margin-left: 0.6rem;
        font-family: 'Nunito', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        display: inline-block;
    }

    .sb-search-btn--ready {
        background-color: var(--antologa-primary) !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .sb-search-btn--ready:hover {
        background-color: var(--antologa-secondary) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .sb-popover--location,
    .sb-popover--guests {
        width: 88vw;
        max-width: 44rem;
    }

    /* ── Calendar: constrain width and show only one month on tablet ── */
    .sb-popover--calendar {
        width: min(92vw, 36rem);
        min-width: unset;
        overflow-x: hidden;
    }

    /* Hide the second month of MudDateRangePicker on tablet — keeps the
       picker compact without switching PickerVariant at runtime. */
    .sb-popover--calendar .mud-picker-calendar + .mud-picker-calendar {
        display: none;
    }

    /* Expand the visible month to use the freed space */
    .sb-popover--calendar .mud-picker-calendar {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Auto-field in tablet stacked layout */
    .sb-auto-field {
        width: 100%;
    }
}

/* =============================================================================
   MOBILE (max-width: 480px)
   ============================================================================= */

@media (max-width: 480px) {

    .sb-container { padding: 0 1rem; }

    .sb-pill {
    cursor: default;
        padding: 0.4rem 0.4rem 0;
        border-radius: 1.2rem;
    }

    .sb-btn-wrap {
        margin: 0.4rem -0.4rem 0;
        width: calc(100% + 0.8rem);
    }

    .sb-search-btn {
        border-radius: 0 0 1.2rem 1.2rem !important;
    }

    .sb-tab__label { display: none; }

    .sb-tab { padding: 0.5em 0.6em; }

    .sb-tab__icon {
        font-size: 1.2rem !important;
        width: 1.2rem !important;
        height: 1.2rem !important;
    }

    /* ── Calendar: fit the screen precisely on small phones ── */
    .sb-popover--calendar {
        width: calc(100vw - 2rem);
        min-width: unset;
        padding: 0.8rem;
    }

    /* Location and guests popovers: use full available width */
    .sb-popover--location,
    .sb-popover--guests {
        width: calc(100vw - 2rem);
        max-width: none;
    }

    /* Tighten guest counter on small screens */
    .sb-guest-counter { gap: 0.6rem; }
    .sb-counter-btn {
        width: 2.4rem !important;
        height: 2.4rem !important;
    }
    .sb-counter-val { width: 1.6rem; }
}