/* ============================================
   HOLA Workspace — Design System
   Direction: Soft / Premium / Editorial (purple-first, orange as
   functional accent only). See DESIGN_SYSTEM.md for the full rationale.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Color tokens ---- */
  --primary: #7a1690;          /* Purple 600 — the brand, primary actions */
  --primary-600: #7a1690;
  --primary-700: #5c1070;
  --primary-500: #8d1ea0;
  --primary-100: #f3e3f7;
  --primary-50:  #faf1fc;

  --accent: #d9550a;           /* Orange 500 — functional only: money, timers, warnings, active state */
  --accent-dark: #b6470a;
  --accent-100: #fdece0;

  --success: #1c8a4a;
  --success-100: #e6f5ec;
  --danger: #c23b3b;
  --danger-100: #fbeaea;
  --warning: #b5790a;
  --warning-100: #fdf1de;
  --info: #1a7fa0;

  --bg: #fdf8fb;               /* App background — barely-tinted, not full pink */
  --bg-tint: #fbeefc;          /* Radial gradient tint over --bg */
  --surface: #ffffff;
  --surface-muted: #f8f5f9;

  --black: #211a2b;
  --gray-900: #211a2b;
  --gray-700: #52465c;
  --gray-500: #7d7086;
  --gray-400: #a397ac;
  --gray-300: #cfc4d2;
  --gray-200: #e6dce9;
  --gray-100: #f2ecf4;

  /* ---- Radius scale — pill only for controls/status, not everything ---- */
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-modal: 28px;
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* ---- Shadow scale — quiet by default; only enough to lift off the bg ---- */
  --shadow-xs: 0 1px 2px rgba(33, 26, 43, 0.06);
  --shadow-sm: 0 2px 10px rgba(33, 26, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(33, 26, 43, 0.10);
  --shadow-lg: 0 20px 48px rgba(33, 26, 43, 0.14);
  --shadow-primary: 0 6px 18px rgba(122, 22, 144, 0.22);
  --shadow-accent: 0 6px 18px rgba(217, 85, 10, 0.20);

  /* ---- Spacing scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* ---- Typography scale ---- */
  --fs-display: 3rem;       /* timers / hero numbers, 48px+ */
  --fs-h1: 1.75rem;
  --fs-h2: 1.375rem;        /* headings, 22px */
  --fs-body-lg: 1.0625rem;
  --fs-body: 0.9375rem;     /* 15px body */
  --fs-caption: 0.8125rem;  /* 13px captions */
  --fs-micro: 0.6875rem;

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases kept so nothing that still references the old token
     names (inline styles, older components) silently loses theming. */
  --light: var(--primary-100);
  --primary-dark: var(--primary-700);
  --primary-light: var(--primary-500);
  --accent-light: var(--accent);
  --white: var(--surface);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-modal);
  --radius-xl: var(--radius-pill);
  --gray-600: var(--gray-700);
  --gray-800: var(--gray-900);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Kills the default translucent flash mobile Chrome/Safari draw over a
     tapped element — on a pill/rounded button that flash renders as a
     visible rectangle around the shape (the "blue square" around
     "دخول الإدارة"/"الأسعار" on the login page). Real press feedback is
     provided instead by .btn:active's scale-down + background-darken
     below, which respects each button's own shape and design-system
     color instead of an OS-drawn overlay. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Cairo', sans-serif;
  background:
    radial-gradient(680px 480px at 88% -8%, rgba(122, 22, 144, 0.07) 0%, transparent 70%),
    radial-gradient(520px 420px at -8% 18%, rgba(217, 85, 10, 0.05) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--black);
  overflow-x: hidden;
  direction: rtl;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---- Type scale utility classes ---- */
h1, .text-display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h1); font-weight: 800; }
h3 { font-size: var(--fs-h2); font-weight: 700; }
p  { font-size: var(--fs-body); }
.caption { font-size: var(--fs-caption); color: var(--gray-500); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; }

