/* ==========================================================================
   Taj Al Khair — storefront + admin design system
   ========================================================================== */
:root{
  --brand:#e8552b; --brand-600:#d1461f; --brand-soft:#fff1ec;
  --gold:#f4b740; --accent:#16a34a;
  --bg:#f7f7f9; --card:#ffffff; --ink:#1a2130; --muted:#6b7688;
  --line:#eaecf0; --shadow:0 12px 32px rgba(20,30,50,.09); --shadow-sm:0 3px 14px rgba(20,30,50,.06);
  --radius:20px; --radius-sm:12px; --maxw:1220px;
  --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444; --info:#3b82f6;
  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
p{margin:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.row{display:flex;gap:12px}.wrap{flex-wrap:wrap}.center{align-items:center}.between{justify-content:space-between}.col{flex-direction:column}
.grow{flex:1}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11.5px}
.mono{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* ---- Buttons & form basics ---- */
.btn{cursor:pointer;border:none;border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;
  background:var(--brand);color:#fff;transition:.15s;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-family:inherit}
.btn:hover{background:var(--brand-600);box-shadow:0 8px 20px rgba(232,85,43,.28)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);box-shadow:none}
.btn.dark{background:var(--ink);color:#fff}
.btn.danger{background:var(--danger)}
.btn.sm{padding:9px 16px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn.lg{padding:16px 26px;font-size:16px;border-radius:14px}
.iconbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;font-size:18px;position:relative;transition:.15s}
.iconbtn:hover{border-color:var(--brand)}
.badge-count{position:absolute;top:-6px;right:-6px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;
  min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.field{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;
  background:var(--card);color:var(--ink);font-family:inherit;transition:.15s}
.field:focus{outline:none;border-color:var(--brand)}
textarea.field{resize:vertical}
label.lbl{font-weight:700;font-size:13px;display:block;margin:0 0 6px}
.form-row{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b7688' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.pill.best{background:#fef3c7;color:#b45309}.pill.trend{background:#dbeafe;color:#1d4ed8}
.pill.feat{background:#e9d5ff;color:#7c3aed}.pill.rec{background:#dcfce7;color:#15803d}.pill.new{background:#ffe4e6;color:#be123c}
.pill.sale{background:var(--brand);color:#fff}

/* ---- Top promo bar ---- */
.promo-bar{background:linear-gradient(90deg,var(--ink),#2a3346);color:#fff;font-size:13px;font-weight:600;text-align:center;
  padding:9px 40px;position:relative}
.promo-bar a{text-decoration:underline}
.promo-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;
  opacity:.7;cursor:pointer;font-size:16px;padding:4px}
.promo-close:hover{opacity:1}

/* ---- Top nav ---- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;gap:18px;height:72px}
.logo{font-weight:900;font-size:21px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo .dot{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--gold));
  display:grid;place-items:center;color:#fff;font-size:19px;flex-shrink:0}
.logo .sub{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin-top:1px}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links a{padding:9px 14px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--muted)}
.nav-links a:hover,.nav-links a.active{color:var(--brand);background:var(--brand-soft)}
.nav-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav-search{display:none}
@media(min-width:960px){.nav-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:9px 14px;width:230px}
  .nav-search input{border:none;background:transparent;outline:none;font-size:14px;flex:1;color:var(--ink)}}

/* ---- Hero ---- */
.hero{background:linear-gradient(135deg,#1a2130 0%,#2a3446 60%,#3a2718 130%);color:#fff;border-radius:24px;overflow:hidden;
  position:relative;margin:22px 0 8px}
.hero-inner{padding:56px 40px;position:relative;z-index:2;max-width:600px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700}
.hero h1{font-size:42px;margin:16px 0 10px;letter-spacing:-1.2px;line-height:1.08}
.hero p{opacity:.88;margin:0 0 24px;font-size:16px;max-width:460px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5}
.hero .b1{width:280px;height:280px;background:var(--brand);right:-60px;top:-80px}
.hero .b2{width:220px;height:220px;background:var(--gold);right:160px;bottom:-100px;opacity:.35}
.hero-img{position:absolute;right:0;top:0;bottom:0;width:44%;object-fit:cover;opacity:.9;z-index:1;
  mask-image:linear-gradient(to right,transparent,#000 30%)}
@media(max-width:820px){.hero h1{font-size:30px}.hero-inner{padding:36px 24px}.hero-img{display:none}}

/* ---- Search ---- */
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-sm)}
.search input{border:none;background:transparent;outline:none;font-size:15px;color:var(--ink);flex:1;font-family:inherit}

/* ---- Collections ---- */
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 0 16px}
.section-title h2{font-size:22px}
.section-title .see-all{font-size:13.5px;font-weight:700;color:var(--brand)}
.collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.collection-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 14px;text-align:center;
  cursor:pointer;transition:.18s}
.collection-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.collection-card .ic{font-size:34px;margin-bottom:8px}
.collection-card .lbl{font-weight:800;font-size:13.5px}
.rail{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .collection-card{min-width:110px;flex-shrink:0}

/* ---- Product grid & card ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.product{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.18s;display:flex;flex-direction:column;position:relative}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product .thumb{height:180px;background:linear-gradient(135deg,var(--brand-soft),#fff);display:grid;place-items:center;
  position:relative;overflow:hidden}
.product .thumb-emoji{font-size:64px}
.product .thumb-img{width:100%;height:100%;object-fit:cover}
.product .badges{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;max-width:170px;z-index:2}
.product .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product .name{font-weight:800;font-size:15.5px}
.product .name a{display:block}
.product .desc{font-size:12.8px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product .meta{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:2px}
.product .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.product .price{font-weight:900;font-size:18px}
.product .price .compare{font-weight:700;font-size:12.5px;color:var(--muted);text-decoration:line-through;margin-left:6px}
.add-btn{width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;border:none;font-size:22px;
  cursor:pointer;display:grid;place-items:center;line-height:0;transition:.15s;flex-shrink:0}
.add-btn:hover{transform:scale(1.08);background:var(--brand-600)}
.add-btn:disabled{opacity:.4;cursor:not-allowed}
.out-of-stock{position:absolute;inset:0;background:rgba(255,255,255,.75);display:grid;place-items:center;z-index:3;font-weight:800}
[data-theme] .out-of-stock{}

/* ---- Product detail page ---- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:26px 0 50px}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:26px}}
.pdp-gallery{border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--brand-soft),#fff);
  aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.pdp-gallery .thumb-emoji{font-size:130px}
.pdp-gallery img{width:100%;height:100%;object-fit:cover}
.pdp-title{font-size:30px;margin-bottom:6px;letter-spacing:-.6px}
.pdp-meta{display:flex;gap:16px;color:var(--muted);font-size:13.5px;margin:8px 0 16px;flex-wrap:wrap}
.pdp-price{font-size:28px;font-weight:900;margin:10px 0}
.pdp-price .compare{font-size:16px;color:var(--muted);text-decoration:line-through;font-weight:700;margin-left:10px}
.pdp-desc{color:var(--muted);margin:14px 0 22px;font-size:15px}
.opt-group{margin:18px 0}
.opt-group .gh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.opt-group .gh b{font-size:15px}
.req-tag{font-size:11px;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:999px}
.opt{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 15px;margin-bottom:8px;cursor:pointer;transition:.12s}
.opt:hover{border-color:var(--brand)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt .lp{display:flex;align-items:center;gap:10px;font-weight:600}
.opt input{accent-color:var(--brand);width:17px;height:17px}
.qty-stepper{display:flex;align-items:center;gap:16px;margin:22px 0}
.qty-stepper button{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:transparent;font-size:20px;cursor:pointer}
.qty-stepper button:hover{border-color:var(--brand);color:var(--brand)}
.qty-stepper .n{font-size:18px;font-weight:800;min-width:24px;text-align:center}
.sticky-add{position:sticky;bottom:0;background:var(--card);padding:14px 0;margin-top:10px}
@media(max-width:860px){.sticky-add{position:fixed;left:0;right:0;bottom:0;padding:12px 20px;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.06);z-index:30}
  body.has-pdp{padding-bottom:78px}}

/* ---- Cart drawer ---- */
.overlay{position:fixed;inset:0;background:rgba(10,15,25,.5);backdrop-filter:blur(3px);z-index:60;opacity:0;
  pointer-events:none;transition:.25s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:440px;max-width:94vw;background:var(--card);z-index:70;
  box-shadow:-20px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer .dhead{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer .dhead h3{font-size:18px}
.drawer .dbody{overflow-y:auto;flex:1;padding:18px 22px}
.drawer .dfoot{border-top:1px solid var(--line);padding:18px 22px;background:var(--card)}
.close-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:18px}
.cart-line{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}
.cart-line .ci{width:56px;height:56px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;
  font-size:28px;flex-shrink:0;overflow:hidden}
.cart-line .ci img{width:100%;height:100%;object-fit:cover}
.cart-line .cname{font-weight:700;font-size:14.5px}
.cart-line .copts{font-size:12px;color:var(--muted);margin-top:2px}
.cart-line .cctrl{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.qty-mini{display:flex;align-items:center;gap:10px}
.qty-mini button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:14px}
.qty-mini .n{font-weight:700;font-size:13.5px;min-width:16px;text-align:center}
.remove-link{font-size:12px;color:var(--danger);cursor:pointer;font-weight:700}
.summary .r{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.summary .r.total{font-weight:900;font-size:19px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.empty-cart{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-cart .ic{font-size:52px;margin-bottom:10px}
.coupon-row{display:flex;gap:8px;margin:14px 0}
.coupon-row input{flex:1}
.coupon-applied{display:flex;justify-content:space-between;align-items:center;background:#dcfce7;color:#15803d;
  padding:9px 13px;border-radius:10px;font-size:13px;font-weight:700;margin:12px 0}
.fab-cart{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:45;box-shadow:0 10px 30px rgba(232,85,43,.4)}
@media(min-width:861px){.fab-cart{display:none}}
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;
  z-index:90;font-weight:600;opacity:0;transform:translateY(10px);transition:.25s;max-width:88vw}
.toast.show{opacity:1;transform:translateY(0)}

/* ---- Checkout ---- */
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;margin:26px 0 60px;align-items:start}
@media(max-width:900px){.checkout-grid{grid-template-columns:1fr}}
.checkout-grid .card{padding:24px}
.order-summary{position:sticky;top:90px}
.type-toggle{display:flex;gap:10px;margin-bottom:18px}
.type-toggle button{flex:1;padding:14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);
  font-weight:700;cursor:pointer;font-size:14.5px;font-family:inherit}
.type-toggle button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pay-option{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer}
.pay-option.sel{border-color:var(--brand);background:var(--brand-soft)}
.mini-line{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mini-line img,.mini-line .ci{width:42px;height:42px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;font-size:20px;overflow:hidden;flex-shrink:0}
.mini-line img{object-fit:cover}

/* ---- Order confirmation / tracking ---- */
.confirm-hero{text-align:center;padding:50px 20px}
.confirm-hero .ic{font-size:70px;margin-bottom:14px}
.timeline{margin:24px 0}
.tl-step{display:flex;gap:14px;padding-bottom:24px;position:relative}
.tl-step:before{content:'';position:absolute;left:15px;top:34px;bottom:-4px;width:2px;background:var(--line)}
.tl-step:last-child:before{display:none}
.tl-dot{width:32px;height:32px;border-radius:999px;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;
  font-size:14px;flex-shrink:0;z-index:1}
.tl-step.done .tl-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.tl-step.active .tl-dot{background:var(--brand);border-color:var(--brand);color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,85,43,.5)}70%{box-shadow:0 0 0 12px rgba(232,85,43,0)}100%{box-shadow:0 0 0 0 rgba(232,85,43,0)}}
.tl-step .tl-txt b{font-size:15px}.tl-step.pending .tl-txt{opacity:.5}
.status-badge{font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
.status-badge.PENDING{background:#fef3c7;color:#b45309}
.status-badge.CONFIRMED,.status-badge.PREPARING,.status-badge.COOKING{background:#dbeafe;color:#1d4ed8}
.status-badge.READY,.status-badge.OUT_FOR_DELIVERY{background:#ede9fe;color:#6d28d9}
.status-badge.DELIVERED,.status-badge.COMPLETED{background:#dcfce7;color:#15803d}
.status-badge.CANCELLED{background:#fee2e2;color:#b91c1c}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line);padding:44px 0 26px;margin-top:60px;color:var(--muted);font-size:13.5px;background:var(--card)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);margin-bottom:12px}
.footer a{display:block;padding:4px 0;color:var(--muted)}
.footer a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---- Bottom mobile nav ---- */
.bottom-nav{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;box-shadow:0 -6px 20px rgba(20,30,50,.08)}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;
    font-size:11px;font-weight:700;color:var(--muted)}
  .bn-item.active{color:var(--brand)}
  .bn-ic{font-size:20px;position:relative}
  body{padding-bottom:70px}
}
@media(max-width:560px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.grid{grid-template-columns:1fr}}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-side{background:#171d2b;color:#c9d2e3;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .logo{color:#fff;margin:6px 8px 22px;font-size:18px}
.admin-side .logo .dot{background:linear-gradient(135deg,var(--brand),var(--gold))}
.admin-side a{display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:12px;font-weight:600;font-size:14px;color:#aab4c8;margin-bottom:3px}
.admin-side a:hover,.admin-side a.active{background:rgba(255,255,255,.08);color:#fff}
.admin-side .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#5c6980;padding:16px 14px 6px}
.admin-main{padding:26px 30px 60px;min-width:0}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.admin-topbar h1{font-size:23px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi{padding:20px}
.kpi .k{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:6px}
.kpi .v{font-size:27px;font-weight:900;letter-spacing:-.5px}
table.admin-table{width:100%;border-collapse:collapse}
.admin-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  padding:12px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-table td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.admin-table tr:hover td{background:var(--bg)}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.table-wrap .admin-table{margin:0}
.table-wrap .admin-table th:first-child,.table-wrap .admin-table td:first-child{padding-left:20px}
.avatar-cell{display:flex;align-items:center;gap:10px}
.avatar-cell .th{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;font-size:19px;overflow:hidden;flex-shrink:0}
.avatar-cell .th img{width:100%;height:100%;object-fit:cover}
.tag-status{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:capitalize}
.tag-status.active,.tag-status.PENDING{background:#fef3c7;color:#b45309}
.tag-status.draft,.tag-status.hidden{background:#e2e8f0;color:#475569}
.tag-status.CONFIRMED,.tag-status.PREPARING,.tag-status.COOKING{background:#dbeafe;color:#1d4ed8}
.tag-status.READY,.tag-status.OUT_FOR_DELIVERY{background:#ede9fe;color:#6d28d9}
.tag-status.DELIVERED,.tag-status.COMPLETED{background:#dcfce7;color:#15803d}
.tag-status.CANCELLED{background:#fee2e2;color:#b91c1c}
.admin-login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1a2130,#2a3446);padding:20px}
.admin-login-card{width:400px;max-width:100%;padding:36px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters .field{width:auto}
.option-builder .og-row{border:1.5px dashed var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.option-builder .ov-row{display:grid;grid-template-columns:1fr 120px 36px;gap:8px;margin-bottom:8px}
.icon-remove{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:transparent;cursor:pointer;color:var(--danger)}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.gallery-thumbs .g{width:70px;height:70px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.gallery-thumbs .g img{width:100%;height:100%;object-fit:cover}
.upload-box{border:2px dashed var(--line);border-radius:14px;padding:20px;text-align:center;color:var(--muted);cursor:pointer}
.upload-box:hover{border-color:var(--brand);color:var(--brand)}
.stat-trend{font-size:12px;font-weight:700;color:var(--ok)}
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:600;font-size:14px}
.alert.ok{background:#dcfce7;color:#15803d}
.alert.err{background:#fee2e2;color:#b91c1c}
.pagination{display:flex;gap:6px;margin-top:18px;justify-content:center}
.pagination a{padding:8px 14px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:13px}
.pagination a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
@media(max-width:920px){.admin-shell{grid-template-columns:1fr}.admin-side{display:none}}