/* =============================================================================
   EverWell — Green Everlasting Beach Resort
   Design system and layout for the guest portal and the Command Portal.

   Section order
     1. Tokens
     2. Base and typography
     3. Buttons, badges, forms
     4. Guest portal
     5. Command Portal shell
     6. Cards, tables, feed
     7. Calendar
     8. Modal and chat widget
     9. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
    /* Brand palette — taken from the painted sign, muted for screen use.
       The sign's colours are poster-bright; at full saturation across a whole
       interface they vibrate against each other, so each one is dialled back
       while keeping its identity. */
    --green:        #14532D;   /* dark green — headings, buttons, primary UI */
    --green-deep:   #0F3D24;   /* darkest green — sidebar, footer, hero base */
    --green-soft:   #3F8F5F;   /* mid green — chart fills, soft accents */
    --header:       #D8EFD8;   /* light green — the site header band */
    --sky:          #7DD3FC;   /* sky blue — nav highlight on touch/hover */
    --sky-deep:     #0369A1;   /* deeper sky — underline and link accents */
    --blue:         #0369A1;   /* ocean blue — links and secondary accents */
    --blue-deep:    #075985;
    --gold:         #C89B3F;   /* antique brass, not neon yellow */
    --gold-deep:    #A87F2C;
    --gold-ink:     #7E601B;   /* brass dark enough to read as text on white */
    --mint:         #EAF5EA;   /* pale green wash for alternating sections */
    --sand:         #F3ECDF;   /* warm cream for buttons on photography */
    --ink:          #10261A;   /* text is green-black, not blue-grey */

    /* Warm neutrals — a paper-white page reads calmer than a tinted one */
    --ink-soft:     #4C5B52;
    --ink-faint:    #7C8B81;
    --surface:      #FFFFFF;   /* cards */
    --raised:       #F4F9F3;   /* a second, tinted surface for panels and heads */
    --page:         #F6F4EE;   /* warm paper, a shade deeper so white cards lift */
    --line:         #E2E4DC;
    --line-strong:  #CDD2C7;

    /* Status */
    --danger:       #B04A3E;
    --danger-soft:  #F7ECE9;
    --booked:       #E3B0A6;
    --warn-soft:    #F7EFDF;
    --info-soft:    #E6EEF0;

    /* Shape and depth */
    --radius:       10px;
    --radius-lg:    18px;
    --radius-xl:    26px;

    /* One spacing scale, so vertical rhythm is decided once rather than
       guessed at in every component. */
    --s1: .35rem;
    --s2: .65rem;
    --s3: 1rem;
    --s4: 1.5rem;
    --s5: 2.25rem;
    --s6: 3.25rem;
    --s7: 5rem;
    --shadow-sm:    0 1px 2px rgba(16, 38, 26, .04), 0 3px 10px rgba(16, 38, 26, .05);
    --shadow-md:    0 6px 22px rgba(16, 38, 26, .10);
    --shadow-lg:    0 18px 45px rgba(18, 66, 74, .16);

    /* Type — everything here ships with the operating system, so the site
       looks the same with the internet unplugged. Georgia for headings
       because it was drawn for screens and holds up at large sizes. */
    --font-display: Georgia, "Times New Roman", serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:    ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    --sidebar-w:    256px;
    --topbar-h:     68px;
}

/* ---------- 2. Base and typography ---------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* The browser hides [hidden] with display:none, but that is a plain UA rule —
   any display: we set on the element itself beats it, and the element stays on
   screen while JS believes it is hidden. It is worth an !important here: the
   whole site toggles rows and panels through the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    margin: 0 0 var(--s2);
    letter-spacing: -.015em;
    color: var(--green-deep);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 var(--s3); }

/* Opening paragraph of a section reads a size up from body copy. */
.lede {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 60ch;
}

a {
    color: var(--blue-deep);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover { color: var(--blue); }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.container {
    width: min(1180px, 92vw);
    margin-inline: auto;
}

/* Small label above a value — "Phone", "Reference", "Address". It is a label,
   not a decorative strapline, so it is styled like one. */
.eyebrow {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin-bottom: .2rem;
}

.text-muted { color: var(--ink-faint); }
.text-right { text-align: right; }
.mono       { font-family: var(--font-mono); font-size: .86em; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Buttons, badges, forms ------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--green);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:hover     { background: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active    { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--green);
}
.btn--ghost:hover { background: var(--mint); color: var(--green-deep); }

.btn--gold  { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); color: var(--ink); }

.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #963F34; }

.btn--sm    { padding: .38rem .7rem; font-size: .84rem; }
.btn--block { width: 100%; }

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge--good  { background: var(--mint);       color: var(--green-deep); }
.badge--info  { background: var(--info-soft);  color: var(--blue-deep); }
.badge--warn  { background: var(--warn-soft);  color: #6E5417; }
.badge--bad   { background: var(--danger-soft);color: var(--danger); }
.badge--muted { background: #EFEDE6;           color: var(--ink-soft); }

.field { margin-bottom: 1.05rem; }

.field label,
.field-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ink-soft);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="tel"], input[type="search"], select, textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 141, 218, .16);
    outline: none;
}

textarea { min-height: 96px; resize: vertical; }

.field-hint  { font-size: .8rem; color: var(--ink-faint); margin-top: .3rem; }
.field-error { font-size: .8rem; color: var(--danger); margin-top: .3rem; }

/* The promo verdict replaces its own hint in place, so it has to read as a
   verdict and not as more small print. */
.field-hint--ok  { color: var(--green);  font-weight: 600; }
.field-hint--bad { color: var(--danger); font-weight: 600; }

/* Code and its Apply button on one line; the button keeps its own height so it
   lines up with the input rather than stretching. */
.promo-field {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.promo-field input {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.promo-field .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    background: #fff;
    cursor: pointer;
}

.checkbox-row:hover { border-color: var(--blue); background: var(--info-soft); }
.checkbox-row input { margin-top: .25rem; }

/* Password strength meter */
.strength { margin-top: .45rem; }

.strength__track {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.strength__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--danger);
    transition: width .25s ease, background .25s ease;
}

.strength__label {
    font-size: .78rem;
    color: var(--ink-faint);
    margin-top: .28rem;
}

.alert {
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--blue);
    background: var(--info-soft);
    margin-bottom: 1.2rem;
    font-size: .92rem;
}

.alert--success { background: var(--mint);        border-left-color: var(--green); }
.alert--error   { background: var(--danger-soft); border-left-color: var(--danger); color: #6E2E26; }
.alert--warn    { background: var(--warn-soft);   border-left-color: var(--gold); }

/* ---------- 4. Guest portal ----------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--header);
    border-bottom: 1px solid rgba(15, 61, 36, .12);
    box-shadow: 0 1px 10px rgba(15, 61, 36, .10);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;
    /* No overflow:hidden here — the account menu hangs below the bar and would
       be clipped by it. The logo is capped on its own rules instead. */
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--green);
    letter-spacing: -.015em;
}

.brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 82, 44, .18);
    overflow: hidden;
    flex-shrink: 0;
}

.brand__mark img { width: 100%; height: 100%; display: block; }

.brand small {
    display: block;
    font-size: .68rem;
    color: var(--ink-faint);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: nowrap;
}

.site-nav a {
    color: var(--ink-soft);
    font-size: .9rem;
    white-space: nowrap;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--green);
    border-bottom-color: var(--gold);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .4rem .6rem;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--green);
}

/* Hero: a photograph of the place with the name on it. The dark wash is only
   there so the text stays readable over a bright sky. */
.hero {
    position: relative;
    background:
        linear-gradient(180deg, rgba(10,40,24,.62) 0%, rgba(10,40,24,.72) 100%),
        var(--hero-photo, linear-gradient(170deg, var(--green-deep), var(--green))) center / cover no-repeat;
    color: #fff;
    padding: clamp(3.25rem, 8vw, 6rem) 0;
    border-bottom: 4px solid var(--green-deep);
}

.hero__inner { position: relative; z-index: 2; max-width: 660px; }

.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.1rem);
    margin-bottom: .9rem;
}

.hero p {
    color: rgba(255, 255, 255, .9);
    font-size: 1.04rem;
    max-width: 52ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.hero__actions .btn { background: var(--sand); color: var(--green-deep); }
.hero__actions .btn:hover { background: #fff; }
.hero__actions .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.hero__actions .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* The practical line under the buttons: hours, and how to reach the desk. */
.hero__note {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
    max-width: none;
}

.section { padding: clamp(2.75rem, 5.5vw, 4.25rem) 0; }
.section--mint { background: var(--mint); }

/* A section heading is a heading and, at most, a line explaining it. No panel,
   no rule, no label above it — the content underneath is what people came for. */
.section__head {
    max-width: 62ch;
    margin-bottom: var(--s4);
}

.section__head h2 { margin-bottom: .45rem; }
.section__head > *:last-child { margin-bottom: 0; }

.section__head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Booking summary rail — follows the form on wide screens, sits inline below
   it once the layout stacks (see the 900px breakpoint). */
.booking-rail {
    position: sticky;
    top: 88px;
}

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

/* Unit cards: photograph on top, details on a white body that lifts on hover. */
.unit-card {
    transition: transform .22s ease, box-shadow .22s ease;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* The photo band.
   background-image (not the background shorthand) supplies the painted
   fallback, because the shorthand resets background-size and would leave a
   photo displayed at full size showing only its top-left corner. The inline
   style on the element overrides this image when the unit has a photo. */
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.unit-card__band {
    aspect-ratio: 3 / 2;
    transition: transform .5s ease;
    min-height: 200px;
    background-image: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: .8rem;
}

/* Scrim keeps the category chip legible over any photograph. */
.unit-card__band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 66, 74, .55), rgba(18, 66, 74, .04) 55%);
}

.unit-card__cat {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 61, 36, .72);
    padding: .28rem .6rem;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.unit-card__body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.unit-card__body h3 { margin-bottom: .3rem; }

/* The unit name is a link, but it is also the card's heading — it reads as a
   title, and the whole card is clickable anyway. */
.unit-card__body h3 a { color: inherit; }
.unit-card__body h3 a:hover { color: var(--blue); text-decoration: underline; }

.unit-card__meta {
    font-size: .84rem;
    color: var(--ink-faint);
    margin-bottom: .7rem;
}

.unit-card__features {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .87rem;
    color: var(--ink-soft);
}

.unit-card__features li { padding-left: 1.1rem; position: relative; }
.unit-card__features li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* Price on one line, the buttons on the next: at three cards across there is
   not room for both side by side once a rate reaches five figures, and a
   wrapped price pushed the buttons out of line from card to card. */