/* ============================================
   ANIMATIONS — kept minimal and purposeful
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ringProgress {
  from { stroke-dashoffset: var(--ring-from, 251); }
  to { stroke-dashoffset: var(--ring-to, 0); }
}

.animate-fadeIn { animation: fadeIn 0.45s ease forwards; }
.animate-fadeInScale { animation: fadeInScale 0.4s ease forwards; }
.animate-slideIn { animation: slideInRight 0.4s ease forwards; }
.animate-pulse { animation: pulse 1.8s ease-in-out infinite; }

/* Glass utilities kept (used sparingly — tour/login backdrops), toned down */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ============================================
   BUTTONS
   A button's shape communicates its weight: primary is filled and solid,
   secondary is a quiet light-surface button. No shine sweep, no glow —
   one soft shadow tied to the button's own color only on primary/accent.
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Cairo', sans-serif;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Visible keyboard focus — only for keyboard/programmatic focus (not
   mouse clicks), so tabbing through the app is never a guessing game.
   Applied broadly to every clickable custom control, not just <button>. */
.btn:focus-visible,
.client-row:focus-visible,
.active-user-card:focus-visible,
.menu-row:focus-visible,
.sub-card:focus-visible,
.bottom-nav-item:focus-visible,
.admin-nav-item:focus-visible,
.wallet-chip:focus-visible,
.modal-close:focus-visible,
.quick-stat-card:focus-visible,
.menu-stepper-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


.btn-primary {
  background: var(--primary);
  color: var(--surface);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-700);
  box-shadow: 0 8px 22px rgba(122, 22, 144, 0.28);
}
.btn-primary:active:not(:disabled) { background: var(--primary-700); }

/* Secondary action — light surface, quiet. Used for "المنيو" and other
   non-primary actions so the primary action reads first without asking. */
.btn-secondary, .btn-outline {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-50);
}
.btn-secondary:active:not(:disabled), .btn-outline:active:not(:disabled) {
  background: var(--primary-100);
  border-color: var(--primary);
}

.btn-accent {
  background: var(--accent);
  color: var(--surface);
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover:not(:disabled) { background: var(--accent-dark); }
.btn-accent:active:not(:disabled) { background: var(--accent-dark); }

.btn-success {
  background: var(--success);
  color: var(--surface);
  box-shadow: 0 6px 18px rgba(28, 138, 74, 0.2);
}
.btn-success:hover:not(:disabled) { background: #146b39; }

.btn-ghost {
  background: var(--primary-50);
  color: var(--primary);
}
.btn-ghost:hover:not(:disabled) { background: var(--primary-100); }

/* Reserved for genuinely destructive/irreversible actions in confirmation
   dialogs (delete client, delete archive, delete discount code, etc.) —
   kept visually distinct from the everyday primary purple so "this can't
   be undone" reads immediately. */
.btn-danger {
  background: var(--danger);
  color: var(--surface);
  box-shadow: 0 6px 18px rgba(194, 59, 59, 0.22);
}
.btn-danger:hover:not(:disabled) { background: #a53030; }

/* Small inline spinner shown inside a button during its own loading
   state — distinct from the full-size .spinner used for page/section
   loading placeholders. */
.btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rotate 0.7s linear infinite;
  display: inline-block;
}
.btn-secondary .btn-spinner, .btn-ghost .btn-spinner, .btn-outline .btn-spinner {
  border-color: var(--gray-200);
  border-top-color: var(--primary);
}

/* min-height nudges these closer to a comfortable tap target (the
   compact padding alone lands under the ~44px guidance) without
   changing their compact visual proportions otherwise. */
.btn-sm { padding: 9px 18px; font-size: var(--fs-caption); min-height: 40px; }
.btn-lg { padding: 17px 40px; font-size: var(--fs-body-lg); }

/* ============================================
   FORMS
   ============================================ */
.input-group { position: relative; margin-bottom: var(--sp-5); }

.input-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--gray-700);
  font-size: var(--fs-caption);
}

.input-field {
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-input);
  font-family: 'Cairo', sans-serif;
  font-size: var(--fs-body-lg);
  background: var(--surface);
  transition: var(--transition);
  direction: rtl;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.input-field::placeholder { color: var(--gray-400); }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.quick-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.quick-stat-card {
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  transition: var(--transition);
}
.quick-stat-card:hover { box-shadow: var(--shadow-md); }

