/* /Components/BookingDetailsSummary.razor.rz.scp.css */
/*
    Booking-details summary — unified look adopted from ConfirmPage's
    stay-details (darker labels/values), with an explicit .total-row separator
    (instead of :last-child) so the divider never lands on a non-total last row,
    plus the non-USD .original-amount line ported from UpdateBookings.
*/

.booking-details-summary[b-wahyyv9l17] {
    display: flex;
    flex-direction: column;
}

/* When the host card supplies no inner padding (UpdateBookings' .booking-card),
   the component frames its own section to match the old .booking-info block. */
.booking-details-summary.padded[b-wahyyv9l17] {
    padding: 2rem;
    border-bottom: 1px solid var(--color-background);
}

.stay-details[b-wahyyv9l17] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-row[b-wahyyv9l17] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-background);
}

.detail-row:last-child[b-wahyyv9l17] {
    border-bottom: none;
}

.detail-label[b-wahyyv9l17] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.detail-value[b-wahyyv9l17] {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Room description bullets each get their own line inside the value cell. */
.detail-value .description-line[b-wahyyv9l17] {
    display: block;
}

/* Bullet lines sit slightly in from the margin, and a bullet that wraps lines its
   second line up after the "- " rather than under the dash. The row is a flex
   space-between, so the value block still hugs the right edge — only its own text
   moves. The unbulleted first segment stays flush. */
.detail-value .description-line.bullet[b-wahyyv9l17] {
    padding-left: 1.5rem;
    text-indent: -0.75rem;
}

/* Explicit total separator (replaces ConfirmPage's .detail-row:last-child rule). */
.total-row[b-wahyyv9l17] {
    border-top: 2px solid var(--color-background);
    margin-top: 0.5rem;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.total-amount[b-wahyyv9l17] {
    font-size: 1.25rem;
    color: #059669;
}

.original-amount[b-wahyyv9l17] {
    display: block;
    width: 100%;
    text-align: right;
    font-size: 0.875rem;
    color: var(--color-text-placeholder);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Guest info — separated from the stay details by a top divider within the card. */
.guest-info[b-wahyyv9l17] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--color-background);
}

.guest-info h5[b-wahyyv9l17] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.guest-details[b-wahyyv9l17] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .booking-details-summary.padded[b-wahyyv9l17] {
        padding: 1.5rem;
    }

    .detail-row[b-wahyyv9l17] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .detail-value[b-wahyyv9l17] {
        align-self: flex-end;
    }

    /* Keep the total amount and its original-currency line right-aligned together. */
    .total-row .total-amount[b-wahyyv9l17] {
        align-self: flex-end;
    }
}
/* /Components/BookingForm.razor.rz.scp.css */
.reserve-section[b-nqz6p2g0ts] {
    margin-bottom: 2.2rem;
}

.reserve-section h2[b-nqz6p2g0ts] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--color-text-primary);
}

