/* =================================================================
   Viktorium — Shared Design Tokens & Component Styles
   Loaded by all 8 pages via <link href="vikt-tokens.css">.
   Page-specific styles remain inline in each HTML file.
   ================================================================= */

/* ---- Design Tokens ---- */
:root{
  --bg:#0a0908;
  --bg-soft:#0f0c0a;
  --card:#161210;
  --card-2:#1c1611;
  --border: rgba(197,159,74,0.16);
  --border-strong: rgba(197,159,74,0.34);
  --gold-deep:#a9812f;
  --gold:#c9a24a;
  --gold-2:#e9c86b;
  --gold-bright:#f2d68f;
  --gold-ink:#1c1305;
  --wine:#5c1420;
  --wine-2:#8a2436;
  --text:#f5efe2;
  --muted:#96897a;
  --muted-2:#6f6357;
  --danger:#e2585c;
  --success:#4caf6d;
  --blue:#6fa8c9;
  --font-display:'Fraunces', 'Cambria', serif;
  --font-body:'Manrope', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-ar:'Tajawal', 'Manrope', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Courier New', monospace;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card: 0 16px 40px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.3);
  --ease: cubic-bezier(.16,1,.3,1);
  /* ---- Typography Scale ---- */
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs-md:  14px;
  --fs-base: 15px;
  --fs-lg:  16.5px;
  --fs-xl:  20px;
  --fs-2xl: 25px;
  --fs-3xl: 30px;
  /* ---- Spacing Scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* ---- V2 Premium Tokens ---- */
  --glass-bg: rgba(22,18,16,0.65);
  --glass-border: rgba(197,159,74,0.12);
  --glass-blur: 16px;
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-medium: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-dramatic: 0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  --gradient-gold: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-bright) 50%, var(--gold-deep) 100%);
  --gradient-wine: linear-gradient(135deg, var(--wine) 0%, var(--wine-2) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --transition-fast: 0.15s var(--ease);
  --transition-base: 0.25s var(--ease);
  --transition-slow: 0.4s var(--ease);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.25,.1,.25,1);
}

/* ---- Global Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
html{-webkit-tap-highlight-color:transparent;}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Selection & Focus ---- */
::selection{background:rgba(201,162,74,0.32);color:var(--text);}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:6px;}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:2px solid var(--card);}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

/* ---- Screen Reader Only ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- Mono & Display Helpers ---- */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.impact{font-family:var(--font-display);}

/* ---- Shared Animations ---- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
@keyframes spin-slow{to{transform:rotate(360deg);}}
@keyframes pulse-glow{
  0%,100%{opacity:0.65;transform:scale(1);}
  50%{opacity:1;transform:scale(1.08);}
}
@keyframes status-in{
  from{opacity:0;transform:translateY(8px) scale(.98);}
  to{opacity:1;transform:none;}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(20px);}
  to{opacity:1;transform:none;}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-20px);}
  to{opacity:1;transform:none;}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.9);}
  to{opacity:1;transform:scale(1);}
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,74,0.2);}
  50%{box-shadow:0 0 0 8px rgba(201,162,74,0);}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ================================================================
   COMPONENT: Language Selector (3-way segmented control)
   Usage: <div class="lang-selector" id="langSelector">
            <button data-lang="fr" class="lang-opt active">FR</button>
            <button data-lang="en" class="lang-opt">EN</button>
            <button data-lang="ar" class="lang-opt">AR</button>
          </div>
   ================================================================ */
.lang-selector{
  display:inline-flex;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  gap:2px;
  position:relative;
}
.lang-opt{
  position:relative;
  z-index:1;
  background:transparent;
  border:none;
  color:var(--muted);
  padding:7px 14px;
  min-height:34px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.6px;
  cursor:pointer;
  font-family:var(--font-body);
  transition:color .25s var(--ease), transform .15s var(--ease);
  text-transform:uppercase;
}
html[dir="rtl"] .lang-opt{font-family:var(--font-ar);}
.lang-opt:hover{color:var(--gold-bright);}
.lang-opt:active{transform:scale(0.95);}
.lang-opt.active{
  background:linear-gradient(145deg, var(--gold-2), var(--gold-deep));
  color:var(--gold-ink);
  box-shadow:0 3px 10px rgba(201,162,74,0.3);
  font-weight:800;
}