.quick-stat-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.quick-stat-label {
  color: var(--gray-500);
  font-size: var(--fs-caption);
  margin-bottom: 2px;
}

.quick-stat-value {
  font-size: var(--fs-body-lg);
  font-weight: 800;
  color: var(--gray-900);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.card-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--black);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge-primary { background: var(--primary-100); color: var(--primary); }
.badge-accent { background: var(--accent-100); color: var(--accent); }
.badge-success { background: var(--success-100); color: var(--success); }
.badge-danger { background: var(--danger-100); color: var(--danger); }
.badge-warning { background: var(--warning-100); color: var(--warning); }

/* ============================================
   TIMER / COUNTER
   The single boldest element on the home screen. Solid color, not a
   gradient text-clip — a big number should feel certain, not decorative.
   ============================================ */
.timer-display {
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Seconds are real-time noise next to the hours:minutes reading — shown
   smaller and in a quieter color so they don't compete with the number
   that actually matters at a glance. */
.timer-seconds {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--gray-400);
  vertical-align: baseline;
  letter-spacing: normal;
}

.timer-label {
  font-size: var(--fs-caption);
  color: var(--gray-500);
  font-weight: 500;
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(253, 248, 251, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-xs);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--primary);
}

.nav-brand img { width: 36px; height: 36px; border-radius: 10px; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Minimal wallet chip — replaces the old dashboard wallet card. Just
   enough to see the balance and tap through for what it's for, without
   taking up the visual weight of a full card. */
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-200);
  background: var(--surface);
  color: var(--gray-700);
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: var(--transition);
}
#wallet-amount { color: var(--success); font-weight: 800; }
.wallet-chip:hover { border-color: var(--primary); }

/* Desktop-only account/logout shortcut — the equivalent bottom-nav
   "حسابي" destination doesn't exist once the bottom nav hides on wider
   screens, so this keeps logout reachable without duplicating it
   alongside the bottom nav on mobile. */
.nav-account-btn { display: none; }
@media (min-width: 769px) {
  .nav-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: var(--surface);
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
  }
  .nav-account-btn:hover { border-color: var(--primary); color: var(--primary); }
  .nav-account-btn svg { width: 18px; height: 18px; }
}


/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 76px;
  padding-bottom: 40px;
  display: none;
}

#page-login { padding-top: 0; padding-bottom: 0; }

/* Client dashboard only needs bottom-nav clearance on the widths where
   the floating pill actually shows (see the max-width:768 rule below) —
   desktop has no bottom nav, so no reason to reserve space for it. */
#page-client { padding-bottom: 40px; }

.page.active { display: block; animation: fadeIn 0.4s ease; }

/* ============================================
   LOGIN SCREEN
   ============================================ */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(122, 22, 144, 0.08) 0%, transparent 70%);
  top: -220px;
  right: -220px;
  border-radius: 50%;
}

.login-screen::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(217, 85, 10, 0.05) 0%, transparent 70%);
  bottom: -120px;
  left: -120px;
  border-radius: 50%;
}