.form-row[b-nqz6p2g0ts] {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

/* Figma › Input (37:54) — the same box as the search bar's destination field, which the
   design system carries as `.fc-figma .field` (components.css). A bare <input> takes that
   spec directly, through the same tokens rather than new literals: Spacing/12 + Spacing/16
   padding, radius 12, Color/Surface on Color/Border, Body/Regular 16/24, Color/Text Primary.

   `::deep` is REQUIRED on every rule below, not stylistic: the fields are rendered by
   <InputText>/<InputNumber>, which are child components, so Blazor's CSS isolation never
   stamps this component's scope attribute onto their <input> elements. A plain `.input`
   selector compiles to `.input[b-…]` and matches nothing — which is why these fields showed
   browser defaults (square corners, ~2px of padding) no matter what this file said. */
[b-nqz6p2g0ts] .input {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font: var(--font-body-md);
    color: var(--color-text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

[b-nqz6p2g0ts] .input::placeholder {
    color: var(--color-text-placeholder);
}

/* Figma "State / Focus" is a border-colour change to Color/Text Primary — no glow. */
[b-nqz6p2g0ts] .input:focus {
    outline: none;
    border-color: var(--color-text-primary);
}

[b-nqz6p2g0ts] .input.short {
    width: 50%;
}

/* Consent row: the checkbox is a child component, so it needs ::deep to be sized here.
   `align-items: baseline` keeps the box on the text's first line when the sentence wraps. */
.agree-row[b-nqz6p2g0ts] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    color: var(--color-text-primary);
}

.agree-row[b-nqz6p2g0ts]  input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.radio-row[b-nqz6p2g0ts] {
    margin-bottom: 0;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

.radio-row label[b-nqz6p2g0ts] {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.radio-row InputRadioGroup[b-nqz6p2g0ts] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-row InputRadio[b-nqz6p2g0ts] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--color-text-primary);
}

.reserve-note[b-nqz6p2g0ts] {
    color: var(--color-text-placeholder);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-style: italic;
}

.reserve-submit[b-nqz6p2g0ts] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.reserve-submit:enabled[b-nqz6p2g0ts] {
    background: var(--color-primary-navy);
}

.reserve-submit:enabled:hover[b-nqz6p2g0ts] {
    background: var(--color-primary-navy);
}

.reserve-submit:disabled[b-nqz6p2g0ts] {
    background: var(--color-border);
    cursor: not-allowed;
}

.user-details-summary[b-nqz6p2g0ts] {
    background-color: var(--color-background);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.user-details-summary p[b-nqz6p2g0ts] {
    margin: 0.5rem 0;
    color: var(--color-text-primary);
}

.btn-link[b-nqz6p2g0ts] {
    background: none;
    border: none;
    color: var(--color-primary-navy);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
}

.btn-link:hover[b-nqz6p2g0ts] {
    color: var(--color-primary-navy);
}

.form-actions[b-nqz6p2g0ts] {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.btn-secondary[b-nqz6p2g0ts] {
    background-color: var(--color-text-placeholder);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-secondary:hover[b-nqz6p2g0ts] {
    background-color: #5a6268;
}

.spinner-border[b-nqz6p2g0ts] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm[b-nqz6p2g0ts] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

.me-2[b-nqz6p2g0ts] {
    margin-right: 0.5rem;
}

@@keyframes spinner-border {
    to[b-nqz6p2g0ts] {
        transform: rotate(360deg);
    }
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 992px) {
    .form-row[b-nqz6p2g0ts] {
        flex-direction: column;
        gap: 0.8rem;
    }
    [b-nqz6p2g0ts] .input.short {
        width: 100%;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .form-row[b-nqz6p2g0ts] {
        flex-direction: column;
        gap: 0.8rem;
    }
    [b-nqz6p2g0ts] .input.short {
        width: 100%;
    }
    .radio-row[b-nqz6p2g0ts] {
        margin-bottom: 1.2rem;
    }
    .radio-row label[b-nqz6p2g0ts] {
        font-size: 0.95rem;
    }
    .radio-row InputRadioGroup[b-nqz6p2g0ts] {
        gap: 0.4rem;
    }
    .radio-row InputRadio[b-nqz6p2g0ts] {
        font-size: 0.95rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .reserve-section[b-nqz6p2g0ts] {
        margin-bottom: 1.8rem;
    }
    .reserve-section h2[b-nqz6p2g0ts] {
        font-size: 1.1rem;
    }
    .form-row[b-nqz6p2g0ts] {
        flex-direction: column;
        gap: 0.6rem;
    }
    /* Size is fixed by the design (12/16 padding, 16/24 text) at every breakpoint.
       Shrinking the font below 16px also makes iOS zoom the page on focus. */
    [b-nqz6p2g0ts] .input.short {
        width: 100%;
    }
    .radio-row[b-nqz6p2g0ts] {
        margin-bottom: 1rem;
    }
    .radio-row label[b-nqz6p2g0ts] {
        font-size: 0.9rem;
    }
    .radio-row InputRadioGroup[b-nqz6p2g0ts] {
        gap: 0.3rem;
    }
    .radio-row InputRadio[b-nqz6p2g0ts] {
        font-size: 0.9rem;
    }
    .reserve-submit[b-nqz6p2g0ts] {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .reserve-section[b-nqz6p2g0ts] {
        margin-bottom: 1.5rem;
    }
    .reserve-section h2[b-nqz6p2g0ts] {
        font-size: 1rem;
    }
    .form-row[b-nqz6p2g0ts] {
        flex-direction: column;
        gap: 0.5rem;
    }

    [b-nqz6p2g0ts] .input.short {
        width: 100%;
    }
    .radio-row[b-nqz6p2g0ts] {
        margin-bottom: 0.8rem;
    }
    .radio-row label[b-nqz6p2g0ts] {
        font-size: 0.85rem;
    }
    .radio-row InputRadioGroup[b-nqz6p2g0ts] {
        gap: 0.25rem;
    }
    .radio-row InputRadio[b-nqz6p2g0ts] {
        font-size: 0.85rem;
    }
    .reserve-note[b-nqz6p2g0ts] {
        font-size: 0.8rem;
    }
    .reserve-submit[b-nqz6p2g0ts] {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 375px) {
    .reserve-section h2[b-nqz6p2g0ts] {
        font-size: 0.95rem;
    }

    .radio-row label[b-nqz6p2g0ts] {
        font-size: 0.8rem;
    }
    .radio-row InputRadio[b-nqz6p2g0ts] {
        font-size: 0.8rem;
    }
    .reserve-submit[b-nqz6p2g0ts] {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reserve-submit[b-nqz6p2g0ts],
    [b-nqz6p2g0ts] .input {
        transition: none;
    }
}

.reserve-submit:focus[b-nqz6p2g0ts] {
    outline: 2px solid var(--color-primary-navy);
    outline-offset: 2px;
}

/* The design's focus state is the border alone, which is a weak signal for keyboard
   users — so the ring is kept, but on :focus-visible only. Pointer focus then looks
   exactly like Figma while tabbing still shows where you are. */
[b-nqz6p2g0ts] .input:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

/* Figma "State / Error": Color/Error Border with Color/Error text.
   `:user-invalid`, not `:invalid` — the latter matches an untouched required field, so
   every empty box rendered red on arrival, which is the design's *Placeholder* state.
   `.invalid` is the class Blazor's EditForm puts on a field its validator rejected. */
[b-nqz6p2g0ts] .input:user-invalid,
[b-nqz6p2g0ts] .input.invalid {
    border-color: var(--color-error-border);
    color: var(--color-error);
}

[b-nqz6p2g0ts] .input:user-invalid::placeholder,
[b-nqz6p2g0ts] .input.invalid::placeholder {
    color: var(--color-error);
}

/* No "valid" state exists in the design — the green border and glow that used to paint
   every filled field are gone rather than restyled. */

.validation-message[b-nqz6p2g0ts] {
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
/* /Components/BookingSummary.razor.rz.scp.css */
.booking-summary[b-58yerbko2n] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 2rem 1.5rem;
}

.booking-summary h2[b-58yerbko2n] {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.summary-img[b-58yerbko2n] {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    background: #eee;
    margin-bottom: 1rem;
}

.summary-hotel[b-58yerbko2n] {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

/* The panel is read-only content, not form input — every block uses the normal body
   colour. The placeholder grey is reserved for unfilled inputs. */
.summary-address[b-58yerbko2n] {
    color: var(--color-text-primary);
    font-size: 1.02rem;
    margin-bottom: 0.7rem;
    line-height: 1.4;
}

/* Stay recap: four prose lines, not a label/value table. The old grid is gone, so the
   column sizing that went with it is too. */
.summary-details[b-58yerbko2n] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--color-text-primary);
}

/* The room and the dates are the two facts the guest scans for, so both are weighted;
   the meal and the party size read as supporting detail at normal weight. */
.summary-room[b-58yerbko2n],
.summary-stay[b-58yerbko2n] {
    font-weight: 600;
}

.summary-meal[b-58yerbko2n],
.summary-guests[b-58yerbko2n] {
    font-weight: 400;
    color: var(--color-text-primary);
}

/* "Pay now" / "Pay at hotel" is a section title for the price block, weighted like the
   hotel name above and the cancellation-policy heading below rather than like a value. */
.summary-payment-title[b-58yerbko2n] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.6rem;
}

/* The badge inherits the title's weight and size — its own 500 would undercut them. */
.summary-payment-title .payment-type-badge[b-58yerbko2n] {
    font: inherit;
    color: inherit;
}


.summary-val[b-58yerbko2n] {
    font-weight: 500;
    color: var(--color-text-primary);
    min-width: 0;
}

.summary-total[b-58yerbko2n] {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1rem 0;
    color: var(--color-text-primary);
}

/* The same charge restated in the hotel's currency — sits directly under the USD total,
   unlabelled and unbolded so it reads as a companion to it and not a second bill. No
   description of its own, so it is simply pushed to the amount column. */
.summary-total-local[b-58yerbko2n] {
    font-size: 1rem;
    margin: -0.5rem 0 1rem;
    color: var(--color-text-primary);
    text-align: right;
}

.summary-policy[b-58yerbko2n] {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    margin-top: 1.2rem;
    line-height: 1.4;
}

/* Price block: description on the left, amount on the right, on every line. */
.summary-price-row[b-58yerbko2n] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

/* The amount column never wraps — a broken "USD $1,248.07" is unreadable. */
.summary-price-row > :last-child[b-58yerbko2n] {
    white-space: nowrap;
}

/* The per-night rows carry no heading of their own — they read as price rows like any
   other, and the rule above the last one is what marks it as their sum. */
.summary-nightly[b-58yerbko2n] {
    margin: 0 0 0.5rem;
}

.summary-nightly .nightly-date[b-58yerbko2n] {
    white-space: nowrap;
}

/* The line the nightly rates add up to. */
.summary-nightly .nightly-total[b-58yerbko2n] {
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

/* Room Details — title + description lines carried over from the rate card */
.summary-room-details[b-58yerbko2n] {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    margin-top: 1.2rem;
    line-height: 1.4;
}

.summary-room-details .room-details-title[b-58yerbko2n] {
    color: var(--color-text-primary);
    font-weight: 600;
    margin: 0.4rem 0;
}

.summary-room-details .room-description[b-58yerbko2n] {
    font-size: 0.9em;
}

.summary-room-details .description-line[b-58yerbko2n] {
    margin-bottom: 0.2rem;
}

/* Refundability badge */
.cancellation-refundable[b-58yerbko2n] {
    margin: 0.4rem 0;
}

.refundable-badge[b-58yerbko2n] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.refundable-badge.refundable[b-58yerbko2n] {
    background-color: #22c55e;
}

.refundable-badge.conditional[b-58yerbko2n] {
    background-color: #f59e0b;
}

.refundable-badge.non-refundable[b-58yerbko2n] {
    background-color: #ef4444;
}

/* Payment type badge + tooltip */
/* No horizontal padding: these badges carry a colour, not a filled pill (see the
   .payment-* rules below, which set only `color`), so the 6px was doing no visual work
   and simply pushed this value right of the others in the aligned value column. */
.payment-type-badge[b-58yerbko2n] {
    position: relative;
    display: inline-block;
    cursor: help;
    font-weight: 500;
    padding: 2px 0;
    border-radius: 4px;
    color: var(--color-text-primary);
}

.payment-type-badge .payment-type-tooltip[b-58yerbko2n] {
    visibility: hidden;
    opacity: 0;
    width: 230px;
    background-color: var(--color-primary-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    pointer-events: none;
    line-height: 1.4;
}

.payment-type-badge .payment-type-tooltip[b-58yerbko2n]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
}

.payment-type-badge:hover .payment-type-tooltip[b-58yerbko2n] {
    visibility: visible;
    opacity: 1;
}

.payment-guarantee[b-58yerbko2n] { color: var(--color-text-primary); }
.payment-deposit[b-58yerbko2n]   { color: var(--color-text-primary); }
.payment-prepay[b-58yerbko2n]    { color: var(--color-text-primary); }
.payment-holdtime[b-58yerbko2n]  { color: var(--color-text-primary); }


/* Responsive styles */
@media (max-width: 1399px) and (min-width: 1200px) {
    .booking-summary[b-58yerbko2n] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .booking-summary[b-58yerbko2n] {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .booking-summary[b-58yerbko2n] {
        padding: 1.5rem 1rem;
    }
    .summary-img[b-58yerbko2n] {
        width: 100px;
        height: 100px;
    }
    .summary-hotel[b-58yerbko2n] {
        font-size: 1.1rem;
    }
    .summary-address[b-58yerbko2n] {
        font-size: 0.98rem;
    }
    .summary-total[b-58yerbko2n] {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .booking-summary[b-58yerbko2n] {
        padding: 1.25rem 0.75rem;
    }
    .booking-summary h2[b-58yerbko2n] {
        font-size: 1.2rem;
    }
    .summary-img[b-58yerbko2n] {
        width: 90px;
        height: 90px;
    }
    .summary-hotel[b-58yerbko2n] {
        font-size: 1.05rem;
    }
    .summary-address[b-58yerbko2n] {
        font-size: 0.95rem;
    }
    .summary-total[b-58yerbko2n] {
        font-size: 1.05rem;
    }
}

@media (max-width: 575px) {
    .booking-summary[b-58yerbko2n] {
        padding: 1rem 0.75rem;
    }
    .booking-summary h2[b-58yerbko2n] {
        font-size: 1.1rem;
    }
    .summary-img[b-58yerbko2n] {
        width: 80px;
        height: 80px;
    }
    .summary-hotel[b-58yerbko2n] {
        font-size: 1rem;
    }
    .summary-address[b-58yerbko2n] {
        font-size: 0.9rem;
    }
    .summary-val[b-58yerbko2n] {
        font-size: 0.9rem;
    }
    .summary-total[b-58yerbko2n] {
        font-size: 1rem;
    }
    .summary-policy[b-58yerbko2n],
    .summary-room-details[b-58yerbko2n] {
        font-size: 0.9rem;
    }
    .booking-summary > div[b-58yerbko2n] {
        margin-bottom: 0.5rem;
    }
    .booking-summary hr[b-58yerbko2n] {
        margin: 0.75rem 0;
    }
}

@media (max-width: 375px) {
    .booking-summary[b-58yerbko2n] {
        padding: 0.75rem 0.5rem;
    }
    .booking-summary h2[b-58yerbko2n] {
        font-size: 1rem;
    }
    .summary-img[b-58yerbko2n] {
        width: 70px;
        height: 70px;
    }
    .summary-hotel[b-58yerbko2n] {
        font-size: 0.95rem;
    }
    .summary-address[b-58yerbko2n] {
        font-size: 0.85rem;
    }
    .summary-total[b-58yerbko2n] {
        font-size: 0.95rem;
    }
    .summary-policy[b-58yerbko2n],
    .summary-room-details[b-58yerbko2n] {
        font-size: 0.85rem;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .summary-img[b-58yerbko2n] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
} 
/* /Components/CancellationPolicyDisplay.razor.rz.scp.css */
.cancellation-policy-display[b-gxdwvgmt0l] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1rem;
}

.cancellation-policy-title[b-gxdwvgmt0l] {
    background-color: #fff3cd;
    color: #856404;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.cancellation-refundable[b-gxdwvgmt0l] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f1f3f4;
}

.refundable-badge[b-gxdwvgmt0l] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.refundable-badge.refundable[b-gxdwvgmt0l] {
    background-color: #22c55e;
}

.refundable-badge.non-refundable[b-gxdwvgmt0l] {
    background-color: var(--color-error);
}

.refundable-badge.conditional[b-gxdwvgmt0l] {
    background-color: #f59e0b;
}

.cancellation-item[b-gxdwvgmt0l] {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #f1f3f4;
}

.cancellation-item:last-child[b-gxdwvgmt0l] {
    border-bottom: none;
}

.cancellation-row[b-gxdwvgmt0l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    gap: 1rem;
}

.cancellation-label[b-gxdwvgmt0l] {
    color: var(--color-text-placeholder);
    font-weight: 500;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.cancellation-value[b-gxdwvgmt0l] {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
}

.cancellation-description[b-gxdwvgmt0l] {
    color: var(--color-text-placeholder);
    font-size: 0.85rem;
    padding: 0.25rem 0;
}

.cancellation-description p[b-gxdwvgmt0l] {
    margin: 0;
}

.cancellation-hotel-policy[b-gxdwvgmt0l] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f1f3f4;
    color: var(--color-text-placeholder);
    font-size: 0.85rem;
}

.cancellation-hotel-policy p[b-gxdwvgmt0l] {
    margin: 0 0 0.4rem 0;
}

.cancellation-hotel-policy p:last-child[b-gxdwvgmt0l] {
    margin-bottom: 0;
}
/* /Components/DateRangePicker.razor.rz.scp.css */
/* Visual (border/radius/padding/height/flex) comes from the design-system
   .field + .hotel-search__field--date in css/components.css. Keep only the
   popup anchor + interaction bits here. */
/* Wrapper is the flex item (sizing from .hotel-search__field--date) + popup
   anchor; the .field visual lives on the <button> trigger that fills it. */
.date-range-input[b-85b81agvkq] {
    position: relative;
    user-select: none;
    overflow: visible;
}

.date-trigger[b-85b81agvkq] {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    cursor: pointer;
}

.date-display[b-85b81agvkq] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.placeholder-text[b-85b81agvkq],
.date-range[b-85b81agvkq] {
    white-space: nowrap;
}

.placeholder-text[b-85b81agvkq] {
    color: #888;
    font-size: 1rem;
}

/* Figma › Hotel Search date field: Body/Regular (not bold), tight spacing,
   en-dash separator matching the text. Font comes from .field (body-md). */
.date-range[b-85b81agvkq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font: inherit;
}

.check-in-date[b-85b81agvkq], .check-out-date[b-85b81agvkq] {
    font-weight: 400;
    color: var(--color-text-primary);
}

.date-separator[b-85b81agvkq] {
    color: var(--color-text-primary);
    font: inherit;
}

.date-picker-popup[b-85b81agvkq] {
    position: absolute;
    top: 3rem;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 1rem;
    z-index: 1000;
    min-width: 280px;
}

.date-picker-popup.dual-month[b-85b81agvkq] {
    min-width: 580px;
    padding: 1.5rem;
}

.dual-calendar-container[b-85b81agvkq] {
    display: flex;
    gap: 2rem;
}

.calendar-month[b-85b81agvkq] {
    flex: 1;
    min-width: 260px;
}

.calendar-header[b-85b81agvkq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.nav-btn[b-85b81agvkq] {
    background: none;
    border: none;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: #333;
    min-width: 36px;
}

.nav-btn:hover[b-85b81agvkq] {
    background: #f0f0f0;
}

.nav-spacer[b-85b81agvkq] {
    min-width: 30px;
}

.month-year[b-85b81agvkq] {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    flex: 1;
    text-align: center;
}

.calendar-grid[b-85b81agvkq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 1rem;
}

.day-header[b-85b81agvkq] {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    padding: 0.5rem 0;
}

.calendar-day[b-85b81agvkq] {
    position: relative;
    text-align: center;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day:hover:not(.past-date):not(.other-month)[b-85b81agvkq] {
    background: #e3f2fd;
}

.calendar-day.other-month[b-85b81agvkq] {
    /* Days outside the displayed month are not shown at all (empty cell keeps
       the 7-column grid aligned). */
    visibility: hidden;
}

.calendar-day.past-date[b-85b81agvkq] {
    color: #ccc;
    cursor: not-allowed;
}

.calendar-day.future-limited[b-85b81agvkq] {
    color: #ccc;
    cursor: not-allowed;
}

.calendar-day.today[b-85b81agvkq] {
    background: #f0f0f0;
    font-weight: 600;
}

.calendar-day.check-in[b-85b81agvkq] {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

.calendar-day.check-out[b-85b81agvkq] {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

.calendar-day.in-range[b-85b81agvkq] {
    background: #e3f2fd;
    color: var(--color-primary);
}

/* Outlined, auto-width, centred — same treatment as the filter panel's Apply
   button, rather than a full-width dark bar. */
.close-picker[b-85b81agvkq] {
    display: block;
    width: fit-content;
    margin: 1rem auto 0;
    padding: var(--space-16) var(--space-20);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-12);
    background: var(--color-surface);
    color: var(--color-primary);
    font: var(--font-label-lg);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.close-picker:hover[b-85b81agvkq] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.mobile-month-list[b-85b81agvkq] {
    display: none;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .date-range-input[b-85b81agvkq] {
        min-width: auto;
        max-width: none;
    }

    /* Tablet uses the single-column month view (like mobile) — never the
       desktop two-months-in-a-row layout. */
    .desktop-month-view[b-85b81agvkq] { display: none; }
    .mobile-month-list[b-85b81agvkq] {
        display: flex;
        flex-direction: column;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-month-list .calendar-month[b-85b81agvkq] {
        min-width: auto;
        flex-shrink: 0;
        padding-bottom: 1rem;
    }

    /* Popup sized to a single month grid — not clamped to the field width, so
       the white background covers all 7 day columns. */
    .date-picker-popup[b-85b81agvkq],
    .date-picker-popup.dual-month[b-85b81agvkq] {
        left: 0;
        right: auto;
        min-width: 340px;
        max-width: calc(100vw - 2rem);
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .date-picker-popup[b-85b81agvkq] {
        padding: 0.75rem;
        min-width: 260px;
        max-width: calc(100vw - 2rem);
    }
    .date-picker-popup.dual-month[b-85b81agvkq] {
        padding: 1rem;
    }
    .calendar-day[b-85b81agvkq] {
        min-height: 28px;
        font-size: 0.9rem;
    }
    .desktop-month-view[b-85b81agvkq] {
        display: none;
    }
    .mobile-month-list[b-85b81agvkq] {
        display: flex;
        flex-direction: column;
        max-height: 60vh;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-month-list .calendar-month[b-85b81agvkq] {
        scroll-snap-align: start;
        flex-shrink: 0;
        padding-bottom: 1rem;
    }
}

@media (max-width: 320px) {
    .date-picker-popup[b-85b81agvkq] {
        min-width: 240px;
        max-width: calc(100vw - 1rem);
    }
} 
/* Site polish & mobile overrides - folded in from deployed hotfix 2026-06-10 */
@media (max-width: 480px) {
    /* 16px prevents iOS Safari auto-zoom on focus */
    .date-range[b-85b81agvkq],
    .placeholder-text[b-85b81agvkq] {
        font-size: 16px;
    }
    .calendar-day[b-85b81agvkq] {
        min-height: 40px;
        font-size: 0.95rem;
    }
    .nav-btn[b-85b81agvkq] {
        min-width: 40px;
        min-height: 40px;
    }
    .close-picker[b-85b81agvkq] {
        min-height: 44px;
    }
}
/* /Components/DestinationInput.razor.rz.scp.css */
/* Destination field — uses the design-system .field (css/components.css).
   Only the borderless text input and the abs-positioned validation message are
   component-specific. */

/* EditForm renders a <form>; flatten it so the .field div is the flex child of
   .hotel-search__fields. */
.ds-field-form[b-c3358xyz4e] {
    display: contents;
}

.destination-input-container[b-c3358xyz4e] {
    position: relative;   /* anchor for the validation message */
    min-width: 0;
}

.field__input[b-c3358xyz4e] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    color: inherit;
}

.field__input[b-c3358xyz4e]::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.destination-input-container[b-c3358xyz4e]  .validation-message {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    color: var(--color-error);
    font: var(--font-caption);
}

/* Clear ("x") button, right end of the field. Sized to a real tap target rather than the
   glyph's own few pixels — it is a primary control on mobile, where re-typing a destination
   is the most expensive thing on this bar. `margin-left: auto` pins it to the right end
   regardless of how wide the input has grown. */
.field__clear[b-c3358xyz4e] {
    margin-left: auto;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-placeholder);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.field__clear:hover[b-c3358xyz4e] {
    background: var(--color-surface-subtle, rgba(15, 23, 42, 0.06));
    color: var(--color-text-primary);
}

.field__clear:focus-visible[b-c3358xyz4e] {
    outline: 2px solid var(--color-primary-navy);
    outline-offset: 1px;
}
/* /Components/DiscoveryCards.razor.rz.scp.css */
/* Figma › Discovery Card (393:381). Every value below is the design's own token:
   radius 16, Spacing/16 + Spacing/24 caption padding, Spacing/4 line gap,
   Heading/Medium title, Label/Medium subtitle. */

/* The strip escapes <article class="content px-4">'s padding the same way .hero does — the
   article's padding is asymmetric (2rem left / 1.5rem right above 641px), so these are its
   exact negatives. Without this the cards were inset by the article's padding *plus* their
   own, landing further in than both the header and the search bar. */
.discovery[b-pymb0573nb] {
    margin: var(--space-48, 48px) -1.5rem;
}

/* Consecutive strips share one gap. Their vertical margins collapse to 48px anyway, but
   saying so keeps a future padding/border on .discovery from silently doubling it. */
.discovery + .discovery[b-pymb0573nb] {
    margin-top: 0;
}

@media (min-width: 641px) {
    .discovery[b-pymb0573nb] {
        margin-left: -2rem;
        margin-right: -1.5rem;
    }
}

/* The shared page container: same 1440 max-width and 32px side padding as Navbar's
   .header-inner and (now) .hero__content, centred in the same viewport — so the heading and
   the cards start on exactly the same line as the logo above and the search bar. */
.discovery__inner[b-pymb0573nb] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-32);
}

/* Track the hero's own padding at each breakpoint, or the two would drift apart again. */
@media (max-width: 1023px) {
    .discovery__inner[b-pymb0573nb] {
        max-width: 100%;
    }
}

@media (max-width: 670px) {
    .discovery__inner[b-pymb0573nb] {
        padding: 0 var(--space-16);
    }
}

.discovery__heading[b-pymb0573nb] {
    font: var(--font-heading-md);
    color: var(--color-text-primary);
    margin-bottom: var(--space-24);
}

/* Optional supporting line under a strip's heading. Only rendered when the promo file
   supplies one, so it must carry its own spacing rather than relying on the heading's —
   the heading's bottom margin is what separates a subtitle-less strip from its cards. */
.discovery__subheading[b-pymb0573nb] {
    font: var(--font-body-md);
    /* Body text, not Text Placeholder: this is real copy, and the placeholder grey
       (#9ca3af, an input-affordance token) read as disabled next to the heading. */
    color: var(--color-text-primary);
    margin-top: calc(-1 * var(--space-16));
    margin-bottom: var(--space-24);
}

/* "As many per row as fit": auto-fill against the card's 400px design width, with minmax
   letting the tracks shrink rather than overflow. A 1440 container lands on 3, a wider
   screen on 4+, a tablet on 2, a phone on 1 — no per-breakpoint column counts.
   min(400px, 100%) keeps a sub-400px phone to a single full-width card. */
.discovery__grid[b-pymb0573nb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: var(--space-20, 20px);
}

/* The card is the link: whole surface clickable, keyboard focusable for free. */
.discovery-card[b-pymb0573nb] {
    position: relative;
    display: flex;
    align-items: flex-end;      /* caption sits on the bottom edge, per Figma */
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius-16);
    text-decoration: none;
    isolation: isolate;         /* keeps the scrim above the image, below the caption */
    background: var(--color-primary-navy, #464d69);   /* shows through when a card has no image */
}

.discovery-card__image[b-pymb0573nb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Figma paints a radial gradient anchored at the bottom-left corner — the caption's
   own backdrop — rather than a full-card wash, so the photo stays bright top-right. */
.discovery-card__scrim[b-pymb0573nb] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        circle at 0% 100%,
        rgba(70, 77, 105, 0.75) 0%,
        rgba(70, 77, 105, 0.30) 40%,
        rgba(70, 77, 105, 0) 100%);
}

.discovery-card__caption[b-pymb0573nb] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-24) var(--space-16);
    word-break: break-word;
}

.discovery-card__title[b-pymb0573nb] {
    font: var(--font-heading-md);
    color: var(--color-text-inverse);
}

.discovery-card__subtitle[b-pymb0573nb] {
    font: var(--font-label-md);
    color: rgba(255, 255, 255, 0.85);
}

/* Affordance the static design does not carry, but a clickable card needs. */
.discovery-card:hover .discovery-card__image[b-pymb0573nb] {
    transform: scale(1.04);
}

.discovery-card__image[b-pymb0573nb] {
    transition: transform 0.3s ease;
}

.discovery-card:focus-visible[b-pymb0573nb] {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .discovery-card__image[b-pymb0573nb] {
        transition: none;
    }

    .discovery-card:hover .discovery-card__image[b-pymb0573nb] {
        transform: none;
    }
}

/* A phone gets a shorter card so two are partly visible instead of one filling the fold. */
@media (max-width: 575px) {
    /* Vertical only. A `margin: … auto` shorthand here would reset the negative side
       margins above to 0 and re-inset the strip by the article's padding — which is
       exactly what left the cards sitting further in than the search bar. */
    .discovery[b-pymb0573nb] {
        margin-top: var(--space-32, 32px);
        margin-bottom: var(--space-32, 32px);
    }

    .discovery-card[b-pymb0573nb] {
        height: 220px;
    }
}
/* /Components/FilteringRequest.razor.rz.scp.css */
.filtering-wrapper[b-vw004habgg] {
    display: contents;
}

/* Text link, not a filled button. display is flipped to inline-flex by the
   mobile block below; the wrapper keeps it hidden on desktop. */
.btn-show-filters[b-vw004habgg] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    background: none;
    border: none;
    color: var(--color-primary-navy);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.btn-show-filters:hover[b-vw004habgg],
.btn-show-filters:focus-visible[b-vw004habgg] {
    text-decoration: underline;
}

.btn-show-filters__icon[b-vw004habgg] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    .filtering-container[b-vw004habgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-24); /* Figma: 24px between sections */
    padding: 0;
}

/* Figma "Filter Header": title left, Reset right. */
.filter-header[b-vw004habgg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.filter-header__title[b-vw004habgg] {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.filter-section[b-vw004habgg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label[b-vw004habgg] {
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Figma "Distance": bordered box, radius 8, 16px padding, Body/Regular text. */
.radius-dropdown[b-vw004habgg] {
    padding: var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-8);
    font: var(--font-body-md);
    color: var(--color-text-primary);
    background: var(--color-surface);
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s ease;
}

.radius-dropdown:hover[b-vw004habgg] {
    border-color: var(--color-primary);
}

.radius-dropdown:focus[b-vw004habgg] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(70, 77, 105, 0.12);
}

.rating-checkbox-group[b-vw004habgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* Figma: 4px between rows */
    margin-bottom: 0;
}

.rating-checkbox-item[b-vw004habgg] {
    display: flex;
    align-items: center;
    gap: 10px; /* Figma Star Rating Item gap */
    cursor: pointer;
}

/* Figma "Checkbox": 20px rounded square, 1px border; checked = filled Color/
   Primary with a white check. Custom-styled (appearance:none) so it can carry a
   border-radius — the input stays a real checkbox, so binding is unaffected. */
.rating-checkbox[b-vw004habgg] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-4);
    background: var(--color-surface);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rating-checkbox[b-vw004habgg]::before {
    content: "";
    width: 5px;
    height: 9px;
    margin-bottom: 2px;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.rating-checkbox:checked[b-vw004habgg] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.rating-checkbox:checked[b-vw004habgg]::before {
    transform: rotate(45deg) scale(1);
}

.rating-checkbox:focus-visible[b-vw004habgg] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Figma "Star number": Body/Small, Color/Primary. */
.rating-checkbox-label[b-vw004habgg] {
    font: var(--font-body-sm);
    color: var(--color-text-primary);
}

.rating-checkbox-stars[b-vw004habgg] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}

/* Figma "Button Frame": the outlined Apply button is centred, not full-width. */
.filter-actions[b-vw004habgg] {
    display: flex;
    justify-content: center;
}

/* Figma "Button": outlined — white fill, 2px Color/Primary border and text,
   radius 12, Label/Large. */
.btn-apply[b-vw004habgg] {
    padding: var(--space-16) var(--space-20);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-12);
    background: var(--color-surface);
    color: var(--color-primary);
    font: var(--font-label-lg);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-apply:hover[b-vw004habgg] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Figma "Reset": text link in the header, Label/Medium, Color/Primary. */
.btn-reset[b-vw004habgg] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font: var(--font-label-md);
    cursor: pointer;
}

.btn-reset:hover[b-vw004habgg],
.btn-reset:focus-visible[b-vw004habgg] {
    text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .btn-show-filters[b-vw004habgg] {
        display: inline-flex; /* inline-flex, not block: keeps the icon and label
                                 on one baseline and the hit area text-sized */
    }

    .filtering-container[b-vw004habgg] {
        display: none;
        gap: 1rem;
    }

    .filtering-container.filters-visible[b-vw004habgg] {
        display: flex;
    }

    /* Hide the button once filters are visible */
    .filtering-wrapper:has(.filters-visible) .btn-show-filters[b-vw004habgg] {
        display: none;
    }
}
/* /Components/GuestSelector.razor.rz.scp.css */
/* Visual comes from the design-system .field + .hotel-search__field--guests
   (css/components.css). Keep only the popup anchor + interaction bits. */
/* Wrapper is the flex item (sizing from .hotel-search__field--guests) + popup
   anchor; the .field visual lives on the <button> trigger that fills it. */
.guest-details-group[b-v463rehit7] {
    position: relative;
    user-select: none;
    overflow: visible;
}

.guest-trigger[b-v463rehit7] {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    cursor: pointer;
}

.guest-display[b-v463rehit7] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.guest-summary[b-v463rehit7] {
    white-space: nowrap;
    color: var(--color-text-primary);
}

.guest-dropdown[b-v463rehit7] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 1rem;
    z-index: 1000;
    min-width: 280px;
}

.guest-row[b-v463rehit7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.guest-row:not(:last-child)[b-v463rehit7] {
    border-bottom: 1px solid #f0f0f0;
}

.guest-label[b-v463rehit7] {
    font-weight: 500;
    color: #333;
    flex: 1;
    padding-right: 5px;
}

.guest-controls[b-v463rehit7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guest-btn[b-v463rehit7] {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
}

.guest-btn:hover:not(:disabled)[b-v463rehit7] {
    background: #e0e0e0;
    border-color: #ccc;
}

.guest-btn:disabled[b-v463rehit7] {
    background: #f8f8f8;
    border-color: #e8e8e8;
    color: #ccc;
    cursor: not-allowed;
}

.guest-count[b-v463rehit7] {
    font-weight: 600;
    color: #333;
    min-width: 20px;
    text-align: center;
}

.pets-row[b-v463rehit7] {
    border-bottom: none !important;
    margin-bottom: 0.5rem;
}

.pets-toggle[b-v463rehit7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pets-checkbox[b-v463rehit7] {
    width: 18px;
    height: 18px;
}

.pets-label[b-v463rehit7] {
    font-weight: 500;
    color: #333;
}

/* Outlined, auto-width, centred — matches the filter panel's Apply button and
   the date picker's Close button, rather than a full-width dark bar. */
.close-dropdown[b-v463rehit7] {
    display: block;
    width: fit-content;
    margin: 0.5rem auto 0;
    padding: var(--space-12) var(--space-24);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-12);
    background: var(--color-surface);
    color: var(--color-primary);
    font: var(--font-label-lg);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.close-dropdown:hover[b-v463rehit7] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.children-ages-input[b-v463rehit7] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ages-input-container[b-v463rehit7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The input is the only child now that the confirm button is gone, so it takes the row
   rather than leaving 20% of it empty beside a button that is no longer there. */
.ages-input[b-v463rehit7] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
}

.ages-input:focus[b-v463rehit7] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.ages-error[b-v463rehit7] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .guest-details-group[b-v463rehit7] {
        min-width: auto;
        width: 100%;
    }
    .guest-dropdown[b-v463rehit7] {
        width: 100%;
        left: 0;
        right: 0;
    }
}

@media (max-width: 480px) {
    .guest-dropdown[b-v463rehit7] {
        padding: 0.75rem;
    }
    .guest-row[b-v463rehit7] {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    .close-dropdown[b-v463rehit7] {
        padding: 0.25rem 0.75rem;
        font-size: 0.9rem;
    }
    }
/* Site polish & mobile overrides - folded in from deployed hotfix 2026-06-10 */
@media (max-width: 480px) {
    /* 16px prevents iOS Safari auto-zoom on focus */
    .guest-summary[b-v463rehit7] {
        font-size: 16px;
    }
    .guest-btn[b-v463rehit7] {
        width: 40px;
        height: 40px;
    }
    .close-dropdown[b-v463rehit7] {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}
/* /Components/HotelDescriptionFormatter.razor.rz.scp.css */
.hotel-description-formatter[b-e1t5iii1s9] {
    padding: 1rem 0;
}

.description-section[b-e1t5iii1s9] {
    margin-bottom: 2.5rem;
}

.section-title[b-e1t5iii1s9] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
    letter-spacing: 0.5px;
    color: black;
}

.section-content[b-e1t5iii1s9] {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.location-list[b-e1t5iii1s9] {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.location-item[b-e1t5iii1s9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-background);
    transition: background-color 0.15s ease;
}

.location-item:hover[b-e1t5iii1s9] {
    background-color: var(--color-background);
}

.location-item:last-child[b-e1t5iii1s9] {
    border-bottom: none;
}

.location-name[b-e1t5iii1s9] {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}

.location-distance[b-e1t5iii1s9] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 1.5rem;
    padding: 0.375rem 0.75rem;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.description-item p[b-e1t5iii1s9] {
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-item[b-e1t5iii1s9] {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }
    
    .location-distance[b-e1t5iii1s9] {
        margin-left: 0;
        font-size: 0.813rem;
    }
    
    .section-title[b-e1t5iii1s9] {
        font-size: 1.125rem;
    }
}

@media (max-width: 576px) {
    .description-section[b-e1t5iii1s9] {
        margin-bottom: 2rem;
    }
    
    .section-title[b-e1t5iii1s9] {
        font-size: 1rem;
        padding-bottom: 0.375rem;
    }
    
    .location-item[b-e1t5iii1s9] {
        padding: 0.625rem 0.875rem;
    }
    
    .location-name[b-e1t5iii1s9] {
        font-size: 0.938rem;
    }
    
    .location-distance[b-e1t5iii1s9] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/HotelPhoneDisplay.razor.rz.scp.css */
/* Mirrors the `.hotel-address p` spacing in ConfirmPage.razor.css that styled
   this line before it moved into this shared component (page-scoped CSS does
   not reach child components); keeps both pages' phone line identical. */
.hotel-phone p[b-cmh6j5istt] {
    margin: 0.25rem 0;
}
/* /Components/HotelPricingPopup.razor.rz.scp.css */
/* Popup Overlay Styles */
.popup-overlay[b-hwuvh9m2h8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

    .popup-overlay.show[b-hwuvh9m2h8] {
        display: flex;
    }

.popup-content[b-hwuvh9m2h8] {
    background: white;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pricing-popup[b-hwuvh9m2h8] {
    max-width: 900px;
}

.popup-header[b-hwuvh9m2h8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
    border-radius: 8px 8px 0 0;
}

    .popup-header h3[b-hwuvh9m2h8] {
        margin: 0;
        color: var(--color-text-primary);
    }

.close-btn[b-hwuvh9m2h8] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-placeholder);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-hwuvh9m2h8] {
        color: var(--color-text-primary);
    }

.popup-body[b-hwuvh9m2h8] {
    padding: 1.5rem;
}

.popup-footer[b-hwuvh9m2h8] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0 0 8px 8px;
}

/* Loading Spinner */
.loading-spinner[b-hwuvh9m2h8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.spinner[b-hwuvh9m2h8] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-primary-navy);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-hwuvh9m2h8 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-hwuvh9m2h8 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Pricing Details Styles */
.pricing-details-container[b-hwuvh9m2h8] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hotel-info-section[b-hwuvh9m2h8],
.room-info-section[b-hwuvh9m2h8],
.room-type-section[b-hwuvh9m2h8],
.guests-section[b-hwuvh9m2h8],
.pricing-section[b-hwuvh9m2h8],
.commission-section[b-hwuvh9m2h8],
.policies-section[b-hwuvh9m2h8],
.additional-details-section[b-hwuvh9m2h8] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
}

    .hotel-info-section h4[b-hwuvh9m2h8],
    .room-info-section h5[b-hwuvh9m2h8],
    .room-type-section h5[b-hwuvh9m2h8],
    .guests-section h5[b-hwuvh9m2h8],
    .pricing-section h5[b-hwuvh9m2h8],
    .commission-section h5[b-hwuvh9m2h8],
    .policies-section h5[b-hwuvh9m2h8],
    .additional-details-section h5[b-hwuvh9m2h8] {
        margin-top: 0;
        margin-bottom: 1rem;
        color: var(--color-text-primary);
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 0.5rem;
    }

.detail-item[b-hwuvh9m2h8] {
    display: flex;
    margin-bottom: 0.75rem;
}

    .detail-item.full-width[b-hwuvh9m2h8] {
        flex-direction: column;
    }

    .detail-item label[b-hwuvh9m2h8] {
        font-weight: 600;
        margin-right: 0.5rem;
        min-width: 120px;
        color: var(--color-text-placeholder);
    }

    .detail-item span[b-hwuvh9m2h8] {
        flex: 1;
    }

        .detail-item span.detail-item-payment-type[b-hwuvh9m2h8] {
            position: relative;
            display: inline-block;
            cursor: help;
            font-weight: 500;
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--color-text-primary);
            flex: none;
        }

.detail-item-payment-type .payment-type-tooltip[b-hwuvh9m2h8] {
    visibility: hidden;
    opacity: 0;
    width: 230px;
    background-color: var(--color-primary-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    pointer-events: none;
    line-height: 1.4;
}

.detail-item-payment-type .payment-type-tooltip[b-hwuvh9m2h8]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
}

.detail-item-payment-type:hover .payment-type-tooltip[b-hwuvh9m2h8] {
    visibility: visible;
    opacity: 1;
}

.payment-guarantee[b-hwuvh9m2h8] { color: var(--color-text-primary); }
.payment-deposit[b-hwuvh9m2h8]   { color: var(--color-text-primary); }
.payment-prepay[b-hwuvh9m2h8]    { color: var(--color-text-primary); }
.payment-holdtime[b-hwuvh9m2h8]  { color: var(--color-text-primary); }

.price[b-hwuvh9m2h8] {
    font-weight: 600;
    color: #28a745;
}

    .price.total[b-hwuvh9m2h8] {
        font-size: 1.1rem;
        color: var(--color-primary-navy);
    }

.amenity-tag[b-hwuvh9m2h8],
.card-type[b-hwuvh9m2h8] {
    background-color: var(--color-border);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    display: inline-block;
    font-size: 0.875rem;
}

.room-description p[b-hwuvh9m2h8] {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Bullet lines sit slightly in from the margin, and a bullet that wraps lines its
   second line up after the "- " rather than under the dash. The unbulleted first
   segment (the rate/room-name line) stays flush left. */
.room-description .description-line.bullet[b-hwuvh9m2h8] {
    padding-left: 1.5rem;
    text-indent: -0.75rem;
}

.tax-item[b-hwuvh9m2h8],
.variation-item[b-hwuvh9m2h8],
.policy-item[b-hwuvh9m2h8] {
    background-color: var(--color-background);
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

    .tax-item[b-hwuvh9m2h8] {
        display: flex;
        justify-content: flex-end;
        text-align: right;
    }

    .tax-item small[b-hwuvh9m2h8],
    .variation-item small[b-hwuvh9m2h8] {
        color: var(--color-text-placeholder);
        font-size: 0.8rem;
    }

.additional-detail[b-hwuvh9m2h8] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--color-background);
    border-radius: 4px;
}

    .additional-detail strong[b-hwuvh9m2h8] {
        color: var(--color-text-primary);
        display: block;
        margin-bottom: 0.5rem;
    }

.accepted-cards[b-hwuvh9m2h8] {
    margin-top: 0.5rem;
}

    .accepted-cards .card-type[b-hwuvh9m2h8] {
        background-color: var(--color-primary-navy);
        color: white;
    }

/* Refundable Policy Styles */
.refundable-policy[b-hwuvh9m2h8] {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}

    .refundable-policy label[b-hwuvh9m2h8] {
        font-weight: 600;
        margin-right: 0.5rem;
        min-width: 120px;
        color: var(--color-text-placeholder);
        flex-shrink: 0;
    }
    
    .refundable-policy p[b-hwuvh9m2h8] {
        flex: 1;
        margin: 0;
    }

/* Error and Retry Styles */
.error-message[b-hwuvh9m2h8] {
    text-align: center;
    padding: 2rem;
    color: var(--color-error);
}

.retry-btn[b-hwuvh9m2h8] {
    background-color: var(--color-primary-navy);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
}

    .retry-btn:hover[b-hwuvh9m2h8] {
        background-color: var(--color-primary-navy);
    }

.no-data[b-hwuvh9m2h8] {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-placeholder);
}

/* Clickable price selection */
.rd-price-selection[b-hwuvh9m2h8] {
    cursor: pointer;
    transition: color 0.2s ease;
}

    .rd-price-selection:hover[b-hwuvh9m2h8] {
        color: var(--color-primary-navy) !important;
        text-decoration: underline;
    }

/* Price item styles */
.price-item[b-hwuvh9m2h8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    background-color: var(--color-background);
    border-radius: 4px;
}

    .price-item.total-price[b-hwuvh9m2h8] {
        background-color: var(--color-background);
        border: 1px solid #bbdefb;
        font-weight: bold;
    }
    .price-item label[b-hwuvh9m2h8] {
        font-weight: 600;
        color: var(--color-text-placeholder);
    }

.taxes-section[b-hwuvh9m2h8],
.variations-section[b-hwuvh9m2h8] {
    margin-top: 1rem;
}

    .taxes-section label[b-hwuvh9m2h8],
    .variations-section label[b-hwuvh9m2h8] {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--color-text-placeholder);
    }

/* Policy sections */
.cancellation-policy[b-hwuvh9m2h8],
.guarantee-policy[b-hwuvh9m2h8],
.checkin-policy[b-hwuvh9m2h8] {
    margin-bottom: 1rem;
}

    .cancellation-policy label[b-hwuvh9m2h8],
    .guarantee-policy label[b-hwuvh9m2h8],
    .checkin-policy label[b-hwuvh9m2h8] {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--color-text-placeholder);
    }

/* Amenities display */
.amenities[b-hwuvh9m2h8] {
    margin-top: 0.5rem;
}

    .amenities strong[b-hwuvh9m2h8] {
        display: block;
        margin-bottom: 0.5rem;
    }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .popup-content[b-hwuvh9m2h8] {
        width: 95%;
        max-width: none;
        margin: 1rem;
    }

    .pricing-popup[b-hwuvh9m2h8] {
        max-width: none;
    }

    .detail-item[b-hwuvh9m2h8] {
        flex-direction: column;
    }

        .detail-item label[b-hwuvh9m2h8] {
            min-width: auto;
            margin-bottom: 0.25rem;
        }

    .popup-header[b-hwuvh9m2h8] {
        padding: 0.75rem 1rem;
    }

    .popup-body[b-hwuvh9m2h8] {
        padding: 1rem;
    }

    .popup-footer[b-hwuvh9m2h8] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-m45uyxe6bd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-m45uyxe6bd] {
    flex: 1;
}

.sidebar[b-m45uyxe6bd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-m45uyxe6bd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-m45uyxe6bd]  a, .top-row[b-m45uyxe6bd]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-m45uyxe6bd]  a:hover, .top-row[b-m45uyxe6bd]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-m45uyxe6bd]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-m45uyxe6bd] {
        justify-content: space-between;
    }

    .top-row[b-m45uyxe6bd]  a, .top-row[b-m45uyxe6bd]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-m45uyxe6bd] {
        flex-direction: column; /* Changed from 'row' to 'column' */
    }

    .sidebar[b-m45uyxe6bd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-m45uyxe6bd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-m45uyxe6bd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-m45uyxe6bd], article[b-m45uyxe6bd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-m45uyxe6bd] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-m45uyxe6bd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Navbar.razor.rz.scp.css */
/* =============================================================================
   Header — Figma › 02 Components › Header (Desktop / Tablet / Mobile).
   The reusable component parts (.nav-item, .action-item, .btn, .ds-icon,
   .ds-logo, .active-bar) come from the namespaced css/components.css, applied
   via the .fc-figma wrapper on the root. This file owns the header LAYOUT and
   the responsive breakpoint variants, plus the app's mobile dropdown menu.
   ============================================================================= */

.nav-root[b-sw2kagr1rl] {
    position: relative;   /* anchor for the mobile dropdown menu */
}

.site-header[b-sw2kagr1rl] {
    background: var(--color-surface);
    width: 100%;
}

.header-inner[b-sw2kagr1rl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-48);
    height: var(--header-height);
    /* Figma page container: 1440-wide, 32 side padding — same box the page
       content (search bar + results) centres in, so their edges line up. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-32);
}

.header-left[b-sw2kagr1rl] {
    display: flex;
    align-items: center;
    gap: var(--space-64);
    min-width: 0;
}

.primary-nav[b-sw2kagr1rl] {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    white-space: nowrap;
}

.header-actions[b-sw2kagr1rl] {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-shrink: 0;
}

.settings[b-sw2kagr1rl] {
    display: flex;
    align-items: center;
    gap: var(--space-24);
}

.sign-in[b-sw2kagr1rl],
.user-name[b-sw2kagr1rl] {
    white-space: nowrap;
}

/* Menu trigger is a real <button> — strip native chrome (visual = .action-item). */
button.action-item[b-sw2kagr1rl] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

/* The account icon is breakpoint-scoped (hidden on desktop). */
.action-user[b-sw2kagr1rl] {
    display: none;
}

/* The hamburger menu shows on every breakpoint — its dropdown (.mobile-menu-
   container) is not breakpoint-restricted, so it works on desktop/tablet too. */
.action-menu[b-sw2kagr1rl] {
    display: inline-flex;
}

.mobile-nav[b-sw2kagr1rl] {
    display: none;
}

/* ---- Tablet (≤1023): nav = Flights + Hotels, account icon, no Sign In ------- */
@media (max-width: 1023px) {
    .header-inner[b-sw2kagr1rl] { padding: 0 var(--space-24); gap: var(--space-32); }
    .ds-logo img[b-sw2kagr1rl] { height: var(--logo-height-tablet); }
    .sign-in[b-sw2kagr1rl],
    .user-name[b-sw2kagr1rl] { display: none; }
    .action-user[b-sw2kagr1rl] { display: inline-flex; }
    .settings[b-sw2kagr1rl] { gap: var(--space-24); }
}

/* ---- Mobile (≤670): primary nav moves below the header; hamburger menu ------ */
@media (max-width: 670px) {
    .header-inner[b-sw2kagr1rl] { padding: 0 var(--space-24); }
    .ds-logo img[b-sw2kagr1rl] { height: var(--logo-height-mobile); }
    .primary-nav[b-sw2kagr1rl] { display: none; }
    /* Show the account (sign-in) icon on mobile too, same as tablet. */
    .action-user[b-sw2kagr1rl] { display: inline-flex; }
    .action-menu[b-sw2kagr1rl] { display: inline-flex; }
    .settings[b-sw2kagr1rl] { gap: var(--space-24); }

    .mobile-nav[b-sw2kagr1rl] {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-32);
        padding: var(--space-8) var(--space-32);
        background: var(--color-surface);
    }
}

/* =============================================================================
   Mobile dropdown menu (opened by the header menu button) — app menu items.
   ============================================================================= */
.mobile-menu-backdrop[b-sw2kagr1rl] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.mobile-menu-container[b-sw2kagr1rl] {
    display: none;
    position: absolute;
    top: var(--header-height);
    right: var(--space-16);
    width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 1000;
    flex-direction: column;
}

.mobile-menu-container.show-menu[b-sw2kagr1rl] {
    display: flex;
}

.mobile-nav-item[b-sw2kagr1rl] {
    font: var(--font-body-md);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--color-border);
    transition: background-color .15s ease, color .15s ease;
}

.mobile-nav-item:last-child[b-sw2kagr1rl] {
    border-bottom: 0;
}

.mobile-nav-item:hover[b-sw2kagr1rl] {
    background: var(--color-background);
    color: var(--color-primary-navy);
}

.mobile-nav-item.active[b-sw2kagr1rl] {
    background: var(--color-primary-navy);
    color: var(--color-surface);
}
/* /Components/Modals/CancelConfirmationModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-i6qra7icwt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.cancel-modal[b-i6qra7icwt] {
    background: white;
    border-radius: 16px;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in-b-i6qra7icwt 0.3s ease-out;
    position: relative;
    z-index: 1001;
}

.modal-header[b-i6qra7icwt] {
    padding: 2rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-i6qra7icwt] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.close-btn[b-i6qra7icwt] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover[b-i6qra7icwt] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.modal-content[b-i6qra7icwt] {
    padding: 1.5rem 2rem;
    text-align: center;
}

.warning-icon[b-i6qra7icwt] {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content > p[b-i6qra7icwt] {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.cancel-note[b-i6qra7icwt] {
    font-size: 0.875rem;
    color: var(--color-text-placeholder);
}

.cancellation-policy[b-i6qra7icwt] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: left;
}

.cancellation-policy.warning[b-i6qra7icwt] {
    background: #fee2e2;
    border-color: var(--color-error);
}

.cancellation-policy h5[b-i6qra7icwt] {
    color: #92400e;
    font-weight: 600;
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.cancellation-policy.warning h5[b-i6qra7icwt] {
    color: #991b1b;
}

.policy-detail[b-i6qra7icwt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.policy-row[b-i6qra7icwt] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.policy-row.deadline-row[b-i6qra7icwt] {
    background: rgba(16, 185, 129, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.policy-row.fee-row[b-i6qra7icwt] {
    background: rgba(245, 158, 11, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
}

.policy-row.description-row[b-i6qra7icwt] {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
}

.policy-icon[b-i6qra7icwt] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.policy-icon svg[b-i6qra7icwt] {
    width: 100%;
    height: 100%;
}

.policy-content[b-i6qra7icwt] {
    flex: 1;
}

.policy-content.full-width[b-i6qra7icwt] {
    width: 100%;
}

.policy-content strong[b-i6qra7icwt] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.policy-content p[b-i6qra7icwt] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.text-success[b-i6qra7icwt] {
    color: #10b981;
}

.text-warning[b-i6qra7icwt] {
    color: #f59e0b;
}

.text-danger[b-i6qra7icwt] {
    color: var(--color-error);
}

.deadline-value[b-i6qra7icwt] {
    font-weight: 600;
    color: #059669;
    font-size: 0.95rem;
}

.fee-amount[b-i6qra7icwt],
.fee-percentage[b-i6qra7icwt] {
    font-weight: 600;
    color: #d97706;
    font-size: 0.95rem;
}

.policy-description[b-i6qra7icwt] {
    color: #78350f;
    font-style: italic;
}

.policy-separator[b-i6qra7icwt] {
    margin: 1rem 0;
    border: none;
    border-top: 1px solid rgba(146, 64, 14, 0.2);
}

.modal-actions[b-i6qra7icwt] {
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-secondary[b-i6qra7icwt],
.btn-danger[b-i6qra7icwt] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
}

.btn-secondary[b-i6qra7icwt] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover[b-i6qra7icwt] {
    background: var(--color-background);
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.btn-danger[b-i6qra7icwt] {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-i6qra7icwt] {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-danger:disabled[b-i6qra7icwt] {
    opacity: 0.7;
    cursor: not allowed;
}

.loading-spinner[b-i6qra7icwt] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin-b-i6qra7icwt 1s linear infinite;
}

@keyframes spin-b-i6qra7icwt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes modal-slide-in-b-i6qra7icwt {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Error Alert */
.error-alert[b-i6qra7icwt] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-align: left;
    animation: fade-in-b-i6qra7icwt 0.25s ease-out;
}

.error-alert .error-icon[b-i6qra7icwt] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.error-alert h4[b-i6qra7icwt] {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}

.error-alert p[b-i6qra7icwt] {
    color: #7f1d1d;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

@keyframes fade-in-b-i6qra7icwt {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-i6qra7icwt] {
        padding: 0.5rem;
    }

    .cancel-modal[b-i6qra7icwt] {
        max-width: 100%;
    }

    .modal-header[b-i6qra7icwt],
    .modal-content[b-i6qra7icwt],
    .modal-actions[b-i6qra7icwt] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .modal-actions[b-i6qra7icwt] {
        flex-direction: column;
    }

    .btn-secondary[b-i6qra7icwt],
    .btn-danger[b-i6qra7icwt] {
        width: 100%;
    }

    .policy-row[b-i6qra7icwt] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .policy-icon[b-i6qra7icwt] {
        align-self: flex-start;
    }
}
/* /Components/Modals/MapModal.razor.rz.scp.css */
/* Modal Styles */
.map-modal-backdrop[b-5hm2grgl2r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.map-modal[b-5hm2grgl2r] {
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in-b-5hm2grgl2r 0.3s ease-out;
    position: relative;
    z-index: 1001;
    overflow: hidden;
}

.map-modal-header[b-5hm2grgl2r] {
    padding: 1.5rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-modal-header h3[b-5hm2grgl2r] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px);
}

.close-btn[b-5hm2grgl2r] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.close-btn:hover[b-5hm2grgl2r] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.map-modal-content[b-5hm2grgl2r] {
    padding: 1.5rem 2rem 2rem 2rem;
}

.map-container[b-5hm2grgl2r] {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
}

.map-no-location[b-5hm2grgl2r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--color-text-placeholder);
    gap: 1rem;
}

.map-no-location span[b-5hm2grgl2r] {
    font-size: 3rem;
}

.map-no-location p[b-5hm2grgl2r] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

@keyframes modal-slide-in-b-5hm2grgl2r {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .map-modal-backdrop[b-5hm2grgl2r] {
        padding: 0.5rem;
    }

    .map-modal[b-5hm2grgl2r] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .map-modal-content[b-5hm2grgl2r] {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }

    .map-container[b-5hm2grgl2r] {
        height: 350px;
    }

    .map-modal-header h3[b-5hm2grgl2r] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .map-container[b-5hm2grgl2r] {
        height: 280px;
        border-radius: 8px;
    }

    .map-modal-header[b-5hm2grgl2r] {
        padding: 1rem 1.25rem 0 1.25rem;
    }

    .map-modal-content[b-5hm2grgl2r] {
        padding: 1rem 1.25rem 1.25rem 1.25rem;
    }

    .map-modal-header h3[b-5hm2grgl2r] {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-modal[b-5hm2grgl2r] {
        animation: none;
    }

    .close-btn[b-5hm2grgl2r] {
        transition: none;
    }
}
/* /Components/Modals/ModificationInfoModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-iwcvs38lo0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modification-info-modal[b-iwcvs38lo0] {
    background: white;
    border-radius: 16px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in-b-iwcvs38lo0 0.3s ease-out;
    position: relative;
    z-index: 1001;
}

.modal-header[b-iwcvs38lo0] {
    padding: 2rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-iwcvs38lo0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.close-btn[b-iwcvs38lo0] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover[b-iwcvs38lo0] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.modal-content[b-iwcvs38lo0] {
    padding: 2rem;
    text-align: center;
}

.info-icon[b-iwcvs38lo0] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon svg[b-iwcvs38lo0] {
    width: 48px;
    height: 48px;
}

.info-message[b-iwcvs38lo0] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.6;
}

.modal-actions[b-iwcvs38lo0] {
    padding: 0 2rem 2rem 2rem;
    display: flex;
    justify-content: center;
}

.btn-primary[b-iwcvs38lo0] {
    background: var(--color-primary-navy);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
}

.btn-primary:hover[b-iwcvs38lo0] {
    background: var(--color-primary-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

@keyframes modal-slide-in-b-iwcvs38lo0 {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-iwcvs38lo0] {
        padding: 0.5rem;
    }

    .modification-info-modal[b-iwcvs38lo0] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content[b-iwcvs38lo0] {
        padding: 1.5rem;
    }

    .info-message[b-iwcvs38lo0] {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .info-icon[b-iwcvs38lo0] {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    .info-icon svg[b-iwcvs38lo0] {
        width: 36px;
        height: 36px;
    }

    .info-message[b-iwcvs38lo0] {
        font-size: 0.9rem;
    }
}
/* /Components/Modals/ModifyBookingModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-lmqz66au05] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modify-modal[b-lmqz66au05] {
    background: white;
    border-radius: 16px;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in-b-lmqz66au05 0.3s ease-out;
    position: relative;
    z-index: 1001;
}

.modify-icon[b-lmqz66au05] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.modify-icon svg[b-lmqz66au05] {
    width: 48px;
    height: 48px;
}

.current-dates[b-lmqz66au05] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.current-dates h5[b-lmqz66au05] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-info[b-lmqz66au05] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.date-info:last-child[b-lmqz66au05] {
    margin-bottom: 0;
}

.date-label[b-lmqz66au05] {
    font-size: 14px;
    color: var(--color-text-placeholder);
    font-weight: 500;
}

.date-value[b-lmqz66au05] {
    font-size: 14px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.new-dates[b-lmqz66au05] {
    margin: 24px 0;
}

.new-dates h5[b-lmqz66au05] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The picker's own field draws the border/radius/height now that the container
   opts into the design system (`fc-figma` in ModifyBookingModal.razor), so this
   rule only anchors the popup and lets it escape the container box. */
.date-range-container[b-lmqz66au05] {
    overflow: visible;
    position: relative;
}

/* The picker is a child component, so ::deep is required to cross the
   CSS-isolation boundary. Desktop-only: at <=1024px the picker's own
   media query already removes the width cap. */
@media (min-width: 1025px) {
    .date-range-container[b-lmqz66au05]  .date-range-input {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

.date-range[b-lmqz66au05] {
    width: 100%;
}

.error-message[b-lmqz66au05] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px;
}

.error-message p[b-lmqz66au05] {
    margin: 0;
    font-size: 14px;
    color: #dc2626;
}

.suggest-action[b-lmqz66au05] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.suggest-action p[b-lmqz66au05] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.modal-header[b-lmqz66au05] {
    padding: 2rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-lmqz66au05] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.close-btn[b-lmqz66au05] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover[b-lmqz66au05] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.modal-content[b-lmqz66au05] {
    padding: 1.5rem 2rem;
    text-align: center;
}

.modal-content p[b-lmqz66au05] {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.modal-actions[b-lmqz66au05] {
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-primary[b-lmqz66au05],
.btn-secondary[b-lmqz66au05] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
}

.btn-primary[b-lmqz66au05] {
    background: var(--color-primary-navy);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-lmqz66au05] {
    background: var(--color-primary-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled[b-lmqz66au05] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary[b-lmqz66au05] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover[b-lmqz66au05] {
    background: var(--color-background);
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.loading-spinner[b-lmqz66au05] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin-b-lmqz66au05 1s linear infinite;
}

@keyframes spin-b-lmqz66au05 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes modal-slide-in-b-lmqz66au05 {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* DateRangePicker Styles within Modal */
.modify-modal .date-range-input[b-lmqz66au05] {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    min-width: auto;
    max-width: none;
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modify-modal .date-range-input:hover[b-lmqz66au05] {
    background: var(--color-background);
}

.modify-modal .date-range-input .icon[b-lmqz66au05] {
    color: var(--color-primary-navy);
    font-size: 1.1rem;
}

.modify-modal .date-range-input .placeholder-text[b-lmqz66au05] {
    color: var(--color-text-placeholder);
    font-size: 0.95rem;
}

.modify-modal .date-range-input .date-range[b-lmqz66au05] {
    font-size: 0.95rem;
    gap: 0.75rem;
}

.modify-modal .date-range-input .check-in-date[b-lmqz66au05],
.modify-modal .date-range-input .check-out-date[b-lmqz66au05] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.modify-modal .date-range-input .date-separator[b-lmqz66au05] {
    color: var(--color-primary-navy);
    font-weight: 500;
}

/* DatePicker Popup within Modal */
.modify-modal .date-picker-popup[b-lmqz66au05] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 16px;
    z-index: auto;
    min-width: auto;
    width: 100%;
}

.modify-modal .date-picker-popup.dual-month[b-lmqz66au05] {
    padding: 16px;
}

.modify-modal .dual-calendar-container[b-lmqz66au05] {
    display: flex;
    gap: 20px;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.modify-modal .calendar-month[b-lmqz66au05] {
    flex: 1;
    min-width: 260px;
    max-width: 300px;
}

.modify-modal .calendar-header[b-lmqz66au05] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 8px;
}

.modify-modal .nav-btn[b-lmqz66au05] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--color-text-primary);
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modify-modal .nav-btn:hover[b-lmqz66au05] {
    background: var(--color-border);
    color: var(--color-text-primary);
    transform: scale(1.05);
}

.modify-modal .nav-spacer[b-lmqz66au05] {
    min-width: 40px;
}

.modify-modal .month-year[b-lmqz66au05] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-primary);
    flex: 1;
    text-align: center;
}

.modify-modal .calendar-grid[b-lmqz66au05] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.modify-modal .day-header[b-lmqz66au05] {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-placeholder);
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modify-modal .calendar-day[b-lmqz66au05] {
    position: relative;
    text-align: center;
    padding: 10px 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
    border: 2px solid transparent;
}

.modify-modal .calendar-day:hover:not(.past-date):not(.other-month)[b-lmqz66au05] {
    background: var(--color-background);
    color: var(--color-primary-navy);
    transform: scale(1.1);
    border-color: var(--color-primary-navy);
}

.modify-modal .calendar-day.other-month[b-lmqz66au05] {
    color: var(--color-border);
    cursor: not-allowed;
}

.modify-modal .calendar-day.past-date[b-lmqz66au05] {
    color: var(--color-border);
    cursor: not-allowed;
    background: var(--color-background);
}

.modify-modal .calendar-day.today[b-lmqz66au05] {
    background: var(--color-background);
    color: var(--color-text-primary);
    font-weight: 700;
    border-color: var(--color-text-placeholder);
}

.modify-modal .calendar-day.check-in[b-lmqz66au05] {
    background: var(--color-primary-navy);
    color: white;
    font-weight: 700;
    border-color: var(--color-primary-navy);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.modify-modal .calendar-day.check-out[b-lmqz66au05] {
    background: var(--color-primary-navy);
    color: white;
    font-weight: 700;
    border-color: var(--color-primary-navy);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.modify-modal .calendar-day.in-range[b-lmqz66au05] {
    background: var(--color-background);
    color: var(--color-primary-navy);
    font-weight: 600;
}

.modify-modal .close-picker[b-lmqz66au05] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.modify-modal .close-picker:hover[b-lmqz66au05] {
    background: var(--color-primary-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-lmqz66au05] {
        padding: 0.5rem;
    }

    .modal-header[b-lmqz66au05],
    .modal-content[b-lmqz66au05],
    .modal-actions[b-lmqz66au05] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .modal-actions[b-lmqz66au05] {
        flex-direction: column;
    }

    .modify-modal[b-lmqz66au05] {
        margin: 10px;
        max-width: calc(100% - 20px);
        max-height: 95vh;
    }
    
    .current-dates[b-lmqz66au05],
    .new-dates[b-lmqz66au05] {
        margin: 16px 0;
    }
    
    .date-info[b-lmqz66au05] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* DateRangePicker responsive within modal */
    .modify-modal .dual-calendar-container[b-lmqz66au05] {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .modify-modal .calendar-month[b-lmqz66au05] {
        min-width: auto;
        max-width: none;
    }

    .modify-modal .date-picker-popup.dual-month[b-lmqz66au05] {
        padding: 16px;
    }

    .modify-modal .nav-btn[b-lmqz66au05] {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
    }

    .modify-modal .calendar-day[b-lmqz66au05] {
        min-height: 32px;
        padding: 8px 2px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .modify-modal .dual-calendar-container[b-lmqz66au05] {
        padding: 12px;
    }

    .modify-modal .calendar-month[b-lmqz66au05] {
        min-width: 240px;
    }

    .modify-modal .calendar-day[b-lmqz66au05] {
        min-height: 28px;
        padding: 6px 2px;
        font-size: 0.8rem;
    }

    .modify-modal .day-header[b-lmqz66au05] {
        font-size: 0.75rem;
        padding: 6px 0;
    }

    .modify-modal .nav-btn[b-lmqz66au05] {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
        font-size: 1rem;
    }

    .modify-modal .month-year[b-lmqz66au05] {
        font-size: 1rem;
    }
}
/* /Components/Modals/PriceChangeConfirmationModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-ueqwxc56t3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.price-confirmation-modal[b-ueqwxc56t3] {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: slideUp-b-ueqwxc56t3 0.3s ease-out;
}

.price-change-icon[b-ueqwxc56t3] {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
}

.price-change-icon svg[b-ueqwxc56t3] {
    width: 32px;
    height: 32px;
}

.price-comparison[b-ueqwxc56t3] {
    background: var(--color-background);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--color-border);
    text-align: left;
}

.price-row[b-ueqwxc56t3] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
}

.price-row .price-label[b-ueqwxc56t3] {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    align-self: center;
}

.price-row .price-value[b-ueqwxc56t3] {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}

.price-row .price-value-local[b-ueqwxc56t3] {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
}

.price-row.current-price[b-ueqwxc56t3] {
    border-bottom: 1px solid var(--color-border);
}

.price-row.new-price[b-ueqwxc56t3] {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}

.price-row.difference-price[b-ueqwxc56t3] {
    font-weight: 600;
    font-size: 1.1em;
}

.price-label[b-ueqwxc56t3] {
    font-weight: 500;
    color: #475569;
    text-align: left;
}

.price-value[b-ueqwxc56t3] {
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: right;
}

.price-value.highlight[b-ueqwxc56t3] {
    color: #f59e0b;
    font-size: 1.1em;
}

.price-value.increase[b-ueqwxc56t3] {
    color: #dc2626;
}

.price-value.decrease[b-ueqwxc56t3] {
    color: #16a34a;
}

.price-value-local[b-ueqwxc56t3] {
    font-size: 0.85em;
    color: var(--color-text-placeholder);
    font-weight: 500;
    white-space: nowrap;
}

.individual-bookings[b-ueqwxc56t3] {
    margin: 20px 0;
}

.individual-bookings h5[b-ueqwxc56t3] {
    margin: 0 0 16px;
    color: var(--color-text-primary);
    font-size: 0.95em;
    font-weight: 600;
}

.booking-breakdown-item[b-ueqwxc56t3] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.booking-breakdown-item:last-child[b-ueqwxc56t3] {
    margin-bottom: 0;
}

.breakdown-header[b-ueqwxc56t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.booking-id[b-ueqwxc56t3] {
    font-size: 0.85em;
    color: var(--color-text-placeholder);
    font-weight: 500;
}

.room-type[b-ueqwxc56t3] {
    font-size: 0.9em;
    color: #475569;
    font-weight: 600;
}

.breakdown-price[b-ueqwxc56t3] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px;
}

.breakdown-price .price-label[b-ueqwxc56t3] {
    grid-column: 1;
    grid-row: 1;
}

.breakdown-price .price-value[b-ueqwxc56t3] {
    grid-column: 2;
    grid-row: 1;
}

.breakdown-price .price-value-local[b-ueqwxc56t3] {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.room-details[b-ueqwxc56t3] {
    background: var(--color-background);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.room-details h5[b-ueqwxc56t3] {
    margin: 0 0 8px;
    color: var(--color-text-primary);
    font-size: 0.95em;
    font-weight: 600;
}

.room-details .room-type[b-ueqwxc56t3] {
    margin: 0;
    color: #475569;
    font-weight: 500;
}

.date-details[b-ueqwxc56t3] {
    background: var(--color-background);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    border: 1px solid var(--color-border);
}

.date-details h5[b-ueqwxc56t3] {
    margin: 0 0 12px;
    color: var(--color-text-primary);
    font-size: 0.95em;
    font-weight: 600;
}

.date-details .date-info[b-ueqwxc56t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.date-details .date-label[b-ueqwxc56t3] {
    font-weight: 500;
    color: var(--color-text-placeholder);
}

.date-details .date-value[b-ueqwxc56t3] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-header[b-ueqwxc56t3] {
    padding: 2rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-ueqwxc56t3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.close-btn[b-ueqwxc56t3] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover[b-ueqwxc56t3] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.modal-content[b-ueqwxc56t3] {
    padding: 1.5rem 2rem;
    text-align: center;
}

.modal-content p[b-ueqwxc56t3] {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.modal-actions[b-ueqwxc56t3] {
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-primary[b-ueqwxc56t3],
.btn-secondary[b-ueqwxc56t3] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
}

.btn-primary[b-ueqwxc56t3] {
    background: var(--color-primary-navy);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ueqwxc56t3] {
    background: var(--color-primary-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled[b-ueqwxc56t3] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary[b-ueqwxc56t3] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover[b-ueqwxc56t3] {
    background: var(--color-background);
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.loading-spinner[b-ueqwxc56t3] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin-b-ueqwxc56t3 1s linear infinite;
}

@keyframes spin-b-ueqwxc56t3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideUp-b-ueqwxc56t3 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-ueqwxc56t3] {
        padding: 0.5rem;
    }

    .modal-header[b-ueqwxc56t3],
    .modal-content[b-ueqwxc56t3],
    .modal-actions[b-ueqwxc56t3] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .modal-actions[b-ueqwxc56t3] {
        flex-direction: column;
    }

    .breakdown-header[b-ueqwxc56t3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .date-details .date-info[b-ueqwxc56t3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .price-row[b-ueqwxc56t3] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .price-row .price-label[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 1;
    }

    .price-row .price-value-local[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .price-row .price-value[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 3;
        text-align: left;
    }

    .breakdown-price[b-ueqwxc56t3] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .breakdown-price .price-label[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 1;
    }

    .breakdown-price .price-value-local[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .breakdown-price .price-value[b-ueqwxc56t3] {
        grid-column: 1;
        grid-row: 3;
    }
}
/* /Components/Modals/ResultsMapModal.razor.rz.scp.css */
/* Results Map Modal Styles */
.results-map-modal-backdrop[b-futc9mwd8l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.results-map-modal[b-futc9mwd8l] {
    background: white;
    border-radius: 16px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: results-map-slide-in-b-futc9mwd8l 0.3s ease-out;
    position: relative;
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.results-map-modal-header[b-futc9mwd8l] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.results-map-modal-header h3[b-futc9mwd8l] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 120px);
}

.results-map-modal-actions[b-futc9mwd8l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.loading-indicator[b-futc9mwd8l] {
    font-size: 0.85rem;
    color: var(--color-primary-navy);
    font-weight: 500;
    animation: pulse-text-b-futc9mwd8l 1.5s ease-in-out infinite;
}

.close-btn[b-futc9mwd8l] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.close-btn:hover[b-futc9mwd8l] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.results-map-modal-content[b-futc9mwd8l] {
    flex: 1;
    min-height: 0;
}

.results-map-container[b-futc9mwd8l] {
    width: 100%;
    height: 550px;
}

.results-map-error[b-futc9mwd8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--color-text-placeholder);
    gap: 0.75rem;
}

.results-map-error span[b-futc9mwd8l] {
    font-size: 2.5rem;
}

.results-map-error p[b-futc9mwd8l] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

@keyframes results-map-slide-in-b-futc9mwd8l {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse-text-b-futc9mwd8l {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .results-map-modal-backdrop[b-futc9mwd8l] {
        padding: 0.5rem;
    }

    .results-map-modal[b-futc9mwd8l] {
        max-width: calc(100% - 1rem);
        max-height: 85vh;
    }

    .results-map-container[b-futc9mwd8l] {
        height: 400px;
    }

    .results-map-modal-header h3[b-futc9mwd8l] {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .results-map-container[b-futc9mwd8l] {
        height: 320px;
    }

    .results-map-modal-header[b-futc9mwd8l] {
        padding: 1rem 1.25rem;
    }

    .results-map-modal-header h3[b-futc9mwd8l] {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .results-map-modal[b-futc9mwd8l] {
        animation: none;
    }

    .close-btn[b-futc9mwd8l] {
        transition: none;
    }

    .loading-indicator[b-futc9mwd8l] {
        animation: none;
    }
}
/* /Components/Modals/SuccessNotificationModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-ycq6b4jbii] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.success-notification-modal[b-ycq6b4jbii] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in-b-ycq6b4jbii 0.3s ease-out;
    position: relative;
    z-index: 1001;
}

.modal-header[b-ycq6b4jbii] {
    padding: 2rem 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-ycq6b4jbii] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.close-btn[b-ycq6b4jbii] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover[b-ycq6b4jbii] {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.modal-content[b-ycq6b4jbii] {
    padding: 2rem;
    text-align: center;
}

.success-icon[b-ycq6b4jbii] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg[b-ycq6b4jbii] {
    width: 48px;
    height: 48px;
}

.success-message[b-ycq6b4jbii] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.5;
}

.modal-actions[b-ycq6b4jbii] {
    padding: 0 2rem 2rem 2rem;
    display: flex;
    justify-content: center;
}

.btn-primary[b-ycq6b4jbii] {
    background: var(--color-primary-navy);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

.btn-primary:hover[b-ycq6b4jbii] {
    background: var(--color-primary-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

@keyframes modal-slide-in-b-ycq6b4jbii {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-backdrop[b-ycq6b4jbii] {
        padding: 0.5rem;
    }

    .success-notification-modal[b-ycq6b4jbii] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content[b-ycq6b4jbii] {
        padding: 1.5rem;
    }

    .success-message[b-ycq6b4jbii] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .success-icon[b-ycq6b4jbii] {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    .success-icon svg[b-ycq6b4jbii] {
        width: 36px;
        height: 36px;
    }
}
/* /Components/Pages/BookingReport.razor.rz.scp.css */
booking-report-container[b-y9mg9oyr0e] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-border) 100%);
    padding: 2rem;
}

.booking-report-main[b-y9mg9oyr0e] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header Styles */
.report-header[b-y9mg9oyr0e] {
    text-align: center;
    margin-bottom: 2rem;
}

.header-icon[b-y9mg9oyr0e] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary-navy), var(--color-primary-navy));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

    .header-icon svg[b-y9mg9oyr0e] {
        width: 32px;
        height: 32px;
        color: white;
    }

.report-header h1[b-y9mg9oyr0e] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.report-header p[b-y9mg9oyr0e] {
    color: var(--color-text-placeholder);
    font-size: 1rem;
    margin: 0;
}

/* Filter Styles */
.filters-section[b-y9mg9oyr0e] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.filter-row[b-y9mg9oyr0e] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group[b-y9mg9oyr0e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 160px;
    flex: 0 1 160px;
}

    .filter-group label[b-y9mg9oyr0e] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-text-primary);
    }

.filter-select[b-y9mg9oyr0e]{
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background: white;
    transition: all 0.2s ease;
    min-width: 160px;
}

.filter-input[b-y9mg9oyr0e] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    min-width: 160px;
}

    .filter-select:focus[b-y9mg9oyr0e] {
        outline: none;
        border-color: var(--color-primary-navy);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }


.filter-actions[b-y9mg9oyr0e] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Button Styles */
.btn-primary[b-y9mg9oyr0e],
.btn-secondary[b-y9mg9oyr0e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary[b-y9mg9oyr0e] {
    background: var(--color-primary-navy);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-y9mg9oyr0e] {
        background: var(--color-primary-navy);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

.btn-secondary[b-y9mg9oyr0e] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

    .btn-secondary:hover:not(:disabled)[b-y9mg9oyr0e] {
        background: var(--color-background);
        border-color: #d1d5db;
    }

    .btn-primary:disabled[b-y9mg9oyr0e],
    .btn-secondary:disabled[b-y9mg9oyr0e] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Summary Cards */
.summary-cards[b-y9mg9oyr0e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-y9mg9oyr0e] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.card-icon[b-y9mg9oyr0e] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card-icon svg[b-y9mg9oyr0e] {
        width: 24px;
        height: 24px;
    }

    .card-icon.confirmed[b-y9mg9oyr0e] {
        background: #dcfce7;
        color: #16a34a;
    }

    .card-icon.cancelled[b-y9mg9oyr0e] {
        background: #fee2e2;
        color: #dc2626;
    }

    .card-icon.modified[b-y9mg9oyr0e] {
        background: #fef3c7;
        color: #d97706;
    }

    .card-icon.total[b-y9mg9oyr0e] {
        background: var(--color-background);
        color: var(--color-primary-navy);
    }

.card-content[b-y9mg9oyr0e] {
    display: flex;
    flex-direction: column;
}

.card-value[b-y9mg9oyr0e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.card-label[b-y9mg9oyr0e] {
    font-size: 0.875rem;
    color: var(--color-text-placeholder);
}

/* Table Styles */
.report-table-container[b-y9mg9oyr0e] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: 100%;
}

.table-header[b-y9mg9oyr0e] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    .table-header h3[b-y9mg9oyr0e] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-text-primary);
    }

.table-wrapper[b-y9mg9oyr0e] {
    overflow-x: auto;
}

.report-table[b-y9mg9oyr0e] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem 0;
    font-size: 0.7rem;
    table-layout: fixed;
}

    .report-table thead[b-y9mg9oyr0e] {
        background: var(--color-background);
    }

    .report-table th[b-y9mg9oyr0e] {
        padding: 0.75rem 0.5rem;
        text-align: center;
        font-weight: 600;
        color: var(--color-text-primary);
        border-bottom: 2px solid var(--color-border);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .report-table td[b-y9mg9oyr0e] {
        padding: 0.75rem 0.5rem;
        text-align: center;
        border-bottom: 1px solid var(--color-background);
        color: var(--color-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .report-table td.date-cell[b-y9mg9oyr0e] {
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow: visible;
            text-overflow: clip;
            min-width: 80px;
            line-height: 1.4;
        }

    .report-table tbody tr:hover[b-y9mg9oyr0e] {
        background: var(--color-background);
    }

.gdsrl-cell[b-y9mg9oyr0e] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--color-primary-navy);
}

.center[b-y9mg9oyr0e] {
    text-align: center;
}

.currency[b-y9mg9oyr0e] {
    text-align: center;
    font-family: 'Courier New', monospace;
}

    .currency.highlight[b-y9mg9oyr0e] {
        font-weight: 700;
        color: #16a34a;
    }

/* Status Badge */
.status-badge[b-y9mg9oyr0e] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}

    .status-badge.status-confirmed[b-y9mg9oyr0e] {
        background: #dcfce7;
        color: #16a34a;
    }

    .status-badge.status-cancelled[b-y9mg9oyr0e] {
        background: #fee2e2;
        color: #dc2626;
    }

    .status-badge.status-modified[b-y9mg9oyr0e] {
        background: #fef3c7;
        color: #d97706;
    }

    .status-badge.status-failed[b-y9mg9oyr0e] {
        background: var(--color-background);
        color: var(--color-text-placeholder);
    }

/* Error Alert */
.error-alert[b-y9mg9oyr0e] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.error-icon svg[b-y9mg9oyr0e] {
    width: 24px;
    height: 24px;
}

.error-alert h4[b-y9mg9oyr0e] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #dc2626;
}

.error-alert p[b-y9mg9oyr0e] {
    margin: 0;
    font-size: 0.875rem;
    color: #b91c1c;
}

/* No Results */
.no-results[b-y9mg9oyr0e] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.no-results-icon[b-y9mg9oyr0e] {
    width: 64px;
    height: 64px;
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    .no-results-icon svg[b-y9mg9oyr0e] {
        width: 32px;
        height: 32px;
        color: var(--color-text-placeholder);
    }

.no-results h3[b-y9mg9oyr0e] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.no-results p[b-y9mg9oyr0e] {
    margin: 0;
    color: var(--color-text-placeholder);
}

/* Loading Spinner */
.loading-spinner[b-y9mg9oyr0e] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-y9mg9oyr0e 1s linear infinite;
}

@keyframes spin-b-y9mg9oyr0e {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .booking-report-container[b-y9mg9oyr0e] {
        padding: 1rem;
    }

    .filter-row[b-y9mg9oyr0e] {
        flex-direction: column;
    }

    .filter-group[b-y9mg9oyr0e] {
        width: 100%;
    }

    .filter-actions[b-y9mg9oyr0e] {
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
    }

        .filter-actions button[b-y9mg9oyr0e] {
            flex: 1;
        }

    .summary-cards[b-y9mg9oyr0e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-value[b-y9mg9oyr0e] {
        font-size: 1.25rem;
    }

    .report-header h1[b-y9mg9oyr0e] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-y9mg9oyr0e] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-y9mg9oyr0e] {
        flex-direction: column;
    }

        .filter-actions button[b-y9mg9oyr0e] {
            width: 100%;
        }
}

