/*
 * The customer app's stylesheet (app.bonusqr.com and the white-label apps, the same pages drawn in the admin's
 * previews and beside the scanner). One hand-written file, read top to bottom: the tokens of the brand manual
 * (C:/wamp64/www/bqr/brand.html, the admin's admin.css carries the same), the base, the components, the pages.
 * Values come from the prototype of 2026-10-08 (bqr/appka.html) and the spec
 * docs/superpowers/specs/2026-10-08-zakaznicka-appka-design.md § 3.
 *
 * The class names a script, a preview or a test reaches for stay what they were (spec § 2): .coupon-bubble,
 * .button-nav.selected, .camera, #tab-N, .popup-*, #modal, .footer .button.selected, .menu-item.selected …; they
 * are simply drawn anew here. The business's colour and a white-label app's colour arrive as custom properties
 * (--biz, --biz-text, --biz-soft, --wl, --wl-text, --wl-soft, --wl-ink) printed by App\Support\AppPage.
 */

/* ----------------------------------------------------------------------------------------- tokens */
:root {
    --violet: #8c7dee;          /* the brand: marks the chosen tab, the active item, a link, the focus */
    --violet-strong: #6a59e2;   /* violet that carries white text (5.1:1) */
    --violet-ink: #5b49d6;      /* violet as text on a light ground */
    --violet-soft: #efecff;     /* the pale ground of a selection */
    --violet-soft-2: #e2dcff;

    --ink: #232122;             /* headings and the primary button */
    --ink-hover: #3b393a;
    --text: #4a4b61;            /* body text (8.5:1) */
    --muted: #6a6b80;           /* secondary text (5.5:1) */
    --faint: #86869c;           /* an icon at rest; never text */
    --line: #e4e4ec;
    --line-strong: #cbcbd8;
    --bg: #f5f5f5;              /* the canvas */
    --surface: #fff;
    --surface-2: #fafaff;
    --fill: #ececf1;

    --ok: #1b7a43;  --ok-soft: #e6f6ec;  --ok-line: #b9e3c8;
    --warn: #8a5200; --warn-soft: #fff3d9; --warn-line: #efd28f;
    --bad: #bd2f2b;  --bad-soft: #fde9e8; --bad-line: #f3bcba; --bad-hover: #a32522;

    /* the business's colour: the accent of its page; the page's <style> overrides these (AppPage::colourVars) */
    --biz: var(--violet);
    --biz-text: #fff;
    --biz-soft: var(--violet-soft);
    /* a white-label app's colour for the bars, the menu and the avatar; the main app's is the violet */
    --wl: var(--violet);
    --wl-text: #fff;
    --wl-soft: var(--violet-soft);
    --wl-ink: var(--violet-ink);

    --font: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --r: 16px; --r-sm: 12px; --r-pill: 999px;
    --tap: 48px; --tap-sm: 44px;
    --shadow-1: 0 1px 2px rgba(35, 33, 34, .06), 0 8px 24px -12px rgba(35, 33, 34, .18);
    --shadow-2: 0 2px 6px rgba(35, 33, 34, .08), 0 16px 40px -14px rgba(35, 33, 34, .32);
    --fast: .15s; --base: .25s; --ease: cubic-bezier(.16, 1, .3, 1);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --bar: 56px;                /* the top bar */
    --tabbar: 64px;             /* the bottom bar without the safe area */
}

/* ----------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg);
    -webkit-font-smoothing: antialiased; font-optical-sizing: auto; -webkit-tap-highlight-color: transparent; color-scheme: light;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; }
a { color: var(--violet-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
main { display: block; min-height: 100dvh; padding-bottom: calc(var(--tabbar) + 32px + var(--safe-b)); }

/* icons: the admin's sprite (public/admin/icons.svg) through <x-icon>; one drawing, every size */
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i-16 { width: 16px; height: 16px; }
svg.i-24 { width: 24px; height: 24px; }
svg.i-32 { width: 32px; height: 32px; stroke-width: 1.5; }
svg.i-40 { width: 40px; height: 40px; stroke-width: 1.5; }

