:root {
    --sand-50: #f7f1e7;
    --sand-100: #efe2ce;
    --sand-200: #e4d1b7;
    --sand-300: #cfb18a;
    --sand-500: #b48152;
    --forest-700: #20342d;
    --forest-600: #2b463d;
    --forest-500: #446253;
    --ink-900: #17211d;
    --ink-700: #46524d;
    --line: rgba(32, 52, 45, 0.12);
    --card: rgba(255, 250, 241, 0.92);
    --card-strong: #fffaf2;
    --shadow: 0 24px 60px rgba(28, 43, 36, 0.12);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --page-radial-warm: rgba(180, 129, 82, 0.22);
    --page-radial-cool: rgba(68, 98, 83, 0.12);
    --page-gradient-start: #f9f5ee;
    --page-gradient-end: #f3eadc;
    --hero-overlay-strong: rgba(23, 33, 29, 0.84);
    --hero-overlay-soft: rgba(23, 33, 29, 0.32);
    --hero-text: #fff8ef;
    --hero-lede: rgba(255, 248, 239, 0.82);
    --glass-line: rgba(255, 255, 255, 0.16);
    --panel-surface: rgba(255, 250, 241, 0.9);
    --field-surface: rgba(255, 255, 255, 0.72);
    --field-disabled: rgba(239, 226, 206, 0.5);
    --focus-border: rgba(68, 98, 83, 0.4);
    --focus-ring: rgba(68, 98, 83, 0.12);
    --danger: #9d3b2c;
    --button-text: #fffaf2;
    --muted-panel-start: rgba(255, 248, 240, 0.96);
    --muted-panel-end: rgba(249, 239, 225, 0.92);
    --room-media-placeholder: #ede4d6;
    --empty-border: rgba(32, 52, 45, 0.2);
    --empty-border-hover: rgba(32, 52, 45, 0.34);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", sans-serif;
    color: var(--ink-900);
    background:
        radial-gradient(circle at top left, var(--page-radial-warm), transparent 28%),
        radial-gradient(circle at 90% 20%, var(--page-radial-cool), transparent 24%),
        linear-gradient(180deg, var(--page-gradient-start) 0%, var(--page-gradient-end) 100%);
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.page-shell {
    padding-bottom: 48px;
    transition: padding-bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body:not(.booking-started) .page-shell {
    padding-bottom: 0;
}

.shell-width {
    width: min(1460px, calc(100% - 36px));
    margin: 0 auto;
}

.hero {
    position: relative;
    overflow: visible;
    padding: 30px 0 28px;
    z-index: 50;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    transition: min-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.booking-started .hero {
    min-height: 0;
    padding: 22px 0 18px;
}

.hero__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, var(--hero-overlay-strong), var(--hero-overlay-soft)),
        var(--hero-banner, url("ActivityImages/AccomBanner.jpg")) center/cover;
    transform: scale(1);
}

.hero__content {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.95fr;
    gap: 28px;
    align-items: center;
}

.hero__copy {
    color: var(--hero-text);
    padding: 54px 0 24px;
    transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.booking-started .hero__copy {
    padding: 18px 0 12px;
}

.hero__brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    transition: margin-bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.booking-started .hero__brand {
    margin-bottom: 0;
}

body.booking-started.search-collapsed .eyebrow {
    margin-bottom: 0;
}

.hero__copy .eyebrow {
    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__brand img {
    width: min(220px, 48vw);
    height: auto;
}

.eyebrow,
.panel-kicker {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.hero h1,
.section-head h2,
.search-panel h2,
.summary-card h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.hero h1 {
    max-width: 10ch;
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    overflow: hidden;
    /* Slightly looser line-height plus a touch of bottom padding so descenders
       (e.g. the "j" in "journey") are not clipped by the overflow:hidden. */
    line-height: 1.04;
    padding-bottom: 0.08em;
    max-height: 40vh;
    transition: font-size 0.6s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.booking-started .hero h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}

body.booking-started.search-collapsed .hero h1 {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.hero__lede {
    max-width: 48ch;
    margin: 18px 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--hero-lede);
    overflow: hidden;
    max-height: 240px;
    transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.booking-started.search-collapsed .hero__lede {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

@media (max-width: 760px) {
    body.booking-started.search-collapsed .hero__copy .eyebrow {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        margin: 0;
    }
}

.search-panel,
.section-card,
.summary-card__inner {
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.search-panel {
    background: rgba(255, 250, 241, 0.78);
    border-radius: var(--radius-xl);
    padding: 28px;
    color: var(--ink-900);
    position: relative;
    z-index: 40;
    overflow: visible;
    backdrop-filter: none;
    transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.search-collapsed .search-panel {
    padding: 10px;
}

/* Inline resume ("Pick up where you left off?") swap for the search panel. */
.search-panel--resume > .panel-title-row,
.search-panel--resume > .search-panel__collapsible {
    display: none;
}

.search-resume {
    display: grid;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-resume.is-active {
    opacity: 1;
    transform: translateY(0);
}

.search-resume__title {
    margin: 0;
    font-size: 1.4rem;
    color: var(--ink-900);
}

.search-resume__copy {
    margin: 0;
    color: var(--muted, #4a5a50);
}

.search-resume__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.search-panel--resume-reveal > .panel-title-row,
.search-panel--resume-reveal > .search-panel__collapsible {
    animation: search-resume-reveal 0.36s ease;
}

@keyframes search-resume-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-title-row,
.section-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.section-head--center {
    align-items: center;
}

.section-head--center > div {
    display: grid;
    gap: 4px;
}

.section-head--center .section-copy {
    margin: 0;
}

.search-panel__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    color: var(--forest-700);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.search-panel__toggle-label {
    margin-right: auto;
}

.search-panel__toggle[hidden] {
    display: none;
}

.search-panel__toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(32, 52, 45, 0.28);
}

.search-panel__toggle-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.3s ease;
    margin-top: 2px;
}

.search-panel__toggle[aria-expanded="false"] .search-panel__toggle-icon {
    transform: rotate(45deg);
    margin-top: -2px;
}

.search-panel__collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
}

.search-panel__collapsible-inner {
    overflow: visible;
    min-height: 0;
    transition-property: overflow;
    transition-duration: 0s;
    transition-delay: 0.6s;
    transition-behavior: allow-discrete;
}

body.search-collapsed .search-panel__collapsible {
    grid-template-rows: 0fr;
    opacity: 0;
}

body.search-collapsed .search-panel__collapsible-inner {
    overflow: hidden;
    transition-delay: 0s;
}

/* Intro state: before the guest opens the search panel we show only a single
   centered call-to-action button ("Start your stay" / "Plan your visit"). The
   heading row and the field collapsible are hidden/collapsed; clicking the
   button removes the body.search-intro class and the full panel expands.
   This is a MOBILE-ONLY affordance — on desktop the search card stays fully
   expanded by default, so the intro rules are gated behind the breakpoint. */
.search-panel__intro {
    display: none;
}

@media (max-width: 1080px) {
    body.search-intro .search-panel {
        padding: 18px;
    }

    body.search-intro .search-panel__intro {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        border: 0;
        border-radius: 999px;
        padding: 0;
        color: var(--forest-700);
        background: transparent;
        box-shadow: none;
        font-weight: 700;
        font-size: 0.92rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.18s ease, transform 0.18s ease;
    }

    body.search-intro .search-panel__intro:hover {
        color: var(--forest-500);
        transform: translateY(-1px);
    }

    body.search-intro .panel-title-row {
        display: none;
    }

    body.search-intro .search-panel__collapsible {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    body.search-intro .search-panel__collapsible-inner {
        overflow: hidden;
    }
}

/* While the resume ("Welcome back") prompt is shown, never show the intro
   button — the resume swap owns the panel. */
.search-panel--resume .search-panel__intro {
    display: none;
}

.status-pill {
    align-self: start;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(68, 98, 83, 0.12);
    color: var(--forest-700);
    font-size: 0.86rem;
    font-weight: 700;
}

.field-grid,
.guest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.field-grid--compact {
    margin-top: 0;
    grid-template-columns: 1fr;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field--wide {
    grid-column: 1 / -1;
}

.field--span-2 {
    grid-column: span 2;
}

.field span {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink-700);
}

.field-required-marker {
    color: var(--danger);
    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--field-surface);
    color: var(--ink-900);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

select:not(.package-picker__native):not(.flatpickr-monthDropdown-months) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 46px;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 243, 233, 0.9)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2320342d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 14px center;
    background-size: auto, 16px 16px;
    border-color: rgba(32, 52, 45, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(32, 52, 45, 0.05);
}

select:not(.package-picker__native):not(.flatpickr-monthDropdown-months):focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 14px 28px rgba(32, 52, 45, 0.08);
    transform: translateY(-1px);
}

select:not(.package-picker__native):not(.flatpickr-monthDropdown-months):disabled {
    background-image:
        linear-gradient(180deg, rgba(239, 226, 206, 0.7), rgba(239, 226, 206, 0.62)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2346524d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 14px center;
    background-size: auto, 16px 16px;
    box-shadow: none;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.nationality-trigger:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--field-disabled);
}

.flatpickr-input[readonly] {
    cursor: pointer;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring);
    transform: translateY(-1px);
}

.search-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.search-panel__footer .primary-button {
    flex-shrink: 0;
}

.search-hint,
.section-copy,
.summary-note {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.6;
}

.text-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--forest-600);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.action-link {
    text-decoration: underline;
    text-underline-offset: 0.22em;
}

.empty-state--action {
    width: 100%;
    border: 1px dashed var(--empty-border);
    background: var(--field-surface);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.empty-state--action:hover {
    transform: translateY(-1px);
    border-color: var(--empty-border-hover);
    background: rgba(255, 255, 255, 0.94);
}

.text-button--danger {
    color: var(--danger);
}

.primary-button {
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--button-text);
    background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
    box-shadow: 0 14px 28px rgba(32, 52, 45, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    white-space: nowrap;
}

.primary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(32, 52, 45, 0.24);
}

.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.primary-button:disabled[data-disabled-tooltip] {
    position: relative;
    pointer-events: auto;
}

.primary-button:disabled[data-disabled-tooltip]:hover::after {
    content: attr(data-disabled-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(23, 33, 29, 0.94);
    color: #fffaf2;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    box-shadow: 0 16px 32px rgba(23, 33, 29, 0.18);
    z-index: 20;
}

.primary-button:disabled[data-disabled-tooltip]:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(23, 33, 29, 0.94) transparent transparent transparent;
    z-index: 20;
}

.primary-button--full {
    width: 100%;
}

.main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), grid-template-columns 0.6s cubic-bezier(0.22, 1, 0.36, 1), gap 0.6s ease;
}

body:not(.booking-started) .main-layout {
    display: none;
}

.main-layout.is-visible {
    opacity: 1;
    /* Settle to no transform (not translateY(0)) so that a transform-based
       containing block is NOT created here — this lets the step's fixed bottom
       action bar pin to the viewport instead of to the main layout. */
    transform: none;
}

.content-stack {
    order: 1;
}

.summary-card {
    order: 2;
}

/* Booking summary only appears once something has been added to it. When the
   last item is removed it collapses away smoothly (mirrors the checkout slide)
   instead of disappearing instantly. */
body:not(.summary-has-items) .main-layout {
    grid-template-columns: minmax(0, 1fr) 0px;
    gap: 0;
}

body:not(.summary-has-items) .summary-card {
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    overflow: hidden;
    min-width: 0;
    max-height: 0;
}

.summary-card {
    position: sticky;
    top: 18px;
}

/* During checkout the summary slides away so the steps get the full width. */
body.checkout-active .main-layout {
    grid-template-columns: minmax(0, 1fr) 0px;
    gap: 0;
}

body.checkout-active .main-layout > .summary-card {
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    overflow: hidden;
    min-width: 0;
    max-height: 0;
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.summary-card {
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.summary-card__inner,
.section-card {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid var(--line);
}

.summary-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.summary-card__clear {
    flex-shrink: 0;
    margin-left: auto;
    padding-top: 2px;
}

.summary-section {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 16px;
}

.summary-group {
    display: grid;
    gap: 12px;
}

.summary-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-900);
    text-align: left;
}

.summary-group__toggle-copy {
    display: grid;
    gap: 4px;
}

.summary-group__toggle-copy strong {
    font-size: 0.98rem;
}

.summary-group__toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--ink-700);
}

