/* /Bookings/AdminDetail.razor.rz.scp.css */
/* admin booking detail styles, scoped to AdminDetail.razor */
/* mobile first: one column of cards, guest and price go next to the stay from 1024px */

.booking-detail[b-jqv18p576l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* small pill back link like the back link of the room detail, but on the light admin bg */
.booking-detail-back[b-jqv18p576l] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.booking-detail-back:hover[b-jqv18p576l] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- header ---------- */

.booking-detail-header[b-jqv18p576l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-sm) var(--space-md);
}

/* booking number as the big serif title of the page, wraps on small phones */
.booking-detail-number[b-jqv18p576l] {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.booking-detail-created[b-jqv18p576l] {
    margin-top: var(--space-xs);
}

/* ---------- cards ---------- */

.booking-detail-layout[b-jqv18p576l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.booking-detail-main[b-jqv18p576l],
.booking-detail-aside[b-jqv18p576l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* white cards with a thin beige border, same as the summary blocks of the site */
.booking-detail-card[b-jqv18p576l] {
    margin: 0 !important; /* bulma adds a margin under every .box */
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent);
}

.booking-detail-card ul[b-jqv18p576l] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.booking-detail-muted[b-jqv18p576l] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.booking-detail-error[b-jqv18p576l] {
    color: var(--color-text-muted);
}

.booking-detail-subtitle[b-jqv18p576l] {
    margin: var(--space-md) 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
}

/* small uppercase label above a value, eg CHECK-IN */
.booking-detail-label[b-jqv18p576l] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---------- stay ---------- */

/* check-in and check-out stacked on phones, side by side with the nights between them from 480px */
.booking-detail-dates[b-jqv18p576l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius);
    background-color: var(--color-bg);
}

.booking-detail-date[b-jqv18p576l] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.booking-detail-date-day[b-jqv18p576l] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    line-height: 1.15;
}

/* nb of nights with a thin line on each side */
.booking-detail-nights[b-jqv18p576l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.booking-detail-nights[b-jqv18p576l]::before,
.booking-detail-nights[b-jqv18p576l]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

/* the 1st line is only shown next to the icon on wide screens */
.booking-detail-nights[b-jqv18p576l]::before {
    display: none;
}

/* assigned rooms, the room number in an olive badge */
.booking-detail-rooms[b-jqv18p576l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.booking-detail-room[b-jqv18p576l] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.booking-detail-room-number[b-jqv18p576l] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 var(--space-xs);
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary-dark);
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
}

.booking-detail-room-name[b-jqv18p576l] {
    font-weight: 500;
}

/* nb of guests under the dates, olive icon like the nights */
.booking-detail-guests[b-jqv18p576l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 500;
}

.booking-detail-guests i[b-jqv18p576l] {
    color: var(--color-primary);
}

/* ---------- booking conditions ---------- */

.booking-detail-conditions-note[b-jqv18p576l] {
    margin-top: var(--space-xs);
}

