/* ══════════════════════════════════════════════════════════════════════════
   ZAPLET BRAND LAYER · brand.css
   Shared primitives for the zapletrakija.rs re-skin of Zaplet Finder.
   Spec: docs/redesign-plan.md §4, §5.2, §7, §7a, Appendix A.
   Execution rules (win over the spec): docs/redesign/execution-rules.md §3.
   Hand-off notes for page agents: docs/redesign/notes/foundation-css.md
   Visual check: docs/redesign/styleguide.html
   ──────────────────────────────────────────────────────────────────────────
   LOAD ORDER (every page that opts in):
     Bootstrap → Leaflet → markercluster → flatpickr → tokens.css → brand.css
     → the page's own inline <style>.
   Page rules therefore win ties. That is the CASCADE CONTRACT: for every
   element listed below, the page keeps LAYOUT ONLY (display, position,
   inset, width/height, margin, padding, flex and grid props, order, z-index,
   overflow) and strips background*, border*, border-radius, box-shadow,
   outline, color, font*, letter-spacing, text-transform from its own rules,
   including compound and state selectors (.filter-modal .chip, .chip.active,
   :hover, :focus, :disabled) and any `!important` skin on Leaflet chrome.
   Tickets and chips have NO css border (their rules are painted), so an
   element that had a 1px border is 2px smaller unless its padding grows.
   Framed cards keep a 1px TRANSPARENT border, so their geometry is unchanged.

   RULES THIS FILE FOLLOWS
   • Visual properties sit on plain class selectors (specificity 0,1,0) or on
     :is() lists of plain classes (also 0,1,0). Only `position: relative`
     sits inside :where() (0,0,0), so a page's fixed/absolute/sticky wins.
   • Exclusions add no specificity: .btn-apply:where(:not(#clientSubmit)),
     .modal-box:where(:not(#clientModal)), .chip:where(:not(.chip-image)).
   • Anything inside the map uses `.leaflet-container .x`, because Leaflet's
     own link and font rules are 0,1,1.
   • Never `display` (JS toggles it). No @layer (it would lose to Bootstrap).
     No bare element selectors except body, :root and ::selection
     (`*` appears only inside the reduced-motion query, motion props only).
   • Every pseudo-layer has pointer-events: none. Masks are declared as both
     -webkit-mask and mask. Composite mask/rule properties are declared on the
     component's own pseudo-elements, never on :root (a var() inside a custom
     property resolves where it is declared, so :root would freeze --n/--r).
   • The notch mask is four FULL-SIZE radial layers combined with
     mask-composite: intersect. Appendix A's 51% corner tiles dropped the last
     pixel row (the bottom rule vanished) on odd or fractional heights.
   • Hover effects only inside @media (hover: hover) and (pointer: fine).
   • Decoration never uses `outline`: Bootstrap's
     button:focus:not(:focus-visible){outline:0} would erase it after a click.
     `outline` is reserved for :focus-visible.

   SELECTOR → PRIMITIVE MAP  (MC MainConsole, LG login, VE verify-email,
   RP reset-password, ZC ManageZapletClients, MU ManageUsers, SEO seo_pages.py)
   ┌───────────────────────────┬─────────────────────────────────────────────┐
   │ 1 TICKET  filled          │ .btn-apply (MC, MU; ZC #clientSubmit is     │
   │   (gold-bright plate;     │   EXCLUDED: its ID rule sets position:static│
   │   hover/focus reveals a   │   so the layers would cover the modal),     │
   │   clear gold one; Filteri │ .btn-filter (MC), .btn-go-login (MC <a>),   │
   │   reveals opaque beige)   │ .age-gate-btn both variants (MC),           │
   │                           │ .btn-primary-gold (LG, RP), .btn-gold       │
   │                           │ (VE, RP <a>/<button>), .btn-create (MU, ZC),│
   │                           │ .btn-primary (SEO <a>)                      │
   │   outline (beige fill;    │ .btn-locations, .btn-reset (MC), .btn-back  │
   │   hover/focus wipes       │ (MU, ZC), .btn-cancel, .btn-geocode (ZC),   │
   │   gold-bright up)         │ .nav-map-btn, .action-link (SEO <a>),       │
   │                           │ .popup-action-btn, every one, Navigacija's  │
   │                           │ .primary included (MC, ZC <a>)              │
   │   danger                  │ .btn-danger-full (MU, ZC)                   │
   │   sizes                   │ regular: notch 13, 16px · compact:          │
   │                           │ .btn-back .btn-geocode .btn-create notch 7, │
   │                           │ 14px · small: .btn-pill-confirm (14px),     │
   │                           │ .popup-action-btn (12px, mixed case) notch 4│
   │   contextual sizes        │ .nav-map-btn compact at ≤767 (SEO);         │
   │                           │ filter-footer tickets 14px at ≤360 (MC);    │
   │                           │ 20px labels from 768: .age-gate-btn (MC),   │
   │                           │ .btn-primary-gold, .btn-gold (LG, VE, RP),  │
   │                           │ .btn-primary, .action-link (SEO)            │
   │   on charcoal surfaces    │ any ticket inside .page-footer or .toast    │
   │ 2 TEXT LINK               │ .btn-text-dismiss, .promo-dismiss (MC),     │
   │                           │ .back-link (LG, RP <a>), .resend-link (LG), │
   │                           │ label size: .card-link (ZC <a>),            │
   │                           │ .btn-clear-filters (ZC)                     │
   │ 3 NOTCHED CHIP            │ .chip except .chip-image (MC),              │
   │                           │ .multi-select-trigger (MU, ZC),             │
   │                           │ .chip-link (SEO <a>, category-tab type)     │
   │   IMAGE CHIP (no mask)    │ .chip-image (MC)                            │
   │ 4 TAB                     │ .auth-tab (LG)                              │
   │ 5 MEDALLION round         │ map 44px: .profile-btn, .login-prompt-btn,  │
   │                           │ .location-btn, .legend-toggle-btn,          │
   │                           │ .brand-ig-widget, .brand-site-widget (MC)   │
   │                           │ · 32px: .rec-call-btn,                      │
   │                           │ .rec-store-btn, .rec-ig-btn, .rec-nav-btn   │
   │                           │ (MC <a>), .modal-close (MC, MU, ZC) · 28px: │
   │                           │ .btn-cog (MU, ZC), .legend-overlay-close(MC)│
   │   square                  │ Leaflet zoom buttons (MC, ZC)               │
   │ 6 PLAIN ICON BUTTON       │ .panel-minimize-btn (MC),                   │
   │                           │ .toggle-password (MC, LG, RP, MU)           │
   │ 7 POPOVER + MENU ITEM     │ panels: .profile-dropdown (MC),             │
   │                           │ .cog-dropdown (MU, ZC), .multi-select-menu  │
   │                           │ (MU, ZC) · items: .dropdown-item-custom     │
   │                           │ (.danger) (MC), .cog-item(.danger) (MU, ZC),│
   │                           │ .multi-select-option (MU <button>, ZC       │
   │                           │ <label> + checkbox) · .dropdown-divider-    │
   │                           │ custom (MC <hr>)                            │
   │ 8 FRAMED CARD  full       │ .age-gate-card, .cp-modal-box (MC),         │
   │   (scooped panel + outer  │ .login-card (LG), .card (VE, RP; Bootstrap  │
   │   frame, no inner rule)   │ .card overridden), .modal-box (MU all, ZC   │
   │                           │ #deleteModal), .map-cta (SEO)               │
   │   inner frame only        │ .loc-prompt-toast, .login-promo-modal,      │
   │   (scooped panel + inner  │ .filter-modal, .side-panel, .legend-panel,  │
   │   rule, no outer frame)   │ .legend-overlay (MC), .info-block (SEO),    │
   │                           │ .leaflet-popup-content-wrapper (MC, ZC)     │
   │   plain (no notch)        │ ZC #clientModal: base .modal-box paper +    │
   │                           │ 1px rule; never the masked layers           │
   │   border-only overlay     │ .client-card (ZC), .user-card (MU): NEVER a │
   │                           │ stacking context (cog menus hang into the   │
   │                           │ next row)                                   │
   │ 9 UNDERLINE FIELD         │ .float-field/.float-input/.float-label/     │
   │                           │ .toggle-password/.invalid-feedback-custom/  │
   │                           │ .field-error (MC, LG, RP, MU, ZC);          │
   │                           │ .float-select, .select-label (MU, ZC);      │
   │                           │ .search-input + .search-wrap svg (MU, ZC)   │
   │ 10 LABEL BADGE            │ .type-badge.<type>, .priority-badge,        │
   │                           │ .product-pill.cocktail/.online,             │
   │                           │ .no-coords-tag (ZC), .role-badge.admin/.user│
   │                           │ (MU)                                        │
   │ 11 TOAST (charcoal)       │ .toast, .toast.success, .toast.error        │
   │                           │ (MC, MU, ZC; Bootstrap .toast overridden,   │
   │                           │ its :not(.show){display:none} kept)         │
   │ 12 OVERLAY                │ .modal-backdrop-custom (MC, MU, ZC)         │
   │ 13 SHARED ADMIN / AUTH    │ .section-title, .client-count, .user-count, │
   │                           │ .grid-state, .confirm-text, .modal-title,   │
   │                           │ .check-item/.check-label (ZC), .top-bar-sep,│
   │                           │ .top-bar-page (MU, ZC; .top-bar itself is   │
   │                           │ page CSS), .error-banner (LG, RP),          │
   │                           │ .spinner (VE)                               │
   │ 14 LEAFLET SKIN           │ .leaflet-container, tiles, popup wrapper/   │
   │                           │ tip/close, zoom, attribution, tooltip       │
   │                           │ (MC and the ZC preview map: identical).     │
   │                           │ Popup CONTENT (.popup-*) and clusters stay  │
   │                           │ in page CSS.                                │
   └───────────────────────────┴─────────────────────────────────────────────┘
   PER-PAGE CAVEATS (details in the notes file)
   • MC .age-gate-btn sizes are page CSS: the site's fixed plate widths
     (204/230px "Da, imam 18+", 93/100px "Ne").
   • MC .btn-locations keeps its page `position:relative; z-index:102`.
   • MC .modal-handle::before (the 120×24 drag area) is untouched: .modal-handle
     is not a primitive.
   • MC .location-btn.locating: delete the page's `pulse-ring` box-shadow
     animation; brand.css draws a rotating ring on ::after instead.
   • ZC #clientSubmit and #clientModal are styled by ZC itself (flat bar,
     plain paper modal). ZC .check-item tick: delete the page tick rule.
   • .popup-address is popup CONTENT (page CSS): use .leaflet-container
     .popup-address for its colour and edit its inline text-decoration.
   • .popup-action-btn: the page must give it padding and drop the round
     .popup-icon skin (layout stays icon-above-label, no taller than today).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · BASE ─────────────────────────────────────────────────────────────── */

