/* ============================================================================
   GetWheelSpinner — Multi Wheel promotion + transfer styles (v7.1.0)
   Loaded ONLY on the five transfer source pages and on /multi-wheel-spinner/.
   Never loaded sitewide, so ordinary tool pages carry no extra weight.

   Visual language follows the site's existing cross-tool CTA (.cp-cta/.sw-cta):
   amber tint, amber hairline, amber label. Contrast is measured, never
   white-on-amber:
     .mw-cta      light #92400E on #FEF5E7 = 6.57:1   dark #F59E0B on #1F160D = 9.0:1+
     .mw-flag-btn light #7C2D12 on #FEF1DD = 8.42:1   dark #FCD34D on #2D1F0D = 11.07:1

   Every html[data-theme="light"] override is declared AFTER the rule it
   overrides and restates each property it needs — the same cascade discipline
   that the v6.9.2 primary-button defect taught, guarded by tests.
   ============================================================================ */

/* ---- transfer CTA on single-wheel pages ---------------------------------- */
.mw-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.32);
  border-radius:var(--radius-sm);
  padding:13px 18px;margin:18px 0;
  font-size:14.5px;font-weight:600;color:var(--amber);
  text-align:center;text-decoration:none;
  transition:all .16s;
}
.mw-cta:hover{background:rgba(245,158,11,.17);border-color:rgba(245,158,11,.48);transform:translateY(-1px)}
.mw-cta:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
html[data-theme="light"] .mw-cta{color:#92400E;border-color:rgba(180,83,9,.38)}
html[data-theme="light"] .mw-cta:hover{border-color:#B45309;color:#7C2D12}
html[data-theme="light"] .mw-cta:focus-visible{outline:3px solid #B45309}

/* ---- homepage flagship block --------------------------------------------- */
/* Deliberately quieter than the homepage wheel itself: no gradient fill, no
   motion. It reads as a featured secondary tool, not a competing hero. */
.mw-flagship{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(245,158,11,.13),rgba(239,68,68,.07));
  border:1px solid rgba(245,158,11,.30);
  border-radius:var(--radius);
  padding:22px 26px;margin:26px 0;
}
.mw-flag-copy{min-width:0;flex:1 1 300px}
.mw-flag-title{
  margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em;
  color:var(--text);
}
.mw-flag-sub{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);
  overflow-wrap:anywhere;
}
.mw-flag-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 24px;flex:0 0 auto;
  background:rgba(245,158,11,.16);
  border:2px solid rgba(245,158,11,.55);
  border-radius:999px;
  font-size:15px;font-weight:700;color:#FCD34D;
  text-decoration:none;white-space:nowrap;
  transition:all .16s;
}
.mw-flag-btn:hover{
  background:rgba(245,158,11,.26);border-color:rgba(245,158,11,.85);
  color:#FDE68A;transform:translateY(-1px);
}
.mw-flag-btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

html[data-theme="light"] .mw-flagship{
  background:linear-gradient(135deg,rgba(245,158,11,.11),rgba(239,68,68,.05));
  border-color:rgba(180,83,9,.30);
}
html[data-theme="light"] .mw-flag-title{color:#0F172A}
html[data-theme="light"] .mw-flag-sub{color:#334155}
html[data-theme="light"] .mw-flag-btn{
  background:rgba(245,158,11,.14);border-color:#B45309;color:#7C2D12;
}
html[data-theme="light"] .mw-flag-btn:hover{
  background:rgba(245,158,11,.24);border-color:#9A3412;color:#7C2D12;
}
html[data-theme="light"] .mw-flag-btn:focus-visible{outline:3px solid #B45309}

/* ---- import confirmation on /multi-wheel-spinner/ ------------------------- */
/* Plain text only. Carries NO role/aria-live: the page already has exactly one
   polite region (#mw-live) and multi-wheel-import.js routes announcements
   through it, so a screen reader never hears the message twice. */
.mw-import-notice{
  margin:0 0 16px;padding:11px 15px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.28);
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;color:var(--amber);
  overflow-wrap:anywhere;min-width:0;
}
.mw-import-notice[hidden]{display:none}
.mw-import-notice-warn{
  background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30);color:#FCA5A5;
}
html[data-theme="light"] .mw-import-notice{color:#92400E;border-color:rgba(180,83,9,.34)}
html[data-theme="light"] .mw-import-notice-warn{color:#B91C1C;border-color:rgba(185,28,28,.32)}

/* ---- phones -------------------------------------------------------------- */
@media(max-width:600px){
  .mw-flagship{flex-direction:column;align-items:stretch;text-align:center;padding:20px}
  .mw-flag-btn{width:100%}
  .mw-cta{font-size:14px;padding:13px 14px}
}

/* ---- reduced motion ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .mw-cta,.mw-flag-btn{transition:none}
  .mw-cta:hover,.mw-flag-btn:hover{transform:none}
}