/* ==========================================================================
   Atelier — the customer's look (docs/muzer-service/ui.md).

   Every page of the main/v3 shell loads this — the public site, the user
   panel, the sign-in pages — through ztemplates/barber/main/v3/
   head_references.html. The admin panel has its own head and never does.

   What it is: the owner's Stitch design "Atelier Grooming Reserve" — porcelain,
   midnight navy and champagne gold — laid over landing.css. The tokens are set
   on `.landing-body` (the <body>), so they beat the palette landing.css puts
   on <html>; a desk (`.panel-shell.theme-barber`, barber.css) sits inside the
   body and beats these in turn. The two panels must never look alike: the
   desk is graphite and brass, this is navy and champagne, in both modes.

   Beyond the tokens it only reshapes: radii, shadows, the type, the chips,
   and the components landing.css paints white-on-brand, which here read
   `--on-brand` so a pale brand in the dark keeps readable text.
   ========================================================================== */

/* ------------------------------------------------------------ tokens ---- */

.landing-body {
    /* navy: actions, headings, the selected state */
    --brand: #1a2b49;
    --brand-dark: #0f1f3a;
    --brand-darker: #031633;
    --brand-soft: #e5eaf2;
    --brand-softer: #f1f4f8;
    --brand-rgb: 26, 43, 73;
    --on-brand: #ffffff;

    /* champagne: the highlight — never a whole screen, only its key points */
    --gold: #c5a059;
    --gold-rgb: 197, 160, 89;
    --gold-ink: #775a19;      /* gold as text on a light surface */
    --gold-soft: #faf3e4;
    --gold-line: #efdcb3;

    --ink: #191c1e;
    --ink-muted: #5c6577;
    --ink-faint: #64748b;     /* metadata beside a value — 4.5:1 on white and on the page */
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-2: #eef1f5;     /* a segmented control's track, a chip at rest */
    --page: #f7f9fb;
    --accent: #c5a059;

    --rail: #0b1a33;
    --rail-deep: #071228;
    --rail-soft: rgba(255, 255, 255, 0.07);
    --rail-text: rgba(255, 255, 255, 0.72);

    /* the deep surface — the ink card, the promo band, the sign-in hero, the
       wash over a photo: navy in both modes, a brand's own palette swaps it */
    --deep: #1a2b49;
    --deep-end: #031633;
    --deep-rgb: 3, 22, 51;
    --deep-night: #1b2a47;
    --deep-night-end: #0d1830;
    --deep-text: #eef2fa;
    --deep-soft: #b9c4d8;
    --deep-muted: #a9b6cf;
    --deep-eyebrow: #e9c176;
    --deep-label: #f3dcae;
    --deep-glow: rgba(197, 160, 89, 0.16);

    /* status keeps its meaning whatever the brand is */
    --ok: #2f7d57;
    --ok-soft: #e7f4ed;
    --warn: #8f6412;
    --warn-soft: #fdf3e0;
    --bad: #b3261e;
    --bad-soft: #fdecea;
    --info: #2c5f9e;
    --info-soft: #e9f1fd;

    --radius-lg: 12px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --shadow-1: 0 1px 3px rgba(26, 43, 73, 0.05), 0 4px 12px rgba(26, 43, 73, 0.03);
    --shadow-2: 0 12px 32px -4px rgba(26, 43, 73, 0.1), 0 4px 12px -2px rgba(26, 43, 73, 0.04);
    --shadow-cta: 0 8px 24px rgba(26, 43, 73, 0.18);

    --font-text: Vazirmatn, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: Vazirmatn, system-ui, sans-serif;
    /* Latin-only strings — a booking code, a wordmark — on any page */
    --font-latin: "Bodoni Moda", Vazirmatn, Georgia, serif;
}

/* English pages take the design's own pair; Persian stays Vazirmatn, which
   also draws its Latin — Bodoni in a Persian heading would draw the spaces
   and the joiners of a Persian sentence too. */
html[lang="en"] .landing-body {
    --font-text: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Bodoni Moda", Georgia, serif;
}