/* Staff header variant (smaller, for use in app headers) */
.lang-selector.lang-selector-sm{
  padding:2px;
  gap:1px;
}
.lang-selector.lang-selector-sm .lang-opt{
  padding:5px 10px;
  min-height:28px;
  font-size:10.5px;
}

/* ================================================================
   COMPONENT: Gold Gradient Button (primary CTA)
   ================================================================ */
.btn-gold{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-bright) 50%, var(--gold-deep) 100%);
  background-size:220% 100%;background-position:0% 0%;
  border:none;
  color:var(--gold-ink);
  border-radius:var(--radius-md);
  padding:13px 24px;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  font-family:var(--font-body);
  box-shadow:0 10px 26px rgba(201,162,74,0.28);
  transition:background-position .6s var(--ease), transform .15s var(--ease), box-shadow .3s var(--ease);
}
.btn-gold::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 48%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.btn-gold:hover{background-position:100% 0%;box-shadow:0 14px 32px rgba(201,162,74,0.4);transform:translateY(-2px);}
.btn-gold:hover::after{transform:translateX(130%);}
.btn-gold:active{transform:translateY(0) scale(0.99);}
.btn-gold:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-gold:disabled::after{display:none;}

/* Pill variant */
.btn-gold.btn-pill{border-radius:999px;}

/* Small variant */
.btn-gold.btn-sm{padding:10px 18px;font-size:var(--fs-sm);letter-spacing:0.5px;}

/* ================================================================
   COMPONENT: Ghost / Outline Button
   ================================================================ */
.btn-ghost{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--muted);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  font-family:var(--font-body);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn-ghost:hover{background:rgba(197,159,74,0.08);color:var(--text);border-color:var(--gold);}
.btn-ghost:active{transform:scale(0.97);}

/* Danger variant */
.btn-danger{
  background:transparent;
  border:1px solid rgba(226,88,92,0.4);
  color:var(--danger);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  font-family:var(--font-body);
  transition:background .2s var(--ease), transform .15s var(--ease);
}
.btn-danger:hover{background:rgba(226,88,92,0.1);}
.btn-danger:active{transform:scale(0.97);}

/* ================================================================
   COMPONENT: Badge / Tag
   ================================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
  line-height:1.4;
}
.badge-gold{
  background:rgba(201,162,74,0.12);
  color:var(--gold-2);
  border:1px solid rgba(201,162,74,0.3);
}
.badge-success{
  background:rgba(76,175,109,0.12);
  color:var(--success);
  border:1px solid rgba(76,175,109,0.3);
}
.badge-danger{
  background:rgba(226,88,92,0.12);
  color:var(--danger);
  border:1px solid rgba(226,88,92,0.3);
}
.badge-muted{
  background:rgba(150,137,122,0.12);
  color:var(--muted);
  border:1px solid rgba(150,137,122,0.3);
}
html[dir="rtl"] .badge{font-family:var(--font-ar);}

/* ================================================================
   COMPONENT: Card
   ================================================================ */
.card-unified{
  background:linear-gradient(165deg, var(--card-2) 0%, var(--card) 55%, rgba(22,18,16,.92) 100%);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  padding:16px 16px 14px;
  box-shadow:var(--shadow-subtle);
  position:relative;
  overflow:hidden;
  transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.card-unified:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:var(--shadow-medium);
}
/* ---- Card inner elements (unified across payment/kitchen/delivery) ---- */
.card-unified .meta{
  font-size:var(--fs-xs);
  color:var(--gold-bright);
  font-family:var(--font-display);
  letter-spacing:.4px;
}
.card-unified .name{
  font-weight:700;
  font-size:var(--fs-lg);
  margin-top:6px;
  font-family:var(--font-display);
}
.card-unified .phone{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-top:2px;
}
.card-unified .items{
  font-size:13.5px;
  margin-top:13px;
  line-height:1.7;
  color:var(--text);
}
.card-unified .total{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-xl);
  line-height:1;
  margin-top:13px;
  background:linear-gradient(180deg, var(--gold-bright) 20%, var(--gold) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* ---- Status badges (unified pill style) ---- */
.o-badge{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:20px;
}
.o-badge.is-ready{
  color:var(--success);
  background:rgba(76,175,109,.12);
  border:1px solid rgba(76,175,109,.35);
}
.o-badge.is-onway{
  color:var(--blue);
  background:rgba(111,168,201,.12);
  border:1px solid rgba(111,168,201,.35);
}
.o-badge.is-pending{
  color:var(--gold-2);
  background:rgba(233,200,107,.12);
  border:1px solid rgba(233,200,107,.35);
}
.card-unified::before{
  content:"";
  position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.card-unified h2{
  display:flex;align-items:center;gap:12px;
  font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:2px;
  color:var(--gold-2);margin:0 0 16px;font-weight:700;
  font-family:var(--font-body);
}
.card-unified h2::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--border-strong), transparent);
}

