/* Glassmorphism layer for Haat. Loaded after styles.css; remove the <link> to switch it off.
   - A soft, fixed "market morning" backdrop (leaf green, marigold, sky) gives the glass something to show.
   - Real backdrop blur only on layers that float over scrolling content: header, bottom nav, cart bar,
     search suggestions, sheets, the AI panel, toasts, map badges. Grid cards get a translucent "glass" fill
     and light edges without blur, so long product lists stay smooth on budget phones.
   - Falls back to solid surfaces when blur isn't supported or the user asks for reduced transparency. */

:root {
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .76);
  --glass-card: rgba(255, 255, 255, .66);
  --glass-edge: rgba(255, 255, 255, .75);           /* bright top/left edge */
  --glass-line: rgba(27, 36, 32, .08);              /* outer hairline */
  --glass-shadow: 0 1px 1px rgba(20, 40, 30, .04), 0 10px 30px -8px rgba(20, 40, 30, .16);
  --glass-shadow-lg: 0 24px 60px -12px rgba(20, 40, 30, .28);
  --glass-blur: saturate(170%) blur(18px);
  --glass-tint-brand: rgba(13, 90, 58, .82);
  --glass-input: rgba(255, 255, 255, .7);
  --bloom-1: rgba(62, 174, 123, .30);
  --bloom-2: rgba(242, 163, 58, .26);
  --bloom-3: rgba(127, 168, 238, .22);
  --bloom-4: rgba(13, 90, 58, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(25, 32, 27, .55);
    --glass-strong: rgba(25, 32, 27, .78);
    --glass-card: rgba(30, 38, 32, .62);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-line: rgba(0, 0, 0, .35);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .55);
    --glass-shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);
    --glass-tint-brand: rgba(30, 120, 80, .78);
    --glass-input: rgba(255, 255, 255, .06);
    --bloom-1: rgba(62, 174, 123, .22);
    --bloom-2: rgba(242, 163, 58, .14);
    --bloom-3: rgba(90, 120, 220, .16);
    --bloom-4: rgba(62, 174, 123, .10);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(25, 32, 27, .55);
  --glass-strong: rgba(25, 32, 27, .78);
  --glass-card: rgba(30, 38, 32, .62);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-line: rgba(0, 0, 0, .35);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .55);
  --glass-shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);
  --glass-tint-brand: rgba(30, 120, 80, .78);
  --glass-input: rgba(255, 255, 255, .06);
  --bloom-1: rgba(62, 174, 123, .22);
  --bloom-2: rgba(242, 163, 58, .14);
  --bloom-3: rgba(90, 120, 220, .16);
  --bloom-4: rgba(62, 174, 123, .10);
}

/* ---------- Backdrop ---------- */
body { background: var(--bg); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 36vmax at 8% 6%, var(--bloom-1), transparent 70%),
    radial-gradient(38vmax 32vmax at 96% 18%, var(--bloom-2), transparent 70%),
    radial-gradient(46vmax 40vmax at 78% 96%, var(--bloom-3), transparent 70%),
    radial-gradient(40vmax 36vmax at 4% 88%, var(--bloom-4), transparent 70%);
}
body::before { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------- Floating layers: real frosted glass ---------- */
.hdr, .ops-top, .bnav, .suggest, .sheet, .toast, .ai-drawer, .ai-head, .ai-foot, .map-badge > *, .leaflet-bar, .car-ctl {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.hdr, .ops-top { background: var(--glass); border-bottom-color: var(--glass-line); box-shadow: inset 0 -1px 0 var(--glass-edge); }
.bnav { background: var(--glass-strong); border-top-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), 0 -8px 24px -12px rgba(20, 40, 30, .18); }
.suggest { background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: var(--glass-shadow-lg); }
.suggest-item:hover, .suggest-item.on { background: color-mix(in srgb, var(--brand) 9%, transparent); }

@media (min-width: 900px) { .ops-side { background: var(--glass); border-right-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset -1px 0 0 var(--glass-edge); } }

/* Cart bar: tinted brand glass */
.cartbar { background: var(--glass-tint-brand); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--glass-shadow-lg); }

