/* odds-cta — FAMILY 2: V4 / V5, the brand-fill CTA.
   Ported 2026-07-30 from Analysis page redesign/handover-cta.html §3A/§3B.
   Figma page «Odds CTA» node 8328:283129; re-verified against the Tip renditions
   8329:310515 (V5) and 8329:310619 (V4) on page Tips 8328:288198.

   Family 1 (.modd — V1/V2/V3) lives in component.css and shares NO CSS with this
   file, deliberately. Everything here is scoped under .bo so the two cannot collide.
   The one thing carried across is the @keyframes modd-shim in component.css, which
   the loading state below reuses — so component.css must load alongside this file.

   V4 .bodd--row  inline pill,  40px tall, fluid width: odd | hairline | wordmark
   V5 .bodd--col  stacked block, 100x68px fixed:        odd / hairline / wordmark

   NOT signed off. Family 2 is for review only — see component.json → status notes. */

.bo{--bo-ink:#FFFFFF;--bo-hair:rgba(255,255,255,.24);}

/* Two nested boxes, both load-bearing. The ONLY thing separating them is the inner
   drop-shadow, which is what reads as an engraved edge. Merge them and it goes flat. */
.bo .bodd{position:relative;display:flex;align-items:stretch;gap:2px;padding:4px;
  border-radius:12px;overflow:hidden;text-decoration:none;
  background:var(--bk,var(--fill));box-shadow:0 2px 0 0 rgba(0,0,0,.1);
  transition:filter .16s,box-shadow .16s,transform .16s;}

/* background:inherit keeps shell and inner in lockstep, so a new operator only
   ever needs ONE colour declared. */
.bo .bodd-in{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:2px;
  padding:4px;border-radius:8px;background:inherit;
  filter:drop-shadow(0 2px 7.5px rgba(0,0,0,.4));}

/* Roboto Condensed Bold 16/24, NOT the Roboto Mono of V1/V2/V3. Condensed is what
   lets a 5-char odd («12.50») hold the 24px row without shrinking. */
.bo .bodd-od{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:24px;padding:0 12px;
  font-family:'Roboto Condensed','Roboto Condensed Fallback',var(--body);
  font-size:16px;font-weight:700;line-height:24px;letter-spacing:0;
  color:var(--bo-ink);white-space:nowrap;}

/* The hairline takes ZERO layout space — in Figma it is a 0-height line with a 1px
   outset stroke, which is why the stacked block totals exactly 68px
   (8 shell + 8 inner + 24 odd + 2 gap + 0 line + 2 gap + 24 logo).
   Give it a real height:1px and every V5 becomes 69px and stops matching the frame. */
.bo .bodd-sep{flex:0 0 0;position:relative;}
.bo .bodd-sep::after{content:"";position:absolute;background:var(--bo-hair);}

.bo .bodd-bk{display:flex;align-items:center;justify-content:center;height:24px;}
/* 10px cap height matches the Figma marks (stoiximan 60x9, bet365 45.7x10).
   max-width + contain letterboxes the wide marks (pamestoixima-long) instead of
   blowing the row open. */
.bo .bodd-bk img{display:block;height:10px;width:auto;max-width:100%;object-fit:contain;}
/* EXCEPTION — plain exports whose aspect ratio is BELOW ~2.5 are stacked/icon marks,
   not wordmarks: plain-dark/interwetten.svg (1.77) and plain-dark/pamestoixima.svg
   (1.03). At 10px they render as an illegible speck. Measure it, don't eyeball it. */
.bo .bodd-bk.is-icon img{height:20px;}

/* ── V4 — inline pill, 40px tall. Width fluid: the odd is intrinsic and the logo
   cell takes the rest, so the wordmark centres in the space actually left over. ── */
.bo .bodd--row{flex-direction:row;width:100%;}
.bo .bodd--row .bodd-in{flex-direction:row;align-items:center;}
.bo .bodd--row .bodd-bk{flex:1 1 auto;min-width:0;}
.bo .bodd--row .bodd-sep{align-self:stretch;width:0;}
.bo .bodd--row .bodd-sep::after{top:0;bottom:0;left:0;width:1px;}

/* ── V5 — stacked block, 100x68px FIXED, no flex-grow — same rule as V1's 100px
   card: a 2-selection market must not stretch while a 3-selection market stays
   narrow. ── */
.bo .bodd--col{flex-direction:column;flex:0 0 auto;width:100px;}
.bo .bodd--col .bodd-in{flex-direction:column;}
.bo .bodd--col .bodd-od{width:100%;padding:0;}
.bo .bodd--col .bodd-sep{width:100%;}
.bo .bodd--col .bodd-sep::after{left:0;right:0;top:0;height:1px;}

/* ── Shine overlay. Present on the Tip renditions as «Shiny effect Mobile/Desktop»
   (blurred 2px white inset border behind an image mask) but NOT in the ART-378
   handover. The Figma mask is a raster asset that was not exported, so the sheen
   below is a gradient APPROXIMATION of it — treat the angle and stops as unverified.
   Opt in with .is-shine; the shell's overflow:hidden clips it, as in Figma. ── */
.bo .bodd.is-shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:2px solid #FFFFFF;border-radius:12px;filter:blur(3px);
  -webkit-mask-image:linear-gradient(115deg,transparent 0 30%,#000 45%,#000 55%,transparent 70%);
  mask-image:linear-gradient(115deg,transparent 0 30%,#000 45%,#000 55%,transparent 70%);}

/* ── Per-operator fill. ONE declaration per operator, on the shell; the inner box
   inherits it. Class name must match the logo filename exactly:
   bo-stoiximan <-> plain-light/stoiximan.svg. ── */
.bo .bo-stoiximan{--bk:#0055FF;}
.bo .bo-bet365{--bk:#027B5B;}
.bo .bo-fonbet{--bk:#D42B28;}
.bo .bo-betsson{--bk:#F26722;}
.bo .bo-sportingbet{--bk:#1E87C9;}
.bo .bo-vistabet{--bk:#F05722;}
.bo .bo-novibet{--bk:#303540;}
.bo .bo-netbet{--bk:#333743;}
.bo .bo-n1casino{--bk:#212121;}
.bo .bo-bwin{--bk:#000000;}
.bo .bo-pamestoixima-long{--bk:#B92128;}
.bo .bo-elabet{background:linear-gradient(180deg,#11143E 0%,#142169 54.7%,#172B89 100%);}
.bo .bo-elabet .bodd-in{background:#142169;}

/* Light fills need dark ink AND a plain-dark logo src — a white mark on #FFFFFF
   disappears. Swapping the class alone is not enough. */
.bo .bodd.is-lt{--bo-ink:#1A1A1A;--bo-hair:rgba(26,26,26,.18);
  box-shadow:0 2px 0 0 rgba(0,0,0,.1),inset 0 0 0 1px var(--line);}
.bo .bo-interwetten{--bk:#FFD200;}
.bo .bo-winmasters,.bo .bo-winmasters-2,.bo .bo-pamestoixima{--bk:#FFFFFF;}

/* ── States. Pressed is translateY + collapsed bevel, NOT scale() — scaling a
   bevelled surface reads as a glitch. The fill is never recoloured. ── */
.bo .bodd:hover{box-shadow:0 3px 0 0 rgba(0,0,0,.14);}
.bo .bodd:hover .bodd-in{filter:drop-shadow(0 2px 7.5px rgba(0,0,0,.4)) brightness(1.08);}
.bo .bodd:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(253,58,1,.40);}
.bo .bodd:active{transform:translateY(1px);box-shadow:0 1px 0 0 rgba(0,0,0,.1);}

.bo .bodd.is-loading{pointer-events:none;}
.bo .bodd.is-loading .bodd-od{color:transparent;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,.18) 25%,rgba(255,255,255,.38) 37%,rgba(255,255,255,.18) 63%);
  background-size:400% 100%;animation:modd-shim 1.4s ease-in-out infinite;}

.bo .bodd.is-susp{cursor:not-allowed;box-shadow:none;}
.bo .bodd.is-susp .bodd-in{filter:grayscale(1);opacity:.55;}
.bo .bodd.is-susp:hover .bodd-in{filter:grayscale(1);opacity:.55;}

@media (prefers-reduced-motion:reduce){
  .bo .bodd{transition:none;}
  .bo .bodd.is-loading .bodd-od{animation:none;background:rgba(255,255,255,.2);}
}