.booking-detail-conditions ul[b-jqv18p576l] {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.booking-detail-condition[b-jqv18p576l] {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.booking-detail-condition-header[b-jqv18p576l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.booking-detail-rate-name[b-jqv18p576l] {
    font-family: var(--font-title);
    font-style: italic;
}

.booking-detail-policy-tag[b-jqv18p576l] {
    flex-shrink: 0;
}

/* refund steps, stacked on phones and side by side from 480px, the current step in olive */
.booking-detail-timeline[b-jqv18p576l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
}

.booking-detail-timeline li[b-jqv18p576l] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    border-top: 2px solid var(--color-border);
}

.booking-detail-timeline li.is-current[b-jqv18p576l] {
    border-top-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.booking-detail-timeline li.is-past[b-jqv18p576l] {
    opacity: 0.55;
}

.booking-detail-timeline-percent[b-jqv18p576l] {
    font-family: var(--font-title);
    font-size: 1.25rem;
    line-height: 1.1;
}

.booking-detail-timeline li.is-current .booking-detail-timeline-percent[b-jqv18p576l] {
    color: var(--color-primary-dark);
}

/* refund on the reference date, a thin gold line above like the total of the price card */
.booking-detail-entitlement[b-jqv18p576l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid color-mix(in srgb, var(--color-gold) 35%, var(--color-border));
    font-size: 0.875rem;
}

.booking-detail-entitlement-amount[b-jqv18p576l] {
    font-weight: 600;
}

@media (min-width: 480px) {
    .booking-detail-timeline[b-jqv18p576l] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .booking-detail-timeline li[b-jqv18p576l] {
        flex-direction: column;
        gap: 0.125rem;
    }
}

/* ---------- payments ---------- */

.booking-detail-payment[b-jqv18p576l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.booking-detail-payment:last-child[b-jqv18p576l] {
    border-bottom: none;
}

.booking-detail-payment-info[b-jqv18p576l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.booking-detail-payment-amount[b-jqv18p576l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- guest ---------- */

.booking-detail-guest-name[b-jqv18p576l] {
    margin: 0 0 var(--space-md);
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.booking-detail-facts[b-jqv18p576l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}

.booking-detail-facts > div[b-jqv18p576l] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.booking-detail-facts > div:last-child[b-jqv18p576l] {
    padding-bottom: 0;
    border-bottom: none;
}

.booking-detail-facts dt[b-jqv18p576l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.booking-detail-facts dt i[b-jqv18p576l] {
    width: 1rem;
    color: var(--color-primary);
    text-align: center;
}

/* long emails and addresses wrap instead of making the page scroll sideways */
.booking-detail-facts dd[b-jqv18p576l] {
    margin: 0;
    padding-left: calc(1rem + var(--space-sm));
    overflow-wrap: anywhere;
}

.booking-detail-facts dd a[b-jqv18p576l] {
    color: var(--color-text);
}

.booking-detail-facts dd a:hover[b-jqv18p576l] {
    color: var(--color-primary);
}

/* ---------- price ---------- */

.booking-detail-price-row[b-jqv18p576l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
}

.booking-detail-price-row .booking-detail-muted[b-jqv18p576l] {
    margin-left: var(--space-xs);
    font-size: 0.8125rem;
}

/* total of the stay in the title font, same idea as the selection summary */
.booking-detail-total[b-jqv18p576l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-title);
    font-size: 1.25rem;
}

.booking-detail-total-amount[b-jqv18p576l] {
    font-size: 1.5rem;
    font-weight: 600;
}

/* ---------- cancellation ---------- */

/* solid burgundy badge, the light bulma tag was almost white on the cream page */
.booking-detail-cancelled-tag[b-jqv18p576l] {
    gap: var(--space-xs);
    background-color: var(--color-accent);
    color: var(--color-surface);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* burgundy tinted card with a thick line on the left, the booking is cancelled but still readable below */
.booking-detail-cancellation[b-jqv18p576l] {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    border-left: 4px solid var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.booking-detail-cancellation .booking-detail-facts > div[b-jqv18p576l] {
    border-bottom-color: color-mix(in srgb, var(--color-accent) 15%, var(--color-border));
}

.booking-detail-cancellation .booking-detail-facts dt i[b-jqv18p576l] {
    color: var(--color-accent);
}

.booking-detail-cancellation .booking-detail-facts[b-jqv18p576l] {
    margin-top: var(--space-sm);
}

/* refunds are done by hand, same beige info box as the refund notices of the site */
.booking-detail-refund-note[b-jqv18p576l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background-color: var(--color-warning-bg);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.booking-detail-refund-note i[b-jqv18p576l] {
    margin-top: 0.2rem;
}

/* confirmation after cancelling */
.booking-detail-notice[b-jqv18p576l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    font-size: 0.875rem;
}

.booking-detail-notice i[b-jqv18p576l] {
    margin-top: 0.2rem;
    color: var(--color-primary);
}

/* ---------- cancel dialog ---------- */

/* bottom sheet on phones, the thumb reaches the btns */
.booking-cancel-dialog[b-jqv18p576l] {
    justify-content: flex-end;
}

.booking-cancel-dialog .modal-background[b-jqv18p576l] {
    background-color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.booking-cancel-sheet[b-jqv18p576l] {
    width: 100%;
    max-height: 92vh;
    margin: 0;
    padding: var(--space-lg) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background-color: var(--color-surface);
    overflow-y: auto;
}

.booking-cancel-title[b-jqv18p576l] {
    margin: var(--space-xs) 0 var(--space-sm);
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.15;
}

.booking-cancel-refund-hint[b-jqv18p576l] {
    color: var(--color-text-muted);
}

.booking-cancel-error[b-jqv18p576l] {
    margin-top: var(--space-md);
}

/* main action on top when stacked on phones */
.booking-cancel-actions[b-jqv18p576l] {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* ---------- bigger screens ---------- */

@media (min-width: 480px) {
    .booking-detail-dates[b-jqv18p576l] {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
    }

    .booking-detail-date:last-child[b-jqv18p576l] {
        text-align: right;
    }

    .booking-detail-nights[b-jqv18p576l] {
        min-width: 7rem;
    }

    .booking-detail-nights[b-jqv18p576l]::before {
        display: block;
    }

    .booking-detail-rooms[b-jqv18p576l] {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

@media (min-width: 768px) {
    .booking-detail-card[b-jqv18p576l] {
        padding: var(--space-lg);
    }

    /* centred dialog from tablets */
    .booking-cancel-dialog[b-jqv18p576l] {
        justify-content: center;
    }

    .booking-cancel-sheet[b-jqv18p576l] {
        width: 32rem;
        padding: var(--space-lg);
        border-radius: var(--radius-card);
    }

    .booking-cancel-actions[b-jqv18p576l] {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* guest and price stay in view next to the stay while scrolling */
@media (min-width: 1024px) {
    .booking-detail-layout[b-jqv18p576l] {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .booking-detail-aside[b-jqv18p576l] {
        position: sticky;
        top: var(--space-lg);
    }
}
/* /Bookings/Confirmation.razor.rz.scp.css */
/* booking details, styled after the bill card of the settlement mockup */

.confirmation-page[b-qqpao7kgkf] {
    padding: var(--space-lg);
}

.confirmation-header[b-qqpao7kgkf] {
    margin-bottom: var(--space-lg);
}

.confirmation-header .title[b-qqpao7kgkf] {
    margin: var(--space-lg) 0 var(--space-xl);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
}

.confirmation-status[b-qqpao7kgkf] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background-color: #d9ead7;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.booking-number[b-qqpao7kgkf] {
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.confirmation-header .title[b-qqpao7kgkf] {
    margin-bottom: var(--space-sm);
}

.booking-email[b-qqpao7kgkf],
.booking-details-list dt[b-qqpao7kgkf],
.cancellation-note[b-qqpao7kgkf] {
    color: var(--color-text-muted);
}

.booking-details[b-qqpao7kgkf] {
    background-color: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
}

.booking-details-title[b-qqpao7kgkf] {
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
}

.booking-details-list[b-qqpao7kgkf] {
    margin: 0;
}

.booking-detail-row[b-qqpao7kgkf] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.booking-detail-row dd[b-qqpao7kgkf] {
    margin: 0;
    text-align: right;
}

.cancellation-note[b-qqpao7kgkf] {
    margin: var(--space-sm) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

@media (max-width: 600px) {
    .confirmation-page[b-qqpao7kgkf] {
        padding: var(--space-md);
    }

    .booking-detail-row[b-qqpao7kgkf] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .booking-detail-row dd[b-qqpao7kgkf] {
        text-align: left;
    }
}
/* /Bookings/Overview.razor.rz.scp.css */
/* booking overview styles, scoped to Overview.razor */

/* details on the left and the total on the right, same idea as the results page */
.overview-layout[b-d88yedjror] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--space-lg);
    align-items: start;
    margin-top: var(--space-lg);
}

.overview-sections[b-d88yedjror] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* white boxes like the room cards and the selection summary */
.overview-section[b-d88yedjror],
.overview-summary[b-d88yedjror] {
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* the total stays visible while the guest scrolls */
.overview-summary[b-d88yedjror] {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* title on the left, edit link on the right */
.overview-section-header[b-d88yedjror] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-sm);
}

.overview-section-title[b-d88yedjror] {
    margin-bottom: 0;
    font-size: 1.25rem;
}

.overview-edit[b-d88yedjror] {
    font-size: 0.875rem;
}

.overview-muted[b-d88yedjror],
.overview-rate-name[b-d88yedjror],
.overview-rate-description[b-d88yedjror],
.overview-rate-policy[b-d88yedjror] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* one room per line, thin line between them */
.overview-room-list[b-d88yedjror] {
    display: flex;
    flex-direction: column;
}

.overview-room[b-d88yedjror] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.overview-room:last-child[b-d88yedjror] {
    border-bottom: none;
}

.overview-room-name[b-d88yedjror] {
    font-weight: 500;
}

.overview-room-price[b-d88yedjror] {
    white-space: nowrap;
}

/* label on the left, value on the right */
.overview-guest-list div[b-d88yedjror] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
}

.overview-guest-list dt[b-d88yedjror] {
    color: var(--color-text-muted);
}

.overview-guest-list dd[b-d88yedjror] {
    margin: 0;
    text-align: right;
}

/* total of the stay, the main number of the page, in the title font */
.overview-total[b-d88yedjror] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-title);
    font-size: 1.5rem;
}

/* ::deep because the btn comes from the Button child component */
.overview-summary[b-d88yedjror]  .button {
    margin-top: var(--space-sm);
}

.overview-error[b-d88yedjror] {
    margin-top: var(--space-md);
}

/* tablets and phones, one column, the total goes under the details */
@media (max-width: 1024px) {
    .overview-layout[b-d88yedjror] {
        grid-template-columns: 1fr;
    }

    .overview-summary[b-d88yedjror] {
        position: static;
    }
}

@media (max-width: 600px) {
    .overview-guest-list div[b-d88yedjror] {
        flex-direction: column;
        gap: 0;
    }

    .overview-guest-list dd[b-d88yedjror] {
        text-align: left;
    }
}
/* /Components/BookingPopup.razor.rz.scp.css */
.booking-popup[b-jewvpn7cqx] {
    position: fixed;
    z-index: 1000;
    min-width: 17rem;
    max-width: 22rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--space-md) 1.25rem;
    pointer-events: none;
    animation: popup-in-b-jewvpn7cqx 0.12s ease;
}

@keyframes popup-in-b-jewvpn7cqx {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.popup-header[b-jewvpn7cqx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

.popup-booking-number[b-jewvpn7cqx] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.popup-status .tag[b-jewvpn7cqx] {
    font-size: 0.75rem;
}

.popup-body[b-jewvpn7cqx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.popup-guest-name[b-jewvpn7cqx] {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.popup-contact[b-jewvpn7cqx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.popup-contact-item[b-jewvpn7cqx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.popup-stay[b-jewvpn7cqx] {
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.popup-dates[b-jewvpn7cqx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--color-text);
    font-weight: 500;
}

.popup-dates-separator[b-jewvpn7cqx] {
    color: var(--color-text-muted);
}

.popup-nights[b-jewvpn7cqx] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: normal;
}

.popup-rooms[b-jewvpn7cqx] {
    margin-top: var(--space-xs);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.popup-label[b-jewvpn7cqx] {
    color: var(--color-text-muted);
}

.popup-rooms-list[b-jewvpn7cqx] {
    font-weight: 600;
    color: var(--color-text);
}

/* ──────────────────────────────────────────────
   Skeleton loading state
─────────────────────────────────────────────── */
.popup-skeleton[b-jewvpn7cqx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.skeleton-line[b-jewvpn7cqx] {
    height: 0.8rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-border) 60%, var(--color-surface));
    animation: skeleton-pulse-b-jewvpn7cqx 1.2s ease-in-out infinite;
}

.skeleton-header[b-jewvpn7cqx] {
    height: 1.2rem;
    width: 60%;
}

.skeleton-text[b-jewvpn7cqx] {
    width: 90%;
}

.skeleton-text-short[b-jewvpn7cqx] {
    width: 50%;
}

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

/* ──────────────────────────────────────────────
   Empty / Error state (AC2)
─────────────────────────────────────────────── */
.popup-empty-state[b-jewvpn7cqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    text-align: center;
    color: var(--color-text-muted);
}

.popup-empty-icon[b-jewvpn7cqx] {
    font-size: 1.5rem;
    line-height: 1;
}

.popup-empty-title[b-jewvpn7cqx] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}
/* /Components/DateRangePicker.razor.rz.scp.css */
/* date range picker styles, scoped to DateRangePicker.razor */

/* wrapper, the panel opens below the field */
.drp[b-9j5n4l8h20] {
    position: relative;
    width: 100%;
    max-width: 22rem;
}

/* ---------- closed field ---------- */

/* looks like the dates field of the mockup search bar */
.drp-field[b-9j5n4l8h20] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}

.drp-field:hover[b-9j5n4l8h20],
.drp-field[aria-expanded="true"][b-9j5n4l8h20] {
    border-color: var(--color-primary);
}

/* small uppercase label above the value */
.drp-label[b-9j5n4l8h20] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.drp-value[b-9j5n4l8h20] {
    font-size: 0.9375rem;
    color: var(--color-text);
}

/* ---------- panel ---------- */

/* white card floating above the page */
.drp-panel[b-9j5n4l8h20] {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    z-index: 20;
    width: max-content;
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* arrows on both sides of the months */
.drp-nav[b-9j5n4l8h20] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.drp-nav-btn[b-9j5n4l8h20] {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
}

.drp-nav-btn:hover:not(:disabled)[b-9j5n4l8h20] {
    background-color: var(--color-bg);
}

.drp-nav-btn:disabled[b-9j5n4l8h20] {
    opacity: 0.3;
    cursor: default;
}

/* months side by side */
.drp-months[b-9j5n4l8h20] {
    display: flex;
    gap: var(--space-lg);
}

/* month name in the title font */
.drp-month-title[b-9j5n4l8h20] {
    margin-bottom: var(--space-sm);
    font-family: var(--font-title);
    font-size: 1.25rem;
    text-align: center;
}

/* 7 columns, one per weekday */
.drp-grid[b-9j5n4l8h20] {
    display: grid;
    grid-template-columns: repeat(7, 2.5rem);
    row-gap: 2px;
}

.drp-weekday[b-9j5n4l8h20] {
    padding-bottom: var(--space-xs);
    font-size: 0.75rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* ---------- days ---------- */

.drp-day[b-9j5n4l8h20] {
    height: 2.5rem;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
}

/* only on devices with a real hover, on touch screens the outline would stay stuck after a tap */
@media (hover: hover) {
    .drp-day:hover:not(:disabled)[b-9j5n4l8h20] {
        outline: 1px solid var(--color-primary);
        outline-offset: -1px;
        border-radius: 50%;
    }
}

/* today is underlined */
.drp-day.is-today[b-9j5n4l8h20] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* past days are greyed out and cannot be clicked */
.drp-day.is-disabled[b-9j5n4l8h20] {
    color: var(--color-border);
    cursor: default;
    text-decoration: line-through;
}

/* nights between check in and check out get a light olive band */
.drp-day.is-in-range[b-9j5n4l8h20] {
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* check in and check out are filled olive circles */
.drp-day.is-start[b-9j5n4l8h20],
.drp-day.is-end[b-9j5n4l8h20] {
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* hint under the calendar, eg select your check out date */
.drp-hint[b-9j5n4l8h20] {
    margin-top: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ---------- small screens ---------- */

/* one month only and a panel as wide as the field */
@media (max-width: 768px) {
    .drp[b-9j5n4l8h20] {
        max-width: none;
    }

    .drp-month + .drp-month[b-9j5n4l8h20] {
        display: none;
    }

    .drp-panel[b-9j5n4l8h20] {
        box-sizing: border-box;
        width: 100%;
        padding: var(--space-md);
    }

    /* square day cells that shrink with the screen but never get bigger than 2.75rem */
    .drp-grid[b-9j5n4l8h20] {
        grid-template-columns: repeat(7, minmax(0, 2.75rem));
        justify-content: center;
    }

    .drp-day[b-9j5n4l8h20] {
        height: auto;
        aspect-ratio: 1;
    }
}
/* /Components/GuestPicker.razor.rz.scp.css */
/* guest picker styles, scoped to GuestPicker.razor */

/* wrapper, panel opens below the field */
.gp[b-4fak3yrj2d] {
    position: relative;
    width: 100%;
}

/* ---------- closed field ---------- */

.gp-field[b-4fak3yrj2d] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.gp-field:hover[b-4fak3yrj2d],
.gp-field[aria-expanded="true"][b-4fak3yrj2d] {
    border-color: var(--color-primary);
}

/* small uppercase label above value */
.gp-label[b-4fak3yrj2d] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.gp-value[b-4fak3yrj2d] {
    font-size: 0.9375rem;
    color: var(--color-text);
}

/* ---------- popup panel ---------- */

.gp-panel[b-4fak3yrj2d] {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    z-index: 25;
    width: 18rem;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* row with title and +/- counter */
.gp-row[b-4fak3yrj2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.gp-row + .gp-row[b-4fak3yrj2d] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-border);
}

.gp-title[b-4fak3yrj2d] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9375rem;
}

.gp-subtitle[b-4fak3yrj2d] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
}

/* notice displayed when an auto-adjustment occurs, placed under the rooms row */
.gp-notice[b-4fak3yrj2d] {
    margin-top: var(--space-xs);
    padding: 0.3rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--color-primary);
    background-color: var(--color-primary-tint);
    border-radius: var(--radius);
    text-align: center;
    line-height: 1.3;
}

/* +/- counter buttons with count number in the middle */
.gp-counter[b-4fak3yrj2d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gp-counter-btn[b-4fak3yrj2d] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}

.gp-counter-btn:not(:disabled):hover[b-4fak3yrj2d] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.gp-counter-btn:disabled[b-4fak3yrj2d] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--color-border);
}

.gp-count[b-4fak3yrj2d] {
    font-size: 1rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
    color: var(--color-text);
}

/* footer with capacity limit hint and done button */
.gp-footer[b-4fak3yrj2d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
}

.gp-capacity-hint[b-4fak3yrj2d] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.gp-done-btn[b-4fak3yrj2d] {
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
}

.gp-done-btn:hover[b-4fak3yrj2d] {
    background-color: var(--color-hover-tint);
}
/* /Components/PhotoCarousel.razor.rz.scp.css */
/* photo slider styles, scoped to PhotoCarousel.razor */

/* frame of the photos, 4:3 like most room photos, the arrows and dots are placed on top of it */
.carousel[b-1gv7hd07m7] {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-border); /* shown while a photo loads */
}

/* photo fills the frame without being stretched, with a short fade when it changes */
.carousel-photo[b-1gv7hd07m7] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: carousel-fade-b-1gv7hd07m7 0.35s ease-out;
}

@keyframes carousel-fade-b-1gv7hd07m7 {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

/* ---------- glass arrows ---------- */

/* round frosted glass btns on both sides, the photo stays visible through them */
.carousel-btn[b-1gv7hd07m7] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 14px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    /* hidden until the mouse is on the photo, see below */
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.carousel-prev[b-1gv7hd07m7] {
    left: var(--space-sm);
}

.carousel-next[b-1gv7hd07m7] {
    right: var(--space-sm);
}

/* arrows appear when the mouse is on the photo, or when a keyboard user tabs to them */
.carousel:hover .carousel-btn[b-1gv7hd07m7],
.carousel-btn:focus-visible[b-1gv7hd07m7] {
    opacity: 1;
}

.carousel-btn:hover[b-1gv7hd07m7] {
    background: rgba(255, 255, 255, 0.32);
}

/* touch screens have no hover, so the arrows are always visible */
@media (hover: none) {
    .carousel-btn[b-1gv7hd07m7] {
        opacity: 1;
    }
}

/* ---------- dots ---------- */

/* small dots at the bottom, one per photo */
.carousel-dots[b-1gv7hd07m7] {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.carousel-dot[b-1gv7hd07m7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}

.carousel-dot.is-active[b-1gv7hd07m7] {
    background-color: #fff;
}

/* ---------- zoomable photo ---------- */

/* the photo btn fills the frame and looks like the plain photo */
.carousel-zoom[b-1gv7hd07m7] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.carousel-zoom:focus-visible[b-1gv7hd07m7] {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ---------- detail mode ---------- */

/* the whole screen, dark and blurred behind the photo, above the navbar */
.lightbox[b-1gv7hd07m7] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 22, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-b-1gv7hd07m7 0.3s ease-out;
    outline: none;
}

@keyframes lightbox-fade-b-1gv7hd07m7 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* counter on the left, size and close btns on the right */
.lightbox-bar[b-1gv7hd07m7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    color: #fff;
}

.lightbox-counter[b-1gv7hd07m7] {
    font-family: var(--font-title);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}

.lightbox-actions[b-1gv7hd07m7] {
    display: flex;
    gap: var(--space-sm);
}

/* same frosted glass as the slider arrows, 44px so they are easy to tap on phones */
.lightbox-btn[b-1gv7hd07m7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lightbox-btn:hover[b-1gv7hd07m7] {
    background: rgba(255, 255, 255, 0.26);
}

.lightbox-btn:focus-visible[b-1gv7hd07m7] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* the photo area, fitted mode centers the photo inside it */
.lightbox-stage[b-1gv7hd07m7] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* room at the bottom for the arrows on phones */
    padding: 0 var(--space-sm) calc(2.75rem + var(--space-lg));
}

/* fitted to the screen, never cropped */
.lightbox-photo[b-1gv7hd07m7] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    animation: carousel-fade-b-1gv7hd07m7 0.35s ease-out;
}

/* original size, the photo keeps its own pixel size and the stage scrolls to see all of it */
.lightbox-stage.is-original[b-1gv7hd07m7] {
    display: block;
    overflow: auto;
    text-align: center;
}

.lightbox-stage.is-original .lightbox-photo[b-1gv7hd07m7] {
    display: inline-block;
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

/* arrows on the sides, at the bottom on phones so they do not cover the photo */
.lightbox-nav[b-1gv7hd07m7] {
    position: absolute;
    bottom: var(--space-md);
}

.lightbox-prev[b-1gv7hd07m7] {
    left: var(--space-md);
}

.lightbox-next[b-1gv7hd07m7] {
    right: var(--space-md);
}

/* bigger screens get more room around the photo and the arrows in the middle of the sides */
@media (min-width: 768px) {
    .lightbox-bar[b-1gv7hd07m7] {
        padding: var(--space-md) var(--space-lg);
    }

    .lightbox-stage[b-1gv7hd07m7] {
        padding: 0 calc(var(--space-lg) + 3rem) var(--space-lg);
    }

    .lightbox-stage.is-original[b-1gv7hd07m7] {
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .lightbox-nav[b-1gv7hd07m7] {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .lightbox-prev[b-1gv7hd07m7] {
        left: var(--space-lg);
    }

    .lightbox-next[b-1gv7hd07m7] {
        right: var(--space-lg);
    }
}
/* /Components/PlaceholderPage.razor.rz.scp.css */
.placeholder-page[b-6t9i3f6hxe] {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.placeholder-page-message[b-6t9i3f6hxe] {
    max-width: 36rem;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}
/* /Components/RoomCard.razor.rz.scp.css */
/* room card styles, scoped to RoomCard.razor */

/*
  white card with rounded corners and a light border, like the room cards of the mockup homepage
  overflow hidden cuts the photo corners so they follow the rounded card
*/
.room-card[b-reyyr9a4mb] {
    /* column layout so the body can fill the whole card height, needed to align the btns */
    display: flex;
    flex-direction: column;

    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* photo on top of the card, full width, always the same height, cropped instead of stretched */
.room-card-photo[b-reyyr9a4mb] {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* beige block shown instead of the photo when the room has none */
.room-card-photo.is-placeholder[b-reyyr9a4mb] {
    background-color : var(--color-border);
}

/* space around the text under the photo */
.room-card-body[b-reyyr9a4mb] {
    /* takes the space left under the photo, texts stacked with a small gap between them */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
}

/* room name, less space under it than the default h3 of the theme */
.room-card-body h3[b-reyyr9a4mb] {
    margin-bottom: 0;
    font-size: 1.5rem;
}

/* name as a link to the detail page, keeps the title look */
.room-card-title-link[b-reyyr9a4mb] {
    color: inherit;
    text-decoration: none;
}

.room-card-title-link:hover[b-reyyr9a4mb] {
    text-decoration: underline;
}

/* small link to the detail page under the capacity */
.room-card-details-link[b-reyyr9a4mb] {
    font-size: 0.875rem;
    align-self: flex-start;
    text-decoration: underline;
}

/* description in a smaller and softer text */
.room-card-description[b-reyyr9a4mb] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* capacity, small grey detail like in the mockup */
.room-card-meta[b-reyyr9a4mb] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* price block, a thin line on top splits it from the room info */
.room-card-prices[b-reyyr9a4mb] {
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

/* eg 3 nights · prices include VAT, small and grey like the capacity */
.room-card-price-detail[b-reyyr9a4mb] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* list of rates, no bullets, a small gap between the rates */
.room-card-rates[b-reyyr9a4mb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/*
  one rate on 3 rows and 3 columns
  radio on the left, rate name next to it, total on the right
  price per night and cancellation policy under the name, the dot leaves the radio column empty
  grid areas so the order of the tags in the razor does not matter
  the whole line is a label, so it looks clickable
*/
.room-card-rate[b-reyyr9a4mb] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "radio name   total"
        ".     detail detail"
        ".     policy policy"
        ".     minstay minstay";
    column-gap: var(--space-sm);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

/* darker border on hover so the guest sees the line is clickable */
.room-card-rate:hover[b-reyyr9a4mb] {
    border-color: var(--color-text-muted);
}

/* the chosen rate gets a green border, :has checks if the radio inside is checked */
.room-card-rate:has(.room-card-rate-radio:checked)[b-reyyr9a4mb] {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* radio btn in the green of the theme instead of the browser blue */
.room-card-rate-radio[b-reyyr9a4mb] {
    grid-area: radio;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* total of the stay with this rate, the main number of the line, in the title font */
.room-card-total[b-reyyr9a4mb] {
    grid-area: total;
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--color-text);
    text-align: right;
}

/* eg Non-refundable, the 1st thing the guest reads on the line */
.room-card-rate-name[b-reyyr9a4mb] {
    grid-area: name;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

/* eg €109 × 3 nights under the rate name */
.room-card-rate-detail[b-reyyr9a4mb] {
    grid-area: detail;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* eg free cancellation up to 30 days before arrival, small and grey under the price */
.room-card-rate-policy[b-reyyr9a4mb] {
    grid-area: policy;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* eg minimum stay 2 nights, same size as the policy line, in italic so it reads as a condition */
.room-card-rate-min-stay[b-reyyr9a4mb] {
    grid-area: minstay;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-muted);
}

/* rate that needs a longer stay, faded and not clickable, the min stay line says why */
.room-card-rate.is-unavailable[b-reyyr9a4mb] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* no darker border on hover, the line can't be picked */
.room-card-rate.is-unavailable:hover[b-reyyr9a4mb] {
    border-color: var(--color-border);
}

.room-card-rate.is-unavailable .room-card-rate-radio[b-reyyr9a4mb] {
    cursor: not-allowed;
}

/* the total is not the main number of the line anymore */
.room-card-rate.is-unavailable .room-card-total[b-reyyr9a4mb] {
    color: var(--color-text-muted);
}

/*
  select btn pushed to the bottom of the card so all cards line up
  ::deep is needed because the btn comes from the Button component, a child component
*/
.room-card-body[b-reyyr9a4mb]  .select-btn {
    margin-top: auto;
    align-self: flex-start;
}
/* /Components/SearchBar.razor.rz.scp.css */
/* compact search bar styles, scoped to SearchBar.razor, same look on the home, search and results pages */
/* the home hero makes the glass more transparent and the bar narrower, see Pages/Index.razor.css */

/* frosted glass box, a light veil with a white highlight on top and a soft shadow */
/* full width of the page, holds the row and the error messages */
.search-bar[b-b8f1x9ant2] {
    padding: 6px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 1px rgba(43, 43, 43, 0.05),
        0 10px 30px rgba(43, 43, 43, 0.08);
    margin-bottom: var(--space-lg);
    /* own layer above the page content, the backdrop-filter makes a stacking context, */
    /* so without this the guest and date panels end up under later sticky elements like the selection summary */
    position: relative;
    z-index: 10;
    /* dark text even on the home hero, which sets white text */
    color: var(--color-text);
}

/* dates, guests and btn on one row */
.search-bar-row[b-b8f1x9ant2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- dates field ---------- */

/* both date picker and guest picker take equal flexible space */
.search-bar[b-b8f1x9ant2]  .drp {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
}

/* compact field, almost white so it stands out on the glass, no border, the box around already has one */
.search-bar[b-b8f1x9ant2]  .drp .drp-field {
    width: 100%;
    padding: 0.4rem 0.9rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
}

.search-bar[b-b8f1x9ant2]  .drp .drp-field:hover,
.search-bar[b-b8f1x9ant2]  .drp .drp-field[aria-expanded="true"] {
    border-color: var(--color-primary);
}

/* small spaced out label and small value, quiet luxury look */
.search-bar[b-b8f1x9ant2]  .drp .drp-label {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
}

.search-bar[b-b8f1x9ant2]  .drp .drp-value {
    font-size: 0.875rem;
}

/* ---------- guests and rooms field ---------- */

.search-bar[b-b8f1x9ant2]  .gp {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
}

.search-bar[b-b8f1x9ant2]  .gp .gp-field {
    width: 100%;
    padding: 0.4rem 0.9rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
}

.search-bar[b-b8f1x9ant2]  .gp .gp-field:hover,
.search-bar[b-b8f1x9ant2]  .gp .gp-field[aria-expanded="true"] {
    border-color: var(--color-primary);
}

.search-bar[b-b8f1x9ant2]  .gp .gp-label {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
}

.search-bar[b-b8f1x9ant2]  .gp .gp-value {
    font-size: 0.875rem;
}

.search-bar[b-b8f1x9ant2]  .gp .gp-panel {
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* ---------- btn ---------- */

/* as high as the fields, small uppercase spaced out text like on luxury hotel sites */
.search-bar[b-b8f1x9ant2]  .search-btn {
    align-self: stretch;
    height: auto;
    padding-inline: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 10px;
    white-space: nowrap;
}

/* ---------- calendar popup ---------- */

/* dropdown of the dates, softer shadow and round corners to fit the glass look */
.search-bar[b-b8f1x9ant2]  .drp .drp-panel {
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* 2 months side by side, spaced out */
.search-bar[b-b8f1x9ant2]  .drp .drp-months {
    gap: 1.5rem;
}

.search-bar[b-b8f1x9ant2]  .drp .drp-month-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.search-bar[b-b8f1x9ant2]  .drp .drp-grid {
    gap: 2px;
}

.search-bar[b-b8f1x9ant2]  .drp .drp-weekday {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.search-bar[b-b8f1x9ant2]  .drp .drp-day {
    font-size: 0.8125rem;
}

/* next and previous month arrows */
.search-bar[b-b8f1x9ant2]  .drp .drp-nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

/* helper text at the bottom of the calendar, eg pick check in date */
.search-bar[b-b8f1x9ant2]  .drp .drp-hint {
    font-size: 0.75rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

/* ---------- errors under the row ---------- */

/* red text for invalid dates, padding so it stays off the glass border */
.search-bar[b-b8f1x9ant2]  .has-text-danger {
    padding: 0.4rem 0.9rem;
    margin-top: 4px;
    border-radius: 8px;
    background-color: var(--color-accent);
    color: #fff !important;
    font-size: 0.8125rem;
}

/* ---------- small screens ---------- */

/* phones, fields and btn stack and take full width */
@media (max-width: 768px) {
    .search-bar-row[b-b8f1x9ant2] {
        flex-direction: column;
        align-items: stretch;
    }

    /* flex: none, in a column the flex basis would become a height and leave a gap under the dates */
    .search-bar[b-b8f1x9ant2]  .drp,
    .search-bar[b-b8f1x9ant2]  .gp {
        flex: none;
        width: 100%;
    }

    .search-bar[b-b8f1x9ant2]  .search-btn {
        padding-block: 0.75rem;
    }

    /* square day cells that shrink with the screen but never get bigger than 2.75rem */
    .search-bar[b-b8f1x9ant2]  .drp .drp-grid {
        grid-template-columns: repeat(7, minmax(0, 2.75rem));
        justify-content: center;
    }

    .search-bar[b-b8f1x9ant2]  .drp .drp-day {
        height: auto;
        aspect-ratio: 1;
    }
}
/* /Components/SelectionSummary.razor.rz.scp.css */
/* selection summary styles, scoped to SelectionSummary.razor */

/* white box like the room cards */
.selection-summary[b-fxe06sh5sk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* title in the title font, a bit smaller than the room names */
.selection-summary-title[b-fxe06sh5sk] {
    margin-bottom: 0;
    font-size: 1.25rem;
}

/* nb of nights and vat note, small and grey */
.selection-summary-meta[b-fxe06sh5sk],
.selection-summary-vat[b-fxe06sh5sk] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* hint shown when nothing is picked yet */
.selection-summary-empty[b-fxe06sh5sk] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* list of picked rooms, a thin line between them */
.selection-summary-list[b-fxe06sh5sk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/*
  one picked room on 2 rows
  room name and price on the 1st row, rate name under the room name
*/
.selection-summary-room[b-fxe06sh5sk] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name price"
        "rate price";
    column-gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

.selection-summary-room-name[b-fxe06sh5sk] {
    grid-area: name;
    font-size: 0.875rem;
    font-weight: 500;
}

.selection-summary-rate-name[b-fxe06sh5sk] {
    grid-area: rate;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.selection-summary-price[b-fxe06sh5sk] {
    grid-area: price;
    align-self: center;
    font-size: 0.875rem;
}

/* total of the stay, the main number of the box, in the title font */
.selection-summary-total[b-fxe06sh5sk] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-xs);
    font-family: var(--font-title);
    font-size: 1.5rem;
}

/* continue btn with some space above */
/* ::deep because the btn comes from the Button child component */
.selection-summary[b-fxe06sh5sk]  .button {
    margin-top: var(--space-sm);
}
/* /Identity/Login.razor.rz.scp.css */
.login-divider[b-kob21tu64a] {
    border: none;
    height: 2px;
    background-color: var(--color-primary);
    margin: 0.75rem 0 1.5rem;
}

.login-row[b-kob21tu64a] {
    min-height: 70vh;
}

.btn-login[b-kob21tu64a] {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-login:hover[b-kob21tu64a] {
    background-color: var(--color-primary-dark);
}

.btn-login:active[b-kob21tu64a] {
    transform: translateY(1px);
}

.btn-login:focus-visible[b-kob21tu64a] {
    outline: 3px solid #a9b87a;
    outline-offset: 2px;
}

.btn-login:disabled[b-kob21tu64a] {
    background-color: #9aa585;
    cursor: not-allowed;
}
/* /Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-8gspssg38e] {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    min-height: 100vh;
    background: var(--color-surface);
}

/*
  column so the back link can sit at the bottom
  sticky and as high as the screen, the back link stays at the bottom even on a long page
*/
.admin-sidebar[b-8gspssg38e] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.25rem 0.7rem;
    border-right: 1px solid var(--color-border);
}

/* link back to the guest site, pushed to the bottom, softer than the menu */
.admin-back[b-8gspssg38e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.admin-back:hover[b-8gspssg38e] {
    background: var(--color-bg);
    color: var(--color-text);
}

/* real logo, emblem and name on one line, same look as the site navbar */
.admin-brand[b-8gspssg38e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0 0.25rem;
}

.admin-brand-emblem[b-8gspssg38e] {
    height: 2.5rem;
    width: auto;
    flex-shrink: 0;
}

/* the name shrinks to fit the narrow sidebar, never wider than what is left */
.admin-brand-name[b-8gspssg38e] {
    min-width: 0;
    max-width: 100%;
    max-height: 1.5rem;
    width: auto;
    height: auto;
    margin-top: 0.25rem;
}

.admin-brand:hover[b-8gspssg38e] {
    color: var(--color-text);
}

.admin-sidebar nav[b-8gspssg38e] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-8gspssg38e] .admin-sidebar nav a {
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.8rem;
}

[b-8gspssg38e] .admin-sidebar nav a:hover {
    background: var(--color-bg);
}

[b-8gspssg38e] .admin-sidebar nav a.active {
    background: #e6ebdc;
    color: var(--color-primary-dark);
    font-weight: 600;
}

.admin-content[b-8gspssg38e] {
    min-width: 0;
    background: #F7F5F0;
}

@media (max-width: 640px) {
    .admin-shell[b-8gspssg38e] {
        grid-template-columns: 1fr;
    }

    /* on phones the sidebar is a block on top, not a full screen column */
    .admin-sidebar[b-8gspssg38e] {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .admin-sidebar nav[b-8gspssg38e] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* no empty space to push it down on phones, just under the menu */
    .admin-back[b-8gspssg38e] {
        margin-top: 0.5rem;
    }
}
/* /Layout/Footer.razor.rz.scp.css */
/* footer styles, scoped to Footer.razor by blazor css isolation */

/* dark bar at the bottom, links on the left and right */
.site-footer[b-nv8vxw9scb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-footer);
    color: var(--color-surface);
    font-size: 0.8125rem;
}

/* groups of links, spaced evenly */
.site-footer-left[b-nv8vxw9scb],
.site-footer-right[b-nv8vxw9scb] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
}

/* admin login link, kept small and faint so guests barely notice it */
.site-footer-admin[b-nv8vxw9scb] {
    font-size: 0.6875rem;
    opacity: 0.35;
    text-decoration: none;
    color: inherit;
}

.site-footer-admin:hover[b-nv8vxw9scb],
.site-footer-admin:focus-visible[b-nv8vxw9scb] {
    opacity: 0.8;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* layout styles, scoped to MainLayout.razor by blazor css isolation */

/* full height column so the footer stays at the bottom on short pages */
.site-layout[b-fon2j1918r] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* content takes the free space between header and footer */
.site-main[b-fon2j1918r] {
    flex: 1;
}
/* /Layout/NavBar.razor.rz.scp.css */
/* header styles, scoped to NavBar.razor by blazor css isolation */

/* light bar with a thin bottom line, as in the mockup */
.site-navbar[b-083ddm3s1m] {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    min-height: 4rem;
    padding: 0 var(--space-lg);
}

/* real logo on the left, the emblem next to the name in script */
.site-brand[b-083ddm3s1m] {
    gap: var(--space-sm);
}

/* bulma caps the imgs of the navbar at 1.75rem, too small for the emblem */
.site-brand img[b-083ddm3s1m] {
    max-height: none;
    width: auto;
}

.site-brand-emblem[b-083ddm3s1m] {
    height: 2.75rem;
}

/* a bit lower so the script lines up with the middle of the emblem */
.site-brand-name[b-083ddm3s1m] {
    height: 1.6rem;
    margin-top: 0.3rem;
}

/*
  menu links, olive green when active or hovered
  ::deep is needed because NavLink is a child component and does not get this file scope
*/
.site-navbar[b-083ddm3s1m]  .navbar-item {
    color: var(--color-text);
}

.site-navbar[b-083ddm3s1m]  .navbar-item:hover,
.site-navbar[b-083ddm3s1m]  .navbar-item.is-active {
    background-color: transparent;
    color: var(--color-primary);
}

/* smaller menu links, only in navbar-start so the site name keeps its size */
.site-navbar[b-083ddm3s1m]  .navbar-start .navbar-item {
    font-size: 0.9375rem;
}

/* current language, small and bold like en in the mockup */
.site-language[b-083ddm3s1m] {
    font-size: 0.875rem;
    font-weight: 600;
}
/* /Pages/BookingList.razor.rz.scp.css */
/* booking list, same card style as the invoice list */

.booking-list[b-y9aulwkw6q] {
    background-color: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
}

.booking-list-title[b-y9aulwkw6q] {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.booking-list > ul[b-y9aulwkw6q] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* label left, amount right, thin line between the rows */
.booking-row[b-y9aulwkw6q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.booking-row:last-child[b-y9aulwkw6q] {
    border-bottom: none;
}

.booking-main[b-y9aulwkw6q] {
    color: var(--color-text);
}

.booking-muted[b-y9aulwkw6q] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.booking-amount[b-y9aulwkw6q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    white-space: nowrap;
}

.booking-count[b-y9aulwkw6q] {
    text-align: center;
    margin-top: var(--space-sm);
}

/* the whole row opens the booking detail, the link of the booking number is stretched over the row */
.booking-row[b-y9aulwkw6q] {
    position: relative;
    margin: 0 calc(-1 * var(--space-sm));
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.booking-row:hover[b-y9aulwkw6q] {
    background-color: var(--color-bg);
}

.booking-list-link[b-y9aulwkw6q] {
    color: inherit;
}

.booking-list-link[b-y9aulwkw6q]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.booking-list-link:focus-visible[b-y9aulwkw6q] {
    outline: none;
}

.booking-row:has(.booking-list-link:focus-visible)[b-y9aulwkw6q] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.booking-row-chevron[b-y9aulwkw6q] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* phones, the amount and status go under the guest instead of next to it */
@media (max-width: 640px) {
    .booking-row[b-y9aulwkw6q] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .booking-row-chevron[b-y9aulwkw6q] {
        display: none;
    }
}
/* /Pages/BookingMatrix.razor.rz.scp.css */
/* ──────────────────────────────────────────────
   Page wrapper
─────────────────────────────────────────────── */
.matrix-page[b-yvylg6olb7] {
    padding: var(--space-lg) 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ──────────────────────────────────────────────
   Header: title left, nav + action controls right
─────────────────────────────────────────────── */
.matrix-header[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.matrix-title[b-yvylg6olb7] {
    font-family: var(--font-title);
    font-size: 2.25rem;
    font-weight: 400;
    margin: 0;
    color: var(--color-text);
}

.matrix-header-controls[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.matrix-nav[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.matrix-nav-btn[b-yvylg6olb7] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--color-text);
    transition: background-color 0.15s, border-color 0.15s;
}

.matrix-nav-btn:hover[b-yvylg6olb7] {
    background-color: var(--color-bg);
    border-color: var(--color-text-muted);
}

.matrix-window-box[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    min-width: 12rem;
}

.matrix-top-actions[b-yvylg6olb7] {
    display: flex;
    gap: 0.6rem;
}

.action-btn[b-yvylg6olb7] {
    padding: 0.45rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color 0.15s, border-color 0.15s;
}

.action-btn:hover[b-yvylg6olb7] {
    background-color: var(--color-bg);
    border-color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
   Legend chips
─────────────────────────────────────────────── */
.matrix-legend[b-yvylg6olb7] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.legend-chip[b-yvylg6olb7] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.legend-chip.available[b-yvylg6olb7] { background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)); color: var(--color-primary-dark); }
.legend-chip.occupied[b-yvylg6olb7]  { background: var(--color-warning-bg); color: var(--color-text); }
.legend-chip.temporary[b-yvylg6olb7] { background: color-mix(in srgb, var(--color-gold) 20%, var(--color-surface)); color: var(--color-gold); border: 1px dashed var(--color-gold); }

/* ──────────────────────────────────────────────
   Scroll container (horizontal on smaller screens)
─────────────────────────────────────────────── */
.matrix-scroll[b-yvylg6olb7] {
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
}

/* ──────────────────────────────────────────────
   Grid
─────────────────────────────────────────────── */
.matrix-grid[b-yvylg6olb7] {
    display: grid;
    grid-template-columns: 13rem repeat(var(--window-days, 16), minmax(3.2rem, 1fr));
    min-width: 60rem;
    background: var(--color-surface);
}

/* ──────────────────────────────────────────────
   Generic cell & borders
─────────────────────────────────────────────── */
.matrix-cell[b-yvylg6olb7] {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/* ──────────────────────────────────────────────
   Header Row
─────────────────────────────────────────────── */
.matrix-room-header[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg);
    height: 3.5rem;
}

.matrix-day-header[b-yvylg6olb7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    height: 3.5rem;
    padding: 0.2rem 0;
    gap: 0.2rem;
}

.day-name[b-yvylg6olb7] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.day-num[b-yvylg6olb7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.today-circle[b-yvylg6olb7] {
    background: var(--color-primary);
    color: var(--color-surface);
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* ──────────────────────────────────────────────
   Category / Room Name Banner (spans all columns)
─────────────────────────────────────────────── */
.matrix-category-banner[b-yvylg6olb7] {
    grid-column: 1 / -1;
    background: var(--color-bg);
    padding: 0.4rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.category-name[b-yvylg6olb7] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
   Room Label (Left cell in room row)
─────────────────────────────────────────────── */
.matrix-room-label[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
    background: var(--color-surface);
    height: 4.5rem; /* Thicker row */
}

.room-number-text[b-yvylg6olb7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ──────────────────────────────────────────────
   Timeline Track (spans the 16 day columns)
─────────────────────────────────────────────── */
.matrix-timeline-track[b-yvylg6olb7] {
    grid-column: 2 / -1;
    position: relative;
    height: 4.5rem; /* Thicker row */
    border-bottom: 1px solid var(--color-border);
}

/* Flat single-layer grid for the timeline track */
.track-flat-grid[b-yvylg6olb7] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--window-days, 16), 1fr);
}

/* ──────────────────────────────────────────────
   Status cells — each maps to a CellStatus value
─────────────────────────────────────────────── */

/* Available — soft olive green; vertical dividers keep columns readable */
.matrix-cell-available[b-yvylg6olb7] {
    background-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
    border-right: 1px solid var(--color-surface);
}

.matrix-cell-available:last-child[b-yvylg6olb7] {
    border-right: 0;
}

/* Occupied — warm amber; no internal borders so multi-day spans merge */
.matrix-cell-occupied[b-yvylg6olb7] {
    background-color: var(--color-warning-bg);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

/* Temporary — provisional booking using gold tint from theme with dashed border */
.matrix-cell-temporary[b-yvylg6olb7] {
    background-color: color-mix(in srgb, var(--color-gold) 18%, var(--color-surface));
    border-right: 1px dashed var(--color-gold);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.matrix-cell-occupied:hover[b-yvylg6olb7],
.matrix-cell-temporary:hover[b-yvylg6olb7] {
    text-decoration: none;
    filter: brightness(0.96);
}

/* Guest name label — shared by Occupied and Temporary cells */
.cell-guest-name[b-yvylg6olb7] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ──────────────────────────────────────────────
   Bottom Action Section
─────────────────────────────────────────────── */
.matrix-bottom-actions[b-yvylg6olb7] {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.btn-new-booking[b-yvylg6olb7] {
    align-self: flex-start;
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius);
    padding: 0.65rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-new-booking:hover[b-yvylg6olb7] {
    background-color: var(--color-primary-dark);
}

.selection-action-bar[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.selection-details[b-yvylg6olb7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.selection-title[b-yvylg6olb7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.selection-dates[b-yvylg6olb7] {
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.selection-buttons[b-yvylg6olb7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-create-booking[b-yvylg6olb7] {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.35rem;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-create-booking:hover[b-yvylg6olb7] {
    background-color: var(--color-primary-dark);
}

/* ──────────────────────────────────────────────
   Empty state (AC2: no rooms configured)
─────────────────────────────────────────────── */
.matrix-empty-state[b-yvylg6olb7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.empty-state-icon[b-yvylg6olb7] {
    font-size: 3rem;
    line-height: 1;
}

.empty-state-title[b-yvylg6olb7] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.empty-state-body[b-yvylg6olb7] {
    font-size: 0.9rem;
    margin: 0;
}
/* /Pages/Index.razor.rz.scp.css */
/* ---------- home page: hero ---------- */

/* full width hero, the photos fill it and the logo and search bar sit in the middle */
/* no overflow hidden here, the date picker panel of the search bar must be able to go below the hero */
.hero[b-e1awlncfj3] {
    /* muted olive from the mockup, shown until the 1st photo is loaded */
    --color-hero: #7d866a;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(34rem, 82vh, 52rem);
    padding: var(--space-xl) var(--space-lg);
    background-color: var(--color-hero);
    color: #fff;
    text-align: center;
}

/* layer with the photos, behind the content, it cuts the slow zoom of the photos */
.hero-slides[b-e1awlncfj3] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* all photos on top of each other, invisible until their turn comes */
.hero-slide[b-e1awlncfj3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: hero-slide-b-e1awlncfj3 30s linear infinite; /* 5 photos x 6 s, see HeroPhotos in Index.razor */
}

/* dark veil on the photos so the white logo and title stay readable, a bit darker at the bottom for the search bar */
.hero-slides[b-e1awlncfj3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 16, 0.45) 0%, rgba(20, 20, 16, 0.25) 45%, rgba(20, 20, 16, 0.6) 100%);
}

/* logo, title and search bar, above the photos */
.hero-content[b-e1awlncfj3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 52rem;
}

/* white version of the logo, with a soft shadow so it stays readable on light photos */
.hero-logo[b-e1awlncfj3] {
    width: clamp(14rem, 32vw, 24rem);
    height: auto;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

/* tagline under the logo, light serif italic for the luxury look */
.hero .hero-title[b-e1awlncfj3] {
    color: #fff;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-lg);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ---------- home page: search bar in glass on the hero ---------- */
/* size, fonts and calendar come from SearchBar.razor.css, here only the glass look */

/* the form of the search bar is centered and as wide as the bar, otherwise it shrinks to its content */
.hero-content[b-e1awlncfj3]  form {
    width: 100%;
    max-width: 48rem;
}

/* more transparent glass on the photo, no bottom margin in the hero */
.hero[b-e1awlncfj3]  .search-bar {
    margin-bottom: 0;
    text-align: left;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* each photo: fades in, stays, fades out while the next one fades in, and zooms slowly the whole time */
/* 20% = 6 s of the 30 s loop, so the % only work for 5 photos */
@keyframes hero-slide-b-e1awlncfj3 {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    4% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    24% {
        opacity: 0;
        transform: scale(1.08);
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* users who turned off animations in their system only get the 1st photo, without movement */
@media (prefers-reduced-motion: reduce) {
    .hero-slide[b-e1awlncfj3] {
        animation: none;
    }

    .hero-slide:first-child[b-e1awlncfj3] {
        opacity: 1;
    }
}

/* ---------- home page: small screens ---------- */

@media (max-width: 768px) {
    .hero[b-e1awlncfj3] {
        min-height: 30rem;
        padding: var(--space-lg) var(--space-md);
    }
}

/* ---------- home page: sections ---------- */

.home-section[b-e1awlncfj3] {
    padding: var(--space-xl) var(--space-lg);
}

/* slightly darker beige band, used for the rooms */
.home-section-alt[b-e1awlncfj3] {
    background-color: var(--color-bg-alt);
}

.home-inner[b-e1awlncfj3] {
    max-width: 72rem;
    margin: 0 auto;
}

.home-muted[b-e1awlncfj3] {
    color: var(--color-text-muted);
}

.home-small[b-e1awlncfj3] {
    font-size: 0.8rem;
}

.home-link[b-e1awlncfj3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

.home-link:hover[b-e1awlncfj3] {
    color: var(--color-primary-dark);
}

/* frame of the estate carousel, rounded like the cards */
.estate-photo[b-e1awlncfj3] {
    overflow: hidden;
}

/* the carousel fills the frame instead of keeping its 4:3 ratio */
.estate-photo[b-e1awlncfj3]  .carousel {
    height: 100%;
    aspect-ratio: auto;
}

/* ---------- home page: the estate ---------- */

.estate[b-e1awlncfj3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.estate-text p[b-e1awlncfj3] {
    max-width: 34rem;
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.estate-photo[b-e1awlncfj3] {
    height: 26rem;
    border-radius: var(--radius-card);
}

/* ---------- home page: rooms and reviews grid ---------- */

.card-grid[b-e1awlncfj3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.room-card[b-e1awlncfj3],
.review-card[b-e1awlncfj3] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.room-card-body[b-e1awlncfj3] {
    padding: var(--space-md);
}

.room-card-body h3[b-e1awlncfj3] {
    margin-bottom: var(--space-xs);
}

.room-card-body p[b-e1awlncfj3] {
    margin-bottom: var(--space-xs);
}

/* short text of the room, cut to 2 lines with … so the cards keep the same height */
.room-card-description[b-e1awlncfj3] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
}

/* msg when the rooms could not be loaded, same space above as the grid */
.rooms-empty[b-e1awlncfj3] {
    margin-top: var(--space-lg);
}

/* link to the other rooms under the cards, same as the link to all reviews */
.rooms-all[b-e1awlncfj3] {
    display: inline-block;
    margin-top: var(--space-lg);
}

.review-card[b-e1awlncfj3] {
    padding: var(--space-md);
}

.review-card p[b-e1awlncfj3] {
    margin-bottom: var(--space-sm);
}

.review-stars[b-e1awlncfj3] {
    margin-bottom: var(--space-sm);
    color: var(--color-gold); /* gold stars */
    letter-spacing: 0.1em;
}

.review-all[b-e1awlncfj3] {
    display: inline-block;
    margin-top: var(--space-lg);
}

/* ---------- home page: sections on small screens ---------- */

@media (max-width: 768px) {
    .home-section[b-e1awlncfj3] {
        padding: var(--space-lg) var(--space-md);
    }

    .estate[b-e1awlncfj3],
    .card-grid[b-e1awlncfj3] {
        grid-template-columns: 1fr;
    }

    .estate-photo[b-e1awlncfj3] {
        height: 16rem;
    }
}
/* /Pages/InvoiceList.razor.rz.scp.css */
/* invoice list, styled after the bill card of the settlement mockup */

.invoice-list[b-0a2fbh9dik] {
    background-color: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
}

/* small bold card title like "Bill · Booking ..." in the mockup */
.invoice-list-title[b-0a2fbh9dik] {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.invoice-list ul[b-0a2fbh9dik] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* label left, amount right, thin line between the rows */
.invoice-row[b-0a2fbh9dik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.invoice-row:last-child[b-0a2fbh9dik] {
    border-bottom: none;
}

.invoice-booking[b-0a2fbh9dik] {
    color: var(--color-text);
}

.invoice-muted[b-0a2fbh9dik] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* card + Stripe links of a paid payment */
.invoice-stripe[b-0a2fbh9dik] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.invoice-amount[b-0a2fbh9dik] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* booking number opens the booking detail */
.invoice-booking-link[b-0a2fbh9dik] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

.invoice-booking-link:hover[b-0a2fbh9dik] {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}
/* /Rates/Rates.razor.rz.scp.css */
.rate-list[b-4nrqfycyb7] {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.rate-table-scroll[b-4nrqfycyb7] {
    overflow-x: auto;
}

.rate-table[b-4nrqfycyb7] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    white-space: nowrap;
}

.rate-table th[b-4nrqfycyb7] {
    padding: 0.7rem 1rem;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rate-table td[b-4nrqfycyb7] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.875rem;
}

.rate-table tbody tr:last-child td[b-4nrqfycyb7] {
    border-bottom: 0;
}

.rate-table .rate-placeholder[b-4nrqfycyb7] {
    color: var(--color-text-muted);
}

.rate-price[b-4nrqfycyb7] {
    font-weight: 600;
}

.rate-price-before-vat[b-4nrqfycyb7] {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.rate-policy-partial[b-4nrqfycyb7] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #f2e3bd;
    color: #514326;
    font-size: 0.75rem;
    font-weight: 600;
}

.rate-policy-non[b-4nrqfycyb7] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #f2c8bd;
    color: #512a26;
    font-size: 0.75rem;
    font-weight: 600;
}

.rate-policy-fully[b-4nrqfycyb7] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #ddf2bd;
    color: #415126;
    font-size: 0.75rem;
    font-weight: 600;
}

.rate-table tbody tr.rate-inactive-row td[b-4nrqfycyb7] {
    color: var(--color-text-muted);
    background: var(--color-surface-inactive);
}

.rate-table tbody tr.rate-inactive-row td:last-child[b-4nrqfycyb7] {
    background: var(--color-surface-inactive);
}

.rate-table .rate-policy-fully[b-4nrqfycyb7],
.rate-table .rate-policy-non[b-4nrqfycyb7] {
    transition: opacity 180ms ease;
}

.rate-inactive-row .rate-policy-fully[b-4nrqfycyb7],
.rate-inactive-row .rate-policy-non[b-4nrqfycyb7] {
    opacity: 0.55;
}

.rate-switch[b-4nrqfycyb7] {
    position: relative;
    display: inline-flex;
    width: 2.2rem;
    height: 1.25rem;
    cursor: pointer;
}

.rate-switch[b-4nrqfycyb7]  input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: inherit;
    opacity: 0;
}

.rate-switch span[b-4nrqfycyb7] {
    width: 100%;
    border-radius: 999px;
    background: var(--color-control-off);
    transition: background-color 180ms ease;
}

.rate-switch span[b-4nrqfycyb7]::after {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: white;
    content: "";
    transition: transform 180ms ease;
}

.rate-switch[b-4nrqfycyb7]  input:checked + span {
    background: var(--color-primary-dark);
}

.rate-switch[b-4nrqfycyb7]  input:checked + span::after {
    transform: translateX(0.95rem);
}

.rate-switch[b-4nrqfycyb7]  input:focus-visible + span {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.rate-switch[b-4nrqfycyb7]  input:disabled + span {
    cursor: wait;
    opacity: 0.65;
}

.rate-muted[b-4nrqfycyb7] {
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.rate-count[b-4nrqfycyb7] {
    margin: 0;
    text-align: center;
}

@media (max-width: 640px) {
    .rate-table th[b-4nrqfycyb7],
    .rate-table td[b-4nrqfycyb7] {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

/* filters */
.rate-filters[b-4nrqfycyb7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rate-filter[b-4nrqfycyb7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.rate-filter select[b-4nrqfycyb7] {
    appearance: none;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.rate-filter[b-4nrqfycyb7]  select {
    appearance: none;
    width: 100%;
    height: 2.5rem;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

@media (max-width: 640px) {
    .rate-filters[b-4nrqfycyb7] {
        grid-template-columns: 1fr;
    }
}

.rate-select-wrap[b-4nrqfycyb7] {
    position: relative;
}

.rate-select-arrow[b-4nrqfycyb7] {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--color-border);
    border-bottom: 1.5px solid var(--color-border);
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 180ms ease;
}

.rate-select-wrap:focus-within .rate-select-arrow[b-4nrqfycyb7] {
    transform: translateY(-30%) rotate(225deg);
}

/* create new rate */
.rate-page-heading[b-4nrqfycyb7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rate-page-actions[b-4nrqfycyb7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rate-vat-status[b-4nrqfycyb7] {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.rate-vat-enabled[b-4nrqfycyb7] {
    color: var(--color-primary-dark);
    font-weight: 600;
}

.rate-settings-toggle[b-4nrqfycyb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--color-text);
    font-size: 0.875rem;
}

.rate-create-panel[b-4nrqfycyb7] {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.rate-create-panel h2[b-4nrqfycyb7] {
    margin-bottom: 1rem;
    font-weight: 600;
}

.rate-create-fields[b-4nrqfycyb7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rate-create-field[b-4nrqfycyb7] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.rate-date-picker[b-4nrqfycyb7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.rate-date-picker[b-4nrqfycyb7]  .drp {
    width: 100%;
    max-width: 100%;
}

.rate-date-picker[b-4nrqfycyb7]  .drp-field {
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
}

.rate-date-picker[b-4nrqfycyb7]  .drp-label {
    text-transform: none;
    letter-spacing: normal;
}

.rate-date-picker[b-4nrqfycyb7]  .drp-panel {
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
}

.rate-create-field[b-4nrqfycyb7]  input,
.rate-create-field[b-4nrqfycyb7]  select {
    appearance: none;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.rate-create-actions[b-4nrqfycyb7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .rate-create-fields[b-4nrqfycyb7] {
        grid-template-columns: 1fr;
    }
}

/* edit a rate, merged from the old rate pricing page */

/* refundable checkbox between the 2 groups of fields */
.rate-refundable[b-4nrqfycyb7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--color-text);
    font-size: 0.875rem;
}

/* refund fields under the checkbox, same grid as the create fields */
.rate-edit-panel .rate-refundable + .rate-create-fields[b-4nrqfycyb7] {
    margin-top: 1rem;
}

/* msg after a save, under the table */
.rate-success[b-4nrqfycyb7] {
    margin-top: 1rem;
}

/* small edit btn at the end of each row, ::deep since it comes from the Button component */
.rate-table[b-4nrqfycyb7]  .rate-edit-btn {
    padding: 0.25rem 0.75rem;
    height: auto;
    font-size: 0.8rem;
}

/* min nights and refund fields of the create form, same grid as the other fields */
.rate-create-policy[b-4nrqfycyb7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .rate-create-policy[b-4nrqfycyb7] {
        grid-template-columns: 1fr;
    }
}

/* ! edit column always visible, it stays on the right while the table scrolls */
.rate-table th:last-child[b-4nrqfycyb7],
.rate-table td:last-child[b-4nrqfycyb7] {
    position: sticky;
    right: 0;
    background: var(--color-surface);
}

.rate-table th:last-child[b-4nrqfycyb7] {
    background: var(--color-bg-alt);
}
/* /Rooms/Detail.razor.rz.scp.css */
/* room detail page styles, scoped to Detail.razor */

/* ---------- hero, the main photo of the room ---------- */

/* full width photo under the navbar, the name sits on it at the bottom left */
.room-hero[b-6wuuwzvr83] {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(22rem, 62vh, 38rem);
    /* olive from the theme, a bit lighter, shown while the photo loads or when there is none */
    background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-bg));
    color: var(--color-surface);
    overflow: hidden;
}

/* no photo, a lower hero so the page does not start with a big empty block */
.room-hero.is-empty[b-6wuuwzvr83] {
    min-height: 16rem;
}

/* photo fills the hero without being stretched, with a slow zoom out when the page opens */
.room-hero-photo[b-6wuuwzvr83] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: room-hero-zoom-b-6wuuwzvr83 1.6s ease-out;
}

@keyframes room-hero-zoom-b-6wuuwzvr83 {
    from {
        transform: scale(1.06);
        opacity: 0.6;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* dark veil at the bottom so the white name stays readable on light photos */
.room-hero[b-6wuuwzvr83]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-footer) 35%, transparent) 0%,
        transparent 35%,
        color-mix(in srgb, var(--color-footer) 65%, transparent) 100%);
}

/* back link, name and capacity, above the photo, same width as the .page frame */
.room-hero-content[b-6wuuwzvr83] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    /* more space on top for the back link */
    padding: 5rem var(--space-lg) var(--space-lg);
}

/* small frosted glass link at the top left, like the glass arrows of the carousel */
.room-hero-back[b-6wuuwzvr83] {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-surface) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-surface) 35%, transparent);
    backdrop-filter: blur(8px);
    color: var(--color-surface);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.room-hero-back:hover[b-6wuuwzvr83] {
    background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
    color: var(--color-surface);
}

/* label in white on the photo instead of the burgundy of the theme */
.room-hero-eyebrow[b-6wuuwzvr83] {
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

/* big serif name, white with a soft shadow */
.room-hero .room-hero-title[b-6wuuwzvr83] {
    color: var(--color-surface);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 12px color-mix(in srgb, var(--color-footer) 35%, transparent);
}

/* capacity under the name, with its icon */
.room-hero-meta[b-6wuuwzvr83] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

/* ---------- body, text and gallery on the left, stay card on the right ---------- */

/* less space on top than a normal page, the hero is right above */
.room-detail-body[b-6wuuwzvr83] {
    padding-top: var(--space-lg);
}

/* minmax(0, 1fr) so the carousel can't push the stay card out of the screen */
.room-detail-layout[b-6wuuwzvr83] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-xl);
    align-items: start;
}

/* space between the about and gallery sections */
.room-detail-section + .room-detail-section[b-6wuuwzvr83] {
    margin-top: var(--space-xl);
}

/* description in a bigger text and a readable line length, keeps the line breaks the hotel typed */
.room-detail-description[b-6wuuwzvr83] {
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    white-space: pre-line;
    /* long words or links typed by the hotel wrap instead of going out of the screen */
    overflow-wrap: anywhere;
}

/* gallery slider, rounded like the cards */
.room-detail-photos[b-6wuuwzvr83] {
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* size, bed and view in a row, wrap on small screens */
.room-detail-specs[b-6wuuwzvr83] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* icon + text, used by the characteristics and the amenities */
.room-detail-spec[b-6wuuwzvr83],
.room-detail-amenity[b-6wuuwzvr83] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.room-detail-spec i[b-6wuuwzvr83],
.room-detail-amenity i[b-6wuuwzvr83] {
    width: 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* smaller title above the amenities, inside the details section */
.room-detail-subtitle[b-6wuuwzvr83] {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: 1.25rem;
}

/* amenities in columns, as many as fit */
.room-detail-amenities[b-6wuuwzvr83] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-sm) var(--space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* occupancy line above the policies text */
.room-detail-occupancy[b-6wuuwzvr83] {
    margin-bottom: var(--space-sm);
}

/* rules of the room, same readable text as the description, keeps the line breaks the hotel typed */
.room-detail-policies[b-6wuuwzvr83] {
    max-width: 40rem;
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* empty states, softer text like the other muted details */
.room-detail-empty[b-6wuuwzvr83] {
    color: var(--color-text-muted);
}

/* ---------- stay card ---------- */

/* white card that stays visible while the guest scrolls, a bit higher than the other cards with a soft shadow */
/* margin-top pulls it over the bottom of the hero */
.room-detail-stay[b-6wuuwzvr83] {
    position: sticky;
    top: var(--space-lg);
    margin-top: -6rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-footer) 12%, transparent);
}

/* dates in the title font, the main info of the card */
.room-detail-stay-dates[b-6wuuwzvr83] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    line-height: 1.2;
}

/* nights and capacity under the dates */
.room-detail-stay-meta[b-6wuuwzvr83] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* short invitation above the btn */
.room-detail-stay-hint[b-6wuuwzvr83] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

/* ---------- phones and small tablets ---------- */

/* one column, the stay card goes under the text and is not sticky anymore */
@media (max-width: 900px) {
    /* minmax(0, 1fr) like on big screens, a plain 1fr grows with the carousel and pushes the text out of the screen */
    .room-detail-layout[b-6wuuwzvr83] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .room-detail-stay[b-6wuuwzvr83] {
        position: static;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .room-hero-content[b-6wuuwzvr83] {
        padding: 4.5rem var(--space-md) var(--space-md);
    }

    .room-hero-back[b-6wuuwzvr83] {
        top: var(--space-md);
        left: var(--space-md);
    }

    /* characteristics and amenities in 2 columns, one under the other made the list too long */
    .room-detail-specs[b-6wuuwzvr83],
    .room-detail-amenities[b-6wuuwzvr83] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-md);
    }

    /* long names wrap inside their column instead of pushing it wider */
    .room-detail-spec span[b-6wuuwzvr83],
    .room-detail-amenity span[b-6wuuwzvr83] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* no zoom for guests who asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .room-hero-photo[b-6wuuwzvr83] {
        animation: none;
    }
}
/* /Rooms/Overview.razor.rz.scp.css */
/* rooms overview page styles, scoped to Overview.razor */
/* mobile first, the base styles are for phones, the media queries at the bottom of each part add the big screens */

/* ---------- hero ---------- */

/* full width photo under the navbar, the text sits on it at the bottom */
.rooms-hero[b-86q79je11t] {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(30rem, 78vh, 44rem);
    /* olive from the theme, shown while the photo loads */
    background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-bg));
    color: var(--color-surface);
    overflow: hidden;
}

/* photo fills the hero, with a slow zoom out when the page opens like the detail page */
.rooms-hero-photo[b-86q79je11t] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: rooms-hero-zoom-b-86q79je11t 1.8s ease-out;
}

@keyframes rooms-hero-zoom-b-86q79je11t {
    from {
        transform: scale(1.08);
        opacity: 0.6;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* dark veil, stronger at the bottom so the white text stays readable */
.rooms-hero[b-86q79je11t]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-footer) 30%, transparent) 0%,
        color-mix(in srgb, var(--color-footer) 10%, transparent) 35%,
        color-mix(in srgb, var(--color-footer) 75%, transparent) 100%);
}

.rooms-hero-content[b-86q79je11t] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
}

/* label in white on the photo instead of the burgundy of the theme */
.rooms-hero-eyebrow[b-86q79je11t] {
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

.rooms-hero .rooms-hero-title[b-86q79je11t] {
    color: var(--color-surface);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 14px color-mix(in srgb, var(--color-footer) 40%, transparent);
}

/* short intro in serif italic, the luxury touch of the landing page tagline */
.rooms-hero-intro[b-86q79je11t] {
    max-width: 34rem;
    margin-bottom: var(--space-lg);
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-style: italic;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

/* main btn and anchor link, one under the other on phones */
.rooms-hero-actions[b-86q79je11t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
}

/* white text link with a thin line under it, the arrow goes down to the list */
.rooms-hero-link[b-86q79je11t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-surface) 60%, transparent);
    color: var(--color-surface);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rooms-hero-link:hover[b-86q79je11t] {
    color: var(--color-surface);
    border-bottom-color: var(--color-surface);
}

@media (min-width: 768px) {
    .rooms-hero-content[b-86q79je11t] {
        padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) + var(--space-md));
    }
}

/* ---------- welcome note ---------- */

/* white card pulled over the bottom of the hero, emblem, serif text and a short gold line in the middle */
.rooms-welcome[b-86q79je11t] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 46rem;
    margin: calc(-1 * var(--space-md)) var(--space-md) 0;
    padding: var(--space-lg) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-footer) 12%, transparent);
    text-align: center;
}

.rooms-welcome-emblem[b-86q79je11t] {
    width: 3rem;
    height: auto;
    margin-bottom: var(--space-md);
    opacity: 0.85;
}

/* serif italic like the tagline of the landing page */
.rooms-welcome-text[b-86q79je11t] {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-text);
}

.rooms-welcome-line[b-86q79je11t] {
    display: block;
    width: 3rem;
    height: 1px;
    margin-top: var(--space-md);
    background-color: var(--color-gold);
}

@media (min-width: 768px) {
    .rooms-welcome[b-86q79je11t] {
        width: calc(100% - 2 * var(--space-lg));
        margin: calc(-1 * var(--space-lg)) auto 0;
        padding: var(--space-lg) var(--space-xl);
    }

    .rooms-welcome-text[b-86q79je11t] {
        font-size: 1.45rem;
    }
}

/* ---------- sections ---------- */

.rooms-section[b-86q79je11t] {
    padding: var(--space-xl) var(--space-md);
}

/* slightly darker beige band, same as the rooms band of the landing page */
.rooms-section-alt[b-86q79je11t] {
    background-color: var(--color-bg-alt);
}

.rooms-inner[b-86q79je11t] {
    max-width: 72rem;
    margin: 0 auto;
}

/* centered title of each section with a short gold line under it */
.rooms-heading[b-86q79je11t] {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.rooms-heading h2[b-86q79je11t] {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.rooms-heading h2[b-86q79je11t]::after {
    content: "";
    display: block;
    width: 3rem;
    height: 1px;
    margin: var(--space-md) auto 0;
    background-color: var(--color-gold);
}

.rooms-muted[b-86q79je11t] {
    color: var(--color-text-muted);
}

.rooms-link[b-86q79je11t] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

.rooms-link:hover[b-86q79je11t] {
    color: var(--color-primary-dark);
}

.rooms-empty[b-86q79je11t] {
    text-align: center;
}

@media (min-width: 768px) {
    .rooms-section[b-86q79je11t] {
        padding: calc(var(--space-xl) + var(--space-lg)) var(--space-lg);
    }

    .rooms-heading[b-86q79je11t] {
        margin-bottom: var(--space-xl);
    }
}

/* ---------- showcase ---------- */

/* photo on top of the text on phones */
.rooms-feature[b-86q79je11t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
}

.rooms-feature + .rooms-feature[b-86q79je11t] {
    margin-top: var(--space-xl);
}

/* photo frame, rounded with a soft shadow */
.rooms-feature-photo[b-86q79je11t] {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-footer) 14%, transparent);
}

/* plain olive block for a room without photo */
.rooms-photo-empty[b-86q79je11t] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
    color: var(--color-primary);
    font-size: 2.5rem;
}

/* big thin gold number above the name, eg 01 */
.rooms-feature-number[b-86q79je11t] {
    display: block;
    font-family: var(--font-title);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: color-mix(in srgb, var(--color-gold) 70%, transparent);
}

.rooms-feature .rooms-feature-name[b-86q79je11t] {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* text of the room, cut after 5 lines, the full text is on the detail page */
.rooms-feature-description[b-86q79je11t] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    margin-bottom: var(--space-md);
    max-width: 32rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* capacity with its icon, between 2 thin lines */
.rooms-feature-meta[b-86q79je11t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.rooms-feature-meta li[b-86q79je11t] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rooms-feature-meta i[b-86q79je11t] {
    color: var(--color-gold);
}

.rooms-feature-actions[b-86q79je11t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
}

/* photo and text side by side, every 2nd room has the photo on the right */
@media (min-width: 900px) {
    .rooms-feature[b-86q79je11t] {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-xl);
    }

    .rooms-feature.is-reversed[b-86q79je11t] {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .rooms-feature.is-reversed .rooms-feature-photo[b-86q79je11t] {
        order: 2;
    }

    .rooms-feature + .rooms-feature[b-86q79je11t] {
        margin-top: calc(var(--space-xl) + var(--space-lg));
    }

    .rooms-feature-number[b-86q79je11t] {
        font-size: 4rem;
    }
}

/* ---------- every stay ---------- */

/* 1 column on phones, 2 on tablets, 4 on big screens */
.rooms-experience[b-86q79je11t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rooms-experience-item[b-86q79je11t] {
    padding: var(--space-lg) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-align: center;
}

/* round olive icon with a thin gold ring */
.rooms-experience-icon[b-86q79je11t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
    color: var(--color-primary);
    font-size: 1.25rem;
}

.rooms-experience-item h3[b-86q79je11t] {
    margin-bottom: var(--space-sm);
    font-size: 1.35rem;
}

.rooms-experience-item p[b-86q79je11t] {
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (min-width: 600px) {
    .rooms-experience[b-86q79je11t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .rooms-experience[b-86q79je11t] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

/* ---------- mosaic ---------- */

/* 2 columns on phones, the 1st photo takes the whole width */
.rooms-mosaic[b-86q79je11t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 9rem;
    gap: var(--space-sm);
}

.rooms-mosaic-tile[b-86q79je11t] {
    position: relative;
    display: block;
    border-radius: var(--radius-card);
    overflow: hidden;
    background-color: var(--color-border);
}

.rooms-mosaic-tile:first-child[b-86q79je11t] {
    grid-column: span 2;
    grid-row: span 2;
}

.rooms-mosaic-tile img[b-86q79je11t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* frosted glass label with the room name, like the glass arrows of the carousel */
.rooms-mosaic-label[b-86q79je11t] {
    position: absolute;
    left: var(--space-sm);
    bottom: var(--space-sm);
    max-width: calc(100% - 2 * var(--space-sm));
    padding: var(--space-xs) var(--space-sm);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-footer) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-surface) 35%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rooms-mosaic-tile:hover img[b-86q79je11t],
.rooms-mosaic-tile:focus-visible img[b-86q79je11t] {
    transform: scale(1.06);
}

/* 4 columns on big screens, the 1st photo is a big square on the left */
@media (min-width: 768px) {
    .rooms-mosaic[b-86q79je11t] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 13rem;
        gap: var(--space-md);
    }

    .rooms-mosaic-label[b-86q79je11t] {
        left: var(--space-md);
        bottom: var(--space-md);
        font-size: 0.8rem;
    }
}

/* ---------- list of all rooms ---------- */

.rooms-list[b-86q79je11t] {
    display: grid;
    gap: var(--space-md);
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* card with the photo on top on phones, the whole card is a link */
.rooms-row[b-86q79je11t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    color: var(--color-text);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.rooms-row:hover[b-86q79je11t],
.rooms-row:focus-visible[b-86q79je11t] {
    color: var(--color-text);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-gold) 45%, var(--color-border));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-footer) 12%, transparent);
}

/* photo or an olive block with a bed icon for a room without photo */
.rooms-row-photo[b-86q79je11t] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
    color: var(--color-primary);
    font-size: 1.75rem;
    overflow: hidden;
}

.rooms-row-photo img[b-86q79je11t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.rooms-row:hover .rooms-row-photo img[b-86q79je11t] {
    transform: scale(1.05);
}

.rooms-row-text[b-86q79je11t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-md) var(--space-md) 0;
}

.rooms-row-name[b-86q79je11t] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

/* 1 line of the text, the full text is on the detail page */
.rooms-row-description[b-86q79je11t] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.rooms-row-guests[b-86q79je11t] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.rooms-row-guests i[b-86q79je11t] {
    margin-right: var(--space-xs);
    color: var(--color-gold);
}

/* link under the text on phones */
.rooms-row-end[b-86q79je11t] {
    display: flex;
    align-items: center;
    padding: var(--space-md);
}

.rooms-row-more[b-86q79je11t] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.rooms-row-more i[b-86q79je11t] {
    margin-left: var(--space-xs);
    transition: transform 0.25s ease;
}

.rooms-row:hover .rooms-row-more i[b-86q79je11t] {
    transform: translateX(4px);
}

/* photo, text and link in one row on bigger screens */
@media (min-width: 768px) {
    .rooms-row[b-86q79je11t] {
        grid-template-columns: 12rem minmax(0, 1fr) auto;
        align-items: center;
    }

    /* fixed height, otherwise a portrait photo makes the row as tall as the photo */
    .rooms-row-photo[b-86q79je11t] {
        height: 9rem;
        aspect-ratio: auto;
    }

    .rooms-row-text[b-86q79je11t] {
        padding: var(--space-md) var(--space-lg);
    }

    .rooms-row-end[b-86q79je11t] {
        padding: var(--space-md) var(--space-lg);
    }
}

/* ---------- closing ---------- */

/* dark olive band, white serif title in the middle */
.rooms-closing[b-86q79je11t] {
    padding: var(--space-xl) var(--space-md);
    background-color: var(--color-primary-dark);
    color: var(--color-surface);
    text-align: center;
}

.rooms-closing-eyebrow[b-86q79je11t] {
    color: color-mix(in srgb, var(--color-surface) 75%, transparent);
}

.rooms-closing h2[b-86q79je11t] {
    margin-bottom: var(--space-sm);
    color: var(--color-surface);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.rooms-closing p[b-86q79je11t] {
    margin-bottom: var(--space-lg);
    color: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

/* white btn on the dark band */
.rooms-closing[b-86q79je11t]  .rooms-closing-cta {
    background-color: var(--color-surface);
    border-color: var(--color-surface);
    color: var(--color-primary-dark);
}

.rooms-closing[b-86q79je11t]  .rooms-closing-cta:hover {
    background-color: var(--color-bg);
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .rooms-closing[b-86q79je11t] {
        padding: calc(var(--space-xl) + var(--space-lg)) var(--space-lg);
    }
}

/* ---------- less motion ---------- */

/* no zoom or lift for guests who asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .rooms-hero-photo[b-86q79je11t] {
        animation: none;
    }

    .rooms-row[b-86q79je11t],
    .rooms-row-photo img[b-86q79je11t],
    .rooms-row-more i[b-86q79je11t],
    .rooms-mosaic-tile img[b-86q79je11t] {
        transition: none;
    }

    .rooms-row:hover[b-86q79je11t],
    .rooms-row:focus-visible[b-86q79je11t] {
        transform: none;
    }

    .rooms-row:hover .rooms-row-photo img[b-86q79je11t],
    .rooms-mosaic-tile:hover img[b-86q79je11t],
    .rooms-mosaic-tile:focus-visible img[b-86q79je11t] {
        transform: none;
    }
}
/* /RoomTypes/RoomTypes.razor.rz.scp.css */
.room-type-heading[b-pc21i4l156] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.room-type-heading .title[b-pc21i4l156] {
    margin-bottom: 0;
}

.room-type-list[b-pc21i4l156] {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.room-type-muted[b-pc21i4l156] {
    padding: var(--space-md);
    color: var(--color-text-muted);
}

.room-type-table-scroll[b-pc21i4l156] {
    overflow-x: auto;
}

.room-type-table[b-pc21i4l156] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.room-type-table th[b-pc21i4l156] {
    padding: 0.7rem 1rem;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.room-type-table td[b-pc21i4l156] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.875rem;
    vertical-align: middle;
}

.room-type-table tbody tr:last-child td[b-pc21i4l156] {
    border-bottom: 0;
}

.room-type-name[b-pc21i4l156] {
    font-weight: 600;
    white-space: nowrap;
}

.room-type-description[b-pc21i4l156] {
    min-width: 14rem;
    color: var(--color-text-muted);
}

.room-type-actions[b-pc21i4l156] {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
    white-space: nowrap;
}

.room-type-panel[b-pc21i4l156] {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.room-type-panel h3[b-pc21i4l156] {
    margin-bottom: var(--space-md);
    font-family: var(--font-title);
    font-size: 1.25rem;
}

.room-type-field[b-pc21i4l156] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.room-type-field span[b-pc21i4l156] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.room-type-field[b-pc21i4l156]  input,
.room-type-field[b-pc21i4l156]  textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
}

.room-type-form-actions[b-pc21i4l156] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
/* /Search/Results.razor.rz.scp.css */
/* results page styles, scoped to Results.razor */

/*
  cards side by side, as many as fit on the screen, each one at least 18rem wide
  on a phone only one fits so they stack, on a laptop 3 fit, no media query needed
*/
.room-list[b-tkovfzjes4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-lg);
}

/*
  2 columns on big screens, the cards take the free space and the summary keeps a fixed width
  minmax(0, 1fr) so long content can't push the summary out of the screen
*/
.results-layout[b-tkovfzjes4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--space-lg);
    align-items: start;
}

.results-main[b-tkovfzjes4] {
    min-width: 0;
}

/* ---------- recommendation card (Booking.com style) ---------- */

.recommendation-card[b-tkovfzjes4] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.recommendation-badge[b-tkovfzjes4] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.recommendation-content[b-tkovfzjes4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.recommendation-info[b-tkovfzjes4] {
    flex: 1 1 18rem;
}

.recommendation-title[b-tkovfzjes4] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--color-text);
}

.recommendation-desc[b-tkovfzjes4] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.recommendation-items[b-tkovfzjes4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.recommendation-chip[b-tkovfzjes4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
}

.recommendation-action[b-tkovfzjes4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.recommendation-price-box[b-tkovfzjes4] {
    text-align: right;
}

.recommendation-price-label[b-tkovfzjes4] {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recommendation-price[b-tkovfzjes4] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.recommendation-applied[b-tkovfzjes4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 0.4rem 0.8rem;
    background-color: rgba(30, 60, 50, 0.08);
    border-radius: var(--radius);
}

/* the summary stays visible while the guest scrolls the cards */
/* ::deep because the aside comes from the SelectionSummary child component */
.results-layout[b-tkovfzjes4]  .selection-summary {
    position: sticky;
    top: var(--space-lg);
}

/* tablets and phones, one column, the summary goes under the cards */
@media (max-width: 1024px) {
    .results-layout[b-tkovfzjes4] {
        grid-template-columns: 1fr;
    }

    .results-layout[b-tkovfzjes4]  .selection-summary {
        position: static;
    }
}

@media (max-width: 600px) {
    .recommendation-action[b-tkovfzjes4] {
        align-items: flex-start;
        width: 100%;
    }

    .recommendation-price-box[b-tkovfzjes4] {
        text-align: left;
    }
}