/* ---------------------------------------------------------------------
   DV Soft Hotel PMS - application stylesheet
   Layered on Bootstrap 5. All colour comes from --brand-* custom
   properties injected by Brand::cssVariables(), so a white-label
   deployment restyles without touching this file.

   The finish matches the product site (public/assets/css/site.css):
   Inter for everything a clerk reads and types, Playfair Display for
   page titles only, warm neutrals rather than Bootstrap's cool greys,
   hairline borders and quiet shadows. The fonts are self-hosted - the
   CSP is font-src 'self' and the desk may be on a poor connection.
   --------------------------------------------------------------------- */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/playfair-500.woff2") format("woff2"); }

:root {
    --brand-primary:   #5A2470;
    --brand-secondary: #2F7D5B;
    --brand-accent:    #B08A4F;
    --brand-sidebar:   #1E1224;
    --brand-danger:    #A33A3A;

    --surface:      #ffffff;
    --canvas:       #F7F5F2;
    --line:         #E7E2DC;
    --ink:          #1A1620;
    --ink-muted:    #6A6470;

    --radius:    10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(26, 22, 32, .04), 0 1px 3px rgba(26, 22, 32, .05);
    --shadow-md: 0 10px 30px rgba(26, 22, 32, .08);

    --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    --sidebar-w: 248px;
    --topbar-h:  60px;

    /* Bootstrap reads these for its own components. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: var(--radius);
    --bs-tertiary-bg: #FAF7F2;
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- Shell */

.app-shell { display: flex; min-height: 100vh; }

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
}

.app-content { flex: 1 1 auto; padding: 1.25rem 1.5rem 2rem; }

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: .78rem;
}

/* ----------------------------------------------------------- Sidebar */

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--brand-sidebar);
    color: #D2C8D6;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .18s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: var(--topbar-h);
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
}

.sidebar-logo { max-height: 30px; max-width: 130px; }

.sidebar-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-size: .95rem;
}

.sidebar-name {
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav { overflow-y: auto; padding: .75rem 0 1.5rem; flex: 1 1 auto; }

.sidebar-heading {
    /* A button, not a div: it toggles a section, so it has to be
       focusable and reachable from the keyboard. The button chrome is
       reset rather than inherited. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 1rem 1rem .4rem;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-accent) 70%, #fff);
    opacity: .8;
    cursor: pointer;
}

.sidebar-heading:hover { color: #fff; opacity: 1; }

.sidebar-heading:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

.sidebar-caret {
    font-size: .7rem;
    transition: transform .18s ease;
    opacity: .7;
}

/* Bootstrap flips aria-expanded, so the caret follows the real state
   rather than a class we would have to keep in step with it. */
.sidebar-heading[aria-expanded="true"] .sidebar-caret { transform: rotate(180deg); }

.sidebar-list { list-style: none; margin: 0; padding: 0; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem 1rem;
    color: #D2C8D6;
    text-decoration: none;
    border-left: 2px solid transparent;
    font-size: .855rem;
    transition: background .15s ease, color .15s ease;
}

.sidebar-link i { font-size: 1rem; width: 1.1rem; text-align: center; opacity: .7; }

.sidebar-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }

.sidebar-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 85%);
    border-left-color: var(--brand-accent);
    color: #fff;
    font-weight: 500;
}