.summary-group__count {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(32, 52, 45, 0.08);
    font-size: 0.78rem;
    font-weight: 700;
}

.summary-group__chevron {
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 220ms ease;
}

.summary-group__toggle[aria-expanded="true"] .summary-group__chevron {
    transform: rotate(225deg) translateY(-1px);
}

.summary-group__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 220ms ease, opacity 220ms ease;
}

.summary-group__panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.summary-group__panel-inner {
    overflow: hidden;
}

.summary-total {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

.summary-total div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--ink-700);
}

.summary-total strong {
    color: var(--ink-900);
}

.summary-total .grand {
    font-size: 1.05rem;
    font-weight: 800;
}

.content-stack {
    display: grid;
    gap: 24px;
}

.section-card--muted {
    background: linear-gradient(180deg, var(--muted-panel-start), var(--muted-panel-end));
}

.hidden {
    display: none !important;
}

.empty-state {
    padding: 30px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.66);
    border: 1px dashed rgba(32, 52, 45, 0.18);
    color: var(--ink-700);
    text-align: center;
}

.empty-state.compact {
    padding: 18px;
}

.room-grid,
.activity-grid {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    align-items: stretch;
}

.room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* When the guest has not added any room yet, show a more compact grid so the
   imagery is not overwhelming and more options are visible at a glance. */
.room-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* With fewer than three categories the compact grid would leave an empty
   trailing column, so center the cards while keeping each one the same width
   it would have in the full three-column layout. */
.room-grid--compact[data-count="2"] {
    grid-template-columns: repeat(2, calc((100% - 44px) / 3));
    justify-content: center;
}

.room-grid--compact[data-count="1"] {
    grid-template-columns: calc((100% - 44px) / 3);
    justify-content: center;
}

.room-grid--compact .room-media {
    aspect-ratio: 16 / 9;
}

.room-card,
.activity-card,
.quote-panel,
.activity-editor {
    background: var(--card-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.room-card {
    display: flex;
    flex-direction: column;
}

.room-card.is-selected {
    border-color: rgba(32, 52, 45, 0.35);
    box-shadow: 0 16px 34px rgba(32, 52, 45, 0.14);
}

.room-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--room-media-placeholder);
}

.room-media__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Allow both axes so a vertical swipe scrolls the page while a horizontal
       swipe still pages through the carousel (the browser direction-locks). */
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
}

.room-media__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.room-media__track.is-dragging img {
    pointer-events: none;
}

.room-media__track::-webkit-scrollbar {
    display: none;
}

.room-media__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.room-media__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.room-media__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 250, 241, 0.86);
    color: var(--forest-700);
    font-size: 1.3rem;
    z-index: 2;
}

.room-media__button[data-direction="prev"] {
    left: 14px;
}

.room-media__button[data-direction="next"] {
    right: 14px;
}

.room-media__image {
    cursor: zoom-in;
}

.room-gallery {
    display: grid;
    gap: 16px;
}

.room-details-modal {
    display: grid;
    gap: 18px;
    text-align: left;
}

