/* Garson (قرسون) — shared design system for the real product frontend */
@font-face{
  font-family:'Thmanyah Serif Display';
  src:url('/fonts/thmanyah-serif-display-light.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* New official Saudi Riyal currency symbol (SAMA / Unicode 17, U+20C1) —
   self-hosted (SIL OFL-1.1, see fonts/riyal/LICENSE.txt) rather than a CDN,
   since as of 2026 most OS/device fonts still don't ship the glyph yet and a
   third-party CDN is one more thing that can fail on a live payment-adjacent
   page. `money()` (js/api.js) now outputs the plain U+20C1 character; it's
   never wrapped in a span — this font is appended to --font-ar/--font-en
   below instead, so the browser's normal per-glyph font-fallback resolves
   just that one character here while everything else keeps rendering in
   Thmanyah/Tajawal/Inter untouched, and it works in both textContent and
   innerHTML call sites. */
@font-face{
  font-family:'Saudi Riyal';
  src:url('/fonts/riyal/saudi_riyal.woff2') format('woff2'),
      url('/fonts/riyal/saudi_riyal.woff') format('woff'),
      url('/fonts/riyal/saudi_riyal.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Saudi Riyal';
  src:url('/fonts/riyal/saudi_riyal-bold.woff2') format('woff2'),
      url('/fonts/riyal/saudi_riyal-bold.woff') format('woff'),
      url('/fonts/riyal/saudi_riyal-bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root{
  /* "نخيل وكهرمان" (Palm & Amber) palette — Aug 2026 rebrand. Variable NAMES
     kept as --gold/--gold-bright/--gold-dim/--gold-wash/--gold-ink for
     backward compat (referenced all over dashboard.html/order.html/other
     pages) even though the accent itself is now a deep palm green, not
     gold — treat "--gold-*" as "--accent-*" when reading this file. */
  /* Sept 2026 — page background set to pure white per the owner's explicit
     hex request (was a warm cream #FAF8F3 briefly, before that a cool
     near-white #F6F7F2) — every rule below still reads --page-plane by
     name, so nothing else needed editing for this to reach admin.html and
     any other page that never overrides this token locally. */
  --page-plane:#FFFFFF;
  /* Sept 2026 — single unified button text color (owner's explicit hex),
     used by every button style below regardless of role (primary/
     secondary/filter-chip) — see .btn-gold/.btn-ghost/.btn-soft. */
  --btn-ink:#161717;
  --surface-1:rgba(255,255,255,0.58);
  --surface-2:rgba(255,255,255,0.72);
  --surface-3:rgba(255,255,255,0.9);
  --surface-solid:#ffffff;
  --text-primary:#1E2A20;
  --text-secondary:#5F6B61;
  --text-muted:#5F6B61;
  --border:rgba(30,42,32,0.07);
  --border-strong:rgba(30,42,32,0.13);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.75);
  --gold:#2F6B4F;
  --gold-bright:#3E8A67;
  --gold-dim:#1F4B37;
  --gold-wash:rgba(47,107,79,0.12);
  --gold-ink:#12261C;
  --amber:#D9A441;
  --status-good:#1F9D6B;
  --status-warning:#C6860C;
  --status-critical:#B23A2E;
  /* "New/info" status blue — same semantic slot as good/warning/critical
     above (order stage = new/unconfirmed), promoted here so every page that
     colors order status (table-orders.html, dashboard.html's kitchen board,
     order-history.html) draws from one shared token instead of each
     hardcoding its own blue. Value matches the .pill.info background/text
     already in use below, so this is a naming pass, not a color change. */
  --status-info:#2A78D6;
  --status-good-wash:rgba(31,157,107,0.12);
  --status-warning-wash:rgba(198,134,12,0.18);
  --status-critical-wash:rgba(178,58,46,0.12);
  --status-info-wash:rgba(42,120,214,0.12);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-card:var(--glass-highlight), 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px rgba(30,30,40,0.10);
  --blur-glass:saturate(180%) blur(20px);
  /* Dashboard sidebar palette (redesign, Aug 2026; revised same week after
     a dark near-black version was tried and rejected on review — kept
     light/white to match the rest of the product). Still scoped to the
     sidebar only; every other surface keeps the existing light
     "page-plane" tokens above untouched.
     Sept 2026 unified design-system pass: the active-item fill/text now
     match every other control in the dashboard (زجاجي كلاسيك — a soft
     accent-wash fill with the single unified dark --btn-ink text color,
     never a solid color-fill with white text). The colored accent still
     shows up via each page's own leading indicator bar (var(--gold)),
     so "you are here" stays unmistakable while the fill/text stay neutral,
     exactly like every filter chip / to-card-btn elsewhere. */
  --sidebar-bg:#FFFFFF;
  --sidebar-bg-elevated:#E6F2EA;
  --sidebar-border:rgba(30,42,32,0.10);
  --sidebar-text:#16241A;
  --sidebar-text-muted:#33443A;
  --sidebar-group-label:#0F7A4D;
  --sidebar-item-active-bg:var(--gold-wash);
  --sidebar-item-active-text:var(--btn-ink);
  /* 'Saudi Riyal' sits in the fallback chain (not swapped in as the primary
     face) purely so the U+20C1 glyph below resolves per-character — browsers
     fall through a font-family list per missing glyph, so every other
     character keeps rendering in Thmanyah/Tajawal/Inter exactly as before. */
  --font-ar:'Thmanyah Serif Display', 'Tajawal', 'Saudi Riyal', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en:'Thmanyah Serif Display', 'Inter', 'Saudi Riyal', system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Defensive guard against a real (Playwright-confirmed) mobile bug: any
   horizontally-scrollable inner strip (e.g. dashboard.html's "hi-subtabs"
   — 10 sub-tab buttons in a flex row with its own overflow-x:auto) can, in
   an RTL document, leak its scrollable width into the page itself, making
   the WHOLE PAGE pan sideways into blank space on a phone even though the
   inner strip already scrolls correctly on its own. `overflow-x:hidden`
   here only removes that leak — it does not affect any element's own
   internal horizontal scrolling (that keeps working via its own
   overflow-x:auto), and does not touch vertical scrolling at all. Scoped to
   `html` only (not `body`) so it can't turn `body` into a second scrolling
   container and affect `position:sticky` elements that stick relative to
   the page (e.g. dashboard.html's sidebar). */
html{overflow-x:hidden;}
body{
  background:
    radial-gradient(circle at 15% -10%, rgba(47,107,79,0.18) 0%, rgba(47,107,79,0) 45%),
    radial-gradient(circle at 85% 0%, rgba(217,164,65,0.16) 0%, rgba(217,164,65,0) 40%),
    radial-gradient(circle at 50% 100%, rgba(210,220,205,0.35) 0%, rgba(210,220,205,0) 55%),
    var(--page-plane);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-ar);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;text-decoration:none;}
#app{max-width:1180px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}
.narrow{max-width:520px;margin:0 auto;}
.mid{max-width:920px;margin:0 auto;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(255,255,255,0.65);
  backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold-ink);font-size:17px;flex-shrink:0;box-shadow:0 4px 10px rgba(47,107,79,0.35);overflow:hidden;}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text b{font-size:16.5px;}
.brand-text span{font-size:12.5px;color:var(--text-muted);}

/* New Garson wordmark lockup (matches the homepage): a plain transparent
   orange "G" mark beside the "Garson" wordmark in English, with an orange
   accent on the "s" — always laid out left-to-right internally regardless
   of the page's own language/direction, since a logo lockup shouldn't
   mirror with the interface language. Nested inside the existing .brand
   container so any contextual text next to it (page title, restaurant
   name, "Super Admin" label, plan badge) keeps the page's own direction
   and layout untouched. */
.logo-lockup{ display:flex; align-items:center; gap:7px; direction:ltr; }
.logo-lockup .brand-word{ font-weight:800; font-size:18px; letter-spacing:-0.01em; color:var(--text-primary); font-family:var(--font-en); }
.logo-lockup .brand-word .accent{ color:var(--gold); }
.logo-lockup .mark{ width:24px; height:24px; flex:none; }
.logo-lockup .mark img{ width:100%; height:100%; object-fit:contain; display:block; }

main{flex:1;padding:24px 20px;}
@media(max-width:640px){main{padding:16px;}}

.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);padding:24px;}
/* Shown on a restaurant-facing page (dashboard/menu-manager/station-board/
   table-orders/order-history) when opened via the super-admin's "login as
   this restaurant" impersonation link — see each page's bootstrapImpersonation()
   snippet near its own `const token = ActiveAuth.getToken();` line. */
#impersonationBanner{position:sticky;top:0;z-index:999;background:#B23A2E;color:#fff;text-align:center;padding:9px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
#impersonationBanner button{background:#fff;color:#8C2E24;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-weight:700;font-size:12.5px;}
#impersonationBanner button:hover{background:#f2f2f2;}
/* Garson Icon System (Sep 2026) — shared sizing for the inline <svg> icons
   produced by js/icons.js's iconize()/ICONS (site-wide emoji replacement).
   Kept relative (em-based) since these icons drop into many different text
   sizes (chat bubbles, buttons, chips), unlike dashboard.html's fixed-size
   .tab-icon which only ever sits in the 20px tab bar. */
.gi-icon{width:1.05em;height:1.05em;flex-shrink:0;vertical-align:-0.15em;stroke-width:2;}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;}
.pill.good{background:var(--status-good-wash);color:#167A52;}
.pill.warning{background:var(--status-warning-wash);color:#7A5209;}
.pill.critical{background:var(--status-critical-wash);color:#8C2E24;}
.pill.gold{background:var(--gold-wash);color:var(--gold-dim);}
.pill.muted{background:rgba(30,42,32,0.06);color:var(--text-secondary);}
.pill.info{background:var(--status-info-wash);color:#1f5fad;}
.pill.pending{background:rgba(198,134,12,0.18);color:#7A5209;}

.btn{border:none;border-radius:12px;padding:12px 20px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;}
/* Sept 2026 — "زجاجي كلاسيك" (classic glass), unified: every button in the
   dashboard (primary/secondary/filter-chip alike) now shares the exact same
   frosted-glass fill and the same neutral dark text color (--btn-ink,
   owner's explicit hex) — no more separate green-text/green-fill styles
   per role. The one thing that still tells a "primary or selected" button
   apart from a plain secondary one is the border color (accent for
   gold/soft, neutral border-strong for ghost) — needed so filter chips
   (which swap the "btn-gold"/"btn-soft" vs "btn-ghost" class to show which
   one is selected) don't become visually indistinguishable from each
   other. Still keyed off --gold/--surface-2 tokens for the accent border
   (not hardcoded hex), so per-restaurant custom branding (js/api.js
   applyBrandColors) still reaches the selected-state border color. */
.btn-gold,.btn-ghost,.btn-soft{background:var(--surface-2);color:var(--btn-ink);border:1px solid var(--border-strong);box-shadow:0 6px 16px rgba(30,42,32,0.10);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);}
.btn-gold,.btn-soft{border-color:var(--gold);}
.btn-gold:hover,.btn-ghost:hover,.btn-soft:hover{background:var(--gold-wash);border-color:var(--gold);}
.btn-sm{padding:8px 14px;font-size:13.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:13.5px;color:var(--text-secondary);font-weight:700;}
.field input,.field select,.field textarea{
  border:1px solid var(--border-strong);border-radius:10px;padding:11px 13px;font-size:15px;
  background:var(--surface-solid);color:var(--text-primary);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
/* Disabled fields previously looked identical to editable ones (no browser
   default strong enough to notice against our custom borders/background) —
   admins reasonably read "doesn't respond to clicks" as "broken" rather
   than "locked on purpose". Applies everywhere a form field is disabled. */
.field input:disabled,.field select:disabled,.field textarea:disabled{
  background:var(--surface-2);color:var(--text-secondary);cursor:not-allowed;border-style:dashed;
}
/* Manual entry only for number fields — no native up/down stepper, across
   every page that shares this stylesheet (dashboard, menu manager, order
   history, etc.). Typing a value directly still works exactly as before;
   this only removes the browser's built-in +/- control. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
/* Show/hide toggle wired up in js/api.js's enablePasswordToggles() — wraps
   every password field on every page (owner login, staff login, super-admin
   login, set/reset-password, and the staff password-reset row in
   dashboard.html) with this same small button, so the eye icon and its
   behavior look and work identically everywhere in the app. */
.pw-wrap{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;}
.pw-toggle{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:16.5px;line-height:1;padding:4px 6px;color:var(--text-muted);border-radius:6px;}
.pw-toggle:hover{color:var(--text-primary);background:var(--surface-2);}
.settings-grid-3{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;}
@media(max-width:640px){.settings-grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.grid-2{grid-template-columns:1fr;}}

.muted{color:var(--text-muted);}
.secondary{color:var(--text-secondary);}
.hidden{display:none !important;}
.error-box{background:rgba(178,58,46,0.1);color:#8C2E24;border:1px solid rgba(178,58,46,0.25);border-radius:10px;padding:10px 14px;font-size:14.5px;margin-bottom:14px;}
.success-box{background:rgba(31,157,107,0.1);color:#167A52;border:1px solid rgba(31,157,107,0.25);border-radius:10px;padding:10px 14px;font-size:14.5px;margin-bottom:14px;}
/* Shared by order.html (guest group-ordering UI) and dashboard.html (staff
   duplicate-session warning banner) — kept here rather than duplicated in
   both pages' local <style> blocks. */
.group-warning-box{background:rgba(198,134,12,0.14);color:#7A5209;border:1px solid rgba(198,134,12,0.3);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:10px;}

table.data-table{width:100%;border-collapse:collapse;font-size:14.5px;}
table.data-table th{text-align:start;padding:10px 8px;color:var(--text-muted);font-size:13px;border-bottom:1px solid var(--border-strong);}
table.data-table td{padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:middle;}

.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,0.15);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* chat */
.chat-shell{max-width:460px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:560px;position:relative;background:var(--surface-solid);border:1px solid var(--border);box-shadow:var(--shadow-card);}
/* Glass header — same --blur-glass token as .card, so the header reads as
   part of the same "frosted surface" language as the rest of the app rather
   than a flat opaque bar. Purely a polish pass: still shows the
   restaurant's OWN name below (never swapped for Garson's), since each
   restaurant is who the customer is actually ordering from. */
.chat-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-3);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);}
/* Small squared-off logo mark (26px/7px-radius) — literally the demo's
   .brand-logo-img proportions — not a big round avatar bubble. Shown only
   as the letter-fallback when the restaurant hasn't uploaded a real logo
   (#restLogoWrap, styled to match below, takes over once one exists). */
.chat-head .avatar{width:26px;height:26px;border-radius:7px;background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;color:#fff;flex-shrink:0;}
#restLogoWrap{width:26px;height:26px;border-radius:7px;}
/* Lets the restaurant name/table block absorb the header's free space so
   trailing action buttons (menu, cart, participants) sit pinned at the far
   edge of the header instead of bunching up right next to the name. Single
   row (name + table pill side by side), matching the demo's flat .brand +
   .table-pill layout instead of a stacked two-line block. */
.chat-head .who{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:8px;}
.chat-head .who b{font-size:16px;font-weight:800;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);}
/* Table label — plain muted pill, literally the demo's .table-pill values
   (muted ink on a soft surface tint), not an accent-colored chip. */
.chat-head .who span{display:inline-flex;align-items:center;width:fit-content;flex-shrink:0;font-size:10.5px;font-weight:800;color:var(--text-secondary);background:var(--surface-2);border-radius:999px;padding:4px 10px;}
/* Quick-action row (📋 المنيو / 🧾 تتبع الطلب / 📅 حجز طاولة) — three equal
   pill buttons, each a shortcut into an action that already exists
   elsewhere in the chat (see the HTML comment above this bar). "المنيو" is
   styled as the filled/primary pill purely as a visual weight choice (it's
   the most common action) — it is NOT a stateful "current tab" indicator,
   since none of these three opens a persistent replacement view the way a
   real tab would. */
.quick-nav-bar{display:flex;gap:8px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.qnb-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border-strong);background:var(--surface-solid);color:var(--text-primary);border-radius:999px;padding:9px 8px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap;}
.qnb-btn:active{transform:scale(.96);}
/* Sept 2026 unified pass — matches every other "selected/primary" control
   in the unified زجاجي كلاسيك system: soft accent-wash fill + the single
   unified dark ink text color, accent color carried only by the border,
   never a solid color-fill with white text. */
.qnb-btn--primary{background:var(--gold-wash);color:var(--btn-ink,#161717);border-color:var(--gold);box-shadow:0 4px 12px rgba(30,42,32,0.10);}
.chat-scroll{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.msg-row{display:flex;gap:8px;max-width:100%;}
.msg-row.bot{justify-content:flex-start;}
.msg-row.user{justify-content:flex-end;}
.mini-avatar{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;font-size:11.5px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.bubble{max-width:78%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.75;}
.bubble.bot{background:var(--surface-2);border:1px solid var(--border);border-start-start-radius:4px;}
.bubble.user{background:var(--gold);color:#fff;border-start-end-radius:4px;font-weight:600;}
.chat-input-bar{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface-3);}
.chat-input-bar input{flex:1;border:1px solid var(--border-strong);border-radius:999px;padding:11px 16px;font-size:15px;background:var(--surface-solid);}
.chat-input-bar input:focus{outline:none;border-color:var(--gold);}

/* --- Plan-feature lock UI (js/planGate.js) — Aug 2026 subscription system.
   Distinct from a staff-permission-hidden tab: a plan-locked element STAYS
   VISIBLE (so the restaurant knows the service exists) but is dimmed with a
   🔒 badge; clicking it opens the upgrade prompt instead of its normal
   action. Shared across dashboard.html/menu-manager.html/station-board.html. */
.plan-locked{position:relative;opacity:0.55;filter:grayscale(0.35);cursor:pointer;}
.plan-locked::after{content:'🔒';position:absolute;top:2px;inset-inline-end:2px;font-size:11px;line-height:1;background:var(--surface-solid);border-radius:50%;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,0.18);}
.plan-gate-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.plan-gate-backdrop{position:absolute;inset:0;background:rgba(18,26,20,0.45);backdrop-filter:blur(2px);}
.plan-gate-box{position:relative;max-width:360px;width:100%;background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px 22px;text-align:center;}
.plan-gate-icon{font-size:30px;margin-bottom:6px;}
.plan-gate-box h3{font-size:16.5px;margin:0 0 8px;color:var(--text-primary);}
.plan-gate-box p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin:0 0 18px;}
.plan-gate-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.plan-gate-box--wide{max-width:680px;}
.plan-gate-compare{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;text-align:start;}
.plan-gate-compare-loading{width:100%;text-align:center;font-size:13.5px;color:var(--text-secondary);}
.plan-gate-compare-card{flex:1 1 170px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;}
.plan-gate-compare-card--current{border-color:var(--border-strong);}
.plan-gate-compare-card--recommended{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.plan-gate-compare-card h4{margin:6px 0 4px;font-size:15px;color:var(--text-primary);}
.plan-gate-compare-price{font-size:14px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-bottom:6px;}
.plan-gate-compare-price span{font-size:11.5px;font-weight:400;color:var(--text-secondary);}
.plan-gate-compare-card ul{margin:0;padding-inline-start:16px;font-size:12.5px;color:var(--text-secondary);}
.plan-gate-compare-card ul li{margin-bottom:3px;}
.plan-quota-note{font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;}
.plan-quota-note.plan-quota-note--full{color:var(--status-critical);font-weight:700;}
.cart-bar{position:absolute;bottom:0;inset-inline-start:0;right:0;left:0;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;font-weight:800;font-size:14.5px;cursor:pointer;}