/* The dark variant: midnight navy, not graphite — the desk owns graphite. */
[data-bs-theme="dark"] .landing-body {
    --brand: #b6c7ec;
    --brand-dark: #d0dcf6;
    --brand-darker: #e7eeff;
    --brand-soft: #1b2944;
    --brand-softer: #142037;
    --brand-rgb: 182, 199, 236;
    --on-brand: #0a1730;

    --gold: #e9c176;
    --gold-rgb: 233, 193, 118;
    --gold-ink: #e9c176;
    --gold-soft: #2a2417;
    --gold-line: #4b3e20;

    --ink: #e4e8f0;
    --ink-muted: #9ba7ba;
    --ink-faint: #7f8ca2;
    --line: #22304a;
    --surface: #111b2e;
    --surface-2: #0d1627;
    --page: #0a1222;
    --accent: #e9c176;

    --rail: #070f1e;
    --rail-deep: #050b16;
    --rail-soft: rgba(255, 255, 255, 0.06);
    --rail-text: rgba(228, 232, 240, 0.7);

    --ok: #74cf9f;
    --ok-soft: #10281d;
    --warn: #e9c176;
    --warn-soft: #2a2417;
    --bad: #f2a29c;
    --bad-soft: #321614;
    --info: #9cc1f2;
    --info-soft: #12223a;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 12px 32px -4px rgba(0, 0, 0, 0.45), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --shadow-cta: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------- type ---- */

.landing-body {
    font-family: var(--font-text);
    background-color: var(--page);
    color: var(--ink);
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body .section-title,
.landing-body .auth-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body h4,
.landing-body h5,
.landing-body h6 {
    font-weight: 700;
}

.landing-body .section-title {
    font-weight: 700;
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .landing-body .section-title {
    color: var(--ink);
}

/* the small gold line above a title — "آتلیه اختصاصی پیرایش" in the design */
.eyebrow {
    display: block;
    color: var(--gold-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

html[lang="en"] .eyebrow {
    text-transform: uppercase;
}

.font-latin {
    font-family: var(--font-latin);
    letter-spacing: 0.02em;
}

.text-gold {
    color: var(--gold-ink) !important;
}

.bg-gold-soft {
    background-color: var(--gold-soft) !important;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- buttons ---- */

.landing-body .btn {
    border-radius: var(--radius-sm);
}

.landing-body .btn-brand,
.landing-body .btn-outline-brand,
.landing-body .btn-soft,
.landing-body .btn-gold {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.landing-body .btn-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.landing-body .btn-brand:hover,
.landing-body .btn-brand:focus,
.landing-body .btn-brand:active {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-brand);
}

.landing-body .btn-brand:active,
.landing-body .btn-gold:active {
    transform: scale(0.98);
}

.landing-body .btn-outline-brand:hover,
.landing-body .btn-outline-brand:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* champagne: the one call to action a screen is about — "book", "confirm" */
.btn-gold {
    background-color: var(--gold);
    border: 1px solid var(--gold);
    color: #241a05;
    border-radius: var(--radius-sm);
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: color-mix(in srgb, var(--gold) 88%, #000);
    border-color: color-mix(in srgb, var(--gold) 88%, #000);
    color: #241a05;
}

/* a ghost: hairline, navy text, a gold edge on hover */
.btn-ghost {
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-ghost:hover,
.btn-ghost:focus {
    border-color: var(--gold);
    color: var(--brand);
    background-color: var(--surface);
}

/* the design's primary height, for the one button that ends a form */
.btn-tall {
    min-height: 48px;
    padding-inline: 1.25rem;
}

.landing-body .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.35);
}

/* White on the brand, everywhere landing.css writes it — the brand is pale
   in the dark, so the text has to follow `--on-brand` instead. */
.landing-body .brand-mark,
.landing-body .social-dot:hover,
.landing-body .blog-chip.is-active,
.landing-body .article-card-category:hover,
.landing-body .blog-tag.is-active,
.landing-body .share-btn:hover,
.landing-body .share-btn:focus-visible,
.landing-body .share-btn.is-done,
.landing-body .auth-tab.active,
.landing-body .topbar-badge,
.landing-body .panel-hero-badge,
.landing-body .panel-tab.active,
.landing-body .filter-count,
.landing-body .icon-chip.is-brand,
.landing-body .kyc-step.is-done .kyc-step-dot,
.landing-body .dp-day.is-edge,
.landing-body .dp-apply {
    color: var(--on-brand);
}

.landing-body .pagination-brand {
    --bs-pagination-active-color: var(--on-brand);
}

/* ------------------------------------------------------------- cards ---- */

.landing-body .surface-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.landing-body .surface-card.is-raised {
    box-shadow: var(--shadow-2);
}

/* the dark navy card the design opens a screen with — the promo band, the
   wallet, the "move instead of cancel" suggestion */
.ink-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--deep) 0%, var(--deep-end) 100%);
    color: var(--deep-text);
    box-shadow: 0 8px 24px rgba(var(--deep-rgb), 0.16);
}

.ink-card::after {
    content: "";
    position: absolute;
    inset-block-end: -3rem;
    inset-inline-end: -3rem;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: var(--deep-glow);
    filter: blur(24px);
    pointer-events: none;
}

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

.ink-card h2,
.ink-card h3,
.ink-card h4,
.ink-card .section-title {
    color: #fff;
}

.ink-card .text-muted-ink {
    color: var(--deep-muted);
}

.ink-card .eyebrow {
    color: var(--deep-eyebrow);
}

[data-bs-theme="dark"] .ink-card {
    background: linear-gradient(135deg, var(--deep-night) 0%, var(--deep-night-end) 100%);
    border: 1px solid var(--line);
}

/* landing.css's promo band is drawn from `--brand-darker`, which is pale in
   the dark; here it is the ink card's navy in both modes, headings white */
.landing-body .promo-card {
    background: linear-gradient(135deg, var(--deep) 0%, var(--deep-end) 100%);
    color: var(--deep-text);
}

.landing-body .promo-card h1,
.landing-body .promo-card h2,
.landing-body .promo-card h3 {
    color: #fff;
}

.landing-body .promo-card p {
    color: var(--deep-muted);
}

.landing-body .promo-card .panel-hero-badge {
    background-color: rgba(var(--gold-rgb), 0.2);
    color: var(--deep-label);
}

/* the icon squares keep their meaning and follow the mode */
.landing-body .feature-icon.tone-green { background-color: var(--ok-soft); color: var(--ok); }
.landing-body .feature-icon.tone-amber { background-color: var(--gold-soft); color: var(--gold-ink); }
.landing-body .feature-icon.tone-red { background-color: var(--bad-soft); color: var(--bad); }
.landing-body .feature-icon.tone-blue { background-color: var(--brand-soft); color: var(--brand); }
.landing-body .feature-icon.tone-purple { background-color: var(--info-soft); color: var(--info); }
.landing-body .feature-icon.tone-gray { background-color: var(--surface-2); color: var(--ink-muted); }

.landing-body .feature-icon {
    border-radius: var(--radius-sm);
}

/* the gold note — "ضمانت آسودگی خاطر", a policy under a form */
.gold-note {
    border-radius: var(--radius-lg);
    background-color: var(--gold-soft);
    border: 1px solid var(--gold-line);
    color: var(--ink);
}

.gold-note .gold-note-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--gold) 22%, var(--surface));
    color: var(--gold-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------ badges ---- */

.landing-body .badge-tone {
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: var(--fs-xs);
}

.landing-body .badge-tone.tone-green {
    background-color: var(--ok-soft);
    color: var(--ok);
}

.landing-body .badge-tone.tone-amber {
    background-color: var(--gold-soft);
    color: var(--gold-ink);
}

.landing-body .badge-tone.tone-red {
    background-color: var(--bad-soft);
    color: var(--bad);
}

.landing-body .badge-tone.tone-blue {
    background-color: var(--brand-soft);
    color: var(--brand);
}

.landing-body .badge-tone.tone-gray {
    background-color: var(--surface-2);
    color: var(--ink-muted);
    border-color: transparent;
}

/* a dot before the word, the design's status line — "● تایید شده" */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-muted);
}

.status-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-dot.tone-green { color: var(--ok); }
.status-dot.tone-amber { color: var(--gold-ink); }
.status-dot.tone-red { color: var(--bad); }
.status-dot.tone-blue { color: var(--brand); }

/* ------------------------------------------------------------ alerts ---- */

.landing-body .panel-alert {
    border-radius: var(--radius-md);
}

.landing-body .panel-alert.tone-green {
    background-color: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 22%, transparent);
    color: var(--ok);
}

