/* ── Store opening countdowns ──────────────────────────────────────────────────
 * Shared by the portal (dock + popup) and the sign-in page (popup only).
 * Built on the app's existing tokens so it inherits both themes for free.
 * ------------------------------------------------------------------------- */

.wo-root{position:relative;z-index:1400}

/* Docked card — bottom right, clear of the sidebar and the topbar bell.
   340px (was 330px pre-redesign, 460px in the first pass at the two-panel
   card — too big for a corner widget; back down near the original footprint,
   with the card's own spacing shrunk to fit it, 2026-09-23). */
.wo-dock{position:fixed;right:18px;bottom:18px;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;z-index:1400}
.wo-dockh{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#fff;
  background:linear-gradient(90deg,var(--brand-blue,#2776ea),var(--primary-600,#1d4ed8))}
.wo-dockh .wo-t{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.wo-clock{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-variant-numeric:tabular-nums;opacity:.95;padding-right:8px;
  border-right:1px solid rgba(255,255,255,.35)}
.wo-x{background:rgba(255,255,255,.16);border:0;color:#fff;cursor:pointer;width:20px;height:20px;
  border-radius:5px;font-size:13px;line-height:1;display:grid;place-items:center;font-family:inherit;padding:0}
.wo-x:hover{background:rgba(255,255,255,.32)}
.wo-dockb{padding:12px;max-height:min(60vh,420px);overflow-y:auto}
.wo-none{text-align:center;color:var(--muted);font-size:12.5px;padding:10px 4px}

/* Single-panel card (2026-09-24 simplification) — Sweden time and the
   separate "Opens in..." sentence are gone; the IST opening date/time is now
   the card's primary content, store name secondary, tiles smallest of the
   three. Card height follows content naturally now that there's only one
   panel — no compensating padding added for the removed section. */
.wo-card+.wo-card{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.wo-card-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.wo-card-name{font-weight:700;font-size:14.5px;color:var(--text)}
.wo-card-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  padding:2px 9px;border-radius:999px}
.wo-card-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.wo-badge-warn{background:var(--warning-bg);color:var(--warning)}
.wo-badge-ok{background:var(--success-bg);color:var(--success)}
.wo-card-panels{display:flex;flex-direction:column}
.wo-panel{border-radius:10px;border:1px solid var(--border);padding:10px 12px;
  display:flex;flex-direction:column;gap:7px}
.wo-panel-ist{background:var(--success-bg);border-color:var(--success)}
.wo-panel-flag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* The primary information in the card — bigger and bolder than the store
   name above it and the countdown tiles below it, per Velraj's hierarchy. */
.wo-panel-time{font-size:19px;font-weight:800;color:var(--text);line-height:1.25}
.wo-tiles{display:flex;gap:5px;margin-top:1px}
.wo-tile{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;
  background:var(--surface);border:1px solid var(--success);border-radius:7px;padding:5px 2px}
.wo-tile b{font-size:13px;font-weight:700;color:var(--success);line-height:1.1;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wo-tile s{text-decoration:none;font-size:7px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
.wo-tbcnote{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.wo-tbcnote-warn{color:var(--warning)}
.wo-link{background:none;border:0;color:var(--primary);font-weight:600;cursor:pointer;
  font-size:12px;padding:0;margin-left:auto;font-family:inherit;text-decoration:underline}

/* Minimised pill. */
.wo-pill{position:fixed;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:8px 15px;
  box-shadow:var(--shadow);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text);
  z-index:1400;font-family:inherit;max-width:calc(100vw - 24px)}
.wo-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-green,#76ea27);flex:none;
  box-shadow:0 0 0 3px rgba(118,234,39,.25)}

/* Countdown digits. Tabular figures so the width never jitters as they tick. */
.wo-cd{display:inline-flex;gap:6px;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wo-cd u{text-decoration:none;display:flex;flex-direction:column;align-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 8px;min-width:44px}
.wo-cd b{font-size:18px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.wo-cd s{text-decoration:none;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.wo-cd.wo-sm u{padding:3px 6px;min-width:34px}
.wo-cd.wo-sm b{font-size:14px}
.wo-cd.wo-sm s{font-size:8.5px}
.wo-live{font-size:12px;font-weight:700;color:var(--success);background:var(--success-bg);
  padding:3px 10px;border-radius:999px}
.wo-tbc{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);padding:2px 9px;border-radius:999px}

.wo-tag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;letter-spacing:.01em}
.wo-tag.wo-ok{background:var(--success-bg);color:var(--success)}
.wo-tag.wo-warn{background:var(--warning-bg);color:var(--warning)}
.wo-tag.wo-idle{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

/* Popup. */
.wo-scrim{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;
  padding:18px;z-index:1500;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.wo-modal{width:100%;max-width:420px;background:var(--surface);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--border);
  max-height:calc(100vh - 36px);display:flex;flex-direction:column}
.wo-mh{padding:16px 18px;color:#fff;
  background:linear-gradient(135deg,var(--brand-blue,#2776ea),var(--primary-600,#1d4ed8))}
.wo-mh h3{margin:0;font-size:16px}
.wo-mh p{margin:3px 0 0;font-size:12.5px;opacity:.92}
.wo-mb{padding:16px 18px;display:flex;flex-direction:column;gap:11px;overflow-y:auto}
.wo-mf{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;
  justify-content:flex-end;background:var(--surface-2);flex-wrap:wrap}
.wo-item{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2)}
.wo-item.wo-dash{border-style:dashed}
.wo-ig{flex:1;min-width:0}
.wo-in{font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wo-im{font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wo-b{border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-family:inherit}
.wo-b.wo-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.wo-b.wo-ghost{background:transparent;border-color:transparent;color:var(--text-2);margin-right:auto}
.wo-dock :focus-visible,.wo-modal :focus-visible,.wo-pill:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* The mobile nav drawer slides over the page, and the dock is fixed on top of
   everything — so it sat ON the drawer and swallowed taps meant for the nav
   links underneath. The responsive audit caught this as three click timeouts.
   While the drawer is open the countdown is not what the user is reaching for. */
body.nav-open .wo-dock,
body.nav-open .wo-pill,
body.nav-open .wo-scrim{display:none}

/* Phones: the dock would cover the content and the bottom nav, so it becomes a
   full-width strip pinned above the safe area instead of a floating card. */
@media (max-width:640px){
  .wo-dock{right:8px;left:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto}
  .wo-pill{right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .wo-cd u{min-width:38px}
  .wo-x{width:30px;height:30px;font-size:16px}
  .wo-mf{justify-content:stretch}
  .wo-b{flex:1}
  .wo-b.wo-ghost{margin-right:0;flex-basis:100%;order:3}
}
@media (prefers-reduced-motion:reduce){.wo-scrim{backdrop-filter:none}}