/* wire3-shared — components/exit-offer.css
   Content styling for the EXIT-INTENT offer modal: a split dialog (branded streaming-credit
   card on the left, the pitch + CTA on the right). Sits on top of the components/modal.css
   shell; trigger logic is js/exit-intent.js. Token-themed (outward tokens). OPT-IN.

   Brand rules baked in: the offer is a STREAMING CREDIT (not a gift card) and the CTA is
   "Check availability" (Wire 3 is Florida-only). Amount/label
   come from content/plans.json `promo` (the host fills .xo-amt / the card chips).

   Markup: see blocks/exit-offer.html. Pairs with .w3-modal / .w3-modal-dialog.is-split. */

/* ---- Left media panel: the streaming-credit "card" ---- */
.w3-modal-media.xo-media { background:radial-gradient(120% 120% at 20% 0%, #143659 0%, #0B1E3A 70%); }
.xo-card { position:relative; width:100%; max-width:280px; aspect-ratio:1.6/1; border-radius:18px;
  padding:20px 22px; display:flex; flex-direction:column; justify-content:space-between; color:#fff;
  background:linear-gradient(150deg,#1C3F6E 0%,#065456 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); overflow:hidden; }
.xo-card::after { content:""; position:absolute; top:-50%; right:-30%; width:70%; height:160%;
  background:radial-gradient(circle, rgba(125,196,0,.28), transparent 70%); pointer-events:none; }
.xo-card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.xo-card-brand { font-family:var(--font-head); font-weight:800; font-size:1.05em; letter-spacing:-.02em; }
.xo-card-brand b { color:var(--green); }
.xo-card-tag { font-family:var(--font-head); font-weight:700; font-size:.6em; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.28); border-radius:20px; padding:3px 9px; }
.xo-card-amt { position:relative; z-index:1; }
.xo-card-amt .xo-amt { display:block; font-family:var(--font-head); font-weight:800; font-size:2.7em; line-height:1; letter-spacing:-.03em; }
.xo-card-amt .xo-amt-label { display:block; color:rgba(255,255,255,.78); font-size:.82em; font-weight:600; margin-top:4px; }
.xo-card-chips { display:flex; flex-wrap:wrap; gap:5px; position:relative; z-index:1; }
.xo-chip { font-family:var(--font-head); font-weight:800; font-size:.56em; letter-spacing:.04em;
  color:rgba(255,255,255,.92); background:rgba(255,255,255,.12); border-radius:5px; padding:3px 7px; }

/* ---- Right body panel: the pitch ---- */
/* #3F6B00 not --green-dk: small bold caps need 4.5:1 and --green-dk lands ~3.5 on the
   dialog's light greys; this is the same accessible green tier as elsewhere on light. */
.xo-eyebrow { display:inline-flex; align-items:center; gap:7px; color:#3F6B00;
  font-family:var(--font-head); font-weight:700; font-size:.76em; letter-spacing:.12em; text-transform:uppercase; }
.xo-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(125,196,0,.18); }
.xo-title { color:var(--navy); font-family:var(--font-head); font-weight:800; font-size:1.78em; line-height:1.1;
  letter-spacing:-.025em; margin:12px 0 10px; text-wrap:balance; }
.xo-sub { color:var(--grey-dk); font-size:1.02em; line-height:1.5; }
.xo-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:22px; }
.xo-actions .btn { width:100%; }
.xo-dismiss { background:none; border:0; padding:2px 0; cursor:pointer;
  color:var(--grey-dk); font-family:var(--font-head); font-weight:600; font-size:.92em; text-decoration:underline; text-underline-offset:3px; }
.xo-dismiss:hover { color:var(--navy); }
.xo-fine { color:var(--grey-dk); font-size:.74em; line-height:1.5; margin-top:18px; }   /* grey-dk not -mid: fine print at .74em needs the 4.5:1 tier */
.xo-fine a { color:var(--grey-dk); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:680px){
  .w3-modal-media.xo-media { padding:24px; }
  .xo-card { max-width:240px; }
  .xo-title { font-size:1.5em; }
}