.landing-body .panel-alert.tone-amber {
    background-color: var(--gold-soft);
    border-color: var(--gold-line);
    color: var(--warn);
}

.landing-body .panel-alert.tone-red {
    background-color: var(--bad-soft);
    border-color: color-mix(in srgb, var(--bad) 22%, transparent);
    color: var(--bad);
}

.landing-body .panel-alert.tone-blue {
    background-color: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 22%, transparent);
    color: var(--info);
}

/* ------------------------------------------------------------- forms ---- */

.landing-body .form-control,
.landing-body .form-select {
    min-height: 46px;
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.landing-body textarea.form-control {
    min-height: 0;
}

.landing-body .form-control:focus,
.landing-body .form-select:focus,
[data-bs-theme="dark"] .landing-body .form-control:focus,
[data-bs-theme="dark"] .landing-body .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}

[data-bs-theme="dark"] .landing-body .form-control,
[data-bs-theme="dark"] .landing-body .form-select {
    background-color: var(--surface-2);
}

.landing-body .form-label {
    font-size: var(--fs-md);
}

.landing-body .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

/* ------------------------------------------------------------- chips ---- */
/* the filter chips of the design: a row that scrolls rather than wraps */

.chip-row {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px;
}

.chip-row::-webkit-scrollbar {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-muted);
    font-size: var(--fs-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(var(--brand-rgb), 0.03);
}