/* ================================================================
   COMPONENT: Chat Widget (slide-out panel)
   ================================================================ */
.chat-widget-toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:800;
  width:52px;height:52px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--gold-2), var(--gold-deep));
  border:none;
  color:var(--gold-ink);
  cursor:pointer;
  box-shadow:0 6px 20px rgba(201,162,74,0.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease);
}
html[dir="rtl"] .chat-widget-toggle{right:auto;left:20px;}
.chat-widget-toggle:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(201,162,74,0.45);}
.chat-widget-toggle:active{transform:scale(0.95);}
.chat-widget-toggle svg{width:24px;height:24px;}

.chat-widget-badge{
  position:absolute;
  top:-4px;right:-4px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--danger);
  color:#fff;
  font-size:10px;font-weight:800;
  align-items:center;justify-content:center;
  border:2px solid var(--bg);
  /* hidden by default; JS flips display:flex when unread > 0 */
  display:none;
}

.chat-panel{
  position:fixed;
  bottom:80px;
  right:20px;
  z-index:801;
  width:360px;
  max-height:500px;
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  display:none;
  flex-direction:column;
  overflow:hidden;
  animation:fadeUp .25s var(--ease);
}
html[dir="rtl"] .chat-panel{right:auto;left:20px;}

.chat-panel.open{display:flex;}

.chat-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
  flex-shrink:0;
}
.chat-panel-header .chat-panel-title{
  font-family:var(--font-display);
  font-size:var(--fs-md);font-weight:600;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chat-panel-close{
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;padding:4px;border-radius:6px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.chat-panel-close:hover{color:var(--text);background:rgba(255,255,255,0.06);}

.chat-panel-messages{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:8px;
  min-height:200px;max-height:340px;
}

.chat-panel-input{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--bg-soft);
  flex-shrink:0;
}
.chat-panel-input input{
  flex:1;background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-panel-input input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,0.14);}
.chat-panel-input button{
  background:linear-gradient(145deg,var(--gold-2),var(--gold-deep));
  border:none;color:var(--gold-ink);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;font-family:var(--font-body);
  white-space:nowrap;
  transition:transform .15s var(--ease);
}
.chat-panel-input button:active{transform:scale(0.95);}

/* Chat message bubbles (inside widget) */
.chat-widget-msg{
  max-width:85%;padding:10px 14px;
  border-radius:var(--radius-md);
  font-size:13px;line-height:1.45;
  animation:fadeUp .2s var(--ease);
  word-wrap:break-word;
}
.chat-widget-msg .msg-sender{font-size:10px;font-weight:700;margin-bottom:3px;letter-spacing:.3px;}
.chat-widget-msg .msg-text{color:var(--text);}
.chat-widget-msg .msg-time{font-size:9px;color:var(--muted-2);margin-top:4px;font-family:var(--font-mono);}
.chat-widget-msg.other{
  align-self:flex-start;
  background:var(--card-2);border:1px solid var(--border);
}
.chat-widget-msg.other .msg-sender{color:var(--gold-2);}
.chat-widget-msg.mine{
  align-self:flex-end;
  background:linear-gradient(135deg,rgba(169,129,47,0.22),rgba(197,159,74,0.14));
  border:1px solid rgba(197,159,74,0.3);
}
.chat-widget-msg.mine .msg-sender{color:var(--gold-bright);text-align:right;}
.chat-widget-msg.mine .msg-time{text-align:right;}

.chat-widget-empty{
  color:var(--muted);font-size:var(--fs-sm);text-align:center;
  padding:40px 12px;flex:1;display:flex;align-items:center;justify-content:center;
}

@media (max-width:480px){
  .chat-panel{
    right:8px;left:8px;
    width:auto;
    bottom:72px;
    max-height:60vh;
  }
  html[dir="rtl"] .chat-panel{right:auto;left:8px;}
  .chat-widget-toggle{bottom:14px;right:14px;}
  html[dir="rtl"] .chat-widget-toggle{right:auto;left:14px;}
}