.unit-card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.unit-card__foot .price { flex: 1 1 100%; }
.unit-card__foot .btn { flex: 0 0 auto; }

.price {
    font-size: 1.2rem;
    color: var(--green);
    font-weight: 700;
    white-space: nowrap;
}

.price small { font-size: .7rem; color: var(--ink-faint); font-weight: 400; }

.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem;
}

/* Guest review score on a unit card and on the unit's own page. Shown only
   where there are reviews — a row of empty stars reads as a bad score. */
.rating {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .85rem;
}

.rating__stars { color: var(--gold); letter-spacing: .04em; }
.rating__score { font-weight: 600; color: var(--ink); }
.rating__count { color: var(--ink-faint); font-size: .8rem; }

.unit-card__rating { margin: 0 0 .35rem; }
.room-page__rating { margin: 0 0 .6rem; font-size: .95rem; }

/* ---- Home page: about block, rates table, closing call to action ---------- */

/* Description on the left, the practical facts on the right — the two things a
   guest checking out a resort actually wants, side by side. */
.home-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}

.home-intro__text p { max-width: 62ch; }

.home-intro__facts {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
}

.home-intro__facts h3 { margin-bottom: .8rem; font-size: 1.1rem; }

.fact-list { margin: 0; }
.fact-list dt {
    font-weight: 600;
    font-size: .88rem;
    color: var(--green-deep);
    margin-top: .8rem;
}
.fact-list dt:first-child { margin-top: 0; }
.fact-list dd {
    margin: .1rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* A list that reads as a list of things, not a styled component. */
.plain-list {
    margin: 0 0 var(--s3);
    padding-left: 1.15rem;
}
.plain-list li { margin-bottom: .35rem; }

.table--rates { font-size: .95rem; background: var(--surface); }
.table--rates th[scope="row"] { font-weight: 600; color: var(--ink); white-space: normal; }
.table--rates th[scope="row"] small { display: block; font-weight: 400; font-size: .78rem; }
.table--rates td { white-space: nowrap; }

.home-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.4rem 1.5rem;
}

.home-cta h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.home-cta > div { max-width: 62ch; }

@media (max-width: 860px) {
    .home-intro { grid-template-columns: 1fr; }
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.stars { color: var(--gold-ink); letter-spacing: .12em; font-size: .95rem; }

/* Larger tiles: two per row on a laptop, three on a wide screen, one on a
   phone. The floor is generous so a photo is never shrunk to a thumbnail. */
.gallery-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.gallery-tile {
    /* A <figure> comes with margin: 1em 40px from the browser. Left alone it
       shunts every tile out of its own grid column, which clips the picture
       on a narrow screen. */
    margin: 0;
    aspect-ratio: 3 / 2;
    min-height: 240px;   /* fallback for engines without aspect-ratio support */
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.15rem 1.3rem;
    color: #fff;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Captions sit over whatever the photo happens to be doing at that corner,
   so they carry their own shadow as well as the scrim. */
.gallery-tile span {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(16, 58, 66, .78);
}
.gallery-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(18, 66, 74, .70), rgba(18, 66, 74, .10) 45%, transparent 70%);
}

/* The footer carries the address, a short set of links and what the desk
   accepts — nothing that needs four columns and a screen of height. */
.site-footer {
    background: var(--green-deep);
    color: rgba(255, 255, 255, .74);
    padding: 2rem 0 1.4rem;
    font-size: .88rem;
}

.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: var(--sand); }

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.site-footer__brand { display: flex; align-items: center; gap: .9rem; }
.site-footer__brand-text { display: flex; flex-direction: column; gap: .15rem; }
.site-footer__brand strong { color: #fff; font-weight: 500; font-size: 1rem; }

/* On a white plate, because the logo's green house and teal script disappear
   against the dark green band behind them. */
.site-footer__logo {
    width: 74px;
    height: auto;
    background: #fff;
    border-radius: var(--radius);
    padding: .4rem .45rem;
    flex-shrink: 0;
}

.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-footer__links a { padding: .2rem 0; }

.site-footer__pay { color: rgba(255, 255, 255, .58); font-size: .8rem; }

.site-footer__label {
    display: block;
    font-size: .74rem;
    color: rgba(255, 255, 255, .38);
    margin-bottom: .15rem;
}

/* A hairline, then the small print — the details nobody hunts for but
   everybody expects to find at the bottom of a page. */
.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1.5rem;
    margin-top: 1.3rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 680px) {
    /* Stacked rather than squeezed: six links in one flex row ran off the side
       of a phone, so the last of them could not be reached at all. */
    .site-footer { padding: 1.6rem 0 1.2rem; }

    .site-footer__row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.1rem;
    }

    .site-footer__brand { flex-direction: column; align-items: center; text-align: center; }
    .site-footer__logo { width: 92px; }

    .site-footer__links {
        justify-content: center;
        gap: .4rem 1.1rem;
        line-height: 1.9;
    }

    .site-footer__base {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .35rem;
    }

    /* The chat button floats over the bottom-right corner and was covering the
       last line of the footer on a phone. */
    .site-footer { padding-bottom: 5.5rem; }
}


/* Accepted payment methods */
.pay-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.pay-strip__label {
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
    margin-right: .15rem;
}

.pay-chip {
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 5px;
    padding: .16rem .45rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .84);
    white-space: nowrap;
}

/* On the light page, the same chips are used inside cards. */
.card .pay-chip {
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

/* ---------- 5. Command Portal shell --------------------------------------- */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--green);
    color: rgba(255,255,255,.8);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.sidebar__brand .brand__mark { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.sidebar__brand small { color: rgba(255,255,255,.5); }

/* Each group of the menu is a <details>, so a whole section folds away and the
   twenty-odd links stop needing a scroll on a laptop screen. */
.sidebar__group {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 1.25rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
    cursor: pointer;
    user-select: none;
    transition: background .16s ease, color .16s ease;

    /* The default disclosure triangle is replaced by the caret below. */
    list-style: none;
}

.sidebar__section::-webkit-details-marker { display: none; }

.sidebar__section:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.sidebar__section:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: -2px;
}

.sidebar__caret {
    flex-shrink: 0;
    opacity: .7;
    order: 2;
    transition: transform .18s ease;
}

.sidebar__group[open] > .sidebar__section { color: rgba(255, 255, 255, .8); }
.sidebar__group[open] > .sidebar__section .sidebar__caret { transform: rotate(180deg); }

/* A closed group still says whether the thing you are looking at lives in it. */
.sidebar__group:not([open])[data-holds-current] > .sidebar__section::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: auto;
    order: 1;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 0 .7rem .45rem;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar__caret { transition: none; }
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .78rem;
    border-radius: var(--radius);
    color: rgba(255,255,255,.8);
    font-size: .93rem;
    transition: background .16s ease, color .16s ease;
}

.sidebar__link:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Active item carries the tide rule so the two portals share one visual idea. */
.sidebar__link.is-active {
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 500;
    position: relative;
}

.sidebar__link.is-active::after {
    content: "";
    position: absolute;
    left: 0; top: .35rem; bottom: .35rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
}

.sidebar__icon {
    width: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .82;
}

/* The drawn icons take the colour of the link they sit in, so hover and the
   active state need no rule of their own. */
.nav-icon { display: block; }
.sidebar__link.is-active .sidebar__icon { opacity: 1; }

.sidebar__foot {
    margin-top: auto;
    padding: .75rem 1.25rem .9rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .84rem;
}

.sidebar__user { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .85rem;
    flex-shrink: 0;
}

.sidebar__user strong { display: block; color: #fff; font-weight: 500; font-size: .9rem; }
.sidebar__user span   { color: rgba(255,255,255,.55); font-size: .76rem; text-transform: capitalize; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.6rem;
    position: sticky;
    top: 0;
    z-index: 500;
}

.topbar__search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.topbar__search input { padding-left: 2.2rem; background: var(--page); }

.topbar__search::before {
    content: "\1F50D";
    position: absolute;
    left: .7rem; top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    opacity: .55;
    pointer-events: none;
}

.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .7rem; }

.sidebar-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .35rem .6rem;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--green);
}

.content { padding: 1.7rem 1.6rem 3rem; flex: 1; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-head h1 { font-size: 1.75rem; margin-bottom: .2rem; }

.quick-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- 6. Cards, tables, feed ---------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s4);
}

/* Cards that lead somewhere lift slightly; static panels do not move. */
.card--link { transition: transform .2s ease, box-shadow .2s ease; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card__head {
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1rem;
}

.card__head h2, .card__head h3 { margin: 0; font-size: 1.05rem; }

.kpi-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    margin-bottom: 1.4rem;
}

/* KPI tile: the mint band at the foot reads as a waterline under the figure. */
.kpi {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


.kpi__label {
    font-size: .85rem;
    color: var(--ink-soft);
    margin-bottom: .3rem;
}

.kpi { position: relative; }

.kpi__value {
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--green);
    line-height: 1.1;
}

.kpi__delta { font-size: .82rem; margin-top: .35rem; position: relative; z-index: 2; }
.kpi__delta--up   { color: var(--green-soft); }
.kpi__delta--down { color: var(--danger); }

.kpi--accent-blue .kpi__value { color: var(--blue-deep); }
.kpi--accent-gold .kpi__value { color: #96701F; }

.dash-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
}

.col-8 { grid-column: span 8; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }

.chart-box { position: relative; height: 300px; }
.chart-box--short { height: 240px; }

/* Progress toward the gross profit benchmark */
.target { margin-top: .9rem; }

.target__track {
    height: 10px;
    background: var(--mint);
    border-radius: 999px;
    overflow: hidden;
}

.target__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--blue));
    border-radius: 999px;
    transition: width .6s ease;
}

.target__meta {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--ink-faint);
    margin-top: .4rem;
}

/* Wide tables scroll sideways instead of squeezing every column into an
   unreadable sliver. -webkit-overflow-scrolling gives iOS momentum. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table th {
    text-align: left;
    padding: .6rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}

.table td {
    padding: .68rem .75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.table tbody tr:nth-child(even) { background: var(--mint); }
.table tbody tr:hover { background: var(--info-soft); }
.table td strong { font-weight: 600; }

.empty-state {
    background:
        repeating-linear-gradient(135deg, transparent 0 9px, rgba(20, 83, 45, .035) 9px 10px),
        var(--raised);
    border: 1px dashed var(--line-strong);
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--ink-faint);
}

.empty-state strong { display: block; color: var(--ink); margin-bottom: .3rem; }

/* Live operation activity feed */
.feed { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }

.feed__item {
    display: flex;
    gap: .8rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--line);
}