/* Scrollbars: a thin gold thumb on a clear track, in the brand's warm
   metal instead of grey. scrollbar-color is inherited, so every scroll area
   takes it from here; scrollbar-width is not, so the pages set `thin` on
   their own scroll areas (this :root one is the page's own scrollbar). */
:root {
  color-scheme: light;
  scrollbar-color: var(--z-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

/* Safari has no scrollbar-color: the same thin gold thumb through WebKit's
   scrollbar pseudo-elements (a pseudo-element, not a bare element
   selector). Chrome and Firefox take the standard properties above. */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--z-scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--z-scrollbar-thumb-hover);
  }
}

body {
  font-family: var(--z-font-brand);
  font-weight: var(--z-weight-book);
  color: var(--z-text);
  font-synthesis-weight: none;        /* Belleza has one weight: never fake bold */
  text-underline-offset: 4px;         /* inherited: every underline sits 4px low */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--z-accent-tint-40);
  color: var(--z-text);
}

/* Focus ring. Outline (not box-shadow) survives forced colours, and nothing
   decorative uses outline, so Bootstrap's click reset can't erase anything. */
:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 3px;
}

/* Charcoal surfaces flip the ring (and every descendant's ring) to beige. */
.toast,
.page-footer,
.leaflet-tooltip {
  --z-focus: var(--z-focus-inverse);
}


/* ── 1 · TICKETS ──────────────────────────────────────────────────────────── */
/* Every ticket is the site's ButtonPlate (zapletrakija.rs): a plate with
   four concave notches and a thin outer rule, plus a keyline rectangle 4px
   in that runs through the notches. Two absolutely positioned layers sit
   behind the label:
     ::before  rest plate (fill, outer rule, keyline)
     ::after   reveal plate (same rules), clipped away until hover/focus
   Rules are gradients painted INSIDE the layers: negative-z pseudo-elements
   paint above the isolated host's own background, and decoration must never
   be `outline`.
   Per-element knobs (custom properties, set below per variant/size):
     --n notch radius · --i keyline inset · --r / --rw rule colour of the
     rest / reveal plate · --fill / --wipe plate fills · --ink / --ink-on
     label colour at rest / revealed · --lift 100% when the reveal is
     transparent, so the rest plate wipes away with it (0% otherwise).      */

:where(.btn-apply:not(#clientSubmit), .btn-pill-confirm, .btn-go-login, .btn-filter,
       .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
       .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
       .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full) {
  position: relative;
}

/* Defaults = OUTLINE ticket, regular size. */
.btn-apply:where(:not(#clientSubmit)),
.btn-pill-confirm,
.btn-go-login,
.btn-filter,
.age-gate-btn,
.btn-primary-gold,
.btn-gold,
.btn-create,
.btn-primary,
.popup-action-btn,
.btn-locations,
.btn-reset,
.btn-back,
.btn-cancel,
.btn-geocode,
.nav-map-btn,
.action-link,
.btn-danger-full {
  --n: var(--z-notch);
  --i: var(--z-plate-inset);
  --r: var(--z-rule);
  --rw: var(--z-rule);
  --fill: var(--z-beige);
  --wipe: var(--z-accent-fill);
  --ink: var(--z-text);
  --ink-on: var(--z-text);
  --lift: 0%;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-base);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--z-dur-reveal) var(--z-ease-reveal);
}

/* FILLED tickets: the site's "secondary" plate. Gold-bright at rest; the
   reveal is transparent with gold-bright rules and label, and the gold plate
   wipes away (--lift). The revealed label is 1.7:1 on beige: the owner chose
   the site's look over D3 (DESIGN_SYSTEM.md §2.5). */
.btn-apply:where(:not(#clientSubmit)),
.btn-pill-confirm,
.btn-go-login,
.btn-filter,
.age-gate-btn,
.btn-primary-gold,
.btn-gold,
.btn-create,
.btn-primary {
  --fill: var(--z-accent-fill);
  --wipe: transparent;
  --rw: var(--z-gold-bright);
  --ink: var(--z-on-accent);
  --ink-on: var(--z-gold-bright);
  --lift: 100%;
}
/* Except "Filteri", which floats over the map: a transparent reveal would
   show the tiles through it, so it keeps an opaque beige reveal with a
   charcoal label. */
.btn-filter {
  --wipe: var(--z-beige);
  --rw: var(--z-rule);
  --ink-on: var(--z-text);
  --lift: 0%;
}

/* DANGER ticket: destructive red, off-white label (5.67:1, 7.97 on hover). */
.btn-danger-full {
  --fill: var(--z-danger);
  --wipe: var(--z-danger-hover);
  --r: var(--z-ink);
  --rw: var(--z-ink);
  --ink: var(--z-off-white);
  --ink-on: var(--z-off-white);
}

/* SIZES */
.btn-back,
.btn-geocode,
.btn-create {
  --n: var(--z-notch-chip);
  --i: 4px;
  font-size: var(--z-text-sm);
}
.btn-pill-confirm {
  --n: var(--z-notch-sm);
  --i: 3px;
  font-size: var(--z-text-sm);
}
/* Popup actions: captions under icons, four in a row inside the 315px mobile
   popup (~52px of text room each). Uppercase cannot fit at any legible size
   (INSTAGRAM needs ~60px even at 11px), so these stay mixed case 12px. */
.popup-action-btn {
  --n: var(--z-notch-sm);
  --i: 3px;
  font-size: var(--z-text-xs);
  letter-spacing: var(--z-tracking-tab);
  text-transform: none;
}
/* MU ≤575: .btn-create shrinks to a 36×36 icon button; keep only the inner rule. */
@media (max-width: 575px) {
  .btn-create { --n: 0px; }
}
/* CONTEXTUAL SIZES (after the defaults above, so they win on order) */
/* MC filter footer, embed at 340px: in the two-up footer "PRIMENI FILTERE"
   needs 131px at 16px/.04em but each ticket has ~114px of text room, so it
   wrapped to two lines. 14px/.02em measures 113px. */
@media (max-width: 360px) {
  .modal-footer-buttons :is(.btn-apply, .btn-reset) {
    font-size: var(--z-text-sm);
    letter-spacing: .02em;
  }
}
/* SEO nav ticket on phones: the compact size (as .btn-back / .btn-geocode /
   .btn-create), so the links and the ticket share one row under the logo
   down to 360px. */
@media (max-width: 767px) {
  .nav-map-btn {
    --n: var(--z-notch-chip);
    --i: 4px;
    font-size: var(--z-text-sm);
  }
}
/* Regular tickets in page content (age gate, auth, SEO): the site's label is
   text-base md:text-xl, so 20px from 768px, with its 0.64px tracking (.032em
   at 20px). Map tickets (.btn-filter, .btn-apply, .btn-reset,
   .btn-locations) and the compact and small sizes stay 16/14/12px for the
   map's density and the embed budget (design review DR-04). */
@media (min-width: 768px) {
  .age-gate-btn,
  .btn-primary-gold,
  .btn-gold,
  .btn-primary,
  .action-link {
    font-size: var(--z-text-xl);
    letter-spacing: .032em;
  }
}

/* Map-floating tickets get the float elevation. A filter follows the notches;
   a box-shadow would shade the cut-out corners. */
.btn-filter,
.btn-locations {
  filter: var(--z-drop-float);
}

/* Leaflet's `.leaflet-container a { color }` is 0,1,1. */
.leaflet-container .popup-action-btn {
  color: var(--ink);
}

/* The two layers: the site's ButtonPlate (zapletrakija.rs), drawn with
   gradients so it fits any size and takes each variant's colours. No mask:
     • the fill is four corner tiles, each transparent inside its own notch
       circle (the tiles overlap by 1px, so odd or fractional sizes leave no
       seam, and they share one colour);
     • the outer rule is four arcs on the notches plus four straight runs;
     • the keyline is a whole rectangle --i in, painted on top, so it runs
       straight through the notches over the page, as on the site.
   Rules are 1px at 75% of their colour: the site's .75px stroke. */
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full)::before,
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --rc: color-mix(in srgb, var(--r) 75%, transparent);
  --z-plate-fill:
    radial-gradient(circle at 0 0, transparent var(--n), var(--f) calc(var(--n) + .5px)) top left / calc(50% + 1px) calc(50% + 1px) no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--n), var(--f) calc(var(--n) + .5px)) top right / calc(50% + 1px) calc(50% + 1px) no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--n), var(--f) calc(var(--n) + .5px)) bottom left / calc(50% + 1px) calc(50% + 1px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--n), var(--f) calc(var(--n) + .5px)) bottom right / calc(50% + 1px) calc(50% + 1px) no-repeat;
  --z-plate-rule:
    radial-gradient(circle at 0 0, transparent var(--n), var(--rc) calc(var(--n) + .25px), var(--rc) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) top left / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--n), var(--rc) calc(var(--n) + .25px), var(--rc) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) top right / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--n), var(--rc) calc(var(--n) + .25px), var(--rc) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) bottom left / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--n), var(--rc) calc(var(--n) + .25px), var(--rc) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) bottom right / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    linear-gradient(var(--rc), var(--rc)) top / calc(100% - 2 * var(--n)) 1px no-repeat,
    linear-gradient(var(--rc), var(--rc)) bottom / calc(100% - 2 * var(--n)) 1px no-repeat,
    linear-gradient(var(--rc), var(--rc)) left / 1px calc(100% - 2 * var(--n)) no-repeat,
    linear-gradient(var(--rc), var(--rc)) right / 1px calc(100% - 2 * var(--n)) no-repeat;
  /* `calc(100% - --i)` already accounts for the 1px image: 100% puts the
     image's far edge on the box's far edge. */
  --z-plate-keyline:
    linear-gradient(var(--rc), var(--rc)) var(--i) var(--i) / calc(100% - 2 * var(--i)) 1px no-repeat,
    linear-gradient(var(--rc), var(--rc)) var(--i) calc(100% - var(--i)) / calc(100% - 2 * var(--i)) 1px no-repeat,
    linear-gradient(var(--rc), var(--rc)) var(--i) var(--i) / 1px calc(100% - 2 * var(--i)) no-repeat,
    linear-gradient(var(--rc), var(--rc)) calc(100% - var(--i)) var(--i) / 1px calc(100% - 2 * var(--i)) no-repeat;
  background: var(--z-plate-keyline), var(--z-plate-rule), var(--z-plate-fill);
  transition: clip-path var(--z-dur-reveal) var(--z-ease-reveal);
}

