/* ====================================================================
   FIZOOK AUCTIONS — LIVE (Mobile 3-Up) — STYLESHEET
   Companion stylesheet for fizook-auctions-v2-mobile.html.
   All component styles are organized by section banner below
   (/* ---------- Section ---------- */ for top-level component
   groups, /* ============================================================
   for major responsive layout overrides).

   ORGANIZATION
     1. Base / tokens         — :root design tokens, body, resets
     2. Top bar               — sticky header, brand mark, primary nav + dropdowns
     3. Hero / status strip   — Fizook Auction title row, status text, progress, stats
     4. Toolbar               — sort/filter chips
     5. Bidder grid           — bidder card layout, best-deal styling, button variants
     6. Held offers tray      — 6-slot bookmark grid + empty placeholders
     7. Controls dock         — sticky bottom bar (Start/Pause/Reset/Settings/Clear All)
     8. Series-limit popup    — modal shown after 3 completed auctions
     9. Activity feed         — clickable price drops + lifecycle events
    10. Sheet (offer details) — bottom-sheet on phone, centered modal on desktop
    11. Toast                 — transient top-center notifications
    12. Footer
    13. Helpers
    14. Phone portrait override (≤559.98px)   — 3-up logo grid
    15. Phone landscape override              — 3 cols × 2 rows of full cards
    16. Best-deal pulse (all screen sizes)
    17. Linkable headline stats               — clickable post-auction
   ==================================================================== */


/* ---------- 1. Base / tokens ---------- */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0b1220;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2481bc;
  --primary-dark:#1a6494;
  --success:#16a34a;
  --success-light:#dcfce7;
  --danger:#dc2626;
  --warn:#f59e0b;
  --accent:#7c3aed;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 16px 40px rgba(15,23,42,.18);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:#ffffff}
body{
  min-height:100vh;
  background-color:#ffffff;
  padding-bottom:160px;
}
img{max-width:100%;display:block}
button{font-family:inherit}
a{color:inherit}


/* ---------- 2. Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;
}
.brand{
  font-weight:800;letter-spacing:.5px;font-size:1.25rem;
  display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#7c3aed);box-shadow:0 0 16px rgba(34,211,238,.7)}
.nav-toggle{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:6px;padding:11px 14px;min-width:44px;min-height:44px;cursor:pointer}
.topnav{display:none}
.nav-item{position:relative;display:flex;flex-direction:column}
.nav-link{background:transparent;border:0;font-family:inherit;color:#cbd5e1;text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-link:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-link.active{background:rgba(36,129,188,.25);color:#fff}
.nav-submenu{display:none;flex-direction:column;gap:2px}
.nav-submenu a{color:#cbd5e1;text-decoration:none;font-size:.85rem;padding:6px 12px;border-radius:6px}
.nav-submenu a:hover{background:rgba(255,255,255,.14);color:#fff}
@media (min-width:900px){
  .nav-toggle{display:none}
  .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
  .nav-item{display:inline-flex}
  /* Desktop dropdown: floats below the parent on hover or .open */
  .nav-submenu{
    position:absolute;top:100%;left:0;min-width:170px;
    background:rgba(11,18,32,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;padding:6px;margin-top:4px;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    z-index:60;
  }
  /* Invisible bridge so the mouse can travel from the parent into the
     submenu through the 4px visual gap without dropping the hover state. */
  .nav-submenu::before{
    content:'';position:absolute;
    top:-6px;left:0;right:0;height:6px;
    background:transparent;
  }
  .nav-item:hover .nav-submenu,
  .nav-item.open .nav-submenu{display:flex}
}
.topnav.open{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px 12px;background:rgba(11,18,32,.98);position:absolute;top:100%;left:0;right:0;border-bottom:1px solid rgba(255,255,255,.08)}
@media (min-width:900px){.topnav.open{position:static;flex-direction:row;background:transparent;padding:0;border:0}}
@media (max-width:899.98px){
  /* Phone: sub-links stay hidden until the parent is hovered or tapped open.
     When shown, they sit indented under the parent inside the open nav. */
  .topnav.open .nav-submenu{display:none;padding:2px 0 4px 22px}
  .topnav.open .nav-item:hover .nav-submenu,
  .topnav.open .nav-item.open .nav-submenu{display:flex}
}