.feed__item:last-child { border-bottom: none; }

.feed__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--blue);
    margin-top: .45rem;
    flex-shrink: 0;
}

.feed__dot--green { background: var(--green); }
.feed__dot--gold  { background: var(--gold); }
.feed__dot--red   { background: var(--danger); }

.feed__body p { margin: 0; font-size: .9rem; }
.feed__time { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: start;
    margin-bottom: 1.2rem;
}

/* Fields in a row line their inputs up with each other, whatever the label
   above or the hint below happens to be: the label block is pushed to a common
   height and the hint hangs off the bottom. */
.filter-bar .field {
    margin-bottom: 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

.filter-bar .field > label { min-height: 1.5em; }
.filter-bar .field > .field-hint { margin-top: .3rem; }

/* ---------- 7. Calendar ---------------------------------------------------- */
.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
}

.calendar-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    min-width: 210px;
}

.view-switch {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-switch button {
    background: #fff;
    border: none;
    padding: .45rem .95rem;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    color: var(--ink-soft);
    border-right: 1px solid var(--line);
}

.view-switch button:last-child { border-right: none; }
.view-switch button.is-active  { background: var(--green); color: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; font-size: .82rem; }
.legend__item { display: flex; align-items: center; gap: .4rem; }

.legend__swatch {
    width: 13px; height: 13px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.08);
}

.swatch--available { background: var(--mint); }
.swatch--booked    { background: var(--booked); }
.swatch--closed    { background: var(--line-strong); }
.swatch--selected  { background: var(--blue); }
.swatch--shift     { background: var(--gold); }

.cal-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr track cannot shrink below its
       content, and a booking chip like "EW-24019 · Kubo House — Talisay" is set
       to nowrap, so the first columns grew until Thursday, Friday and Saturday
       were pushed out of the page entirely. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cal-head {
    background: var(--green);
    color: #fff;
    padding: .5rem .6rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
}

.cal-cell {
    background: #fff;
    min-height: 116px;
    padding: .45rem .5rem;
    cursor: pointer;
    transition: background .15s ease;
    position: relative;
    text-align: left;
    border: none;
    font: inherit;
    color: inherit;
    display: block;
    width: 100%;
}