/* Rest layer. Where the reveal is transparent (--lift: 100%, the filled
   tickets) it wipes away upwards while the reveal wipes in, as the site's
   base plate does; elsewhere the opaque reveal simply covers it. */
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full)::before {
  --f: var(--fill);
  clip-path: inset(0);
}

/* Reveal layer, clipped to nothing until hover or keyboard focus. */
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full)::after {
  --r: var(--rw);
  --f: var(--wipe);
  clip-path: inset(100% 0 0 0);
}

/* The age gate keeps the site's own plate SVGs, stretched to each button
   exactly as the site stretches them, so its two buttons stay
   pixel-identical to zapletrakija.rs. (The stretch narrows the notches of
   the 100px "Ne"; the recipe above keeps a round notch at every size, which
   small tickets need.) Colours, reveal and --lift come from the filled
   variant above; only the painting differs. */
.age-gate-btn::before {
  background:
    url(/multimedia/brand/ticket-keyline.svg) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
    url(/multimedia/brand/ticket-plate.svg) 0 0 / 100% 100% no-repeat;
}
.age-gate-btn::after {
  background:
    url(/multimedia/brand/ticket-keyline-reveal.svg) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
    url(/multimedia/brand/ticket-plate-reveal.svg) 0 0 / 100% 100% no-repeat;
}

/* Wipe: hover (pointer devices only) and keyboard focus. */
@media (hover: hover) and (pointer: fine) {
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):not(:disabled):hover {
    color: var(--ink-on);
  }
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):not(:disabled):hover::after {
    clip-path: inset(0);
  }
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):not(:disabled):hover::before {
    clip-path: inset(0 0 var(--lift) 0);
  }
  .leaflet-container .popup-action-btn:hover {
    color: var(--ink-on);
  }
}
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):focus-visible {
  color: var(--ink-on);
}
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):focus-visible::after {
  clip-path: inset(0);
}
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):focus-visible::before {
  clip-path: inset(0 0 var(--lift) 0);
}

/* Disabled: tickets .7; form submits .4 and not-allowed (site newsletter). */
:is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
    .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
    .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
    .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full):disabled {
  opacity: var(--z-disabled-opacity);
  cursor: default;
}
:is(.btn-primary-gold, .btn-apply:where(:not(#clientSubmit)), .btn-danger-full, .btn-gold,
    .btn-pill-confirm):disabled {
  opacity: var(--z-disabled-opacity-form);
  cursor: not-allowed;
}

/* On charcoal surfaces (SEO footer, toasts): rules and label turn gold-bright.
   Outline → transparent with gold rules, wipes gold-bright with a charcoal
   label. Filled → stays gold-bright, wipes to charcoal with gold rules. */
:is(.page-footer, .toast) :is(.btn-locations, .btn-reset, .btn-back, .btn-cancel,
                             .btn-geocode, .nav-map-btn, .action-link) {
  --fill: transparent;
  --r: var(--z-gold-bright);
  --wipe: var(--z-gold-bright);
  --rw: var(--z-charcoal);
  --ink: var(--z-gold-bright);
  --ink-on: var(--z-on-accent);
}
:is(.page-footer, .toast) :is(.btn-apply, .btn-pill-confirm, .btn-go-login, .btn-filter,
                             .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create,
                             .btn-primary) {
  --fill: var(--z-gold-bright);
  --r: var(--z-charcoal);
  --wipe: var(--z-charcoal);
  --rw: var(--z-gold-bright);
  --ink: var(--z-on-accent);
  --ink-on: var(--z-gold-bright);
  --lift: 0%;
}


/* ── 2 · TEXT LINKS ───────────────────────────────────────────────────────── */
/* Charcoal, underlined 4px below, hover dims to .8 (site hover:opacity-80). */

.btn-text-dismiss,
.promo-dismiss,
.back-link,
.resend-link,
.card-link,
.btn-clear-filters {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: opacity var(--z-dur-fast) var(--z-ease-standard);
}
/* Label-size links: uppercase 12px, used among chips and in card footers. */
.card-link,
.btn-clear-filters {
  font-size: var(--z-text-xs);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :is(.btn-text-dismiss, .promo-dismiss, .back-link, .resend-link, .card-link,
      .btn-clear-filters):not(:disabled):hover {
    opacity: var(--z-hover-dim);
  }
}
:is(.btn-text-dismiss, .promo-dismiss, .back-link, .resend-link, .card-link,
    .btn-clear-filters):disabled {
  opacity: var(--z-disabled-opacity);
  cursor: default;
}

/* Link-hover reset for primitives that are <a>: the SEO page's bare
   `a:hover { text-decoration: underline }` (0,1,1) would underline them.
   (Bootstrap's a:hover only swaps a colour variable.) Touch devices never
   reach this block, so seo.css should scope its own a:hover to plain links. */
@media (hover: hover) and (pointer: fine) {
  :is(.btn-go-login, .btn-gold, .btn-primary, .nav-map-btn, .action-link, .chip-link,
      .popup-action-btn, .brand-ig-widget, .brand-site-widget, .rec-call-btn, .rec-store-btn,
      .rec-ig-btn, .rec-nav-btn):hover {
    text-decoration: none;
  }
}


/* ── 3 · CHIPS ────────────────────────────────────────────────────────────── */
/* Notched "label" chip: 7px notch, charcoal-45% rule, 14px uppercase.
   Active / has-value: gold-bright fill and a charcoal rule (the wipe layer,
   so toggling animates). Hover on the map's filter chips (.chip) plays the
   tickets' gold wipe from the bottom, in a light gold (40%) that previews
   the selection without looking selected (owner's call, 2026-10-06); the
   admin triggers and SEO city chips keep the darker rule and a sunk fill.   */

:where(.chip, .multi-select-trigger, .chip-link) {
  position: relative;
}

.chip:where(:not(.chip-image)),
.multi-select-trigger,
.chip-link {
  --n: var(--z-notch-chip);
  --r: var(--z-tint-45);
  --rw: var(--z-rule);
  --fill: var(--z-surface-card);
  --wipe: var(--z-accent-fill);
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:is(.chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::before,
:is(.chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --z-notch-mask:
    radial-gradient(circle at 0 0, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 100% 0, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 0 100%, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 100% 100%, transparent var(--n), black calc(var(--n) + .5px));
  --z-notch-rule:
    radial-gradient(circle at 0 0, transparent var(--n), var(--r) calc(var(--n) + .25px), var(--r) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) top left / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--n), var(--r) calc(var(--n) + .25px), var(--r) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) top right / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--n), var(--r) calc(var(--n) + .25px), var(--r) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) bottom left / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--n), var(--r) calc(var(--n) + .25px), var(--r) calc(var(--n) + 1px), transparent calc(var(--n) + 1.25px)) bottom right / calc(var(--n) + 2px) calc(var(--n) + 2px) no-repeat,
    linear-gradient(var(--r), var(--r)) top / calc(100% - 2 * var(--n)) 1px no-repeat,
    linear-gradient(var(--r), var(--r)) bottom / calc(100% - 2 * var(--n)) 1px no-repeat,
    linear-gradient(var(--r), var(--r)) left / 1px calc(100% - 2 * var(--n)) no-repeat,
    linear-gradient(var(--r), var(--r)) right / 1px calc(100% - 2 * var(--n)) no-repeat;
  -webkit-mask: var(--z-notch-mask);
  mask: var(--z-notch-mask);
  -webkit-mask-composite: source-in;         /* must follow the shorthands */
  mask-composite: intersect;
}
:is(.chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::before {
  background: var(--z-notch-rule), var(--fill);
  transition: background-color var(--z-dur-fast) var(--z-ease-standard);
}
:is(.chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::after {
  --r: var(--rw);
  background: var(--z-notch-rule), var(--wipe);
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--z-dur-reveal) var(--z-ease-reveal);
}

/* Selected */
.chip.active::after,
.multi-select.has-value .multi-select-trigger::after {
  clip-path: inset(0);
}
.chip.active,
.multi-select.has-value .multi-select-trigger {
  color: var(--z-on-accent);
}

/* An unselected filter chip's wipe is the light hover gold. It is set on
   the chip itself, not on :hover, so the wipe keeps its tone while it
   slides back down after the pointer leaves. */
.chip:where(:not(.chip-image)):not(.active) {
  --wipe: var(--z-accent-tint-40);
}

/* Open / hover: the rule darkens to charcoal. Admin triggers and SEO city
   chips also sink their fill a tone; filter chips wipe gold in instead. */
.multi-select.open .multi-select-trigger {
  --r: var(--z-rule);
}
@media (hover: hover) and (pointer: fine) {
  :is(.chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link):hover {
    --r: var(--z-rule);
  }
  :is(.multi-select-trigger, .chip-link):hover {
    --fill: var(--z-surface-hover);
  }
  .chip:where(:not(.chip-image)):hover::after {
    clip-path: inset(0);
  }
}

/* Multi-select trigger content (shared admin piece: MU and ZC stay identical). */
.multi-select-trigger {
  text-align: left;
}
.multi-select-trigger-label {
  color: var(--z-text-muted);
  font-size: var(--z-text-xs);
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
}
.multi-select-trigger-value {
  color: inherit;
}
.multi-select.has-value .multi-select-trigger-label,
.multi-select.has-value .multi-select-trigger-value {
  color: var(--z-on-accent);                 /* muted text fails on gold-bright */
}
.multi-select-trigger svg {
  color: currentColor;
  transition: transform var(--z-dur-base) var(--z-ease-standard);
}
.multi-select.open .multi-select-trigger svg {
  transform: rotate(180deg);
}

/* SEO city chips (.chip-link): the site's category-tab typography (spec §4.2
   "uppercase, opacity .7 → 1 on hover"). Tab tracking; 16px from 768. The
   idle chip dims its LABEL to muted ink (5.69:1 on beige), not the whole
   chip: opacity also faded the notched rule and the fill, so idle chips
   looked disabled (design review DR-11). Full ink on pointer hover and
   keyboard focus. Declared after the chip rules above, so it wins their
   colour, tracking and size on order.                                        */
.chip-link {
  letter-spacing: var(--z-tracking-tab);
  color: var(--z-text-muted);
  transition: color var(--z-dur-fast) var(--z-ease-standard);
}
.chip-link:focus-visible {
  color: var(--z-text);
}
@media (hover: hover) and (pointer: fine) {
  .chip-link:hover {
    color: var(--z-text);
  }
}
@media (min-width: 768px) {
  .chip-link {
    font-size: var(--z-text-base);
  }
}

/* IMAGE CHIP: framed tile, no mask (own overflow:hidden and a scale(1.3) image
   stay). Rest: see-through tile on the sheet's paper, 45% rule, faint inner
   frame. Behind the photo (::after, z -1 in the isolated tile; the page sets
   its box) is the site's product-card ornament, card-ornament.svg, as on
   zapletrakija.rs/nase-rakije: faint (.12) at rest, brightening to .62 over
   700ms, which the site does on hover and the owner chose for SELECTED
   (2026-10-06). Pointer hover brightens it partway. SELECTED is made
   unmistakable on top of that (the ornament alone hid behind wide photos):
   the ornament at full strength, a light gold wash, the inner frame turned
   into a 2px gold-bright frame, and a charcoal rule. */
:where(.chip-image) {
  position: relative;
}
.chip-image {
  isolation: isolate;                        /* keeps the frame z-indexes local */
  background-color: transparent;
  background-image: none;
  border: var(--z-rule-width) solid var(--z-tint-45);
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--z-dur-fast) var(--z-ease-standard),
              background-color var(--z-dur-fast) var(--z-ease-standard);
}
.chip-image span {
  font-size: var(--z-text-xs);
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-nav);
}
.chip-image::before,
.chip-image::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
}
.chip-image::before {                        /* rest inner frame, above the image */
  z-index: 1;
  border: var(--z-rule-width) solid var(--z-rule-soft);
}
.chip-image::after {                         /* the site's card ornament, behind the photo */
  z-index: -1;
  background: url(/multimedia/brand/card-ornament.svg) center / auto 92% no-repeat;
  opacity: .12;
  transition: opacity 700ms ease-out;        /* the site's duration-700 ease-out */
}
.chip-image.active {
  border-color: var(--z-rule);
  background-color: var(--z-accent-tint-20);
}
.chip-image.active::before {                 /* the inner frame becomes the selection frame */
  border: 2px solid var(--z-accent-fill);
}
.chip-image.active::after {
  opacity: 1;                                /* the SVG's own .62 group: the site's hover tone */
}
@media (hover: hover) and (pointer: fine) {
  .chip-image:hover {
    border-color: var(--z-rule);
  }
  .chip-image:not(.active):hover::after {
    opacity: .3;
  }
}