.sidebar-link.active i { opacity: 1; color: color-mix(in srgb, var(--brand-accent) 75%, #fff); }

/* ------------------------------------------------------------ Topbar */

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

.topbar-spacer { flex: 1 1 auto; }

.topbar-context { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-hotel   { font-weight: 600; font-size: .9rem; }
.topbar-date    { font-size: .74rem; color: var(--ink-muted); }

.topbar-user { display: flex; align-items: center; gap: .55rem; border: 0; background: transparent; }
.topbar-user::after { margin-left: .1rem; }
.topbar-username { display: block; font-size: .84rem; font-weight: 500; line-height: 1.1; }
.topbar-role     { display: block; font-size: .72rem; color: var(--ink-muted); }

.avatar {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
}

.btn-icon { border: 1px solid var(--line); background: var(--surface); }

/* ------------------------------------------------------------- Pages */

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

/* The one serif on the staff screens: the title of the page you are on. */
.page-title { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 500; letter-spacing: -.005em; margin: 0; line-height: 1.2; }
.page-sub   { margin: .25rem 0 0; color: var(--ink-muted); font-size: .82rem; }

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: .86rem;
    padding: .75rem 1rem;
}

/* Tables: quiet headers in small capitals, warm zebra, hairlines. */
.table { --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
.table > thead > tr > th {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}
.table-light { --bs-table-bg: #FAF7F2; --bs-table-border-color: var(--line); --bs-table-color: var(--ink-muted); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--brand-accent) 6%, transparent); }

.form-label { font-weight: 500; font-size: .84rem; }
.form-control, .form-select { border-color: #DCD5CC; }
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.badge { font-weight: 600; letter-spacing: .01em; }

/* -------------------------------------------------------- Stat tiles */

.stat-tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--radius-sm);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.stat-value { font-size: 1.45rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .76rem; color: var(--ink-muted); }

.stat-brand   .stat-icon { background: color-mix(in srgb, var(--brand-primary) 10%, #fff); color: var(--brand-primary); }
.stat-info    .stat-icon { background: #F2ECF5; color: #7B4A92; }
.stat-success .stat-icon { background: #EAF4EE; color: #2F7D5B; }
.stat-warning .stat-icon { background: color-mix(in srgb, var(--brand-accent) 14%, #fff); color: color-mix(in srgb, var(--brand-accent) 80%, #000); }

/* ------------------------------------------------------------- Lists */

.detail-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; margin: 0; font-size: .84rem; }
.detail-list dt { color: var(--ink-muted); font-weight: 500; }
.detail-list dd { margin: 0; text-align: right; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--ink-muted); }
.empty-state i { font-size: 1.9rem; opacity: .4; display: block; margin-bottom: .5rem; }
.empty-state p { margin: 0; font-size: .84rem; }

.module-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    color: var(--ink-muted);
}

.module-chip.is-on { color: var(--ink); border-color: color-mix(in srgb, var(--brand-secondary) 40%, var(--line)); }
.module-chip.is-on i { color: var(--brand-secondary); }

/* ------------------------------------------------------------ Buttons */

.btn-brand {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    font-weight: 500;
}

.btn-brand:hover,
.btn-brand:focus {
    background: color-mix(in srgb, var(--brand-primary) 86%, #000);
    border-color: color-mix(in srgb, var(--brand-primary) 86%, #000);
    color: #fff;
}

/* --------------------------------------------------------------- Auth */

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent),
        radial-gradient(1000px 500px at 10% 110%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent),
        var(--canvas);
    padding: 2rem 1rem;
}

.auth-wrap { width: 100%; max-width: 400px; }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 1.9rem 1.75rem;
}

.auth-brand { text-align: center; margin-bottom: 1.35rem; }
.auth-logo  { max-height: 46px; max-width: 190px; }

.auth-mark {
    display: inline-grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: .6rem;
}

.auth-title { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; margin: 0; }
.auth-lead  { text-align: center; color: var(--ink-muted); font-size: .83rem; margin-bottom: 1.25rem; }
.auth-foot  { text-align: center; margin: 1rem 0 0; font-size: .75rem; color: var(--ink-muted); }

/* ------------------------------------------------------------- Errors */

.error-body { min-height: 100vh; display: grid; place-items: center; background: var(--canvas); padding: 2rem 1rem; }
.error-wrap { width: 100%; max-width: 520px; }

.error-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 2.25rem;
    text-align: center;
}

.error-icon   { font-size: 2.1rem; color: var(--brand-primary); opacity: .8; }
.error-status { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-muted); margin-top: .5rem; }
.error-title  { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin: .25rem 0 .5rem; }
.error-message{ color: var(--ink-muted); font-size: .88rem; margin-bottom: 1.4rem; }
.error-actions{ display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.error-debug { margin-top: 1.5rem; text-align: left; font-size: .74rem; }
.error-debug pre { max-height: 260px; overflow: auto; background: #1E1224; color: #EDE6EF; padding: .75rem; border-radius: 8px; }

/* -------------------------------------------------------- Responsive */

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-md); }
    .app-main { margin-left: 0; }
    .app-content { padding: 1rem; }
}

@media print {
    .app-sidebar, .app-topbar, .app-footer, .btn { display: none !important; }
    .app-main { margin-left: 0; }
    .app-content { padding: 0; }
    .card { border: 0; box-shadow: none; }
}

/* ---------------------------------------------------------- Installer */
/* The wizard runs before there is a database, so nothing here may depend
   on a per-tenant brand value that Settings would have to load. Colour
   still comes from --brand-*, which Brand::cssVariables() emits from the
   defaults when no hotel is in context. */

.install-body {
    min-height: 100vh;
    display: grid;
    place-items: start center;
    background:
        radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent),
        var(--canvas);
    padding: 2.25rem 1rem 3rem;
}

.install-wrap { width: 100%; max-width: 680px; }

.install-head { text-align: center; margin-bottom: 1.5rem; }
.install-brand   { font-size: 1.12rem; font-weight: 600; margin: 0; }
.install-version { font-size: .76rem; color: var(--ink-muted); margin: .15rem 0 0; }

/* Step rail. A plain ordered list so it still reads in order with CSS off. */
.install-rail {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .25rem;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    counter-reset: none;
}

.install-rail-item {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    font-size: .72rem;
    color: var(--ink-muted);
}

/* The connecting line, drawn behind the dots rather than as a separate
   element, so a step can be added without re-counting borders. */
.install-rail-item::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--line);
    z-index: 0;
}