.room-details-modal > p {
    margin: 0;
    color: var(--muted, #4a5a50);
    line-height: 1.55;
}

.room-gallery__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 24, 0.04);
    border-radius: 18px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.room-gallery__stage.is-dragging {
    cursor: grabbing;
}

.room-gallery__track {
    display: flex;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.room-gallery__stage.is-dragging .room-gallery__track {
    transition: none;
}

.room-gallery__slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-gallery__image {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.room-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 250, 241, 0.9);
    color: var(--forest-700);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease;
}

.room-gallery__nav:hover {
    background: rgba(255, 250, 241, 1);
}

.room-gallery__nav[data-gallery-nav="prev"] {
    left: 14px;
}

.room-gallery__nav[data-gallery-nav="next"] {
    right: 14px;
}

.room-gallery__counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(20, 28, 24, 0.62);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    z-index: 2;
}

.room-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    justify-content: center;
}

.room-gallery__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.room-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.room-gallery__thumb:hover {
    opacity: 1;
}

.room-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--forest-700);
}

.room-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    flex: 1 1 auto;
}

.room-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.room-card__header--stacked {
    align-items: start;
}

.room-card__header--stacked > div {
    display: grid;
    gap: 6px;
}

.room-card__header h3,
.activity-card h3,
.quote-panel h3,
.activity-editor h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    line-height: 0.95;
}

.room-subtitle {
    margin-top: 4px;
    font-size: 0.95rem;
    color: var(--ink-700);
}

.room-added-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(32, 52, 45, 0.08);
    color: var(--forest-700);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.room-description-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
}

.room-description-block__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 220ms ease, opacity 220ms ease;
}

.room-description-block__panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.room-description-block__panel-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 10px;
}

.detail-group {
    display: grid;
    gap: 10px;
}

.detail-group__title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--forest-600);
}

.slot-button__spots {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-700);
}

.room-card__body p,
.activity-card p,
.quote-panel p,
.activity-editor p {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.7;
}

.amenity-list,
.rule-list,
.itinerary-list,
.rate-line-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rule-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rule-list li {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239, 226, 206, 0.62);
    color: var(--forest-700);
    font-weight: 700;
    line-height: 1.45;
}

.amenity-list span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(239, 226, 206, 0.62);
}

.room-booking-modal {
    text-align: left;
}

.room-booking-modal h3,
.activity-planner h3,
.activity-modal h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.95;
}

.room-booking-modal__hero,
.activity-planner__hero,
.activity-modal__hero {
    display: grid;
    gap: 10px;
    padding: 20px 22px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(32, 52, 45, 0.92), rgba(68, 98, 83, 0.84)),
        radial-gradient(circle at top right, rgba(180, 129, 82, 0.2), transparent 40%);
    color: #fff8ef;
}

.room-booking-modal__lede,
.activity-planner__hero p,
.activity-modal__hero p {
    margin: 0;
    color: rgba(255, 248, 239, 0.82);
    line-height: 1.65;
}

.room-booking-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.room-booking-modal__meta span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 248, 239, 0.12);
    color: #fff8ef;
    font-size: 0.8rem;
    font-weight: 800;
}

.room-booking-modal__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
    gap: 18px;
    margin-top: 18px;
}

.themed-swal--room {
    padding-left: 18px;
    padding-right: 18px;
}

.room-booking-modal__grid {
    display: grid;
    gap: 16px;
    align-content: start;
}

.field-grid--modal {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-label-with-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.package-help-inline {
    color: var(--ink-700);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.themed-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.themed-select {
    position: relative;
}

.themed-select.is-open {
    z-index: 120;
}

.themed-select__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 233, 0.9));
    color: var(--ink-900);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(32, 52, 45, 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    text-align: left;
}

.themed-select__trigger:hover,
.themed-select__trigger:focus-visible,
.themed-select.is-open .themed-select__trigger {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 14px 28px rgba(32, 52, 45, 0.08);
    transform: translateY(-1px);
}

.themed-select__trigger-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.themed-select__trigger-value {
    font-weight: 700;
    color: var(--ink-900);
}

.themed-select__trigger:not(.has-value) .themed-select__trigger-value {
    color: var(--ink-700);
}

.themed-select__trigger-icon {
    color: var(--forest-600);
    font-size: 0.9rem;
    transition: transform 160ms ease;
}

.themed-select.is-open .themed-select__trigger-icon {
    transform: rotate(180deg);
}

.themed-select__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 140;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(32, 52, 45, 0.12);
    background: rgba(255, 250, 241, 0.98);
    box-shadow: 0 24px 48px rgba(23, 33, 29, 0.16);
    backdrop-filter: blur(18px);
}

.themed-select__menu[hidden] {
    display: none;
}

.themed-select__option {
    width: 100%;
    display: grid;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid rgba(32, 52, 45, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-900);
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.themed-select__option:hover:not(:disabled),
.themed-select__option:focus-visible:not(:disabled) {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(68, 98, 83, 0.24);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(32, 52, 45, 0.08);
}

.themed-select__option.is-selected {
    border-color: rgba(68, 98, 83, 0.28);
    background: rgba(239, 226, 206, 0.68);
}

.themed-select__option:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.themed-select__option-label {
    font-weight: 700;
    color: var(--ink-900);
}

.package-picker {
    position: relative;
}

.package-picker.is-open {
    z-index: 120;
}

.package-picker__native {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.package-picker__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 233, 0.9));
    color: var(--ink-900);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(32, 52, 45, 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    text-align: left;
}

.package-picker__trigger:hover,
.package-picker__trigger:focus-visible,
.package-picker.is-open .package-picker__trigger {
    outline: none;
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring), 0 14px 28px rgba(32, 52, 45, 0.08);
    transform: translateY(-1px);
}

.package-picker__trigger-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.package-picker__trigger-value {
    font-weight: 700;
    color: var(--ink-900);
}

.package-picker__trigger:not(.has-value) .package-picker__trigger-value {
    color: var(--ink-700);
}

.package-picker__trigger-icon {
    color: var(--forest-600);
    font-size: 0.9rem;
    transition: transform 160ms ease;
}

.package-picker.is-open .package-picker__trigger-icon {
    transform: rotate(180deg);
}

.package-picker__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 140;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(32, 52, 45, 0.12);
    background: rgba(255, 250, 241, 0.98);
    box-shadow: 0 24px 48px rgba(23, 33, 29, 0.16);
    backdrop-filter: blur(18px);
}

.package-picker__menu[hidden] {
    display: none;
}

.package-picker__option {
    width: 100%;
    display: grid;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid rgba(32, 52, 45, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-900);
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.package-picker__option:hover:not(:disabled),
.package-picker__option:focus-visible:not(:disabled) {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(68, 98, 83, 0.24);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(32, 52, 45, 0.08);
}

.package-picker__option.is-selected {
    border-color: rgba(68, 98, 83, 0.28);
    background: rgba(239, 226, 206, 0.68);
}

.package-picker__option:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.package-picker__option-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.package-picker__option-label {
    font-weight: 700;
    color: var(--ink-900);
}

.package-picker__option-meta {
    color: var(--ink-700);
    font-size: 0.8rem;
    line-height: 1.5;
}

.package-picker__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.1);
    flex-shrink: 0;
}

.package-picker__info i {
    font-size: 0.92rem;
}