.cal-cell:hover { background: var(--info-soft); }
.cal-cell.is-outside { background: #FBF9F5; color: var(--ink-faint); }
.cal-cell.is-available { background: var(--mint); }
.cal-cell.is-booked    { background: var(--booked); }

/* The resort is shut — not "fully booked", which would imply it could be let. */
.cal-cell.is-closed {
    background: repeating-linear-gradient(135deg, var(--raised) 0 7px, #E7E9E2 7px 14px);
    color: var(--ink-faint);
}

.cal-cell.is-selected  { background: var(--blue); color: #fff; }
.cal-cell.is-selected .cal-cell__date { color: #fff; }
.cal-cell.is-today .cal-cell__date {
    background: var(--gold);
    color: var(--ink);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: grid; place-items: center;
}

.cal-cell__date { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }

.cal-chip {
    display: block;
    font-size: .72rem;
    padding: .12rem .35rem;
    border-radius: 4px;
    margin-bottom: .15rem;
    background: rgba(15, 82, 44, .12);
    color: var(--green-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip--shift   { background: rgba(243, 181, 24, .3); color: #5C4612; }
.cal-chip--closed  { background: var(--line-strong); color: var(--ink-soft); }
.cal-chip--booking { background: rgba(0, 141, 218, .16); color: var(--blue-deep); }
.cal-more { font-size: .7rem; color: var(--ink-faint); }

/* Day and week list views reuse one row component. */
.cal-list { display: flex; flex-direction: column; gap: .55rem; }

.cal-row {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: .9rem;
    align-items: center;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    cursor: pointer;
}

.cal-row:hover { box-shadow: var(--shadow-md); }
.cal-row--shift { border-left-color: var(--gold); }
.cal-row__time { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); }
.cal-row__title { font-weight: 500; }
.cal-row__sub { font-size: .82rem; color: var(--ink-faint); }

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.week-col { background: #fff; min-height: 240px; padding: .5rem; }
.week-col__head { text-align: center; padding-bottom: .5rem; border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
.week-col__head strong { display: block; font-family: var(--font-mono); font-size: 1rem; }
.week-col__head span { font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.week-col.is-today { background: var(--mint); }

/* ---------- 8. Modal and chat widget --------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 59, 31, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    z-index: 9500;
}

.modal.is-open { display: flex; }

.modal__panel {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    animation: modalIn .2s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    background: var(--green);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Every modal title, whatever its level, sits small and white on the green
   bar. The quick-book panel uses an h2, which used to pick up the full-size
   page heading in dark green — oversized and almost invisible on green. */
.modal__head h2,
.modal__head h3 { margin: 0; color: #fff; font-size: 1.15rem; line-height: 1.3; }
.modal__head .eyebrow { color: rgba(255, 255, 255, .75); }

.modal__close {
    background: none;
    border: none;
    color: rgba(255,255,255,.85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
}

.modal__close:hover { color: #fff; }
.modal__body { padding: 1.3rem; }
.modal__foot {
    padding: 1rem 1.3rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

/* Floating assistant */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--green);
    color: var(--gold);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: grid;
    place-items: center;
    transition: transform .2s ease, background .2s ease;
}

.chat-fab:hover { background: var(--blue); color: #fff; transform: scale(1.06); }

.chat-fab__badge {
    position: absolute;
    top: 2px; right: 2px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #fff;
}

.chat-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 9999;
    width: 440px;
    height: 640px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.chat-panel.is-open { display: flex; }

.chat-panel__head {
    background: var(--green);
    color: #fff;
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.chat-panel__head strong { display: block; font-size: .96rem; }
.chat-panel__head span   { font-size: .76rem; color: rgba(255,255,255,.7); }
.chat-panel__head .modal__close { margin-left: auto; }

/* Expand: a little more room for long answers and the question list. The
   button sits before the close button, so it takes the auto margin instead. */
.chat-panel { transition: width .2s ease, height .2s ease; }
.chat-panel.is-expanded { width: 560px; height: 760px; }

.chat-panel__size {
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    color: rgba(255,255,255,.9);
    cursor: pointer;
}

.chat-panel__size:hover { background: rgba(255,255,255,.12); color: #fff; }
.chat-panel__size:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-panel__head .chat-panel__size + .modal__close { margin-left: .35rem; }
.chat-panel__size-shrink { display: none; }
.chat-panel.is-expanded .chat-panel__size-grow { display: none; }
.chat-panel.is-expanded .chat-panel__size-shrink { display: block; }

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--page);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.chat-msg {
    max-width: 82%;
    padding: .6rem .85rem;
    border-radius: 14px;
    font-size: .89rem;
    line-height: 1.5;
    white-space: pre-line;
}

.chat-msg--bot  { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg--user { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; background: var(--page); }

.chat-suggestion {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: .3rem .7rem;
    font: inherit;
    font-size: .78rem;
    color: var(--green);
    cursor: pointer;
}

.chat-suggestion:hover { background: var(--mint); }

.chat-form {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid var(--line);
    background: #fff;
}

.chat-form input { flex: 1; }

.chat-typing { font-size: .8rem; color: var(--ink-faint); padding-left: .3rem; }

/* Booking summary rail */
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .42rem 0;
    font-size: .9rem;
    border-bottom: 1px dashed var(--line);
}

.summary-line--total {
    border-bottom: none;
    border-top: 2px solid var(--green);
    margin-top: .5rem;
    padding-top: .7rem;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--green);
}

.summary-line--discount span:last-child { color: var(--green-soft); }

/* Auth screens */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-aside {
    background: linear-gradient(170deg, var(--green-deep), var(--green));
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-aside h2 { color: #fff; }
.auth-aside p  { color: rgba(255,255,255,.8); max-width: 42ch; }

.auth-main {
    display: grid;
    place-items: center;
    padding: 2.5rem 1.5rem;
}

.auth-card { width: min(430px, 100%); }

.demo-creds {
    margin-top: 1.4rem;
    padding: .9rem 1rem;
    background: var(--mint);
    border-radius: var(--radius);
    font-size: .82rem;
}

.demo-creds code { font-family: var(--font-mono); color: var(--green-deep); }

/* Says why the panel is there and how to be rid of it, so nobody has to go
   looking for the switch. */
.demo-creds__note {
    display: block;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(16, 38, 26, .12);
    font-size: .76rem;
    color: var(--ink-soft);
}

/* ---------- 9. Responsive -------------------------------------------------- */
/* Tablet — the 8/4 split stops working before the 6/6 split does, so they
   collapse at different widths rather than all at once. */
@media (max-width: 1080px) {
    .col-8, .col-4, .col-5, .col-7 { grid-column: span 12; }
}

@media (max-width: 900px) {
    .col-6 { grid-column: span 12; }

    .shell { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        left: 0; top: 0;
        width: 264px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1200;
        box-shadow: var(--shadow-lg);
    }

    .sidebar.is-open  { transform: translateX(0); }
    .sidebar-toggle   { display: inline-flex; }
    .nav-toggle       { display: inline-flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: .6rem 4vw 1rem;
    }

    .site-nav.is-open { display: flex; }
    .site-nav a { width: 100%; padding: .6rem 0; border-bottom: 1px solid var(--line); }

    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }

    /* Once the booking form stacks, a sticky rail would cover the fields. */
    .booking-rail { position: static; }

    /* The sidebar slides over the page, so dim what is behind it. */
    .shell.has-open-sidebar::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(18, 66, 74, .42);
        z-index: 1100;
    }
}

@media (max-width: 680px) {
    .content { padding: 1.2rem 1rem 2.5rem; }

    /* The 380px tile floor would overflow a phone — one full-width tile instead. */
    .gallery-grid { grid-template-columns: 1fr; }
    .topbar  { padding: 0 1rem; }
    .kpi { position: relative; overflow: hidden; }


.kpi__value { font-size: 1.55rem; }

    /* Month grid stays scrollable rather than crushing to unreadable cells. */
    .cal-grid { min-width: 640px; }
    .calendar-scroll { overflow-x: auto; }

    .cal-row { grid-template-columns: 1fr; gap: .3rem; }
    .legend { margin-left: 0; }

    .chat-panel {
        right: 12px; left: 12px;
        bottom: 88px;
        width: auto;
        height: min(640px, calc(100vh - 110px));
    }

    .chat-fab { bottom: 16px; right: 16px; }

    /* On a phone the panel is already nearly full height, so expanding lets it
       use the whole screen, over the round button; the header still has the
       shrink and close buttons. */
    .chat-panel.is-expanded {
        width: auto;
        top: 12px;
        bottom: 12px;
        height: auto;
        max-height: none;
    }
    .page-head { align-items: flex-start; }
    .quick-actions .btn { flex: 1 1 auto; }

    /* Filter controls each take the full width — half-width inputs on a phone
       are fiddly to tap and truncate their labels. */
    .filter-bar { gap: .55rem; }
    .filter-bar .field { min-width: 100%; }
    .filter-bar .btn { flex: 1 1 auto; }

    /* Tables keep their columns legible and scroll instead. */
    .table { min-width: 620px; font-size: .86rem; }
    .table-wrap { margin-inline: -.2rem; }

    /* Comfortable tap targets — 44px is the accepted minimum. */
    .btn { min-height: 44px; padding: .7rem 1.1rem; }
    .site-nav a { min-height: 44px; display: flex; align-items: center; }

    .unit-card__band { min-height: 220px; }
    .modal { padding: .7rem; }
    .modal__body { padding: 1rem; }
    .kpi-grid { gap: .8rem; }
}

/* Narrow phones — the topbar runs out of room before anything else does. */
@media (max-width: 560px) {
    .topbar__search { display: none; }
    .topbar__actions { margin-left: auto; }
    .brand { font-size: 1.05rem; }
    .brand small { display: none; }
    .section__head { margin-bottom: 1.4rem; }
    .table { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .sidebar, .topbar, .chat-fab, .chat-panel, .quick-actions { display: none !important; }
    .shell { grid-template-columns: 1fr; }
    body { background: #fff; }
}

/* Catalog row thumbnail in the Command Portal */
.unit-row { display: flex; align-items: center; gap: .75rem; }

.unit-row__thumb {
    width: 62px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
}

.unit-row__thumb--empty {
    display: grid;
    place-items: center;
    background: var(--mint);
    color: var(--green);
    font-family: var(--font-mono);
}

/* Framed photograph used on the about page */
.photo-frame {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.photo-frame img { width: 100%; display: block; }

.photo-frame figcaption {
    background: var(--green);
    color: rgba(255, 255, 255, .86);
    font-size: .82rem;
    padding: .7rem 1rem;
}

/* Label row with a helper link on the right (e.g. "Forgot password?") */
.field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.field__aside {
    font-size: .8rem;
    color: var(--blue);
}

/* Confirmation field that does not match its partner */
.input--error,
input.input--error:focus {
    border-color: #B04A3E;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

/* Password field with a Show / Hide control */
.password-field { position: relative; display: block; }

.password-field input { padding-right: 3.1rem; width: 100%; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: .4rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, background .15s ease;
}

.password-toggle:hover { background: var(--mint); color: var(--green); }

.password-toggle[aria-pressed="true"] { color: var(--green); }

.password-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* The header band is light green, so its contents stay dark */
.site-header .brand { color: var(--green-deep); }
.site-header .brand small { color: rgba(15, 61, 36, .62); }

.site-nav a {
    color: var(--green-deep);
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    padding: .45rem .7rem;
    transition: background .16s ease, color .16s ease;
}

/* Sky blue on touch, hover or keyboard focus, and for the current page */
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a:active,
.site-nav a[aria-current="page"] {
    background: var(--sky);
    color: var(--green-deep);
    border-bottom-color: transparent;
}

.site-nav a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--sky-deep);
}

.site-header .btn {
    background: var(--green);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-header .btn:hover { background: var(--green-deep); }

/* The booking button is also a nav link, and the nav-link hover and focus
   colours were winning over it — dark text on a dark button. */
.site-header .site-nav a.btn:hover,
.site-header .site-nav a.btn:focus-visible {
    background: var(--green-deep);
    color: #fff;
    box-shadow: none;
}

.nav-toggle { color: var(--green-deep); }

@media (max-width: 900px) {
    /* The dropped-down menu keeps the header's colour rather than turning white. */
    .site-nav { background: var(--header); }
}

/* ---------------------------------------------------------------------------
   Receipt
   ------------------------------------------------------------------------ */
.layout-receipt { background: var(--page); }

.receipt-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 1.2rem 3rem;
}

.receipt-actions {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.2rem;
}

.receipt {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    box-shadow: var(--shadow-sm);
}

.receipt__head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--green);
}

.receipt__head h1 { font-size: 1.3rem; margin: .5rem 0 .2rem; }
.receipt__head p  { margin: 0; font-size: .86rem; }
.receipt__logo    { width: 42px; height: 42px; display: block; }
.receipt__meta    { text-align: right; }
.receipt__ref     { font-size: 1.25rem; font-weight: 600; color: var(--green); margin: .2rem 0; }

.receipt__parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 1.3rem 0;
}

.receipt__parties p { margin: 0 0 .2rem; font-size: .9rem; }

.receipt__table { margin-bottom: 1.4rem; }
.receipt__table .right, .receipt .right { text-align: right; }

.receipt__total td {
    border-top: 2px solid var(--line-strong);
    font-size: 1.05rem;
    font-weight: 600;
    padding-top: .8rem;
}

.receipt__payments { margin-bottom: 1.6rem; }

.receipt__balance {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--mint);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    margin-top: .9rem;
    font-size: 1.05rem;
}

.receipt__foot {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.receipt__code {
    font-size: 1.35rem;
    letter-spacing: .16em;
    color: var(--green);
    margin: .2rem 0 .4rem;
}

/* Service picker rows */
.service-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .6rem;
    cursor: pointer;
}

.service-option:hover { border-color: var(--green-soft); background: var(--mint); }
.service-option span span { display: block; font-size: .84rem; }
.service-option__price { white-space: nowrap; }
.service-option__price small { color: var(--ink-faint); }

@media print {
    .receipt-page { padding: 0; max-width: none; }
    .receipt { border: none; box-shadow: none; padding: 0; }
    .no-print { display: none !important; }

    /* Printing the booking confirmation should produce the receipt and nothing
       else — not the site header, the celebration panel or the chat widget. */
    .site-header,
    .site-footer,
    .confirm-panel,
    .chat-fab,
    .chat-panel { display: none !important; }

    .section { padding: 0 !important; }
    .container { max-width: none; width: auto; padding: 0; }
}

/* Profile picture and credentials */
.avatar--lg { width: 72px; height: 72px; font-size: 1.35rem; }
.avatar--xl { width: 96px; height: 96px; font-size: 1.8rem; }

img.avatar { object-fit: cover; padding: 0; }

.profile-head {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.avatar-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cred-list { margin: 0; }

.cred-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}

.cred-list > div:last-child { border-bottom: none; }

.cred-list dt {
    color: var(--ink-soft);
    font-size: .84rem;
    margin: 0;
}

.cred-list dd {
    margin: 0;
    text-align: right;
    font-size: .9rem;
}

@media (max-width: 560px) {
    .cred-list > div { flex-direction: column; gap: .15rem; }
    .cred-list dd { text-align: left; }
}

/* Raw server output — kept monospaced and scrollable rather than reflowed */
.log-block {
    background: #10343A;
    color: #D6E7E9;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   My account — side navigation with one panel open at a time
   ------------------------------------------------------------------------ */
.account-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .6rem;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 88px;
}

.account-nav__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .68rem .8rem;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}

.account-nav__link:hover { background: var(--mint); }

.account-nav__link.is-active {
    background: var(--mint);
    border-left-color: var(--green);
    color: var(--green);
    font-weight: 500;
}

.account-nav__icon {
    width: 22px;
    color: var(--green);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Marks a section that needs attention, e.g. an unconfirmed email */
.account-nav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: auto;
    flex-shrink: 0;
}

.account-panels > .card { margin: 0; }

@media (max-width: 900px) {
    /* The nav becomes a scrollable strip of tabs above the panel. */
    .account-layout { grid-template-columns: 1fr; }

    .account-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: .4rem;
        gap: .3rem;
    }

    .account-nav__link {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: .6rem .75rem;
    }

    .account-nav__link.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--green);
    }

    .account-nav__dot { margin-left: .35rem; }
}

/* ---------------------------------------------------------------------------
   Printable report
   ------------------------------------------------------------------------ */
.report {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.3rem, 3vw, 2.2rem);
    box-shadow: var(--shadow-sm);
    margin-top: 1.25rem;
}

.report__head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    border-bottom: 2px solid var(--green);
}

.report__head h2 { font-size: 1.2rem; margin: .45rem 0 .15rem; }
.report__head p  { margin: 0; font-size: .85rem; }
.report__logo    { width: 40px; height: 40px; display: block; }
.report__meta    { text-align: right; }
.report__period  { font-size: 1.05rem; font-weight: 600; color: var(--green); margin: .2rem 0; }

.report__section { padding-top: 1.5rem; }
.report__section h3 {
    font-size: 1rem;
    margin: 0 0 .7rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}

.report .right { text-align: right; }

.report__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.report__figures > div {
    background: var(--mint);
    border-radius: var(--radius);
    padding: .75rem .9rem;
}

.report__figures span {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    margin-bottom: .2rem;
}

.report__figures strong {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--green);
}

.report__figure--total { outline: 2px solid var(--green); }

.report__foot {
    margin-top: 1.6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

@media print {
    /* Only the report reaches the paper. */
    .sidebar, .topbar, .no-print, .chat-fab, .chat-panel, .site-footer { display: none !important; }
    .shell, .content { display: block; padding: 0; margin: 0; }
    .report { border: none; box-shadow: none; padding: 0; margin: 0; }
    .report__section--break { page-break-before: always; }
    .report__figures > div { border: 1px solid #ccc; background: none; }
    .table { font-size: 11px; }
    thead { display: table-header-group; }   /* repeat headers across pages */
    tr { page-break-inside: avoid; }
}

/* Nav items that open a modal rather than switching section */
.account-nav__link {
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    cursor: pointer;
}

button.account-nav__link { border: none; border-left: 3px solid transparent; }

.account-nav__heading {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-faint);
    margin: .8rem 0 .3rem;
    padding: 0 .8rem;
}

.account-nav__chev {
    margin-left: auto;
    color: var(--ink-faint);
    font-size: 1.1rem;
    line-height: 1;
}

button.account-nav__link:hover .account-nav__chev { color: var(--green); }

@media (max-width: 900px) {
    .account-nav__heading {
        align-self: center;
        margin: 0 .2rem;
        padding: 0;
        white-space: nowrap;
    }

    button.account-nav__link { border-left: none; border-bottom: 3px solid transparent; }
    .account-nav__chev { display: none; }
}

/* Password requirement checklist */
.pw-rules {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.pw-rules li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--ink-soft);
}

.pw-rules__mark {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    flex-shrink: 0;
    position: relative;
}

.pw-rules li.is-met { color: var(--green); }

.pw-rules li.is-met .pw-rules__mark {
    background: var(--green);
    border-color: var(--green);
}

/* Tick, drawn rather than loaded */
.pw-rules li.is-met .pw-rules__mark::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* A row in a shared queue that belongs to the person looking at it */
.row--mine > td { background: var(--mint); }
.row--mine > td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* The sidebar user block is now a link to the profile */
a.sidebar__user {
    text-decoration: none;
    border-radius: var(--radius);
    padding: .5rem;
    margin: -.5rem -.5rem .5rem;
    transition: background .16s ease;
}

a.sidebar__user:hover { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------------------
   Finishing pass
   ------------------------------------------------------------------------ */

/* A tinted band meets the page on a straight line, with a hairline to keep
   the edge from looking accidental. */
.section--mint {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Buttons: a little more presence, and a press that actually presses. */
.btn {
    letter-spacing: .01em;
    transition: background .16s ease, transform .1s ease, box-shadow .16s ease;
}

.btn:active { transform: translateY(1px); }

.btn:not(.btn--ghost):not(.btn--sm) { box-shadow: 0 1px 2px rgba(16, 38, 26, .18); }

/* Badges: tighter, with the weight of a label rather than a bubble. */
.badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .55rem;
    border-radius: 6px;
}

/* Photographs sit on a mount rather than floating on the page. */
.gallery-tile, .photo-frame, .unit-card { box-shadow: var(--shadow-sm); }

/* Give the guest portal footer some air now the rest of the page has it. */


@media (prefers-reduced-motion: reduce) {
    .unit-card, .card--link, .btn, .unit-card__band { transition: none; }
    .unit-card:hover, .card--link:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Account menu in the guest header
   A <details> element rather than scripted markup: it opens on click, closes
   on Escape, and is reachable by keyboard without any JavaScript at all.
   ------------------------------------------------------------------------ */
.avatar--sm { width: 30px; height: 30px; font-size: .74rem; }

.user-menu { position: relative; }

.user-menu > summary {
    display: block;
    cursor: pointer;
    list-style: none;
    border-radius: 999px;
    color: var(--green-deep);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(15, 61, 36, .12);
    transition: background .16s ease;
}

.user-menu__face {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .6rem 0 .3rem;
}

.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: #fff; }

.user-menu[open] > summary { background: #fff; }

.user-menu__name { font-size: .92rem; font-weight: 500; }
.user-menu__chev { font-size: .7rem; color: var(--ink-faint); }

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 232px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: .45rem;
    z-index: 950;
}

.user-menu__who {
    padding: .55rem .7rem .65rem;
    margin: 0 0 .3rem;
    border-bottom: 1px solid var(--line);
}

.user-menu__who strong { display: block; font-size: .92rem; }
.user-menu__who span { font-size: .78rem; color: var(--ink-soft); word-break: break-all; }

.user-menu__panel a {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: .92rem;
}

.user-menu__panel a:hover { background: var(--mint); color: var(--green-deep); }

@media (max-width: 900px) {
    /* In the dropped-down menu the panel sits inline rather than floating. */
    .user-menu__panel {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        min-width: 0;
    }

    .user-menu > summary { justify-content: flex-start; }
}

/* Payment guidance block, on the booking rail and the confirmation */
.pay-note {
    margin-top: var(--s3);
    padding: var(--s3);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Buttons sitting in a table cell */
.row-actions { white-space: nowrap; }
.row-actions .btn + .btn { margin-left: .3rem; }

/* ---------------------------------------------------------------------------
   Unit photo slider
   A scroll-snap track: phones swipe it natively, pointers get the arrows, and
   with no JavaScript at all the first photo still shows.
   ------------------------------------------------------------------------ */
.slider {
    position: relative;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.slider__track::-webkit-scrollbar { display: none; }

.slider__slide {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    aspect-ratio: 3 / 2;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .8rem;
}

/* Shade top and bottom only, so the middle of the photo stays clean. */
.slider__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(15, 61, 36, .34), transparent 30%),
        linear-gradient(to top, rgba(15, 61, 36, .55), transparent 34%);
}

.slider__slide > * { position: relative; z-index: 2; }

.slider__slide figcaption {
    color: #fff;
    font-size: .88rem;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(15, 61, 36, .8);
    margin-top: auto;
}

.slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: var(--green-deep);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
    z-index: 3;
}

.slider:hover .slider__arrow,
.slider__arrow:focus-visible { opacity: 1; }

.slider__arrow:hover { background: #fff; }
.slider__arrow--prev { left: .5rem; }
.slider__arrow--next { right: .5rem; }

.slider__dots {
    position: absolute;
    bottom: .55rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .3rem;
    z-index: 3;
}

.slider__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.slider__dot.is-active { background: #fff; width: 18px; border-radius: 4px; }

/* Touch devices have no hover, so the arrows stay visible there. */
@media (hover: none) {
    .slider__arrow { opacity: .9; }
}

/* ---------------------------------------------------------------------------
   Paying a booking
   ------------------------------------------------------------------------ */
.pay-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.pay-summary > div { background: var(--surface); padding: .9rem 1.1rem; }
.pay-summary span { display: block; font-size: .78rem; color: var(--ink-soft); }
.pay-summary strong { font-size: 1.15rem; }
.pay-summary__due { background: var(--mint) !important; }
.pay-summary__due strong { color: var(--green); }

.step-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--gold-ink);
    margin: 0 0 .2rem;
}

.pay-choices { display: flex; flex-wrap: wrap; gap: .55rem; }

.pay-choice {
    padding: .7rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: .92rem;
}

.pay-choice:hover { border-color: var(--green); background: var(--mint); }

.pay-choice.is-active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.pay-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.pay-qr__code {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .7rem;
    line-height: 0;
    box-shadow: var(--shadow-sm);
}

/* The resort's own GCash card is portrait, not a bare square, so it is sized
   by width and left to keep its own proportions. Cropping it to a square broke
   the code when tested, so it is shipped exactly as GCash exported it. */
.pay-qr__code img {
    width: 100%;
    max-width: 250px;
    height: auto;
    display: block;
    border-radius: var(--radius);
}
.pay-qr__detail { flex: 1; min-width: 220px; }

.pay-qr__number {
    font-size: 1.3rem;
    color: var(--green);
    margin: .1rem 0 .2rem;
    letter-spacing: .02em;
}

/* An archived unit: still listed for staff, visibly out of service */
.row--archived > td { opacity: .58; }
.row--archived > td:first-child { box-shadow: inset 3px 0 0 var(--line-strong); }

/* ---------------------------------------------------------------------------
   Notification bell
   ------------------------------------------------------------------------ */
.bell { position: relative; }

.bell > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink-soft);
}

.bell > summary::-webkit-details-marker { display: none; }
.bell > summary:hover { background: var(--mint); color: var(--green); }
.bell[open] > summary { background: var(--mint); color: var(--green); }
.bell__icon { font-size: 1.15rem; }

.bell__count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .64rem;
    line-height: 17px;
    text-align: center;
}

.bell__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(340px, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 960;
    overflow: hidden;
}

.bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
}