.clickable-row[b-y9mg9oyr0e] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .clickable-row:hover[b-y9mg9oyr0e] {
        background-color: rgba(59, 130, 246, 0.1);
    }

.clickable-row-even[b-y9mg9oyr0e] {
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: white;
}

.clickable-row-odd[b-y9mg9oyr0e] {
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: white;
}

    .clickable-row-even:hover[b-y9mg9oyr0e],
    .clickable-row-odd:hover[b-y9mg9oyr0e] {
        background-color: rgba(59, 130, 246, 0.1);
    }

/* Normalize filter control sizing so selects and inputs match */
.filter-select[b-y9mg9oyr0e],
.filter-input[b-y9mg9oyr0e],
.filter-input input[b-y9mg9oyr0e],
.filter-input select[b-y9mg9oyr0e],
.filter-input-wrapper input[b-y9mg9oyr0e],
.filter-input-wrapper select[b-y9mg9oyr0e] {
    box-sizing: border-box;
    height: 44px; /* choose a value that matches your design */
    line-height: 1.2;
    padding: 0.5rem 0.75rem;
}

/* Make sure wrapper doesn't add extra padding if you keep it */
.filter-input-wrapper[b-y9mg9oyr0e] {
    padding: 0; /* wrapper only for layout, control carries padding */
}