.login-logo {
  width: 108px;
  height: 108px;
  border-radius: 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

.login-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.login-subtitle {
  font-size: 1.02rem;
  color: var(--gray-500);
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.login-form { width: 100%; max-width: 380px; position: relative; z-index: 1; }

/* Swapping between the client and admin login forms (show-admin-login /
   back-to-client) used to be an instant display:none/block toggle with
   nothing in between — full page navigation elsewhere in the app already
   gets .page.active's fadeIn, this was the one transition in the login
   flow that didn't. Re-fires automatically each time the class regains
   display (the standard behavior for a display:none -> visible swap),
   so both directions get the same smooth entrance. */
.login-form:not(.hidden) { animation: fadeIn 0.3s ease; }

.login-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

.login-consent {
  margin-top: 18px;
  color: var(--gray-400);
  font-size: var(--fs-micro);
  text-align: center;
  line-height: 1.6;
}

/* ============================================
   DASHBOARD (admin stat cards / overview)
   ============================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-xs);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--sp-3);
}

.stat-icon.primary { background: var(--primary-100); }
.stat-icon.accent { background: var(--accent-100); }
.stat-icon.success { background: var(--success-100); }
.stat-icon.danger { background: var(--danger-100); }

.stat-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.stat-label { font-size: var(--fs-caption); color: var(--gray-500); font-weight: 500; }

/* Overview strip — one compact card holding all three at-a-glance
   numbers side by side with dividers, instead of three separate boxed
   cards that wrap onto their own rows and eat the top of the screen. */
.overview-strip {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-7);
  overflow-x: auto;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.overview-divider {
  width: 1px;
  align-self: stretch;
  background: var(--gray-100);
  margin: 0 var(--sp-4);
  flex-shrink: 0;
}

.overview-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.overview-icon.primary { background: var(--primary-100); color: var(--primary); }
.overview-icon.accent { background: var(--accent-100); color: var(--accent); }
.overview-icon.success { background: var(--success-100); color: var(--success); }

.overview-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overview-label {
  font-size: var(--fs-micro);
  color: var(--gray-500);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .overview-strip { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .overview-divider { display: none; }
}

/* ============================================
   SESSION CARD — the largest, most confident element on the home screen
   ============================================ */
.session-card {
  background: var(--surface);
  border-radius: var(--radius-modal);
  padding: var(--sp-7) var(--sp-6);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-md);
  position: relative;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.session-timer { text-align: center; position: relative; }

/* Subtle progress ring around the timer — replaces glow/neon per design
   direction. Purely decorative unless JS sets --ring-pct; degrades
   gracefully to "not shown" with no ring markup present. */
.timer-ring {
  display: block;
  margin: 0 auto var(--sp-2);
}

.session-price {
  text-align: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--gray-200);
}

.price-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.price-currency { font-size: var(--fs-body); color: var(--gray-500); font-weight: 600; }

/* Primary/secondary action row inside the session card */
.session-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.session-actions .btn { flex: 1; }
.session-actions .btn-primary { flex: 1.4; }

/* ============================================
   PRICING / SUBSCRIPTION CARDS — SaaS-style plan cards
   ============================================ */
.sub-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1.5px solid var(--gray-100);
  transition: var(--transition);
  padding: var(--sp-6);
  position: relative;
}

.sub-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); }

.sub-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
}

.sub-featured-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--primary);
  color: var(--surface);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.sub-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}

.sub-name { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--sp-2); }

.sub-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.sub-price span { font-size: var(--fs-body); font-weight: 600; color: var(--gray-500); }

.sub-duration { font-size: var(--fs-caption); color: var(--gray-500); margin-bottom: var(--sp-4); }

.sub-features {
  list-style: none;
  padding: var(--sp-4) 0;
  margin: var(--sp-2) 0 var(--sp-4);
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sub-features li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--gray-700);
}
.sub-features li::before {
  content: '✓';
  color: var(--success);
  font-weight: 800;
  flex-shrink: 0;
}

/* ============================================
   STAMPS / LOYALTY
   ============================================ */
.stamps-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.stamp {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gray-200);
  background: var(--surface);
  transition: var(--transition);
  position: relative;
}

.stamp.active { border-color: var(--primary); background: var(--primary-50); }

.stamp.active::after {
  content: '✓';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30%;
  height: 30%;
  min-width: 12px;
  min-height: 12px;
  background: var(--primary);
  color: var(--surface);
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.stamp img { width: 55%; height: 55%; opacity: 0.3; }
.stamp.active img { opacity: 1; }

/* ============================================
   MENU — a clean order list, not a product grid.
   Row-based: icon, name, price, quantity stepper. Built for fast ordering,
   not browsing.
   ============================================ */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-input);
  border: 1.5px solid var(--gray-100);
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
}

.menu-row:hover { border-color: var(--gray-200); background: var(--surface-muted); }

.menu-row.selected { border-color: var(--primary); background: var(--primary-50); }