/* ── 4 · TAB ──────────────────────────────────────────────────────────────── */
/* Site category tabs: uppercase, idle dimmed, active full ink with a
   charcoal underline 4px below. Idle uses .75 (not the site's .7): at 18px
   .7 is 4.31:1 on beige and fails AA; .75 is 4.97.                           */

.auth-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  opacity: var(--z-tab-idle-opacity);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-lg);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-snug);
  letter-spacing: var(--z-tracking-tab);
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: opacity var(--z-dur-fast) var(--z-ease-standard),
              text-decoration-color var(--z-dur-fast) var(--z-ease-standard);
}
.auth-tab.active {
  opacity: 1;
  text-decoration-color: currentColor;
}
/* Keyboard focus lifts an idle tab to full ink, as the site's
   focus-visible:opacity-100 does (design review DR-12). */
.auth-tab:focus-visible {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .auth-tab:hover {
    opacity: 1;
  }
}


/* ── 5 · MEDALLIONS ───────────────────────────────────────────────────────── */
/* Extrapolated from the site's round award seal: paper disc, 1px charcoal
   ring, and an inner ring --ring inside it drawn with inset box-shadows
   (never outline). Hover / pressed: gold-bright fill. Sizes are defaults;
   a page that needs another size sets width/height itself.                   */

:where(.profile-btn, .login-prompt-btn, .location-btn, .legend-toggle-btn, .brand-ig-widget,
       .brand-site-widget, .rec-call-btn, .rec-store-btn, .rec-ig-btn, .rec-nav-btn, .btn-cog, .modal-close,
       .legend-overlay-close) {
  position: relative;
}

.profile-btn,
.login-prompt-btn,
.location-btn,
.legend-toggle-btn,
.brand-ig-widget,
.brand-site-widget,
.rec-call-btn,
.rec-store-btn,
.rec-ig-btn,
.rec-nav-btn,
.btn-cog,
.modal-close,
.legend-overlay-close {
  --fill: var(--z-surface-card);
  --ring: 3px;
  --lift: 0 0 transparent;
  width: var(--z-medallion-sm);
  height: var(--z-medallion-sm);
  padding: 0;
  background-color: var(--fill);
  background-image: none;
  border: var(--z-rule-width) solid var(--z-rule);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 var(--ring) var(--fill),
    inset 0 0 0 calc(var(--ring) + 1px) var(--z-rule),
    var(--lift);
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-synthesis-weight: none;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--z-dur-fast) var(--z-ease-standard),
              box-shadow var(--z-dur-fast) var(--z-ease-standard),
              color var(--z-dur-fast) var(--z-ease-standard);
}

/* 44px controls that float over the map. */
.profile-btn,
.login-prompt-btn,
.location-btn,
.legend-toggle-btn,
.brand-ig-widget,
.brand-site-widget {
  --ring: 4px;
  --lift: var(--z-shadow-float);
  width: var(--z-medallion);
  height: var(--z-medallion);
}
/* 28px: admin card cog, legend overlay close (× glyph). */
.btn-cog,
.legend-overlay-close {
  width: var(--z-medallion-xs);
  height: var(--z-medallion-xs);
}
.legend-overlay-close {
  font-size: var(--z-text-lg);
}
.modal-close svg {
  width: 16px;
  height: 16px;
}
/* List-row actions (call, shop, Instagram, navigation; ~25 of them in the
   side panel): one quiet 45% ring and no inner ring, so the column of
   buttons stays below the venue names, like the site's thin line icons
   (design review DR-06). The 44px map controls keep the double seal ring. */
.rec-call-btn,
.rec-store-btn,
.rec-ig-btn,
.rec-nav-btn {
  border-color: var(--z-tint-45);
  box-shadow: none;
  transition: background-color var(--z-dur-fast) var(--z-ease-standard),
              border-color var(--z-dur-fast) var(--z-ease-standard),
              color var(--z-dur-fast) var(--z-ease-standard);
}

/* States */
@media (hover: hover) and (pointer: fine) {
  :is(.profile-btn, .login-prompt-btn, .location-btn, .legend-toggle-btn, .brand-ig-widget,
      .brand-site-widget, .rec-call-btn, .rec-store-btn, .rec-ig-btn, .rec-nav-btn, .btn-cog, .modal-close,
      .legend-overlay-close):hover {
    --fill: var(--z-accent-fill);
  }
  :is(.rec-call-btn, .rec-store-btn, .rec-ig-btn, .rec-nav-btn):hover {
    border-color: var(--z-rule);
  }
}
.profile-btn.open,
.btn-cog.open {
  --fill: var(--z-accent-fill);
}
.location-btn.located {
  color: var(--z-location);
}
/* Locating: a gold arc turning around the disc (static full ring under
   reduced motion, see the motion block). */
.location-btn.locating::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  border-top-color: var(--z-gold-deep);
  border-right-color: var(--z-gold-deep);
  border-radius: 50%;
  pointer-events: none;
  animation: z-spin 900ms linear infinite;
}
@keyframes z-spin {
  to { transform: rotate(360deg); }
}

/* Square medallions: Leaflet zoom control (shared by the map and the ZC
   preview). 0,3,1 to beat `.leaflet-touch .leaflet-bar a:first-child`. */
