/* ============================================================
   IDOWIFOOD DESIGN SYSTEM
   Shared tokens + components used across every page.
   Sections: Tokens, Reset, Layout, Typography, Nav, Buttons,
   Badges/Chips, Cards, Forms, Alerts, Toast, Modal, Tabs,
   Pagination, Tooltip, Rating, Spinner/Skeleton, Footer, Utilities
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* brand */
  --pink:#EE1361;
  --pink-dark:#C90E52;
  --pink-light:#FFE3ED;
  --orange:#FF7A18;
  --orange-light:#FFE7D3;
  --gradient: linear-gradient(135deg,var(--pink) 0%, var(--orange) 100%);

  /* neutrals */
  --cream:#FFF7F3;
  --ink:#241A22;
  --ink-soft:#6E6470;
  --ink-faint:#A79CA9;
  --line:#F0E3DE;
  --card:#FFFFFF;

  /* semantic */
  --success:#1FA971;
  --success-bg:#E6F7EF;
  --warning:#E8A100;
  --warning-bg:#FFF6DE;
  --danger:#E23B3B;
  --danger-bg:#FDEBEB;
  --info:#2C7BE5;
  --info-bg:#E9F1FD;

  /* scale */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-full:999px;
  --shadow-sm: 0 6px 16px -8px rgba(36,26,34,0.14);
  --shadow-md: 0 20px 40px -20px rgba(238,19,97,0.25);
  --shadow-lg: 0 30px 60px -25px rgba(36,26,34,0.35);
  --maxw: 1240px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --header-bg: rgba(255,247,243,0.85);
}

:root[data-theme="dark"]{
  --cream:#15101A;
  --ink:#F5EEF3;
  --ink-soft:#B7ACC0;
  --ink-faint:#7C7086;
  --line:#2E2635;
  --card:#1F1826;
  --pink-light: rgba(238,19,97,0.18);
  --orange-light: rgba(255,122,24,0.18);
  --success-bg:rgba(31,169,113,0.18);
  --warning-bg:rgba(232,161,0,0.18);
  --danger-bg:rgba(226,59,59,0.18);
  --info-bg:rgba(44,123,229,0.18);
  --header-bg: rgba(21,16,26,0.85);
  --shadow-sm: 0 6px 16px -8px rgba(0,0,0,0.4);
  --shadow-md: 0 20px 40px -20px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 60px -25px rgba(0,0,0,0.7);
}
body{transition:background-color .2s var(--ease), color .2s var(--ease);}
.card,.input,.select,.textarea,.chip,.modal,.food-card .fav,.page-btn,.store-btn{transition-property:transform,box-shadow,border-color,background-color,color;}