.bell__mark {
    border: none;
    background: none;
    color: var(--blue);
    font-size: .8rem;
    cursor: pointer;
    font-family: inherit;
}

.bell__item {
    display: block;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.bell__item:hover { background: var(--raised); }
.bell__item.is-unread { background: rgba(0, 141, 218, .05); border-left: 3px solid var(--blue); }
.bell__title { display: block; font-weight: 500; font-size: .89rem; }
.bell__body  { display: block; font-size: .8rem; color: var(--ink-soft); }
.bell__time  { display: block; font-size: .72rem; color: var(--ink-faint); margin-top: .15rem; }
.bell__empty { padding: 1.1rem .9rem; font-size: .86rem; color: var(--ink-soft); margin: 0; }

.bell__all {
    display: block;
    padding: .6rem;
    text-align: center;
    font-size: .84rem;
    background: var(--raised);
}

/* The full inbox */
.notice-list { list-style: none; margin: 0; padding: 0; }

.notice + .notice { border-top: 1px solid var(--line); }

.notice a {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: .8rem .3rem;
    color: var(--ink);
}

.notice a:hover { background: var(--raised); }
.notice.is-unread a { font-weight: 500; }

.notice.is-unread .notice__main strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    margin-right: .45rem;
    vertical-align: middle;
}

.notice__type {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.notice__main strong { display: block; font-size: .92rem; }
.notice__main span   { display: block; font-size: .84rem; color: var(--ink-soft); font-weight: 400; }
.notice__time { font-size: .76rem; color: var(--ink-faint); white-space: nowrap; }

@media (max-width: 680px) {
    .notice a { grid-template-columns: 1fr; gap: .2rem; }
    .notice__time { grid-row: 1; justify-self: end; }
}

/* The resort's own logo, given room rather than squeezed into a favicon slot */
.auth-logo {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    margin-bottom: 1.6rem;
    max-width: 230px;
}

.auth-logo img { width: 100%; display: block; }

/* The emblem in the header and sidebar: transparent, so it sits on the band
   rather than in a white tile. */
.brand__mark {
    background: none;
    box-shadow: none;
    overflow: visible;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.brand__mark img { width: 100%; height: 100%; object-fit: contain; }

.sidebar__brand .brand__mark { background: none; box-shadow: none; }

.receipt__logo, .report__logo {
    width: auto;
    height: 52px;
    object-fit: contain;
}

/* The whole logo, scaled to fit — not a crop of it. The lockup already says
   the resort's name, so no text sits beside it. */
.brand--logo { padding: .35rem 0; }

.brand--logo img {
    /* Both dimensions capped. Height alone is not enough: a wide lockup then
       stretches the bar sideways and squeezes the navigation. */
    height: 42px;
    max-height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

.sidebar__brand--logo {
    display: block;
    text-align: center;
    text-decoration: none;
}

.sidebar__plate {
    display: block;
    background: #fff;
    border-radius: var(--radius);
    padding: .45rem .55rem;
    margin-bottom: .4rem;
}

.sidebar__plate img { width: 100%; max-width: 132px; display: block; margin: 0 auto; }

.sidebar__brand--logo small {
    display: block;
    font-size: .76rem;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 680px) {
    .brand--logo img { height: 38px; }
}

/* ---------------------------------------------------------------------------
   Nearby attractions
   No photographs of these places, so each card carries a coloured edge and a
   painted corner instead — honest, and it keeps the grid from looking bare.
   ------------------------------------------------------------------------ */
.nearby-group { margin-bottom: var(--s6); }
.nearby-group__head { margin-bottom: var(--s4); max-width: 56ch; }
.nearby-group__head h2 { margin-bottom: .2rem; }
.nearby-group__head p { margin: 0; }

.spot {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--green);
}

.spot::after {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--mint);
    opacity: .8;
}

.spot > * { position: relative; z-index: 1; }

.spot--sky   { border-top-color: var(--sky-deep); }
.spot--sky::after { background: rgba(125, 211, 252, .35); }
.spot--blue  { border-top-color: var(--blue); }
.spot--blue::after { background: rgba(3, 105, 161, .12); }

.spot h3 { margin-bottom: .1rem; }

.spot__where {
    font-size: .84rem;
    color: var(--ink-faint);
    margin-bottom: .7rem;
}

.spot__tip {
    margin: 0;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
    font-size: .86rem;
    color: var(--ink-soft);
}

/* Extend-stay control in a bookings row */
.extend-form { display: flex; align-items: center; gap: .25rem; }

.extend-form input[type="number"] {
    width: 52px;
    padding: .3rem .4rem;
    font-size: .82rem;
    text-align: center;
}

/* The bell in the guest header sits on the light green band */
.bell--guest > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(15, 61, 36, .12);
}