.leaflet-container .leaflet-control-zoom.leaflet-bar {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.leaflet-container .leaflet-control-zoom :is(a.leaflet-control-zoom-in, a.leaflet-control-zoom-out) {
  --fill: var(--z-surface-card);
  --glyph: var(--z-text);
  width: 34px;
  height: 34px;
  line-height: 32px;
  background-color: var(--fill);
  /* The − and + are drawn, not typed: centred 12×2px bars in the 32px
     padding box (even sizes, so they stay crisp at 1×). The font's own
     glyphs sat ~1.5px low and drift with the face; the text stays for
     forced colours (§16) and is hidden here with font-size 0. */
  background-image: linear-gradient(var(--glyph), var(--glyph));
  background-position: center;
  background-size: 12px 2px;
  background-repeat: no-repeat;
  border: var(--z-rule-width) solid var(--z-rule);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 3px var(--fill),
    inset 0 0 0 4px var(--z-rule),
    var(--z-shadow-float);
  color: var(--z-text);
  font: 0/32px var(--z-font-brand);
  font-synthesis-weight: none;
  text-decoration: none;
  transition: background-color var(--z-dur-fast) var(--z-ease-standard),
              box-shadow var(--z-dur-fast) var(--z-ease-standard);
}
.leaflet-container .leaflet-control-zoom a.leaflet-control-zoom-in {
  background-image:
    linear-gradient(var(--glyph), var(--glyph)),
    linear-gradient(var(--glyph), var(--glyph));
  background-size: 12px 2px, 2px 12px;
}
.leaflet-container .leaflet-control-zoom a.leaflet-control-zoom-out {
  margin-top: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .leaflet-container .leaflet-control-zoom :is(a.leaflet-control-zoom-in, a.leaflet-control-zoom-out):hover {
    --fill: var(--z-accent-fill);
  }
}
.leaflet-container .leaflet-control-zoom :is(a.leaflet-control-zoom-in, a.leaflet-control-zoom-out).leaflet-disabled {
  --fill: var(--z-surface-card);
  --glyph: var(--z-text-muted);
  color: var(--z-text-muted);
  opacity: var(--z-disabled-opacity);
  cursor: default;
}


/* ── 6 · PLAIN ICON BUTTONS ───────────────────────────────────────────────── */

.panel-minimize-btn,
.toggle-password {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text-muted);
  cursor: pointer;
  transition: color var(--z-dur-fast) var(--z-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .panel-minimize-btn:hover,
  .toggle-password:hover {
    color: var(--z-text);
  }
}


/* ── 7 · POPOVERS AND MENU ITEMS ──────────────────────────────────────────── */
/* Paper panel, 1px charcoal rule, a faint inner ring 3px inside it,
   square corners, raised shadow. The 8px padding keeps item fills (the
   selected tint, the danger hover) inside the inner ring. No pseudo-elements
   on the panels (.multi-select-menu scrolls).                                */

.profile-dropdown,
.cog-dropdown,
.multi-select-menu {
  padding: var(--z-space-2);
  background-color: var(--z-surface-raised);
  background-image: none;
  border: var(--z-rule-width) solid var(--z-rule);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 3px var(--z-surface-raised),
    inset 0 0 0 4px var(--z-rule-soft),
    var(--z-shadow-lg);
  color: var(--z-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dropdown-item-custom,
.cog-item,
.multi-select-option {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-snug);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--z-dur-fast) var(--z-ease-standard);
}
/* Option lists hold proper nouns (cities, roles): mixed case reads faster. */
.multi-select-option {
  letter-spacing: normal;
  text-transform: none;
}
.multi-select-option span {
  font-size: inherit;
  line-height: inherit;
}
.multi-select-option input {
  accent-color: var(--z-accent-fill);
}
.multi-select-option.selected {
  background-color: var(--z-accent-tint-25);
}
.multi-select-empty {
  color: var(--z-text-muted);
  font-size: var(--z-text-sm);
}
.dropdown-item-custom.danger,
.cog-item.danger {
  color: var(--z-danger);
}
.cog-item + .cog-item {
  border-top: var(--z-rule-width) solid var(--z-rule-soft);
}
/* Pointer hover is the nav bracket alone (ORNAMENTS O4), as on the site: no
   fill under it, so a selected option keeps its tint while hovered (design
   review DR-13). Destructive items keep their red tint. */
@media (hover: hover) and (pointer: fine) {
  .dropdown-item-custom.danger:hover,
  .cog-item.danger:hover {
    background-color: var(--z-danger-tint);
  }
}
/* Rows sit flush in a clipped panel: draw their focus ring inside. */
.dropdown-item-custom:focus-visible,
.cog-item:focus-visible,
.multi-select-option:focus-visible,
.multi-select-option:focus-within:has(input:focus-visible) {
  outline: 2px solid var(--z-focus);
  outline-offset: -3px;
}
.multi-select-option input:focus-visible {
  outline: 0;                                /* the row carries the ring */
}

/* <hr> divider: Bootstrap's hr{opacity:.25} would fade it to nothing. */
.dropdown-divider-custom {
  border: 0;
  border-top: var(--z-rule-width) solid var(--z-rule-soft);
  color: inherit;
  opacity: 1;
}


/* ── 8 · FRAMED CARDS ─────────────────────────────────────────────────────── */
/* ::before is the masked scoop panel: a flat paper fill (--z-surface-card,
   beige) plus a decorative inner rule --i inside the edge. The host keeps a
   1px TRANSPARENT border, so no page geometry changes (the Leaflet popup's
   ≤640 width maths assume it); the panel covers that border. The FULL
   variant drops the inner rule and gets the outer rules and corner dots
   instead (ORNAMENTS O2, ::after); every other panel keeps the inner rule as
   its only edge.
   No positive z-index anywhere: the popup × and sheet handles stay on top.   */

:where(.age-gate-card, .loc-prompt-toast, .cp-modal-box, .login-card, .card, .modal-box,
       .map-cta, .info-block, .login-promo-modal, .filter-modal, .side-panel, .legend-panel,
       .legend-overlay, .leaflet-popup-content-wrapper) {
  position: relative;
}

/* Base for every modal box, including ZC #clientModal: plain paper. */
.modal-box {
  background-color: var(--z-surface-card);
  background-image: none;
  border: var(--z-rule-width) solid var(--z-rule);
  border-radius: 0;
  box-shadow: var(--z-shadow-xl);
  color: var(--z-text);
}

.age-gate-card,
.loc-prompt-toast,
.cp-modal-box,
.login-card,
.card,
.modal-box:where(:not(#clientModal)),
.map-cta,
.info-block,
.login-promo-modal,
.filter-modal,
.side-panel,
.legend-panel,
.legend-overlay,
.leaflet-popup-content-wrapper {
  --n: var(--z-scoop);
  --i: var(--z-frame-inset);
  --r: var(--z-frame-rule);
  --fill: var(--z-surface-card);
  --tex: none;
  isolation: isolate;
  background: none;
  border: var(--z-rule-width) solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
}
/* Compact panels keep the 12px scoop at every width (the popup × at
   top/right 8–10px, the side-panel header and sheet handles sit close to
   the corners). So do the slim SEO blocks (.map-cta, .info-block: 66–100px
   tall): at 24px the scoops ate a third of their height. */
.loc-prompt-toast,
.map-cta,
.info-block,
.login-promo-modal,
.filter-modal,
.side-panel,
.legend-panel,
.legend-overlay,
.leaflet-popup-content-wrapper {
  --n: var(--z-scoop-sm);
}
/* The map's floating panels (popups, legend, filter sheet, "Naše
   lokacije") are paper rather than flat beige: the owner's call on
   2026-10-06 (the site's own framed cards are flat, design review DR-01).
   They take the page texture token, so forced colours and the ORNAMENTS
   rollback drop it with the page's. */
.filter-modal,
.side-panel,
.legend-panel,
.legend-overlay,
.leaflet-popup-content-wrapper {
  --tex: var(--z-surface-page-image);
}
/* FULL framed cards (the ones with an outer frame) have no inner rule: the
   site's age-gate card shows only its panel edge inside the outer frame, and
   our rectangle 5px in stopped short of the scoops, so the corners looked
   open (design review DR-03). .loc-prompt-toast and .info-block have no
   outer frame (DR-16, DR-09): like the inner-frame panels, they keep it. */
.age-gate-card,
.cp-modal-box,
.login-card,
.card,
.modal-box:where(:not(#clientModal)),
.map-cta {
  --r: transparent;
}
/* Bootstrap .card (verify, reset): override its variables too. */
.card {
  --bs-card-bg: transparent;
  --bs-card-color: var(--z-text);
  --bs-card-border-color: transparent;
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
}

:is(.age-gate-card, .loc-prompt-toast, .cp-modal-box, .login-card, .card,
    .modal-box:where(:not(#clientModal)), .map-cta, .info-block, .login-promo-modal,
    .filter-modal, .side-panel, .legend-panel, .legend-overlay,
    .leaflet-popup-content-wrapper)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--z-rule-width));
  z-index: -1;
  pointer-events: none;
  --z-notch-mask:
    radial-gradient(circle at 0 0, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 100% 0, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 0 100%, transparent var(--n), black calc(var(--n) + .5px)),
    radial-gradient(circle at 100% 100%, transparent var(--n), black calc(var(--n) + .5px));
  --z-inner-rule:
    linear-gradient(var(--r), var(--r)) var(--i) var(--i) / calc(100% - 2 * var(--i)) 1px no-repeat,
    linear-gradient(var(--r), var(--r)) var(--i) calc(100% - var(--i)) / calc(100% - 2 * var(--i)) 1px no-repeat,
    linear-gradient(var(--r), var(--r)) var(--i) var(--i) / 1px calc(100% - 2 * var(--i)) no-repeat,
    linear-gradient(var(--r), var(--r)) calc(100% - var(--i)) var(--i) / 1px calc(100% - 2 * var(--i)) no-repeat;
  -webkit-mask: var(--z-notch-mask);
  mask: var(--z-notch-mask);
  -webkit-mask-composite: source-in;         /* must follow the shorthands */
  mask-composite: intersect;
  background: var(--z-inner-rule), var(--tex), var(--fill);
}

/* Bottom sheets: the panel runs past the screen edge, so its bottom corners
   and bottom rules are pushed below the box (clipped or off-screen). */
.filter-modal::before,
.login-promo-modal::before {
  bottom: calc(-1 * (var(--n) + var(--i) + 2px));
}
@media (max-width: 1024px) {
  .side-panel::before {
    bottom: calc(-1 * (var(--n) + var(--i) + 2px));
  }
}

/* Panels that float over the map: elevation that follows the scoops. */
.side-panel,
.legend-panel,
.legend-overlay,
.loc-prompt-toast {
  filter: var(--z-drop-float);
}

/* BORDER-ONLY OVERLAY: admin cards. Must NEVER become a stacking context
   (no isolation, z-index, transform, filter, opacity < 1, mask, overflow):
   the cog menu (z 20) hangs over the next row and would sink under it.
   position:relative alone is not a stacking context.                        */
:where(.client-card, .user-card) {
  position: relative;
}
.client-card,
.user-card {
  background-color: var(--z-surface-card);
  background-image: none;
  border: var(--z-rule-width) solid var(--z-rule-soft);
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  transition: border-color var(--z-dur-fast) var(--z-ease-standard);
}
.client-card::before,
.user-card::before {
  content: "";
  position: absolute;
  inset: var(--z-frame-inset);
  z-index: auto;
  border: var(--z-rule-width) solid var(--z-frame-rule);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .client-card:hover,
  .user-card:hover {
    border-color: var(--z-tint-45);
  }
}


/* ── 9 · UNDERLINE FIELDS ─────────────────────────────────────────────────── */
/* The site's newsletter fields (zapletrakija.rs, "Prijavite se na
   newsletter"), on paper: a fixed label above the field (14px sentence
   case, ink at 90%), then a transparent field of 14px UPPERCASE text with
   .12em tracking and leading 1, over a 1px rule in ink at 75%.
   Two deliberate differences from the site:
   • focus turns the rule charcoal and 2px (an inset shadow, so no height
     change); the site shows no focus at all;
   • fields whose case matters keep it: passwords, which can be revealed
     (.has-toggle), and URLs ([inputmode="url"]).
   Page metrics (MC, LG, RP, MU, ZC): field padding-top 20px, label top 0,
   input padding 6px 0 8px, so the label ends 8px above the text, the
   site's mb-2. Centred pages also centre the text (page CSS).               */

.float-input,
.float-select,
.search-input {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: var(--z-rule-width) solid var(--z-field-rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--z-field-text);
  caret-color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: 1;
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
  transition: border-color var(--z-dur-base) var(--z-ease-standard),
              box-shadow var(--z-dur-base) var(--z-ease-standard);
}
/* Case that matters stays as typed. */
.float-input:is(.has-toggle, [inputmode="url"]) {
  text-transform: none;
}
/* The admin search fields keep their line box: they share a row with the
   filter triggers. */
.search-input {
  line-height: 1.425;
}
.float-input:focus,
.float-select:focus,
.search-input:focus {
  border-bottom-color: var(--z-rule);
  box-shadow: inset 0 -1px 0 var(--z-rule);
}
/* The underline is the focus indicator for text fields. */
.float-input:focus-visible,
.float-select:focus-visible,
.search-input:focus-visible {
  outline: 0;
}
.float-input::placeholder,
.search-input::placeholder {
  color: var(--z-text-muted);
  opacity: 1;
}

/* Autofill: paint the card colour over Chrome's tint, keep the field ink. */
.float-input:-webkit-autofill,
.float-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--z-surface-card) inset;
  -webkit-text-fill-color: var(--z-field-text);
  caret-color: var(--z-text);
  transition: background-color 9999s ease-in-out;
}
.float-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 -1px 0 var(--z-rule), 0 0 0 1000px var(--z-surface-card) inset;
}

/* Labels: fixed above the field (no more floating), like the site's. */
.float-label,
.select-label {
  color: var(--z-field-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: normal;
  text-transform: none;
  transition: color var(--z-dur-base) var(--z-ease-standard);
}

/* Native select: charcoal chevron (data URI), light option list. */
.float-select {
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 24 24' stroke='%233d3935' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 11px auto;
  cursor: pointer;
}
.float-select option {
  background-color: var(--z-surface-card);
  color: var(--z-text);
}

/* Search field icon (MU, ZC). */
.search-wrap svg {
  color: var(--z-text-muted);
  opacity: 1;
}

/* Errors */
.invalid-feedback-custom {
  color: var(--z-danger);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-synthesis-weight: none;
  line-height: var(--z-leading-snug);
  letter-spacing: normal;
  text-transform: none;
}
.field-error .float-input,
.field-error .float-select {
  border-bottom-color: var(--z-danger);
}
.field-error .float-input:focus,
.field-error .float-select:focus {
  box-shadow: inset 0 -1px 0 var(--z-danger);
}
.field-error .float-input:not(:focus) + .float-label {
  color: var(--z-danger);
}

/* Admin checkbox (.check-item, ZC): square box, charcoal rule; checked =
   gold-bright fill and a charcoal tick. The whole tick lives here. */
.check-item {
  cursor: pointer;
}
:where(.check-item input[type="checkbox"]) {
  position: relative;
}
.check-item input[type="checkbox"] {
  background-color: var(--z-surface-card);
  border: var(--z-rule-width) solid var(--z-rule);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--z-dur-fast) var(--z-ease-standard);
}
.check-item input[type="checkbox"]:checked {
  background-color: var(--z-accent-fill);
  border-color: var(--z-rule);
}
.check-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--z-check-tick);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.check-label {
  color: var(--z-text-muted);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-synthesis-weight: none;
  transition: color var(--z-dur-fast) var(--z-ease-standard);
}
.check-item:has(input:checked) .check-label {
  color: var(--z-text);
}


