/* ============================================================
   blend-theme.css — "light cards + glass accents" refinement
   Loaded LAST on every surface (storefront / admin / console)
   so it layers on top of app.css / aura*.css / admin*.css
   without touching the base files. Pure visual refinement +
   chart theming — no structural HTML dependency beyond
   classes already emitted by store.js / admin.js / console.js.
   ============================================================ */

:root{
  /* chart palette — extends the existing brand vars, doesn't replace them */
  --chart-1: var(--brand, #e11d2a);
  --chart-1-soft: #ff8a86;
  --chart-2: #0a8a3d;
  --chart-2-soft: #6fe3a0;
  --chart-3: #f2a93b;
  --chart-4: #2f6fed;
  --chart-5: #8b5cf6;
  --chart-6: #06b6d4;
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.6);
  --card-shadow: 0 1px 2px rgba(20,24,31,.04), 0 10px 28px -12px rgba(20,24,31,.12);
  --card-shadow-hover: 0 4px 10px rgba(20,24,31,.06), 0 20px 40px -16px rgba(20,24,31,.18);
}

/* ---------- global mesh backdrop (admin / console) ---------- */
.app{
  background:
    radial-gradient(720px 420px at 8% -8%, rgba(225,29,42,.06), transparent 60%),
    radial-gradient(640px 420px at 100% 0%, rgba(47,111,237,.06), transparent 55%),
    var(--bg-2);
}
.sidebar{
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-right: 1px solid var(--glass-border);
}
.topbar{
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
}
.nav-item.on{
  background: linear-gradient(135deg, var(--brand-soft), #fff);
  box-shadow: inset 0 0 0 1px rgba(225,29,42,.12);
}

/* ---------- cards & panels: soft depth + hover lift ---------- */
.card, .panel{
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  border-color: rgba(20,24,31,.06);
  transition: box-shadow .22s ease, transform .22s ease;
}
.panel:hover{ box-shadow: var(--card-shadow-hover); }
.panel-head{ border-bottom: 1px solid rgba(20,24,31,.06); }
.panel-head h3{ letter-spacing: -.01em; }

/* ---------- KPI cards: icon chip + accent glow + trend badge ---------- */
.kpis{ gap: 16px; }
.kpi{
  position: relative;
  border-radius: 16px;
  padding: 18px 20px 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi:hover{ transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.kpi::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-3));
}
.kpi:has(.sub.up)::before{ background: linear-gradient(90deg, var(--chart-2), var(--chart-2-soft)); }
.kpi:has(.sub.down)::before{ background: linear-gradient(90deg, var(--brand), #ff9d99); }
.kpi .label{ text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); }
.kpi .val{
  font-family: var(--display, inherit);
  background: linear-gradient(135deg, var(--ink) 40%, var(--ink-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin: 2px 0 3px;
}
.kpi .sub{ display:inline-flex; align-items:center; gap:4px; font-weight: 600; }
.kpi .sub.up::before{ content:"▲"; font-size: 9px; }
.kpi .sub.down::before{ content:"▼"; font-size: 9px; }

/* ---------- chart layout primitives ---------- */
.chart-grid-2{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 980px){ .chart-grid-2{ grid-template-columns: 1fr; } }
.chart-card .panel-head{ margin-bottom: 0; }
.chart-wrap{ position: relative; padding: 18px 20px 8px; }
.chart-wrap canvas{ max-width: 100%; }
.donut-wrap{ display:grid; place-items:center; padding: 20px 20px 4px; }
.chart-legend{ display:flex; flex-wrap:wrap; gap: 10px 18px; padding: 4px 20px 18px; justify-content:center; }
.chart-legend .lg-item{ display:flex; align-items:center; gap:7px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.chart-legend .lg-dot{ width:10px; height:10px; border-radius: 3px; flex-shrink:0; }
.chart-legend .lg-val{ color: var(--ink-3); font-weight: 500; }

/* smooth existing custom bar rows too, so old + new visuals match */
.bar-fill{
  background: linear-gradient(90deg, var(--chart-1), var(--chart-1-soft));
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.bar-track{ background: var(--bg-3); }

/* ---------- tables ---------- */
table.tbl tr td, table.tbl tr th{ transition: background .12s; }
table.tbl tr:hover td{ background: rgba(225,29,42,.03); }

/* ---------- buttons: smoother press/hover ---------- */
.btn{ transition: transform .12s ease, box-shadow .18s ease, background .18s ease; }
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary:hover, .btn-amber:hover{ box-shadow: 0 8px 22px -8px rgba(225,29,42,.45); }

/* ============================================================
   Storefront-specific polish (light cards + glass accents)
   ============================================================ */
.pcard{
  border-radius: 16px;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: var(--card-shadow);
}
.pcard:hover{ transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.pcard-imgwrap{ border-radius: 16px 16px 0 0; overflow: hidden; }

.hdr{
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.acct-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:16px; }
.acct-stat{
  background: linear-gradient(160deg, #fff, var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 12px;
  box-shadow: var(--card-shadow);
}
.acct-stat.wallet{
  background: linear-gradient(160deg, var(--brand-soft), #fff);
  border-color: rgba(225,29,42,.14);
}
.acct-stat-val{ font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }

.giftcard-panel{
  display:flex; gap:14px; align-items:flex-start;
  background: linear-gradient(135deg, #fff7ec, #fff);
  border: 1px solid rgba(242,169,59,.3);
  border-radius: 16px; padding: 16px; margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.giftcard-chip{
  width: 40px; height: 40px; border-radius: 12px; flex-shrink:0;
  display:grid; place-items:center; font-size: 18px;
  background: linear-gradient(135deg, #f2a93b, #e17f0e); color:#fff;
}

.wallet-spark-wrap{ height: 64px; margin: 2px 0 14px; }

.modal, .drawer{ box-shadow: var(--card-shadow-hover); }

/* ============================================================
   polish pass — richer motion, glow, and finishing touches
   (appended on top of everything above; pure CSS, no JS deps)
   ============================================================ */

/* ---------- animated aurora blobs behind admin/console + storefront hero ---------- */
.app::before, .hero::after{
  content:"";
  position:absolute; z-index:0; pointer-events:none;
  width:520px; height:520px; border-radius:50%;
  filter: blur(90px); opacity:.16;
  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.app::before{ top:-220px; right:-160px; }
.hero::after{ top:-180px; right:-120px; background: radial-gradient(circle, var(--chart-4, #2f6fed) 0%, transparent 70%); animation-duration: 20s; }
@keyframes auroraDrift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-40px,50px) scale(1.12); }
}
.sidebar, .topbar, .content{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce), (max-width:900px){
  .app::before, .hero::after{ animation:none; }
}
.lite .app::before, .lite .hero::after{ display:none; } /* respect the device-capability probe already in each shell */

/* ---------- staggered entrance for grids ---------- */
@keyframes riseIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }
.kpis > *, .pgrid > *, .chart-grid-2 > *{ animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; }
.kpis > *:nth-child(1), .pgrid > *:nth-child(6n+1){ animation-delay: .02s; }
.kpis > *:nth-child(2), .pgrid > *:nth-child(6n+2){ animation-delay: .06s; }
.kpis > *:nth-child(3), .pgrid > *:nth-child(6n+3){ animation-delay: .10s; }
.kpis > *:nth-child(4), .pgrid > *:nth-child(6n+4){ animation-delay: .14s; }
.kpis > *:nth-child(5), .pgrid > *:nth-child(6n+5){ animation-delay: .18s; }
.pgrid > *:nth-child(6n+6){ animation-delay: .22s; }
.lite .kpis > *, .lite .pgrid > *, .lite .chart-grid-2 > *{ animation: none; }

/* ---------- button shine sweep ---------- */
.btn-primary, .btn-amber{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-amber::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn-primary:hover::after, .btn-amber:hover::after{ left: 130%; }

/* ---------- product cards: image zoom + glowing deal badge ---------- */
.pcard-imgwrap{ overflow: hidden; }
.pcard-imgwrap img, .pcard-glyph{ transition: transform .35s cubic-bezier(.22,1,.36,1); }
.pcard:hover .pcard-imgwrap img, .pcard:hover .pcard-glyph{ transform: scale(1.06); }
.pcard-deal{
  animation: dealPulse 2.4s ease-in-out infinite;
  box-shadow: 0 2px 10px -2px rgba(225,29,42,.55);
}
@keyframes dealPulse{ 0%,100%{ box-shadow: 0 2px 10px -2px rgba(225,29,42,.55); } 50%{ box-shadow: 0 2px 16px 1px rgba(225,29,42,.75); } }
.stars{ background: linear-gradient(90deg, var(--star, #f2a93b), #ffcf6b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight: 700; }
.price-now{ transition: transform .18s ease; }
.pcard:hover .price-now{ transform: scale(1.04); transform-origin: left center; }

/* ---------- nav / pill / focus glow ---------- */
.nav-item{ position:relative; }
.nav-item.on::before{
  content:""; position:absolute; left:-14px; top:50%; translate:0 -50%;
  width:4px; height:60%; border-radius:0 4px 4px 0;
  background: linear-gradient(180deg, var(--brand), var(--chart-1-soft));
}
a, button, input, select{ transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
input:focus-visible, select:focus-visible, .search:focus-within{
  box-shadow: 0 0 0 3px var(--brand-soft) !important;
}

/* ---------- modal / drawer: slightly springier open ---------- */
.modal{ transition: opacity .26s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.drawer{ transition: transform .32s cubic-bezier(.22,1,.36,1); }

/* ---------- nicer branded spinner ---------- */
.spin{
  border-width: 3px;
  border-top-color: var(--brand);
  border-right-color: var(--chart-3, #f2a93b);
  animation: rot .8s cubic-bezier(.5,0,.5,1) infinite;
}

/* ---------- toast: soften + add subtle glow ---------- */
.toast{ box-shadow: 0 10px 30px -8px rgba(20,24,31,.35); }

/* ---------- hero badge + tile lift polish ---------- */
.hero-badge{ transition: transform .2s ease, box-shadow .2s ease; }
.hero-badge:hover{ transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.hero-tile-imgwrap{ transition: box-shadow .2s ease; }
.hero-tile:hover .hero-tile-imgwrap{ box-shadow: var(--card-shadow-hover); }

/* ---------- table row reveal on scroll-free load (subtle) ---------- */
table.tbl tbody tr{ animation: riseIn .3s ease both; }
.lite table.tbl tbody tr{ animation:none; }

/* ============================================================
   compact-density pass — tighter spacing everywhere so the
   admin panel, administrator console, and storefront all show
   more content at normal 100% browser zoom, without feeling
   cramped. Pure overrides on top of everything above.
   ============================================================ */

/* ---------- admin / console shell ---------- */
.sidebar{ width: 208px; padding: 14px 10px; }
.side-logo img{ height: 24px; margin: 2px 4px 0; }
.side-tag{ padding: 0 6px 12px; font-size: 10px; }
.nav-item{ padding: 7px 10px; font-size: 13px; gap: 9px; margin-bottom: 1px; }
.nav-item svg{ width: 16px; height: 16px; }
.side-foot{ padding: 9px 6px 0; font-size: 11.5px; }
.topbar{ height: 48px; padding: 0 18px; }
.topbar h1{ font-size: 16px; }
.content{ padding: 16px 18px 40px; }

/* ---------- KPI + card density ---------- */
.kpis{ gap: 10px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi{ padding: 12px 14px 10px; border-radius: 12px; }
.kpi .label{ font-size: 10px; margin-bottom: 4px; }
.kpi .val{ font-size: 20px; margin: 1px 0 2px; }
.kpi .sub{ font-size: 11px; }
.card, .panel{ border-radius: 12px; }
.panel-head{ padding: 10px 14px; }
.panel-head h3{ font-size: 13px; }
.chart-grid-2{ gap: 12px; margin-bottom: 12px; }
.chart-wrap{ padding: 10px 12px 4px; }
.donut-wrap{ padding: 12px 12px 2px; }
.chart-legend{ gap: 6px 12px; padding: 2px 12px 12px; }
.chart-legend .lg-item{ font-size: 11px; }

/* ---------- tables: denser rows ---------- */
table.tbl{ font-size: 12.5px; }
table.tbl th{ padding: 8px 12px; font-size: 10.5px; }
table.tbl td{ padding: 8px 12px; }

/* ---------- form fields / buttons / search: slightly tighter ---------- */
.field{ margin-bottom: 10px; }
.field input, .field select, .field textarea{ padding: 9px 12px; border-radius: 11px; font-size: 13px; }
.btn{ padding: 8px 16px; font-size: 13px; }
.btn-sm{ padding: 6px 12px; font-size: 12px; }
.search{ padding: 6px 10px; }
.seg button, .subtabs button{ padding: 5px 11px; font-size: 12.5px; }
.pill{ padding: 2px 8px; font-size: 10.5px; }
.toolbar{ gap: 6px; }

/* ---------- storefront: tighter header + product grid ---------- */
.hdr-main{ height: 56px; gap: 12px; }
.subnav a{ padding: 6px 12px; font-size: 12.5px; }
.hero-card{ padding: 26px 30px; }
.hero h1{ font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 10px; }
.hero p{ font-size: 14.5px; margin-bottom: 16px; }
.hero-badge{ padding: 9px 14px; }
.hero-badge .n{ font-size: 19px; }
.pcard-body{ padding: 11px 12px 12px; gap: 4px; }
.pcard-price .price-now{ font-size: 17px; }
.results-bar h2{ font-size: 15.5px; }

/* ---------- modal / drawer padding ---------- */
.modal-head{ padding: 18px 20px 4px; }
.modal-head h3{ font-size: 17px; }
.modal-body{ padding: 12px 20px 20px; }
.drawer-head{ padding: 14px 18px; }
.drawer-body{ padding: 6px 18px; }
.drawer-foot{ padding: 14px 18px; }

/* keep the compact pass from squeezing things below a sane minimum on small screens —
   the layout already switches to a mobile-first stack under 860/980px via the base CSS,
   so these overrides mainly matter at desktop widths (the "100% zoom" case). */
@media (max-width: 860px){
  .sidebar{ width: auto; }
}