/* Shared guest design, evolved from the homepage. */
:root {
    --container: 1200px;
    --color-surface-page: #f8f6f7;
    --color-surface-default: #fdfcfd;
    --color-surface-subtle: #f3e8ee;
    --color-text-primary: #302730;
    --color-text-muted: #6e626a;
    --color-border-default: #e4dbe0;
    --color-accent: var(--color-action-primary);
    --soft: #f1edef;
    --home-soft: var(--soft);
    --text: var(--ink);
    --on-action: #fdfcfd;
    --home-action: #8e174f;
    --home-action-hover: #6e103c;
    --home-on-action: #fdfcfd;
    --home-shadow: 0 12px 36px rgb(75 36 55 / 7%);
    --home-error: #a5232d;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    color-scheme: light;
}
:root[data-home-theme="dark"] {
    --color-surface-page: #1c181c;
    --color-surface-default: #262026;
    --color-surface-subtle: #392735;
    --color-text-primary: #f2eaf0;
    --color-text-muted: #bdafba;
    --color-border-default: #493b46;
    --color-action-primary: #efa3c7;
    --color-action-primary-hover: #f8bfd9;
    --color-action-primary-active: #fcd4e6;
    --color-focus-ring: #efa3c7;
    --soft: #2c252c;
        --home-soft: var(--soft);
        --color-success-text: #a1d5b9;
        --color-success-surface: #223a2e;
        --color-success-border: #476c57;
        --color-warning-text: #eac586;
        --color-warning-surface: #3a3022;
        --color-warning-border: #716044;
        --color-danger-text: #ffb3bc;
        --color-danger-surface: #41272d;
        --color-danger-border: #80545c;
        --color-info-text: #aad2e9;
        --color-info-surface: #253440;
        --color-info-border: #4f7188;
        --color-disabled-surface: #393139;
        --color-disabled-text: #a394a0;
    --home-shadow: 0 12px 36px rgb(12 8 11 / 16%);
    --home-error: #ffb3bc;
    color-scheme: dark;
}
/* Native system fallback if scripting is disabled. */
@media (prefers-color-scheme: dark) {
    :root:not([data-home-theme]) {
        --color-surface-page: #1c181c;
        --color-surface-default: #262026;
        --color-surface-subtle: #392735;
        --color-text-primary: #f2eaf0;
        --color-text-muted: #bdafba;
        --color-border-default: #493b46;
        --color-action-primary: #efa3c7;
        --color-action-primary-hover: #f8bfd9;
        --color-action-primary-active: #fcd4e6;
        --color-focus-ring: #efa3c7;
        --soft: #2c252c;
        --home-soft: var(--soft);
        --color-success-text: #a1d5b9;
        --color-success-surface: #223a2e;
        --color-success-border: #476c57;
        --color-warning-text: #eac586;
        --color-warning-surface: #3a3022;
        --color-warning-border: #716044;
        --color-danger-text: #ffb3bc;
        --color-danger-surface: #41272d;
        --color-danger-border: #80545c;
        --color-info-text: #aad2e9;
        --color-info-surface: #253440;
        --color-info-border: #4f7188;
        --color-disabled-surface: #393139;
        --color-disabled-text: #a394a0;
        --home-shadow: 0 12px 36px rgb(12 8 11 / 16%);
        --home-error: #ffb3bc;
        color-scheme: dark;
    }
}
body.guest-body .guest-header {background: var(--surface); border-color: var(--border); box-shadow: none; backdrop-filter: none}
.guest-body .guest-header__inner {height: 76px; gap: 20px}
.guest-body .guest-nav {border: 0; background: transparent; padding: 0; gap: 4px}
.guest-body .guest-nav a {color: var(--muted); padding-inline: 12px; font-size: .875rem}
.guest-body .guest-nav a:hover {color: var(--brand); background: var(--tint)}
.guest-body .guest-header__login {min-height: 44px; background: var(--surface); border-color: var(--border); border-radius: 12px}
.guest-body .guest-header__login > span {background: var(--home-action); color: var(--home-on-action); border-radius: 8px; width: 30px; height: 30px}
.guest-body .guest-header__login b {display: block}
.guest-body .guest-header__support {min-height: 44px; color: var(--muted)}
.home-theme-toggle {display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); cursor: pointer}
.home-theme-toggle .ui-icon {width: 20px; height: 20px; animation: theme-icon-in .5s cubic-bezier(.34, 1.4, .64, 1) backwards}
@keyframes theme-icon-in {from {opacity: 0; rotate: -90deg; scale: .5}}
.home-theme-toggle:hover {color: var(--brand); border-color: var(--brand)}
.guest-body .guest-user-menu summary, .guest-body .guest-user-menu__panel {background: var(--surface); border-color: var(--border); color: var(--ink)}
.guest-body .guest-user-menu__identity {background: var(--home-soft); border-color: var(--border)}
.guest-body .guest-user-menu__panel a, .guest-body .guest-user-menu__logout {color: var(--ink)}
.guest-body .guest-user-menu__identity small, .guest-body .guest-user-menu summary small {color: var(--muted)}
.guest-body .guest-user-menu__panel a:hover, .guest-body .guest-user-menu__logout:hover {background: var(--tint); color: var(--brand)}
.guest-body .button {border-radius: 12px; background: var(--home-action); color: var(--home-on-action); border-color: var(--home-action); white-space: nowrap; box-shadow: none}
.guest-body .button:hover {background: var(--home-action-hover); color: var(--home-on-action); box-shadow: none}
.guest-body .button:active, .home-theme-toggle:active {transform: scale(.98)}
.guest-body .button--light, .guest-body .button--quiet {background: var(--surface); color: var(--brand); border-color: var(--border)}
.guest-body .button--light:hover, .guest-body .button--quiet:hover {background: var(--tint); color: var(--brand-dark)}
.guest-body .guest-footer {background: var(--home-soft); color: var(--ink); border-top: 1px solid var(--border); padding-top: 48px}
.guest-body .guest-footer__brand p, .guest-body .guest-footer__grid a {color: var(--muted)}
.guest-body .guest-footer h2 {color: var(--ink); font-size: 1rem}
.guest-body .guest-footer__grid a:hover {color: var(--brand)}
.guest-body .guest-footer__bottom {border-color: var(--border); color: var(--muted)}
.guest-body .brand-lockup--light {color: var(--ink)}
.guest-body .brand-lockup--light img {filter: none}
:root[data-home-theme="dark"] .guest-body .brand-mark {filter: brightness(1.9) saturate(.7)}