/* the type scale: one class, one step (the old names stay as aliases for ModulesHandler's html and the previews) */
.t-32, .h1-bold, .h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.t-28, .h2-bold, .h2 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.t-22 { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.t-18, .h3-bold, .h3, .subh1-bold, .subh1 { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.t-16, .subh2, .subh2-bold, .text { font-size: 16px; line-height: 1.5; }
.subh2-bold, .bold { font-weight: 600; }
.t-14, .desc, .description { font-size: 14px; line-height: 1.45; }
.t-12 { font-size: 12px; line-height: 1.4; }
.muted, .desc, .description { color: var(--muted); }
.ink { color: var(--ink); }
.w-500 { font-weight: 500; } .w-600 { font-weight: 600; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-12 { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.section { padding: 0 16px; }
.section + .section { margin-top: 24px; }
.sec-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------------------------------- buttons */
.btn, .button-default, .login-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--tap); padding: 0 20px; border-radius: var(--r-pill); border: 1px solid transparent;
    font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.btn:active { transform: scale(.98); }
.btn-primary, .button-default, .login-button { background: var(--ink); color: #fff; opacity: 1; }
.btn-primary:hover, .button-default:hover, .login-button:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost, .button-text { background: transparent; color: var(--violet-ink); height: var(--tap-sm); padding: 0 12px; border: 0; font-weight: 600; }
.btn-ghost:hover { background: var(--violet-soft); }
.btn-danger-text { background: transparent; color: var(--bad); height: var(--tap-sm); border: 0; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: var(--bad-hover); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"], .button-default[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { display: none; }
.btn[aria-busy="true"] .spin { display: block; animation: spin .8s linear infinite; }
.btn[aria-busy="true"] .lbl { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
/* signing in: Google after the "Sign in with Google" branding guidelines (white, #747775 border, #1F1F1F text, Roboto
   Medium, the G at 18-20 px; the pill is an allowed shape), Apple after the HIG "Sign in with Apple" (black, white logo
   and text in the system font, both centred); the e-mail way is an outlined pill of the same height */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
/* the label breaks onto two lines ("Prihlásiť cez / Google") as soon as one line would press on the 12 px sides -
   on a 390 px phone already - and the pill grows to fit, like in the side menu (the owner, 2026-10-10) */
.btn-gsi, .btn-siwa { flex: 1 1 160px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 8px 12px; border-radius: var(--r-pill); white-space: normal; text-align: center; line-height: 1.25; cursor: pointer; }
.btn-gsi { border: 1px solid #747775; background: #fff; color: #1f1f1f; font: 500 14px/1 Roboto, var(--font); }
.btn-gsi:hover { background: #f8f9fa; }
.btn-gsi img { width: 18px; height: 18px; }
.btn-siwa { border: 0; background: #000; color: #fff; font: 600 15px/1 -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.btn-siwa:hover { background: #1a1a1a; }
.btn-siwa img { width: 18px; height: 18px; filter: invert(1); }
.socials .btn-secondary { flex: 1 1 100%; }
/* in the side menu, narrower, Google and Apple still side by side: the label on two lines (the owner, 2026-10-09) */
.navbar-content .btn-gsi, .navbar-content .btn-siwa { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 8px 4px; gap: 6px; }
.icon-btn, .icon-button, .icon-button-round {
    display: inline-flex; align-items: center; justify-content: center; width: var(--tap-sm); height: var(--tap-sm);
    padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; flex: none;
}
.icon-btn:hover, .icon-button:hover { background: var(--fill); }
.icon-btn.on-photo { background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-1); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the wallet badges: one where the phone is known (app.js puts wallet-apple / wallet-google on <html>), both side by side
   on a computer - one height for both: each file carries its viewBox's ratio (so neither is letterboxed, and a narrower card
   shrinks both alike), and the Google badge is drawn like Apple's (google-wallet.svg: black, Apple's outline and corner at 44px) */
.wallets { display: flex; gap: 8px; justify-content: center; margin: 20px 16px 0; }
.wallets a { display: block; flex: 0 1 auto; min-width: 0; }
.wallets img { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.wallet-apple .wallets.both [data-wallet="google"], .wallet-google .wallets.both [data-wallet="apple"] { display: none; }

/* ----------------------------------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field .box { position: relative; }
.field .input, .input-prefix-icon {
    width: 100%; height: var(--tap); padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
    background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); appearance: none; -webkit-appearance: none;
}
.field .input::placeholder, .input-prefix-icon::placeholder { color: var(--faint); }
.field .input:focus, .input-prefix-icon:focus { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
.field .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.field .box.has-ico .input { padding-left: 42px; }
.field .box.has-ico .input:not(:placeholder-shown) ~ .ico, .field .box.has-ico .input:focus ~ .ico { color: var(--ink); }
.field .trail { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.field .box.has-trail .input { padding-right: 46px; }
.field .hint { font-size: 12px; color: var(--muted); }
.field .err { display: none; font-size: 14px; color: var(--bad); }
.field.is-invalid .input { border-color: var(--bad); }
.field.is-invalid .err { display: block; }
.field select.input { padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6b80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center / 20px; }
.field input[type="date"].input { min-height: var(--tap); }
/* the box is the label's own checkbox; a switch inside the label (.switch) keeps its pill */
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); cursor: pointer; }
.check > input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); display: grid; place-items: center; margin: 0; }
.check > input[type="checkbox"]:checked { background: var(--violet); border-color: var(--violet); }
.check > input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.check a { text-decoration: underline; }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--fill); margin: 0; cursor: pointer; transition: background var(--fast); }
.switch input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--fast); }
.switch input[type="checkbox"]:checked { background: var(--violet); }
.switch input[type="checkbox"]:checked::after { transform: translateX(20px); }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-box { position: relative; flex: 1; }
.search-box .input { width: 100%; height: var(--tap); padding: 0 14px 0 44px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); box-shadow: var(--shadow-1); appearance: none; -webkit-appearance: none; }
.search-box .input:focus { outline: 2px solid var(--violet); outline-offset: 0; }
.search-box .input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-box .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.scan-btn { width: var(--tap); height: var(--tap); border-radius: var(--r-sm); border: 0; background: var(--surface); box-shadow: var(--shadow-1); display: grid; place-items: center; color: var(--ink); cursor: pointer; flex: none; }
mark.hl, .highlight { background: var(--violet-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ----------------------------------------------------------------------------------------- cards and lists */
.card { background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-1); }
.card-flat { background: var(--surface); border-radius: var(--r); padding: 16px; border: 1px solid var(--line); }
.note, .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; }
.note-info { background: var(--violet-soft); color: var(--violet-ink); }
.note-warn, .alert-warning { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.note-ok, .alert-success { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.alert { margin: 16px; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg); font-size: 13px; color: var(--text); }
.chip .bold { color: var(--ink); }
.chip.on-white { background: var(--fill); }
.toast {
    position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar) + 16px + var(--safe-b)); z-index: 60;
    background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px;
    display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-2);
    transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform var(--base) var(--ease), opacity var(--base);
}
.toast.show { transform: none; opacity: 1; }