.package-picker__info::after {
    content: attr(data-package-tooltip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    max-width: min(240px, calc(100vw - 96px));
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(23, 33, 29, 0.95);
    color: #fffaf2;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 16px 32px rgba(23, 33, 29, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    text-align: left;
}

.package-picker__info::before {
    content: "";
    position: absolute;
    right: calc(100% + 1px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(23, 33, 29, 0.95);
    opacity: 0;
    transition: opacity 160ms ease;
}

.package-picker__info:hover::after,
.package-picker__info:hover::before,
.package-picker__info:focus-visible::after,
.package-picker__info:focus-visible::before {
    opacity: 1;
}

.package-inclusions {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 250, 241, 0.78);
    border: 1px solid rgba(32, 52, 45, 0.08);
}

.package-inclusions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.package-inclusions__title {
    color: var(--forest-700);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.package-inclusions__toggle {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.package-inclusions__list {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 220ms ease, opacity 220ms ease;
}

.package-inclusions__list.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.package-inclusions__list-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 10px;
}

.package-inclusions__list span {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--forest-700);
    font-weight: 500;
    line-height: 1.7;
}

.package-inclusions--quote {
    margin-top: 16px;
    margin-bottom: 16px;
}

.package-inclusions--summary {
    margin-top: 14px;
}

.room-booking-modal__quote {
    background: rgba(255, 255, 255, 0.68);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(32, 52, 45, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.room-booking-modal__warning {
    margin-top: -6px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(185, 28, 28, 0.14);
    background: rgba(254, 242, 242, 0.96);
    color: #b91c1c;
    font-size: 0.95rem;
    font-weight: 700;
}

.extras-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(32, 52, 45, 0.08);
}

.extras-panel__head {
    display: grid;
    gap: 6px;
}

.extras-panel__head p:last-child {
    margin: 0;
    color: var(--ink-700);
}

.extras-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.extra-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 250, 241, 0.86);
    border: 1px solid rgba(32, 52, 45, 0.1);
}

.extra-card > div:first-child {
    min-width: 0;
}

.extra-card__label {
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.extra-card__controls {
    display: inline-grid;
    grid-template-columns: 44px minmax(56px, auto) 44px;
    align-items: center;
    gap: 0;
    height: 44px;
    justify-self: end;
    border: 1px solid rgba(32, 52, 45, 0.16);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.extra-card__controls:focus-within {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.extra-card input {
    width: 100%;
    height: 44px;
    min-width: 0;
    border: 0;
    border-left: 1px solid rgba(32, 52, 45, 0.12);
    border-right: 1px solid rgba(32, 52, 45, 0.12);
    border-radius: 0;
    padding: 0 8px;
    text-align: center;
    font-weight: 800;
    color: var(--ink-900);
    background: transparent;
}

.extra-qty-button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 236, 223, 0.9));
    color: var(--forest-700);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}

.extra-qty-button:hover,
.extra-qty-button:focus-visible {
    background: linear-gradient(180deg, rgba(246, 242, 233, 0.98), rgba(234, 225, 210, 0.98));
    outline: none;
}

.extra-card__controls:hover .extra-qty-button:not(:hover):not(:focus-visible) {
    box-shadow: none;
}

/* Hide native number spinners everywhere as a safety net */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Reusable +/- quantity stepper for occupancy and qty fields */
.qty-stepper {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 0;
    height: 50px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--field-surface);
}

.qty-stepper:focus-within {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.qty-stepper input {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    border-left: 1px solid rgba(32, 52, 45, 0.12);
    border-right: 1px solid rgba(32, 52, 45, 0.12);
    border-radius: 0;
    padding: 0 8px;
    text-align: center;
    font-weight: 800;
    color: var(--ink-900);
    background: transparent;
    font-size: 16px;
}

.qty-stepper input:focus {
    outline: none;
    box-shadow: none;
}

.qty-stepper__button {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 236, 223, 0.9));
    color: var(--forest-700);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qty-stepper__button:active {
    background: linear-gradient(180deg, rgba(234, 225, 210, 0.98), rgba(222, 211, 192, 0.98));
}

.qty-stepper__button:hover,
.qty-stepper__button:focus-visible {
    background: linear-gradient(180deg, rgba(246, 242, 233, 0.98), rgba(234, 225, 210, 0.98));
    outline: none;
}


.nationality-picker {
    position: relative;
}

.nationality-trigger {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 44px 14px 16px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink-900);
    position: relative;
}

.nationality-trigger::after {
    content: "\25BE";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-700);
    font-size: 0.9rem;
}

.nationality-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: fit-content;
    min-width: 100%;
    z-index: 9999;
    padding: 12px;
    border: 1px solid rgba(32, 52, 45, 0.14);
    border-radius: 18px;
    background: #fffaf2;
    box-shadow: 0 22px 40px rgba(23, 33, 29, 0.16);
    max-height: min(360px, 70vh);
    overflow: hidden;
}

.nationality-dropdown[hidden] {
    display: none;
}

.nationality-dropdown input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
}

.nationality-options {
    display: grid;
    gap: 8px;
    max-height: min(280px, calc(70vh - 72px));
    margin-top: 10px;
    padding-right: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 52, 45, 0.28) transparent;
}

.nationality-options::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.nationality-options::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.nationality-options::-webkit-scrollbar-thumb {
    background: rgba(32, 52, 45, 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.nationality-options::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 52, 45, 0.4);
    background-clip: padding-box;
}

.nationality-option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink-900);
}

.nationality-option strong {
    color: var(--forest-700);
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

.nationality-option.is-selected {
    border-color: rgba(32, 52, 45, 0.22);
    background: rgba(239, 226, 206, 0.7);
}

.nationality-empty {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink-700);
    text-align: center;
}

.room-card__footer,
.activity-editor__footer,
.itinerary-item,
.quote-row,
.slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.room-card__footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(32, 52, 45, 0.08);
}

.room-card__footer .secondary-button {
    min-width: 128px;
    text-align: center;
    justify-content: center;
}

.secondary-button,
.slot-button,
.remove-button {
    border: 1px solid rgba(32, 52, 45, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: var(--forest-700);
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 700;
    white-space: nowrap;
}

.secondary-button:disabled,
.slot-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.package-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.package-controls {
    display: grid;
    gap: 16px;
}

.package-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quote-panel {
    padding: 20px;
}

.quote-panel__kicker-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.quote-panel__rate-code {
    color: var(--ink-600);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.quote-breakdown {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.quote-row {
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.quote-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.quote-row__meta {
    display: grid;
    gap: 6px;
}

.quote-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

.quote-total div,
.itinerary-item {
    display: flex;
    justify-content: space-between;
}

.date-pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 12px;
}

.date-pill {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 220px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(32, 52, 45, 0.16);
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink-900);
    padding: 10px 14px;
    border-radius: 18px;
    font-weight: 700;
    text-align: left;
}

.date-pill small {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-700);
}

.date-pill.is-active {
    background: var(--forest-700);
    border-color: var(--forest-700);
    color: #fffaf2;
}

.date-pill.is-active small {
    color: rgba(255, 248, 239, 0.82);
}

.date-pill.is-complete {
    border-color: rgba(68, 98, 83, 0.28);
    background: rgba(68, 98, 83, 0.1);
}

.date-pill.is-active.is-complete {
    background: var(--forest-700);
    border-color: var(--forest-700);
    color: #fffaf2;
}

.date-pill.is-active.is-complete small {
    color: rgba(255, 248, 239, 0.82);
}

.date-pill-row--status {
    align-items: stretch;
}

.activity-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, border-color 240ms ease;
}

.activity-card__badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
}

.activity-card__action {
    border: 1px solid rgba(32, 52, 45, 0.16);
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--forest-700);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.activity-card__action:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(32, 52, 45, 0.32);
    box-shadow: 0 10px 22px rgba(32, 52, 45, 0.12);
}

.activity-card__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Smooth hover feel for experience and day-visitor package cards (matches the
   lift used on the rooms flow). Sold-out cards stay static. */