/* ---------- 3. Hero / status strip ---------- */
.hero{
  max-width:1280px;margin:16px auto 0;padding:0 16px;
}
.status-card{
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  display:grid;gap:14px;
}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status-title{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px;margin:0}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(22,163,74,.7);animation:pulse 1.6s infinite}
.pulse.paused{background:var(--warn);animation:none}
.pulse.ended{background:var(--danger);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.status-label{font-size:.9rem;color:var(--muted)}
.status-text{font-weight:700;font-size:1rem}
.status-text.paused{color:var(--warn)}
.status-text.ended{color:var(--danger)}
.status-text.live{color:var(--success)}
/* "Live" word flashes red while the auction is actively running.
   The span is only injected by startAuction(), so no other state shows the flash. */
.live-word{color:var(--danger);animation:liveWordFlash 1s ease-in-out infinite;font-weight:800}
@keyframes liveWordFlash{
  0%,100%{color:var(--danger);opacity:1}
  50%   {color:#fca5a5;opacity:.55}
}
/* End-of-auction status: "Ended!" stays solid red, "Pick the Best Deal!"
   flashes green, the trailing hand-down icon stays solid green.
   All three pieces are injected by endAuction(); reset/clear/start
   overwrite the node which strips both the spans and the animations. */
.ended-static{color:var(--danger);font-weight:800}
/* Green ended text — solid for now (flash animation removed). Keyframes
   kept in place so the flash can be re-enabled later by adding the
   `animation:endedFlash 1s ease-in-out infinite` rule back. */
.ended-flash{color:var(--success);font-weight:800}
@keyframes endedFlash{
  0%,100%{color:var(--success);opacity:1}
  50%   {color:#86efac;opacity:.55}
}
/* Bouncing hand-down icon paired with the ended-flash phrase */
.hand-bounce{display:inline-block;animation:handBounce 1s ease-in-out infinite}
@keyframes handBounce{
  0%,100%{transform:translateY(-4px)}
  50%   {transform:translateY(4px)}
}
.progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;position:relative}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#2481bc,#16a34a);border-radius:999px;transition:width .4s ease}
.progress-fill.paused{background:var(--warn)}
.progress-fill.ended{background:var(--danger)}
/* Headline stat tiles — six equal-width columns on desktop so every
   number (Offers available, Bidders, Best price now, Biggest savings,
   Auction rounds, Held offers) reads as the same visual unit. Steps
   down to 3 then 2 columns as the viewport narrows. The 900px break
   gives each tile enough room (~136px) for the longer labels. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:480px){.stats{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.stats{grid-template-columns:repeat(6,1fr)}}
.stat{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;
}
.stat .k{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}
.stat .v{font-size:1.15rem;font-weight:700}
.stat .v.green{color:var(--success)}
.stat .v.blue{color:var(--primary)}
.stat .v.purple{color:var(--accent)}


/* ---------- 4. Toolbar (sort + filter chips) ---------- */
.toolbar{
  max-width:1280px;margin:14px auto 0;padding:0 16px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:8px 14px;cursor:pointer;
  font-size:.88rem;font-weight:600;color:var(--text);
  box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.chip.active{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;border-color:transparent}
.chip i{opacity:.85}
.chip[disabled]{opacity:.55;cursor:not-allowed}
.toolbar-spacer{flex:1}
.toolbar-help{font-size:.8rem;color:var(--muted)}

/* Phone only: collapse the 4 sort chips to a single row of icon-only
   tap targets to save vertical space (was 2x2 grid). The .chip-lbl
   text is hidden visually but remains in the DOM for screen readers
   (via aria-label on the button too), and hover/tap-and-hold shows the
   label via the button's title attribute. Each chip is a full 44px
   tap target so the row still hits touch-target guidelines. Active
   chip gets the same filled/colored treatment as desktop so which
   sort is on stays obvious at a glance. */
@media (max-width:559.98px){
  .toolbar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:0 16px;
    justify-items:stretch;
  }
  .toolbar .chip{
    justify-content:center;
    padding:0;
    width:100%;
    min-height:44px;
    font-size:1.05rem;   /* icon size — no text visible on phone */
    gap:0;
  }
  .toolbar .chip .chip-lbl{
    /* Visually-hidden pattern — keeps text readable by screen readers
       without taking layout space. `title=""` on the button provides
       the hover/long-press tooltip for sighted users. */
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .toolbar .chip i{opacity:1;font-size:1.1rem}
  .toolbar-spacer{display:none}
  .toolbar-help{
    grid-column:1 / -1;
    text-align:center;
    margin-top:4px;
  }
}


/* ---------- 5. Bidder grid ---------- */
.bidders{
  max-width:1280px;margin:14px auto 0;padding:0 16px;
  display:grid;gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:560px){.bidders{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.bidders{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){.bidders{grid-template-columns:repeat(3,1fr)}}

.bidder{
  position:relative;
  background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--border);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.bidder{cursor:pointer}
.bidder:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cbd5e1}

/* Empty bidder card — shown before the auction starts. Same dashed/striped
   "waiting" treatment used on the held-card.empty placeholders so the page
   reads as "ready, waiting to fill" rather than empty/broken. */
.bidder.bidder-empty{
  background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 8px,#f1f5f9 8px,#f1f5f9 16px);
  border-style:dashed;
  display:grid;place-items:center;text-align:center;
  min-height:200px;color:var(--muted);font-weight:600;
  box-shadow:none;
}
.bidder.bidder-empty{cursor:default}
.bidder.bidder-empty:hover{transform:none;border-color:var(--border)}
.bidder.bidder-empty .bidder-empty-content{padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Vendor logo in the pre-auction placeholder — larger than the in-card
   badge so it reads at a glance across a grid of empty slots. */
.bidder.bidder-empty .vendor-logo{width:64px;height:64px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.bidder.bidder-empty .vendor-logo img{object-fit:contain;padding:6px}
/* onerror fallback: hourglass icon replaces the img if the src 404s. */
.bidder.bidder-empty i{font-size:1.8rem;color:#cbd5e1;display:block}
.bidder.bidder-empty .label{font-size:.85rem;line-height:1.3;color:var(--text)}
.bidder.bidder-empty .label strong{font-weight:800}
.bidder.bidder-empty .label .deal-count{font-weight:600;color:var(--muted);font-size:.78rem}

/* Random fill-in animation — applied per-card with an inline animation-delay
   on the first render after Start. Each card fades + scales in independently
   so the grid "populates" instead of snapping into existence all at once. */
.bidder.bidder-fill-in{animation:bidderFillIn .55s ease-out both}
@keyframes bidderFillIn{
  0%  {opacity:0;transform:scale(.85)}
  100%{opacity:1;transform:scale(1)}
}

.bidder.best{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.18),var(--shadow)}
.bidder.best::after{
  content:"BEST DEAL";position:absolute;top:10px;right:10px;
  background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:1px;
  padding:4px 8px;border-radius:999px;box-shadow:var(--shadow-sm);z-index:2;
}
.bidder-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#fff,var(--surface-2));
}
.vendor-logo{
  width:42px;height:42px;border-radius:10px;
  background:#e2e8f0;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
  font-weight:800;color:#475569;
}
.vendor-logo img{width:100%;height:100%;object-fit:cover}
.bidder-name{font-weight:700;font-size:.98rem;margin:0;line-height:1.1}
.bidder-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.bidder-body{padding:12px 14px;display:flex;gap:12px;align-items:center}
.meal-thumb{
  width:96px;height:96px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  background:#f1f5f9;display:grid;place-items:center;border:1px solid var(--border);
}
.meal-thumb img{width:100%;height:100%;object-fit:cover}
.meal-info{flex:1;min-width:0}
.meal-name{font-weight:600;font-size:.95rem;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-now{
  font-size:1.45rem;font-weight:800;color:var(--primary);
  transition:transform .25s ease,color .25s ease;
}
.price-now.flash{animation:flashDrop .7s ease}
@keyframes flashDrop{0%{color:#16a34a;transform:scale(1.1)}100%{color:var(--primary);transform:scale(1)}}
.meal-swap{animation:mealSwap .45s ease}
.name-swap{animation:nameSwap .45s ease}
@keyframes mealSwap{0%{opacity:0;transform:scale(.85) rotate(-2deg)}60%{opacity:1;transform:scale(1.04) rotate(0)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes nameSwap{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
.price-was{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.save-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--success-light);color:#15803d;
  padding:3px 8px;border-radius:999px;font-size:.75rem;font-weight:700;
}
.trend{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.75rem;font-weight:700;color:#15803d;
  background:var(--success-light);padding:3px 8px;border-radius:999px;
}
.trend.flat{color:var(--muted);background:#f1f5f9}
.bidder-actions{
  padding:0 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;
}
.btn{
  appearance:none;border:0;cursor:pointer;font-weight:700;
  padding:10px 14px;border-radius:6px;font-size:.88rem;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;box-shadow:0 4px 12px rgba(36,129,188,.32)}
.btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.32)}
.btn-ghost{background:#f1f5f9;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:#e2e8f0}
.btn-danger{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}

.offer-meta{
  padding:0 14px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:.78rem;color:var(--muted);
}
.offer-meta .more{color:var(--primary);font-weight:700;cursor:pointer}


/* ---------- 6. Held offers tray ---------- */
.held{
  max-width:1280px;margin:24px auto 0;padding:0 16px;
}
.held-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.held-title{font-size:1.1rem;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.held-counter{
  background:#0f172a;color:#fff;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:700;
}
.held-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:560px){.held-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.held-grid{grid-template-columns:repeat(6,1fr)}}
.held-card{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:10px;display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--shadow-sm);min-height:130px;
  position:relative;
}
.held-card.empty{
  background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 8px,#f1f5f9 8px,#f1f5f9 16px);
  color:var(--muted);display:grid;place-items:center;text-align:center;font-size:.82rem;font-weight:600;
  border-style:dashed;
}
.held-card .h-thumb{width:100%;aspect-ratio:1.2/1;border-radius:8px;overflow:hidden;background:#f1f5f9}
.held-card .h-thumb img{width:100%;height:100%;object-fit:cover}
.held-card .h-name{font-size:.78rem;font-weight:700;line-height:1.15;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.held-card .h-price{font-size:1rem;font-weight:800;color:var(--primary)}
.held-card .h-actions{display:flex;gap:6px;margin-top:auto}
.held-card .h-actions .btn{padding:10px 8px;font-size:.75rem;flex:1;min-height:40px}


/* ---------- 7. Controls dock ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(15,23,42,.08);
}
.dock-inner{
  max-width:1280px;margin:0 auto;padding:10px 14px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.dock-actions{display:flex;gap:8px;flex:0 0 auto}
.dock-actions .btn{padding:10px 14px}
.dock-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.dock-meta label{font-size:.8rem;color:var(--muted);font-weight:600}
.dock-meta .group{display:flex;align-items:center;gap:6px}
.dock-meta select,.dock-meta input[type=range]{
  border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:#fff;font-size:.85rem
}
.dock-meta input[type=range]{padding:0;width:120px}
.dock-toggle{display:none}
@media (max-width:680px){
  .dock-toggle{display:inline-flex}
  .dock-meta{display:none;width:100%;justify-content:flex-start}
  .dock.expanded .dock-meta{display:flex}
  /* Phone only: every dock button gets equal width with a 10px gap */
  .dock-inner{padding:10px 12px}
  .dock-actions{
    flex:1 1 100%;
    width:100%;
    gap:10px;
  }
  .dock-actions .btn{
    flex:1 1 0;
    min-width:0;
    padding:10px 4px;
    font-size:.78rem;
    white-space:nowrap;
    overflow:hidden;
  }
  .dock-actions .btn i{margin:0}
}
/* Clear-all icon button (always visible, destructive intent) */
.btn-clear-all{color:#dc2626;padding:10px 12px}
.btn-clear-all:hover{background:#fee2e2;color:#b91c1c}
.btn-clear-all:active{background:#fecaca}

/* Muted Start button — shown after the 3-auction series limit is reached.
   Stays clickable so we can show the series-limit popup. */
.btn.btn-muted{
  background:#cbd5e1 !important;color:#64748b !important;
  box-shadow:none !important;cursor:pointer;
}
.btn.btn-muted:hover{transform:none;background:#94a3b8 !important;color:#fff !important}


/* ---------- 8. Series-limit popup ---------- */
.series-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.series-modal[hidden]{display:none}
.series-modal-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.55);cursor:pointer;
}
.series-modal-panel{
  position:relative;z-index:1;
  background:#fff;border-radius:var(--radius);
  max-width:440px;width:100%;padding:22px 22px 18px;
  box-shadow:var(--shadow-lg);
}
.series-modal-close{
  position:absolute;top:8px;right:8px;
  background:#f1f5f9;border:0;border-radius:8px;
  width:40px;height:40px;cursor:pointer;font-size:1.2rem;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.series-modal-close:hover{background:#e2e8f0}
.series-modal-panel h3{margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--text)}
.series-modal-panel p{margin:0 0 18px;color:var(--muted);font-size:.9rem;line-height:1.5}
.series-modal-section{
  border-top:1px solid var(--border);padding-top:14px;text-align:center;
}
.series-modal-title{
  margin:0 0 12px;font-size:1rem;font-weight:700;color:var(--text);
}
.series-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}


/* ---------- 9. Activity feed ---------- */
.feed{
  max-width:1280px;margin:18px auto 0;padding:0 16px;
}
.feed-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.feed-head{
  padding:12px 14px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.feed-head h3{margin:0;font-size:.95rem;font-weight:700}
.feed-list{
  list-style:none;margin:0;padding:6px 0;max-height:240px;overflow:auto;
}
.feed-list li{
  padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:.85rem;
  border-bottom:1px dashed var(--border);
}
.feed-list li:last-child{border-bottom:0}
.feed-list .badge{
  background:var(--success-light);color:#15803d;
  padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:700;
}
.feed-list .badge.info{background:#dbeafe;color:#1d4ed8}
.feed-list .ago{margin-left:auto;color:var(--muted);font-size:.75rem}
/* Clickable feed rows (drop entries) — open the offer sheet on click */
.feed-list .feed-clickable{cursor:pointer;transition:background .15s ease}
.feed-list .feed-clickable:hover{background:var(--surface-2)}


/* ---------- 10. Sheet (offer details) ---------- */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#fff;border-radius:20px 20px 0 0;
  max-height:88vh;
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:transform .3s ease, opacity .2s ease, visibility 0s linear .3s;
  box-shadow:0 -20px 40px rgba(15,23,42,.2);
  display:flex;flex-direction:column;
}
.sheet.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transition:transform .3s ease, opacity .2s ease, visibility 0s;
}
@media (min-width:900px){
  .sheet{
    left:50%;right:auto;top:50%;bottom:auto;
    transform:translate(-50%,-50%) scale(.96);
    width:min(720px,94vw);
    border-radius:20px;max-height:84vh;
  }
  .sheet.open{transform:translate(-50%,-50%) scale(1)}
}
.sheet-head{
  padding:14px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border);
}
.sheet-head .grip{
  width:42px;height:5px;border-radius:999px;background:#cbd5e1;margin:0 auto;
}
@media (min-width:900px){.sheet-head .grip{display:none}}
.sheet-title{margin:0;font-size:1.05rem;font-weight:700}
.sheet-close{
  margin-left:auto;background:#f1f5f9;border:0;border-radius:6px;
  width:44px;height:44px;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;touch-action:manipulation;
}
.sheet-close:hover{background:#e2e8f0}
.sheet-close:active{background:#cbd5e1}
.sheet-body{padding:14px 14px 14px;overflow:auto}
.sheet-meal{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;padding-top:4px}
.sheet-meal img{
  width:72px;height:72px;border-radius:10px;object-fit:cover;
  border:1px solid var(--border);background:#f1f5f9;flex:0 0 auto;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.sheet-meal img:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(15,23,42,.18);border-color:#94a3b8}
@media (min-width:560px){.sheet-meal img{width:88px;height:88px}}
.sheet-meal .info{flex:1;min-width:160px}
.sheet-meal h4{margin:0 0 2px;font-size:.98rem}
.sheet-meal p{margin:0 0 6px;color:var(--muted);font-size:.8rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sheet-prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sheet-prices .now{font-size:1.25rem;font-weight:800;color:var(--primary)}
.sheet-prices .was{color:var(--muted);text-decoration:line-through;font-size:.85rem}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap}
.sheet-actions .btn{padding:8px 12px;font-size:.82rem}
.other-offers{margin-top:15px}
.other-offers h5{margin:0 0 11px;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.offer-strip{
  display:flex;gap:12px;overflow-x:auto;overflow-y:visible;
  padding:10px 2px 12px;scroll-snap-type:x mandatory;
  justify-content:safe center;
}
.offer-strip .o{
  width:216px;max-width:216px;flex:0 0 216px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:11px;padding:9px;cursor:pointer;scroll-snap-align:start;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.offer-strip .o:hover{transform:translateY(-4px);border-color:#94a3b8;box-shadow:0 9px 18px rgba(15,23,42,.13)}
.offer-strip .o.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(36,129,188,.2)}
.offer-strip .o img{width:100%;height:auto;aspect-ratio:1.4/1;object-fit:cover;border-radius:7px;background:#e2e8f0;display:block}
.offer-strip .o .n{font-size:.95rem;font-weight:700;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offer-strip .o .p{font-size:1.13rem;font-weight:800;color:var(--primary);margin-top:3px}


/* ---------- 11. Toast ---------- */
.toast{
  position:fixed;left:50%;top:80px;transform:translate(-50%,-20px);
  background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;
  box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:600;
  opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;z-index:200;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.success{background:#15803d}
.toast.warn{background:#b45309}


/* ---------- 12. Footer ---------- */
footer{
  max-width:1280px;margin:30px auto 100px;padding:24px 16px;color:var(--muted);font-size:.85rem;text-align:center;
}


/* ---------- 13. Helpers ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


/* ============================================================
   14. PHONE-ONLY 3-UP LAYOUT  (fizook-auctions-v2-mobile.html)
   Below 560px: bidders + held offers both render 3 per row,
   with the restaurant/vendor logo as the dominant visual.
   Laptop/desktop styles above are intentionally untouched.
   ============================================================ */
@media (max-width:559.98px){

  /* --- Bidders: 3 columns, logo-forward --- */
  .bidders{
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    padding:0 8px !important;
  }
  .bidder{
    border-radius:12px !important;
  }
  /* Stack head vertically with a big logo as the hero. Logo sits high in
     the card; minimal top padding so the image dominates. */
  .bidder .bidder-head{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:2px !important;
    padding:4px 4px 6px !important;
    background:#fff !important;
    border-bottom:0 !important;
  }
  .bidder .vendor-logo{
    width:110px !important;
    height:110px !important;
    max-width:100% !important;
    border-radius:14px !important;
    background:#fff !important;
    margin-top:0 !important;
  }
  .bidder .vendor-logo img{
    object-fit:contain !important;
    padding:2px !important;
  }
  .bidder .bidder-head > div{ width:100% !important; }
  .bidder .bidder-name{
    font-size:.78rem !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .bidder .bidder-sub{
    font-size:.65rem !important;
    margin-top:1px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Hide the noisy parts on phone — full detail is one tap away
     via the offer sheet (cards already wired to open it). */
  .bidder .bidder-body,
  .bidder .offer-meta,
  .bidder .bidder-actions{ display:none !important; }

  /* "Best deal" ribbon: shrink so it fits a 3-up tile */
  .bidder.best::after{
    font-size:.5rem !important;
    padding:2px 5px !important;
    top:4px !important;
    right:4px !important;
    letter-spacing:.5px !important;
    z-index:3 !important;
  }

  /* --- Held offers: 3 columns to match bidders row --- */
  .held-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
  }
  .held-card{
    min-height:0 !important;
    padding:8px !important;
    gap:4px !important;
  }
  .held-card .h-thumb{ aspect-ratio:1/1 !important; }
  .held-card .h-name{ font-size:.7rem !important; }
  .held-card .h-price{ font-size:.85rem !important; }
  .held-card .h-actions .btn{
    padding:9px 4px !important;
    font-size:.66rem !important;
    min-height:34px !important;
  }
  .held-card.empty{
    font-size:.7rem !important;
    min-height:120px !important;
  }
  .held-card.empty i{ font-size:1.1rem !important; }

  /* Tighten outer padding so 3 narrow cards aren't squeezed */
  .held{ padding:0 8px !important; }
}


/* ============================================================
   15. PHONE LANDSCAPE — 3 cols × 2 rows of FULL deal cards.
   Triggered when the device is in landscape AND the viewport
   height is short (typical phone landscape ≤ 500px tall).
   The portrait-phone overrides above don't apply here because
   landscape width exceeds 559.98px, so the full bidder body
   (meal thumb, price, actions) renders normally — we just
   force the column count and slim down a few sizes so three
   cards fit cleanly across.
   ============================================================ */
@media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
  .bidders{
    grid-template-columns:repeat(3,1fr) !important;
    gap:10px !important;
    padding:0 12px !important;
  }
  .bidder-head{padding:10px 12px !important}
  .bidder-body{padding:10px 12px !important;gap:10px !important}
  .bidder .meal-thumb{width:72px !important;height:72px !important}
  .bidder .meal-name{font-size:.85rem !important}
  .bidder .price-now{font-size:1.15rem !important}
  .bidder .price-was{font-size:.78rem !important}
  .bidder .trend{font-size:.7rem !important;padding:2px 6px !important}
  .bidder-actions{padding:0 12px 12px !important;gap:6px !important}
  .bidder-actions .btn{padding:8px 6px !important;font-size:.78rem !important}
  .offer-meta{padding:0 12px 10px !important;font-size:.72rem !important}

  /* All 6 held-offer cards on one row to match the bidder layout above. */
  .held{padding:0 12px !important}
  .held-grid{
    grid-template-columns:repeat(6,1fr) !important;
    gap:8px !important;
  }
  .held-card{
    min-height:0 !important;
    padding:6px !important;
    gap:4px !important;
  }
  .held-card .h-thumb{aspect-ratio:1/1 !important;border-radius:6px !important}
  .held-card .h-name{font-size:.7rem !important;line-height:1.1 !important}
  .held-card div[style*="muted"]{font-size:.6rem !important}
  .held-card .h-price{font-size:.85rem !important}
  .held-card .h-actions{gap:4px !important}
  .held-card .h-actions .btn{padding:5px 2px !important;font-size:.62rem !important}
  .held-card.empty{
    font-size:.62rem !important;
    min-height:90px !important;
  }
  .held-card.empty i{font-size:1rem !important}
}


/* ============================================================
   16. BEST DEAL pulse — applies at ALL screen sizes (phone/tablet/laptop)
   so the green glow looks identical regardless of viewport.
   ============================================================ */
@keyframes bestPulseRing{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2px rgba(34,197,94,.45) inset; }
  50%  { box-shadow:0 0 14px 6px rgba(34,197,94,.55), 0 0 0 3px rgba(34,197,94,.85) inset; }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2px rgba(34,197,94,.45) inset; }
}
@keyframes bestBgFlash{
  0%, 100% { background-color:#ffffff; }
  50%      { background-color:#dcfce7; }
}
.bidder.best{
  border-color:#22c55e !important;
  animation: bestPulseRing 1.1s ease-in-out infinite,
             bestBgFlash  1.1s ease-in-out infinite !important;
  will-change: box-shadow, background-color;
}
/* Keep the inner head transparent so the flash reads as one tile, all sizes */
.bidder.best .bidder-head{ background:transparent !important; }


/* ============================================================
   17. Linkable headline stats — only active after auction ends.
   Clicking opens that offer's detail sheet.
   ============================================================ */
.stat .v.linkable{
  cursor:pointer;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:filter .15s ease, transform .15s ease;
}
.stat .v.linkable:hover{
  filter:brightness(1.15);
  transform:translateY(-1px);
}
.stat .v.linkable:active{
  transform:translateY(0);
}