.menu-row-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-row-icon svg { width: 20px; height: 20px; }

.menu-row-body { flex: 1; min-width: 0; }
.menu-row-name { font-weight: 700; font-size: var(--fs-body); color: var(--gray-900); }
.menu-row-price { font-size: var(--fs-caption); color: var(--gray-500); }

.menu-row-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* +/- stepper — replaces the old "tap the row again to add one more"
   pattern, which had no way to correct a wrong pick or remove one. */
.menu-row-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--primary-50);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.menu-stepper-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.menu-stepper-btn:hover { background: var(--primary); color: var(--surface); }
.menu-stepper-btn:active { transform: scale(0.9); }

/* Legacy grid kept in case any older markup still references it. */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.menu-item {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  text-align: center;
  border: 1.5px solid var(--gray-100);
  transition: var(--transition);
  cursor: pointer;
}
.menu-item:hover { border-color: var(--gray-200); }
.menu-item.selected { border-color: var(--primary); background: var(--primary-50); }
.menu-item-img, .menu-item-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary); object-fit: cover;
}
.menu-item-icon svg { width: 24px; height: 24px; }
.menu-item-name { font-weight: 700; font-size: var(--fs-body); margin-bottom: 4px; }
.menu-item-price { color: var(--gray-500); font-weight: 600; font-size: var(--fs-caption); }

/* ============================================
   INVOICE — the final total is the loudest number on the page
   ============================================ */
.invoice-sheet {
  background: var(--surface);
  border-radius: var(--radius-modal);
  max-width: 500px;
  margin: 0 auto;
}

/* No padding on screen — the invoice always opens inside .modal-content,
   which already pads its content-body area. Adding invoice-sheet's own
   padding on top of that stacked both (32px + 32px), squeezing the real
   usable width down to a sliver on phone-width modals and breaking
   anything that needed real room, like the discount-code action buttons.
   Print is the one case that DOES need invoice-sheet to supply its own
   margin, since .modal-content's padding is forced to 0 for print and
   the header (which normally provides visual top spacing) is hidden
   there too — handled in the @media print rules below. */
@media print {
  .invoice-sheet { padding: 24px; }
}

.invoice-header {
  text-align: center;
  border-bottom: 1px dashed var(--gray-200);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.invoice-logo { width: 64px; height: 64px; border-radius: var(--radius-sm); margin-bottom: var(--sp-3); }

.invoice-title { font-size: var(--fs-h1); font-weight: 800; color: var(--gray-900); }

.invoice-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--fs-body);
  color: var(--gray-700);
}

.invoice-row.total {
  border-top: none;
  border-bottom: none;
  margin-top: 0;
  padding: 0;
}

/* Collapsible "الطلبات" / "طرق الدفع" sections in the invoice — closed by
   default with a chevron indicating there's more to see on tap. */
.invoice-collapsible {
  margin: 16px 0;
  padding: 12px;
  background: var(--gray-100);
  border-radius: 12px;
}
.invoice-collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.invoice-collapsible summary::-webkit-details-marker { display: none; }
.invoice-collapsible summary::marker { content: ''; }
.invoice-collapsible-summary-right { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.invoice-collapsible .chevron-icon { flex-shrink: 0; transition: transform 0.2s ease; color: var(--gray-500); }
.invoice-collapsible[open] .chevron-icon { transform: rotate(180deg); }
.invoice-collapsible-body { margin-top: 10px; }
.invoice-collapsible[open] summary { margin-bottom: 0; }

/* Wrapper the JS puts around the final total — visually the loudest
   block in the invoice, per the design review. */
.invoice-total-block {
  background: var(--primary-50);
  border-radius: var(--radius-card);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice-total-label { font-weight: 700; color: var(--gray-700); font-size: var(--fs-body); }

.invoice-total {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.invoice-total span { font-size: var(--fs-body); font-weight: 600; color: var(--gray-500); }

/* ============================================
   ADMIN PANEL — Modern SaaS dashboard, distinct from client UI
   ============================================ */
.admin-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 264px;
  height: 100vh;
  height: 100dvh;
  background: #1a1424;
  padding: var(--sp-6) var(--sp-4);
  z-index: 1000;
  overflow-y: auto;
  transform: translateX(0);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.admin-sidebar.collapsed { transform: translateX(100%); }

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-7);
  padding: 0 var(--sp-2) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-sidebar-brand img { width: 40px; height: 40px; border-radius: var(--radius-sm); }

.admin-sidebar-brand span {
  color: var(--surface);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}
.admin-sidebar-brand small { display: block; color: rgba(255,255,255,0.4); font-size: var(--fs-micro); font-weight: 500; }

.admin-nav-group-label {
  color: rgba(255,255,255,0.35);
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 0 var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
  text-transform: none;
}
.admin-nav-group-label:first-of-type { margin-top: 0; }

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: 2px;
  transition: var(--transition);
  cursor: pointer;
}

.admin-nav-item:hover { background: rgba(255,255,255,0.06); color: var(--surface); }
.admin-nav-item.active { background: var(--primary); color: var(--surface); }

.admin-sidebar-footer { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.08); }

