/* Vendored from the ART-379 Form Bubbles handover (v1.5.0), unmodified.
 * Source: https://foxbet-form-bubbles.pages.dev/ — the spec calls this file
 * GENERATED · DO NOT EDIT, so zestama token mapping lives in globals.css
 * (.formdots scope) rather than in here. Re-sync from the handover to update.
 */

/* ═══ GENERATED from components/form-bubbles/component.css v1.5.0 · DO NOT EDIT ═══
   Edit components/form-bubbles/component.css and re-sync. ═══ */
/* form-bubbles v1.0.0 — recent-form bubbles (Ν/Ι/Η/?)
   Ported verbatim from foxbet-responsive.html. Tokens come from tokens/tokens.css;
   this file declares none. Variants: [data-variant="mobile"|"desktop"] on .formdots. */

/* ── shared base ── */
.formdots{display:flex;gap:0;position:relative;}
.formdots .fd{width:25px;height:25px;border:2px solid #fff;border-radius:50%;position:relative;
  color:#fff;font-size:12px;font-weight:700;font-family:var(--num);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease;}
.formdots .fd:not(:first-child){margin-left:-8px;}
.formdots .fd.fw{background:linear-gradient(135deg,#039855,var(--win));}
.formdots .fd.fdr{background:#999999;}
.formdots .fd.fl{background:linear-gradient(135deg,var(--err),var(--errdark));}
.formdots .fd.fq{background:var(--fill);color:#808080;}
.formdots .fd:active{transform:scale(.85);}
/* latest PLAYED match underlined; a trailing "?" is not a result */
.formdots .fd:last-child::after{content:"";position:absolute;left:18%;right:18%;bottom:-5px;
  height:2.5px;border-radius:4px;background:var(--ink);}
.formdots .fd.fq:last-child::after{display:none;}
.formdots:has(.fq) .fd:nth-last-child(2)::after{content:"";position:absolute;left:18%;right:18%;
  bottom:-5px;height:2.5px;border-radius:4px;background:var(--ink);}
@media (prefers-reduced-motion:reduce){ .formdots .fd{transition:none;} }

/* ── variant: desktop — hero rendition, dark surface ── */
.formdots[data-variant="desktop"] .fd{cursor:pointer;}
.formdots[data-variant="desktop"] .fd:hover{transform:translateY(-3px);z-index:8;}
.formdots[data-variant="desktop"] .fd:last-child::after,
.formdots[data-variant="desktop"]:has(.fq) .fd:nth-last-child(2)::after{background:#fff;}

/* ── variant: mobile — Βαθμολογία rendition, light surface ── */
/* ── size: sm — compact rendition ──────────────────────────────────────────────────
   Independent of `data-variant`, like `data-sport`: any rendition can be compact.
   Added 1.5.0 for the analysis-page hero, where at phone widths the 25px bubbles crowded
   the team names beside them. The border thins with the circle (2px on a 20px bubble reads
   as a ring, not an outline) and the overlap tightens to keep the same visual density.
   THE CONSUMER DECLARES IT. The component does not switch on viewport — if you want it only
   on phones, swap the attribute (or scope an override) in your own stylesheet; the analysis
   page does the latter inside `.heromatch`. */
.formdots[data-size="sm"] .fd{width:20px;height:20px;border-width:1.5px;font-size:10.5px;}
.formdots[data-size="sm"] .fd:not(:first-child){margin-left:-6px;}
.formdots[data-size="sm"] .fd:last-child::after,
.formdots[data-size="sm"]:has(.fq) .fd:nth-last-child(2)::after{bottom:-4px;height:2px;}

/* ── variant: mobile — Βαθμολογία rendition, light surface ── */
.formdots[data-variant="mobile"]{justify-content:center;}

/* ── desktop detail view: rich popover ── */
.fpop{position:absolute;top:calc(100% + 11px);z-index:50;width:196px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 12px;text-align:left;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55);animation:fpopin .14s ease both;}
@keyframes fpopin{from{opacity:0;transform:translateY(-4px);}}
.fpop.above{top:auto;bottom:calc(100% + 11px);}
.fpop.l{left:-4px;} .fpop.r{right:-4px;}
.fpop::after{content:"";position:absolute;bottom:100%;border:6px solid transparent;border-bottom-color:#fff;}
.fpop.above::after{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:#fff;}
.fpop.l::after{left:16px;} .fpop.r::after{right:16px;}
.fpop.fixed{position:fixed;bottom:auto;}
.fpop.fixed.above{bottom:auto;}
.fpop-lbl{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--acc);margin-bottom:4px;}
.fpop-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fpop-opp{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fpop-score{font-family:var(--num);font-size:14px;font-weight:700;font-style:italic;color:var(--ink);flex:0 0 auto;}
.fpop-res{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;font-weight:700;color:var(--mut);}
.fpop-cd{display:inline-flex;align-items:center;gap:4px;}
.fpop-cd i{width:7px;height:10px;border-radius:4px;display:inline-block;}
.fpop-tl{position:relative;height:19px;margin-top:12px;}
.fpop-tl .ln{position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--line);border-radius:4px;}
.fpop-tl .ev{position:absolute;top:3px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;
  transform:translateX(-50%);box-shadow:0 1px 3px rgba(0,0,0,.25);}
.fpop-tl .mn{position:absolute;bottom:-3px;font-family:var(--num);font-size:12px;font-weight:700;color:var(--mut);}

/* ── mobile detail view: modal ── */
/* position:FIXED, not absolute (fixed 2026-07-29). The prototype used absolute because it
   appended the modal into .phone — a positioned, viewport-sized device frame. Mounted on
   document.body, absolute resolves against the document, so inset:0 pinned the modal to the
   FIRST viewport: scroll down, tap a bubble, and it opened off-screen above the fold.
   A scrim overlay must be fixed to the viewport, independent of scroll and of the mount node. */
.fdmodal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:20px 16px;background:rgba(26,26,26,.55);}
.fdmodal-card{width:100%;max-width:360px;max-height:80%;overflow-y:auto;background:#fff;
  border-radius:16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.6);}
.fdmodal-hd{display:flex;align-items:center;gap:8px;padding:12px 12px;background:var(--fill);
  border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink);}
.fdmodal-hd img{width:22px;height:15px;border-radius:4px;object-fit:cover;box-shadow:0 1px 2px rgba(0,0,0,.25);}
/* interop: .slt-crest is a consumer-page crest element the modal may receive verbatim */
.fdmodal-hd .slt-crest{flex:0 0 auto;}
/* «Φόρμα» stays sentence case (Vasilis, 2026-07-29). The prototype uppercased it via
   text-transform, which rendered «ΦΟΡΜΑ»; the tracking existed only to support the caps,
   so it goes with it. Deliberate divergence from the verbatim port — see CHANGELOG. */
.fdmodal-hd .sub{font-size:12px;font-weight:700;letter-spacing:0;color:var(--mut);}
.fdmodal-x{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--mut);cursor:pointer;padding:0;flex:0 0 auto;}
.fdmodal-x svg{width:13px;height:13px;}

/* ── match rows, shared by the modal (fdacc- prefix retained: see spec) ── */
.fdacc-row{display:flex;align-items:center;gap:8px;padding:8px 12px;}
.fdacc-row + .fdacc-row{border-top:1px solid var(--fill);}
.fdacc-date{flex:0 0 auto;width:52px;font-size:12px;font-weight:600;color:var(--mut);}
.fdacc-match{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:12px;
  font-weight:600;color:var(--ink);}
.fdacc-match .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fdacc-match .t.l{text-align:right;}
.fdacc-match .t.us{font-weight:700;}
.fdacc-score{flex:0 0 auto;font-family:var(--num);font-size:12px;font-weight:700;font-style:italic;
  color:var(--acc);background:#FFEBE6;border:1px solid #FFD8CC;border-radius:4px;padding:4px 8px;}

/* ══════════════════════════════════════════════════════════════════════════════
   BASKETBALL — data-sport="basket" on .formdots (default is football).
   Same bubbles, sport-specific detail. Basketball has no draw, so only .fw/.fl
   occur. Reference: "Form Popup Mobile.html" options 3a (mobile) and 5a (desktop).
   COLOURS ARE DESIGN-SYSTEM, NOT the mockup's #7A67E8 purple — see CHANGELOG.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── desktop: the popover carries NO per-period breakdown (Vasilis, 2026-07-30).
      It shows venue · opponent, score, result + margin, and the top performer — so it needs
      no extra width and keeps the standard 196px `.fpop`. The `.fpop-qg` quarter grid that
      option 5a specified, and the `.fpop.is-basket{width:240px}` that existed only to fit it,
      were both removed. `.is-basket` is still set on the popover as a hook, with no styles.
      Per-period detail now lives ONLY in the mobile modal (`.fdacc-q`, option 3a). ── */
.fpop-mvp{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:12px;font-weight:500;color:var(--mut);}

/* ── mobile: the tapped row expands to a quarter-by-quarter bar grid ── */
.fdacc-row.is-open{background:var(--fill);}
.fdacc-res{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;font-size:12px;font-weight:600;color:var(--mut);}
.fdacc-res .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--win);}
.fdacc-res.lost .dot{background:var(--err);}
.fdacc-q{display:flex;gap:8px;padding:0 12px 12px;}
.fdq{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;}
.fdq-d{font-family:var(--num);font-size:12px;font-weight:700;line-height:1;
  padding:4px 4px;border-radius:4px;background:#D1FADF;color:var(--win);}
.fdq.neg .fdq-d{background:#FEE4E2;color:var(--err);}
.fdq-bars{display:flex;align-items:flex-end;gap:4px;height:56px;}
.fdq-b{width:14px;border-radius:4px 4px 0 0;background:var(--acc);}
.fdq-b.opp{background:var(--line);}
.fdq-nums{font-family:var(--num);font-size:12px;font-weight:500;color:var(--ink);}
.fdq-nums i{font-style:normal;color:var(--mut);}
.fdq-lbl{font-size:12px;font-weight:600;color:var(--mut);}

/* ── mobile FOOTBALL: the tapped row expands to the 0–90′ goal/card timeline.
      Reference option 2b. Goals are circles (ours var(--win), theirs var(--err), as 2b);
      cards are small rectangles (yellow #FDB022 / red var(--err)) so a red card is never
      confused with a goal — 2b's data had no cards to disambiguate. ── */
.fdacc-res.drew .dot{background:#999999;}
.fdacc-tl{padding:0 12px 12px;}
.fdacc-track{position:relative;height:16px;margin:0 0 4px;}
.fdacc-track .rail{position:absolute;left:0;right:0;top:6px;height:3px;border-radius:2px;
  background:var(--line);}
.fdacc-track .ev{position:absolute;top:1px;width:14px;height:14px;border-radius:50%;
  transform:translateX(-50%);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.fdacc-track .ev.card{width:9px;height:13px;border-radius:3px;top:2px;}
.fdacc-ax{display:flex;justify-content:space-between;font-family:var(--num);font-size:12px;
  font-weight:500;color:var(--mut);}
.fdacc-evs{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.fdacc-evs span{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-family:var(--num);font-size:12px;
  font-weight:600;color:var(--ink);}
.fdacc-evs i{width:6px;height:6px;border-radius:50%;flex:0 0 auto;}
.fdacc-evs i.card{width:5px;height:8px;border-radius:2px;}