/* One shared guest shell across browsing, help and reservation pages. */
body.guest-body {background: var(--canvas); color: var(--ink)}
.guest-body .guest-container {width: min(calc(100% - 48px), var(--container))}
.guest-body .guest-card {background: var(--surface); border-color: var(--border); box-shadow: none}
.guest-body .button {min-height: 48px; font-size: .9375rem}
.guest-body .button:disabled {background: var(--color-disabled-surface); border-color: var(--color-disabled-surface); color: var(--color-disabled-text); opacity: 1}
.guest-body :where(a, button, input, select, textarea, summary):focus-visible {outline: 2px solid var(--brand); outline-offset: 3px}
.guest-body .context-bar {background: var(--canvas)}
.guest-body .context-bar__inner {min-height: 54px}
.guest-body .context-bar__back {font-size: .875rem}
.guest-body .context-bar__title {color: var(--muted); font-size: .8125rem; font-weight: 500}
.guest-body .eyebrow:before {display: none}
.guest-body .mobile-guest-nav {background: var(--surface); border-color: var(--border); backdrop-filter: none}
.guest-body .mobile-guest-nav :is(a, button) {color: var(--muted)}
.guest-body .mobile-guest-nav [aria-current="page"] {color: var(--brand); background: var(--tint)}
@media(max-width:1100px) {
    .guest-body .guest-header__support {display: none}
    .guest-body .guest-header__inner {gap: 12px}
    .guest-body .guest-nav a {padding-inline: 10px}
}
@media(max-width:900px) {
    .guest-body .guest-nav {background: var(--surface); border-color: var(--border)}
    .guest-body .guest-header__login {width: auto}
    .guest-body .guest-header__login b {display: block}
}
@media(max-width:767px) {
    .guest-body .guest-container {width: calc(100% - 32px)}
    body.guest-body .guest-header__inner {height: 64px; gap: 8px}
    .guest-body .guest-header__actions {gap: 8px; margin-inline-start: auto}
    .guest-body .guest-header__login {width: auto; min-height: 44px; padding: 5px 10px; font-size: .75rem}
    .guest-body .guest-header__login > span {display: none}
    .guest-body .guest-header__login-extra {display: none}
    .guest-body .guest-menu-button {width: 36px; height: 44px; margin: 0; flex: 0 0 36px; color: var(--ink)}
    .guest-body .context-bar__inner {gap: 12px}
    .guest-body .guest-footer__grid a {font-size: .875rem; padding-block: 5px}
}
@media(max-width:360px) {
    .guest-body .guest-header__inner {gap: 4px}
    .guest-body .guest-header__actions {gap: 4px}
    .guest-body .brand-name {font-size: .9rem}
    .guest-body .brand-mark {width: 23px; height: 23px}
    .guest-body .guest-header__login {padding-inline: 7px}
}
@media(prefers-reduced-motion:reduce) {
    .guest-body *, .guest-body *:before, .guest-body *:after {scroll-behavior: auto; transition: none !important; animation: none !important}
}