.bell--guest > summary::-webkit-details-marker { display: none; }

.bell__face {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--green-deep);
}

.bell--guest[open] > summary,
.bell--guest > summary:hover { background: #fff; }

/* FAQ accordions, house rules and the agreement */
.faq-group { margin-bottom: var(--s5); }
.faq-group h2 { font-size: 1.1rem; margin-bottom: .6rem; }

.faq {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: .45rem;
}

.faq > summary {
    cursor: pointer;
    padding: .8rem 1rem;
    font-weight: 500;
    font-size: .95rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; color: var(--green); font-size: 1.1rem; line-height: 1; }
.faq[open] > summary::after { content: "\2212"; }
.faq[open] > summary { border-bottom: 1px solid var(--line); }
.faq p { margin: 0; padding: .85rem 1rem; color: var(--ink-soft); font-size: .92rem; }

.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.rule-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .94rem;
}

.rule-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--green-soft);
}

.clause { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.clause:last-of-type { border-bottom: none; }
.clause__number { color: var(--ink-faint); font-size: .8rem; padding-top: .25rem; }
.clause h2 { font-size: 1.02rem; margin-bottom: .3rem; }
.clause p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

.agree-line {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin: 1rem 0;
    font-size: .88rem;
    color: var(--ink-soft);
}

.agree-line input { margin-top: .2rem; flex-shrink: 0; }

/* The one-time code field: big, spaced, unmistakably a code */
.code-input {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    letter-spacing: .42em;
    text-align: center;
    padding: .7rem .5rem;
    text-indent: .42em;
}

/* ---------------------------------------------------------------------------
   Account items in the mobile navigation
   On a phone the header collapses behind the burger, and a dropdown inside
   that is a second thing to open before you can sign out. Below 900px the
   dropdown is replaced by plain rows.
   ------------------------------------------------------------------------ */
.nav-account { display: none; }

@media (max-width: 900px) {
    .user-menu,
    .bell { display: none; }

    .nav-account {
        display: block;
        width: 100%;
        margin-top: .4rem;
        padding-top: .6rem;
        border-top: 2px solid var(--line);
    }

    .nav-account__who {
        margin: 0 0 .2rem;
        font-size: .78rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    .nav-account a {
        display: block;
        width: 100%;
        padding: .7rem 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-account__out {
        color: var(--danger);
        font-weight: 500;
        border-bottom: none !important;
    }
}

/* A submit button that has to look like a link, for "change your mind" */
.linkish {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
}

/* A disabled form still has to look deliberate rather than broken */
.card fieldset[disabled] { opacity: .55; }
.card fieldset[disabled] input,
.card fieldset[disabled] select { background: var(--raised); cursor: not-allowed; }

/* A unit someone else already has for the chosen dates */
.slider--occupied { position: relative; }

.slider--occupied .slider__track { filter: grayscale(.75) brightness(.8); }

.occupied-flag {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 4;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   The FAQ inside the assistant
   ------------------------------------------------------------------------ */
.chat-faq {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .6rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--raised);
}

/* Browsing the list takes over the body of the panel. Sharing the space left
   the conversation squeezed to a half-cut bubble above the list, which looked
   broken; picking a question closes the list and brings the answer straight
   back. */
.chat-panel:has(.chat-faq:not([hidden])) .chat-log { display: none; }

.chat-faq__group + .chat-faq__group { margin-top: .35rem; }

.chat-faq__group > summary {
    cursor: pointer;
    list-style: none;
    padding: .45rem .1rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--green-deep);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-faq__group > summary::-webkit-details-marker { display: none; }

.chat-faq__group > summary span {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--ink-faint);
}

.chat-faq .chat-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    margin: .2rem 0;
    white-space: normal;
    line-height: 1.35;
}

.chat-faq-toggle {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    border-radius: 999px;
    padding: .32rem .75rem;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}

.chat-faq-toggle:hover { background: var(--green-deep); }

/* ---------------------------------------------------------------------------
   Nearby places: a photograph where we have one, a drawn scene where we do not
   ------------------------------------------------------------------------ */
.spot { padding-top: 0; overflow: hidden; }

.spot__art {
    position: relative;
    margin: 0 calc(-1 * var(--s4)) var(--s3);
    /* A fixed height as well as the ratio: an inline SVG with no intrinsic
       size will grow to fill whatever it is given in browsers that ignore
       aspect-ratio, which made the card several screens tall. */
    height: 170px;
    aspect-ratio: auto;
    background: var(--mint);
    overflow: hidden;
}

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

/* Places we have not photographed yet get a plain panel that says so, rather
   than a stock picture or a drawing standing in for the real thing. */
.spot__art-empty {
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .85rem;
}

.spot__art-empty--lead {
    height: 220px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}


.spot::after { display: none; }

/* ---------------------------------------------------------------------------
   Housekeeping board
   ------------------------------------------------------------------------ */
.room-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .8rem;
}

.room {
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem .9rem;
    background: var(--surface);
}

.room--available   { border-left-color: var(--green); }
.room--cleaning    { border-left-color: var(--gold); background: #FFFBF0; }
.room--occupied    { border-left-color: var(--blue); }
.room--maintenance { border-left-color: var(--danger); opacity: .78; }

.room__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}

.room__meta {
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-family: var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.room__who { margin: 0 0 .7rem; font-size: .86rem; color: var(--ink-soft); }
.room__who .mono { font-size: .76rem; color: var(--ink-faint); }

.room__actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.room__actions form { margin: 0; }

/* ---------------------------------------------------------------------------
   Complaints
   ------------------------------------------------------------------------ */
.complaint {
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    background: var(--surface);
}

.complaint--high   { border-left-color: var(--danger); }
.complaint--medium { border-left-color: var(--gold); }
.complaint--low    { border-left-color: var(--line-strong); }

.complaint__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .3rem;
}

.complaint__meta { margin: 0 0 .6rem; font-size: .79rem; color: var(--ink-faint); }
.complaint__body { margin: 0 0 .8rem; font-size: .93rem; }

.complaint__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.complaint__actions form { margin: 0; }
.complaint__reply-form { display: flex; gap: .5rem; flex: 1; min-width: 280px; }
.complaint__reply-form textarea { flex: 1; min-height: 44px; }

.complaint-reply {
    background: var(--mint);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    margin-bottom: .8rem;
    font-size: .9rem;
}

.complaint-reply .eyebrow { margin-bottom: .2rem; }

/* Verifying a payment: the amount is editable, so it sits beside the button */
.verify-form { display: flex; gap: .35rem; align-items: center; }
.verify-form input[type="number"] { width: 96px; padding: .35rem .45rem; font-size: .84rem; }

/* ---------------------------------------------------------------------------
   Photo zoom
   ------------------------------------------------------------------------ */
.is-zoomable { cursor: zoom-in; }

.is-zoomable:focus-visible {
    outline: 3px solid var(--sky-deep);
    outline-offset: 2px;
}

/* A photograph that opens full size says so.
   A zoom-in cursor is the whole hint at the moment, and a cursor does not
   exist on a phone and cannot be seen on a projector — which is exactly why
   people tap a picture, get nothing, and assume it is broken. The badge is the
   visible version of that cursor: always there on touch, on hover otherwise.

   It sits on the containers rather than on .is-zoomable itself, because half
   of those are <img> elements and a replaced element has no ::after to put it
   in. */
.gallery-tile.is-zoomable,
.room-page__lead.is-zoomable,
.slider__slide.is-zoomable,
.spot__art,
.photo-frame { position: relative; }

.gallery-tile.is-zoomable::before,
.room-page__lead.is-zoomable::before,
.photo-frame:has(> .is-zoomable)::before,
.spot__art:has(.is-zoomable)::before {
    content: "⤢ Click to enlarge";
    position: absolute;
    right: .6rem;
    top: .6rem;
    z-index: 3;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: rgba(16, 38, 26, .72);
    color: #fff;
    font-size: .72rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease;
}

/* A mouse gets it on hover or keyboard focus; a touch screen has neither, so
   it is simply always on there. */
.gallery-tile.is-zoomable:hover::before,
.gallery-tile.is-zoomable:focus-visible::before,
.room-page__lead.is-zoomable:hover::before,
.room-page__lead.is-zoomable:focus-visible::before,
.photo-frame:hover:has(> .is-zoomable)::before,
.spot__art:hover:has(.is-zoomable)::before {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .gallery-tile.is-zoomable::before,
    .room-page__lead.is-zoomable::before,
    .photo-frame:has(> .is-zoomable)::before,
    .spot__art:has(.is-zoomable)::before {
        opacity: 1;
        transform: none;
        content: "⤢ Tap to enlarge";
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-tile.is-zoomable::before,
    .room-page__lead.is-zoomable::before { transition: none; }
}

.zoom {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    place-items: center;
    padding: 4vh 4vw;
    background: rgba(10, 22, 15, .92);
}

.zoom.is-open { display: grid; }

.zoom__img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.zoom__caption {
    margin: .9rem 0 0;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
}

.zoom__close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.zoom__close:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 680px) {
    .zoom { padding: 2vh 2vw; }
    .zoom__img { max-height: 74vh; }
}