.install-rail-item:first-child::before { display: none; }

.install-rail-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    margin: 0 auto .35rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--surface);
    font-size: .78rem;
}

.install-rail-item.is-now .install-rail-dot {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.install-rail-item.is-now  .install-rail-label { color: var(--ink); font-weight: 600; }

.install-rail-item.is-done .install-rail-dot {
    border-color: var(--brand-secondary);
    background: var(--brand-secondary);
    color: #fff;
}

.install-rail-item.is-done::before { background: var(--brand-secondary); }

.install-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}

.install-step-head  { margin-bottom: 1.25rem; }
.install-step-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; }
.install-step-sub   { font-size: .83rem; color: var(--ink-muted); margin: 0; }

.install-table th,
.install-table td { font-size: .81rem; }
.install-table code { font-size: .78rem; }

.install-row-bad { background: color-mix(in srgb, var(--brand-danger) 6%, transparent); }

.install-note { font-size: .74rem; color: var(--ink-muted); margin-top: .15rem; }

.install-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

/* A single-button step still puts its button on the right. */
.install-actions > form:only-child,
.install-actions:has(> :only-child) { justify-content: flex-end; }

.install-done { text-align: center; margin-bottom: 1.35rem; }

.install-done-mark {
    display: inline-grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: .7rem;
    border-radius: 50%;
    background: var(--brand-secondary);
    color: #fff;
    font-size: 1.5rem;
}

@media (max-width: 575.98px) {
    .install-rail-label { display: none; }
    .install-card { padding: 1.25rem; }
}

/* ------------------------------------------------ Sidebar: icon rail */
/* Collapsing swaps one custom property. Because --sidebar-w is what both
   the sidebar width and the main column's margin are built on, changing
   it on <html> moves both together - there is no second measurement to
   keep in step. The class goes on <html> so it can be applied before
   first paint (see the inline script in layouts/app.php); setting it on
   the sidebar itself would flash the wide nav on every page load. */