.pagination-container[b-y9mg9oyr0e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
}

.pagination-info[b-y9mg9oyr0e] {
    color: var(--color-text-placeholder);
    font-size: 0.875rem;
}

.pagination-controls[b-y9mg9oyr0e] {
    display: flex;
    gap: 0.25rem;
}

.pagination-button[b-y9mg9oyr0e] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    min-width: 2.5rem;
}

.pagination-button:hover:not(:disabled)[b-y9mg9oyr0e] {
    background-color: var(--color-background);
    border-color: #9ca3af;
}

.pagination-button:disabled[b-y9mg9oyr0e] {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--color-background);
}

.pagination-button.active[b-y9mg9oyr0e] {
    background-color: var(--color-primary-navy);
    color: white;
    border-color: var(--color-primary-navy);
}

.pagination-button.active:hover[b-y9mg9oyr0e] {
    background-color: var(--color-primary-navy);
    border-color: var(--color-primary-navy);
}
/* /Components/Pages/ConfirmPage.razor.rz.scp.css */
.confirmation-container[b-a498g6p9or] {
    min-height: 100vh;
    width: 70%;
    /*background: linear-gradient(135deg, var(--color-background) 0%, var(--color-border) 100%);*/
    padding: 0 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: center;
    margin: 0 auto;
    
}

.edit-booking[b-a498g6p9or] {
    width: 100%;
    display: flex;
    justify-content: right;
    right: 2rem;
    margin-top: 1rem;
    cursor: pointer;
}

.edit-link[b-a498g6p9or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-placeholder);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.edit-link:hover[b-a498g6p9or] {
    background: var(--color-background);
    border-color: #d1d5db;
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.edit-icon[b-a498g6p9or] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.confirmation-main[b-a498g6p9or] {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.confirmation-header[b-a498g6p9or] {
    text-align: center;
    margin-bottom: 1rem;
}

.success-icon[b-a498g6p9or] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    animation: scale-in-b-a498g6p9or 0.5s ease-out;
}

.success-icon svg[b-a498g6p9or] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.3));
}

.confirmation-title[b-a498g6p9or] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.2s both;
}

.confirmation-subtitle[b-a498g6p9or] {
    font-size: 1.25rem;
    color: var(--color-text-placeholder);
    margin: 0;
    animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.4s both;
}

.confirmation-card[b-a498g6p9or] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.6s both;
}

.booking-reference[b-a498g6p9or] {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--color-background);
}

.booking-reference h2[b-a498g6p9or] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.reference-code[b-a498g6p9or] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    background: var(--color-background);
    padding: 1rem 2rem;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
    display: inline-block;
}

.hotel-details[b-a498g6p9or] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-background);
}

.hotel-details h3[b-a498g6p9or] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.hotel-address[b-a498g6p9or] {
    color: var(--color-text-placeholder);
    line-height: 1.6;
}

.hotel-address p[b-a498g6p9or] {
    margin: 0.25rem 0;
}

/* Stay-detail rows (.stay-details/.detail-row/.detail-label/.detail-value/
   .total-amount) now live in the shared BookingDetailsSummary component
   (Components/BookingDetailsSummary.razor.css). */

.notification-card[b-a498g6p9or] {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.8s both;
}

.email-icon[b-a498g6p9or] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.notification-content h3[b-a498g6p9or] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #065f46;
    margin: 0 0 0.5rem 0;
}

.notification-content p[b-a498g6p9or] {
    color: #047857;
    margin: 0;
    line-height: 1.5;
}

.confirmation-actions[b-a498g6p9or] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fade-in-up-b-a498g6p9or 0.6s ease-out 1s both;
}

.btn-primary[b-a498g6p9or],
.btn-secondary[b-a498g6p9or] {
    padding: 0.875rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.btn-primary[b-a498g6p9or] {
    background: var(--color-primary-navy);
    color: #fff;
}

.btn-primary:hover[b-a498g6p9or] {
    background: var(--color-primary-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
}

.btn-secondary[b-a498g6p9or] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover[b-a498g6p9or] {
    background: var(--color-background);
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Cancellation Policy Styles */
.cancellation-card[b-a498g6p9or] {
    border-left: 4px solid #f59e0b;
}

.cancellation-title[b-a498g6p9or] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.cancellation-refundable[b-a498g6p9or] {
    margin-bottom: 1rem;
}

.refundable-badge[b-a498g6p9or] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.refundable-badge.refundable[b-a498g6p9or] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #d1fae5;
}

.refundable-badge.non-refundable[b-a498g6p9or] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.refundable-badge.conditional[b-a498g6p9or] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.cancellation-item[b-a498g6p9or] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-background);
}

.cancellation-item:last-child[b-a498g6p9or] {
    border-bottom: none;
}

.cancellation-description[b-a498g6p9or] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #fffbeb;
    border-radius: 8px;
    border: 1px solid #fde68a;
}

.cancellation-description p[b-a498g6p9or] {
    margin: 0;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cancellation-hotel-policy[b-a498g6p9or] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-background);
}

.cancellation-hotel-policy p[b-a498g6p9or] {
    margin: 0.25rem 0;
    color: var(--color-text-placeholder);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* error styles */
.error-header[b-a498g6p9or] {
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%) !important;
}