.admin-main {
  margin-right: 264px;
  padding: var(--sp-7);
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-greeting { font-size: var(--fs-h1); font-weight: 800; color: var(--black); margin-bottom: 2px; }
.admin-greeting-sub { color: var(--gray-500); font-size: var(--fs-body); margin-bottom: var(--sp-6); }

/* Active Users / Clients table — real data-table feel */
/* Active-session cards — deliberately compact: name, live duration, and
   current price only. Everything else lives in the details modal one tap
   away instead of crowding a card meant to be scanned at a glance across
   a whole grid of them. */
.active-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.active-user-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: var(--transition);
}
.active-user-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.active-user-card:active { transform: scale(0.98); }

.active-user-name {
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-user-duration {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
  font-size: var(--fs-caption);
}

.active-user-price {
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--accent);
}

/* Compact client list — name + a single actions entry point, matching
   the same row pattern as the client-facing menu list for consistency. */
.client-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.client-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-input);
  border: 1.5px solid var(--gray-100);
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
}
.client-row:hover { border-color: var(--gray-200); background: var(--surface-muted); }

.client-row-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.client-row-body { flex: 1; min-width: 0; }
.client-row-name { font-weight: 700; font-size: var(--fs-body); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-row-sub { font-size: var(--fs-caption); color: var(--gray-500); }

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.table-wrap {
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--gray-100);
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.users-table th, .users-table td {
  padding: 14px 16px;
  text-align: right;
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--fs-body);
}

.users-table th {
  background: var(--surface-muted);
  font-weight: 700;
  color: var(--gray-700);
  font-size: var(--fs-caption);
}

.users-table tr:last-child td { border-bottom: none; }
.users-table tbody tr { transition: var(--transition); }
.users-table tbody tr:hover { background: var(--primary-50); }

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-caption);
}
.status-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}
.status-dot.inactive::before { background: var(--gray-300); }

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-weight: 600;
  font-size: var(--fs-caption);
}

.live-dot {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26, 20, 36, 0.55);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-modal);
  padding: var(--sp-7);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96) translateY(8px);
  transition: var(--transition);
  box-shadow: var(--shadow-lg);
}

.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.modal-title { font-size: var(--fs-h1); font-weight: 800; color: var(--black); }

.modal-close {
  background: var(--surface-muted);
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--gray-500);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover { background: var(--danger-100); color: var(--danger); }

/* Custom confirmation dialog — same modal-overlay/modal-content system
   (same radius, shadow, spacing, backdrop) so it never looks like a
   different component, just smaller and centered on the message. Stacks
   above the regular modal via a higher z-index since a confirmation can
   be triggered from inside an already-open modal. */
.confirm-overlay { z-index: 2200; }
.confirm-dialog {
  max-width: 360px;
  text-align: center;
  padding: var(--sp-6);
}
.confirm-dialog .modal-title { font-size: var(--fs-h2); }

/* ============================================
   QR CODE
   ============================================ */