@media (hover: hover) {
    .activity-card:not(.is-sold-out):hover {
        transform: translateY(-4px);
        border-color: rgba(32, 52, 45, 0.28);
        box-shadow: 0 18px 38px rgba(32, 52, 45, 0.16);
    }

    .activity-card:not(.is-sold-out):hover .activity-card__media img,
    .day-visitor-package-card:hover .day-visitor-package-card__image-frame img {
        transform: scale(1.06);
    }
}

.activity-card.is-sold-out {
    background: rgba(255, 250, 241, 0.78);
    border-color: rgba(32, 52, 45, 0.08);
}

.activity-card.is-sold-out .activity-card__media img {
    filter: grayscale(1) saturate(0);
}

.activity-card__sold-out-banner {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: #b91c1c;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.activity-card__status-banner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.activity-card__status-banner--added {
    background: #15803d;
}

.activity-card__status-banner--included {
    background: var(--forest-700, #20342d);
}

.activity-card__subtle-meta {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(70, 82, 77, 0.82);
    line-height: 1.35;
}

.activity-card__subtle-meta--sold-out {
    color: rgba(70, 82, 77, 0.68);
}

.day-visitor-package-card .activity-card__body {
    justify-content: space-between;
}

.day-visitor-package-card__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 12px 0;
}

.day-visitor-package-card__image-frame {
    position: relative;
    margin: 0;
    min-height: 156px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(239, 226, 206, 0.62);
}

.day-visitor-package-card__image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.day-visitor-package-card__image-frame figcaption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(23, 33, 29, 0.72);
    color: #fff8ef;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}

.day-visitor-package-card__meta,
.day-visitor-package-card__selection {
    color: var(--ink-700);
    line-height: 1.6;
}

.day-visitor-package-card__selection {
    font-weight: 700;
}

.activity-badge {
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.activity-badge--ok {
    background: rgba(68, 98, 83, 0.12);
    color: var(--forest-700);
}

.activity-badge--bad {
    background: rgba(157, 59, 44, 0.12);
    color: #9d3b2c;
}

.activity-planner {
    display: grid;
    gap: 18px;
    text-align: left;
}

/* Cards rise in gently when the planner opens or you step back to the grid.
   Scoped to the planner shell so the day-visitor package grid (which re-renders
   on every summary change) never re-triggers the entrance. */
@keyframes activity-card-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

#activityPlannerShell .activity-grid > .activity-card {
    animation: activity-card-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#activityPlannerShell .activity-grid > .activity-card:nth-child(2) { animation-delay: 0.04s; }
#activityPlannerShell .activity-grid > .activity-card:nth-child(3) { animation-delay: 0.08s; }
#activityPlannerShell .activity-grid > .activity-card:nth-child(4) { animation-delay: 0.12s; }
#activityPlannerShell .activity-grid > .activity-card:nth-child(5) { animation-delay: 0.16s; }
#activityPlannerShell .activity-grid > .activity-card:nth-child(6) { animation-delay: 0.2s; }
#activityPlannerShell .activity-grid > .activity-card:nth-child(n + 7) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .activity-card,
    .activity-card__media img,
    .day-visitor-package-card__image-frame img {
        transition: none;
    }

    #activityPlannerShell .activity-grid > .activity-card {
        animation: none;
    }
}

.activity-planner__hero,
.activity-modal__hero {
    min-width: 0;
}

.activity-planner__hero p,
.activity-modal__hero p,
.activity-planner__hero .section-copy,
.activity-modal__hero .section-copy {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.activity-planner--dbba .activity-grid {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    gap: 14px;
}

.activity-card--compact .activity-card__media {
    aspect-ratio: 16 / 6;
    min-height: 140px;
}

.activity-card--compact .activity-card__body {
    padding: 12px;
    gap: 10px;
}

.activity-card--compact .activity-card__copy {
    gap: 6px;
}

.activity-card--compact h3 {
    font-size: 1.05rem;
    line-height: 1.15;
}

.activity-card--compact p {
    font-size: 0.8rem;
}

.activity-card--compact .activity-card__badges {
    padding-top: 10px;
}

.activity-planner--dbba .activity-card--compact .activity-card__action {
    padding: 8px 14px;
    font-size: 0.85rem;
}

.activity-planner--dbba .activity-card--compact .activity-badge {
    padding: 8px 10px;
    font-size: 0.72rem;
}

.activity-planner .date-pill-row {
    margin-top: 0;
}

.dbba-summary-card {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(32, 52, 45, 0.12);
    background: linear-gradient(180deg, rgba(246, 242, 233, 0.98), rgba(255, 255, 255, 0.98));
}

.dbba-summary-card.is-complete {
    border-color: rgba(68, 98, 83, 0.28);
    background: linear-gradient(180deg, rgba(235, 245, 239, 0.98), rgba(255, 255, 255, 0.98));
}

.dbba-summary-card.is-warning {
    border-color: rgba(157, 59, 44, 0.22);
    background: linear-gradient(180deg, rgba(252, 239, 235, 0.98), rgba(255, 255, 255, 0.98));
}

/* While configuring a specific activity (options view, "Confirm" button shown)
   the chosen-activities list is shown for reference but locked from editing. */
.dbba-summary-card.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.2);
}

.dbba-summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dbba-summary-card__header strong {
    font-size: 1rem;
}

.dbba-summary-card__header span {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-700);
}

.dbba-summary-card__list {
    display: grid;
    gap: 12px;
}

.dbba-summary-card__entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(32, 52, 45, 0.08);
}

.dbba-summary-card__entry-main {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.dbba-summary-card__entry-main strong {
    font-size: 0.96rem;
    line-height: 1.35;
}

.dbba-summary-card__entry-main span {
    font-size: 0.84rem;
    color: var(--ink-500);
}

.dbba-summary-card__entry-meta {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink-700);
    text-align: right;
    white-space: nowrap;
}

.dbba-summary-card__entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dbba-summary-card__action {
    border: 1px solid rgba(32, 52, 45, 0.18);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-700);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dbba-summary-card__action:hover {
    background: rgba(246, 242, 233, 0.95);
    border-color: rgba(32, 52, 45, 0.3);
}

.dbba-summary-card__remove {
    color: #9d3b2c;
    border-color: rgba(157, 59, 44, 0.32);
}

.dbba-summary-card__remove:hover {
    background: rgba(157, 59, 44, 0.1);
    border-color: rgba(157, 59, 44, 0.5);
}

.dbba-summary-card__empty {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(32, 52, 45, 0.18);
    font-size: 0.92rem;
    color: var(--ink-600);
}

@media (max-width: 640px) {
    .dbba-summary-card__entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .dbba-summary-card__entry-meta {
        text-align: left;
        white-space: normal;
    }

    .dbba-summary-card__entry-actions {
        width: 100%;
    }

    .dbba-summary-card__action {
        flex: 1 1 0;
        text-align: center;
    }
}

.activity-modal {
    text-align: left;
}

.activity-modal__intro,
.activity-modal__hint,
.activity-modal__total,
.activity-modal__error {
    margin: 0 0 14px;
}

.activity-modal__table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.activity-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0 14px;
}

.activity-slot-card {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(32, 52, 45, 0.12);
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.activity-slot-card input {
    margin-top: 3px;
}

.activity-slot-card__copy {
    display: grid;
    gap: 6px;
}

.activity-slot-card__copy span {
    color: var(--ink-700);
}

.activity-slot-card.is-disabled {
    opacity: 0.54;
    cursor: not-allowed;
}

.activity-modal__table {
    width: 100%;
    border-collapse: collapse;
}

.activity-modal__table th,
.activity-modal__table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.activity-modal__row {
    cursor: pointer;
}

.activity-modal__row.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.activity-modal__rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.activity-rate-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--line);
}

.activity-rate-card__head {
    display: grid;
    gap: 4px;
}

