/* The shell every public page wears, and nothing that belongs to one surface.
   Four things: which logo the mode shows, the document's own rules, what a
   dialog does on a phone, and the Bootstrap defaults this palette has to
   correct. Everything here was inline in base.html, which is why it could not
   be cached, linted or read beside the rules it overrides. */

.logo-light { display: none; }
.logo-dark  { display: inline; }
[data-mode="light"] .logo-light { display: inline; }
[data-mode="light"] .logo-dark  { display: none; }
* { box-sizing: border-box; }
body {
    font-family: var(--font-sans);
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-color); }
a:hover { color: var(--text-primary); }
/* The one `<main>` takes the slack that holds the footer down. A page that
   draws something full-bleed fills base.html's `page` block inside it. */
main { flex: 1; }
/* The page, as one flex column, so that slack reaches `<main>`. */
.bt-page { flex: 1 0 auto; display: flex; flex-direction: column; }
/* On a phone the footer is most of a screen on its own, so a short page gave
   it more of the first screen than the page had: Settings with nothing saved
   was a heart, two lines and then green to the bottom edge. The page takes a
   little over half the screen, and the footer still shows its top edge under
   it. A whole screen was tried and read as a page with nothing on it. */
@media (max-width: 767.98px) {
    .bt-page { min-height: 60svh; }
}
/* ── NO DIALOGS ON A PHONE ──
   Anything still using the site's overlay — the appearance and cookie
   dialogs, and every `showModal()` confirm in the booking flow — comes
   up from the bottom edge instead of floating in the middle. One rule
   rather than a rewrite of each: the overlay stops centering its child
   and the child gives up the width, the corners and the entrance it
   asked for. `!important` because several of those children carry
   their sizes as inline styles, which no selector can outrank. */
@media (max-width: 767.98px) {
    /* `body` on the front only to outrank a page that declares its own
       copy of `.modal-overlay` after this block -- `/settings` does.
       That duplicate should go; until it does, this has to win on
       specificity rather than on source order. */
    body .modal-overlay { align-items: flex-end; padding: 0; }
    body .modal-overlay > * {
        width: 100% !important; max-width: none !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 0 !important;
        max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        animation: btSheetUp .22s ease-out !important;
    }
}
@keyframes btSheetUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body .modal-overlay > * { animation: none !important; }
}
.dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 200px;
}
.dropdown-item {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dropdown-item:active { background: var(--accent-alpha); color: var(--accent-color); }
.dropdown-divider { border-color: var(--border-color); margin: 4px 6px; }

.alert-success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); color: var(--success-color); }
.alert-warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: var(--warning-color); }
.alert-danger  { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); color: var(--error-color); }

.btn-primary {
    background: var(--accent-gradient);
    border: none;
    color: var(--white);
}
.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn-outline-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control, .form-select {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-alpha);
    color: var(--text-primary);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-mode="light"] .btn-close { filter: none; }