/* ================================================================
   V2 COMPONENT: Glass Card (premium card with backdrop blur)
   ================================================================ */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:20px 18px;
  box-shadow:var(--shadow-medium);
  position:relative;
  overflow:hidden;
  transition:transform var(--transition-base), box-shadow var(--transition-base);
}
.glass-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.glass-card::after{
  content:"";
  position:absolute;inset:0;
  background:var(--gradient-glass);
  pointer-events:none;
  border-radius:inherit;
}
.glass-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-dramatic);
}
.glass-card:hover::after{
  background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
}

/* ================================================================
   V2 COMPONENT: Gradient Button (enhanced with ripple)
   ================================================================ */
.btn-gradient{
  position:relative;
  overflow:hidden;
  background:var(--gradient-gold);
  background-size:200% 100%;
  border:none;
  color:var(--gold-ink);
  border-radius:var(--radius-md);
  padding:13px 24px;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  font-family:var(--font-body);
  box-shadow:0 8px 24px rgba(201,162,74,0.3);
  transition:all var(--transition-base);
}
.btn-gradient::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%);
  transform:translateX(-130%);
  transition:transform 0.6s var(--ease);
  pointer-events:none;
}
.btn-gradient:hover{
  background-position:100% 0;
  box-shadow:0 12px 32px rgba(201,162,74,0.45);
  transform:translateY(-2px);
}
.btn-gradient:hover::after{transform:translateX(130%);}
.btn-gradient:active{transform:translateY(0) scale(0.98);}
.btn-gradient:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-gradient:disabled::after{display:none;}
.btn-gradient.btn-pill{border-radius:999px;}
.btn-gradient.btn-sm{padding:10px 18px;font-size:var(--fs-sm);letter-spacing:0.5px;}

/* Ripple effect for buttons */
.ripple{position:relative;overflow:hidden;}
.ripple::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  transform:translate(-50%,-50%);
  transition:width 0.5s var(--ease), height 0.5s var(--ease), opacity 0.5s var(--ease);
  opacity:0;
  pointer-events:none;
}
.ripple:active::before{
  width:250px;height:250px;opacity:1;
  transition:0s;
}

/* ================================================================
   V2 COMPONENT: Wine Button (secondary CTA)
   ================================================================ */
.btn-wine{
  position:relative;
  overflow:hidden;
  background:var(--gradient-wine);
  border:1px solid rgba(138,36,54,0.4);
  color:var(--text);
  border-radius:var(--radius-md);
  padding:12px 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  cursor:pointer;
  font-family:var(--font-body);
  box-shadow:0 6px 18px rgba(92,20,32,0.3);
  transition:all var(--transition-base);
}
.btn-wine:hover{
  box-shadow:0 10px 28px rgba(92,20,32,0.45);
  transform:translateY(-1px);
  border-color:rgba(138,36,54,0.6);
}
.btn-wine:active{transform:translateY(0) scale(0.98);}
.btn-wine.btn-pill{border-radius:999px;}

/* ================================================================
   V2 COMPONENT: Premium Input / Textarea
   ================================================================ */
.input-premium{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-premium:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,74,0.12), 0 4px 12px rgba(0,0,0,0.2);
}
.input-premium::placeholder{color:var(--muted-2);}
.input-premium:disabled{opacity:0.5;cursor:not-allowed;}

textarea.input-premium{
  resize:vertical;
  min-height:80px;
  line-height:1.5;
}

.input-group{display:flex;flex-direction:column;gap:6px;}
.input-label{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.3px;
  text-transform:uppercase;
}

/* ================================================================
   V2 COMPONENT: Premium Select
   ================================================================ */
.select-premium{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:12px 36px 12px 14px;
  font-size:14px;
  font-family:var(--font-body);
  outline:none;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396897a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
html[dir="rtl"] .select-premium{
  padding:12px 14px 12px 36px;
  background-position:left 14px center;
}
.select-premium:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,74,0.12);
}

/* ================================================================
   V2 COMPONENT: Premium Toggle Switch
   ================================================================ */