/* ── 10 · LABEL BADGES ────────────────────────────────────────────────────── */
/* No site equivalent: the site's label typography in a ruled box. Type and
   product colour is a 7px dot (a gradient in the content box, room made with
   text-indent), never tinted text: coloured text on tints fails on cream.    */

.type-badge,
.role-badge,
.priority-badge,
.product-pill,
.no-coords-tag {
  background-color: transparent;
  background-image: none;
  border: var(--z-rule-width) solid var(--z-tint-45);
  border-radius: 0;
  box-shadow: none;
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-xs);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
}
.type-badge,
.product-pill {
  --dot: var(--z-text-muted);
  background: radial-gradient(circle closest-side, var(--dot) 80%, transparent 100%) left center / 7px 7px no-repeat content-box;
  text-indent: 11px;
}
.type-badge.restaurant { --dot: var(--z-type-restaurant); }
.type-badge.bar        { --dot: var(--z-type-bar); }
.type-badge.shop       { --dot: var(--z-type-shop); }
.type-badge.bistro     { --dot: var(--z-type-bistro); }
.type-badge.caffee     { --dot: var(--z-type-caffee); }
.type-badge.pub        { --dot: var(--z-type-pub); }
.type-badge.vinoteka   { --dot: var(--z-type-vinoteka); }
.type-badge.hotel      { --dot: var(--z-type-hotel); }
.type-badge.vinarija   { --dot: var(--z-type-vinarija); }
.product-pill.cocktail { --dot: var(--z-gold-deep); }
.product-pill.online   { --dot: var(--z-info); }

.role-badge.admin {
  background-color: var(--z-accent-tint-40);
  border-color: var(--z-rule);
}
.priority-badge {
  background-color: var(--z-accent-tint-25);
  border-color: var(--z-rule);
}
.priority-badge svg {
  fill: var(--z-text-accent);
  stroke: none;
}
.no-coords-tag {
  border-color: var(--z-danger);
  color: var(--z-danger);
}


/* ── 11 · TOAST ───────────────────────────────────────────────────────────── */
/* Charcoal inverse (site cookie banner): beige text, a 3px left rule and a
   glyph in the tone colour (all ≥4.5:1 on charcoal). Bootstrap's .toast
   paints background/border/colour/radius/shadow at 0,1,0: all overridden
   here. Its .toast:not(.show){display:none} is deliberately KEPT.           */

.toast {
  --tone: var(--z-accent-fill);
  --bs-toast-bg: var(--z-surface-inverse);
  --bs-toast-color: var(--z-text-inverse);
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: 0;
  --bs-toast-box-shadow: var(--z-shadow-lg);
  background-color: var(--z-surface-inverse);
  background-image: none;
  border: 0;
  border-left: 3px solid var(--tone);
  border-radius: 0;
  box-shadow: var(--z-shadow-lg);
  color: var(--z-text-inverse);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-snug);
  letter-spacing: normal;
  text-transform: none;
}
.toast::before {
  content: "\25CF" / "";                     /* ● neutral */
  margin-right: .55em;
  color: var(--tone);
  pointer-events: none;
}
.toast.success { --tone: var(--z-success-on-dark); }
.toast.success::before { content: "\2713" / ""; pointer-events: none; }   /* ✓ */
.toast.error { --tone: var(--z-error-on-dark); }
.toast.error::before { content: "\2715" / ""; pointer-events: none; }     /* ✕ */


/* ── 12 · OVERLAY ─────────────────────────────────────────────────────────── */

.modal-backdrop-custom {
  background-color: var(--z-overlay);
  background-image: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}


/* ── 13 · SHARED ADMIN AND AUTH PIECES ────────────────────────────────────── */

.section-title {
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-3xl);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: 1.1;
  letter-spacing: var(--z-tracking-heading);
  text-transform: uppercase;
}
/* Phones: 24px (the 2xl step). At 390px MU's "SISTEMSKI KORISNICI" needs
   316px at 30px but only 310px are left beside the 36px create button, so it
   broke onto two lines. ZC gets the same size, so the admin pages match. */
@media (max-width: 575px) {
  .section-title {
    font-size: var(--z-text-2xl);
  }
}
.client-count,
.user-count {
  color: var(--z-text-muted);
  font-size: var(--z-text-sm);
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}
.modal-title {
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-xl);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-heading);
  text-transform: uppercase;
}
.confirm-text {
  color: var(--z-text-muted);
  font-size: var(--z-text-base);
  line-height: var(--z-leading-body);
}
.confirm-text strong {
  color: var(--z-text);
  font-weight: inherit;
}
.grid-state {
  color: var(--z-text-muted);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-base);
  line-height: var(--z-leading-body);
}
.top-bar-sep {
  color: var(--z-tint-30);
  font-size: var(--z-text-xl);
  line-height: 1;
}
.top-bar-page {
  color: var(--z-text);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-book);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
}

/* Error banner (LG, RP): paper slip, 3px danger rule, charcoal text. */
.error-banner {
  background-color: var(--z-surface-card);
  background-image: none;
  border: var(--z-rule-width) solid var(--z-rule-soft);
  border-left: 3px solid var(--z-danger);
  border-radius: 0;
  color: var(--z-text);
  font-size: var(--z-text-sm);
  line-height: var(--z-leading-body);
}

/* Verify spinner: a charcoal arc on a gold-bright ring. It keeps turning
   under reduced motion (a status indicator, excluded below). */
.spinner {
  border: 3px solid var(--z-accent-fill);
  border-top-color: var(--z-text);
  border-radius: 50%;
}


/* ── 14 · LEAFLET SKIN (map and ZC preview map) ───────────────────────────── */

.leaflet-container {
  background-color: var(--z-map-bg);
  font-family: var(--z-font-brand);
  font-synthesis-weight: none;
}
/* Keyboard focus on the map itself (MC #map, the ZC preview). The
   container's own outline is painted under the tile and marker panes, so it
   never showed (QA D3). The ring is drawn by ::after above the panes
   instead: inside the box (the map fills it), 2px charcoal outside and 2px
   beige inside, so it reads on the paper-toned tiles and on dark satellite
   imagery. Border and outline, not box-shadow, so forced colours keep it.
   z 1000 clears the panes (≤700); Leaflet's control corners are 1000 too
   but come earlier in the DOM. Leaflet makes the container position:
   relative unless it is already positioned (#map is absolute). */
.leaflet-container:focus-visible {
  outline: 0;
}
.leaflet-container:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1000;
  border: 2px solid var(--z-focus);
  outline: 2px solid var(--z-focus-inverse);
  outline-offset: -4px;
  pointer-events: none;
}

/* Tiles: warm engraving tone; satellite imagery is never filtered. */
.leaflet-container .leaflet-tile {
  filter: var(--z-map-tile-filter);
}
.leaflet-container .leaflet-tile[src*="lyrs=y"] {
  filter: none;
}

/* Popup: elevation on Leaflet's container (wrapper + tip, follows the scoops). */
.leaflet-container .leaflet-popup {
  filter: var(--z-drop-float);
}
.leaflet-container .leaflet-popup-content-wrapper {
  box-shadow: none;
  color: var(--z-text);
}
.leaflet-container .leaflet-popup-tip {
  background: var(--z-surface-page-image), var(--z-surface-card);   /* paper, like the popup */
  box-shadow: none;
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--z-text);
  font: 22px/24px var(--z-font-brand);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--z-text-accent);
  }
}