/* Dialogs */
.scrim { background: rgba(10, 18, 14, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow-lg); }
.toast { background: color-mix(in srgb, var(--ink) 82%, transparent); border: 1px solid rgba(255, 255, 255, .14); }
.toast.bad { background: color-mix(in srgb, var(--bad) 88%, transparent); }

/* AI assistant */
.ai-drawer { background: color-mix(in srgb, var(--bg) 70%, transparent); }
@media (min-width: 760px) { .ai-drawer { border-color: var(--glass-edge); box-shadow: var(--glass-shadow-lg); } }
.ai-head, .ai-foot { background: var(--glass); border-color: var(--glass-line); }
.ai-msg.bot { background: var(--glass-card); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.ai-msg.me { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.ai-fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 28px -10px rgba(13, 90, 58, .55); }

/* Maps */
.map-badge > *, .leaflet-bar a, .car-ctl { background: var(--glass-strong); border-color: var(--glass-edge); }

/* ---------- Surfaces: glass look, no blur (cheap) ---------- */
.panel, .pcard, .rcard, .kpi, .ocard, .tbl-wrap, .portal-card, .radio-card, .variant, .ai-card, .ai-hero, .login-card .panel {
  background: var(--glass-card);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
}
.pcard, .rcard, .portal-card { transition: box-shadow .18s ease, border-color .18s ease; }
/* Hover deepens the shadow only: moving the card would make it flicker when the cursor sits on its edge. */
@media (hover: hover) { .pcard:hover, .rcard:hover, .portal-card:hover { box-shadow: var(--glass-shadow-lg), inset 0 1px 0 var(--glass-edge); border-color: color-mix(in srgb, var(--brand) 25%, var(--glass-edge)); } }
.ai-card, .ai-hero { border-color: color-mix(in srgb, var(--offer) 40%, var(--glass-edge)); }
.kcol { background: color-mix(in srgb, var(--surface-2) 55%, transparent); border: 1px solid var(--glass-edge); }
.pcard .pimg, .line-item .art { background: color-mix(in srgb, var(--tile) 70%, transparent); }
.pcard .wish, .rcard .rtag, .pcard .eta { background: var(--glass-strong); border-color: var(--glass-edge); }
.radio-card:has(input:checked), .variant.on { background: color-mix(in srgb, var(--brand-soft) 75%, transparent); }

/* Controls */
.searchbox { background: var(--glass-input); border-color: var(--glass-edge); box-shadow: inset 0 1px 2px rgba(20, 40, 30, .06); }
.searchbox:focus-within { background: var(--glass-strong); }
.chip, .select { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: none; }
.chip.on { background: var(--brand); border-color: var(--brand); }
.field input, .field select, .field textarea, .ai-form input, .ai-form textarea { background: var(--glass-input); border-color: color-mix(in srgb, var(--line) 70%, var(--glass-edge)); }
.btn.ghost, .btn.subtle, .iconbtn { background: var(--glass); border-color: var(--glass-edge); }
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.note, .alert { background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-color: var(--glass-edge); }
.footer { border-top-color: var(--glass-line); }
.menu-item .mimg .add { background: var(--glass-strong); }

/* ---------- Fallbacks & accessibility ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr, .ops-top, .ops-side, .bnav, .suggest, .sheet, .ai-head, .ai-foot, .map-badge > *, .leaflet-bar a, .car-ctl, body::before { background: var(--surface); }
  .ai-drawer { background: var(--bg); }
  .cartbar { background: var(--brand); }
}
@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
  .hdr, .ops-top, .ops-side, .bnav, .suggest, .sheet, .ai-head, .ai-foot, .map-badge > *, .leaflet-bar a, .car-ctl, body::before,
  .panel, .pcard, .rcard, .kpi, .ocard, .tbl-wrap, .portal-card, .radio-card, .variant, .ai-card, .ai-hero, .ai-msg.bot,
  .searchbox, .chip, .select, .btn.ghost, .btn.subtle, .iconbtn, .pcard .wish, .rcard .rtag, .pcard .eta {
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .ai-drawer { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cartbar { background: var(--brand); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 14, 12, .45); }
}
@media (prefers-reduced-motion: reduce) { .pcard, .rcard, .portal-card { transition: none; } }
@media print { body::after { display: none; } }