.chip:hover {
    color: var(--brand);
    border-color: var(--gold-line);
}

.chip.is-active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* the gold dot beside the word on the selected chip */
.chip.is-active::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--gold);
}

/* -------------------------------------------------------------- tabs ---- */
/* A segmented control, as in "My bookings": a track, and the chosen segment
   lifted onto a card. */

.landing-body .panel-tabs {
    background-color: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 2px;
}

.landing-body .panel-tab {
    flex: 1 0 auto;
    background-color: transparent;
    border-color: transparent;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
}

.landing-body .panel-tab:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--brand);
}

.landing-body .panel-tab.active {
    background-color: var(--surface);
    border-color: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-1);
}

.landing-body .panel-tab-count {
    background-color: var(--surface-2);
}

.landing-body .panel-tab.active .panel-tab-count {
    background-color: var(--brand);
    color: var(--on-brand);
}

/* A row that slides sideways (tabs, chips, days) fades on the side that has
   more — the hint a phone has no scroll bar to give (atelier.js sets it). */
.fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.fade-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
}

.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

/* The panel's top-bar search on a phone: the desk's bookings page and the
   barbers page carry their own search box, and a box squeezed beside the
   bell and the account menu cuts its own words (the UX review). */
@media (max-width: 575.98px) {
    .landing-body .panel-topbar .panel-search {
        display: none;
    }
}

/* The pager on the user panel: one page needs no bar ("showing 1 to 3 of 3"
   says what the list already shows), and a phone keeps the page numbers only. */
.landing-body .panel-pager:not(:has(.pagination)) {
    display: none;
}

@media (max-width: 575.98px) {
    .landing-body .panel-pager-info {
        display: none;
    }
}

/* ---------------------------------------------------------- dropdowns ---- */

.landing-body .dropdown-menu {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

/* ------------------------------------------------------ public header ---- */

.landing-body .landing-header {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
}

.landing-body .landing-header .nav-link {
    color: var(--ink-muted);
    font-weight: 600;
}

.landing-body .landing-header .nav-link:hover,
.landing-body .landing-header .nav-link.active {
    color: var(--brand);
}

.landing-body .landing-header .nav-link.active::after {
    background-color: var(--gold);
}

.landing-body .brand-mark,
.landing-body .panel-brand-mark {
    background-color: var(--brand);
    color: var(--gold);
    border-radius: var(--radius-sm);
}

/* in the dark the brand is pale: the mark turns champagne, the glyph navy */
[data-bs-theme="dark"] .landing-body .brand-mark,
[data-bs-theme="dark"] .landing-body .panel-brand-mark {
    background-color: var(--gold);
    color: #0a1730;
}

.landing-body .brand-name {
    color: var(--brand-darker);
}

[data-bs-theme="dark"] .landing-body .brand-name {
    color: var(--ink);
}

/* ------------------------------------------------------ public footer ---- */

.landing-body .landing-footer {
    background-color: var(--surface);
}

.landing-body .footer-contact i,
.landing-body .footer-bottom a,
.landing-body .footer-list a:hover {
    color: var(--gold-ink);
}

.landing-body .social-dot {
    background-color: var(--surface-2);
    color: var(--brand);
}

/* --------------------------------------------------------------- rail ---- */
/* Navy with a champagne edge on the page you are on. */

.landing-body .panel-rail-nav .nav-link.active {
    background-color: rgba(var(--gold-rgb), 0.14);
    color: var(--deep-label);
    box-shadow: inset -3px 0 0 var(--gold);
}

[dir="ltr"] .landing-body .panel-rail-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--gold);
}

/* a count on the rail is champagne on either rail, with dark digits — white
   on gold is unreadable */
.landing-body .panel-rail-nav .rail-badge {
    background-color: var(--gold);
    color: #241a05;
}

/* the line before the rail's way back — the desk's rail has one */
.landing-body .rail-divider {
    height: 1px;
    margin: 0.5rem 0.75rem;
    background-color: var(--rail-soft);
}

.landing-body .rail-mode-chip {
    color: var(--deep-label);
}

.landing-body .panel-support {
    border-color: rgba(var(--gold-rgb), 0.18);
}

.landing-body .panel-support .btn-brand {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #241a05;
}

/* ------------------------------------------------------------ top bar ---- */

.landing-body .panel-topbar {
    background-color: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(14px);
}