/* Tooltip: inverse label. */
.leaflet-container .leaflet-tooltip {
  padding: 4px 8px;
  background-color: var(--z-surface-inverse);
  border: var(--z-rule-width) solid var(--z-surface-inverse);
  border-radius: 0;
  box-shadow: var(--z-shadow-md);
  color: var(--z-text-inverse);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-xs);
  font-synthesis-weight: none;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
}
.leaflet-container .leaflet-tooltip-top::before    { border-top-color: var(--z-surface-inverse); }
.leaflet-container .leaflet-tooltip-bottom::before { border-bottom-color: var(--z-surface-inverse); }
.leaflet-container .leaflet-tooltip-left::before   { border-left-color: var(--z-surface-inverse); }
.leaflet-container .leaflet-tooltip-right::before  { border-right-color: var(--z-surface-inverse); }

/* Attribution: beige-80% bar, 12px muted, charcoal underlined links. */
.leaflet-container .leaflet-control-attribution {
  padding: 1px 6px;
  background: var(--z-beige-80);
  color: var(--z-text-muted);
  font-family: var(--z-font-brand);
  font-size: var(--z-text-xs);
  line-height: 1.4;
}
.leaflet-container .leaflet-control-attribution a {
  color: var(--z-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
}


/* ── 15 · REDUCED MOTION ──────────────────────────────────────────────────── */
/* .01ms, never `transition: none`: MainConsole's showToast() removes the node
   on `transitionend`, and no transition means no event. `!important` is
   needed to reach the pages' own transitions and inline animations.
   The verify .spinner is a status indicator and keeps turning.
   JS-driven motion (Leaflet flyTo/panTo, sheet drags) is behaviour: untouched. */
@media (prefers-reduced-motion: reduce) {
  *:where(:not(.spinner)),
  *:where(:not(.spinner))::before,
  *:where(:not(.spinner))::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .location-btn.locating::after {
    border-color: var(--z-gold-deep);        /* static full ring */
  }
}


/* ── 16 · FORCED COLORS ───────────────────────────────────────────────────── */
/* Gradient-drawn rules and masks vanish in forced colours, so primitives get
   real system-colour borders and the decorative layers are dropped. */
@media (forced-colors: active) {
  /* The host is `background: none` and its painted layers are dropped below,
     so tickets and chips get a real system fill: without it the ones that
     float over the map (.btn-filter, .btn-locations) were see-through. */
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full,
      .chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link) {
    border: 1px solid ButtonText;
    background-color: ButtonFace;
    color: ButtonText;
  }
  /* Medallions (and the square zoom medallions): an explicit opaque system
     fill. Their rings are box-shadows, which forced colours drop. */
  :is(.profile-btn, .login-prompt-btn, .location-btn, .legend-toggle-btn, .brand-ig-widget,
      .brand-site-widget, .rec-call-btn, .rec-store-btn, .rec-ig-btn, .rec-nav-btn, .btn-cog, .modal-close,
      .legend-overlay-close),
  .leaflet-container .leaflet-control-zoom :is(a.leaflet-control-zoom-in, a.leaflet-control-zoom-out) {
    background-color: ButtonFace;
    color: ButtonText;
  }
  /* Zoom: drawn glyphs keep their author colour in forced colours, so the
     typed + and − come back and take ButtonText. */
  .leaflet-container .leaflet-control-zoom :is(a.leaflet-control-zoom-in, a.leaflet-control-zoom-out) {
    background-image: none;
    font-size: 20px;
  }
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full,
      .chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::before,
  :is(.btn-apply:where(:not(#clientSubmit)), .btn-pill-confirm, .btn-go-login, .btn-filter,
      .age-gate-btn, .btn-primary-gold, .btn-gold, .btn-create, .btn-primary,
      .popup-action-btn, .btn-locations, .btn-reset, .btn-back, .btn-cancel,
      .btn-geocode, .nav-map-btn, .action-link, .btn-danger-full,
      .chip:where(:not(.chip-image)), .multi-select-trigger, .chip-link)::after {
    content: none;
  }
  .chip.active,
  .multi-select.has-value .multi-select-trigger,
  .profile-btn.open,
  .btn-cog.open,
  .multi-select-option.selected {
    background-color: SelectedItem;
    color: SelectedItemText;
  }
  /* Framed cards: the panel layer goes, and the host is transparent
     (background: none), so it gets a real border AND a Canvas fill.
     Without the fill, floating panels, sheets and popups show the map
     through. The border-only admin cards (.client-card, .user-card) need
     no rule here: their real border and opaque fill already map to
     CanvasText and Canvas (and they must never become a stacking context). */
  :is(.age-gate-card, .loc-prompt-toast, .cp-modal-box, .login-card, .card,
      .modal-box, .map-cta, .info-block, .login-promo-modal, .filter-modal,
      .side-panel, .legend-panel, .legend-overlay, .leaflet-popup-content-wrapper) {
    background-color: Canvas;
    border-color: CanvasText;
  }
  :is(.age-gate-card, .loc-prompt-toast, .cp-modal-box, .login-card, .card,
      .modal-box, .map-cta, .info-block, .login-promo-modal, .filter-modal,
      .side-panel, .legend-panel, .legend-overlay, .leaflet-popup-content-wrapper)::before {
    content: none;
  }
  /* The ornament is decoration and goes; a selected image chip shows a 2px
     Highlight frame round its photo on the same layer instead (box-shadows
     are dropped in forced colours, and an outline would lose to Bootstrap's
     :focus reset on the clicked chip). */
  .chip-image::after {
    background: none;
  }
  .chip-image.active::after {
    z-index: 2;
    border: 2px solid Highlight;
    opacity: 1;
  }
  /* ...and keeps Canvas colours: the shared .chip.active SelectedItem fill
     left the label's text backplate unreadable on a photo tile. */
  .chip-image.active {
    background-color: Canvas;
    color: CanvasText;
  }
  .location-btn.locating::after {
    border-color: Highlight;
  }
}


/* ═════ ORNAMENTS (Stage 4) — delete this section to roll back ═════ */
/* The decorative layer: paper-texture alignment, outer frames, flourishes and
   the nav-bracket hover (spec §2.4–2.5, §4, §6 Phase 5, §7, §7a, Appendix A
   "Framed card variants"). Notes: docs/redesign/notes/ornaments.md.
   ROLLBACK (the three parts go together):
     1. delete this section, down to END ORNAMENTS;
     2. tokens.css: set --z-surface-page-image back to `none` (the texture);
        --z-ornament-ink / --z-ornament-ink-inverse may stay, nothing else
        reads them;
     3. seo.css: delete its own ORNAMENTS section (braided bands, nav-link
        bracket, footer flourish).
   The forced-colours fills for tickets, chips and medallions in §16 are a
   fix, not an ornament: they stay.
   RULES, on top of the ones in the header of this file:
   • Only the pseudo-element slots foundation-css.md §3.6 lists as free: the
     ::after of FULL framed cards (outer frame), the ::before of menu items
     (bracket), and pseudo-elements of plain text elements (titles, labels,
     dividers, the empty list, the admin grid state).
   • Inner-frame panels (side panel, legend, filter sheet, login promo, popups)
     get no outer frame: they clip it or slide off-screen. Nor do the location
     prompt and the SEO info blocks (design review DR-16, DR-09): one framed
     ornament per view. .client-card and .user-card get nothing: they must
     never become stacking contexts.
   • The side panel and legend grow by 0px (embed height budget): their
     flourishes are absolutely positioned inside existing space.
   • Flourishes are ornament-flourish.svg used as a MASK over --z-ornament-ink
     (charcoal at 45%, the tone of the site's paper flourishes), so they stay
     crisp at any DPR and drop out with everything else in forced colours.
   • Blockified by position:absolute, never by `display`. No new animations;
     the one transition (bracket fade) is shortened by §15 like the others.   */


/* ── O1 · PAPER TEXTURE ───────────────────────────────────────────────────── */
/* tokens.css points --z-surface-page-image at the site's 2560×502 paper tile,
   used at its natural size as on the site. Each surface that paints it would restart the tile at
   its own corner, and a stuck sticky bar keeps its paper still while the page
   paper scrolls under it. Anchoring every such surface to the VIEWPORT gives
   one continuous sheet: body/html, the SEO nav, the admin top bar and the ZC
   sticky filter bar.
   Cost, measured in Chrome 154 (80 wheel steps on /lokacije and
   /ManageZapletClients): none. The root and the sticky bars are composited.
   The 89 /lokacije ledger cells and their filler are deliberately left out:
   as fixed backgrounds they doubled the scroll paint time, and hairlines
   separate them, so their tiles never need to meet the page's.
   iOS Safari ignores `fixed` (treats it as scroll): there each surface simply
   keeps its own tile, the pre-Stage-4 behaviour. The age-gate overlay needs
   nothing: it is fixed to the viewport already.                              */
:root,
body,
.brand-nav,
.sticky-controls {
  background-attachment: fixed;
}
/* Admin top bar only (.top-bar is page CSS, correction 2; on / it is a
   floating plaque without the texture). A rule of its own: a browser without
   :has() drops just this one. */
.top-bar:has(> .top-bar-page) {
  background-attachment: fixed;
}


/* ── O2 · OUTER FRAMES (full framed cards, ::after) ───────────────────────── */
/* The site's age-gate and product frames: four straight hairlines outside
   the scooped panel, running between the scoops, and a small dot in each
   scoop, centred on the panel corner, all in --z-frame-rule (the site's
   brown-gold/40). Gradients in the card's free ::after (the panel is
   ::before), z -1 inside the isolated card: they never cover content and
   never take a click.
   Gap from panel to rule = 7/12 of the card's scoop: 14px with the 24px scoop
   (desktop full cards, Appendix A's inset:-14px, as on the site's desktop
   gate) and 7px with 12px (phones, and the slim .map-cta at every width).
   The age gate itself takes the site's exact frame instead (below).
   Not on .info-block or .loc-prompt-toast (design review DR-09, DR-16): on a
   venue page the frame stays on .map-cta alone, and the 280px prompt over
   the dark backdrop reads cleaner with its inner rule only.                 */
:is(.age-gate-card, .cp-modal-box, .login-card, .card,
    .modal-box:where(:not(#clientModal)), .map-cta)::after {
  --fo: calc(var(--n) * 7 / 12);                    /* panel edge → outer rule */
  --fl: calc(100% - 2 * (var(--fo) + var(--n)));    /* rule length, between the scoops */
  --fr: var(--z-frame-rule);
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--fo) + var(--z-rule-width)));   /* from the padding box: 1px border + gap */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--fr), var(--fr)) top / var(--fl) var(--z-rule-width) no-repeat,
    linear-gradient(var(--fr), var(--fr)) bottom / var(--fl) var(--z-rule-width) no-repeat,
    linear-gradient(var(--fr), var(--fr)) left / var(--z-rule-width) var(--fl) no-repeat,
    linear-gradient(var(--fr), var(--fr)) right / var(--z-rule-width) var(--fl) no-repeat,
    radial-gradient(circle at var(--fo) var(--fo), var(--fr) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - var(--fo)) var(--fo), var(--fr) 1.6px, transparent 2.4px),
    radial-gradient(circle at var(--fo) calc(100% - var(--fo)), var(--fr) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - var(--fo)) calc(100% - var(--fo)), var(--fr) 1.6px, transparent 2.4px);
}
/* The age gate copies the site's own gate frame (its ScoopCard) literally:
   1.5px lines in --z-frame-line 8px out (16px with the 24px scoop, the
   site's -top-2 lg:-top-4), and the site's 8-point star centred on each
   panel corner, 4px (10px from 1024px) instead of our dot. The site fades
   the whole frame layer to .25, so this does too. The star keeps one
   orientation (the site turns it per corner; invisible at this size).      */