@media (min-width: 992px) {
    html.sidebar-collapsed { --sidebar-w: 68px; }

    /* Anything that is words rather than an icon goes. */
    html.sidebar-collapsed .sidebar-name,
    html.sidebar-collapsed .sidebar-heading,
    html.sidebar-collapsed .sidebar-link span { display: none; }

    html.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }

    html.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: .6rem 0;
        border-left-width: 0;
        border-right: 3px solid transparent;
    }

    html.sidebar-collapsed .sidebar-link.active {
        border-right-color: var(--brand-accent);
    }

    html.sidebar-collapsed .sidebar-link i { font-size: 1.12rem; width: auto; }

    /* With the headings hidden there is nothing left to open a section
       with, so every section is shown. Overriding Bootstrap's collapse
       here rather than removing the classes keeps the accordion state
       intact for when the rail is expanded again. */
    html.sidebar-collapsed .sidebar-section {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* A rail is only usable if the icons say what they are. */
    html.sidebar-collapsed .sidebar-list li { position: relative; }

    html.sidebar-collapsed .sidebar-link::after {
        content: attr(title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: .5rem;
        padding: .25rem .5rem;
        border-radius: var(--radius-sm);
        background: var(--brand-sidebar);
        color: #fff;
        font-size: .78rem;
        white-space: nowrap;
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease;
        z-index: 1050;
    }

    html.sidebar-collapsed .sidebar-link:hover::after,
    html.sidebar-collapsed .sidebar-link:focus-visible::after { opacity: 1; }
}

/* The rail is a desktop idea. Below lg the sidebar is off-canvas and
   already out of the way, so collapsing it as well would leave a 68px
   strip covering the page. */
@media (max-width: 991.98px) {
    html.sidebar-collapsed { --sidebar-w: 248px; }
}

/* -------------------------------------------------- Operator sign-in */
/* The second door is styled apart from the first on purpose. Two
   identical sign-in pages are two pages nobody can tell apart, and
   knowing which one you are looking at is the entire point of having
   two. */

.auth-vendor {
    background:
        radial-gradient(1000px 500px at 50% -10%, rgba(200, 137, 43, .18), transparent),
        var(--brand-sidebar);
}

.auth-vendor .auth-card {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.auth-vendor .auth-mark { background: var(--brand-accent); }
.auth-vendor .auth-foot { color: rgba(255, 255, 255, .55); }

.auth-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 auto .9rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
    color: color-mix(in srgb, var(--brand-accent) 70%, #000);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The badge is the only centred thing in an otherwise left-aligned card. */
.auth-vendor .auth-card > .auth-badge { display: flex; width: fit-content; }

/* ------------------------------------------------ Public booking pages */
/* These are seen by the hotel's guests, not by its staff, so they borrow
   the brand colours and none of the admin chrome. */

.book-body { background: var(--canvas); color: var(--ink); }

.book-wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1rem; }

.book-head {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .85rem 0;
}

.book-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.book-hotel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.book-place { font-size: .78rem; color: var(--ink-muted); }

.book-contact { display: flex; gap: 1rem; font-size: .82rem; }
.book-contact a { color: var(--brand-primary); text-decoration: none; }
.book-contact a:hover { text-decoration: underline; }

.book-main { padding-top: 1.75rem; padding-bottom: 2.5rem; }

.book-hero { text-align: center; margin-bottom: 1.5rem; }
.book-title { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 500; margin: 0 0 .3rem; }
.book-sub   { color: var(--ink-muted); font-size: .9rem; margin: 0; }
.book-h2    { font-size: .95rem; font-weight: 600; margin: 0 0 .4rem; }

.book-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.book-crumbs { margin-bottom: .9rem; font-size: .85rem; }
.book-crumbs a { color: var(--brand-primary); text-decoration: none; }

.book-stay {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.book-stay-dates { font-weight: 600; }
.book-stay-meta  { color: var(--ink-muted); font-size: .82rem; margin-left: .5rem; }

/* One offer per row, splitting into a stacked card on a phone. */
.book-offers { display: grid; gap: .85rem; }

.book-offer {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem;
}

.book-offer-name { font-size: 1.02rem; font-weight: 600; margin: 0 0 .3rem; }
.book-offer-desc { font-size: .85rem; color: var(--ink-muted); margin: 0 0 .6rem; }

.book-offer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    font-size: .8rem;
    color: var(--ink-muted);
}

.book-scarce { color: var(--brand-danger); font-weight: 600; }

.book-offer-price {
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

.book-rate      { font-size: 1.25rem; font-weight: 600; }
.book-rate-unit { font-size: .74rem; color: var(--ink-muted); }
.book-total     { margin-top: .5rem; font-weight: 600; }

.book-total-note { display: block; font-size: .73rem; font-weight: 400; color: var(--ink-muted); }
.book-tax-note   { font-size: .72rem; color: var(--ink-muted); margin: .35rem 0 .7rem; }

.book-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    font-size: 1.05rem;
}

.book-policy {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    font-size: .84rem;
    color: var(--ink-muted);
    margin-top: 1.25rem;
}

.book-done { text-align: center; margin-bottom: 1.5rem; }

.book-done-mark {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: var(--brand-secondary);
    color: #fff;
    font-size: 1.6rem;
}

.book-reference {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    margin: .5rem 0;
    padding: .7rem 1.4rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.book-reference-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); }
.book-reference-value { font-size: 1.15rem; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* The honeypot. Off-screen rather than display:none, because some bots
   skip fields that are explicitly hidden. Kept out of the tab order and
   out of the accessibility tree so no real guest ever meets it. */
.book-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.book-foot {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 1rem 0;
    font-size: .78rem;
    color: var(--ink-muted);
}

@media (max-width: 767.98px) {
    .book-offer { grid-template-columns: 1fr; }

    .book-offer-price {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: .85rem;
        text-align: left;
    }
}

/* ---------------------------------------------------------------------
   Bootstrap follows the brand.

   Bootstrap ships its own blue for links, primary buttons and badges,
   focus rings, switches, tabs and info alerts - and it ignored the
   property's theme entirely, so a white-labelled client in green or
   maroon still got blue links and blue toggles. Everything below maps
   those onto the --brand-* variables, which Brand::cssVariables() sets
   per property.
   --------------------------------------------------------------------- */

:root {
    --bs-primary: var(--brand-primary);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-sidebar);
    --bs-link-color-rgb: 90, 36, 112;
    --bs-link-hover-color-rgb: 30, 18, 36;
    --bs-focus-ring-color: color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

a { color: var(--brand-primary); }
a:hover { color: var(--brand-sidebar); }

.text-primary { color: var(--brand-primary) !important; }
.bg-primary, .text-bg-primary { background-color: var(--brand-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--brand-primary) !important; }

.btn-primary {
    --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-sidebar); --bs-btn-hover-border-color: var(--brand-sidebar);
    --bs-btn-active-bg: var(--brand-sidebar); --bs-btn-active-border-color: var(--brand-sidebar);
    --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary); --bs-btn-active-border-color: var(--brand-primary);
}