/* One-screen payment: methods as buttons rather than links that reload */
.pay-methods { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

.pay-method {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-size: .92rem;
    background: var(--surface);
}

.pay-method input { margin: 0; }
.pay-method.is-active { border-color: var(--green); background: var(--mint); font-weight: 500; }
.pay-gcash { margin-bottom: .4rem; }

.zoom__svg { display: block; width: min(92vw, 900px); }
.zoom__svg svg { width: 100%; height: auto; border-radius: var(--radius); background: var(--mint); }

/* Payment screenshot in the verify queue */
.proof-thumb {
    width: 92px;
    height: 62px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
    margin-top: .35rem;
    display: block;
}

/* ---------------------------------------------------------------------------
   One unit, its own page
   ------------------------------------------------------------------------ */
.crumb { font-size: .82rem; margin-bottom: 1rem; }
.crumb a { color: var(--ink-faint); text-decoration: none; letter-spacing: .04em; }
.crumb a:hover { color: var(--green); }

.room-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 1fr);
    gap: var(--s5);
    align-items: start;
}

.room-page__lead {
    margin: 0;
    height: 340px;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
}

.room-page__thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

.room-page__thumb {
    width: 74px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
}

.room-page__thumb.is-active { border-color: var(--green); }

.room-page__body h1 { margin: 0 0 .2rem; }
.room-page__meta { color: var(--ink-faint); font-size: .9rem; margin: 0 0 .6rem; }

.room-page__price {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--green-deep);
    margin: 0 0 .8rem;
}

.room-page__price span { font-size: .9rem; font-weight: 400; color: var(--ink-faint); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }

.chip {
    background: var(--mint);
    color: var(--green-deep);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
}

.room-page__terms {
    background: var(--mint);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: 1.2rem;
    font-size: .89rem;
    color: var(--ink-soft);
}

.room-page__terms p { margin: 0 0 .3rem; }
.room-page__terms p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .room-page { grid-template-columns: 1fr; }
    .room-page__lead { height: 230px; }
}

/* ---------------------------------------------------------------------------
   Getting there from the resort
   ------------------------------------------------------------------------ */
.trail { margin: .6rem 0 .2rem; border-top: 1px solid var(--line); }

.trail > summary {
    cursor: pointer;
    list-style: none;
    padding: .55rem 0 .35rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.trail > summary::-webkit-details-marker { display: none; }
.trail > summary::after { content: "▾"; font-size: .7rem; }
.trail[open] > summary::after { content: "▴"; }

/* The line down the left is the trail itself */
.trail__steps {
    list-style: none;
    margin: .2rem 0 .8rem;
    padding: 0 0 0 1.3rem;
    position: relative;
    font-size: .87rem;
    color: var(--ink-soft);
}

.trail__steps::before {
    content: "";
    position: absolute;
    left: 5px;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: var(--green-soft);
}

.trail__steps li { position: relative; padding: .3rem 0; }

.trail__steps li::before {
    content: "";
    position: absolute;
    left: -1.3rem;
    top: .62rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--green-soft);
}

.trail__start::before,
.trail__end::before { background: var(--green) !important; border-color: var(--green) !important; }
.trail__start, .trail__end { font-weight: 500; color: var(--ink); }


/* The unit's photograph in the booking summary */
.summary-photo { margin: 0 0 .8rem; }

.summary-photo img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.summary-photo figcaption {
    font-size: .8rem;
    color: var(--ink-faint);
    margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------------
   Restrained on purpose. This is a resort site people use to book a room, not
   a showreel: motion is here to make the page feel settled and responsive, not
   to be noticed. Everything below is disabled wholesale by the
   prefers-reduced-motion rule earlier in this file.
   ------------------------------------------------------------------------ */

/* Sections arrive as you reach them, rather than all at once on load. The
   starting state is only applied once JS confirms it can observe them, so a
   browser without JS shows everything normally instead of a blank page. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(8px);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .32s ease, transform .32s ease;
}

/* On paper nothing animates, so the starting state has to be undone or whole
   sections print blank. */
@media print {
    .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* The page itself fades up on arrival — short enough not to delay reading. */
main {
    animation: pageIn .35s ease both;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* A flash message should catch the eye once, then sit still. */
.alert {
    animation: flashIn .4s cubic-bezier(.22, .68, .32, 1) both;
}

@keyframes flashIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Buttons: a small press, so a tap on a phone feels like it registered. */
.btn { transition: background .18s ease, color .18s ease, border-color .18s ease,
                   transform .12s ease, box-shadow .18s ease; }
.btn:active { transform: translateY(1px); }

/* Photographs lift slightly under the cursor, hinting they can be opened. */
.unit-card__band,
.gallery-tile,
.slider__slide,
.room-page__lead {
    transition: transform .5s cubic-bezier(.22, .68, .32, 1);
}

.unit-card:hover .unit-card__band,
.gallery-tile:hover,
.room-page__lead:hover { transform: scale(1.03); }

.gallery-tile, .unit-card__band, .slider__slide { will-change: transform; }

/* Rows and list items settle in rather than snapping. */
.table tbody tr { transition: background .15s ease; }
.notice, .complaint, .room { transition: box-shadow .2s ease, transform .2s ease; }
.complaint:hover, .room:hover { box-shadow: 0 6px 18px rgba(15, 61, 36, .07); }

/* The photo overlay fades in with its picture rather than appearing whole. */
.zoom.is-open { animation: zoomIn .25s ease both; }
.zoom.is-open .zoom__img,
.zoom.is-open .zoom__svg { animation: zoomImg .3s cubic-bezier(.22, .68, .32, 1) both; }

@keyframes zoomIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomImg { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Details panels open rather than jump. */
details[open] > *:not(summary) { animation: openDown .25s ease both; }

@keyframes openDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* The badge on the notification bell asks for attention once, then stops. */
.bell__count { animation: bellPop .4s cubic-bezier(.3, 1.4, .5, 1) both; }

@keyframes bellPop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] { opacity: 1; transform: none; }
    main, .alert, .zoom.is-open, .bell__count, details[open] > *:not(summary) { animation: none; }
    .unit-card:hover .unit-card__band,
    .gallery-tile:hover,
    .room-page__lead:hover { transform: none; }
}

/* The booking call to action in the header */
.nav-cta { margin-left: .4rem; white-space: nowrap; }

@media (max-width: 900px) {
    /* On a phone the nav collapses; the button would crowd the logo, and the
       account rows already carry a booking link. */
    .nav-cta { display: none; }
}

/* The unit shown on the booking confirmation */
.confirm-photo { margin: 0 auto 1.1rem; max-width: 420px; }

.confirm-photo img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

/* Numbered steps on the payment page, so the order is not something to work out */
.pay-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.1rem 0 .5rem;
    font-weight: 500;
    color: var(--ink);
}

/* Centred with line-height rather than grid: older engines drop the digit
   entirely with place-items, which leaves a plain dark circle. */
.pay-step span {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: .76rem;
    font-family: var(--font-mono);
    line-height: 22px;
    text-align: center;
    display: inline-block;
}

/* The full arithmetic, for anyone who wants it, out of the way of everyone else */
.pay-breakdown { margin: 0 0 1.4rem; border-top: 1px solid var(--line); }

.pay-breakdown > summary {
    cursor: pointer;
    list-style: none;
    padding: .5rem 0;
    font-size: .85rem;
    color: var(--green);
}

.pay-breakdown > summary::-webkit-details-marker { display: none; }
.pay-breakdown > summary::after { content: " ▾"; font-size: .7rem; }
.pay-breakdown[open] > summary::after { content: " ▴"; }

/* ---------------------------------------------------------------------------
   Booking: one centred column
   ---------------------------------------------------------------------------
   The form used to sit in a wide two-column grid, which left the cards hard
   against the left edge with empty space beside them. Stacked and centred, it
   reads as one sequence: your details, your stay, your total.
   ------------------------------------------------------------------------ */
.booking-column {
    display: grid;
    gap: 1.25rem;
    max-width: 760px;
    margin: 0 auto;
}

.booking-column__fields { display: grid; gap: 1.25rem; }

/* The heading above the form matches the column, so the page reads as one
   centred stack rather than a centred title over a narrower form. */
.section--booking .section__head { max-width: 760px; }

/* The summary no longer follows the page — in a single column it sits at the
   end, where a guest reaches it after filling the form in. */
.booking-column .booking-rail { position: static; top: auto; }

/* ---------------------------------------------------------------------------
   Publishing readiness — shown to the owner until every item is dealt with
   ------------------------------------------------------------------------ */
.readiness { margin-bottom: 1.25rem; border-left: 4px solid var(--gold); }
.readiness__list { list-style: none; margin: 0; padding: 0; }

.readiness__item {
    padding: .6rem 0 .6rem .9rem;
    border-left: 3px solid var(--line);
    margin-bottom: .5rem;
}

.readiness__item strong { display: block; font-size: .92rem; }
.readiness__item span { font-size: .86rem; color: var(--ink-soft); }
.readiness__item--high   { border-left-color: var(--danger); }
.readiness__item--medium { border-left-color: var(--gold); }
.readiness__item--low    { border-left-color: var(--line-strong); }

/* The line under the entrance figure explaining who is paying it */
.summary-note {
    margin: -.3rem 0 .6rem;
    font-size: .78rem;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Home page — photograph first
   A full-screen slideshow under a see-through header, a short statement,
   one large photograph per thing a guest comes for, reviews, and where to
   find us. The photographs do the talking, so everything else stays quiet:
   regular-weight Georgia for the headings, plain links, few boxes.
   ------------------------------------------------------------------------ */

/* The header lies over the slideshow. It is fixed and solid by default — so
   with JavaScript off it is simply the normal header — and goes see-through
   only while home.js marks it .is-overlaid (top of the page, menu closed). */
.site-header--overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.site-header--overlay .brand__white { display: none; }

.site-header.is-overlaid {
    background: linear-gradient(180deg, rgba(8, 28, 17, .55), rgba(8, 28, 17, 0));
    border-bottom-color: transparent;
    box-shadow: none;
}

.site-header.is-overlaid .brand__colour { display: none; }
.site-header.is-overlaid .brand__white  { display: block; }

.site-header.is-overlaid .site-nav a { color: #fff; }

.site-header.is-overlaid .site-nav a:hover,
.site-header.is-overlaid .site-nav a:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.site-header.is-overlaid .site-nav a[aria-current="page"] {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* The booking button is a link inside the nav, so it needs the extra weight
   to keep its own colours instead of the white nav-link ones. */
.site-header.is-overlaid .site-nav a.btn { background: var(--sand); color: var(--green-deep); }
.site-header.is-overlaid .site-nav a.btn:hover,
.site-header.is-overlaid .site-nav a.btn:focus-visible { background: #fff; color: var(--green-deep); }

.site-header.is-overlaid .nav-toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.site-header.is-overlaid .user-menu > summary,
.site-header.is-overlaid .bell--guest > summary {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.site-header.is-overlaid .user-menu > summary:hover,
.site-header.is-overlaid .bell--guest > summary:hover { background: rgba(255, 255, 255, .22); }

.site-header.is-overlaid .bell__face,
.site-header.is-overlaid .user-menu__chev { color: #fff; }

/* An open dropdown has a white face again, so its text goes dark again. */
.site-header.is-overlaid .user-menu[open] > summary,
.site-header.is-overlaid .bell--guest[open] > summary { background: #fff; color: var(--ink); }
.site-header.is-overlaid .bell--guest[open] .bell__face { color: var(--green-deep); }
.site-header.is-overlaid .user-menu[open] .user-menu__chev { color: var(--ink-faint); }

/* Hero ------------------------------------------------------------------- */
.home-hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: var(--green-deep);
    overflow: hidden;
}

.home-hero__slides {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.home-hero__slide.is-active { opacity: 1; }

/* Darker at the top for the menu and at the foot for the small print; the
   middle stays bright enough to see the place. */
.home-hero__slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 28, 17, .50) 0%,
        rgba(8, 28, 17, .28) 30%,
        rgba(8, 28, 17, .38) 60%,
        rgba(8, 28, 17, .78) 100%);
}

.home-hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 0 2.5rem;
}

.home-hero__place {
    margin: 0 0 1.1rem;
    font-size: .98rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .86);
}

.home-hero h1 {
    margin: 0 auto 1.2rem;
    max-width: 13ch;
    color: #fff;
    font-weight: 400;
    font-size: clamp(2.7rem, 7.2vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.home-hero__line {
    margin: 0 auto;
    max-width: 38ch;
    font-size: clamp(1.06rem, 1.7vw, 1.3rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 2.1rem;
}

.home-hero__actions .btn { background: var(--sand); color: var(--green-deep); padding-inline: 1.3rem; }
.home-hero__actions .btn:hover { background: #fff; color: var(--green-deep); }
.home-hero__actions .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.home-hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.home-hero__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.1rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .24);
}

.home-hero__dots { display: flex; gap: .45rem; }
.home-hero__dots[hidden] { display: none; }

.home-hero__dot {
    width: 30px;
    height: 20px;
    padding: 8px 0;
    border: 0;
    background: rgba(255, 255, 255, .42);
    background-clip: content-box;
    cursor: pointer;
}

.home-hero__dot.is-active { background-color: #fff; }
.home-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.home-hero__note {
    margin: 0 0 0 auto;
    font-size: .88rem;
    text-align: right;
    color: rgba(255, 255, 255, .82);
}

/* Links that read as links: a brass rule under them, no box. */
.home-link {
    display: inline-block;
    font-weight: 600;
    color: var(--green);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--gold);
}

.home-link:hover { color: var(--green-deep); border-bottom-color: var(--green); }

/* Statement -------------------------------------------------------------- */
.home-statement {
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}

.home-statement__inner {
    max-width: 780px;
    text-align: center;
}

.home-statement h2 {
    margin-bottom: 1.3rem;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.7vw, 2.85rem);
    line-height: 1.12;
    text-wrap: balance;
}

.home-statement p {
    margin: 0 auto 1.7rem;
    max-width: 62ch;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* Features: one big photograph each, alternating sides ------------------ */
.home-features { padding: 0 0 clamp(3.5rem, 8vw, 6.5rem); }

.home-feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: center;
}

.home-feature + .home-feature { margin-top: clamp(3.5rem, 8vw, 6.5rem); }

.home-feature:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.home-feature:nth-child(even) .home-feature__photo { order: 2; }

.home-feature__photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--mint);
}

.home-feature__photo img { width: 100%; height: 100%; object-fit: cover; }

.home-feature__text h2 {
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: clamp(1.65rem, 2.9vw, 2.25rem);
    line-height: 1.12;
    text-wrap: balance;
}

.home-feature__text p {
    max-width: 52ch;
    line-height: 1.72;
    color: var(--ink-soft);
}

/* Rates under a feature: type and size on the left, price on the right. */
.home-rates {
    margin: 1.4rem 0 1.7rem;
    border-top: 1px solid var(--line-strong);
}

.home-rates > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .72rem 0;
    border-bottom: 1px solid var(--line);
}

.home-rates dt { font-weight: 600; color: var(--green-deep); }
.home-rates dt span { margin-left: .4rem; font-weight: 400; font-size: .9rem; color: var(--ink-faint); }

.home-rates dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.08rem;
    white-space: nowrap;
    color: var(--ink);
}