.activity-rate-card__meta {
    color: var(--ink-700);
}

.activity-rate-card__input {
    width: 100%;
    height: 44px;
    min-width: 0;
    border: 0;
    border-left: 1px solid rgba(32, 52, 45, 0.12);
    border-right: 1px solid rgba(32, 52, 45, 0.12);
    border-radius: 0;
    padding: 0 8px;
    text-align: center;
    font-weight: 800;
    color: var(--ink-900);
    background: transparent;
}

.flatpickr-calendar {
    border-radius: 20px;
    border: 1px solid rgba(32, 52, 45, 0.12);
    box-shadow: 0 26px 54px rgba(23, 33, 29, 0.2);
    background: #fffaf2;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent;
    color: var(--forest-700);
}

.flatpickr-day {
    color: var(--ink-900);
    border-radius: 12px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay {
    background: var(--forest-700) !important;
    background-color: var(--forest-700) !important;
    border-color: var(--forest-700) !important;
    color: #fffaf2 !important;
    box-shadow: none !important;
}

.flatpickr-day.inRange {
    background: rgba(180, 129, 82, 0.18) !important;
    background-color: rgba(180, 129, 82, 0.18) !important;
    border-color: rgba(180, 129, 82, 0.18) !important;
    color: var(--ink-900) !important;
    box-shadow: none !important;
}

.flatpickr-day:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:hover,
.flatpickr-day.inRange:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    box-shadow: none !important;
}

.flatpickr-day:hover {
    background: rgba(68, 98, 83, 0.12);
    border-color: rgba(68, 98, 83, 0.12);
}

.flatpickr-day.today {
    border-color: rgba(32, 52, 45, 0.3);
}

.flatpickr-day.today:hover {
    background: rgba(68, 98, 83, 0.12);
    color: var(--ink-900);
}

.activity-modal__error {
    color: #9d3b2c;
    font-weight: 700;
}

.activity-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.activity-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 210px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(180, 129, 82, 0.18), rgba(68, 98, 83, 0.1));
}

.activity-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.activity-card__body {
    display: flex;
    padding: 18px;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.activity-card__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.activity-card h3 {
    font-size: 1.7rem;
    line-height: 1;
}

.slot-list {
    display: grid;
    gap: 10px;
}

.slot-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-editor {
    margin-top: 18px;
    padding: 20px;
    display: grid;
    gap: 16px;
}

.rate-line-list {
    flex-direction: column;
}

.rate-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 120px 120px;
    gap: 12px;
    align-items: center;
}

.rate-line input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.summary-item,
.itinerary-item,
.summary-room-card,
.summary-activity-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px;
}

.summary-room-card,
.summary-activity-card {
    display: grid;
    gap: 12px;
}

.reservation-room-list {
    display: grid;
    gap: 12px;
}

.summary-room-card__header,
.summary-room-card__actions,
.summary-activity-card__header,
.summary-activity-card__footer,
.itinerary-item__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.summary-room-card__header--toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.summary-room-card__header--toggle > span:first-child {
    display: grid;
    gap: 2px;
}

.summary-room-card__chevron {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 220ms ease;
    color: var(--forest-700);
}

.summary-room-card__header--toggle[aria-expanded="true"] .summary-room-card__chevron {
    transform: rotate(225deg) translateY(-1px);
}

.summary-room-card__body:not(.summary-room-card__body--collapsible) {
    display: grid;
    gap: 12px;
}

.summary-room-card__body--collapsible {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 240ms ease, opacity 240ms ease;
}

.summary-room-card__body--collapsible.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.summary-room-card__body-inner {
    overflow: hidden;
    display: grid;
    gap: 12px;
    min-height: 0;
}

.summary-room-card__extras {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-room-card__extras span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(239, 226, 206, 0.62);
    color: var(--forest-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.summary-room-card__included {
    border: 1px solid rgba(32, 52, 45, 0.08);
    border-radius: 14px;
    background: rgba(247, 241, 231, 0.45);
    overflow: hidden;
}

.summary-room-card__included-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    color: var(--forest-700);
    background: transparent;
}

.summary-room-card__included-summary-copy {
    text-align: left;
}

.summary-room-card__included-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.summary-room-card__included-summary-meta > span:first-child {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(32, 52, 45, 0.08);
    font-size: 0.78rem;
}

.summary-room-card__included-chevron {
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 220ms ease;
}

.summary-room-card__included-summary[aria-expanded="true"] .summary-room-card__included-chevron {
    transform: rotate(225deg) translateY(-1px);
}

.summary-room-card__included-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 220ms ease, opacity 220ms ease;
}

.summary-room-card__included-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.summary-room-card__included-list {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
    overflow: hidden;
}

.summary-room-card__included-item {
    display: grid;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(32, 52, 45, 0.08);
}

.summary-room-card__included-item--empty {
    gap: 12px;
}

.summary-room-card__included-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.summary-room-card__included-meta {
    color: var(--ink-700);
    line-height: 1.55;
}

.summary-room-card__totals {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    color: var(--ink-700);
    border-top: 1px solid rgba(32, 52, 45, 0.08);
}

.summary-room-card__buttons {
    display: flex;
    gap: 12px;
}

.summary-room-card__meta {
    color: var(--ink-700);
}

.summary-activity-card__header span,
.summary-activity-card__meta,
.summary-activity-card__rates {
    color: var(--ink-700);
}

.summary-activity-card__rates {
    line-height: 1.6;
    display: grid;
    gap: 2px;
}

.summary-activity-card__footer {
    padding-top: 10px;
    border-top: 1px solid rgba(32, 52, 45, 0.08);
}

.field-grid--guest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.confirm-reservation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 20px;
    align-items: start;
}

.confirm-reservation-layout__form {
    min-width: 0;
}

.confirm-reservation-summary {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(32, 52, 45, 0.1);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.confirm-reservation-summary__header {
    display: grid;
    gap: 6px;
}

.confirm-reservation-summary__header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--ink-900);
}

.confirm-reservation-summary__header p:last-child {
    margin: 0;
    color: var(--ink-700);
    line-height: 1.55;
}

.confirm-reservation-summary__sections {
    display: grid;
    gap: 14px;
}

.summary-group--modal .summary-group__toggle {
    padding: 2px 0;
}

.confirm-reservation-summary__totals {
    margin-top: 0;
    padding-top: 16px;
}

.itinerary-list {
    flex-direction: column;
}

.itinerary-item__actions {
    align-items: center;
}

.remove-button {
    border-radius: 12px;
    padding: 8px 12px;
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    max-width: min(420px, calc(100% - 32px));
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(23, 33, 29, 0.92);
    color: #fff8ef;
    box-shadow: 0 18px 40px rgba(23, 33, 29, 0.22);
    z-index: 30;
}

.toast[data-tone="warning"] {
    background: rgba(112, 49, 26, 0.95);
}

.toast[data-tone="success"] {
    background: rgba(32, 52, 45, 0.95);
}

.themed-swal {
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(180, 129, 82, 0.14), transparent 28%),
        linear-gradient(180deg, #fffdf8 0%, #f7efe1 100%);
    box-shadow: 0 30px 80px rgba(23, 33, 29, 0.22);
    padding: 24px;
    overflow: visible !important;
}

.themed-swal__title {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.1rem, 3vw, 3rem);
    line-height: 0.95;
    text-wrap: balance;
    color: var(--ink-900);
}