.error-icon[b-a498g6p9or] {
    width: 60px;
    height: 60px;
    background: var(--color-error);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-card[b-a498g6p9or] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

    .error-card h3[b-a498g6p9or] {
        color: #b91c1c;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 600;
    }

.error-item[b-a498g6p9or] {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-background);
}

    .error-item:last-child[b-a498g6p9or] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.error-title[b-a498g6p9or] {
    color: #dc2626;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}

.error-detail[b-a498g6p9or] {
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 5px;
}

.error-code[b-a498g6p9or] {
    color: #9ca3af;
    font-size: 12px;
    font-family: monospace;
}
/* Animations */
@keyframes scale-in-b-a498g6p9or {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-in-up-b-a498g6p9or {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .confirmation-container[b-a498g6p9or] {
        padding: 0 1rem 1rem 1rem;
    }

    .edit-booking[b-a498g6p9or] {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .edit-link[b-a498g6p9or] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    .edit-icon[b-a498g6p9or] {
        width: 14px;
        height: 14px;
    }

    .confirmation-title[b-a498g6p9or] {
        font-size: 2rem;
    }

    .confirmation-subtitle[b-a498g6p9or] {
        font-size: 1.125rem;
    }

    .confirmation-card[b-a498g6p9or] {
        padding: 1.5rem;
    }

    .reference-code[b-a498g6p9or] {
        font-size: 1.5rem;
        padding: 0.75rem 1.5rem;
    }

    .confirmation-actions[b-a498g6p9or] {
        flex-direction: column;
    }

    .btn-primary[b-a498g6p9or],
    .btn-secondary[b-a498g6p9or] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .edit-booking[b-a498g6p9or] {
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .success-icon[b-a498g6p9or] {
        width: 60px;
        height: 60px;
    }

    .confirmation-title[b-a498g6p9or] {
        font-size: 1.75rem;
    }

    .confirmation-card[b-a498g6p9or] {
        padding: 1rem;
    }

    .reference-code[b-a498g6p9or] {
        font-size: 1.25rem;
        padding: 0.5rem 1rem;
        letter-spacing: 1px;
    }

    .notification-card[b-a498g6p9or] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .email-icon[b-a498g6p9or] {
        align-self: center;
        margin-top: 0;
    }
    .confirmation-container[b-a498g6p9or] {
        min-height: 100vh;
        width: 70%;
        /*background: linear-gradient(135deg, var(--color-background) 0%, var(--color-border) 100%);*/
        padding: 0 1rem 2rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: center;
        margin: 0 auto;
        
    }

    .edit-booking[b-a498g6p9or] {
        width: 100%;
        display: flex;
        justify-content: right;
        right: 2rem;
        margin-top: 1rem;
        cursor: pointer;
    }

    .edit-link[b-a498g6p9or] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        text-decoration: none;
        color: var(--color-text-placeholder);
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .edit-link:hover[b-a498g6p9or] {
        background: var(--color-background);
        border-color: #d1d5db;
        color: var(--color-text-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .edit-icon[b-a498g6p9or] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .confirmation-main[b-a498g6p9or] {
        max-width: 600px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .confirmation-header[b-a498g6p9or] {
        text-align: center;
        margin-bottom: 1rem;
    }

    .success-icon[b-a498g6p9or] {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem auto;
        animation: scale-in-b-a498g6p9or 0.5s ease-out;
    }

    .success-icon svg[b-a498g6p9or] {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.3));
    }

    .confirmation-title[b-a498g6p9or] {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 0.5rem;
        animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.2s both;
    }

    .confirmation-subtitle[b-a498g6p9or] {
        font-size: 1.25rem;
        color: var(--color-text-placeholder);
        margin: 0;
        animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.4s both;
    }

    .confirmation-card[b-a498g6p9or] {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        padding: 2rem;
        animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.6s both;
    }

    .booking-reference[b-a498g6p9or] {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid var(--color-background);
    }

    .booking-reference h2[b-a498g6p9or] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: 1rem;
    }

    .reference-code[b-a498g6p9or] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-text-primary);
        letter-spacing: 2px;
        font-family: 'Courier New', monospace;
        background: var(--color-background);
        padding: 1rem 2rem;
        border-radius: 12px;
        border: 2px dashed #d1d5db;
        display: inline-block;
    }

    .hotel-details[b-a498g6p9or] {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--color-background);
    }

    .hotel-details h3[b-a498g6p9or] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 0.75rem;
    }

    .hotel-address[b-a498g6p9or] {
        color: var(--color-text-placeholder);
        line-height: 1.6;
    }

    .hotel-address p[b-a498g6p9or] {
        margin: 0.25rem 0;
    }

    .stay-details[b-a498g6p9or] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .detail-row[b-a498g6p9or] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-background);
    }

    .detail-row:last-child[b-a498g6p9or] {
        border-bottom: none;
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 2px solid var(--color-background);
    }

    .detail-label[b-a498g6p9or] {
        font-weight: 500;
        color: var(--color-text-primary);
    }

    .detail-value[b-a498g6p9or] {
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .total-amount[b-a498g6p9or] {
        font-size: 1.25rem;
        color: #059669;
    }

    .notification-card[b-a498g6p9or] {
        background: #ecfdf5;
        border: 1px solid #d1fae5;
        border-radius: 12px;
        padding: 1.5rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        animation: fade-in-up-b-a498g6p9or 0.6s ease-out 0.8s both;
    }

    .email-icon[b-a498g6p9or] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 0.25rem;
    }

    .notification-content h3[b-a498g6p9or] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #065f46;
        margin: 0 0 0.5rem 0;
    }

    .notification-content p[b-a498g6p9or] {
        color: #047857;
        margin: 0;
        line-height: 1.5;
    }

    .confirmation-actions[b-a498g6p9or] {
        display: flex;
        gap: 1rem;
        justify-content: center;
        animation: fade-in-up-b-a498g6p9or 0.6s ease-out 1s both;
    }

    .btn-primary[b-a498g6p9or],
    .btn-secondary[b-a498g6p9or] {
        padding: 0.875rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 160px;
    }

    .btn-primary[b-a498g6p9or] {
        background: var(--color-primary-navy);
        color: #fff;
    }

    .btn-primary:hover[b-a498g6p9or] {
        background: var(--color-primary-navy);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
    }

    .btn-secondary[b-a498g6p9or] {
        background: var(--color-background);
        color: var(--color-text-primary);
        border: 2px solid var(--color-border);
    }

    .btn-secondary:hover[b-a498g6p9or] {
        background: var(--color-background);
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Cancellation Policy Styles */
    .cancellation-card[b-a498g6p9or] {
        border-left: 4px solid #f59e0b;
    }

    .cancellation-title[b-a498g6p9or] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 1rem;
    }

    .cancellation-refundable[b-a498g6p9or] {
        margin-bottom: 1rem;
    }

    .refundable-badge[b-a498g6p9or] {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .refundable-badge.refundable[b-a498g6p9or] {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #d1fae5;
    }

    .refundable-badge.non-refundable[b-a498g6p9or] {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .refundable-badge.conditional[b-a498g6p9or] {
        background: #fffbeb;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .cancellation-item[b-a498g6p9or] {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-background);
    }

    .cancellation-item:last-child[b-a498g6p9or] {
        border-bottom: none;
    }

    .cancellation-description[b-a498g6p9or] {
        margin-top: 0.5rem;
        padding: 0.75rem;
        background: #fffbeb;
        border-radius: 8px;
        border: 1px solid #fde68a;
    }

    .cancellation-description p[b-a498g6p9or] {
        margin: 0;
        color: #92400e;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .cancellation-hotel-policy[b-a498g6p9or] {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-background);
    }

    .cancellation-hotel-policy p[b-a498g6p9or] {
        margin: 0.25rem 0;
        color: var(--color-text-placeholder);
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .booking-ids-section[b-a498g6p9or] {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--color-background);
    }

    .booking-id-value[b-a498g6p9or] {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        background: var(--color-background);
        padding: 0.2rem 0.5rem;
        border-radius: 6px;
        border: 1px solid var(--color-border);
        letter-spacing: 0.5px;
    }

    /* error styles */
    .error-header[b-a498g6p9or] {
        background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%) !important;
    }

    .error-icon[b-a498g6p9or] {
        width: 60px;
        height: 60px;
        background: var(--color-error);
        border-radius: 50%;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .error-card[b-a498g6p9or] {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
    }

        .error-card h3[b-a498g6p9or] {
            color: #b91c1c;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: 600;
        }

    .error-item[b-a498g6p9or] {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--color-background);
    }

        .error-item:last-child[b-a498g6p9or] {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

    .error-title[b-a498g6p9or] {
        color: #dc2626;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .error-detail[b-a498g6p9or] {
        color: #7f1d1d;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .error-code[b-a498g6p9or] {
        color: #9ca3af;
        font-size: 12px;
        font-family: monospace;
    }
    /* Animations */
    @keyframes scale-in-b-a498g6p9or {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes fade-in-up-b-a498g6p9or {
        0% {
            transform: translateY(30px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .confirmation-container[b-a498g6p9or] {
            padding: 0 1rem 1rem 1rem;
        }

        .edit-booking[b-a498g6p9or] {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .edit-link[b-a498g6p9or] {
            padding: 0.375rem 0.75rem;
            font-size: 0.8rem;
        }

        .edit-icon[b-a498g6p9or] {
            width: 14px;
            height: 14px;
        }

        .confirmation-title[b-a498g6p9or] {
            font-size: 2rem;
        }

        .confirmation-subtitle[b-a498g6p9or] {
            font-size: 1.125rem;
        }

        .confirmation-card[b-a498g6p9or] {
            padding: 1.5rem;
        }

        .reference-code[b-a498g6p9or] {
            font-size: 1.5rem;
            padding: 0.75rem 1.5rem;
        }

        .confirmation-actions[b-a498g6p9or] {
            flex-direction: column;
        }

        .btn-primary[b-a498g6p9or],
        .btn-secondary[b-a498g6p9or] {
            width: 100%;
        }

        .detail-row[b-a498g6p9or] {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }

        .detail-value[b-a498g6p9or] {
            align-self: flex-end;
        }
    }

    @media (max-width: 480px) {
        .edit-booking[b-a498g6p9or] {
            justify-content: center;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .success-icon[b-a498g6p9or] {
            width: 60px;
            height: 60px;
        }

        .confirmation-title[b-a498g6p9or] {
            font-size: 1.75rem;
        }

        .confirmation-card[b-a498g6p9or] {
            padding: 1rem;
        }

        .reference-code[b-a498g6p9or] {
            font-size: 1.25rem;
            padding: 0.5rem 1rem;
            letter-spacing: 1px;
        }

        .notification-card[b-a498g6p9or] {
            padding: 1rem;
            flex-direction: column;
            text-align: center;
        }

        .email-icon[b-a498g6p9or] {
            align-self: center;
            margin-top: 0;
        }
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =============================================================================
   Home (hotel search) — Hero, ported from FigmaStatic/css/styles.css
   (Figma › 03 Pages › Hotel / Desktop · Tablet · Mobile). Values via the design
   tokens. Adapted for the Blazor /hotel layout: a full-bleed breakout cancels
   the article padding (MainLayout.razor.css:73 → 2rem/1.5rem desktop, px-4
   mobile; .content top pad 1.1rem) so the hero runs edge-to-edge.
   ============================================================================= */

.hero[b-a70ati4joa] {
    position: relative;
    display: flex;
    align-items: center;
    /* Figma 352:7614 hero band is compact (~hero content 291 + py-16). */
    min-height: 380px;
    /* overflow must stay visible so the date/guest popups can extend past the
       hero's bottom edge; the bg <img> is clipped on its own instead. */
    overflow: visible;
    background: var(--color-surface);
    /* full-bleed */
    margin: -1.1rem -1.5rem 0 -1.5rem;
}

@media (min-width: 641px) {
    .hero[b-a70ati4joa] {
        margin-left: -2rem;
        margin-right: -1.5rem;
    }
}

/* Above the 1440 page container — the box Navbar's .header-inner and the page content
   centre in — the full-bleed margins above would keep stretching the photo to the screen
   edges. Cap it there so the hero lines up with the header and the cards below it instead
   of running wider than everything else on the page.
   MUST stay after the full-bleed rule: same specificity, so source order is what lets the
   cap win at >=1440. Below 1440 the negative margins still apply and the hero is
   viewport-wide, so the two behaviours meet at the breakpoint with no jump in width. */
@media (min-width: 1440px) {
    .hero[b-a70ati4joa] {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }
}

.hero__bg[b-a70ati4joa] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* 1440, not 1320: the page container Navbar's .header-inner uses and its own comment calls
   "the same box the page content (search bar + results) centres in, so their edges line
   up". At 1320 the search bar sat 60px inside the logo above it and the cards below. */
.hero__content[b-a70ati4joa] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /* Figma: Hero Content px-32, compact vertical rhythm; gap headline→search 16. */
    padding: 40px var(--space-32);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
}

.hero__headline[b-a70ati4joa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* On desktop the hero keeps the search card left-aligned with the headline
   (Figma). Tablet/mobile keep the component's own centering. */
@media (min-width: 1024px) {
    .hero[b-a70ati4joa]  .hotel-search {
        margin-left: 0;
    }
}

.hero__title[b-a70ati4joa] {
    margin: 0;
    font: var(--font-display-lg);        /* Inter Bold 40/48 */
    color: var(--color-text-primary);    /* #464d69 */
}

.hero__subtitle[b-a70ati4joa] {
    margin: 0;
    font: var(--font-display-lg);
    color: var(--color-text-action);     /* #ffc300 */
}

/* ---- Tablet (671–1023px) — Figma › Hotel / Tablet -------------------------- */
@media (max-width: 1023px) {
    .hero[b-a70ati4joa] { min-height: 491px; }
    .hero__content[b-a70ati4joa] { padding: 32px; gap: var(--space-32); max-width: 100%; }
    .hero__headline[b-a70ati4joa] { gap: var(--space-16); }
    .hero__title[b-a70ati4joa] { font: var(--font-display-sm); }                                  /* Bold 32/40 */
    .hero__subtitle[b-a70ati4joa] { font: var(--font-heading-sm); color: var(--color-text-action); } /* Semibold 20/28 */
}

/* ---- Mobile (≤670px) — Figma › Hotel / Mobile: no photo, no headline -------- */
@media (max-width: 670px) {
    .hero[b-a70ati4joa] {
        min-height: 0;
        display: block;
        background: var(--color-surface);
    }
    .hero__bg[b-a70ati4joa] { display: none; }
    .hero__headline[b-a70ati4joa] { display: none; }
    .hero__content[b-a70ati4joa] { padding: var(--space-16); gap: 0; }
}
/* /Components/Pages/Reserve.razor.rz.scp.css */
.reserve-main[b-ilo17ez4hi] {
    display: flex;
    gap: 2.5rem;
    max-width: 1400px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.reserve-left[b-ilo17ez4hi] {
    flex: 2;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 2.5rem 2rem;
}

/* Page title. The bottom margin is set explicitly rather than left to the UA default
   (0.67em): that default collapses against the "Enter Your Details" h2's own top margin,
   so the two headings ended up a single line-height apart and read as one stacked block
   instead of a title above a section. */
.reserve-left h1[b-ilo17ez4hi] {
    margin: 0 0 2.5rem;
}

.reserve-right[b-ilo17ez4hi] {
    flex: 1;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
}

/* ── Stacked layout (≤991px): summary first ──────────────────────────────────
   The guest is asked to pay off the summary, so on a narrow screen it belongs
   directly under the heading — above the form *and* above the profile-prefilled
   notice, which is about the form rather than the booking.
   Order: heading → summary → prefill notice → form.

   The heading and the form are both inside .reserve-left, and the summary is its
   sibling, so `order` alone cannot interleave them. `display: contents` dissolves
   .reserve-left's box so its children become flex items of .reserve-main and can
   be ordered against .reserve-right. The card chrome that box was carrying moves
   onto .reserve-form, which is why that wrapper exists. Desktop is untouched. */
@media (max-width: 991px) {
    .reserve-left[b-ilo17ez4hi] {
        display: contents;
    }

    .reserve-left h1[b-ilo17ez4hi] {
        order: 1;
        margin: 0;
    }

    .reserve-right[b-ilo17ez4hi] {
        order: 2;
    }

    /* The profile-prefilled notice is about the form, not the booking, so it sits with the
       form below the summary rather than pushing the summary down the page. */
    .reserve-left .alert[b-ilo17ez4hi] {
        order: 3;
    }

    .reserve-form[b-ilo17ez4hi] {
        order: 4;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
        padding: 1.5rem 1.2rem;
    }
}

/* Expired-session notice. Centred in the page the booking form would have filled, so it
   reads as the state of the page rather than a banner on top of a usable form. */
.session-expired[b-ilo17ez4hi] {
    max-width: 640px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.session-expired__message[b-ilo17ez4hi] {
    font: var(--font-heading-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8);
}

.session-expired__redirect[b-ilo17ez4hi] {
    font: var(--font-body-md);
    color: var(--color-text-placeholder);
    margin: 0;
}

.loading[b-ilo17ez4hi], .error[b-ilo17ez4hi] {
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    color: var(--color-text-placeholder);
}

.error[b-ilo17ez4hi] {
    color: var(--color-error);
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}



/* Responsive styles */
@media (min-width: 1400px) {
    .reserve-main[b-ilo17ez4hi] {
        max-width: 1600px;
        margin: 3rem auto;
    }
    .reserve-left[b-ilo17ez4hi] {
        padding: 3rem 2.5rem;
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .reserve-main[b-ilo17ez4hi] {
        max-width: 1200px;
        margin: 2rem auto;
    }
    .reserve-left[b-ilo17ez4hi] {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .reserve-main[b-ilo17ez4hi] {
        max-width: 1000px;
        gap: 2rem;
        margin: 1.5rem auto;
    }
    .reserve-left[b-ilo17ez4hi] {
        padding: 1.8rem 1.5rem;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .reserve-main[b-ilo17ez4hi] {
        flex-direction: column;
        gap: 1.5rem;
        margin: 1rem auto;
    }
    .reserve-form[b-ilo17ez4hi] {
        padding: 1.5rem 1.2rem;
    }
    .reserve-right[b-ilo17ez4hi] {
        position: static;
        align-self: stretch;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .reserve-main[b-ilo17ez4hi] {
        flex-direction: column;
        gap: 1rem;
        margin: 0.5rem auto;
        padding: 0 0.5rem;
    }
    .reserve-form[b-ilo17ez4hi] {
        padding: 1.2rem 1rem;
        border-radius: 12px;
    }
    .reserve-right[b-ilo17ez4hi] {
        position: static;
        align-self: stretch;
    }
}

@media (max-width: 575px) {
    .reserve-main[b-ilo17ez4hi] {
        flex-direction: column;
        gap: 0.75rem;
        margin: 0.25rem auto;
        padding: 0 0.25rem;
    }
    .reserve-form[b-ilo17ez4hi] {
        padding: 1rem 0.75rem;
        border-radius: 10px;
    }
    .reserve-right[b-ilo17ez4hi] {
        position: static;
        align-self: stretch;
    }
}

@media (max-width: 375px) {
    .reserve-main[b-ilo17ez4hi] {
        gap: 0.5rem;
        margin: 0.125rem auto;
        padding: 0 0.125rem;
    }
    .reserve-form[b-ilo17ez4hi] {
        padding: 0.75rem 0.5rem;
        border-radius: 8px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .reserve-left[b-ilo17ez4hi],
    .reserve-form[b-ilo17ez4hi] {
        box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reserve-left[b-ilo17ez4hi] {
        transition: none;
    }
}

@media print {
    .reserve-main[b-ilo17ez4hi] {
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .reserve-left[b-ilo17ez4hi],
    .reserve-form[b-ilo17ez4hi],
    .reserve-right[b-ilo17ez4hi] {
        box-shadow: none;
        border: 1px solid var(--color-border);
    }
}


/* /Components/Pages/Results.razor.rz.scp.css */
/* Page-specific styles for Results page */
.loading[b-ic739abnlq], .error[b-ic739abnlq] {
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    color: var(--color-text-placeholder);
}

.error[b-ic739abnlq] {
    color: var(--color-error);
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}

.load-more-container[b-ic739abnlq] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem;
}

/* Outlined, not a dark fill — same treatment as the calendar/filter buttons. */
.load-more-btn[b-ic739abnlq] {
    padding: var(--space-16) var(--space-20);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-12);
    background: var(--color-surface);
    color: var(--color-primary);
    font: var(--font-label-lg);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.15s ease;
}

.load-more-btn:hover:not(:disabled)[b-ic739abnlq] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.load-more-btn:disabled[b-ic739abnlq] {
    opacity: 0.65;
    cursor: default;
}

.no-rates-container[b-ic739abnlq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.no-rates-message[b-ic739abnlq] {
    margin: 0;
    color: #4b5563;
    font-size: 1.05rem;
}

.btn[b-ic739abnlq] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
}

.btn-primary[b-ic739abnlq] {
    background: var(--color-primary-navy);
    color: white;
    border-color: var(--color-primary-navy);
}

.btn-outline-primary[b-ic739abnlq] {
    color: var(--color-primary-navy);
    border-color: var(--color-primary-navy);
}

.btn-secondary[b-ic739abnlq] {
    background: var(--color-text-placeholder);
    color: white;
    border-color: var(--color-text-placeholder);
}

.btn:hover[b-ic739abnlq] {
    opacity: 0.8;
}

.results-layout[b-ic739abnlq] {
    display: grid;
    /* Figma 352:7624: 265px filter panel + a results column of 3 cards, 32px gap.
       Horizontal centring/padding is handled by .results-page__inner so the
       header, search bar and results share one box; here only the grid + the
       gap below the search bar. */
    grid-template-columns: 265px 1fr;
    gap: var(--space-32);
    padding: 0;
}

/* Full-bleed: cancel MainLayout's article padding so the shared inner box can
   centre on the viewport (matching the header, which lives outside the article).
   Values mirror MainLayout.razor.css: desktop 2rem/1.5rem, mobile px-4 = 1.5rem. */
.results-page[b-ic739abnlq] {
    margin: 0 -1.5rem;
}

@media (min-width: 641px) {
    .results-page[b-ic739abnlq] {
        margin-left: -2rem;
        margin-right: -1.5rem;
    }
}

/* The Figma "Content" box: one 1440-wide, 32-padded column holding the search
   bar and the results, with 40px between them. */
.results-page__inner[b-ic739abnlq] {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
}

/* The search bar fills the content width here (its own 1180 cap is for the hero). */
.results-page__inner[b-ic739abnlq]  .hotel-search {
    max-width: none;
}

.filters-sidebar[b-ic739abnlq] {
    position: sticky;
    top: 1rem;
    height: fit-content;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

.results-main[b-ic739abnlq] {
    min-width: 0; /* Prevents grid blowout */
}

.loading[b-ic739abnlq] {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: var(--color-text-placeholder);
}

/* Sidebar Mini Map Section */
.sidebar-map-section[b-ic739abnlq] {
    /* Cancel .filters-sidebar's 1rem padding on the top/left/right so the map
       sits flush against the card edges, like the photo on a result card. */
    margin: -1rem -1rem 1.5rem -1rem;
}

.mini-map-wrapper[b-ic739abnlq] {
    position: relative;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    cursor: pointer;
}

.sidebar-mini-map-iframe[b-ic739abnlq] {
    width: 100%;
    height: 180px;
    border: none;
    pointer-events: none;
    display: block;
}

.sidebar-mini-map-overlay[b-ic739abnlq] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    padding: 1.5rem 0.75rem 0.75rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.2s ease;
}

.mini-map-wrapper:hover .sidebar-mini-map-overlay[b-ic739abnlq] {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.sidebar-map-icon[b-ic739abnlq] {
    font-size: 1.1rem;
}

.sidebar-map-label[b-ic739abnlq] {
    font-size: 0.85rem;
}

.sidebar-map-no-location[b-ic739abnlq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: var(--color-background);
    border-radius: 8px 8px 0 0;
    color: var(--color-text-placeholder);
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.sidebar-map-no-location span:first-child[b-ic739abnlq] {
    font-size: 1.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .results-layout[b-ic739abnlq] {
        /* Slightly narrower panel + gap on tablet to buy the cards width. */
        grid-template-columns: 240px 1fr;
        gap: var(--space-16);
    }
}

@media (max-width: 768px) {
    .results-layout[b-ic739abnlq] {
        grid-template-columns: 1fr;
        gap: 1rem;
        /* Stacked layout: no side padding, so the filter panel and the cards line
           up with the search bar above them. The page's own article padding is
           the single source of the mobile side margin. */
        padding: 1rem 0;
    }

    .filters-sidebar[b-ic739abnlq] {
        position: static;
        margin-bottom: 1rem;
    }

    .sidebar-map-section[b-ic739abnlq] {
        /* Keep the flush-to-card breakout on mobile too. */
        margin-top: -1rem;
    }

    .sidebar-mini-map-iframe[b-ic739abnlq] {
        height: 150px;
    }

    .load-more-btn[b-ic739abnlq] {
        width: 100%;
        min-width: 0;
    }
}


/* Site polish & mobile overrides - folded in from deployed hotfix 2026-06-10 */
.filters-sidebar[b-ic739abnlq] {
    border: 1px solid #eef1f6;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    border-radius: 12px;
}


/* Expired-session notice. Same treatment as the Reserve page's (Reserve.razor.css) so the two
   recovery screens read as one behaviour; it stands in for the whole results page, search bar
   included, rather than sitting inside the results column. */
.session-expired[b-ic739abnlq] {
    max-width: 640px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.session-expired__message[b-ic739abnlq] {
    font: var(--font-heading-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8);
}

.session-expired__redirect[b-ic739abnlq] {
    font: var(--font-body-md);
    color: var(--color-text-placeholder);
    margin: 0;
}
/* /Components/Pages/RoomDetails.razor.rz.scp.css */
nav .room-details-main[b-hc1kywp1gp] {
    max-width: 1200px;
    margin: 2.5rem auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 2.5rem 2rem;
}

/* Figma 352:7119: the content is flat on the page (no boxed white card) and
   shares the header's 1440/32 box. .details-page cancels the article's
   asymmetric padding so the box centres on the viewport (as on the results page);
   .details-page__inner is that shared box. */
.details-page[b-hc1kywp1gp] {
    margin: 0 -1.5rem;
}

@media (min-width: 641px) {
    .details-page[b-hc1kywp1gp] {
        margin-left: -2rem;
        margin-right: -1.5rem;
    }
}

.details-page__inner[b-hc1kywp1gp] {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* Search bar fills the content width here (its 1180 cap is only for the hero). */
.details-page__inner[b-hc1kywp1gp]  .hotel-search {
    max-width: none;
}

/* Strip the boxed-card chrome and width constraints — the shared box handles
   width/padding now, and Figma shows flat content. Higher specificity than every
   responsive .room-details-main override below. */
.details-page__inner .room-details-main[b-hc1kywp1gp] {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.loading[b-hc1kywp1gp], .error[b-hc1kywp1gp] {
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    color: var(--color-text-placeholder);
}

.footer[b-hc1kywp1gp] {
    justify-content: center;
    margin-top: 1.5rem;
}

.error[b-hc1kywp1gp] {
    color: var(--color-error);
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}

/* Gallery + Mini Map Row */
.gallery-map-row[b-hc1kywp1gp] {
    display: flex;
    gap: 1.2rem;
    /* stretch (not flex-start) so the map card matches the photo panel's height —
       tops and bottoms both line up. */
    align-items: stretch;
    margin: 0;
}

.gallery-section[b-hc1kywp1gp] {
    flex: 1;
    min-width: 0;
}

/* Shown only when the gallery has no photo to render (see RoomDetails.razor), in the
   gallery's own slot beside the map. Same card chrome as .map-poi-column so the two read
   as one system. */
.hotel-description-section[b-hc1kywp1gp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: var(--space-16);
}

.hotel-description-section h3[b-hc1kywp1gp] {
    margin: 0 0 var(--space-12) 0;
    font-size: 1.2rem;
    color: var(--color-text-primary);
}

/* Fills the slot the gallery would have occupied. 400px is the gallery grid's own height
   (RoomGallery.razor.css), so a photo-less hotel keeps the row's proportions instead of
   leaving a blank half beside the map.

   The prose scrolls inside rather than growing the row: .gallery-map-row is
   `align-items: stretch`, so a long blurb would otherwise drag .map-poi-column up to match
   and leave a several-hundred-pixel-tall mini-map next to it. Most blurbs fit. */
.gallery-section .hotel-description-section[b-hc1kywp1gp] {
    height: 400px;
    overflow-y: auto;
}

/* One card holding the map (flush at top) and the nearby list — like the
   search page's filter panel. */
.map-poi-column[b-hc1kywp1gp] {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.mini-map-section[b-hc1kywp1gp] {
    position: relative;
    /* Grows to fill the stretched card so the nearby list stays pinned to the
       bottom (aligned with the photo panel); 200px is the floor. */
    flex: 1;
    min-height: 200px;
}

.mini-map-iframe[b-hc1kywp1gp] {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.mini-map-click-overlay[b-hc1kywp1gp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
    background: transparent;
    display: flex;
    align-items: flex-end;
}

.mini-map-overlay[b-hc1kywp1gp] {
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    padding: 1.5rem 1rem 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.mini-map-section:hover .mini-map-overlay[b-hc1kywp1gp] {
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
}

.mini-map-expand-icon[b-hc1kywp1gp] {
    font-size: 1.2rem;
}

.mini-map-label[b-hc1kywp1gp] {
    font-size: 0.95rem;
}

.mini-map-no-location[b-hc1kywp1gp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--color-background);
    color: var(--color-text-placeholder);
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.mini-map-no-location span:first-child[b-hc1kywp1gp] {
    font-size: 2rem;
}

.back-button-container[b-hc1kywp1gp] {
    /* Tight: no boxed padding, pulled up to trim the gap above the bottom link. */
    padding: 0;
    margin-top: -0.5rem;
}

/* Plain clickable text label, not a button — no fill or border. */
.back-link[b-hc1kywp1gp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.back-link:hover[b-hc1kywp1gp],
.back-link:focus-visible[b-hc1kywp1gp] {
    text-decoration: underline;
}

/* Sits just above the header — a little breathing room top and bottom. */
.back-link--top[b-hc1kywp1gp] {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.back-arrow[b-hc1kywp1gp] {
    font-size: 1.25rem;
    line-height: 1;
}

/* Responsive styles */
@media (min-width: 1400px) {
    .room-details-main[b-hc1kywp1gp] {
        max-width: 1400px;
        margin: 3rem auto;
        padding: 3rem 2.5rem;
    }

    .map-poi-column[b-hc1kywp1gp] {
        flex: 0 0 300px;
    }

    .mini-map-section[b-hc1kywp1gp] {
        min-height: 220px;
        height: 220px;
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .room-details-main[b-hc1kywp1gp] {
        max-width: 1100px;
        margin: 2rem auto;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .room-details-main[b-hc1kywp1gp] {
        max-width: 900px;
        margin: 1.5rem auto;
        padding: 1.5rem 1rem;
    }

    .map-poi-column[b-hc1kywp1gp] {
        flex: 0 0 210px;
    }

    .mini-map-section[b-hc1kywp1gp] {
        min-height: 180px;
        height: 180px;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .room-details-main[b-hc1kywp1gp] {
        margin: 1rem auto;
        padding: 1rem 0.75rem;
        border-radius: 12px;
    }

    .gallery-map-row[b-hc1kywp1gp] {
        flex-direction: column;
    }

    /* Stacked: the description is full width above the map, so the gallery-sized box and
       its scrollbar stop making sense — let the prose run. */
    .gallery-section .hotel-description-section[b-hc1kywp1gp] {
        height: auto;
        overflow-y: visible;
    }

    .map-poi-column[b-hc1kywp1gp] {
        flex: none;
        width: 100%;
    }

    .mini-map-section[b-hc1kywp1gp] {
        flex: none;
        height: 180px;
        min-height: unset;
    }
}

@media (max-width: 575px) {
    .room-details-main[b-hc1kywp1gp] {
        margin: 0.5rem auto;
        padding: 0.75rem 0.5rem;
        border-radius: 8px;
    }

    .gallery-map-row[b-hc1kywp1gp] {
        flex-direction: column;
        gap: 0.8rem;
    }

    /* Stacked: the description is full width above the map, so the gallery-sized box and
       its scrollbar stop making sense — let the prose run. */
    .gallery-section .hotel-description-section[b-hc1kywp1gp] {
        height: auto;
        overflow-y: visible;
    }

    .map-poi-column[b-hc1kywp1gp] {
        flex: none;
        width: 100%;
    }

    .mini-map-section[b-hc1kywp1gp] {
        flex: none;
        height: 160px;
        min-height: unset;
    }
}

@media (max-width: 375px) {
    .room-details-main[b-hc1kywp1gp] {
        margin: 0.25rem auto;
        padding: 0.5rem 0.25rem;
    }

    .mini-map-section[b-hc1kywp1gp] {
        height: 140px;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .room-details-main[b-hc1kywp1gp] {
        margin: 0.5rem auto;
        padding: 0.75rem 0.5rem;
    }

    .gallery-map-row[b-hc1kywp1gp] {
        flex-direction: row;
    }

    .map-poi-column[b-hc1kywp1gp] {
        flex: 0 0 200px;
        width: auto;
    }

    .mini-map-section[b-hc1kywp1gp] {
        min-height: 180px;
        height: 180px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .room-details-main[b-hc1kywp1gp] {
        box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-details-main[b-hc1kywp1gp] {
        transition: none;
    }

    .mini-map-section[b-hc1kywp1gp] {
        transition: none;
    }

    .mini-map-overlay[b-hc1kywp1gp] {
        transition: none;
    }
}


/* /Components/Pages/UpdateBookings.razor.rz.scp.css */
.update-booking-container[b-jk4vkpmlsk] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-border) 100%);
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.update-booking-main[b-jk4vkpmlsk] {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header Styles */
.update-header[b-jk4vkpmlsk] {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-background);
}

.header-icon[b-jk4vkpmlsk] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary-navy) 0%, var(--color-primary-navy) 100%);
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .header-icon svg[b-jk4vkpmlsk] {
        width: 28px;
        height: 28px;
    }

.update-header h1[b-jk4vkpmlsk] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.update-header p[b-jk4vkpmlsk] {
    font-size: 1.125rem;
    color: var(--color-text-placeholder);
    margin: 0;
    line-height: 1.6;
}

/* Confirmation Header (shown after successful search) */
.confirmation-header[b-jk4vkpmlsk] {
    text-align: center;
    margin-bottom: 1rem;
}

.confirmation-header .success-icon[b-jk4vkpmlsk] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    animation: scale-in-b-jk4vkpmlsk 0.5s ease-out;
}

    .confirmation-header .success-icon svg[b-jk4vkpmlsk] {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.3));
    }

.confirmation-title[b-jk4vkpmlsk] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    animation: fade-in-up-b-jk4vkpmlsk 0.6s ease-out 0.2s both;
}

.confirmation-subtitle[b-jk4vkpmlsk] {
    font-size: 1.25rem;
    color: var(--color-text-placeholder);
    margin: 0;
    animation: fade-in-up-b-jk4vkpmlsk 0.6s ease-out 0.4s both;
}

/* Search Section */
.search-section[b-jk4vkpmlsk] {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-background);
}

.search-form[b-jk4vkpmlsk] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group[b-jk4vkpmlsk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .input-group label[b-jk4vkpmlsk] {
        font-weight: 600;
        color: var(--color-text-primary);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

.reference-input[b-jk4vkpmlsk],
.email-input[b-jk4vkpmlsk] {
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #fff;
}

    .reference-input:focus[b-jk4vkpmlsk],
    .email-input:focus[b-jk4vkpmlsk] {
        outline: none;
        border-color: var(--color-primary-navy);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        transform: translateY(-1px);
    }

.search-btn[b-jk4vkpmlsk] {
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-text-primary) 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
}

    .search-btn:hover:not(:disabled)[b-jk4vkpmlsk] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(31, 41, 55, 0.3);
    }

    .search-btn:disabled[b-jk4vkpmlsk] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Error Alert */
.error-alert[b-jk4vkpmlsk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.error-icon[b-jk4vkpmlsk] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.error-alert h4[b-jk4vkpmlsk] {
    color: #dc2626;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.error-alert p[b-jk4vkpmlsk] {
    color: #7f1d1d;
    margin: 0;
    line-height: 1.5;
}

/* Success Alert */
.success-alert[b-jk4vkpmlsk] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #10b981;
    border-radius: 12px;
    color: white;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.success-icon[b-jk4vkpmlsk] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.success-alert h4[b-jk4vkpmlsk] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.success-alert p[b-jk4vkpmlsk] {
    margin: 0;
    font-size: 14px;
    opacity: 0.95;
}

/* Currency Alert */
.currency-alert[b-jk4vkpmlsk] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
    animation: fade-in-up-b-jk4vkpmlsk 0.4s ease-out;
}

.currency-alert h4[b-jk4vkpmlsk] {
    color: #b45309;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}

.currency-alert p[b-jk4vkpmlsk] {
    color: #92400e;
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.currency-alert strong[b-jk4vkpmlsk] {
    color: #78350f;
    font-weight: 700;
}

/* Booking Details */
.booking-details-section[b-jk4vkpmlsk] {
    animation: fade-in-up-b-jk4vkpmlsk 0.5s ease-out;
}

.booking-card[b-jk4vkpmlsk] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-background);
    overflow: hidden;
}

.booking-header[b-jk4vkpmlsk] {
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-border) 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge[b-jk4vkpmlsk] {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-confirmed[b-jk4vkpmlsk] {
    background: #dcfce7;
    color: #166534;
}

.status-cancelled[b-jk4vkpmlsk] {
    background: #fef2f2;
    color: #dc2626;
}

.status-pending[b-jk4vkpmlsk] {
    background: #fef3c7;
    color: #92400e;
}

.booking-reference h3[b-jk4vkpmlsk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.hotel-info[b-jk4vkpmlsk] {
    padding: 2rem;
    border-bottom: 1px solid var(--color-background);
}

    .hotel-info h4[b-jk4vkpmlsk] {
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin: 0 0 0.5rem 0;
    }

.hotel-address[b-jk4vkpmlsk] {
    color: var(--color-text-placeholder);
    margin: 0;
    line-height: 1.6;
}

/* Booking & guest detail rows now live in the shared BookingDetailsSummary
   component (Components/BookingDetailsSummary.razor.css). */

/* Action Buttons */
.booking-actions[b-jk4vkpmlsk] {
    padding: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-primary[b-jk4vkpmlsk],
.btn-secondary[b-jk4vkpmlsk],
.btn-danger[b-jk4vkpmlsk],
.btn-reset[b-jk4vkpmlsk] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
    line-height: 1;
}

.btn-primary[b-jk4vkpmlsk] {
    background: var(--color-primary-navy);
    color: white;
}

    .btn-primary:hover[b-jk4vkpmlsk] {
        background: var(--color-primary-navy);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

.btn-secondary[b-jk4vkpmlsk] {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

    .btn-secondary:hover[b-jk4vkpmlsk] {
        background: var(--color-background);
        border-color: #d1d5db;
        transform: translateY(-1px);
    }

.btn-danger[b-jk4vkpmlsk] {
    background: var(--color-error);
    color: white;
}

    .btn-danger:hover[b-jk4vkpmlsk] {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

.btn-reset[b-jk4vkpmlsk] {
    background: transparent;
    color: var(--color-text-placeholder);
    border: 2px solid var(--color-text-placeholder);
}

    .btn-reset:hover[b-jk4vkpmlsk] {
        background: var(--color-background);
        border-color: #4b5563;
        color: var(--color-text-primary);
        transform: translateY(-1px);
    }

    .btn-primary svg[b-jk4vkpmlsk],
    .btn-secondary svg[b-jk4vkpmlsk],
    .btn-danger svg[b-jk4vkpmlsk],
    .btn-reset svg[b-jk4vkpmlsk] {
        width: 16px;
        height: 16px;
    }

/* Loading spinner */
.loading-spinner[b-jk4vkpmlsk] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-jk4vkpmlsk 1s linear infinite;
    flex-shrink: 0;
}

/* Loading Splash (auto-loaded bookings — card matches .update-header) */
.loading-splash[b-jk4vkpmlsk] {
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.loading-splash-spinner[b-jk4vkpmlsk] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary-navy);
    border-radius: 50%;
    animation: spin-b-jk4vkpmlsk 1s linear infinite;
}

.loading-splash-message[b-jk4vkpmlsk] {
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .loading-splash-spinner[b-jk4vkpmlsk] {
        animation: none;
    }
}

/* Animations */
@keyframes scale-in-b-jk4vkpmlsk {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-in-up-b-jk4vkpmlsk {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes spin-b-jk4vkpmlsk {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Messages */
.validation-message[b-jk4vkpmlsk] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .update-booking-container[b-jk4vkpmlsk] {
        padding: 1rem;
    }

    .update-header[b-jk4vkpmlsk] {
        padding: 2rem 1.5rem;
    }

        .update-header h1[b-jk4vkpmlsk] {
            font-size: 1.875rem;
        }

    .confirmation-title[b-jk4vkpmlsk] {
        font-size: 2rem;
    }

    .confirmation-subtitle[b-jk4vkpmlsk] {
        font-size: 1.125rem;
    }

    .search-section[b-jk4vkpmlsk],
    .hotel-info[b-jk4vkpmlsk],
    .booking-actions[b-jk4vkpmlsk],
    .currency-alert[b-jk4vkpmlsk] {
        padding: 1.5rem;
    }

    .booking-header[b-jk4vkpmlsk] {
        padding: 1.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .booking-actions[b-jk4vkpmlsk] {
        flex-direction: column;
    }

    .btn-primary[b-jk4vkpmlsk],
    .btn-secondary[b-jk4vkpmlsk],
    .btn-danger[b-jk4vkpmlsk] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .update-header h1[b-jk4vkpmlsk] {
        font-size: 1.5rem;
    }

    .update-header p[b-jk4vkpmlsk] {
        font-size: 1rem;
    }

    .confirmation-header .success-icon[b-jk4vkpmlsk] {
        width: 60px;
        height: 60px;
    }

    .confirmation-title[b-jk4vkpmlsk] {
        font-size: 1.75rem;
    }

    .booking-reference h3[b-jk4vkpmlsk] {
        font-size: 1.25rem;
    }

    .hotel-info h4[b-jk4vkpmlsk] {
        font-size: 1.25rem;
    }
}
/* /Components/PointsOfInterest.razor.rz.scp.css */
/* Points of Interest — no card chrome of its own; it's part of the map card. */
.poi-section[b-fugwx51xub] {
    padding: 0.25rem 0.85rem 0.5rem 0.85rem;
}

.poi-list[b-fugwx51xub] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* One row: icon, name (fills), distance (right). */
.poi-item[b-fugwx51xub] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-border);
}

.poi-item:last-child[b-fugwx51xub] {
    border-bottom: none;
}

.poi-icon[b-fugwx51xub] {
    font-size: 1rem;
    flex-shrink: 0;
}

.poi-name[b-fugwx51xub] {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-distance[b-fugwx51xub] {
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--color-text-placeholder);
}

/* POI Pagination */
.poi-pagination[b-fugwx51xub] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.poi-page-btn[b-fugwx51xub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
}

.poi-page-btn:hover:not(:disabled)[b-fugwx51xub] {
    background: var(--color-border);
    border-color: var(--color-text-placeholder);
}

.poi-page-btn:disabled[b-fugwx51xub] {
    opacity: 0.35;
    cursor: not-allowed;
}

.poi-page-info[b-fugwx51xub] {
    font-size: 0.72rem;
    color: var(--color-text-placeholder);
    font-weight: 500;
}
/* /Components/PopupModal.razor.rz.scp.css */
.popup-overlay[b-qeu3paqktw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-container[b-qeu3paqktw] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 1100px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.popup-header[b-qeu3paqktw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    flex-shrink: 0;
}

.popup-close[b-qeu3paqktw] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-placeholder);
    /* Now the only way out of the modal, so it needs a real target rather than the
       few pixels the glyph itself covers. */
    line-height: 1;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close:hover[b-qeu3paqktw] {
    color: var(--color-text-primary);
}

.popup-content[b-qeu3paqktw] {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.popup-iframe[b-qeu3paqktw] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    overflow: hidden;
}
/* /Components/PriceFilter.razor.rz.scp.css */
.price-filter-container[b-w4jap7mwsj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* inputs and slider read as one control group */
    /* No horizontal padding: .filters-sidebar already pads the panel, and the
       second inset was costing the inputs 2rem of width. */
    padding: 0 0 1rem 0;
}

.price-filter-header[b-w4jap7mwsj] {
    margin-bottom: 0.5rem;
}

.filter-label[b-w4jap7mwsj] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

/* Figma "Price Range Dollars": two bordered boxes side by side, 12px gap. */
.price-inputs[b-w4jap7mwsj] {
    display: flex;
    align-items: stretch;
    gap: var(--space-12);
}

/* Figma "Min Price" / "Max Price": bordered box, radius 12, padding 8/16, with
   the label stacked above the value. */
.price-input-group[b-w4jap7mwsj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 1 1 0;
    min-width: 0; /* lets the two boxes share the width evenly */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    padding: var(--space-8) var(--space-16);
    transition: border-color 0.2s ease;
}

.price-input-group:focus-within[b-w4jap7mwsj] {
    border-color: var(--color-primary);
}

/* Figma "Label Frame": Label/Small in Color/Text Placeholder. */
.price-input-group label[b-w4jap7mwsj] {
    font: var(--font-label-sm);
    color: var(--color-text-placeholder);
    white-space: nowrap;
}

/* Figma "Input Field": currency + value on one row. Border now lives on the box. */
.price-input-wrapper[b-w4jap7mwsj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
}

.price-currency-symbol[b-w4jap7mwsj] {
    color: var(--color-text-primary);
    font: var(--font-body-md);
}

.price-input[b-w4jap7mwsj] {
    padding: 0;
    border: none;
    font: var(--font-body-md);
    color: var(--color-text-primary);
    width: 100%;
    min-width: 0;
    outline: none;
    background: transparent;
}

/* Hide the number spinners: they overlay the right edge of the field and were
   clipping 4-digit values. */
.price-input[b-w4jap7mwsj]::-webkit-outer-spin-button,
.price-input[b-w4jap7mwsj]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.price-input[type="number"][b-w4jap7mwsj] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.price-slider-container[b-w4jap7mwsj] {
    position: relative;
    /* Just tall enough for the 20px thumb — the old 50px left a visual gap that
       detached the slider from the inputs above it. */
    height: 28px;
    display: flex;
    align-items: center;
}

/* Single shared track line drawn behind both sliders.
   Figma "Track / Background": Color/Background, 8px, pill radius. */
.price-slider-container[b-w4jap7mwsj]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--space-8);
    background: var(--color-background);
    border-radius: var(--radius-pill);
}

/* Figma "Track / Selected": the range between the two thumbs, Color/Primary.
   Sits above the light background track (::before) but below the thumbs — the
   range inputs come later in the DOM, so their thumbs paint on top. */
.price-slider-selected[b-w4jap7mwsj] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--space-8);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    pointer-events: none;
    z-index: 1;
}

.price-slider[b-w4jap7mwsj] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* Figma "Handle": 16px round, Color/Primary. */
.price-slider[b-w4jap7mwsj]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    /* Center the thumb on the 8px track line: (8 - 16) / 2 */
    margin-top: -4px;
}

.price-slider[b-w4jap7mwsj]::-moz-range-thumb {
    pointer-events: auto;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Min slider on top so its thumb is fully visible and grabbable, like max */
.price-slider-lower[b-w4jap7mwsj] {
    z-index: 2;
}

.price-slider-upper[b-w4jap7mwsj] {
    z-index: 1;
}

/* Track styling */
.price-slider[b-w4jap7mwsj]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--space-8);
    background: transparent;
    border-radius: var(--radius-pill);
}

.price-slider[b-w4jap7mwsj]::-moz-range-track {
    width: 100%;
    height: var(--space-8);
    background: transparent;
    border-radius: var(--radius-pill);
}

.price-display[b-w4jap7mwsj] {
    text-align: center;
    font-weight: 600;
    color: var(--color-primary-navy);
    padding: 0.5rem;
    background: var(--color-background);
    border-radius: 4px;
}

.price-filter-actions[b-w4jap7mwsj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-reset[b-w4jap7mwsj],
.btn-set[b-w4jap7mwsj] {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset[b-w4jap7mwsj] {
    background-color: var(--color-text-placeholder);
    color: white;
}

.btn-reset:hover[b-w4jap7mwsj] {
    background-color: #5a6268;
}

.btn-set[b-w4jap7mwsj] {
    background-color: var(--color-primary-navy);
    color: white;
}

.btn-set:hover[b-w4jap7mwsj] {
    background-color: var(--color-primary-navy);
}

.btn-reset:active[b-w4jap7mwsj],
.btn-set:active[b-w4jap7mwsj] {
    transform: scale(0.98);
}
/* /Components/ResultCard.razor.rz.scp.css */
.result-card[b-hpqkm05qbv] {
    background: #fff;
    cursor: pointer; /* the whole card is the click target */
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    width: 100%; /* fills its grid cell; capped by max-width in the block below */
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.2s;
    position: relative;
}

.result-card:hover[b-hpqkm05qbv] {
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}

.result-image-section[b-hpqkm05qbv] {
    width: 100%;
    height: 180px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Carousel Styles */
.result-carousel[b-hpqkm05qbv] {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-container[b-hpqkm05qbv] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Vertical drags still scroll the results list; horizontal ones reach the swipe
       handler instead of being claimed by the browser's own panning. */
    touch-action: pan-y;
}

.result-thumbnail[b-hpqkm05qbv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 1px solid #eee;
    transition: transform 0.3s ease;
    /* A drag across the photo is a swipe, not a selection or an image drag. */
    user-select: none;
    -webkit-user-drag: none;
}

/* Figma "Popular Hotel Card" › Gallery › Badge (Dark Icon):
   4px padding around a 20px lucide chevron, 1px Color/Border, black at 60%,
   pill radius. Size is intentionally content-driven (20 + 8 + 2 = 30px) rather
   than a fixed width/height, so it tracks the icon. */
.carousel-btn[b-hpqkm05qbv] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Translucency lives in the background alpha, not element opacity, so the
       white chevron stays fully opaque (element opacity faded the arrow too,
       making it invisible on light photos on some devices). */
    background: var(--color-overlay-badge);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: var(--space-4);
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover[b-hpqkm05qbv] {
    background: rgba(0, 0, 0, 0.8);
}

/* Gallery frame padding is Spacing/16, so the overlays inset by the same. */
.carousel-prev[b-hpqkm05qbv] {
    left: var(--space-16);
}

.carousel-next[b-hpqkm05qbv] {
    right: var(--space-16);
}

/* Figma › Counter Badge: Heading/xS (600 14/16) in Color/Text Inverse on
   Color/Secondary Background at 60%, pill radius. Padding is the project's
   own — Figma hugs the text, which reads as a smudge at this contrast. */
.carousel-counter[b-hpqkm05qbv] {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    background: var(--color-overlay-badge);
    /* Same border as the carousel arrows so the badge reads as part of the set. */
    border: 1px solid var(--color-border);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font: var(--font-heading-xs);
    z-index: 10;
}

.result-no-image[b-hpqkm05qbv] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: var(--color-text-placeholder);
}

.self-rating[b-hpqkm05qbv] {
    color: var(--color-text-primary); /* Figma: Color/Text Primary, not black */
}

.no-image-text[b-hpqkm05qbv] {
    font-size: 13px;
    font-weight: 500;
}

.result-info-section[b-hpqkm05qbv] {
    padding: 1.3rem 1.5rem 1.2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.result-header-row[b-hpqkm05qbv] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.hotel-name[b-hpqkm05qbv] {
    font-size: 1.15rem;
    font-weight: 700;
}

.star-rating-row[b-hpqkm05qbv] {
    display: flex;
    align-items: center;
    /* No margin-top: .details-column's gap already spaces the rows. */
}

.star-rating[b-hpqkm05qbv] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 1.1rem;
}

/* Stays on one line: the city truncates before the distance or map link wrap.
   Figma uses Color/Text Primary here — the placeholder grey it used to inherit
   is the Input token and renders far too light. */
.result-location-row[b-hpqkm05qbv] {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.location[b-hpqkm05qbv] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-link-group[b-hpqkm05qbv],
.dot[b-hpqkm05qbv] {
    flex-shrink: 0;
}

/* Pin + link as one unit: tight gap, and the pin's own font-size kept close to
   the link's so the emoji does not tower over the text. */
.map-link-group[b-hpqkm05qbv] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.map-pin[b-hpqkm05qbv] {
    font-size: 0.9rem;
    line-height: 1;
}

.dot[b-hpqkm05qbv] {
    font-size: 1.2rem;
    color: #bbb;
}

/* Figma colours this Color/Text Primary with no underline. The underline is
   kept deliberately: without it, and in the same colour as the text beside it,
   nothing marks this as clickable. */
.map-link[b-hpqkm05qbv] {
    color: var(--color-text-primary);
    text-decoration: underline;
    font-size: 0.98rem;
}

.distance[b-hpqkm05qbv] {
    color: var(--color-text-primary);
    font-size: 0.93rem;
    font-weight: 500;
    white-space: nowrap;
}

.suite-type-row[b-hpqkm05qbv] {
    font-size: 1.05rem;
    color: var(--color-text-primary);
    display: flex;
    gap: 0.7rem;
}

.occupancy-row[b-hpqkm05qbv] {
    font-size: 0.98rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.occupancy-icon[b-hpqkm05qbv] {
    font-size: 1.1rem;
}

/* Bottom band: address (left) and price (right) as two columns, so the price
   costs no extra height of its own. */
.details-price-row[b-hpqkm05qbv] {
    display: flex;
    align-items: flex-start; /* address hugs the top; slack falls to the bottom */
    gap: 0.75rem;
    flex: 1; /* absorbs the extra height when a taller card stretches the row */
    /* The info section switches to align-items: flex-start under 1024px, which
       would shrink this row to its content width and undo the right alignment. */
    align-self: stretch;
}

.address-row[b-hpqkm05qbv] {
    min-width: 0; /* lets a long street name wrap instead of squeezing the price */
    /* Figma: Color/Text Primary. Previously unset, so it fell through to the
       browser default black. */
    color: var(--color-text-primary);
}

.price-row[b-hpqkm05qbv] {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    flex-direction: column; /* "nightly" drops to its own line */
    align-items: flex-end; /* right-justified */
    align-self: flex-end; /* price sits at the bottom of the card */
    flex-shrink: 0; /* never wraps to make room for the address */
    margin-left: auto; /* stays right-aligned even with no address */
    gap: 0.1rem;
    text-align: right;
}

.price[b-hpqkm05qbv] {
    color: var(--color-text-primary);
    font-size: 1.6rem;
    line-height: 1.1;
}

/* Stands in for the price when the feed gives us no usable number. Muted and
   normal-weight so it reads as a notice rather than a headline figure, but it
   keeps .price-row in the flow so the card's height and the two-column bottom
   band are unchanged. */
.price-unavailable[b-hpqkm05qbv] {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-placeholder);
}

/* Currency symbol sits inline with the number — same size and baseline. */
.price-symbol[b-hpqkm05qbv] {
    font-size: 1em;
    vertical-align: baseline;
    font-weight: 700;
}

.per-night[b-hpqkm05qbv] {
    font-size: 1rem;
    color: var(--color-text-primary);
    font-weight: 400;
}

.total[b-hpqkm05qbv] {
    font-size: 1.05rem;
    color: var(--color-text-placeholder);
    font-weight: 500;
}

.policy-row[b-hpqkm05qbv] {
    font-size: 0.98rem;
    color: #008000;
    margin-top: 0.2rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.prepay-policy[b-hpqkm05qbv] {
    font-weight: 500;
}

.discount-badge[b-hpqkm05qbv] {
    background: #e6f7e6;
    color: #008000;
    border-radius: 6px;
    padding: 0.15rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.review-row[b-hpqkm05qbv] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.review-badge[b-hpqkm05qbv] {
    background: #f5f5f5;
    color: var(--color-text-primary);
    border-radius: 8px;
    padding: 0.3rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-block;
}

.review-badge.no-review[b-hpqkm05qbv] {
    color: var(--color-text-placeholder);
    background: var(--color-background);
}

.see-availability[b-hpqkm05qbv] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.7rem;
    width: 100%;
    transition: background 0.2s;
}

.see-availability:hover[b-hpqkm05qbv] {
    background: var(--color-primary-navy);
}

/* Responsive styles */
@media (max-width: 1024px) {
    .result-info-section[b-hpqkm05qbv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .result-card[b-hpqkm05qbv] {
        border-radius: 8px;
    }
    .result-header-row[b-hpqkm05qbv] {
        gap: 0.75rem;
    }
    .result-thumbnail[b-hpqkm05qbv] {
        width: 100%;
        height: 100%;
    }
    .result-price[b-hpqkm05qbv] {
        font-size: 1rem;
    }
    .result-policy[b-hpqkm05qbv] {
        font-size: 0.85rem;
    }
    .see-availability[b-hpqkm05qbv] {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Carousel responsive adjustments */
    /* Badge sizing is content-driven from the Figma spec at every breakpoint —
       no width/height/font-size overrides here, they would clip the 20px icon. */
}

@media (max-width: 320px) {
    .result-thumbnail[b-hpqkm05qbv] {
        width: 100%;
        height: 100%;
    }
    .result-price[b-hpqkm05qbv] {
        font-size: 0.9rem;
    }
    .result-policy[b-hpqkm05qbv] {
        font-size: 0.8rem;
    }
    .see-availability[b-hpqkm05qbv] {
        padding: 0.3rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Carousel extra small screen adjustments */
}

/* Accessibility and animation improvements */
@media (prefers-reduced-motion: reduce) {
    .result-thumbnail[b-hpqkm05qbv],
    .carousel-btn[b-hpqkm05qbv],
    .see-availability[b-hpqkm05qbv] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    /* Fully opaque black so the badges stay legible at high contrast. */
    .carousel-btn[b-hpqkm05qbv],
    .carousel-counter[b-hpqkm05qbv] {
        background: black;
        border: 2px solid white;
    }
}
/* Site polish & mobile overrides - folded in from deployed hotfix 2026-06-10 */
.result-card[b-hpqkm05qbv] {
    width: 100%;
    /* Never narrower than 280px — the min() keeps a phone narrower than that from
       overflowing into a horizontal scroll. */
    min-width: min(280px, 100%);
    max-width: 334px; /* Figma 352:7624 hotel card width */
    border: 1px solid #eef1f6;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.result-card:hover[b-hpqkm05qbv] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.result-image-section[b-hpqkm05qbv] {
    height: 200px;
}

.review-badge[b-hpqkm05qbv] {
    background: #eef4ff;
    color: var(--color-primary-navy);
}

.see-availability[b-hpqkm05qbv] {
    background: linear-gradient(135deg, var(--color-primary-navy), var(--color-primary-navy));
    border-radius: 10px;
    min-height: 46px;
}

.see-availability:hover[b-hpqkm05qbv] {
    background: linear-gradient(135deg, var(--color-primary-navy), #172f73);
}

/* Mobile: one card per row, so drop the desktop cap and fill the width. */
@media (max-width: 768px) {
    .result-card[b-hpqkm05qbv] {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .result-image-section[b-hpqkm05qbv] {
        height: 180px;
    }
    .see-availability[b-hpqkm05qbv] {
        padding: 0.6rem 1rem;
        font-size: 1rem;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .result-card[b-hpqkm05qbv] {
        transition: none;
    }
    .result-card:hover[b-hpqkm05qbv] {
        transform: none;
    }
}
/* /Components/ResultsGrid.razor.rz.scp.css */
/* The column count is derived from the 280px card minimum rather than hardcoded
   per breakpoint. A fixed "3 columns on desktop" is wrong between roughly 1025px
   and 1225px: three 280px cards plus the 240px filter panel need ~1225px, so a
   fixed count silently squeezes the cards below their minimum instead of
   dropping to two.
   No max-width: the grid fills the results column. A narrower cap here only
   produced dead margins on both sides, since .results-layout already bounds the
   page at 1400px.
   No top margin: the first card's top edge lines up with the filter panel's. */
.results-grid[b-4nkcwqub3x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-32); /* Figma hotel-grid gap */
    justify-items: center;
    align-items: stretch;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

/* Mobile: one full-width card per row. Matches the breakpoint where
   Results.razor.css stacks the filter panel above the results. 1fr rather than
   the 280px minimum above, so a phone narrower than 280px still fits.
   No side padding: the cards must line up with the filter panel and the search
   bar, whose only inset is the page article's padding. */
@media (max-width: 768px) {
    .results-grid[b-4nkcwqub3x] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .results-grid[b-4nkcwqub3x] {
        margin-bottom: 1rem;
        gap: 1rem;
    }
}
/* /Components/ResultsHeader.razor.rz.scp.css */
.results-title[b-ttxygqjlkc] {
    /* Hidden by request: keeps the markup/localization intact but takes the
       heading — and its surrounding margins — out of the layout entirely.
       Remove this line to bring the heading back. */
    display: none;

    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .results-title[b-ttxygqjlkc] {
        font-size: 1.8rem;
        margin-top: 1.25rem;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .results-title[b-ttxygqjlkc] {
        font-size: 1.5rem;
        margin-top: 1rem;
        padding: 0 0.5rem;
    }
}

@media (max-width: 320px) {
    .results-title[b-ttxygqjlkc] {
        font-size: 1.3rem;
        margin-top: 0.75rem;
    }
} 
/* /Components/RoomGallery.razor.rz.scp.css */
.rd-gallery[b-xz69i3kfas] {
    display: flex;
    gap: 1.2rem;
    /* No top margin: it pushed the photos below the map column, breaking the
       top alignment. The details page spaces rows with its own flex gap now. */
    margin: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.rd-gallery[b-xz69i3kfas]::-webkit-scrollbar {
    height: 6px;
}

.rd-gallery[b-xz69i3kfas]::-webkit-scrollbar-track {
    background: transparent;
}

.rd-gallery[b-xz69i3kfas]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.rd-gallery-img img[b-xz69i3kfas] {
    width: 320px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 1rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 280px;
        height: 180px;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.8rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 240px;
        height: 160px;
    }
}

@media (max-width: 575px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.6rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 200px;
        height: 140px;
    }
}

@media (max-width: 375px) {
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 180px;
        height: 120px;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.8rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 220px;
        height: 150px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .rd-gallery-img img[b-xz69i3kfas] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
} 

.rd-gallery-container[b-xz69i3kfas] {
    /* No top margin: it pushed the photos out of line with the map column. Row
       spacing is handled by the details page's flex gap. */
    margin: 0;
}

.rd-gallery-grid[b-xz69i3kfas] {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1.2rem;
    height: 400px;
    max-width: 100%;
    box-sizing: border-box;
}

.rd-gallery-main[b-xz69i3kfas] {
    display: flex;
    min-width: 0; /* Prevents flex item from overflowing */
    overflow: hidden;
}

.rd-gallery-main img[b-xz69i3kfas] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.rd-gallery-main img:hover[b-xz69i3kfas] {
    transform: scale(1.02);
}

.rd-gallery-small[b-xz69i3kfas] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.8rem;
    min-width: 0; /* Prevents grid from overflowing */
    overflow: hidden;
}

.rd-gallery-small-item[b-xz69i3kfas] {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-width: 0; /* Ensures item doesn't overflow */
    min-height: 0; /* Ensures item doesn't overflow */
}

.rd-gallery-small-item img[b-xz69i3kfas] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.rd-gallery-small-item:hover img[b-xz69i3kfas] {
    transform: scale(1.05);
}

.rd-gallery-more[b-xz69i3kfas] {
    position: relative;
    cursor: pointer;
}

.rd-gallery-overlay[b-xz69i3kfas] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.rd-gallery-count[b-xz69i3kfas] {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Modal Styles */
.rd-modal-backdrop[b-xz69i3kfas] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.rd-modal-content[b-xz69i3kfas] {
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    width: 1200px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.rd-modal-header[b-xz69i3kfas] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rd-modal-header h3[b-xz69i3kfas] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.rd-modal-close[b-xz69i3kfas] {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.rd-modal-close:hover[b-xz69i3kfas] {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.rd-modal-body[b-xz69i3kfas] {
    padding: 2rem;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

/* Positioning context for the overlaid arrows. `pan-y` lets the page still scroll
   vertically while horizontal drags reach the swipe handler. */
.rd-modal-navigation[b-xz69i3kfas] {
    position: relative;
    margin-bottom: 2rem;
    touch-action: pan-y;
}

/* Arrows sit *on* the photo, matching the result-card carousel. They used to flank it as
   flex siblings, which forced a column stack on narrow screens — one arrow above the
   photo, one below. Absolute positioning removes that failure mode at every width. */
.rd-nav-btn[b-xz69i3kfas] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Translucency lives in the background alpha, not element opacity, so the white
       chevron stays fully opaque on light photos — same reasoning as .carousel-btn. */
    background: var(--color-overlay-badge);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-border);
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-nav-prev[b-xz69i3kfas] {
    left: var(--space-16);
}

.rd-nav-next[b-xz69i3kfas] {
    right: var(--space-16);
}

.rd-nav-btn:hover:not(:disabled)[b-xz69i3kfas] {
    background: rgba(0, 0, 0, 0.8);
}

.rd-nav-btn:disabled[b-xz69i3kfas] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* A drag across the photo is a swipe, not a text/image selection. */
.rd-modal-image-container img[b-xz69i3kfas] {
    user-select: none;
    -webkit-user-drag: none;
}

.rd-modal-image-container[b-xz69i3kfas] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    min-width: 0; /* Prevents container from overflowing */
    overflow: hidden;
}

.rd-modal-image-container img[b-xz69i3kfas] {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.rd-modal-thumbnails[b-xz69i3kfas] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.rd-modal-thumbnails[b-xz69i3kfas]::-webkit-scrollbar {
    height: 6px;
}

.rd-modal-thumbnails[b-xz69i3kfas]::-webkit-scrollbar-track {
    background: transparent;
}

.rd-modal-thumbnails[b-xz69i3kfas]::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.rd-thumbnail[b-xz69i3kfas] {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.rd-thumbnail.active[b-xz69i3kfas] {
    border-color: var(--color-primary-navy);
}

.rd-thumbnail img[b-xz69i3kfas] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.rd-thumbnail:hover[b-xz69i3kfas] {
    border-color: #93c5fd;
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 1rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 280px;
        height: 180px;
    }
    .rd-gallery-grid[b-xz69i3kfas] {
        gap: 1rem;
        height: 350px;
    }
    .rd-gallery-small[b-xz69i3kfas] {
        gap: 0.6rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.8rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 240px;
        height: 160px;
    }
    .rd-gallery-grid[b-xz69i3kfas] {
        grid-template-columns: 1fr;
        grid-template-rows: 200px auto;
        gap: 1rem;
        height: auto;
    }
    
    .rd-gallery-small[b-xz69i3kfas] {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 80px);
        gap: 0.5rem;
    }
    
    .rd-modal-backdrop[b-xz69i3kfas] {
        padding: 1rem;
    }
    
    .rd-modal-content[b-xz69i3kfas] {
        width: 95vw;
        max-width: 95vw;
    }
    
    .rd-modal-body[b-xz69i3kfas] {
        padding: 1rem;
    }
    
    .rd-nav-btn[b-xz69i3kfas] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }
    
    .rd-modal-image-container[b-xz69i3kfas] {
        min-height: 250px;
    }
    
    .rd-modal-image-container img[b-xz69i3kfas] {
        max-height: 300px;
    }
}

@media (max-width: 575px) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.6rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 200px;
        height: 140px;
    }
    .rd-gallery-grid[b-xz69i3kfas] {
        grid-template-columns: 1fr;
        grid-template-rows: 180px auto;
        gap: 0.8rem;
        /* Grow to fit the stacked rows — the base 400px height clipped the last
           row of small photos at phone widths. */
        height: auto;
    }

    .rd-gallery-small[b-xz69i3kfas] {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 70px);
        gap: 0.4rem;
    }
    
    .rd-gallery-count[b-xz69i3kfas] {
        font-size: 1rem;
    }
    
    .rd-modal-header[b-xz69i3kfas] {
        padding: 1rem 1.5rem;
    }
    
    .rd-modal-header h3[b-xz69i3kfas] {
        font-size: 1.2rem;
    }
    
    /* No column stack and no shrunken arrows here any more: the arrows overlay the photo,
       so they neither need a row of their own nor a smaller target on the smallest
       screens — where a bigger tap target matters most. Swipe works alongside them. */
    .rd-nav-prev[b-xz69i3kfas] {
        left: var(--space-8);
    }

    .rd-nav-next[b-xz69i3kfas] {
        right: var(--space-8);
    }

    .rd-modal-image-container[b-xz69i3kfas] {
        min-height: 200px;
    }
    
    .rd-modal-image-container img[b-xz69i3kfas] {
        max-height: 250px;
    }
    
    .rd-thumbnail[b-xz69i3kfas] {
        width: 60px;
        height: 45px;
    }
}

@media (max-width: 375px) {
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 180px;
        height: 120px;
    }
    .rd-gallery-grid[b-xz69i3kfas] {
        height: auto;
    }
    
    .rd-gallery-small[b-xz69i3kfas] {
        grid-template-rows: repeat(3, 60px);
    }
    
    .rd-modal-image-container img[b-xz69i3kfas] {
        max-height: 200px;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .rd-gallery[b-xz69i3kfas] {
        gap: 0.8rem;
    }
    .rd-gallery-img img[b-xz69i3kfas] {
        width: 220px;
        height: 150px;
    }
    .rd-gallery-grid[b-xz69i3kfas] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: none;
        height: 250px;
    }
    
    .rd-gallery-small[b-xz69i3kfas] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .rd-gallery-img img[b-xz69i3kfas],
    .rd-gallery-main img[b-xz69i3kfas],
    .rd-gallery-small-item img[b-xz69i3kfas] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
/* /Components/RoomHeader.razor.rz.scp.css */
.rd-header[b-s7v1v03any] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

/* Figma HotelSummary: hotel name Display/Medium (Bold 36/44), Color/Primary. */
.rd-header-left h1[b-s7v1v03any] {
    font: var(--font-display-md);
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}

/* Star rating row: 14px diamonds + "5-Star" in Heading/Smaller (600 16/20). */
.rd-rating-row[b-s7v1v03any] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: 0.35rem;
}

.rd-self-rating-text[b-s7v1v03any] {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-primary);
}

/* Figma location row: address Body/Regular + a 📍 Map link (result-card style). */
.rd-address-row[b-s7v1v03any] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

/* Pin + address as a single flex item. `min-width: 0` is what makes a long address wrap
   *inside* this unit instead of pushing itself onto a line of its own — which on a narrow
   screen left the pin stranded on the line above. `flex-start` keeps the pin beside the
   first line of a wrapped address rather than centred against the whole block. */
.rd-address-line[b-s7v1v03any] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    flex: 1 1 auto;
    min-width: 0;
}

.rd-address[b-s7v1v03any] {
    font: var(--font-body-md);
    color: var(--color-text-primary);
}

/* Trails the address text on the same line, wrapping with it only when it has to.
   `inline-flex` + `nowrap` is what keeps the 📍 and the word "Map" together — the one
   thing that must never break across lines. */
.rd-address-row .map-link-group[b-s7v1v03any] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: var(--space-8);
    white-space: nowrap;
}

/* Leading lucide/map-pin (Figma 20px). The 2px nudge optically centres it on the first
   line of text, which top-aligning it against a ~24px line box otherwise misses. */
.rd-address-pin[b-s7v1v03any] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-text-primary);
}

.rd-address-row .map-pin[b-s7v1v03any] {
    font-size: 0.9rem;
    line-height: 1;
}

.rd-address-row .map-link[b-s7v1v03any] {
    font: var(--font-body-md);
    color: var(--color-text-primary);
    text-decoration: underline;
    cursor: pointer;
}

.rd-room-type[b-s7v1v03any] {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

/* (Base .rd-address / .rd-map-link styling now lives near the top, matched to
   the Figma HotelSummary.) */

.rd-header-right[b-s7v1v03any] {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.rd-icon-btn[b-s7v1v03any] {
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}

.rd-icon-btn:hover[b-s7v1v03any] {
    background: var(--color-border);
}

.rd-reserve-btn[b-s7v1v03any] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 2.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.rd-reserve-btn:hover[b-s7v1v03any] {
    background: var(--color-primary-navy);
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .rd-header[b-s7v1v03any] {
        flex-direction: column;
        gap: 1rem;
    }
    .rd-header-left h1[b-s7v1v03any] {
        font-size: 1.8rem;
    }
    .rd-header-right[b-s7v1v03any] {
        align-self: flex-start;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rd-header[b-s7v1v03any] {
        flex-direction: column;
        gap: 1rem;
    }
    .rd-header-left h1[b-s7v1v03any] {
        font-size: 1.6rem;
    }
    .rd-room-type[b-s7v1v03any] {
        font-size: 1.1rem;
    }
    .rd-address[b-s7v1v03any] {
        font-size: 1rem;
    }
    .rd-header-right[b-s7v1v03any] {
        align-self: flex-start;
    }
    .rd-reserve-btn[b-s7v1v03any] {
        padding: 0.7rem 1.8rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 575px) {
    .rd-header[b-s7v1v03any] {
        flex-direction: column;
        gap: 1rem;
    }
    .rd-header-left h1[b-s7v1v03any] {
        font-size: 1.4rem;
    }
    .rd-room-type[b-s7v1v03any] {
        font-size: 1rem;
    }
    .rd-address[b-s7v1v03any] {
        font-size: 0.95rem;
    }
    .rd-header-right[b-s7v1v03any] {
        align-self: flex-start;
    }
    .rd-icon-btn[b-s7v1v03any] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .rd-reserve-btn[b-s7v1v03any] {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 375px) {
    .rd-header-left h1[b-s7v1v03any] {
        font-size: 1.3rem;
    }
    .rd-reserve-btn[b-s7v1v03any] {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .rd-header[b-s7v1v03any] {
        flex-direction: row;
        gap: 1rem;
    }
    .rd-header-left h1[b-s7v1v03any] {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-icon-btn[b-s7v1v03any],
    .rd-reserve-btn[b-s7v1v03any] {
        transition: none;
    }
}

.rd-icon-btn:focus[b-s7v1v03any],
.rd-reserve-btn:focus[b-s7v1v03any] {
    outline: 2px solid var(--color-primary-navy);
    outline-offset: 2px;
} 

.rd-star-rating[b-s7v1v03any] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.35rem;
}

.rd-star[b-s7v1v03any] {
    display: inline-flex;
    line-height: 1;
}

.rd-self-rating[b-s7v1v03any] {
    margin-bottom: 0.35rem;
}

.rd-self-rating-label[b-s7v1v03any] {
    display: inline-block;
    background: var(--color-background);
    color: var(--color-text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
}
/* /Components/RoomHighlights.razor.rz.scp.css */
.rd-highlights-row[b-o0u0sd1uyx] {
    display: flex;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.rd-highlights[b-o0u0sd1uyx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rd-review-badge[b-o0u0sd1uyx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.rd-star[b-o0u0sd1uyx] {
    color: #FFD700;
    font-size: 1.2rem;
}

.rd-review-count[b-o0u0sd1uyx] {
    color: var(--color-text-placeholder);
    font-weight: 400;
    font-size: 1rem;
}

.rd-feature-icons[b-o0u0sd1uyx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.rd-feature-icon[b-o0u0sd1uyx] {
    background: var(--color-background);
    color: var(--color-text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.rd-surroundings[b-o0u0sd1uyx] {
    flex: 1;
    background: var(--color-background);
    padding: 1.5rem;
    border-radius: 12px;
}

.rd-surroundings h3[b-o0u0sd1uyx] {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rd-map-placeholder[b-o0u0sd1uyx] {
    background: var(--color-border);
    height: 200px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-placeholder);
    font-style: italic;
    margin-bottom: 1.5rem;
    border: 2px dashed var(--color-border);
}

.rd-sur-list[b-o0u0sd1uyx] {
    margin-bottom: 1.5rem;
}

.rd-sur-list ul[b-o0u0sd1uyx] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .rd-highlights-row[b-o0u0sd1uyx] {
        gap: 2rem;
    }
    .rd-surroundings[b-o0u0sd1uyx] {
        padding: 1.25rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rd-highlights-row[b-o0u0sd1uyx] {
        flex-direction: column;
        gap: 1.5rem;
    }
    .rd-review-badge[b-o0u0sd1uyx] {
        font-size: 1rem;
    }
    .rd-star[b-o0u0sd1uyx] {
        font-size: 1.1rem;
    }
    .rd-review-count[b-o0u0sd1uyx] {
        font-size: 0.95rem;
    }
    .rd-feature-icons[b-o0u0sd1uyx] {
        gap: 0.6rem;
    }
    .rd-feature-icon[b-o0u0sd1uyx] {
        padding: 0.3rem 0.7rem;
        font-size: 0.85rem;
    }
    .rd-surroundings[b-o0u0sd1uyx] {
        padding: 1rem;
    }
    .rd-surroundings h3[b-o0u0sd1uyx] {
        font-size: 1.2rem;
    }
}

@media (max-width: 575px) {
    .rd-highlights-row[b-o0u0sd1uyx] {
        flex-direction: column;
        gap: 1rem;
    }
    .rd-review-badge[b-o0u0sd1uyx] {
        font-size: 0.95rem;
    }
    .rd-star[b-o0u0sd1uyx] {
        font-size: 1rem;
    }
    .rd-review-count[b-o0u0sd1uyx] {
        font-size: 0.9rem;
    }
    .rd-feature-icons[b-o0u0sd1uyx] {
        gap: 0.5rem;
    }
    .rd-feature-icon[b-o0u0sd1uyx] {
        padding: 0.25rem 0.6rem;
        font-size: 0.8rem;
    }
    .rd-surroundings[b-o0u0sd1uyx] {
        padding: 0.75rem;
    }
    .rd-surroundings h3[b-o0u0sd1uyx] {
        font-size: 1.1rem;
    }
    .rd-map-placeholder[b-o0u0sd1uyx] {
        height: 150px;
    }
}

@media (max-width: 375px) {
    .rd-feature-icon[b-o0u0sd1uyx] {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
    .rd-sur-list ul[b-o0u0sd1uyx] {
        padding-left: 1.25rem;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .rd-highlights-row[b-o0u0sd1uyx] {
        flex-direction: row;
        gap: 1.5rem;
    }
    .rd-surroundings[b-o0u0sd1uyx] {
        padding: 1rem;
    }
} 
/* /Components/RoomInfoPolicies.razor.rz.scp.css */
.rd-info-policies-row[b-pcbahrvyfh] {
    display: flex;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.rd-property-info[b-pcbahrvyfh], .rd-policies[b-pcbahrvyfh] {
    flex: 1;
    background: var(--color-background);
    padding: 2rem;
    border-radius: 12px;
}

.rd-property-info h2[b-pcbahrvyfh], .rd-policies h2[b-pcbahrvyfh] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rd-property-info h4[b-pcbahrvyfh], .rd-policies h4[b-pcbahrvyfh] {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rd-property-info h4:first-child[b-pcbahrvyfh], .rd-policies h4:first-child[b-pcbahrvyfh] {
    margin-top: 0;
}

.rd-property-info ul[b-pcbahrvyfh], .rd-policies ul[b-pcbahrvyfh] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

/* Responsive styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .rd-info-policies-row[b-pcbahrvyfh] {
        gap: 2rem;
    }
    .rd-property-info[b-pcbahrvyfh], .rd-policies[b-pcbahrvyfh] {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .rd-info-policies-row[b-pcbahrvyfh] {
        flex-direction: column;
        gap: 1.5rem;
    }
    .rd-property-info h2[b-pcbahrvyfh], .rd-policies h2[b-pcbahrvyfh] {
        font-size: 1.3rem;
    }
    .rd-property-info h4[b-pcbahrvyfh], .rd-policies h4[b-pcbahrvyfh] {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .rd-info-policies-row[b-pcbahrvyfh] {
        flex-direction: column;
        gap: 1rem;
    }
    .rd-property-info[b-pcbahrvyfh], .rd-policies[b-pcbahrvyfh] {
        padding: 1rem;
    }
    .rd-property-info h2[b-pcbahrvyfh], .rd-policies h2[b-pcbahrvyfh] {
        font-size: 1.2rem;
    }
    .rd-property-info h4[b-pcbahrvyfh], .rd-policies h4[b-pcbahrvyfh] {
        font-size: 0.95rem;
    }
    .rd-property-info ul[b-pcbahrvyfh], .rd-policies ul[b-pcbahrvyfh] {
        padding-left: 1.25rem;
    }
}

@media (max-width: 375px) {
    .rd-property-info[b-pcbahrvyfh], .rd-policies[b-pcbahrvyfh] {
        padding: 0.75rem;
    }
    .rd-property-info h2[b-pcbahrvyfh], .rd-policies h2[b-pcbahrvyfh] {
        font-size: 1.1rem;
    }
    .rd-property-info h4[b-pcbahrvyfh], .rd-policies h4[b-pcbahrvyfh] {
        font-size: 0.9rem;
    }
} 
/* /Components/RoomOptions.razor.rz.scp.css */
.rd-room-options[b-95bavmkg12] {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.rd-room-options h2[b-95bavmkg12] {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ══════════════════════════════════════════════════════════════
   CARD GRID — every breakpoint renders offers as cards.
   Desktop (≥ 992 px): 3 cards per row.
   Tablet & phone (≤ 991 px): 1 cards per row.
   ══════════════════════════════════════════════════════════════ */
/* Figma 340:5434 room-card grid, 20px gap. Column count is derived from a 360px
   card minimum (not a fixed repeat), so it lands on 3-up on desktop, 2-up on
   tablet and 1-up on mobile as the width narrows — and never blows out, since
   minmax lets the tracks shrink. The 1440 page container caps it at 3.
   min(360px, 100%) keeps a phone narrower than 360px to a single full-width card. */
.rd-room-grid[b-95bavmkg12] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: var(--space-20);
    margin-top: 1rem;
}

/* Figma room card chrome: 1px border, radius 12, padding 16, Shadow/Small. */
.rd-room-card[b-95bavmkg12] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-sm);
    padding: var(--space-16);
}

/* Header spans the full width; body splits into details (left) + price/action
   (right). */
.rd-card-header[b-95bavmkg12] {
    width: 100%;
}

.rd-card-body[b-95bavmkg12] {
    display: flex;
    gap: var(--space-16);
    /* fill the (grid-stretched) card and stretch both columns, so the right
       column can pin price + Reserve to the card's bottom edge */
    flex: 1;
    align-items: stretch;
}

.rd-card-info[b-95bavmkg12] {
    flex: 1;
    min-width: 0;
}

/* Right column: price + Reserve pinned to the bottom, right-aligned. */
.rd-card-aside[b-95bavmkg12] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

/* Figma 340:5434 "Price": lines stacked tight (gap 0), right-aligned, all in
   Color/Primary. Each line pairs the amount with its unit. */
.rd-card-aside .price-info[b-95bavmkg12] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0;
    color: var(--color-text-primary);
}

.rd-price-nightly[b-95bavmkg12],
.rd-price-selection[b-95bavmkg12] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Figma "Price and Action": 16px between the price block and Reserve. */
.rd-card-aside .rd-card-section.card-actions[b-95bavmkg12] {
    margin-top: var(--space-16);
}

/* Nightly amount: Heading/Small (Semi Bold 20/28) — the headline price. */
.rd-price-nightly .rd-price-amount[b-95bavmkg12] {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

/* Total amount: Body/Regular (16/24). */
.rd-price-selection .rd-price-amount[b-95bavmkg12] {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* Unit labels ("nightly" / "total"): Caption (12/16). */
.rd-price-unit[b-95bavmkg12] {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.rd-price-taxnote[b-95bavmkg12] {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Spacing between the sections stacked inside a column. */
.rd-card-section + .rd-card-section[b-95bavmkg12] {
    margin-top: 0.75rem;
}

.rd-card-section.room-type strong[b-95bavmkg12] {
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.rd-card-section.meal[b-95bavmkg12] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Price sits at the top of the right column, Reserve below it. */
.rd-card-section.price[b-95bavmkg12] {
    margin-top: 0;
}

.rd-card-section.card-actions[b-95bavmkg12] {
    margin-top: 0.75rem;
}

/* Figma "Reserve Now": solid primary fill, small radius, light label.
   `min-height` is the tap target rather than decoration: at the design's 8px padding on a
   16px line the button stood 32px tall, under the 44px that makes a comfortable press.
   Set as a minimum with the label flex-centred, so it holds whatever the font resolves to
   and a translated label can still grow the button rather than overflow it. */
.rd-card-section.card-actions .rd-select-btn[b-95bavmkg12] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-4);
    color: var(--color-background);
    font: var(--font-heading-xs); /* Inter 600 14/16 */
    padding: var(--space-12) var(--space-16);
}

/* One card per row from here down — a phone or tablet, where the press matters most. */
@media (max-width: 991px) {
    .rd-card-section.card-actions .rd-select-btn[b-95bavmkg12] {
        min-height: 48px;
    }
}

.rd-card-section.card-actions .rd-select-btn:hover[b-95bavmkg12] {
    background: var(--color-primary-navy);
    color: #fff;
}

.more-details-btn[b-95bavmkg12] {
    margin-top: -0.95rem;
    margin-bottom: 0;
    margin-left: 4px;
    display: inline;
    line-height: 1;
}

.room-description[b-95bavmkg12] {
    font-size: 0.9em;
}

.room-description .description-line[b-95bavmkg12] {
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

/* Bullet lines sit slightly in from the margin, and a bullet that wraps lines its
   second line up after the "- " rather than under the dash. The unbulleted first
   segment (the rate/room-name line) stays flush left. */
.room-description .description-line.bullet[b-95bavmkg12] {
    padding-left: 1.5rem;
    text-indent: -0.75rem;
}

/* Shown in place of the lines while this card's description is being translated. The
   description is fetched when the panel opens, not up front, so this is the only place
   the wait is visible. */
.room-description--loading[b-95bavmkg12] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-placeholder);
}

/* Collapsed state for an unbulleted description: the whole paragraph is one segment, so
   it is clamped visually to two lines instead of being cut by segment count. */
.room-description .description-clamped[b-95bavmkg12] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cancellation-policy[b-95bavmkg12] {
    font-size: 0.9em;
}

.non-refundable[b-95bavmkg12] {
    color: var(--color-error);
    font-weight: 500;
    border-radius: 3px;
}

.cancellation-allowed[b-95bavmkg12] {
    color: #28a745;
    font-weight: 500;
}

.policy-exists[b-95bavmkg12] {
    color: #ffc107;
    font-weight: 500;
}

.price-info[b-95bavmkg12] {
    text-align: left;
    font-size: 1em;
}

.rd-select-btn[b-95bavmkg12] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.rd-select-btn:hover[b-95bavmkg12] {
    background: var(--color-primary-navy);
}

.text-muted[b-95bavmkg12] {
    color: var(--color-text-placeholder);
    font-style: italic;
    font-size: 0.85em;
}

.alert-info[b-95bavmkg12] {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 12px;
    border-radius: 4px;
    margin-top: 1rem;
}

/* Total is secondary: no underline, normal weight. Still clickable to open the
   price breakdown. (Sizes are set per-span above, to the Figma spec.) */
.rd-price-selection[b-95bavmkg12] {
    cursor: pointer;
    text-decoration: none;
    font-weight: 400;
}

/* ── Pagination ──────────────────────────────────────────────── */
/* Stay dates, relocated under the heading, with the "Edit" toggle beside them. */
.rd-stay-dates[b-95bavmkg12] {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.6rem;
    flex-wrap: wrap;
    margin: -0.75rem 0 1.25rem 0;
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Guest/room counts trailing the dates. The dates are the primary information, so the
   counts are de-emphasised by weight alone — there is no "secondary text" design token
   (--color-text-primary-alt is *darker*, and --color-text-placeholder is semantically
   for inputs), so the colour is left to inherit from .rd-stay-dates. */
.rd-stay-guests[b-95bavmkg12] {
    font-weight: 400;
}

/* Two nowrap groups so the stay line wraps as whole units, not mid-phrase. */
.rd-stay-when[b-95bavmkg12],
.rd-stay-who[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Leading lucide/calendar on the stay line (Figma 16px). */
.rd-stay-cal[b-95bavmkg12] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-primary);
}

.rd-stay-edit-btn[b-95bavmkg12] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.rd-stay-edit-btn:hover[b-95bavmkg12] {
    text-decoration: underline;
}

/* The expanded stay editor. Same margin box as the text row, so opening it where there is
   no row (the stay-less entry) doesn't shove the heading above it around. Field sizing and
   breakpoints come from the global `.fc-figma .hotel-search__*` rules in css/components.css
   — deliberately not restated here. */
.rd-stay-editor[b-95bavmkg12] {
    margin: -0.75rem 0 1.25rem 0;
}

/* With a stay, the summary row survives above the open panel. That -0.75rem was sized to
   stand in for the row, so stacked under it the panel would ride up into the text; the
   row's own bottom margin already supplies the gap. */
.rd-stay-dates + .rd-stay-editor[b-95bavmkg12] {
    margin-top: 0;
}

/* Dismiss the stay editor: an X in a circle, deliberately quieter than the Search button
   next to it — and smaller than its 48px, which is the point. The field row centres its
   items, so the size difference does not unlevel anything. */
.rd-stay-cancel-btn[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    /* Regular body colour — the placeholder grey read as a disabled control. */
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rd-stay-cancel-btn:hover[b-95bavmkg12] {
    border-color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.rd-stay-cancel-btn:focus-visible[b-95bavmkg12] {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

.rd-stay-cancel-btn svg[b-95bavmkg12] {
    width: 1rem;
    height: 1rem;
}

/* At the breakpoint where Search goes full width the dismiss drops onto a row of its own —
   centre it there rather than leaving it hanging off the left edge. */
@media (max-width: 1023px) {
    .rd-stay-cancel-btn[b-95bavmkg12] {
        margin-left: auto;
        margin-right: auto;
    }
}

/* "Load More Rates" — outlined, centred, matching the site's other buttons. */
.rd-load-more-container[b-95bavmkg12] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.rd-load-more-btn[b-95bavmkg12] {
    padding: var(--space-16) var(--space-20);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-12);
    background: var(--color-surface);
    color: var(--color-primary);
    font: var(--font-label-lg);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.rd-load-more-btn:hover[b-95bavmkg12] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ── Payment-type tooltip ────────────────────────────────────── */
.payment-type-badge[b-95bavmkg12] {
    position: relative;
    display: inline-block;
    cursor: help;
    font-weight: 500;
    padding: 2px 0;
    border-radius: 4px;
    color: var(--color-text-primary);
}

.payment-type-badge .payment-type-tooltip[b-95bavmkg12] {
    visibility: hidden;
    opacity: 0;
    width: 230px;
    background-color: var(--color-primary-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    pointer-events: none;
    line-height: 1.4;
}

.payment-type-badge .payment-type-tooltip[b-95bavmkg12]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
}

.payment-type-badge:hover .payment-type-tooltip[b-95bavmkg12] {
    visibility: visible;
    opacity: 1;
}

/* Info icon by the cancellation deadline: holds the local-time note and the
   penalty-nights detail in a hover/focus tooltip. */
.rd-info[b-95bavmkg12] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.3rem;
    /* nudge up so it sits level with the label text, not below it */
    top: -2px;
}

.rd-info-icon[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-text-placeholder);
    color: var(--color-text-placeholder);
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.rd-info-tooltip[b-95bavmkg12] {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background: var(--color-primary-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 10;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
}

.rd-info:hover .rd-info-tooltip[b-95bavmkg12],
.rd-info:focus-within .rd-info-tooltip[b-95bavmkg12] {
    visibility: visible;
    opacity: 1;
}

/* Room Details tab at the card bottom: a link-style toggle that reveals the
   full description only when opened. No hairline; the card's flex gap already
   spaces it, tightened a touch here. */
.rd-card-details[b-95bavmkg12] {
    margin-top: -0.25rem;
}

.rd-details-toggle[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary-action, #3565b9);
}

.rd-details-toggle:hover[b-95bavmkg12] {
    text-decoration: underline;
}

/* Match the Figma chevron size (lucide/chevron-down, 20px). */
.rd-details-chevron[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: transform 0.15s ease;
}

.rd-details-chevron svg[b-95bavmkg12] {
    width: 20px;
    height: 20px;
}

.rd-details-chevron.open[b-95bavmkg12] {
    transform: rotate(180deg);
}

/* Benefit rows (cancellation / pay / breakfast): a lucide icon before the text. */
.rd-benefit[b-95bavmkg12] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rd-benefit-icon[b-95bavmkg12] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Breakfast not included: plain text, and a much lighter icon so it reads as a
   muted "no meal" cue rather than a highlight. */
.meal-excluded[b-95bavmkg12] {
    font-weight: 400;
}

.meal-excluded .rd-benefit-icon[b-95bavmkg12] {
    color: var(--color-text-placeholder);
}

/* The deadline sits below the label, indented past the icon (16px) + gap (0.4rem)
   so it lines up with "Free cancellation before:". */
.deadline-time[b-95bavmkg12] {
    padding-left: calc(16px + 0.4rem);
}

.rd-card-details .room-description[b-95bavmkg12] {
    margin-top: var(--space-8);
}

.payment-guarantee[b-95bavmkg12] { color: var(--color-text-primary); }
.payment-deposit[b-95bavmkg12]   { color: var(--color-text-primary); }
.payment-prepay[b-95bavmkg12]    { color: var(--color-text-primary); }
.payment-holdtime[b-95bavmkg12]  { color: var(--color-text-primary); }

/* ── Tablet & phone (≤ 991 px) — 1 card per row ─────────────── */
@media (max-width: 991px) {
    .rd-room-grid[b-95bavmkg12] {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Collapse pagination controls into a centred stack */
    .pagination-container[b-95bavmkg12] {
        flex-direction: column;
        align-items: center;
    }

    .pagination-controls[b-95bavmkg12] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-controls .btn[b-95bavmkg12] {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* ── Small mobile (≤ 575 px) — keep 2 per row, tighten spacing ── */
@media (max-width: 575px) {
    .rd-room-options h2[b-95bavmkg12] {
        font-size: 1.2rem;
    }

    .rd-room-grid[b-95bavmkg12] {
        gap: 0.75rem;
    }

    .rd-room-card[b-95bavmkg12] {
        padding: 1rem;
    }

    .pagination-controls .btn[b-95bavmkg12] {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ── Extra-small mobile (≤ 375 px) ──────────────────────────── */
@media (max-width: 375px) {
    .rd-room-card[b-95bavmkg12] {
        padding: 0.75rem;
    }

    .pagination-controls .btn[b-95bavmkg12] {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
    }
}
/* /Components/RoomReviews.razor.rz.scp.css */
.rd-reviews-section[b-ub5bj6twsw] {
    margin-bottom: 2.5rem;
}

.rd-reviews-section h2[b-ub5bj6twsw] {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rd-review-breakdown[b-ub5bj6twsw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--color-background);
    border-radius: 8px;
}

.rd-review-breakdown div[b-ub5bj6twsw] {
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.rd-review-list[b-ub5bj6twsw] {
    margin-bottom: 2rem;
}

.rd-review-card[b-ub5bj6twsw] {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.rd-review-title[b-ub5bj6twsw] {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.rd-review-meta[b-ub5bj6twsw] {
    color: var(--color-text-placeholder);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.rd-review-scores[b-ub5bj6twsw] {
    color: var(--color-text-placeholder);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.rd-review-comment[b-ub5bj6twsw] {
    color: var(--color-text-primary);
    line-height: 1.5;
}

.rd-leave-review[b-ub5bj6twsw] {
    background: var(--color-background);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.rd-leave-review h3[b-ub5bj6twsw] {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rd-input[b-ub5bj6twsw] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.rd-textarea[b-ub5bj6twsw] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.rd-review-ratings-row[b-ub5bj6twsw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rd-submit-btn[b-ub5bj6twsw] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.rd-submit-btn:hover[b-ub5bj6twsw] {
    background: var(--color-primary-navy);
}

/* Responsive styles */
@media (max-width: 767px) and (min-width: 576px) {
    .rd-reviews-section h2[b-ub5bj6twsw] {
        font-size: 1.3rem;
    }
    .rd-review-breakdown[b-ub5bj6twsw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }
    .rd-review-breakdown div[b-ub5bj6twsw] {
        font-size: 0.9rem;
    }
    .rd-review-ratings-row[b-ub5bj6twsw] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .rd-review-ratings-row .rd-input[b-ub5bj6twsw] {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 575px) {
    .rd-reviews-section h2[b-ub5bj6twsw] {
        font-size: 1.2rem;
    }
    .rd-review-breakdown[b-ub5bj6twsw] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem;
    }
    .rd-review-breakdown div[b-ub5bj6twsw] {
        font-size: 0.85rem;
    }
    .rd-review-card[b-ub5bj6twsw] {
        padding: 1rem;
    }
    .rd-review-title[b-ub5bj6twsw] {
        font-size: 1rem;
    }
    .rd-review-meta[b-ub5bj6twsw] {
        font-size: 0.85rem;
    }
    .rd-review-scores[b-ub5bj6twsw] {
        font-size: 0.8rem;
    }
    .rd-review-comment[b-ub5bj6twsw] {
        font-size: 0.9rem;
    }
    .rd-leave-review[b-ub5bj6twsw] {
        padding: 1rem;
    }
    .rd-leave-review h3[b-ub5bj6twsw] {
        font-size: 1.1rem;
    }
    .rd-input[b-ub5bj6twsw], .rd-textarea[b-ub5bj6twsw] {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    .rd-review-ratings-row[b-ub5bj6twsw] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .rd-submit-btn[b-ub5bj6twsw] {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 375px) {
    .rd-review-breakdown div[b-ub5bj6twsw] {
        font-size: 0.8rem;
    }
    .rd-review-card[b-ub5bj6twsw] {
        padding: 0.75rem;
    }
    .rd-leave-review[b-ub5bj6twsw] {
        padding: 0.75rem;
    }
    .rd-input[b-ub5bj6twsw], .rd-textarea[b-ub5bj6twsw] {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    .rd-submit-btn[b-ub5bj6twsw] {
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
} 
/* /Components/SearchBar.razor.rz.scp.css */
/* =============================================================================
   SearchBar — thin wrapper around the Figma "Hotel Search" component.
   The card, fields, button, and responsive (desktop / tablet 3-line / mobile
   stack) all come from the imported css/components.css (.hotel-search, .field,
   .btn--action). This file only holds the interaction wrapper + validation copy.
   ============================================================================= */

.hotel-search-wrapper[b-rctn0sgobk] {
    width: 100%;
}

/* The card is capped at --search-max-width; center it in whatever container it
   sits in (results / room details are full-width pages). The hero overrides
   this on desktop to keep the card left-aligned with its headline (Figma). */
.hotel-search[b-rctn0sgobk] {
    margin-left: auto;
    margin-right: auto;
}

/* DestinationInput renders an <EditForm> (a <form>). Scoped CSS on the child
   component can't target that form's own root element, so flatten it here with
   ::deep — this makes the inner .field the real flex item of
   .hotel-search__fields, so the Figma field sizing (destination = full row on
   tablet, etc.) actually applies. */
[b-rctn0sgobk] .ds-field-form {
    display: contents;
}

.validation-message[b-rctn0sgobk] {
    width: 100%;
    max-width: 1180px;
    margin-bottom: var(--space-8);
    padding: var(--space-12) var(--space-16);
    background: #fdecea;
    border: 1px solid #f5c2c7;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font: var(--font-body-sm);
}
/* /Components/Security/SecureInputText.razor.rz.scp.css */
/* Secure Input Text Component Styles */
.secure-input-wrapper[b-2sx4vl57mp] {
    position: relative;
    margin-bottom: 1rem;
}

.secure-input-wrapper input[b-2sx4vl57mp] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

.secure-input-wrapper input:focus[b-2sx4vl57mp] {
    outline: none;
    border-color: var(--color-primary-navy);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.secure-input-wrapper input.invalid[b-2sx4vl57mp] {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.secure-input-wrapper input.valid[b-2sx4vl57mp] {
    border-color: #10b981;
    background-color: #f0fdf4;
}

/* Validation Error Messages */
.validation-errors[b-2sx4vl57mp] {
    margin-top: 0.5rem;
}

.validation-error[b-2sx4vl57mp] {
    color: #ef4444;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
}

.validation-error[b-2sx4vl57mp]::before {
    content: "?";
    margin-right: 0.5rem;
    color: #f59e0b;
}

/* Security Indicator */
.security-indicator[b-2sx4vl57mp] {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.security-indicator .security-icon[b-2sx4vl57mp] {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.security-none[b-2sx4vl57mp] {
    display: none;
}

.security-low[b-2sx4vl57mp] {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.security-low .security-icon[b-2sx4vl57mp]::before {
    content: "?";
    color: #f59e0b;
}

.security-medium[b-2sx4vl57mp] {
    background-color: #fed7aa;
    color: #9a3412;
    border: 1px solid #f97316;
}

.security-medium .security-icon[b-2sx4vl57mp]::before {
    content: "?";
    color: #f97316;
}

.security-high[b-2sx4vl57mp] {
    background-color: #fecaca;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.security-high .security-icon[b-2sx4vl57mp]::before {
    content: "?";
    color: #ef4444;
}

.security-critical[b-2sx4vl57mp] {
    background-color: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #dc2626;
    animation: pulse-danger-b-2sx4vl57mp 2s infinite;
}

.security-critical .security-icon[b-2sx4vl57mp]::before {
    content: "??";
    color: #dc2626;
}

@keyframes pulse-danger-b-2sx4vl57mp {
    0%, 100% {
        border-color: #dc2626;
        background-color: #fee2e2;
    }
    50% {
        border-color: #ef4444;
        background-color: #fecaca;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .secure-input-wrapper input[b-2sx4vl57mp] {
        background-color: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    .secure-input-wrapper input:focus[b-2sx4vl57mp] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }

    .secure-input-wrapper input.invalid[b-2sx4vl57mp] {
        border-color: #f87171;
        background-color: #7f1d1d;
    }

    .secure-input-wrapper input.valid[b-2sx4vl57mp] {
        border-color: #34d399;
        background-color: #064e3b;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .secure-input-wrapper input[b-2sx4vl57mp] {
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
    }

    .security-indicator[b-2sx4vl57mp] {
        font-size: 0.8rem;
        padding: 0.375rem;
    }

    .validation-error[b-2sx4vl57mp] {
        font-size: 0.8rem;
    }
}
/* /Components/Security/SecureTextArea.razor.rz.scp.css */
/* Secure TextArea Component Styles */
.secure-textarea-wrapper[b-p4ksnaw0be] {
    position: relative;
    margin-bottom: 1rem;
}

.secure-textarea-wrapper textarea[b-p4ksnaw0be] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e1e5e9;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

.secure-textarea-wrapper textarea:focus[b-p4ksnaw0be] {
    outline: none;
    border-color: var(--color-primary-navy);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.secure-textarea-wrapper textarea.invalid[b-p4ksnaw0be] {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.secure-textarea-wrapper textarea.valid[b-p4ksnaw0be] {
    border-color: #10b981;
    background-color: #f0fdf4;
}

/* Character Count */
.character-count[b-p4ksnaw0be] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    font-size: 0.75rem;
    pointer-events: none;
}

.character-count-normal[b-p4ksnaw0be] {
    color: #6b7280;
}

.character-count-warning[b-p4ksnaw0be] {
    color: #f59e0b;
    font-weight: 500;
}

.character-count-critical[b-p4ksnaw0be] {
    color: #ef4444;
    font-weight: 600;
    animation: pulse-warning-b-p4ksnaw0be 1s infinite;
}

@keyframes pulse-warning-b-p4ksnaw0be {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Validation Error Messages */
.validation-errors[b-p4ksnaw0be] {
    margin-top: 0.5rem;
}

.validation-error[b-p4ksnaw0be] {
    color: #ef4444;
    font-size: 0.875rem;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
}

.validation-error[b-p4ksnaw0be]::before {
    content: "?";
    margin-right: 0.5rem;
    color: #f59e0b;
}

/* Security Indicator */
.security-indicator[b-p4ksnaw0be] {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.security-indicator .security-icon[b-p4ksnaw0be] {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.security-none[b-p4ksnaw0be] {
    display: none;
}

.security-low[b-p4ksnaw0be] {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.security-low .security-icon[b-p4ksnaw0be]::before {
    content: "?";
    color: #f59e0b;
}

.security-medium[b-p4ksnaw0be] {
    background-color: #fed7aa;
    color: #9a3412;
    border: 1px solid #f97316;
}

.security-medium .security-icon[b-p4ksnaw0be]::before {
    content: "?";
    color: #f97316;
}

.security-high[b-p4ksnaw0be] {
    background-color: #fecaca;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.security-high .security-icon[b-p4ksnaw0be]::before {
    content: "?";
    color: #ef4444;
}

.security-critical[b-p4ksnaw0be] {
    background-color: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #dc2626;
    animation: pulse-danger-b-p4ksnaw0be 2s infinite;
}

.security-critical .security-icon[b-p4ksnaw0be]::before {
    content: "??";
    color: #dc2626;
}

@keyframes pulse-danger-b-p4ksnaw0be {
    0%, 100% {
        border-color: #dc2626;
        background-color: #fee2e2;
    }
    50% {
        border-color: #ef4444;
        background-color: #fecaca;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .secure-textarea-wrapper textarea[b-p4ksnaw0be] {
        background-color: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    .secure-textarea-wrapper textarea:focus[b-p4ksnaw0be] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }

    .secure-textarea-wrapper textarea.invalid[b-p4ksnaw0be] {
        border-color: #f87171;
        background-color: #7f1d1d;
    }

    .secure-textarea-wrapper textarea.valid[b-p4ksnaw0be] {
        border-color: #34d399;
        background-color: #064e3b;
    }

    .character-count-normal[b-p4ksnaw0be] {
        color: #9ca3af;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .secure-textarea-wrapper textarea[b-p4ksnaw0be] {
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
    }

    .character-count[b-p4ksnaw0be] {
        font-size: 0.7rem;
        bottom: 0.375rem;
        right: 0.625rem;
    }

    .security-indicator[b-p4ksnaw0be] {
        font-size: 0.8rem;
        padding: 0.375rem;
    }

    .validation-error[b-p4ksnaw0be] {
        font-size: 0.8rem;
    }
}
/* /Components/ValidationPopup.razor.rz.scp.css */
.popup-overlay[b-y6ql5961im] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.popup-content[b-y6ql5961im] {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.popup-content h3[b-y6ql5961im] {
    margin-top: 0;
    color: var(--color-text-primary);
}

.popup-content p[b-y6ql5961im] {
    margin-bottom: 1.5rem;
    color: var(--color-text-placeholder);
}

.close-popup-btn[b-y6ql5961im] {
    background: var(--color-primary-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.close-popup-btn:hover[b-y6ql5961im] {
    background: var(--color-primary-navy);
}