/* ---------- DARK MODE ---------- */
[data-theme="dark"]{
  --cream:#161019;
  --ink:#F5EFF2;
  --ink-soft:#B7ADB9;
  --ink-faint:#7C7180;
  --line:#2E2530;
  --card:#201823;
  --pink-light:#3A1626;
  --orange-light:#3A2416;
  --success-bg:#123527;
  --warning-bg:#332708;
  --danger-bg:#3A1414;
  --info-bg:#0F2540;
}
[data-theme="dark"] body{background:var(--cream);}
[data-theme="dark"] .site-header{background:rgba(22,16,25,0.85);}
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea{background:var(--card); color:var(--ink);}
[data-theme="dark"] .store-btn{background:#000;}
[data-theme="dark"] .toast{background:#000;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg, var(--line) 25%, #2b2130 37%, var(--line) 63%); background-size:400% 100%;}

.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
[data-theme="dark"] .theme-toggle{background:var(--card);}
.theme-toggle svg{width:18px; height:18px;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display,.brand,.btn{font-family:'Baloo 2',system-ui,sans-serif;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:60px 0;}
.grad-text{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.bg-gradient{background:var(--gradient);}
@media (max-width:620px){ .wrap{padding:0 18px;} .section{padding:40px 0;} }

/* ---------- NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.theme-toggle .sun{display:block;} .theme-toggle .moon{display:none;}
:root[data-theme="dark"] .theme-toggle .sun{display:none;} :root[data-theme="dark"] .theme-toggle .moon{display:block;}
.site-nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.3rem; color:var(--ink);}
.brand .mark{
  width:42px; height:42px; border-radius:50%; background:var(--gradient);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); flex-shrink:0;
}
.brand .mark svg{width:22px; height:22px;}
.brand .idowi{color:var(--pink);}
.brand .food{color:var(--orange);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:0.95rem; font-weight:600; color:var(--ink-soft); position:relative; padding-bottom:6px;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gradient); border-radius:2px;}
.nav-links a:hover{color:var(--ink);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.lang{display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:100px; padding:8px 12px; font-size:0.85rem; font-weight:600; background:#fff;}
.burger{display:none; background:none; border:none; padding:8px;}
.burger span{display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px;}
@media (max-width:980px){
  .nav-links{display:none;}
  .burger{display:block;}
  .nav-actions .btn-ghost{display:none;}
  .nav-links.open{
    display:flex; position:absolute; top:66px; left:0; right:0; background:#fff;
    flex-direction:column; padding:20px 24px; gap:16px; border-bottom:1px solid var(--line);
  }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:0.95rem; border-radius:var(--radius-full); border:none;
  padding:12px 22px; white-space:nowrap; line-height:1;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.btn svg{width:16px; height:16px;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--gradient); color:#fff; box-shadow:var(--shadow-md);}
.btn-secondary{background:var(--pink-light); color:var(--pink-dark);}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-link{background:none; color:var(--pink); padding:4px 2px; text-decoration:underline;}
.btn-sm{padding:8px 16px; font-size:0.82rem;}
.btn-lg{padding:16px 28px; font-size:1rem;}
.btn-icon{width:42px; height:42px; padding:0; border-radius:50%;}
.btn-block{width:100%;}

/* ---------- BADGES / CHIPS ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:700;
  padding:4px 10px; border-radius:var(--radius-full); background:var(--pink-light); color:var(--pink-dark);
}
.badge-success{background:var(--success-bg); color:var(--success);}
.badge-warning{background:var(--warning-bg); color:var(--warning);}
.badge-danger{background:var(--danger-bg); color:var(--danger);}
.badge-dark{background:var(--ink); color:#fff;}

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600;
  padding:9px 16px; border-radius:var(--radius-full); border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  transition:all .15s var(--ease);
}
.chip svg{width:15px; height:15px;}
.chip:hover{border-color:var(--pink);}
.chip.active{background:var(--gradient); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm);}
.chip .count{background:rgba(0,0,0,0.08); border-radius:var(--radius-full); padding:1px 7px; font-size:0.72rem;}
.chip.active .count{background:rgba(255,255,255,0.25);}

/* ---------- CARDS ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card-hover:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}

.food-card{overflow:hidden; position:relative; display:flex; flex-direction:column;}
.food-card .thumb{
  height:150px; background:var(--gradient); position:relative; display:flex; align-items:center; justify-content:center;
}
.food-card .thumb svg{width:48px; height:48px; color:#fff; opacity:0.9;}
.food-card .thumb .fav{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center; border:none;
}
.food-card .thumb .fav svg{width:16px; height:16px; color:var(--pink); opacity:1;}
.food-card .thumb .badge{position:absolute; top:10px; left:10px;}
.food-card .body{padding:16px;}
.food-card .name{font-weight:700; font-size:1rem; margin-bottom:4px;}
.food-card .desc{font-size:0.82rem; color:var(--ink-soft); margin-bottom:10px; line-height:1.4;}
.food-card .meta-row{display:flex; align-items:center; justify-content:space-between;}
.food-card .price{font-weight:800; font-size:1.05rem; color:var(--ink);}
.food-card .price span{font-size:0.75rem; color:var(--ink-faint); font-weight:600; text-decoration:line-through; margin-left:6px;}

/* ---------- RATING ---------- */
.rating{display:flex; align-items:center; gap:4px; font-size:0.8rem; font-weight:700; color:var(--ink);}
.rating svg{width:14px; height:14px; color:#FFB020;}
.rating .count{color:var(--ink-faint); font-weight:500;}

/* ---------- FORMS ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-size:0.85rem; font-weight:700; color:var(--ink);}
.field .hint{font-size:0.75rem; color:var(--ink-faint);}
.field.error .hint{color:var(--danger);}
.input, .select, .textarea{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:#fff;
  color:var(--ink); width:100%; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus{border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-light); outline:none;}
.field.error .input, .field.error .textarea, .field.error .select{border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-bg);}
.textarea{resize:vertical; min-height:100px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
@media (max-width:620px){.form-grid{grid-template-columns:1fr;}}

.search-bar{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-full); padding:12px 18px; box-shadow:var(--shadow-sm);
}
.search-bar svg{width:18px; height:18px; color:var(--ink-faint); flex-shrink:0;}
.search-bar input{border:none; outline:none; width:100%; background:transparent; font-size:0.92rem;}

.checkbox, .radio{display:flex; align-items:center; gap:10px; font-size:0.9rem; font-weight:600; cursor:pointer; color:var(--ink);}
.checkbox input, .radio input{appearance:none; width:19px; height:19px; border:2px solid var(--line); flex-shrink:0; position:relative; background:#fff;}
.checkbox input{border-radius:6px;}
.radio input{border-radius:50%;}
.checkbox input:checked, .radio input:checked{background:var(--gradient); border-color:transparent;}
.checkbox input:checked::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.radio input:checked::after{content:''; position:absolute; inset:5px; background:#fff; border-radius:50%;}

.switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:0.9rem; font-weight:600;}
.switch input{appearance:none; width:42px; height:24px; border-radius:var(--radius-full); background:var(--line); position:relative; transition:background .15s var(--ease);}
.switch input::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease);}
.switch input:checked{background:var(--gradient);}
.switch input:checked::after{transform:translateX(18px);}

/* ---------- ALERTS ---------- */
.alert{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--radius-md);
  font-size:0.88rem; border:1px solid transparent;
}
.alert svg{width:20px; height:20px; flex-shrink:0; margin-top:1px;}
.alert .alert-title{font-weight:700; margin-bottom:2px;}
.alert .alert-close{margin-left:auto; background:none; border:none; opacity:0.6; padding:2px;}
.alert .alert-close:hover{opacity:1;}
.alert-info{background:var(--info-bg); color:#1B4E93; border-color:#CFE1FA;}
.alert-info svg{color:var(--info);}
.alert-success{background:var(--success-bg); color:#116B47; border-color:#C6EEDA;}
.alert-success svg{color:var(--success);}
.alert-warning{background:var(--warning-bg); color:#8A6200; border-color:#F5E3A8;}
.alert-warning svg{color:var(--warning);}
.alert-danger{background:var(--danger-bg); color:#9C2323; border-color:#F5C7C7;}
.alert-danger svg{color:var(--danger);}

/* ---------- TOAST ---------- */
.toast-stack{
  position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px;
  max-width:340px; width:calc(100% - 40px);
}
.toast{
  display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:14px 16px;
  border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; box-shadow:var(--shadow-lg);
  animation:toast-in .25s var(--ease);
}
.toast svg{width:18px; height:18px; flex-shrink:0;}
.toast.success svg{color:#3FE0A0;}
.toast.danger svg{color:#FF7A7A;}
@keyframes toast-in{from{transform:translateY(-12px); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(36,26,34,0.5); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-overlay.open{display:flex; animation:fade-in .18s var(--ease);}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
.modal{
  background:#fff; border-radius:var(--radius-lg); width:100%; max-width:480px; max-height:88vh;
  overflow-y:auto; box-shadow:var(--shadow-lg); animation:modal-in .22s var(--ease);
}
.modal.modal-lg{max-width:760px;}
@keyframes modal-in{from{transform:translateY(16px) scale(.98); opacity:0;} to{transform:translateY(0) scale(1); opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line);}
.modal-head h3{font-size:1.15rem; font-weight:700;}
.modal-close{background:var(--cream); border:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.modal-close svg{width:16px; height:16px;}
.modal-body{padding:24px;}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--line);}

/* ---------- TABS ---------- */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); overflow-x:auto;}
.tab{padding:12px 18px; font-weight:700; font-size:0.9rem; color:var(--ink-soft); border-bottom:3px solid transparent; white-space:nowrap;}
.tab.active{color:var(--pink);border-bottom-color:var(--pink);}

/* ---------- PAGINATION ---------- */
.pagination{display:flex; align-items:center; gap:6px; justify-content:center;}
.page-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; border:1px solid var(--line); background:#fff; color:var(--ink-soft);
}
.page-btn.active{background:var(--gradient); color:#fff; border-color:transparent;}
.page-btn svg{width:16px; height:16px;}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ink-soft); flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--pink);}
.breadcrumb .sep{color:var(--ink-faint);}
.breadcrumb .current{color:var(--ink); font-weight:700;}

/* ---------- TOOLTIP (pure CSS) ---------- */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#fff; font-size:0.72rem; font-weight:600; padding:6px 10px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s var(--ease), transform .15s var(--ease); z-index:50;
}
[data-tooltip]:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- SPINNER / SKELETON ---------- */
.spinner{width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--pink); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{background:linear-gradient(90deg, var(--line) 25%, #f7ece7 37%, var(--line) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:var(--radius-sm);}
@keyframes skeleton{0%{background-position:100% 0;} 100%{background-position:0 0;}}

/* ---------- EMPTY STATE ---------- */
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}
.empty-state .ic{width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--pink-light); display:flex; align-items:center; justify-content:center;}
.empty-state .ic svg{width:28px; height:28px; color:var(--pink);}
.empty-state h3{font-size:1.1rem; margin-bottom:6px; color:var(--ink);}

/* ---------- PROMO BANNER ---------- */
.promo-banner{
  background:var(--gradient); border-radius:var(--radius-lg);
  padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
}
.promo-banner::before{content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.08); top:-120px; right:-60px;}
.promo-banner h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 6px; font-weight:700;}
.promo-banner p{margin:0; opacity:0.9; font-size:0.9rem;}
.promo-left{position:relative; z-index:1; max-width:340px;}
.store-row{display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1;}
.store-btn{display:flex; align-items:center; gap:10px; background:#111; color:#fff; border-radius:14px; padding:10px 18px;}
.store-btn svg{width:22px; height:22px;}
.store-btn .lines{line-height:1.1;}
.store-btn .lines small{display:block; font-size:0.62rem; opacity:0.8;}
.store-btn .lines b{font-size:0.95rem;}
@media (max-width:620px){
  .promo-banner{padding:30px 22px; flex-direction:column; align-items:flex-start;}
  .store-row{width:100%;}
}

/* ---------- FOOTER ---------- */
.site-footer{background:#1B1420; color:#EAE3E7; padding:48px 0 24px; margin-top:40px;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem;}
.foot-brand .food{color:var(--orange);}
.foot-brand .idowi{color:var(--pink);}
.socials{display:flex; gap:10px;}
.socials a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center;}
.socials a svg{width:16px; height:16px;}
.socials a:hover{background:var(--gradient);}
.foot-links{display:flex; gap:24px; flex-wrap:wrap; font-size:0.88rem; color:#C9BFC8;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:20px; font-size:0.82rem; color:#9C8FA0; flex-wrap:wrap; gap:10px;}

/* ---------- DARK MODE ---------- */
html[data-theme="dark"]{
  --cream:#181016;
  --ink:#F4EDF1;
  --ink-soft:#B9AEB6;
  --ink-faint:#7A6E76;
  --line:#332830;
  --card:#231A21;
  --pink-light:#3A1A29;
  --orange-light:#3A2413;
  --success-bg:#123A2A;
  --warning-bg:#3A2E0C;
  --danger-bg:#3A1414;
  --info-bg:#0F2A44;
}
html[data-theme="dark"] .site-header{background:rgba(24,16,22,0.85);}
html[data-theme="dark"] .btn-ghost{background:var(--card); color:var(--ink);}
html[data-theme="dark"] .lang{background:var(--card);}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .search-bar{background:var(--card); color:var(--ink);}
html[data-theme="dark"] .toast{background:#0D0810;}
html[data-theme="dark"] .modal, html[data-theme="dark"] .card, html[data-theme="dark"] .food-card{background:var(--card);}
html[data-theme="dark"] .store-btn{background:#000;}
html[data-theme="dark"] .skeleton{background:linear-gradient(90deg, var(--line) 25%, #2c2028 37%, var(--line) 63%); background-size:400% 100%;}

.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.theme-toggle svg{width:18px; height:18px;}
.theme-toggle .icon-moon{display:none;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
html[data-theme="dark"] .theme-toggle{background:var(--card);}

/* ---------- AUTH SHELL ---------- */
.auth-shell{
  min-height:calc(100vh - 76px); display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.auth-visual{
  background:var(--gradient); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:48px;
}
.auth-visual::before{content:''; position:absolute; width:380px; height:380px; border-radius:50%; background:rgba(255,255,255,0.08); top:-140px; left:-100px;}
.auth-visual::after{content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.08); bottom:-100px; right:-60px;}
.auth-visual .content{position:relative; z-index:1; color:#fff; max-width:380px;}
.auth-visual h2{font-size:1.8rem; margin-bottom:12px;}
.auth-visual p{opacity:0.9; font-size:0.95rem; line-height:1.6;}
.auth-form-col{display:flex; align-items:center; justify-content:center; padding:48px 24px;}
.auth-card{width:100%; max-width:400px;}
.auth-card .brand{margin-bottom:28px;}
.auth-card h1{font-size:1.6rem; margin-bottom:8px;}
.auth-card .sub{color:var(--ink-soft); font-size:0.9rem; margin-bottom:28px;}
.auth-foot{text-align:center; margin-top:20px; font-size:0.88rem; color:var(--ink-soft);}
.auth-foot a{color:var(--pink); font-weight:700;}
.divider{display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:0.78rem; margin:20px 0;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}
.social-row{display:flex; gap:10px;}
.social-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; font-weight:700; font-size:0.85rem;}
.password-toggle{background:none; border:none; color:var(--ink-faint); display:flex; align-items:center;}
.input-icon-wrap{position:relative;}
.input-icon-wrap .input{padding-right:44px;}
.input-icon-wrap .password-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.strength-meter{display:flex; gap:5px; margin-top:8px;}
.strength-meter .bar{height:5px; flex:1; border-radius:3px; background:var(--line);}
.strength-meter .bar.on.weak{background:var(--danger);}
.strength-meter .bar.on.fair{background:var(--warning);}
.strength-meter .bar.on.strong{background:var(--success);}
@media (max-width:900px){ .auth-shell{grid-template-columns:1fr;} .auth-visual{display:none;} }

/* ---------- OTP ---------- */
.otp-row{display:flex; gap:10px; justify-content:center; margin:8px 0 4px;}
.otp-box{
  width:50px; height:58px; text-align:center; font-size:1.4rem; font-weight:700;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
.otp-box:focus{border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-light); outline:none;}

/* ---------- STEPPER (checkout) ---------- */
.stepper{display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:36px; flex-wrap:wrap;}
.step{display:flex; align-items:center; gap:10px;}
.step .num{
  width:34px; height:34px; border-radius:50%; background:var(--line); color:var(--ink-soft); font-weight:700; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s var(--ease);
}
.step.done .num{background:var(--success); color:#fff;}
.step.active .num{background:var(--gradient); color:#fff;}
.step .label{font-size:0.85rem; font-weight:700; color:var(--ink-soft); white-space:nowrap;}
.step.active .label, .step.done .label{color:var(--ink);}
.step-line{width:50px; height:2px; background:var(--line); margin:0 10px;}
.step-line.done{background:var(--success);}
@media (max-width:620px){ .step .label{display:none;} .step-line{width:24px;} }

/* ---------- ORDER TRACKING TIMELINE ---------- */
.timeline{display:flex; flex-direction:column;}
.tl-item{display:flex; gap:16px;}
.tl-marker{display:flex; flex-direction:column; align-items:center;}
.tl-dot{width:16px; height:16px; border-radius:50%; background:var(--line); border:3px solid var(--card); flex-shrink:0;}
.tl-item.done .tl-dot{background:var(--success);}
.tl-item.active .tl-dot{background:var(--pink); box-shadow:0 0 0 4px var(--pink-light);}
.tl-bar{width:2px; flex:1; background:var(--line); margin:2px 0;}
.tl-item.done .tl-bar{background:var(--success);}
.tl-content{padding-bottom:28px;}
.tl-content h4{font-size:0.92rem; margin-bottom:3px;}
.tl-content .time{font-size:0.78rem; color:var(--ink-faint);}

.track-map{
  background:var(--pink-light); border-radius:var(--radius-lg); height:260px; position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.track-map svg{position:absolute; inset:0; width:100%; height:100%;}
.rider-dot{
  position:absolute; width:38px; height:38px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(238,19,97,0.5); transition:left 1s linear, top 1s linear; z-index:2;
}
.rider-dot svg{width:18px; height:18px; color:#fff;}

/* ---------- TABLE / LIST ROW (orders) ---------- */
.data-table{width:100%; border-collapse:collapse;}
.data-table th{text-align:left; font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:0 14px 10px;}
.data-table td{padding:14px; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:0.88rem;}
.data-table tr td:first-child{border-left:1px solid var(--line); border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.data-table tr td:last-child{border-right:1px solid var(--line); border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.data-table tr{transition:transform .15s var(--ease);}
.order-row-card{
  display:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; margin-bottom:12px;
}
@media (max-width:760px){
  .data-table{display:none;}
  .order-row-card{display:block;}
}

/* ---------- AVATAR / ACCOUNT MENU ---------- */
.avatar-btn{
  width:42px; height:42px; border-radius:50%; background:var(--gradient); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:none; font-size:0.9rem; position:relative;
}
.cart-btn{position:relative;}
.cart-badge{
  position:absolute; top:-6px; right:-6px; background:var(--pink); color:#fff; font-size:0.65rem; font-weight:800;
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--cream);
}
.account-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); width:210px; padding:8px; display:none; z-index:200;
}
.account-menu.open{display:block;}
.account-menu a, .account-menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:8px; font-size:0.88rem; font-weight:600;
  color:var(--ink); background:none; border:none; text-align:left;
}
.account-menu a:hover, .account-menu button:hover{background:var(--cream);}
.account-menu svg{width:16px; height:16px; color:var(--ink-soft);}
.account-menu hr{border:none; border-top:1px solid var(--line); margin:6px 0;}
.nav-account-wrap{position:relative;}

/* ---------- SUPPORT CHAT ---------- */
.chat-shell{display:grid; grid-template-columns:280px 1fr; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; height:600px;}
.chat-list{border-right:1px solid var(--line); overflow-y:auto;}
.chat-list-item{display:flex; gap:10px; padding:14px; border-bottom:1px solid var(--line); align-items:center;}
.chat-list-item.active{background:var(--pink-light);}
.chat-avatar{width:38px; height:38px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; flex-shrink:0;}
.chat-main{display:flex; flex-direction:column;}
.chat-head{padding:16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;}
.chat-messages{flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px;}
.msg{max-width:70%; padding:10px 14px; border-radius:16px; font-size:0.88rem; line-height:1.5;}
.msg.them{background:var(--cream); align-self:flex-start; border-bottom-left-radius:4px;}
.msg.me{background:var(--gradient); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.chat-input-row{display:flex; gap:10px; padding:14px; border-top:1px solid var(--line);}
@media (max-width:760px){ .chat-shell{grid-template-columns:1fr; height:auto;} .chat-list{display:none;} }

/* ---------- FAQ ACCORDION ---------- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:12px; background:#fff; overflow:hidden;}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:none; border:none; font-weight:700; font-size:0.95rem; text-align:left; color:var(--ink);}
.faq-q svg{width:18px; height:18px; color:var(--ink-faint); transition:transform .18s var(--ease); flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .22s var(--ease);}
.faq-a-inner{padding:0 20px 20px; color:var(--ink-soft); font-size:0.9rem; line-height:1.6;}
.faq-item.open .faq-a{max-height:300px;}

/* ---------- AUTH SHELL ---------- */
.auth-shell{min-height:calc(100vh - 76px); display:grid; grid-template-columns:1fr 1fr;}
.auth-side{
  background:var(--gradient); display:flex; flex-direction:column; justify-content:center; padding:60px;
  color:#fff; position:relative; overflow:hidden;
}
.auth-side::before{content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,0.08); top:-140px; right:-100px;}
.auth-side::after{content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.06); bottom:-90px; left:-60px;}
.auth-side h2{font-size:2rem; margin-bottom:14px; position:relative; z-index:1;}
.auth-side p{opacity:0.9; max-width:360px; line-height:1.6; position:relative; z-index:1;}
.auth-form-wrap{display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.auth-card{width:100%; max-width:400px;}
.auth-card .brand{margin-bottom:28px;}
.auth-card h1{font-size:1.6rem; margin-bottom:6px;}
.auth-card .sub{color:var(--ink-soft); font-size:0.9rem; margin-bottom:26px;}
.auth-divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--ink-faint); font-size:0.8rem;}
.auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.social-row{display:flex; gap:10px;}
.social-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px; font-weight:700; font-size:0.85rem; background:#fff;}
[data-theme="dark"] .social-btn{background:var(--card);}
@media (max-width:900px){ .auth-shell{grid-template-columns:1fr;} .auth-side{display:none;} }

/* ---------- OTP ---------- */
.otp-inputs{display:flex; gap:10px; justify-content:center; margin:10px 0 6px;}
.otp-box{
  width:52px; height:60px; text-align:center; font-size:1.4rem; font-weight:700;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
[data-theme="dark"] .otp-box{background:var(--card);}
.otp-box:focus{border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-light); outline:none;}

/* ---------- STEPPER ---------- */
.stepper{display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:10px;}
.step{display:flex; align-items:center; gap:10px;}
.step .dot{width:34px; height:34px; border-radius:50%; background:var(--line); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0;}
.step.done .dot{background:var(--gradient); color:#fff;}
.step.active .dot{background:#fff; border:2px solid var(--pink); color:var(--pink);}
.step .label{font-size:0.82rem; font-weight:700; color:var(--ink-faint); white-space:nowrap;}
.step.done .label, .step.active .label{color:var(--ink);}
.step-line{width:50px; height:2px; background:var(--line); margin:0 6px;}
.step-line.done{background:var(--gradient);}
@media (max-width:560px){ .step .label{display:none;} .step-line{width:24px;} }

/* ---------- TIMELINE (order tracking / status) ---------- */
.timeline{display:flex; flex-direction:column;}
.tl-item{display:flex; gap:16px; position:relative; padding-bottom:28px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:''; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line);
}
.tl-item:last-child::before{display:none;}
.tl-item.done::before{background:var(--gradient);}
.tl-dot{width:32px; height:32px; border-radius:50%; background:var(--line); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;}
.tl-item.done .tl-dot{background:var(--gradient); color:#fff;}
.tl-item.active .tl-dot{background:#fff; border:2px solid var(--pink); color:var(--pink); box-shadow:0 0 0 5px var(--pink-light);}
.tl-dot svg{width:15px; height:15px;}
.tl-content .title{font-weight:700; font-size:0.92rem;}
.tl-content .time{font-size:0.78rem; color:var(--ink-faint); margin-top:2px;}

/* ---------- TABLE ---------- */
.o-table{width:100%; border-collapse:collapse;}
.o-table th{text-align:left; font-size:0.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); padding:0 14px 10px; font-weight:700;}
.o-table td{padding:14px; background:#fff; border-top:1px solid var(--line);}
.o-table tr td:first-child{border-radius:14px 0 0 14px;}
.o-table tr td:last-child{border-radius:0 14px 14px 0;}
[data-theme="dark"] .o-table td{background:var(--card);}
@media (max-width:800px){
  .o-table thead{display:none;}
  .o-table, .o-table tbody, .o-table tr, .o-table td{display:block; width:100%;}
  .o-table tr{margin-bottom:14px; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .o-table td{border-top:none; border-bottom:1px solid var(--line); border-radius:0 !important;}
  .o-table td:last-child{border-bottom:none;}
  .o-table td::before{content:attr(data-label); display:block; font-size:0.68rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; margin-bottom:4px;}
}

/* ---------- ORDER / CART ROW ---------- */
.cart-row{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-row .thumb-sm{width:64px; height:64px; border-radius:var(--radius-sm); background:var(--gradient); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.cart-row .thumb-sm svg{width:26px; height:26px; color:#fff;}
.cart-row .info{flex:1; min-width:0;}
.cart-row .info .name{font-weight:700; font-size:0.95rem;}
.cart-row .info .meta{font-size:0.8rem; color:var(--ink-soft);}
.qty-control{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-full); padding:4px 8px;}
.qty-control button{width:26px; height:26px; border-radius:50%; border:none; background:var(--cream); font-weight:700; display:flex; align-items:center; justify-content:center;}
.qty-control span{font-weight:700; font-size:0.9rem; min-width:16px; text-align:center;}

/* ---------- CHAT ---------- */
.chat-window{display:flex; flex-direction:column; height:480px; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:#fff;}
[data-theme="dark"] .chat-window{background:var(--card);}
.chat-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--cream);}
.chat-head .avatar{width:38px; height:38px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.chat-head .status{font-size:0.75rem; color:var(--success); display:flex; align-items:center; gap:5px;}
.chat-head .status .d{width:7px; height:7px; border-radius:50%; background:var(--success);}
.chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;}
.bubble{max-width:75%; padding:10px 14px; border-radius:16px; font-size:0.87rem; line-height:1.45;}
.bubble.them{background:var(--cream); align-self:flex-start; border-bottom-left-radius:4px;}
.bubble.me{background:var(--gradient); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.chat-foot{display:flex; gap:10px; padding:14px; border-top:1px solid var(--line);}
.chat-foot input{flex:1; border:1px solid var(--line); border-radius:var(--radius-full); padding:10px 16px; background:transparent; color:var(--ink);}

/* ---------- ACCORDION (FAQ) ---------- */
.accordion-item{border-bottom:1px solid var(--line);}
.accordion-head{display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding:18px 4px; font-weight:700; font-size:0.98rem; text-align:left; color:var(--ink);}
.accordion-head svg{width:18px; height:18px; color:var(--ink-faint); transition:transform .18s var(--ease); flex-shrink:0;}
.accordion-item.open .accordion-head svg{transform:rotate(180deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .22s var(--ease);}
.accordion-item.open .accordion-panel{max-height:300px;}
.accordion-panel p{padding:0 4px 18px; color:var(--ink-soft); font-size:0.9rem; line-height:1.6;}

/* ---------- AUTH SHELL ---------- */
.auth-shell{min-height:calc(100vh - 76px); display:grid; grid-template-columns:1fr 1fr;}
.auth-form-side{display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.auth-card{width:100%; max-width:400px;}
.auth-card .brand{margin-bottom:28px;}
.auth-card h1{font-size:1.7rem; margin-bottom:8px;}
.auth-card .sub{color:var(--ink-soft); font-size:0.9rem; margin-bottom:28px;}
.auth-promo{
  background:var(--gradient); display:flex; align-items:center; justify-content:center; padding:60px;
  position:relative; overflow:hidden; color:#fff;
}
.auth-promo::before{content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,0.1); top:-100px; right:-80px;}
.auth-promo::after{content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.08); bottom:-60px; left:-60px;}
.auth-promo-inner{position:relative; z-index:1; max-width:340px;}
.auth-promo-inner h2{font-size:1.8rem; margin-bottom:12px;}
.auth-promo-inner p{opacity:0.9; font-size:0.95rem; line-height:1.6;}
.auth-divider{display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--ink-faint); font-size:0.8rem; font-weight:600;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-foot{text-align:center; font-size:0.88rem; color:var(--ink-soft); margin-top:20px;}
@media (max-width:900px){ .auth-shell{grid-template-columns:1fr;} .auth-promo{display:none;} }

/* OTP input row */
.otp-row{display:flex; gap:10px; justify-content:center; margin:8px 0 24px;}
.otp-box{width:48px; height:56px; text-align:center; font-size:1.3rem; font-weight:700; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff;}
.otp-box:focus{border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-light); outline:none;}

/* Password strength */
.pw-meter{display:flex; gap:5px; margin-top:8px;}
.pw-meter span{flex:1; height:4px; border-radius:3px; background:var(--line);}
.pw-meter.weak span:nth-child(1){background:var(--danger);}
.pw-meter.medium span:nth-child(1),.pw-meter.medium span:nth-child(2){background:var(--warning);}
.pw-meter.strong span{background:var(--success);}

/* ---------- DASHBOARD SHELL ---------- */
.dash-shell{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; padding:32px 0 80px;}
.dash-sidebar{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; position:sticky; top:96px;}
.dash-user{display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:12px; border-bottom:1px solid var(--line);}
.dash-user .avatar{width:46px; height:46px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.dash-user .name{font-weight:700; font-size:0.92rem;}
.dash-user .email{font-size:0.76rem; color:var(--ink-faint);}
.dash-nav{display:flex; flex-direction:column; gap:2px;}
.dash-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:0.88rem; font-weight:600; color:var(--ink-soft);}
.dash-link svg{width:17px; height:17px; flex-shrink:0;}
.dash-link:hover{background:var(--cream); color:var(--ink);}
.dash-link.active{background:var(--pink-light); color:var(--pink-dark);}
.dash-link.danger{color:var(--danger);}
@media (max-width:900px){ .dash-shell{grid-template-columns:1fr;} .dash-sidebar{position:static;} }

/* ---------- STEPPER / TRACKING ---------- */
.stepper{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;}
.step{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.step::before{content:''; position:absolute; top:17px; left:-50%; width:100%; height:3px; background:var(--line); z-index:0;}
.step:first-child::before{display:none;}
.step.done::before{background:var(--gradient);}
.step .dot{width:36px; height:36px; border-radius:50%; background:var(--line); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-weight:700; position:relative; z-index:1; border:4px solid var(--cream);}
.step.done .dot{background:var(--gradient); color:#fff;}
.step.current .dot{background:#fff; color:var(--pink); border:2px solid var(--pink); box-shadow:0 0 0 5px var(--pink-light);}
.step .label{font-size:0.76rem; font-weight:700; margin-top:8px; color:var(--ink-soft);}
.step.done .label,.step.current .label{color:var(--ink);}
@media (max-width:620px){ .step .label{font-size:0.65rem;} }

.map-placeholder{
  height:220px; border-radius:var(--radius-md); overflow:hidden; position:relative;
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px),
    var(--cream);
}
.map-placeholder .rider-pin{
  position:absolute; width:40px; height:40px; border-radius:50%; background:var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  top:45%; left:38%;
}
.map-placeholder .pin-dest{position:absolute; width:14px; height:14px; border-radius:50%; background:var(--ink); top:30%; left:72%; box-shadow:0 0 0 5px rgba(0,0,0,0.08);}

/* ---------- ORDER ROWS ---------- */
.order-row{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; flex-wrap:wrap;
}
.order-row .thumb{width:52px; height:52px; border-radius:12px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.order-row .info{flex:1; min-width:180px;}
.order-row .info .id{font-weight:700; font-size:0.92rem;}
.order-row .info .meta{font-size:0.78rem; color:var(--ink-soft); margin-top:2px;}
.order-row .actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- CART ---------- */
.cart-line{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-line .thumb{width:60px; height:60px; border-radius:12px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.cart-line .info{flex:1;}
.cart-line .name{font-weight:700; font-size:0.92rem;}
.cart-line .price{font-size:0.82rem; color:var(--ink-soft);}
.qty-stepper{display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--radius-full); overflow:hidden;}
.qty-stepper button{width:30px; height:30px; background:#fff; border:none; font-weight:700; color:var(--ink); font-size:1rem;}
.qty-stepper button:hover{background:var(--cream);}
.qty-stepper span{width:28px; text-align:center; font-weight:700; font-size:0.85rem;}
.summary-row{display:flex; justify-content:space-between; font-size:0.9rem; padding:6px 0; color:var(--ink-soft);}
.summary-row.total{font-size:1.1rem; font-weight:800; color:var(--ink); border-top:1px solid var(--line); margin-top:8px; padding-top:14px;}

/* ---------- PAYMENT METHOD SELECT ---------- */
.pay-option{
  display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:12px; cursor:pointer; background:#fff;
}
.pay-option:hover{border-color:var(--pink);}
.pay-option.selected{border-color:var(--pink); background:var(--pink-light);}
.pay-option .ic{width:38px; height:38px; border-radius:10px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pay-option .radio-dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); margin-left:auto; position:relative; flex-shrink:0;}
.pay-option.selected .radio-dot{border-color:var(--pink);}
.pay-option.selected .radio-dot::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--gradient);}

/* ---------- RESULT SCREENS ---------- */
.result-shell{min-height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding:40px 20px; text-align:center;}
.result-card{max-width:440px;}
.result-icon{width:90px; height:90px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.result-icon.success{background:var(--success-bg); color:var(--success);}
.result-icon.danger{background:var(--danger-bg); color:var(--danger);}
.result-icon svg{width:44px; height:44px;}
.result-card h1{font-size:1.6rem; margin-bottom:10px;}
.result-card p{color:var(--ink-soft); margin-bottom:28px;}

/* ---------- CHAT / SUPPORT ---------- */
.chat-shell{display:grid; grid-template-columns:280px 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; height:600px;}
.chat-list{border-right:1px solid var(--line); overflow-y:auto;}
.chat-item{display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);}
.chat-item.active{background:var(--pink-light);}
.chat-item .avatar{width:38px; height:38px; border-radius:50%; background:var(--gradient); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.8rem;}
.chat-item .name{font-weight:700; font-size:0.86rem;}
.chat-item .last{font-size:0.76rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;}
.chat-main{display:flex; flex-direction:column;}
.chat-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);}
.chat-body{flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;}
.bubble{max-width:70%; padding:10px 14px; border-radius:16px; font-size:0.88rem; line-height:1.5;}
.bubble.in{background:var(--cream); align-self:flex-start; border-bottom-left-radius:4px;}
.bubble.out{background:var(--gradient); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.bubble .time{display:block; font-size:0.65rem; opacity:0.6; margin-top:4px;}
.chat-input-row{display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line);}
.chat-input-row input{flex:1; border:1px solid var(--line); border-radius:var(--radius-full); padding:11px 16px; background:var(--cream);}
@media (max-width:800px){ .chat-shell{grid-template-columns:1fr; height:auto;} .chat-list{display:none;} }

/* ---------- FAQ / LEGAL ---------- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; background:#fff;}
.faq-item summary{list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; font-size:0.92rem; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--pink); font-weight:400;}
.faq-item[open] summary::after{content:'–';}
.faq-item .faq-a{padding:0 18px 16px; color:var(--ink-soft); font-size:0.88rem; line-height:1.6;}
.legal-content{max-width:760px;}
.legal-content h2{font-size:1.2rem; margin:32px 0 10px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--ink-soft); font-size:0.92rem; line-height:1.7;}
.legal-content ul{padding-left:20px; margin:10px 0;}
.legal-content .updated{color:var(--ink-faint); font-size:0.82rem; margin-bottom:30px;}

/* ---------- ADMIN PANEL LAYOUT ---------- */
.admin-layout{display:flex; min-height:100vh; align-items:stretch;}
.admin-sidebar{
  width:250px; flex-shrink:0; background:#1B1420; color:#EAE3E7; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar .brand{padding:22px 20px; font-size:1.1rem;}
.admin-sidebar .brand .idowi,.admin-sidebar .brand .food{color:#fff;}
.admin-sidebar .brand .idowi{opacity:0.9;} .admin-sidebar .brand .food{color:var(--orange);}
.admin-sidebar .badge-role{margin:0 20px 16px; display:inline-flex;}
.admin-nav{display:flex; flex-direction:column; gap:2px; padding:0 12px;}
.admin-nav .group-label{font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; color:#8A7E90; padding:16px 12px 6px;}
.admin-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:0.86rem; font-weight:600; color:#C9BFC8;}
.admin-link svg{width:16px; height:16px; flex-shrink:0;}
.admin-link:hover{background:rgba(255,255,255,0.06); color:#fff;}
.admin-link.active{background:var(--gradient); color:#fff;}
.admin-link .count-pill{margin-left:auto; background:rgba(255,255,255,0.12); font-size:0.68rem; padding:1px 7px; border-radius:var(--radius-full);}
.admin-link.active .count-pill{background:rgba(255,255,255,0.25);}

.admin-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.admin-topbar{
  position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:14px 24px;
}
.admin-topbar .search-bar{max-width:340px;}
.admin-topbar .spacer{flex:1;}
.admin-content{padding:24px; flex:1;}
.admin-page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.admin-page-head h1{font-size:1.4rem;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{padding:20px; display:flex; flex-direction:column; gap:6px;}
.stat-card .label{font-size:0.8rem; color:var(--ink-soft); font-weight:600;}
.stat-card .value{font-size:1.6rem; font-weight:800;}
.stat-card .delta{font-size:0.76rem; font-weight:700;}
.stat-card .delta.up{color:var(--success);} .stat-card .delta.down{color:var(--danger);}
@media (max-width:1100px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){ .admin-sidebar{position:fixed; left:-260px; z-index:200; transition:left .2s var(--ease);} .admin-sidebar.open{left:0;} .kpi-grid{grid-template-columns:1fr;} }

/* Data table */
.table-card{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; min-width:640px;}
.data-table th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;}
.data-table td{padding:14px 16px; border-bottom:1px solid var(--line); font-size:0.86rem; vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--cream);}
.cell-entity{display:flex; align-items:center; gap:10px;}
.cell-entity .avatar{width:36px; height:36px; border-radius:10px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; flex-shrink:0;}
.cell-entity.round .avatar{border-radius:50%;}
.table-toolbar{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.table-toolbar .spacer{flex:1;}

/* Admin login */
.admin-login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#1B1420,#2A1E32); padding:20px;}

/* ---------- RESTAURANT PARTNER PANEL ---------- */
.queue-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.order-queue-card{padding:18px; border-left:4px solid var(--line);}
.order-queue-card.urgent{border-left-color:var(--danger);}
.order-queue-card.accepted{border-left-color:var(--warning);}
.order-queue-card.ready{border-left-color:var(--success);}
.oq-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.oq-timer{font-weight:800; font-size:0.85rem; padding:3px 10px; border-radius:var(--radius-full); background:var(--cream);}
.oq-timer.urgent{background:var(--danger-bg); color:var(--danger);}
.oq-items{font-size:0.84rem; color:var(--ink-soft); margin-bottom:12px; line-height:1.6;}
.oq-actions{display:flex; gap:8px;}

.menu-item-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.menu-item-row .thumb{width:48px; height:48px; border-radius:12px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.menu-item-row .info{flex:1; min-width:0;}
.menu-item-row .info .name{font-weight:700; font-size:0.9rem;}
.menu-item-row .info .meta{font-size:0.78rem; color:var(--ink-soft);}
.menu-item-row.sold-out{opacity:0.55;}

.bar-list{display:flex; flex-direction:column; gap:12px;}
.bar-row{display:grid; grid-template-columns:120px 1fr 50px; align-items:center; gap:10px; font-size:0.82rem;}
.bar-row .track{height:10px; border-radius:6px; background:var(--cream); overflow:hidden;}
.bar-row .fill{height:100%; background:var(--gradient); border-radius:6px;}
.bar-row .val{text-align:right; font-weight:700; color:var(--ink-soft);}

.review-card{padding:18px; display:flex; gap:14px;}
.review-card .avatar{width:40px; height:40px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.review-reply{background:var(--cream); border-radius:var(--radius-sm); padding:10px 12px; margin-top:10px; font-size:0.84rem;}

/* ---------- RESTAURANT DISCOVERY ---------- */
.restaurant-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px;}
.restaurant-card{overflow:hidden; position:relative;}
.restaurant-card.closed{filter:grayscale(0.6); opacity:0.72;}
.restaurant-card .cover{height:120px; position:relative; display:flex; align-items:flex-end; padding:10px;}
.restaurant-card .cover .badges{display:flex; gap:6px;}
.restaurant-card .logo{
  width:52px; height:52px; border-radius:14px; background:#fff; border:3px solid #fff; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; position:absolute; left:14px; bottom:-22px; z-index:2;
}
.restaurant-card .logo .ic{width:100%; height:100%; border-radius:11px; background:var(--gradient); display:flex; align-items:center; justify-content:center;}
.restaurant-card .logo .ic svg{width:24px; height:24px; color:#fff;}
.restaurant-card .r-body{padding:30px 16px 16px;}
.restaurant-card .r-name{font-weight:700; font-size:1rem; margin-bottom:2px;}
.restaurant-card .r-meta{font-size:0.8rem; color:var(--ink-soft); margin-bottom:10px;}
.restaurant-card .r-stats{display:flex; align-items:center; gap:12px; font-size:0.8rem; color:var(--ink-soft); flex-wrap:wrap;}
.restaurant-card .r-stats .stat{display:flex; align-items:center; gap:4px;}
.restaurant-card .r-stats svg{width:14px; height:14px;}
.restaurant-card .closed-flag{
  position:absolute; top:10px; right:10px; background:rgba(27,20,32,0.85); color:#fff; font-size:0.7rem; font-weight:700;
  padding:4px 10px; border-radius:var(--radius-full); z-index:2;
}
.cover-burgers{background:linear-gradient(135deg,#EE1361,#FF7A18);}
.cover-pizza{background:linear-gradient(135deg,#FF7A18,#FFB020);}
.cover-sushi{background:linear-gradient(135deg,#2C7BE5,#5FD0C6);}
.cover-drinks{background:linear-gradient(135deg,#8A4FE0,#EE1361);}
.cover-desserts{background:linear-gradient(135deg,#EE1361,#FFB020);}
.cover-healthy{background:linear-gradient(135deg,#1FA971,#8FD16A);}
.cover-local{background:linear-gradient(135deg,#E8A100,#E23B3B);}

.filter-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.filter-bar .spacer{flex:1;}
.toggle-chip{display:inline-flex; align-items:center; gap:8px; font-size:0.84rem; font-weight:600; border:1px solid var(--line); background:#fff; border-radius:var(--radius-full); padding:8px 14px;}
.toggle-chip input{appearance:none; width:15px; height:15px; border-radius:4px; border:2px solid var(--line); position:relative;}
.toggle-chip input:checked{background:var(--gradient); border-color:transparent;}
.toggle-chip input:checked::after{content:'✓'; position:absolute; inset:0; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center;}

/* Restaurant detail page */
.r-hero{height:220px; position:relative; display:flex; align-items:flex-end;}
.r-hero-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.55), transparent 60%);}
.r-hero-content{position:relative; z-index:1; padding:24px; color:#fff; width:100%;}
.r-info-bar{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px 20px; margin:-30px 24px 24px; position:relative; z-index:2; box-shadow:var(--shadow-sm);
}
.r-info-bar .stat{display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600;}
.r-info-bar svg{width:16px; height:16px; color:var(--pink);}
.menu-cat-nav{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:20px;}
.menu-cat-nav a{white-space:nowrap; padding:8px 16px; border-radius:var(--radius-full); border:1px solid var(--line); font-size:0.84rem; font-weight:600; color:var(--ink-soft);}
.menu-cat-nav a.active{background:var(--gradient); color:#fff; border-color:transparent;}
.menu-section-title{font-size:1.1rem; font-weight:700; margin:28px 0 14px;}
.restaurant-from{font-size:0.74rem; color:var(--pink); font-weight:700; margin-bottom:2px; display:block;}
.restaurant-from:hover{text-decoration:underline;}

/* ---------- DRIVER PANEL ---------- */
.online-card{
  padding:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:2px solid var(--line);
}
.online-card.is-online{border-color:var(--success); background:var(--success-bg);}
.online-card .status-text{font-weight:800; font-size:1.1rem;}
.online-card .sub-text{font-size:0.84rem; color:var(--ink-soft);}
.big-switch{position:relative; display:inline-flex; cursor:pointer;}
.big-switch input{appearance:none; width:64px; height:36px; border-radius:var(--radius-full); background:var(--line); position:relative; transition:background .2s var(--ease);}
.big-switch input::after{content:''; position:absolute; top:3px; left:3px; width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease);}
.big-switch input:checked{background:var(--success);}
.big-switch input:checked::after{transform:translateX(28px);}

.delivery-stage-card{padding:22px;}
.stage-route{display:flex; flex-direction:column; gap:0; margin-bottom:18px;}
.stage-point{display:flex; gap:14px; align-items:flex-start; position:relative; padding-bottom:24px;}
.stage-point:last-child{padding-bottom:0;}
.stage-point::before{content:''; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--line);}
.stage-point:last-child::before{display:none;}
.stage-point.done::before{background:var(--success);}
.stage-dot{width:24px; height:24px; border-radius:50%; background:var(--line); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.7rem; font-weight:700; z-index:1;}
.stage-point.done .stage-dot{background:var(--success);}
.stage-point.current .stage-dot{background:var(--gradient);}
.stage-label{font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--ink-faint); letter-spacing:.03em;}
.stage-name{font-weight:700; font-size:0.92rem;}
.stage-addr{font-size:0.82rem; color:var(--ink-soft);}

.rating-bar-row{display:grid; grid-template-columns:50px 1fr 40px; align-items:center; gap:10px; font-size:0.82rem; margin-bottom:8px;}
.rating-bar-row .track{height:8px; border-radius:5px; background:var(--cream); overflow:hidden;}
.rating-bar-row .fill{height:100%; background:#FFB020; border-radius:5px;}

.sos-btn{
  background:var(--danger); color:#fff; border:none; border-radius:var(--radius-md); padding:18px 24px;
  display:flex; align-items:center; gap:14px; width:100%; font-weight:700; font-size:1rem;
}
.sos-btn svg{width:26px; height:26px; flex-shrink:0;}
.sos-btn .sub{font-weight:500; font-size:0.8rem; opacity:0.9; display:block; margin-top:2px;}

/* ---------- UTILITIES ---------- */

.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.text-soft{color:var(--ink-soft);} .text-faint{color:var(--ink-faint);}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.hidden{display:none !important;}