.toggle-premium{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.toggle-premium input{display:none;}
.toggle-track{
  width:44px;height:24px;
  background:var(--border-strong);
  border-radius:999px;
  position:relative;
  transition:background var(--transition-base);
}
.toggle-track::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;
  background:var(--text);
  border-radius:50%;
  transition:transform var(--transition-base);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.toggle-premium input:checked + .toggle-track{
  background:linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.toggle-premium input:checked + .toggle-track::after{
  transform:translateX(20px);
}
.toggle-label{font-size:var(--fs-sm);color:var(--muted);font-weight:600;}

/* ================================================================
   V2 COMPONENT: Status Pill (premium badge)
   ================================================================ */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  border:1px solid transparent;
}
.status-pill::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.status-pill-gold{
  background:rgba(201,162,74,0.1);
  color:var(--gold-2);
  border-color:rgba(201,162,74,0.25);
}
.status-pill-gold::before{background:var(--gold-2);box-shadow:0 0 6px var(--gold-2);}
.status-pill-success{
  background:rgba(76,175,109,0.1);
  color:var(--success);
  border-color:rgba(76,175,109,0.25);
}
.status-pill-success::before{background:var(--success);box-shadow:0 0 6px var(--success);}
.status-pill-danger{
  background:rgba(226,88,92,0.1);
  color:var(--danger);
  border-color:rgba(226,88,92,0.25);
}
.status-pill-danger::before{background:var(--danger);box-shadow:0 0 6px var(--danger);}
.status-pill-muted{
  background:rgba(150,137,122,0.1);
  color:var(--muted);
  border-color:rgba(150,137,122,0.25);
}
.status-pill-muted::before{background:var(--muted);}
.status-pill-blue{
  background:rgba(111,168,201,0.1);
  color:var(--blue);
  border-color:rgba(111,168,201,0.25);
}
.status-pill-blue::before{background:var(--blue);box-shadow:0 0 6px var(--blue);}

/* ================================================================
   V2 COMPONENT: Quick Rating (complaints feedback)
   ================================================================ */
.quick-rating{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.quick-rating-label{
  font-size:var(--fs-sm);
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}
.quick-rating-btns{display:flex;gap:8px;}
.quick-rating-btn{
  width:48px;height:48px;
  border-radius:50%;
  border:2px solid var(--border);
  background:var(--bg);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  transition:all var(--transition-fast);
}
.quick-rating-btn:hover{
  border-color:var(--gold);
  transform:scale(1.1);
  box-shadow:0 4px 16px rgba(201,162,74,0.2);
}
.quick-rating-btn.selected{
  border-color:var(--gold);
  background:rgba(201,162,74,0.12);
  transform:scale(1.12);
  box-shadow:0 4px 20px rgba(201,162,74,0.3);
}
.quick-rating-btn.selected.negative{
  border-color:var(--danger);
  background:rgba(226,88,92,0.12);
  box-shadow:0 4px 20px rgba(226,88,92,0.3);
}

/* ================================================================
   V2 COMPONENT: Customer Chat Widget (embedded in pages)
   ================================================================ */
.customer-chat{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:700;
  width:340px;
  max-height:480px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-dramatic);
  display:none;
  flex-direction:column;
  overflow:hidden;
  animation:fadeUp .3s var(--ease);
}
html[dir="rtl"] .customer-chat{right:auto;left:20px;}
.customer-chat.open{display:flex;}
.customer-chat-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(201,162,74,0.08), rgba(92,20,32,0.06));
}
.customer-chat-header .chat-avatar{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--gradient-gold);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--gold-ink);font-weight:800;
  flex-shrink:0;
}
.customer-chat-header .chat-info{flex:1;}
.customer-chat-header .chat-name{
  font-size:var(--fs-sm);font-weight:700;color:var(--text);
}
.customer-chat-header .chat-status{
  font-size:var(--fs-xs);color:var(--success);display:flex;align-items:center;gap:4px;
}
.customer-chat-header .chat-status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--success);
  animation:pulse-glow 2s infinite;
}
.customer-chat-messages{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:8px;
  min-height:180px;max-height:300px;
}
.customer-chat-input{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--bg-soft);
}
.customer-chat-input input{
  flex:1;background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color var(--transition-fast);
}
.customer-chat-input input:focus{border-color:var(--gold);}
.customer-chat-input button{
  background:var(--gradient-gold);
  border:none;color:var(--gold-ink);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;font-family:var(--font-body);
  transition:transform var(--transition-fast);
}
.customer-chat-input button:active{transform:scale(0.95);}