.guest-body .mobile-guest-nav :is(a, button) {font-size: .75rem}

/* ==========================================================================
   Guest design system v3: soft depth, generous rhythm, one set of tokens for
   every guest page. Page styles build on these instead of redefining them.
   ========================================================================== */
:root {
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --elev-1: 0 1px 2px rgb(52 24 38 / 5%), 0 2px 8px rgb(52 24 38 / 4%);
    --elev-2: 0 2px 6px rgb(52 24 38 / 5%), 0 12px 32px rgb(52 24 38 / 8%);
    --elev-3: 0 6px 16px rgb(52 24 38 / 8%), 0 28px 70px rgb(52 24 38 / 16%);
    --section-space: clamp(48px, 7vw, 96px);
    --ink-strong: #1f1419;
    --brand-glow: rgb(142 23 79 / 12%);
    --footer-bg: #21161c;
}
:root[data-home-theme="dark"] {
    --elev-1: 0 1px 2px rgb(0 0 0 / 30%);
    --elev-2: 0 2px 6px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 30%);
    --elev-3: 0 6px 16px rgb(0 0 0 / 35%), 0 28px 70px rgb(0 0 0 / 45%);
    --ink-strong: #fbf4f8;
    --brand-glow: rgb(239 163 199 / 14%);
    --footer-bg: #141013;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-home-theme]) {--ink-strong: #fbf4f8; --footer-bg: #141013}
}

/* Typography rhythm */
.guest-body h1, .guest-body h2, .guest-body h3 {color: var(--ink-strong); letter-spacing: 0; text-wrap: balance}
.guest-body .section-heading h2 {font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.55; margin: 0 0 6px}
.guest-body .section-heading p {color: var(--muted); font-size: .9375rem; line-height: 1.9; margin: 0}
.guest-body .eyebrow {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--brand); font-size: .8125rem; font-weight: 600}
.guest-body .eyebrow::after {content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5}
.guest-body .numeric, .guest-body [data-numeric] {font-variant-numeric: tabular-nums}

/* Header */
body.guest-body .guest-header {background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px)}
.guest-body .guest-header__inner {height: 72px}
.guest-body .guest-nav {gap: 2px}
.guest-body .guest-nav a {position: relative; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); font-weight: 500}
.guest-body .guest-header__actions {gap: 8px}
.guest-body .guest-header__host {display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--ink); font-size: .875rem; font-weight: 600; white-space: nowrap; transition: background-color .2s ease, color .2s ease}
.guest-body .guest-header__host:hover {background: var(--tint); color: var(--brand)}
.guest-body .guest-header__support {border-radius: var(--radius-pill); padding-inline: 12px}
.guest-body .guest-header__login {min-height: 44px; padding: 4px 6px 4px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); box-shadow: var(--elev-1); font-size: .8125rem}
.guest-body .guest-header__login:hover {border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--surface); box-shadow: var(--elev-2)}
.guest-body .guest-header__login > span {width: 34px; height: 34px; border-radius: 50%; background: var(--home-action); color: var(--home-on-action)}
.guest-body .home-theme-toggle {border-radius: 50%; box-shadow: var(--elev-1)}
.guest-body .guest-user-menu summary {border-radius: var(--radius-pill); border-color: var(--border); box-shadow: var(--elev-1)}
.guest-body .guest-user-menu summary img {border-radius: 50%}
.guest-body .guest-user-menu__panel {border-radius: var(--radius-lg); box-shadow: var(--elev-3); padding: 8px}
.guest-body .guest-user-menu__panel a, .guest-body .guest-user-menu__logout {border-radius: var(--radius-sm)}