.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-check-input:focus, .form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 55%, #fff);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.form-switch .form-check-input:focus { --bs-form-switch-bg: none; }

.nav-tabs .nav-link { color: var(--ink-muted); }
.nav-tabs .nav-link:hover { color: var(--brand-primary); }
.nav-tabs .nav-link.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.nav-pills .nav-link.active { background-color: var(--brand-primary); }
.page-link { color: var(--brand-primary); }
.active > .page-link, .page-link.active { background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* Info is Bootstrap's cyan. Tinted from the brand instead. */
.alert-info {
    --bs-alert-color: var(--brand-sidebar);
    --bs-alert-bg: color-mix(in srgb, var(--brand-primary) 7%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--brand-primary) 22%, #fff);
    --bs-alert-link-color: var(--brand-primary);
}
.text-bg-info { background-color: color-mix(in srgb, var(--brand-primary) 14%, #fff) !important; color: var(--brand-sidebar) !important; }
.text-info { color: var(--brand-primary) !important; }


/* ---------------------------------------------------------------------
   Status colours follow the palette too.

   Bootstrap's success green (#198754), danger red (#dc3545), warning
   yellow (#ffc107) and slate greys are loud against the plum, aubergine
   and gold of the product - a "Settle" button in traffic-light green.
   They are mapped onto --brand-secondary (done), --brand-danger (stop)
   and --brand-accent (attention), so a white-labelled theme restyles
   these as well. Meaning is unchanged: green still means paid, red still
   means void.
   --------------------------------------------------------------------- */

.btn-success {
    --bs-btn-bg: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-secondary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-secondary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--brand-secondary) 78%, #000);
    --bs-btn-disabled-bg: var(--brand-secondary); --bs-btn-disabled-border-color: var(--brand-secondary);
}
.btn-outline-success {
    --bs-btn-color: var(--brand-secondary); --bs-btn-border-color: color-mix(in srgb, var(--brand-secondary) 55%, #fff);
    --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary);
    --bs-btn-active-bg: var(--brand-secondary); --bs-btn-active-border-color: var(--brand-secondary);
}
.btn-danger {
    --bs-btn-bg: var(--brand-danger); --bs-btn-border-color: var(--brand-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-danger) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-danger) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--brand-danger) 78%, #000);
}
.btn-outline-danger {
    --bs-btn-color: var(--brand-danger); --bs-btn-border-color: color-mix(in srgb, var(--brand-danger) 45%, #fff);
    --bs-btn-hover-bg: var(--brand-danger); --bs-btn-hover-border-color: var(--brand-danger);
    --bs-btn-active-bg: var(--brand-danger); --bs-btn-active-border-color: var(--brand-danger);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink); --bs-btn-border-color: #D6CFC6;
    --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #F3EFE9; --bs-btn-hover-border-color: #BDB4A8;
    --bs-btn-active-color: var(--ink); --bs-btn-active-bg: #EDE7DF; --bs-btn-active-border-color: #BDB4A8;
    --bs-btn-disabled-color: var(--ink-muted); --bs-btn-disabled-border-color: var(--line);
}
.btn-secondary {
    --bs-btn-bg: #6A6470; --bs-btn-border-color: #6A6470;
    --bs-btn-hover-bg: #57515C; --bs-btn-hover-border-color: #57515C;
    --bs-btn-active-bg: #4A4450; --bs-btn-active-border-color: #4A4450;
}
.btn-light { --bs-btn-bg: #F6F2EC; --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #EFE9E1; --bs-btn-hover-border-color: #D6CFC6; }

.text-success { color: var(--brand-secondary) !important; }
.text-danger  { color: var(--brand-danger) !important; }
.text-warning { color: color-mix(in srgb, var(--brand-accent) 80%, #000) !important; }

.text-bg-success   { background-color: var(--brand-secondary) !important; color: #fff !important; }
.text-bg-danger    { background-color: var(--brand-danger) !important; color: #fff !important; }
.text-bg-warning   { background-color: color-mix(in srgb, var(--brand-accent) 24%, #fff) !important; color: color-mix(in srgb, var(--brand-accent) 55%, #000) !important; }
.text-bg-secondary { background-color: #7A7380 !important; color: #fff !important; }
.text-bg-light     { background-color: #F3EFE9 !important; color: var(--ink) !important; }
.bg-success { background-color: var(--brand-secondary) !important; }
.bg-danger  { background-color: var(--brand-danger) !important; }

.alert-success {
    --bs-alert-color: color-mix(in srgb, var(--brand-secondary) 70%, #000);
    --bs-alert-bg: color-mix(in srgb, var(--brand-secondary) 8%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--brand-secondary) 24%, #fff);
}
.alert-danger {
    --bs-alert-color: color-mix(in srgb, var(--brand-danger) 75%, #000);
    --bs-alert-bg: color-mix(in srgb, var(--brand-danger) 7%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--brand-danger) 22%, #fff);
}
.alert-warning {
    --bs-alert-color: color-mix(in srgb, var(--brand-accent) 50%, #000);
    --bs-alert-bg: color-mix(in srgb, var(--brand-accent) 10%, #fff);
    --bs-alert-border-color: color-mix(in srgb, var(--brand-accent) 30%, #fff);
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--brand-danger); }
.invalid-feedback { color: var(--brand-danger); }
.progress-bar { background-color: var(--brand-primary); }