/* Customer chat floating toggle */
.customer-chat-toggle{
  position:fixed;
  bottom:20px;right:20px;
  z-index:699;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--gradient-wine);
  border:none;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 6px 20px rgba(92,20,32,0.4);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-base);
}
html[dir="rtl"] .customer-chat-toggle{right:auto;left:20px;}
.customer-chat-toggle:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(92,20,32,0.55);}
.customer-chat-toggle:active{transform:scale(0.95);}
.customer-chat-toggle svg{width:22px;height:22px;}

@media (max-width:480px){
  .customer-chat{right:8px;left:8px;width:auto;bottom:72px;max-height:55vh;}
  html[dir="rtl"] .customer-chat{right:auto;left:8px;}
  .customer-chat-toggle{bottom:14px;right:14px;}
  html[dir="rtl"] .customer-chat-toggle{right:auto;left:14px;}
}

/* ================================================================
   V2 COMPONENT: Animated Tab Bar
   ================================================================ */
/* ---- Unified Tab Bar (matches payment.html luxury style) ---- */
#page-tabs,.tab-bar,.tabs,.kitchen-tabs{
  display:flex;gap:10px;margin:22px 0 26px;
}
#page-tabs button,.tab-bar .tab-item,.tabs .tab-item,.kitchen-tab-btn{
  flex:1;background:var(--card);color:var(--muted);
  border:1px solid var(--border);border-radius:var(--radius-md,12px);
  padding:14px 18px;font-family:var(--font-display);
  font-size:17px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;transition:all var(--transition-base);text-align:left;
}
#page-tabs button .tab-sub,.tab-bar .tab-sub{
  display:block;font-family:var(--font-body);
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  opacity:.7;margin-top:5px;font-weight:600;
}
#page-tabs button:hover,.tab-bar .tab-item:hover,
.tabs .tab-item:hover,.kitchen-tab-btn:hover{
  border-color:var(--border-strong);color:var(--gold-2);transform:translateY(-1px);
}
#page-tabs button.active,.tab-bar .tab-item.active,
.tabs .tab-item.active,.kitchen-tab-btn.active{
  background:var(--card-2,var(--card));color:var(--gold-2);
  border-color:var(--gold-deep,var(--gold));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ================================================================
   V2 COMPONENT: KPI Stat Card
   ================================================================ */
.kpi-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:18px 16px;
  text-align:center;
  transition:all var(--transition-base);
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);}
.kpi-value{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:800;
  background:var(--gradient-gold);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1.2;
}
.kpi-label{
  font-size:var(--fs-xs);
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-top:4px;
}

/* ================================================================
   V2 COMPONENT: Section Header
   ================================================================ */
.section-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:var(--space-5);
}
.section-header h2{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--gold-2);
  margin:0;
  white-space:nowrap;
}
.section-header::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--border-strong), transparent);
}

/* ================================================================
   V2 COMPONENT: Empty / Loading / Error States (premium)
   ================================================================ */
.state-empty{
  text-align:center;
  padding:48px 20px;
  color:var(--muted);
}
.state-empty .state-icon{
  font-size:48px;
  margin-bottom:12px;
  opacity:0.5;
}
.state-empty .state-text{
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.3px;
}

.state-loading{
  text-align:center;
  padding:48px 20px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.state-loading .spinner{
  width:28px;height:28px;
  border:3px solid var(--border-strong);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin-slow 0.8s linear infinite;
}
.state-loading .state-text{
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.3px;
}

.state-error{
  text-align:center;
  padding:48px 20px;
  color:var(--danger);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.state-error .state-icon{
  font-size:40px;
  opacity:0.7;
}
.state-error .state-text{
  font-size:var(--fs-sm);
  font-weight:600;
}
.state-error .btn-retry{
  margin-top:4px;
}

/* ================================================================
   V2 COMPONENT: Permission Badge (role indicator)
   ================================================================ */
.role-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.6px;
  text-transform:uppercase;
}
.role-badge::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  flex-shrink:0;
}
.role-admin{background:rgba(201,162,74,0.12);color:var(--gold-2);}
.role-admin::before{background:var(--gold-2);}
.role-kitchen{background:rgba(233,200,107,0.12);color:var(--gold-bright);}
.role-kitchen::before{background:var(--gold-bright);}
.role-delivery{background:rgba(111,168,201,0.12);color:var(--blue);}
.role-delivery::before{background:var(--blue);}
.role-floor{background:rgba(76,175,109,0.12);color:var(--success);}
.role-floor::before{background:var(--success);}
.role-cashier{background:rgba(138,36,54,0.12);color:var(--wine-2);}
.role-cashier::before{background:var(--wine-2);}
.role-customer{background:rgba(150,137,122,0.12);color:var(--muted);}
.role-customer::before{background:var(--muted);}