/* Buttons and chips */
.guest-body .button {border-radius: var(--radius-pill); padding-inline: 24px; font-weight: 600; letter-spacing: 0}
.guest-body .button--light, .guest-body .button--quiet {box-shadow: var(--elev-1)}
.guest-body .chip, .guest-body .pill {border-radius: var(--radius-pill)}

/* Cards share one depth and radius scale */
.guest-body .guest-card {border-radius: var(--radius-lg); box-shadow: var(--elev-1)}

/* Context bar under the header on inner pages */
.guest-body .context-bar {border-bottom: 1px solid var(--border); background: var(--surface)}
.guest-body .context-bar__back {display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; margin-inline-start: -12px; border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; transition: background-color .2s ease}
.guest-body .context-bar__back:hover {background: var(--tint); color: var(--brand)}

/* Footer: a calm dark base that closes every page */
.guest-body .guest-footer {background: var(--footer-bg); color: #efe4ea; border-top: 0; padding: 64px 0 28px}
.guest-body .guest-footer__grid {grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px}
.guest-body .guest-footer h2 {color: #fff; font-size: .9375rem; margin-bottom: 14px}
.guest-body .guest-footer__brand p, .guest-body .guest-footer__grid a {color: #c9b8c1}
.guest-body .guest-footer__grid a {display: inline-flex; align-items: center; min-height: 32px; font-size: .875rem; transition: color .2s ease}
.guest-body .guest-footer__grid a:hover {color: #fff}
.guest-body .guest-footer__bottom {border-top: 1px solid rgb(255 255 255 / 10%); color: #a8949e}
.guest-body .guest-footer .brand-lockup--light {color: #fff}
.guest-body .guest-footer .brand-lockup--light :is(.brand-mark, .brand-wordmark) {filter: brightness(0) invert(1)}
.guest-body .guest-footer__support {display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px 10px 12px; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 5%); color: #fff !important}
.guest-body .guest-footer__support span:first-child {display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / 10%)}
.guest-body .guest-footer__support .ui-icon {width: 18px; height: 18px}
.guest-body .guest-footer__support small {display: block; color: #c9b8c1; font-size: .75rem}
.guest-body .guest-footer__support b {font-size: 1rem; font-variant-numeric: tabular-nums}

/* Mobile tab bar: floating, rounded, readable */
@media (max-width: 650px) {
    .guest-body .mobile-guest-nav {left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--elev-3); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px)}
    .guest-body .mobile-guest-nav :is(a, button) {min-height: 52px; border-radius: 16px; font-size: .6875rem}
    .guest-body .mobile-guest-nav [aria-current="page"]::before {display: none}
    body.guest-home, body.guest-search-results {padding-bottom: calc(84px + env(safe-area-inset-bottom))}
}

@media (max-width: 1100px) {
    .guest-body .guest-header__host {display: none}
}
@media (max-width: 900px) {
    .guest-body .guest-footer__grid {grid-template-columns: 1fr 1fr; gap: 32px 20px}
    .guest-body .guest-footer__brand {grid-column: 1 / -1}
}
@media (max-width: 767px) {
    .guest-body .guest-header__inner {height: 64px}
    .guest-body .guest-header__login {padding: 4px 14px; box-shadow: none}
    .guest-body .guest-footer {padding-top: 44px}
    .guest-body .guest-footer__grid a {min-height: 36px}
}