.qr-container {
  background: var(--surface);
  padding: var(--sp-6);
  border-radius: var(--radius-card);
  text-align: center;
  border: 1px solid var(--gray-100);
}

.qr-code { width: 200px; height: 200px; margin: 0 auto var(--sp-4); }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.toast {
  background: var(--surface);
  border-radius: var(--radius-input);
  padding: 14px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 280px;
  animation: slideInRight 0.35s ease;
  border-right: 3px solid var(--primary);
}

.toast.success { border-right-color: var(--success); }
.toast.error { border-right-color: var(--danger); }
.toast.warning { border-right-color: var(--warning); }

.toast-icon { display: flex; flex-shrink: 0; }
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.info .toast-icon { color: var(--primary); }

/* ============================================
   LUCIDE ICONS — inline SVGs from js/icons.js, used in place of emoji
   throughout the site (nav items, section titles, buttons, badges).
   ============================================ */
.lucide-icon { flex-shrink: 0; vertical-align: middle; }
.inline-icon { display: inline-flex; vertical-align: middle; }
.inline-icon svg, .inline-icon .lucide-icon { display: block; }

/* ============================================
   LOADING
   ============================================ */
.loading-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.loading-logo { width: 80px; height: 80px; border-radius: var(--radius-sm); animation: pulse 1.6s ease-in-out infinite; }
.loading-text { margin-top: var(--sp-5); font-weight: 700; color: var(--primary); font-size: var(--fs-body-lg); }

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid var(--primary-100);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}

/* ============================================
   BOTTOM NAVIGATION (mobile) — a floating pill, not an edge-to-edge bar,
   so it reads as a control surface sitting above the content rather than
   a permanent extension of the screen edge.
   ============================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none; /* only the pill itself should catch taps */
}

.bottom-nav-pill {
  pointer-events: auto;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-radius: var(--radius-modal);
  padding: 8px 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 7px 4px;
  border: none;
  background: none;
  color: var(--gray-400);
  font-family: 'Cairo', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.bottom-nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: var(--transition); }
.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item.active svg { transform: translateY(-1px); }
.bottom-nav-item:active { transform: scale(0.94); }

@media (max-width: 768px) {
  .bottom-nav { display: block; }
  /* Reserved space so the floating pill never sits on top of content —
     matches the pill's own height + its bottom offset with a margin. */
  #page-client { padding-bottom: 108px; }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-gray { color: var(--gray-500); }

.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.mb-1 { margin-bottom: var(--sp-2); }
.mb-2 { margin-bottom: var(--sp-4); }
.mb-3 { margin-bottom: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-7); }

.mt-1 { margin-top: var(--sp-2); }
.mt-2 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-6); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-2); }
.gap-2 { gap: var(--sp-4); }
.gap-3 { gap: var(--sp-6); }

.w-full { width: 100%; }
.hidden { display: none !important; }

/* Progress bar */
.progress-bar { width: 100%; height: 6px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.5s ease; }

/* Section title — no decorative left-bar unless content really is
   sectioned that way; kept simple. */
.section-title { font-size: var(--fs-h1); font-weight: 800; color: var(--black); margin-bottom: var(--sp-5); }

/* ============================================
   ADMIN MOBILE SIDEBAR
   ============================================ */
#admin-sidebar-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  border: none;
  cursor: pointer;
  width: auto;
  height: auto;
  max-width: 52px;
  max-height: 52px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .admin-sidebar {
    transform: translateX(100%);
    width: 280px;
    transition: transform 0.3s ease;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-right: 0; padding: 80px 16px 24px; }
  #admin-sidebar-toggle { display: flex !important; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .timer-display { font-size: 2.4rem; }
  .login-title { font-size: 1.9rem; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .toast-container { left: 16px; right: 16px; }
  .toast { min-width: 0; width: 100%; }
}