/* ================================================================
   V2 COMPONENT: Skeleton Loader
   ================================================================ */
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.skeleton{
  background:linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
.skeleton-line{height:12px;margin-bottom:8px;}
.skeleton-line.w-60{width:60%;}
.skeleton-line.w-80{width:80%;}
.skeleton-line.w-100{width:100%;}
.skeleton-circle{width:40px;height:40px;border-radius:50%;}

/* ================================================================
   V2 UTILITY: Micro-animation helpers
   ================================================================ */
/* NOTE: durations are written literally — var(--transition-base) already
   expands to "0.25s cubic-bezier(...)", so appending another easing after it
   made the whole animation declaration invalid (it collapsed to none). */
.anim-fade-in{animation:fadeIn 0.4s var(--ease) both;}
.anim-fade-up{animation:fadeUp 0.45s var(--ease) both;}
.anim-pop-in{animation:popIn 0.45s var(--ease-bounce) both;}
.anim-stagger>*{animation:fadeUp 0.45s var(--ease) both;}
.anim-stagger>*:nth-child(1){animation-delay:0.05s;}
.anim-stagger>*:nth-child(2){animation-delay:0.1s;}
.anim-stagger>*:nth-child(3){animation-delay:0.15s;}
.anim-stagger>*:nth-child(4){animation-delay:0.2s;}
.anim-stagger>*:nth-child(5){animation-delay:0.25s;}
.anim-stagger>*:nth-child(6){animation-delay:0.3s;}
.anim-stagger>*:nth-child(7){animation-delay:0.35s;}
.anim-stagger>*:nth-child(8){animation-delay:0.4s;}

/* Touch targets — coarse pointer devices (no @import) */
@media (pointer:coarse){
  .lang-opt{min-height:44px;padding:8px 14px;}
  .lang-selector-sm .lang-opt{min-height:44px;padding:7px 10px;}
  .chat-panel-close{min-height:44px;min-width:44px;padding:10px;}
  .chat-panel-input button{min-height:44px;padding:12px 16px;}
  .customer-chat-input button{min-height:44px;padding:12px 14px;}
  .quick-rating-btn{min-width:48px;min-height:48px;}
  .tab-bar .tab-item{min-height:44px;}
}


/* ================================================================
   V3 COMPONENT: Modern Mobile Pass (phones-first)
   - Tab bars become swipeable snap-chips, sub-labels hidden
   - Status line de-cluttered (timestamp hidden)
   - Safe-area aware
   ================================================================ */
@media (max-width:720px){
  /* --- header utility row: never crowded --- */
  header{row-gap:8px !important;}
  #status-time{display:none !important;}
  #status-dot{font-size:11px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.04);}
  #status-line{width:100%;margin-left:0 !important;margin-inline-start:0 !important;gap:8px;flex-wrap:wrap;align-items:center;}
  .lang-selector{padding:2px;}
  .lang-opt{padding:5px 11px;font-size:11px;}

  /* --- tabs -> horizontal snap chip bar (swipe, no wrap, no sub-text) --- */
  .tab-bar,#page-tabs,.tabs,.kitchen-tabs{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    gap:6px !important;overflow-x:auto !important;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding:4px;margin:0 0 14px !important;
    scrollbar-width:none;-ms-overflow-style:none;
    background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-md,12px);
  }
  .tab-bar::-webkit-scrollbar,#page-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,.kitchen-tabs::-webkit-scrollbar{display:none;}
  .tab-bar .tab-item,#page-tabs button,.tab-btn,.kitchen-tab-btn{
    flex:0 0 auto !important;scroll-snap-align:start;white-space:nowrap;border-radius:999px !important;
    padding:9px 16px !important;font-size:13px !important;text-align:center !important;
    border:1px solid transparent !important;background:transparent !important;
    box-shadow:none !important;transform:none !important;border-radius:999px;
  }
  .tab-bar .tab-item:hover,#page-tabs button:hover,.tab-btn:hover,.kitchen-tab-btn:hover{
    transform:none !important;color:var(--gold-2);
  }
  .tab-bar .tab-item.active,#page-tabs button.active,.tab-btn.active,.kitchen-tab-btn.active{
    background:var(--card-2,var(--card)) !important;color:var(--gold-2) !important;
    border-color:var(--gold-deep,var(--gold)) !important;font-weight:800;
    box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
  }
  .tab-sub{display:none !important;}
  .tab-icon{width:17px;height:17px;vertical-align:-3px;margin-inline-end:5px;}
}
@media (max-width:380px){
  .brand-sub,.role-badge{display:none;}
  .lang-opt{padding:4px 9px;}
}
@media (pointer:coarse){
  .tab-bar .tab-item:active,#page-tabs button:active,.tab-btn:active,.kitchen-tab-btn:active{transform:scale(.96);}
}