.themed-swal .swal2-html-container {
    margin: 1rem 0 0;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

.themed-swal .swal2-actions {
    gap: 12px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.themed-swal--loading .swal2-html-container {
    margin-bottom: 0;
}

.themed-swal--loading .swal2-loader {
    margin: 1.5rem auto 0;
    border-color: rgba(180, 129, 82, 0.18) rgba(180, 129, 82, 0.18) rgba(180, 129, 82, 0.18) #b48152;
}

.themed-swal__validation {
    background: rgba(157, 59, 44, 0.08);
    color: #9d3b2c;
    border-radius: 14px;
}

/* ----- Inline booking step flow ----- */
.summary-card,
.search-panel,
.search-panel__toggle {
    transition: opacity 0.35s ease, filter 0.35s ease;
}

body.inline-step-open .summary-card {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.3);
    user-select: none;
}

body.inline-step-open .search-panel,
body.inline-step-open .search-panel__toggle {
    display: none !important;
}

body.inline-step-open #roomsSection,
body.inline-step-open #dayVisitorPackagesSection,
body.inline-step-open #activitiesSection,
body.inline-step-open #guestSection {
    display: none !important;
}

.inline-step-host {
    display: none;
    background: transparent;
    border: 0;
    padding: 0;
}

body.inline-step-open .inline-step-host {
    display: block;
}

.inline-step {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    animation: inline-step-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Inline booking steps live on the page, so drop the modal background/shadow. */
.inline-step.themed-swal {
    background: transparent;
    box-shadow: none;
}

.inline-step.is-leaving {
    animation: inline-step-out 0.28s ease forwards;
}

@keyframes inline-step-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes inline-step-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Inline host loading card */
.inline-step__loading {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 4px;
}

.inline-step__loading-text {
    display: grid;
    gap: 4px;
}

.inline-step__loading-text strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    color: var(--ink-900);
    line-height: 1;
}

.inline-step__loading-text span {
    color: var(--ink-700);
    font-size: 0.95rem;
}

.inline-step__spinner {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid rgba(180, 129, 82, 0.18);
    border-left-color: #b48152;
    animation: inline-step-spin 0.8s linear infinite;
}

@keyframes inline-step-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sections fade back in smoothly when the inline flow closes */
.content-stack > #roomsSection,
.content-stack > #dayVisitorPackagesSection,
.content-stack > #activitiesSection {
    animation: section-fade-in 0.4s ease;
}

@keyframes section-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inline-step__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.inline-step__title {
    margin: 0;
}

.inline-step__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-700);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.inline-step__close:hover {
    background: var(--ink-900);
    color: #fff8ef;
}