/* Small phones (most common: 360–430px). */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .card { padding: var(--sp-4); }
  .login-title { font-size: 1.55rem; }
  .login-subtitle { font-size: 0.85rem; }
  .timer-display { font-size: 1.9rem; letter-spacing: -1px; }
  .price-value { font-size: 1.6rem; }
  .session-card { padding: var(--sp-5) var(--sp-4); }
  .nav-brand span { display: none; }
  .wallet-chip { padding: 6px 10px; font-size: 0.7rem; }
  .wallet-chip svg { width: 14px; height: 14px; }
  #nav-subscriptions-btn { padding: 8px 14px; font-size: 0.75rem; }
  .session-actions .btn { padding: 12px 14px; font-size: 0.9rem; gap: 4px; }
  .btn-lg { padding: 12px 20px; font-size: 1rem; }
  .quick-stat-value { font-size: 0.95rem; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================
   PRINT (invoice only)
   ============================================ */
@media print {
  body > *:not(#modal-overlay) { display: none !important; }
  #modal-overlay {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #modal-overlay .modal-content {
    position: static !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 0 !important;
  }
  .modal-header, .modal-close, #modal-content-body button, #modal-content-body .btn {
    display: none !important;
  }
}

/* ============================================
   INTERACTIVE GUIDED TOUR — subtle spotlight, no neon
   ============================================ */
.tour-mask {
  position: fixed;
  background: rgba(26, 20, 36, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
  cursor: pointer;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-spotlight-ring {
  position: fixed;
  border: 2px solid var(--surface);
  border-radius: var(--radius-card);
  z-index: 9999;
  pointer-events: none;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 4px 24px rgba(0,0,0,0.25);
}

.tour-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  width: 300px;
  max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.tour-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }

.tour-tooltip-step {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.tour-tooltip-title { font-size: var(--fs-h2); font-weight: 800; color: var(--black); margin-bottom: 8px; }
.tour-tooltip-text { font-size: var(--fs-body); color: var(--gray-700); line-height: 1.6; margin-bottom: var(--sp-5); }

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-progress-dots { display: flex; align-items: center; gap: 5px; }

.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); transition: var(--transition); }
.tour-dot.active { background: var(--primary); width: 16px; border-radius: 4px; }

.tour-skip {
  font-size: var(--fs-caption);
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0;
  text-decoration: underline;
  font-family: 'Cairo', sans-serif;
}
.tour-skip:hover { color: var(--gray-700); }

/* The "replay tour" entry point now lives inside the "حسابي" account
   modal instead of a floating FAB (see App.showAccountModal) — removed
   entirely to stop conflicting with the floating bottom-nav pill. */

@media (max-width: 400px) {
  .tour-tooltip { width: calc(100vw - 24px); padding: var(--sp-4); }
}

@media print {
  .tour-mask, .tour-spotlight-ring, .tour-tooltip { display: none !important; }
}

/* ============================================
   REDUCED MOTION
   Anyone with this OS/browser preference set gets near-instant state
   changes instead of animated ones — content and functionality are
   unaffected, only the transition between states.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .live-dot, .spinner, .btn-spinner, .loading-logo {
    /* These specifically communicate "in progress" — keep them visibly
       spinning/pulsing (just without motion-heavy easing) rather than
       freezing into a state that reads as broken or finished. */
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ============================================
   ARCHIVE — "show more" toggle (last-week section)
   Extra rows past the first 5 stay in the DOM (so toggling is instant,
   no re-render / re-query) but hidden until the admin asks to see them.
   ============================================ */
.archive-row-extra-hidden {
  display: none;
}

/* ============================================
   GOOGLE MAPS REVIEW PROMPT
   A compact, eye-catching row (map-pin icon + short label) — not a
   button buried in a paragraph. Used at the very top of the invoice
   modal (so it never needs a scroll to be seen) and inside "حسابي".
   ============================================ */
.review-prompt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-card);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  color: var(--primary);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.review-prompt:hover,
.review-prompt:focus-visible {
  background: var(--primary-100);
  transform: translateY(-1px);
}
.review-prompt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary);
}
.review-prompt-icon svg { width: 20px; height: 20px; }
.review-prompt-label {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
}
.review-prompt-arrow {
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 0.6;
}
/* "›" matches the same chevron already used elsewhere in this RTL UI
   (e.g. "باقتي ›") for "tap to open". */