/* the tile of a business (Podniky, Domov, Profil; built by template() in app.js) */
a.spot { display: block; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); color: var(--text); text-align: left; font-weight: 400; }
a.spot .ph { position: relative; aspect-ratio: 16 / 9; background: var(--fill); }
a.spot .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.spot .badge { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); min-height: 32px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; box-shadow: var(--shadow-1); }
a.spot .badge.light { background: #fff; color: var(--ink); }
a.spot .body { padding: 12px 16px 14px; }
a.spot .name, a.spot h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0; }
a.spot .addr, a.spot p { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
a.spot.no-photo { display: flex; align-items: stretch; }
a.spot.no-photo .strip { width: 6px; flex: none; background: var(--spot-color, var(--violet)); }
a.spot.no-photo .body { flex: 1; }
a.spot.no-photo .badge-inline { margin-top: 8px; }
.group-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); margin: 12px 0 0; }
.group-head .i { color: var(--violet-ink); }
.skeleton { background: linear-gradient(90deg, var(--fill) 25%, #f3f3f7 50%, var(--fill) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0; } }

/* an empty state: an icon, a sentence (the old .coupon-nothing is one) */
.empty, .coupon-nothing { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; font-style: normal; }
.empty .i { width: 40px; height: 40px; color: var(--faint); stroke-width: 1.5; }
.empty .ttl { font-size: 16px; font-weight: 600; color: var(--ink); }

/* ----------------------------------------------------------------------------------------- the frame: bars */
/* the top bar: solid, sticky; the fade under it appears only once the page has scrolled (html.scrolled) */
.navbar { position: relative; z-index: 30; }
.topbar, .page-head, .photo-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(var(--bar) + var(--safe-t)); padding: calc(8px + var(--safe-t)) 8px 0; }
.topbar, .page-head { background: var(--bg); }
.topbar { justify-content: flex-end; }
.topbar::after, .page-head::after, .photo-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(var(--bg), transparent); pointer-events: none; opacity: 0; transition: opacity var(--fast); }
html.scrolled .topbar::after, html.scrolled .page-head::after, .photo-bar.solid::after { opacity: 1; }
.page-head h1 { font-size: 18px; flex: 1; text-align: center; margin-right: var(--tap-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head .back { color: var(--ink); }
/* the bar over a photo (the business's page, a news item): transparent with white round buttons, solid once the
   photo has scrolled under it, with the name in the middle */
.photo-bar { margin-bottom: calc(-1 * (var(--bar) + var(--safe-t))); transition: background var(--fast); }
.photo-bar .ttl { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--fast); }
.photo-bar .icon-btn, .photo-bar .icon-button { transition: background var(--fast), box-shadow var(--fast); }
.photo-bar.solid { background: var(--bg); }
.photo-bar.solid .ttl { opacity: 1; }
.photo-bar.solid .icon-btn.on-photo, .photo-bar.solid .icon-button.on-photo { background: transparent; box-shadow: none; }
.photo-bar.solid .icon-btn.on-photo:hover { background: var(--fill); }
.navbar-icon { display: flex; }

/* the bottom bar */
#footer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar) + var(--safe-b)); padding: 8px 16px calc(8px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line); }
.footer-content { display: flex; gap: 8px; height: 48px; }
.footer-content-item { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.footer .button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.footer .button .i { flex: none; width: 24px; height: 24px; }
.footer .button .button-label { display: none; }
/* the open tab's pill keeps a button's air (16px a side): at least its third, wider when the word needs it - centred, so
   a long word ("Businesses" filled its third edge to edge) reaches into the neighbours' empty sides; it stops 8px short
   of their icons (200% - 40px) and cuts the word beyond that. The icons stay in the same places on every page. */
.footer .button.selected { flex: none; min-width: 100%; max-width: calc(200% - 40px); padding: 0 16px; background: var(--wl-soft); color: var(--wl-ink); }
/* the outer tabs grow inwards only, the bar keeps its 16px from the screen's edge */
.footer-content-item:first-child { justify-content: flex-start; }
.footer-content-item:last-child { justify-content: flex-end; }
.footer-content-item:is(:first-child, :last-child) .button.selected { max-width: calc(150% - 20px); }
.footer .button.selected .button-label { display: inline; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the staff's way to the scanner, above the bar */
/* centred: the right corner is the customer's scan button (.camera) on the business page (the owner, 2026-10-09) */
.staff-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + 16px + var(--safe-b)); z-index: 15; max-width: calc(100% - 176px); }
.staff-pill .btn { white-space: nowrap; max-width: 100%; overflow: hidden; }
/* in the app's colour and a size bigger than a small button, so the staff find it at once (the owner, 2026-10-10) */
/* taller, not wider: between the edge and the customer's scan button a 375px phone leaves ~197px, and the words of
   'Skener QR kódov' or 'Escáner de código QR' have to fit */
.staff-pill .btn-staff { height: 52px; padding: 0 16px; gap: 6px; font-size: 15px; background: var(--wl); border-color: var(--wl); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.staff-pill .btn-staff .i { width: 20px; height: 20px; color: #fff; }
.staff-pill .btn-staff:hover { background: var(--wl-ink); border-color: var(--wl-ink); }
/* the narrowest phones: the words alone fit between the edge and the customer's button, the icon does not */
@media (max-width: 339px) { .staff-pill .btn { padding-inline: 12px; } .staff-pill .btn .i { display: none; } }
/* a long name of the scanner (es, fr, it) keeps its words and drops the icon on a common phone */
@media (max-width: 419px) { .staff-pill .btn-staff.is-long .i { display: none; } }

/* ----------------------------------------------------------------------------------------- the side menu */
#menu-main-overlay { position: fixed; inset: 0; z-index: 40; display: none; opacity: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity var(--base); }
#menu-main.navbar-content {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: 86%; max-width: 360px; overflow-y: auto; overflow-x: hidden;
    background: var(--surface); border-radius: var(--r) 0 0 var(--r); box-shadow: var(--shadow-2);
    transform: translateX(120%); transition: transform var(--base) var(--ease); padding-bottom: calc(16px + var(--safe-b));
}
.navbar-content-header { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--safe-t)) 8px 0 16px; height: calc(var(--bar) + var(--safe-t)); }
.logo-container { display: flex; align-items: center; }
.logo-container img { display: block; }
.user-image { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 8px auto 4px; background: var(--wl); object-fit: cover; }
.navbar-register { display: flex; flex-direction: column; gap: 8px; margin: 8px 16px 0; }
.navbar-register .socials { margin-top: 8px; }
.menu { margin-top: 8px; }
.menu-label { padding: 16px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; margin: 0 8px; border-radius: var(--r-sm); color: var(--ink); font-size: 16px; font-weight: 500; background: transparent; border: 0; width: calc(100% - 16px); text-align: left; cursor: pointer; text-decoration: none; }
.menu-item .i { color: var(--text); }
.menu-item:hover { background: var(--surface-2); }
.menu-item.selected { background: var(--wl-soft); color: var(--wl-ink); }
.menu-item.selected .i { color: var(--wl-ink); }
/* the footnote under the menu: the account's erasure, kept reachable but unobtrusive */
.menu-footnote { display: block; margin: 4px auto 0; padding: 6px 8px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--faint); cursor: pointer; }
.menu-footnote:hover, .menu-footnote:focus-visible { text-decoration: underline; color: var(--text); }
.menu-item .chev { margin-left: auto; color: var(--faint); }
/* the staff's doors (admin, scanner, own business, superadmin) stand out from the customer's items: bold and in the
   app's colour (the owner, 2026-10-10) */