.age-gate-card::after {
  --fo: calc(var(--n) * 2 / 3);
  --fs: 4px;                                        /* star size */
  --fp: calc(var(--fo) - var(--fs) / 2);            /* star offset: centred on the panel corner */
  --fr: var(--z-frame-line);
  opacity: .25;
  background:
    linear-gradient(var(--fr), var(--fr)) top / var(--fl) 1.5px no-repeat,
    linear-gradient(var(--fr), var(--fr)) bottom / var(--fl) 1.5px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left / 1.5px var(--fl) no-repeat,
    linear-gradient(var(--fr), var(--fr)) right / 1.5px var(--fl) no-repeat,
    url(/multimedia/brand/frame-corner-star.svg) left var(--fp) top var(--fp) / var(--fs) var(--fs) no-repeat,
    url(/multimedia/brand/frame-corner-star.svg) right var(--fp) top var(--fp) / var(--fs) var(--fs) no-repeat,
    url(/multimedia/brand/frame-corner-star.svg) left var(--fp) bottom var(--fp) / var(--fs) var(--fs) no-repeat,
    url(/multimedia/brand/frame-corner-star.svg) right var(--fp) bottom var(--fp) / var(--fs) var(--fs) no-repeat;
}
@media (min-width: 1024px) {
  .age-gate-card::after {
    --fs: 10px;
  }
}
/* No frame where the card is (nearly) full-bleed, so it would sit on or past
   the screen edge: the change-password box below ~430px (spec §7a: inner
   frame at ≤400px), and ZC's delete modal below 600px (width 100%, max
   380px; ZC is desktop-only: on a phone it lays out ~553px wide and the
   modal already sits off-centre, pre-existing). */
@media (max-width: 430px) {
  .cp-modal-box::after {
    content: none;
  }
}
@media (max-width: 599px) {
  #deleteModal:has(.delete-modal-actions)::after {
    content: none;
  }
}
/* Nor on the age gate when the viewport is shorter than the compact card
   plus its frame (292 + 2 × 8px, e.g. a small phone in landscape): the
   overlay would scroll a few pixels and the top dots would be cut off. */
@media (max-height: 330px) {
  .age-gate-card::after {
    content: none;
  }
}


/* ── O3 · FLOURISHES ──────────────────────────────────────────────────────── */
:where(.age-gate-title, .rec-empty, .filter-section-label,
       .brand-divider, .divider, .grid-state, .page-shell > h1) {
  position: relative;
}
.age-gate-title::before,
.rec-empty::after,
:is(.brand-divider, .divider)::before,
.grid-state::after,
.page-shell > h1::after {
  content: "";
  position: absolute;
  background-color: var(--z-ornament-ink);
  -webkit-mask: url(/multimedia/brand/ornament-flourish.svg) center / contain no-repeat;
  mask: url(/multimedia/brand/ornament-flourish.svg) center / contain no-repeat;
  pointer-events: none;
}

/* Age gate: the site's own gate ornament (ornament-gate.svg, a flourish
   round a shield) instead of the shared flourish, in charcoal: the SVG's
   own .37 group opacity gives the site's tone. 80px wide (96px from 768px)
   and 24px above the title (the site's mt-6), so the title's padding-top is
   the ornament's height (width × 20/98) plus 24px. */
.age-gate-title {
  padding-top: 40px;
}
.age-gate-title::before {
  top: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: calc(80px * 20 / 98);
  background-color: var(--z-text);
  -webkit-mask-image: url(/multimedia/brand/ornament-gate.svg);
  mask-image: url(/multimedia/brand/ornament-gate.svg);
}
@media (min-width: 768px) {
  .age-gate-title {
    padding-top: 44px;
  }
  .age-gate-title::before {
    left: calc(50% - 48px);
    width: 96px;
    height: calc(96px * 20 / 98);
  }
}
@media (max-height: 560px) {
  .age-gate-title {
    padding-top: 29px;
  }
  .age-gate-title::before {
    left: calc(50% - 32px);
    width: 64px;
    height: calc(64px * 20 / 98);
  }
}

/* Empty list: a closing flourish under the sentence, inside the block's
   existing 24px bottom padding (0px of height). */
.rec-empty::after {
  bottom: 5px;
  left: calc(50% - 26px);
  width: 52px;
  height: 14px;
}

/* Admin grid states (MU, ZC: loading, empty, no results, errors): the same
   closing flourish under the sentence, so the lone muted line reads like the
   site's Korpa empty state (design review DR-21). It sits inside the pages'
   existing 52px bottom padding: 0px of height. */
.grid-state::after {
  bottom: 24px;
  left: calc(50% - 26px);
  width: 52px;
  height: 14px;
}

/* Filter-sheet section labels: a hairline after the label text, running to
   the sheet's content edge. No flourish in front of it: the site puts a
   flourish under a title, not before each of the 7–8 sub-labels of one
   sheet (design review DR-20). With no top/left the pseudo keeps its STATIC
   position, just after the last glyph, so the rule always starts where the
   words end. The label clips it at its own edge: overflow-x: clip keeps
   vertical overflow visible and creates no scroll container. A browser
   without overflow: clip gets no rule rather than a sideways scroll. */
@supports (overflow-x: clip) {
  .filter-section-label {
    overflow-x: clip;
  }
  .filter-section-label::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 12px;
    margin-left: 12px;
    background-color: var(--z-ornament-ink);
    -webkit-mask: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .45)) 0 center / 100% 1px no-repeat;
    mask: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .45)) 0 center / 100% 1px no-repeat;
    pointer-events: none;
  }
}

/* Auth dividers (login .brand-divider, verify/reset hr.divider): the hairline
   becomes a flourish (spec §4.3). An <hr> is 1px tall and Chrome's UA sheet
   clips it (overflow: hidden), so the flourish is the hr's ::before, centred
   on it and overflowing into its margins: no height change. The pages draw
   the rule at 0,1,0 / 0,1,1, hence the two-part selectors. */
.brand-divider,
.divider {
  overflow: visible;
}
.login-card .brand-divider,
.card .divider {
  border-top-color: transparent;
}
:is(.brand-divider, .divider)::before {
  top: -10px;
  left: calc(50% - 37px);
  width: 74px;
  height: 20px;
}

/* The auth success and empty states (login check-email panels; verify and
   reset success, expired and error) get no flourish of their own: the
   divider flourish above them is the card's one ornament (design review
   DR-10). */

/* SEO page titles (/lokacije, city, venue): a flourish under the h1, like the
   site's page titles (spec §4.2). */
.page-shell > h1 {
  padding-bottom: 30px;
}
.page-shell > h1::after {
  bottom: 4px;
  left: calc(50% - 37px);
  width: 74px;
  height: 20px;
}
@media (min-width: 1024px) {
  .page-shell > h1 {
    padding-bottom: 38px;
  }
  .page-shell > h1::after {
    left: calc(50% - 48px);
    width: 96px;
    height: 26px;
  }
}


/* ── O4 · NAV-BRACKET HOVER (menu items, ::before) ────────────────────────── */
/* The site's nav hover: nav-bracket.svg around the label at 50% opacity. Menu
   rows are wide, so the SVG is a 9-slice border-image: the notched corners
   keep their shape at any row width (stretched whole, a 250px row would turn
   them into flat ellipses). Pointer hover only, so a tap never leaves it
   behind. Keyboard focus keeps its inset ring (§7), drawn over the bracket. */
:where(.dropdown-item-custom, .cog-item, .multi-select-option) {
  position: relative;
}
:is(.dropdown-item-custom, .cog-item, .multi-select-option)::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 8px solid transparent;
  border-image: url(/multimedia/brand/nav-bracket.svg) 10 / 8px stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--z-dur-fast) var(--z-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  :is(.dropdown-item-custom, .cog-item, .multi-select-option):hover::before {
    opacity: .5;
  }
}


/* ── O5 · FORCED COLOURS ──────────────────────────────────────────────────── */
/* Decorative only, so all of it goes, the texture included. The auth dividers
   fall back to a plain system-colour rule. Selectors repeat the ones above so
   specificity matches. */
@media (forced-colors: active) {
  :root {
    --z-surface-page-image: none;
  }
  :is(.age-gate-card, .cp-modal-box, .login-card, .card,
      .modal-box:where(:not(#clientModal)), .map-cta)::after,
  .age-gate-title::before,
  .rec-empty::after,
  .filter-section-label::after,
  :is(.brand-divider, .divider)::before,
  .grid-state::after,
  .page-shell > h1::after,
  :is(.dropdown-item-custom, .cog-item, .multi-select-option)::before {
    content: none;
  }
  .login-card .brand-divider,
  .card .divider {
    border-top-color: CanvasText;
  }
}
/* ═════ END ORNAMENTS ═════ */