/* Reviews: quotes, not cards --------------------------------------------- */
.home-reviews {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--mint);
    text-align: center;
}

.home-reviews__head { max-width: 640px; margin: 0 auto 2.6rem; }

.home-reviews__head h2 {
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}

.home-reviews__head p { margin: 0; color: var(--ink-soft); }

.home-reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(1.6rem, 3vw, 2.8rem);
    margin-bottom: 2.4rem;
    text-align: left;
}

.home-review {
    margin: 0;
    padding-left: 1.2rem;
    border-left: 2px solid var(--gold);
}

.home-review .stars { margin-bottom: .5rem; }

.home-review__text {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--ink);
}

.home-review footer { font-size: .86rem; color: var(--ink-faint); }

/* Find us ---------------------------------------------------------------- */
.home-find {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background: var(--surface);
}

.home-find__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: center;
}

.home-find__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--mint);
}

.home-find__photo img { width: 100%; height: 100%; object-fit: cover; }

.home-find h2 {
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.home-find__address {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 1.6rem;
}

.home-find .fact-list dt { font-size: .92rem; }
.home-find .fact-list dd { font-size: .95rem; }

.home-find__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.9rem;
}

@media (max-width: 900px) {
    .home-hero__inner { padding-top: 100px; }
}

@media (max-width: 800px) {
    .home-feature,
    .home-feature:nth-child(even),
    .home-find__inner { grid-template-columns: 1fr; }

    .home-feature:nth-child(even) .home-feature__photo { order: 0; }
    .home-find__photo { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
    .home-hero { min-height: 92svh; }
    .home-hero__foot { flex-direction: column; align-items: flex-start; }
    .home-hero__note { margin: 0; text-align: left; }
    .home-hero__actions .btn { flex: 1 1 100%; }
    .home-rates dt span { display: block; margin-left: 0; }

    /* A long centred paragraph is hard to follow on a narrow screen. */
    .home-statement__inner { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__slide,
    .site-header--overlay { transition: none; }
}


/* ---------------------------------------------------------------------------
   Booking in three steps: unit, details, review and confirm
   ------------------------------------------------------------------------ */
.booking-steps {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin: 1rem auto 1.1rem;
    padding: 0;
    flex-wrap: wrap;
}

.booking-steps li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    color: var(--ink-faint);
}

/* A short rule between steps, drawn before every step but the first. */
.booking-steps li + li::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--line);
    margin-right: .35rem;
}

.booking-steps__num {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 22px;
    text-align: center;
    display: inline-block;
}

.booking-steps li.is-done { color: var(--green); }
.booking-steps li.is-done .booking-steps__num { background: var(--mint); border-color: var(--green-soft); color: var(--green); }
.booking-steps li.is-current { color: var(--ink); font-weight: 600; }
.booking-steps li.is-current .booking-steps__num { background: var(--green); border-color: var(--green); color: #fff; }

/* The unit chosen in step 1, at the head of steps 2 and 3. */
.booking-unit {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.1rem;
    align-items: center;
}

.booking-unit--flat { margin-bottom: 1rem; }

.booking-unit__photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.booking-unit__body h2 { margin: .1rem 0 .25rem; font-size: 1.25rem; }
.booking-unit__body .text-muted { margin: 0 0 .4rem; font-size: .9rem; }
.booking-unit__change { font-size: .88rem; }

@media (max-width: 560px) {
    .booking-unit { grid-template-columns: 1fr; }
    .booking-unit__photo { height: 160px; }
    .booking-steps li + li::before { width: 12px; }
    .booking-steps__label { font-size: .8rem; }
}

/* Step 3: what they entered, laid out to be checked line by line. */
.review-list { margin: 0; border-top: 1px solid var(--line); }

.review-list > div {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: .8rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: .93rem;
}

.review-list dt { color: var(--ink-faint); }
.review-list dd { margin: 0; color: var(--ink); }

@media (max-width: 480px) {
    .review-list > div { grid-template-columns: 1fr; gap: .1rem; }
}

.summary-line small { font-size: .8rem; }

/* The deposit is the figure the guest acts on next, so it is the one that stands out. */
.summary-line--due {
    margin-top: .9rem;
    padding: .6rem .75rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: #FBF5E8;
    color: var(--gold-ink);
    font-weight: 600;
}

.review-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.review-actions .btn { flex: 1 1 12rem; }


/* ---------------------------------------------------------------------------
   Push notifications — the on/off card and the dashboard banner
   ------------------------------------------------------------------------ */
.push-card {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--green-soft);
    border-radius: 0 var(--radius-lg, 14px) var(--radius-lg, 14px) 0;
}

.push-card[data-push-status="on"] { border-left-color: var(--green); }
.push-card[data-push-status="denied"],
.push-card[data-push-status="insecure"],
.push-card[data-push-status="unsupported"],
.push-card[data-push-status="apple-install"] { border-left-color: var(--gold); }

.push-card__text { flex: 1 1 22rem; }
.push-card__text h2 { margin: .1rem 0 .35rem; font-size: 1.1rem; }
.push-card__state { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.push-card__result { margin: .5rem 0 0; }
.push-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.push-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--green-soft);
    border-radius: var(--radius);
    background: var(--mint);
}

.push-prompt[hidden] { display: none; }
.push-prompt p { margin: 0; font-size: .92rem; color: var(--ink); }
.push-prompt__actions { display: flex; gap: .5rem; }

.bell__push { border-top: 1px dashed var(--line); font-size: .82rem; }


/* Cancel sits in the same row as Pay and Receipt, so its form must not break
   the line; red text marks it as the one that cannot be undone. */
.row-actions .cancel-form { display: inline; margin-left: .3rem; }
.btn--cancel { color: var(--danger); border-color: rgba(176, 74, 62, .35); }
.btn--cancel:hover { background: #FBEDEA; color: var(--danger); }


/* "Forgot your current password?" under the change-password form */
.password-reset-alt {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
}
.password-reset-alt p { margin: 0 0 .4rem; }
.password-reset-alt .field-hint { margin-bottom: .7rem; }