.menu-item.is-key { font-weight: 700; color: var(--wl-ink); }
.menu-item.is-key .i { color: var(--wl-ink); }
.menu-item .flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; }
.navbar-copyright { padding: 40px 16px 8px; text-align: center; font-size: 12px; color: var(--muted); }
.navbar-copyright a { color: inherit; }

/* ----------------------------------------------------------------------------------------- sheets, pop-ups, messages */
/* the language sheet */
.language-overlay { position: fixed; inset: 0; z-index: 1005; display: none; opacity: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity var(--base); }
.language-content { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1006; background: var(--surface); border-radius: var(--r) var(--r) 0 0; padding: 8px 8px calc(16px + var(--safe-b)); max-height: 88%; overflow-y: auto; transform: translateY(100%); transition: transform var(--base) var(--ease); box-shadow: var(--shadow-2); }
.language-content::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 12px; }
.language-content .menu { margin-top: 0; }
.language-content .menu-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px 8px; }
.language-content .menu-header .menu-label { padding: 0; font-size: 22px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.language-content .menu-items { display: flex; flex-direction: column; gap: 2px; }
.language-content .menu-item { margin: 0; width: 100%; }
.language-content .menu-item .check-mark { margin-left: auto; color: var(--violet-ink); }
/* the pop-up of a module, the QR code, the points shop: a dark overlay, white type, the note in a white card */
.popup-overlay, .pointsPopup-overlay, .modal-overlay { position: fixed; inset: 0; display: none; opacity: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity var(--base); }
.popup-overlay { z-index: 1049; }
.pointsPopup-overlay { z-index: 1109; }
.modal-overlay { z-index: 2055; }
.popup { position: fixed; inset: 0; z-index: 1050; display: none; flex-direction: column; justify-content: flex-end; }
#pointsPopup { z-index: 1110; }
.popup .gap { flex: 1; }
.popup-content { display: flex; flex-direction: column; gap: 16px; padding: 0 16px calc(24px + var(--safe-b)); color: #fff; max-height: 92%; transform: translateY(100%); transition: transform var(--base) var(--ease); }
.popup-close { align-self: center; color: #fff; width: var(--tap); height: var(--tap); }
.popup-close:hover { background: rgba(255, 255, 255, .15); }
.popup-desc { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.popup-desc .h1-bold { color: #fff; font-size: 32px; line-height: 1.2; }
.popup-desc p { color: rgba(255, 255, 255, .85); font-size: 16px; margin: 0; }
.popup-bottom { background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; line-height: 1.45; text-align: left; max-height: 30vh; overflow-y: auto; scrollbar-width: none; }
.popup-bottom:empty { display: none; }
/* the sign-in sheet is a form, not a note: it takes most of the screen and scrolls only on a short one */
.popup-bottom.auth-sheet { max-height: min(640px, calc(100vh - 120px)); }
.popup-bottom strong { color: var(--ink); }
#popup .popup-bottom:has(.cashback-levels) { max-height: none; overflow-y: visible; }
.popup-square { overflow-y: auto; scrollbar-width: none; max-height: 60vh; }
.popup-square .img img { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--r); background: #fff; padding: 16px; display: block; }
.popup-square .img img:not([src]), .popup-square .img img[src=""] { display: none; }
.qr-code-text { text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 1px; color: rgba(255, 255, 255, .85); margin-top: 8px; user-select: all; -webkit-user-select: all; word-break: break-all; }
/* the message after a scan (#modal): the manual's anatomy */
.modal { position: fixed; inset: 0; z-index: 2150; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 24px; }
.modal .gap { flex: 1; width: 100%; }
.modal-content { display: flex; justify-content: center; width: 100%; transform: scale(.9); opacity: 0; transition: transform var(--base) var(--ease), opacity var(--base); }
.modal-block { background: var(--surface); border-radius: var(--r); padding: 24px; width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: var(--shadow-2); }
.modal-block #icon { width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: var(--ok-soft); }
.modal-block #icon.is-error { background: var(--bad-soft); }
.modal-block #icon.is-info { background: var(--violet-soft); }
.modal-header { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.modal-header .h2-bold { font-size: 24px; line-height: 1.2; }
.modal-header-desc { font-size: 14px; color: var(--muted); }
.modal-hr { width: 100%; height: 1px; background: var(--line); }
.modal-desc { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.modal-desc .bold { color: var(--ink); }
.modal-desc-items { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.modal-desc-items-item { display: flex; justify-content: space-between; font-size: 16px; }
.modal-desc-items-item-label { color: var(--text); }
.modal-desc-items-item .bold { color: var(--ink); }
.modal-block .button-default { width: 100%; }
.modal-block .actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.modal-block .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.modal-block .ico.ask { background: var(--bad-soft); color: var(--bad); }
/* the amounts a scan announces (ModulesHandler, App\Loyalty\Scanner) */
.amount-plus, .amount-redeemed { color: var(--ok); }
.amount-minus { color: var(--bad); }

/* ----------------------------------------------------------------------------------------- home */
.hero { padding: 8px 16px 0; }
.qr-tile { display: flex; gap: 16px; align-items: center; }
.qr-tile .qr { width: 120px; height: 120px; flex: none; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.qr-tile .qr img { width: 120px; height: 120px; }
.stores { display: flex; gap: 12px; justify-content: center; }
/* the home page's invitation to the stores sits in the middle (the owner, 2026-10-10) */
#download_app { text-align: center; }
.stores img { height: 44px; width: auto; }
.wl-logo { width: 96px; height: 96px; border-radius: 24px; display: block; margin: 8px auto 12px; object-fit: cover; background: var(--surface); }

/* ----------------------------------------------------------------------------------------- the businesses */
.businesses .searchnav { padding: 8px 16px 0; }
#loader { padding: 16px 0 0; }
#spots.section.all-businesses { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
#spots .empty { padding-top: 16px; }
.scan-preview { margin: 16px; height: 337px; background: #000; border-radius: var(--r); overflow: hidden; }
#preview video { width: 100%; height: 100%; object-fit: cover; }
/* the admin's picture of a tile: the pale shapes of the places that would follow it */
a.spot.preview-other { pointer-events: none; }
a.spot.preview-other i { display: block; width: 52%; height: 14px; margin: 2px 0; border-radius: 7px; background: var(--fill); }
a.spot.preview-other .addr i { width: 34%; height: 9px; }

/* ----------------------------------------------------------------------------------------- the business's page */
.business-item-offers { padding: 0; }
.header-image { position: relative; height: 237px; background: var(--fill) center / cover no-repeat; }
.header-image::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.header-image-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0 16px 14px; }
#business-headline { color: #fff; font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#business-headline span { position: static; }
/* the tabs: pills in a scrolling row, the chosen one in the business's colour */
.business-item-nav-wrap { position: relative; }
.business-item-nav { display: flex; gap: 4px; padding: 16px 16px 12px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.business-item-nav::-webkit-scrollbar { display: none; }
.button-nav { flex: none; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--muted); font-size: 16px; font-weight: 500; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.button-nav.selected { background: var(--biz); color: var(--biz-text); font-weight: 600; }
.nav-arrow { position: absolute; top: 16px; right: 0; height: 40px; width: 44px; display: none; align-items: center; justify-content: flex-end; border: 0; background: linear-gradient(to left, var(--bg) 55%, transparent); color: var(--muted); cursor: pointer; padding-right: 8px; }
.nav-arrow.show { display: flex; }
.tab-container { overflow: hidden; width: 100%; position: relative; }
.tab-inner { width: 100%; display: flex; min-height: 300px; }
.tab-content { width: 100%; min-width: 100%; transform: translateX(100%); transition: transform .4s ease-in-out; }
.tab-content.active { display: block !important; }
/* the scanner button: the FAB, dominant - a ring in the canvas colour and a strong shadow */
.camera { position: fixed; right: 16px; bottom: calc(var(--tabbar) + 16px + var(--safe-b)); z-index: 15; width: 56px; height: 56px; border-radius: 50%; justify-content: center; align-items: center; background: var(--biz); color: var(--biz-text); box-shadow: 0 0 0 4px var(--bg), 0 14px 28px -8px rgba(0, 0, 0, .5); cursor: pointer; }
.camera .i { color: var(--biz-text); width: 26px; height: 26px; }
/* the credit and the points box: the shape of old, in the business's colour */
.credits-box { position: relative; margin: 16px 16px 0; cursor: pointer; }
.credits-box > svg { display: block; width: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .09)) drop-shadow(0 2px 1px rgba(0, 0, 0, .05)); }
.svg_color { fill: var(--biz); fill-opacity: .8; }
/* the number and the QR button sit on the middle line of the box's inner band (38.5% of the box, 61.5% on the
   flipped points box), close to its left and right edge (the owner, 2026-10-10: more to the left and lower)
   the credit and points on the box in the colour the business's colour calls for (--biz-text), like every element
   drawn on it; white was tried on 2026-10-10 and the owner took it back the same day */
.credits-box-value { position: absolute; left: 5.5%; top: 38.5%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; color: var(--biz-text); font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.credits-box-value.points { top: 61.5%; }
.credits-box-label { font-size: 14px; font-weight: 400; letter-spacing: 0; opacity: .85; line-height: 1.2; }
.credits-box-qr { position: absolute; right: 5.5%; top: 38.5%; margin-top: -20px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; justify-content: center; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.credits-box-qr.points { top: 61.5%; }
.credits-box-qr .i { color: var(--ink); }
.credits-footnote { text-align: center; margin: 8px 16px 0; font-size: 12px; color: var(--muted); }
/* the vouchers: tickets with real notches (a mask; the shadow follows them), a perforation, the icon in the left part */
.tickets { margin-top: 20px; }
.tickets-title { display: flex; align-items: baseline; gap: 8px; margin: 0 16px 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
.tickets-title small { font-size: 14px; font-weight: 400; color: var(--muted); }
/* a scroll container clips on both axes: the strip is as tall as the tickets with their shadow (8px down and 18px of blur:
   26px below, 10px above) and takes that room back with its margins - the tickets stand where they stood, the shadow is whole */
.tickets-container { display: flex; gap: 12px; overflow-x: auto; padding: 12px 16px 28px; margin: -4px 0 -16px; scrollbar-width: none; }
.tickets-container::-webkit-scrollbar { display: none; }
.ticket { flex: none; width: 300px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(35, 33, 34, .08)) drop-shadow(0 8px 18px rgba(35, 33, 34, .14)); }
.ticket-content { display: flex; align-items: center; height: 88px; background: var(--biz-soft); border-radius: var(--r);
    -webkit-mask: radial-gradient(circle 11px at 88px 0, transparent 99%, #000 100%) top / 100% 50% no-repeat, radial-gradient(circle 11px at 88px 100%, transparent 99%, #000 100%) bottom / 100% 50% no-repeat;
    mask: radial-gradient(circle 11px at 88px 0, transparent 99%, #000 100%) top / 100% 50% no-repeat, radial-gradient(circle 11px at 88px 100%, transparent 99%, #000 100%) bottom / 100% 50% no-repeat; }
.ticket-icon { width: 88px; height: 88px; flex: none; display: grid; place-items: center; }
.ticket-icon img { width: 40px; height: 40px; object-fit: contain; }
.ticket-sep { width: 0; height: 52px; border-left: 2px dashed var(--line-strong); margin-left: -1px; flex: none; }
.ticket-desc { padding: 0 16px; min-width: 0; }
.ticket-desc .h3-bold { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-desc .desc { color: var(--muted); }
.ticket.pulse { animation: pulse 1.2s var(--ease) 1; }
@keyframes pulse { 30% { transform: scale(1.03); } }
/* the modules ("All Bonuses"): white cards, the programme's icon 40 without a backdrop (its duotone fill is one),
   an uploaded picture 44 in a circle */
.coupon { margin-top: 20px; }
.coupon-title { margin: 0 16px 12px; font-size: 18px; font-weight: 600; color: var(--ink); }
.coupon-container { display: flex; flex-direction: column; gap: 8px; }
.coupon-bubble { margin: 0 16px; background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-1); cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.coupon-main { display: flex; align-items: center; gap: 14px; }
.coupon-bubble-icon { width: 44px; height: 44px; flex: none; background: transparent center / 40px no-repeat; }
.coupon-bubble-icon.is-photo { border-radius: 50%; background-color: var(--fill); background-size: cover !important; }
.coupon-bubble-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coupon-bubble-content .desc { color: var(--muted); opacity: 1; }
.coupon-usage { position: relative; height: 32px; border-radius: var(--r-pill); background: var(--bg); display: flex; align-items: center; }
.coupon-usage-used { height: 32px; min-width: 96px; border-radius: var(--r-pill); background: var(--biz); color: var(--biz-text); font-size: 14px; font-weight: 600; display: flex; align-items: center; padding: 0 12px; white-space: nowrap; border: 0; }
.coupon-usage-remaining { position: absolute; right: 12px; top: 0; height: 32px; display: flex; align-items: center; font-size: 14px; color: var(--text); }
.occasion_valentine .coupon-usage-used { background: #ff69b4; }
.occasion_mothers_day .coupon-usage-used, .occasion_womens_day .coupon-usage-used { background: #c71585; }
.occasion_halloween .coupon-usage-used { background: #eb6123; }
/* the news and the shop: a card with the picture on the left */
.coupon-bubble2 { display: flex; align-items: stretch; margin: 0 16px 8px; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); color: var(--text); text-align: left; }
.coupon-main2 { display: flex; width: 100%; }
.coupon-bubble-icon2 { position: relative; width: 100px; flex: none; }
.coupon-bubble-img2 { position: absolute; inset: 0; background: var(--fill) center / cover no-repeat; }
.coupon-bubble-content2 { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.coupon-bubble-content2 .h3-bold { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coupon-bubble-content2 .desc { color: var(--muted); opacity: 1; }
.news-date { font-size: 13px; color: var(--muted); }
.news-price { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.coupon-bubble-content2 .btn { margin-top: 8px; align-self: flex-start; }
/* the Info tab */
.info-card { margin: 0 16px 16px; }
.info-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.info-row:first-child { border-top: 0; padding-top: 0; }
.info-row .i { color: var(--faint); margin-top: 2px; }
.info-row a { word-break: break-word; }
.hours { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 16px; }
.hours .today { font-weight: 600; color: var(--ink); }
.stars { color: #e4a400; display: inline-flex; gap: 2px; }
.stars svg.i { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }
.review { padding: 12px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 0; }
.review .who { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.review .who img { width: 32px; height: 32px; border-radius: 50%; }
.review p { margin-top: 6px; font-size: 14px; }
.review .when { font-size: 12px; color: var(--muted); }
/* the history */
.history { margin: 0 16px; }
.history-card { background: var(--surface); border-radius: var(--r); padding: 4px 16px; box-shadow: var(--shadow-1); }
.h3-history { padding: 0 16px; margin: 24px 0 12px; font-size: 18px; }
.history-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.history-item:first-child, .history-item:first-of-type { border-top: 0; }
.history-item a { display: flex; align-items: center; gap: 12px; width: 100%; color: inherit; text-align: left; font-weight: 400; }
.history-item-wrapper { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; }
.history-item-container { display: flex; align-items: center; gap: 12px; min-width: 0; }
.history-item-image div { width: 48px; height: 48px; border-radius: var(--r-sm); background-color: var(--fill); background-size: cover; background-position: 50% 50%; flex: none; }
.history-item-content { display: flex; flex-direction: column; min-width: 0; }
.history-item-content .subh1-bold { font-size: 16px; }
.history-item-date { font-size: 14px; color: var(--muted); }
.history-item-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.history-item-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--fill); font-size: 13px; color: var(--text); }
.history-item-chip .bold { color: var(--ink); }
.history-item-prelink { color: var(--faint); margin-left: auto; }
.history-stack { display: flex; flex-direction: column; }
.history-stack .history-item { flex-direction: column; align-items: stretch; gap: 0; }
/* the prose of a news item and a custom tab */
.prose { font-size: 16px; line-height: 1.6; color: var(--text); }
.prose p + p { margin-top: 12px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.prose a { color: var(--violet-ink); text-decoration: underline; }
.topic-photo { aspect-ratio: 16 / 9; background: var(--fill) center / cover no-repeat; }
.topic-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.zoomable { touch-action: auto; transition: transform .05s ease; transform-origin: center center; display: block; width: 100%; }
.pdf-pages { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
/* the brand's hub: its places */
.brand-hub-note { margin: 0 16px 12px; font-size: 14px; color: var(--muted); }
.brand-venues-list { display: flex; flex-direction: column; gap: 8px; margin: 0 16px 16px; }
a.brand-venue { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--surface); border-radius: var(--r); color: var(--ink); text-align: left; font-weight: 400; box-shadow: var(--shadow-1); }
.brand-venue-image { width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); background: var(--fill) center / cover no-repeat; }
.brand-venue-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-venue-text .subh2-bold { font-size: 16px; }
.brand-venue-address { font-size: 14px; color: var(--muted); }
.brand-venue-distance { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* the html of ModulesHandler: the points shop, the levels of a tiered cashback, the forms in a pop-up */
.points-item { display: flex; flex-direction: row; align-items: center; gap: 12px; background: var(--surface); color: var(--text); padding: 12px; margin-bottom: 8px; border-radius: var(--r-sm); text-align: left; }
.points-item img { width: 48px !important; min-width: 48px !important; height: 48px; object-fit: cover; border-radius: var(--r-sm); padding: 0 !important; }
.points-item h4 { margin: 0; font-size: 16px; }
.points-item p { margin: 0; font-size: 14px; color: var(--muted); }
.points-item > div { flex: 1; min-width: 0; }
.points-item .button-default { width: auto; height: 40px; padding: 0 16px; font-size: 14px; margin-left: auto; flex: none; }
.points-item.points-item-locked { filter: none; opacity: .5; background: var(--surface-2); }
.lock-date { font-size: 12px; color: var(--muted); }
.cashback-levels { width: 100%; }
.cashback-level { display: flex; align-items: center; margin-bottom: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cashback-level:last-child { margin-bottom: 0; }
.cashback-level.tone-0 { --level-bg: var(--ok-soft); --level-text: var(--ok); }
.cashback-level.tone-1 { --level-bg: #e3f2fd; --level-text: #1565c0; }
.cashback-level.tone-2 { --level-bg: var(--warn-soft); --level-text: var(--warn); }
.cashback-level.tone-3 { --level-bg: var(--bad-soft); --level-text: var(--bad); }
.cashback-level.tone-4 { --level-bg: var(--violet-soft); --level-text: var(--violet-ink); }
.cashback-level-text { flex: 1; }
.cashback-level-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.cashback-level-hint { font-size: 12px; color: var(--muted); }
.cashback-level-spent { font-size: 18px; font-weight: 600; color: var(--level-text); }
.cashback-level-bubble { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; margin-left: 12px; border-radius: 50%; background: var(--level-bg); color: var(--level-text); font-weight: 600; text-align: center; }
.cashback-level-rate { font-size: 16px; line-height: 1; }
.cashback-level-caption { margin-top: 2px; font-size: 7px; letter-spacing: .5px; }
.popup-form { padding: 16px; border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-align: left; }
.popup-form h4 { margin: 0 0 10px; font-size: 16px; }
.popup-form-row { display: flex; margin-bottom: 10px; }
.popup-form-input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm) 0 0 var(--r-sm); font-size: 14px; color: var(--ink); background: var(--surface); }
.popup-form-input.popup-form-link { font-size: 12px; color: var(--muted); }
.popup-form-button { height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.popup-form-share { width: 100%; height: 44px; padding: 0 16px; border: none; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ----------------------------------------------------------------------------------------- the QR pages (/fob, ?ref=) */
.fob-biz { display: flex; align-items: center; gap: 12px; }
.fob-biz img, .fob-biz .ph { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; background: var(--fill) center / cover no-repeat; }
.fob-biz .name { font-size: 18px; font-weight: 600; color: var(--ink); }
.fob-biz .addr { font-size: 14px; color: var(--muted); }
.fob-hero { display: block; width: 240px; height: 160px; margin: 0 auto; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); }
.step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); font-size: 14px; font-weight: 600; display: grid; place-items: center; flex: none; }
.step.done .n { background: var(--ok-soft); color: var(--ok); }
.wallets.inline { margin: 0; }
.invite { display: flex; gap: 12px; align-items: flex-start; }
.invite .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--violet); flex: none; }
.invite p { font-size: 16px; color: var(--text); }
.invite p strong { color: var(--ink); font-weight: 600; }
.perks { display: flex; flex-direction: column; gap: 10px; }
.perk { display: flex; align-items: center; gap: 12px; }
.perk .ic { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.perk .ic img { width: 32px; height: 32px; object-fit: contain; }
.perk .ttl { font-size: 16px; font-weight: 600; color: var(--ink); }
.perk .sub { font-size: 14px; color: var(--muted); }

/* ----------------------------------------------------------------------------------------- auth, profile */
.auth { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 20px; }
.auth .head { text-align: center; }
.auth .head p { margin-top: 6px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px 0; text-align: center; }
.profile-head .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--wl); margin: 0 0 8px; }
.bare-card { margin: 32px 16px; }

/* ----------------------------------------------------------------------------------------- the desktop frame */
/* on a desktop the app sits in a phone-shaped frame; its fixed parts become parts of the frame */
body.desktop-view { width: 390px; height: min(844px, calc(100dvh - 48px)); position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 8px solid #111; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); contain: paint; }
/* contain: paint clips the drawer and the sheets parked outside the frame; the body is the frame here, so its
   overflow alone would go to the viewport */
body.desktop-view main { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
body.desktop-view main::-webkit-scrollbar { display: none; }
body.desktop-view .navbar { flex: none; }
/* the fixed bars, the drawer, the sheets and the pop-ups need no override here: the body is transformed, so it is
   their containing block already; 'absolute' would anchor the drawer to the header it sits in */
body.desktop-view #footer-bar { border-radius: 0 0 32px 32px; }

/* ----------------------------------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}