.landing-body .btn-icon:hover {
    background-color: var(--surface-2);
    color: var(--brand);
}

/* the bell's dot is champagne, as in the design */
.landing-body .topbar-badge {
    background-color: var(--gold);
    color: #241a05;
}

/* ------------------------------------------------------ bottom tab bar ---- */
/* Phones only: the four places the customer goes back to, and the desk's
   four — ztemplates/barber/main/v3/bottom_nav.html. A phone has no
   hamburger menu (below): the rest is on the pages themselves — the
   profile's list of account pages, the desk's list of its sections. */

.app-tabbar,
.app-tabbar-spacer {
    display: none;
}

@media (max-width: 991.98px) {
    .app-tabbar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 1025;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
        background-color: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 20px rgba(var(--brand-rgb), 0.05);
    }

    .app-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.35rem 0.25rem;
        min-height: 48px;
        border-radius: var(--radius-sm);
        color: var(--ink-muted);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-decoration: none;
        line-height: 1.3;
        text-align: center;
    }

    .app-tabbar a i {
        font-size: 1.3rem;
        line-height: 1;
    }

    .app-tabbar a.active {
        color: var(--brand);
        font-weight: 800;
    }

    .app-tabbar a.active i {
        color: var(--brand);
    }

    /* room for the bar under the last thing on the page — the include
       draws this spacer in the flow, where the bar itself is fixed */
    .app-tabbar-spacer {
        display: block;
        height: calc(4.75rem + env(safe-area-inset-bottom));
    }

    body:has(.app-tabbar) .btn-back-to-top {
        inset-block-end: calc(5.25rem + env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------ phones: no hamburger menu ---- */
/* The owner's call: the tab bar is a phone's navigation, so neither the
   public header nor the panels' top bar opens a menu there. The public
   header's menu also held the theme switch and the sign-in / account button,
   which a phone still needs — they move up beside the logo, and the links
   stay for wider screens. The admin panel has its own shell and keeps its
   menu. Done here rather than in the template's header, which the upstream
   merges would fight over. */
@media (max-width: 991.98px) {
    .landing-body .landing-header .navbar-toggler,
    .landing-body .panel-topbar #panel-sidebar-toggle {
        display: none !important;
    }

    .landing-body .landing-header .navbar > .container {
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .landing-body .landing-header .navbar-brand {
        min-width: 0;
    }

    .landing-body .landing-header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 0;
        margin-inline-start: auto;
    }

    .landing-body .landing-header .navbar-collapse > .navbar-nav {
        display: none;
    }

    .landing-body .landing-header .navbar-collapse > .d-flex {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 !important;
    }
}

/* ------------------------------- phones: the discovery home and no more ---- */
/* The owner's call, like the menu above: on a phone the home page is the
   booking domain's discovery (`.home-discover`, `.home-section` — drawn by
   home_discovery.html) and stops there. The template's landing sections under
   it (features, how it works, stats, testimonials, articles, FAQ, the call to
   action) and the footer, on every public page, are for wider screens. The
   landing settings' switches still decide what a desktop shows.
   Only the home page's discovery is the cut (`[data-home-discover]`): the
   barbers page opens on the same `.home-discover` header, and the cut hid
   its whole list on a phone. */
@media (max-width: 991.98px) {
    .landing-body .landing-footer,
    .landing-body #main-content:has(> .home-discover[data-home-discover]) > section:not(.home-discover, .home-section) {
        display: none !important;
    }
}

/* --------------------------------------------------- accessibility ---- */
/* WCAG 2.2 AA across the main/v3 shell — the customer's pages and the desk
   (the UX review, 2026-09-30). */

/* 2.4.1: the skip link, hidden until the keyboard reaches it */
.skip-link {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--brand);
    color: var(--on-brand);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* 2.4.7 + 1.4.11: one visible ring for everything a keyboard can reach, in
   the palette's strongest colour (navy on porcelain, brass on graphite) */
.landing-body a:focus-visible,
.landing-body button:focus-visible,
.landing-body summary:focus-visible,
.landing-body [role="button"]:focus-visible,
.landing-body [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* 2.4.11: a focused field never hides under the phone's fixed bars */
@media (max-width: 991.98px) {
    html:has(.app-tabbar) {
        scroll-padding-block-end: calc(5.5rem + env(safe-area-inset-bottom));
    }

    html:has(.app-tabbar):has(.sticky-actions) {
        scroll-padding-block-end: calc(10rem + env(safe-area-inset-bottom));
    }
}

/* 2.3.3: motion only for those who have not asked for less */
@media (prefers-reduced-motion: reduce) {
    .landing-body *,
    .landing-body *::before,
    .landing-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}