/* ================================================================
   Inline SVG Icon Helpers (loaded by vikt-icons.js sprite)
   ================================================================ */
svg.icon, svg[class*="icon-"]{width:1em;height:1em;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
svg.icon-sm{width:16px;height:16px;}
svg.icon-md{width:20px;height:20px;}
svg.icon-lg{width:24px;height:24px;}
svg.icon-xl{width:32px;height:32px;}
svg.icon-gold{color:var(--gold);}
svg.icon-muted{color:var(--muted);}
svg.icon-success{color:var(--success);}
svg.icon-danger{color:var(--danger);}
svg.icon-warning{color:var(--warning);}

/* ================================================================
   Toast Notification System (vikt-toast)
   ================================================================ */
.vikt-toast-container{
  position:fixed;top:20px;right:20px;z-index:99999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  max-width:380px;width:calc(100vw - 40px);
  font-family:var(--font);
}
.vikt-toast{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  background:var(--glass-1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,74,.06);
  font-size:14px;color:var(--text,#fff);line-height:1.4;
  transform:translateX(calc(100% + 20px));opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease,box-shadow .3s ease;
  will-change:transform,opacity;
}
.vikt-toast-visible{transform:translateX(0);opacity:1;}
.vikt-toast-exit{transform:translateX(calc(100% + 20px));opacity:0;pointer-events:none;}
.vikt-toast-icon{flex-shrink:0;width:20px;height:20px;stroke-width:2;}
.vikt-toast-msg{flex:1;min-width:0;}
.vikt-toast-close{
  flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--muted,#8a8a8a);font-size:18px;cursor:pointer;
  border-radius:6px;transition:background .15s,color .15s;
}
.vikt-toast-close:hover{background:rgba(255,255,255,.08);color:var(--text,#fff);}

/* Toast type variants */
.vikt-toast-success{border-color:rgba(16,185,129,.25);border-inline-start:3px solid var(--success,#10b981);}
.vikt-toast-success .vikt-toast-icon{color:var(--success,#10b981);}
.vikt-toast-error{border-color:rgba(239,68,68,.25);border-inline-start:3px solid var(--danger,#ef4444);}
.vikt-toast-error .vikt-toast-icon{color:var(--danger,#ef4444);}
.vikt-toast-info{border-color:rgba(201,162,74,.2);border-inline-start:3px solid var(--gold,#c9a24a);}
.vikt-toast-info .vikt-toast-icon{color:var(--gold,#c9a24a);}

/* Toast hover lift */
.vikt-toast:hover{box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,74,.1);}

/* Toast dark theme tweaks */
[data-theme="dark"] .vikt-toast-container,.vikt-toast-container{
  --glass-1:rgba(14,13,12,.92);
}

/* RTL support */
[dir="rtl"] .vikt-toast-container{right:auto;left:20px;}
[dir="rtl"] .vikt-toast{transform:translateX(calc(-100% - 20px));}
[dir="rtl"] .vikt-toast-visible{transform:translateX(0);}
[dir="rtl"] .vikt-toast-exit{transform:translateX(calc(-100% - 20px));}
[dir="rtl"] .vikt-toast{border-inline-start:none;border-inline-end:3px solid var(--gold);}
[dir="rtl"] .vikt-toast-success{border-inline-end-color:var(--success);}
[dir="rtl"] .vikt-toast-error{border-inline-end-color:var(--danger);}

/* Mobile toast adjustments */
@media (max-width:480px){
  .vikt-toast-container{top:12px;right:12px;left:12px;max-width:none;width:auto;}
  .vikt-toast{padding:10px 14px;font-size:13px;border-radius:10px;}
}
@media (pointer:coarse){
  .vikt-toast-close{width:36px;height:36px;}
}