.inline-step__head-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.inline-step__head-btn {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-700);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.inline-step__head-btn--skip:hover {
    background: var(--forest-700, #20342d);
    color: #fff8ef;
    border-color: transparent;
}

.inline-step__head-btn--cancel {
    color: var(--danger-600, #b3261e);
    border-color: rgba(179, 38, 30, 0.32);
}

.inline-step__head-btn--cancel:hover {
    background: rgba(179, 38, 30, 0.12);
    border-color: rgba(179, 38, 30, 0.5);
}

.inline-step__head-btn--confirm {
    background: var(--forest-700, #20342d);
    border-color: transparent;
    color: #fff8ef;
}

.inline-step__head-btn--confirm:hover {
    background: #16241f;
}

/* The header "Continue" is a desktop convenience for long steps; on mobile the
   sticky bottom action bar already carries the primary action, so hide it to
   avoid a duplicate control. */
@media (max-width: 760px) {
    .inline-step__head-btn--confirm {
        display: none;
    }
}

.inline-step .swal2-html-container,
.inline-step__body {
    margin: 16px 0 0;
    max-height: none !important;
    overflow: visible !important;
}

.inline-step__validation {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 0.9rem;
}

.inline-step__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}

.inline-step__deny {
    margin-right: auto;
}

/* Action row for the activities planner "View options" screen (Cancel / Back /
   Add to itinerary). Wraps instead of overflowing on narrow screens. */
.activity-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.booking-stepper {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 16px 20px;
}

.booking-stepper__list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.booking-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.booking-stepper__dot {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--line);
    color: var(--ink-700);
    background: var(--card);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.booking-stepper__label {
    font-weight: 600;
    color: var(--ink-700);
    font-size: 0.92rem;
    transition: color 0.25s ease;
}

.booking-stepper__item.is-current .booking-stepper__dot {
    background: var(--ink-900);
    color: #fff8ef;
    border-color: var(--ink-900);
}

.booking-stepper__item.is-current .booking-stepper__label {
    color: var(--ink-900);
}

.booking-stepper__item.is-done .booking-stepper__dot {
    background: rgba(32, 52, 45, 0.92);
    color: #fff8ef;
    border-color: rgba(32, 52, 45, 0.92);
}

.booking-stepper__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    border-radius: 999px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.booking-stepper__btn:hover {
    transform: translateY(-1px);
}

.booking-stepper__btn:hover .booking-stepper__dot {
    border-color: var(--ink-900);
}

.booking-stepper__btn:hover .booking-stepper__label {
    color: var(--ink-900);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.booking-stepper__btn:focus-visible {
    outline: 2px solid var(--ink-900);
    outline-offset: 3px;
}

.booking-stepper__sep {
    flex: 1 1 18px;
    min-width: 14px;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
}

@media (max-width: 760px) {
    /* The full horizontal stepper does not fit on a phone, so turn it into a
       compact horizontal scroller spanning the full screen width, flush under
       the hero banner, with a solid background and hidden scrollbar. It sticks
       to the top of the viewport so it stays in reach while the step scrolls.
       JS keeps the current step centred as the flow advances. */
    .main-layout {
        margin-top: 16px;
    }

    /* During a booking flow the sticky stepper is the first element, so the
       layout sits flush against the hero banner. Outside a flow the rooms
       section ("Choose your room") leads and keeps its breathing room above. */
    body.booking-flow-active .main-layout {
        margin-top: 0;
    }

    .content-stack {
        gap: 16px;
    }

    .booking-stepper {
        position: sticky;
        top: 0;
        z-index: 30;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0;
        background: var(--card-strong);
        padding: 10px 18px 12px;
        overflow-x: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .booking-stepper::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .booking-stepper__list {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        width: max-content;
    }

    .booking-stepper__item {
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        flex: 0 0 auto;
    }

    .booking-stepper__btn {
        justify-content: flex-start;
        white-space: nowrap;
    }

    .booking-stepper__label {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* Short horizontal connectors between steps. */
    .booking-stepper__sep {
        flex: 0 0 auto;
        width: 16px;
        min-width: 16px;
        height: 2px;
        align-self: center;
    }

    /* Step action buttons (Back / Cancel / Skip / Continue) become a full-width
       bar fixed to the very bottom of the viewport so they are always visible
       and never cut off, regardless of how tall (or short) the step content is.
       This works because the main layout no longer creates a transform
       containing block once it has settled into view. Buttons share the row
       evenly so two or three of them stay neatly on one line. */
    .inline-step__actions,
    .activity-modal__actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: 100%;
        margin: 0;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: stretch;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--page-gradient-end);
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 24px rgba(28, 43, 36, 0.1);
        animation: action-bar-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes action-bar-rise {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .inline-step__actions > *,
    .activity-modal__actions > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        margin: 0;
        padding: 11px 14px;
        white-space: nowrap;
    }

    /* Reserve space at the bottom of the step content so its last elements are
       not hidden behind the fixed action bar. */
    .inline-step {
        padding-bottom: 88px;
    }

    body.inline-step-open .page-shell {
        padding-bottom: 0;
    }

    /* Lift the floating "View itinerary" shortcut above the fixed action bar
       while a step is open so it does not sit on top of the buttons. */
    body.inline-step-open .view-itinerary-fab {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .inline-step .themed-select__menu {
        position: static;
        margin-top: 10px;
        max-height: none;
    }
}


#confirmButton {
    margin: 24px 0 20px;
}

/* Mobile-only floating "View itinerary" shortcut. It is hidden on desktop and
   only revealed (via .is-visible, toggled in app.js) when the booking summary
   is off-screen, there are items to view, and checkout is not active. */
.view-itinerary-fab {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(14px);
    z-index: 60;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    color: var(--button-text);
    background: linear-gradient(135deg, var(--forest-700), var(--forest-500));
    font-weight: 800;
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 36px rgba(32, 52, 45, 0.34);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.3s ease;
}

.view-itinerary-fab__icon {
    width: 11px;
    height: 11px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-top: -3px;
}

/* Sticky "Confirm reservation" bar: pinned to the bottom of the viewport while
   the real confirm button (at the foot of the summary card) is scrolled out of
   view, so the guest can always finalise. It hides itself once that button is
   on screen, and whenever a stepping process is running. */
.sticky-confirm {
    /* Mobile-only affordance: hidden on desktop, enabled inside the
       max-width: 1080px breakpoint (same gate as the View itinerary FAB). */
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--page-gradient-end);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px rgba(28, 43, 36, 0.12);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.sticky-confirm.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-confirm .primary-button {
    margin: 0;
}

/* While a stepper sequence is running (booking flow / inline step) the summary
   card's "Confirm reservation" button is hidden so it can't be used mid-flow and
   doesn't compete with the step's own action bar. */
body.booking-flow-active #confirmButton,
body.inline-step-open #confirmButton {
    display: none;
}

/* In the activities options view the bottom action bar (Cancel / Back / Add to
   itinerary) handles all actions, so the Skip / Cancel / Close controls next to
   the step heading are redundant and removed there. */
.inline-step.is-activity-options .inline-step__head-actions,
.inline-step.is-activity-options [data-inline-close] {
    display: none;
}

@media (max-width: 1080px) {
    .hero__content,
    .main-layout,
    .package-layout {
        grid-template-columns: 1fr;
    }

    .room-booking-modal__layout {
        grid-template-columns: 1fr;
    }

    .summary-card {
        position: static;
    }

    /* On mobile the logo is left-aligned while the search panel is expanded
       ("Modify search"), and slides to centered when the search is hidden
       ("Hide search"). padding-left is animatable (justify-content is not), so
       this transitions smoothly. (100% - logo width) / 2 = exact centre. */
    .hero__brand {
        --logo-w: min(220px, 48vw);
        display: flex;
        width: 100%;
        padding-left: 0;
        transition: padding-left 0.6s cubic-bezier(0.22, 1, 0.36, 1), margin-bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hero__brand img {
        width: var(--logo-w);
    }

    body.search-collapsed .hero__brand {
        padding-left: calc((100% - var(--logo-w)) / 2);
    }

    .view-itinerary-fab {
        display: inline-flex;
    }

    .view-itinerary-fab.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .sticky-confirm {
        display: block;
    }

    .room-grid,
    .room-grid--compact[data-count="2"],
    .room-grid--compact[data-count="1"] {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .confirm-reservation-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .shell-width {
        width: min(100% - 24px, 1280px);
    }

    .qty-stepper {
        grid-template-columns: 56px minmax(0, 1fr) 56px;
        height: 56px;
    }

    .qty-stepper__button {
        font-size: 1.4rem;
    }

    .hero {
        padding-top: 12px;
    }

    .hero__copy {
        padding-top: 32px;
    }

    .field-grid,
    .guest-grid,
    .rate-line,
    .field-grid--modal {
        grid-template-columns: 1fr;
    }

    /* On phones every field stacks in its own row. The "Dates" field normally
       spans 2 columns, but in a single-column grid that would create a stray
       implicit second column (pushing the other inputs into a broken 2-per-row
       layout), so it must span the single column only. */
    .field--span-2 {
        grid-column: 1 / -1;
    }

    .rule-list,
    .activity-modal__rates,
    .activity-slot-grid {
        grid-template-columns: 1fr;
    }

    .search-panel,
    .section-card,
    .summary-card__inner {
        padding: 18px;
    }

    .search-panel__footer,
    .room-card__footer,
    .activity-editor__footer,
    .panel-title-row,
    .section-head,
    .slot-row,
    .itinerary-item,
    .quote-row,
    .summary-room-card__header,
    .summary-room-card__actions,
    .summary-room-card__totals,
    .itinerary-item__actions,
    .package-actions,
    .activity-card__badges {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-room-card__buttons {
        justify-content: space-between;
    }

    /* "Start your stay" kicker follows the same alignment logic as the logo:
       left-aligned while the search panel is expanded ("Hide search"), centred
       when collapsed ("Modify search"). Here the panel title row stacks, so the
       kicker's wrapper is full width and a fit-content box can be slid to centre
       with left + translateX — both animatable, so the realign is smooth.
       Scoped to the search panel so the "Booking summary" kicker is unaffected. */
    .search-panel .panel-kicker {
        position: relative;
        width: fit-content;
        left: 0;
        transform: translateX(0);
        transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body.search-collapsed .search-panel .panel-kicker {
        left: 50%;
        transform: translateX(-50%);
    }

    /* The collapsible room dropdown must keep its chevron beside the text even
       though the non-toggle header stacks its action buttons on mobile. */
    .summary-room-card__header--toggle {
        flex-direction: row;
        align-items: center;
    }

    .room-gallery__nav {
        display: none;
    }

    .activity-card__badges {
        align-items: center;
    }

    .themed-swal--room {
        padding-left: 14px;
        padding-right: 14px;
    }

    .themed-swal .swal2-html-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 62vh;
        -webkit-overflow-scrolling: touch;
    }

    .extra-card {
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: left;
    }

    .date-pill-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: safe center;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        margin-bottom: 14px;
        scroll-padding-inline: 22px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .date-pill-row::-webkit-scrollbar {
        height: 6px;
    }

    .date-pill-row::-webkit-scrollbar-thumb {
        background: rgba(32, 52, 45, 0.18);
        border-radius: 999px;
    }

    .date-pill {
        flex: 0 0 132px;
        max-width: none;
        scroll-snap-align: start;
    }

    .extra-card__controls {
        justify-self: stretch;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .activity-planner__hero .section-copy,
    .activity-modal__hero .section-copy {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .activity-planner__hero .panel-kicker,
    .activity-modal__hero .panel-kicker,
    .extra-card__label {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .activity-card h3 {
        font-size: 1.3rem;
        line-height: 1.15;
    }

    .activity-card__copy p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    .activity-planner--dbba .activity-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
}

@media (max-width: 480px) {
    .themed-swal__title {
        font-size: 1.72rem;
    }

    .date-pill-row {
        gap: 8px;
        scroll-padding-inline: 16px;
    }

    .date-pill {
        flex-basis: 124px;
    }

    .activity-card h3 {
        font-size: 1.18rem;
    }
}

/* Landscape phones: the viewport is wide but very short. Centering the logo
   while "PLAN • BOOK • EXPLORE" stays left looks unbalanced, and a single room
   column wastes the available width. Left-align the brand/kicker and show two
   room cards. Keyed on short height so tablet/desktop landscape is unaffected. */
@media (max-width: 1080px) and (orientation: landscape) and (max-height: 600px) {
    .hero__brand,
    body.search-collapsed .hero__brand {
        padding-left: 0;
    }

    /* The viewport is very short here, so the default `max-height: 40vh` clips
       the multi-line title (descenders cut off at the bottom). Let the heading
       size to its content with a smaller font and remove the height cap. */
    .hero h1 {
        font-size: clamp(2.2rem, 4.6vw, 3.4rem);
        max-height: none;
        overflow: visible;
    }

    .hero__lede {
        max-height: none;
        overflow: visible;
    }

    .room-grid,
    .room-grid--compact[data-count="2"],
    .room-grid--compact[data-count="1"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }
}