/* ==========================================================================
   bw-force.css — pure BLACK & WHITE force theme for esimgomobile.com
   User directive 2026-10-06: every text color -> white; all buttons,
   backgrounds and backdrops -> black. Loaded LAST on every page so it wins.
   Every declaration carries !important to beat linked CSS, <style> blocks
   and inline style="" attributes (non-important).
   Photos (<img>, <video>, background-image:url()) are intentionally kept.
   ========================================================================== */

/* --- root canvas -------------------------------------------------------- */
/* NOTE (2026-10-07): the body background-image kill below applies ONLY to
   pages WITHOUT a perpage photographic backdrop (<style data-perpage-bg> in
   <head>). 2741/2742 perpage pages (all country pages, tools, blog, etc.)
   carry a dark-scrimmed photographic BODY backdrop as their hero surface —
   e.g. /uk/ has no .page-hero element at all, its photo lives on body.
   Killing body's background-image site-wide (as this rule did) left those
   pages as flat black slabs, breaking the photographic-uniqueness bar.
   bw-force loads AFTER the perpage <style>, and :has() keeps the kill on
   non-perpage pages so the black theme still wins there. */
html,
html body,
body {
  background-color: #000 !important;
  color: #fff !important;
}
html:not(:has(head > style[data-perpage-bg])) body {
  background-image: none !important;
}

/* --- neutralize semantic-green (--live) -> white, site-wide ----------------
   style.css defines --live: #2E9E63 (green) used for "live" dots, step
   badges (.ms-tl b), checkmarks (::before), eyebrows, matrix .yes marks.
   The force theme requires white text / black backgrounds everywhere, so the
   variable is overridden with !important at :root (loaded last, wins). */
:root {
  --live: #fff !important;
}

/* --- ALL text -> white -------------------------------------------------- */
body, p, h1, h2, h3, h4, h5, h6,
span, a, li, dt, dd, td, th, label,
figcaption, blockquote, q, cite, em, strong, b, i, u, s, small,
sub, sup, mark, code, pre, kbd, samp, var, output, legend, summary,
caption, abbr, time, address, div, section, article, aside,
header, footer, nav, main, figure, ul, ol, dl, table, form, fieldset {
  color: #fff !important;
}

/* --- ALL structural backgrounds -> black (photos via url() stay) -------- */
/* NOTE: inline text elements (b, strong, em, i, ...) are included because
   pill/badge-style components (e.g. .ms-tl b step badges) paint colored
   backgrounds on them that would otherwise leak through. */
div, section, article, aside, header, footer, nav, main, figure,
table, caption, thead, tbody, tfoot, tr, td, th, ul, ol, dl, dd,
form, fieldset, blockquote, pre, code, details, summary, dialog,
a, span, li, p, h1, h2, h3, h4, h5, h6,
b, strong, em, i, small, sub, sup, abbr, time, q, cite, dfn, var, samp, kbd {
  background-color: #000 !important;
}

/* --- photographic surfaces: text sits ON the photo, no black bars ------
   .page-hero / .xp / .xp-cta-box / .pa-beat carry photographic backgrounds
   (dark-scrimmed url() photos = the allowed exception). The universal
   black-bg kill above paints opaque black rectangles behind their headings
   and paragraphs, veiling the photo. These exceptions restore transparent
   text backgrounds so white text reads directly on the darkened photo.
   (Pill badges like .eyebrow / .badge-launch keep their black pill bg.) */
.page-hero h1, .page-hero h2, .page-hero p,
.page-hero .wrap, .page-hero .mw, .page-hero .mwi, .page-hero .grad-text,
.page-hero .hero-rotator,
/* word-reveal headline spans (tools.js): the universal span black-bg kill
   paints an opaque black rectangle behind every revealed word (.w/.wi),
   veiling the photo — verified live 2026-10-07 on 17 tool hero H1s. */
.page-hero .word-reveal span,
.xp h2, .xp p, .xp .wrap, .xp .xp-eyebrow,
.xp-cta-box h2, .xp-cta-box p,
.pa-beat h2, .pa-beat p, .pa-beat .pa-kicker, .pa-beat .pa-kicker span,
/* photographic CTA bands (waitlist/cta/dev/agent): same treatment — the
   universal kill paints opaque black slabs behind their headings and
   paragraphs, veiling the scrimmed photo (found 2026-10-08 bw-verify on
   /tools/check-device-compatibility/: "Be first in line." h2 + p rendered
   as black boxes over the desert photo). */
.waitlist-band h2, .waitlist-band p,
.cta-band h2, .cta-band p,
.dev-band h2, .dev-band p,
.agent-band h2, .agent-band p,
.waitlist-band .word-reveal span,
.cta-band .word-reveal span,
.dev-band .word-reveal span,
.agent-band .word-reveal span {
  background-color: transparent !important;
}

/* --- perpage photographic BODY surfaces: keep the photo visible --------
   Pages carrying <style data-perpage-bg> use the BODY itself as a photographic
   surface (dark-scrimmed photo; all 195 country pages, most tools/blog pages:
   2741/2742 of them). The universal black-bg kill above paints `main` and the
   prose sitting directly on the body photo opaque black, veiling the photo
   entirely (found 2026-10-07: /uk/ rendered as a flat black slab). style.css
   never set a background on main — transparent is the original design.
   Cards, figures, dashboards and photographic sections (.xp/.pp/...) keep
   their own surfaces; only the top-level wrapper + direct prose go clear.
   NOTE: GSAP ScrollSmoother wraps ALL page content in #gsap-smooth-wrapper
   (position:fixed inset:0, full viewport) > #gsap-smooth-content — both are
   divs, so the universal kill paints them opaque black and they veil the
   body photo even with main transparent. They must go clear too. */
html:has(head > style[data-perpage-bg]) #gsap-smooth-wrapper,
html:has(head > style[data-perpage-bg]) #gsap-smooth-content,
html:has(head > style[data-perpage-bg]) main,
html:has(head > style[data-perpage-bg]) main > h1,
html:has(head > style[data-perpage-bg]) main > h2,
html:has(head > style[data-perpage-bg]) main > p,
html:has(head > style[data-perpage-bg]) main > .wrap,
/* 2026-10-08 (upgrade-audit): top-level hero/content sections in main have no
   slot photo of their own (.cov-hero, header.blog-hero, plain .block, ...) but
   the universal kill paints them opaque black, veiling the BODY photographic
   backdrop the perpage style assigns (verified live: /coverage/ hero rendered
   as a flat black slab, body photo bg35211347.jpg fully veiled). Sections that
   DO carry a slot photo (.pp, .xp, .block.dark, .page-hero) keep it — this
   rule only clears background-color, never background-image. Specificity
   (0,1,5) beats the universal kill (0,0,1); mirrors the existing idiom. */
html:has(head > style[data-perpage-bg]) main > section,
html:has(head > style[data-perpage-bg]) main > header,
html:has(head > style[data-perpage-bg]) main > article {
  background-color: transparent !important;
}

/* --- buttons / CTAs -> black bg, white text, white border --------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn,
[role="button"] {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
a.btn:hover,
[role="button"]:hover {
  background-color: #111 !important;
  color: #fff !important;
}

/* --- form fields -> black ---------------------------------------------- */
input, select, textarea {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}
select option {
  background-color: #000 !important;
  color: #fff !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: #fff !important;
}

/* --- links stay white, keep affordance ---------------------------------- */
a { color: #fff !important; }
a:hover { color: #fff !important; text-decoration: underline !important; }


/* --- kill light-theme shadows/glows ------------------------------------- */
* {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* --- backdrops / modals / overlays -> near-black ------------------------- */
.modal, .backdrop, .overlay, .drawer, .scrim,
[role="dialog"], [role="alertdialog"],
.lightbox, .popup, .sheet {
  background-color: rgba(0, 0, 0, 0.94) !important;
}

/* --- highlighted text ---------------------------------------------------- */
mark {
  background-color: #000 !important;
  color: #fff !important;
}
::selection {
  background: #fff !important;
  color: #000 !important;
}

/* --- rules / dividers ----------------------------------------------------- */
hr {
  background-color: transparent !important;
}

/* --- scrollbars ------------------------------------------------------------ */
::-webkit-scrollbar { background: #000 !important; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25) !important; }

/* --- small UI icons -> white (scoped; infographic <figure> SVGs untouched) */
button svg [fill]:not([fill="none"]),
nav svg [fill]:not([fill="none"]),
a svg [fill]:not([fill="none"]),
.chip svg [fill]:not([fill="none"]),
.eyebrow svg [fill]:not([fill="none"]),
svg.chev [fill]:not([fill="none"]) {
  fill: #fff !important;
}
button svg [stroke]:not([stroke="none"]),
nav svg [stroke]:not([stroke="none"]),
a svg [stroke]:not([stroke="none"]),
svg.chev [stroke]:not([stroke="none"]) {
  stroke: #fff !important;
}

/* --- never touch media ------------------------------------------------------ */
/* img, video, picture, canvas: no rules target them anywhere above. */

/* --- light pills/badges/chips/tags -> black (were white pill + dark text) -- */
.eyebrow, .art-pill, .chip, .tag, .pill, .badge, .mq-pill, .mq-go,
[class*="badge-"], [class*="pill-"] {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
}

/* --- figcaption -> black (mock captions were #fbfbfb, hiding white text) -- */
figcaption {
  background-color: #000 !important;
  background-image: none !important;
}

/* --- infographic SVGs -> B&W (2026-10-07 bw-verify: figure.ig inline SVGs
   carry explicit fill/stroke presentation attributes that escape the element
   background-color/color rules above: white cards, dark text, blue #2e6bff
   bars/checks/steps). Scoped to figure.ig so icons/logos elsewhere are safe. */
figure.ig svg [fill="#ffffff"],
figure.ig svg [fill="#fff"],
figure.ig svg [fill="#f7f8f5"],
figure.ig svg [fill="#dde6ff"] {
  fill: #000 !important;
}
figure.ig svg [fill="#14211c"],
figure.ig svg [fill="#5f6f66"],
figure.ig svg [fill="#8fa0bd"],
figure.ig svg [fill="#63759a"],
figure.ig svg [fill="#2c3d35"] {
  fill: #fff !important;
}
figure.ig svg [fill="#2e6bff"],
figure.ig svg [fill="#60a5fa"] {
  fill: #fff !important;
}
figure.ig svg [fill="#16213a"],
figure.ig svg [fill="#0b1220"] {
  fill: #000 !important;
}
figure.ig svg [stroke="#dfe5df"],
figure.ig svg [stroke="#E7E7E2"] {
  stroke: #fff !important;
}
figure.ig svg [stroke="#2e6bff"] {
  stroke: #fff !important;
}
figure.ig svg [stroke="#1c2942"],
figure.ig svg [stroke="#101418"] {
  stroke: #000 !important;
}
/* numbered step discs: white disc, black numeral (label text after legend
   dots keeps white via text-anchor scoping) */
figure.ig svg circle[fill="#2e6bff"] + text[text-anchor="middle"] {
  fill: #000 !important;
}
/* infographic SVG foreignObject text blocks: the universal div black-bg kill
   paints an opaque black rectangle behind HTML text inside SVG cards
   (verified live 2026-10-07: setup-dual-sim "Before / after" AFTER card —
   white text on a black slab floating on the pink card). Text already goes
   white via the universal color rule; the card keeps its own surface. */
figure.ig svg foreignObject > div {
  background-color: transparent !important;
}

/* --- language-switcher pill dot + menu gradients -> B&W -------------------
   lang-switcher.js injects .esim-lang-btn .dot with a teal/blue
   linear-gradient(135deg,#00E5CC,#00B3FF). The structural background-color
   kill above doesn't touch background-image on spans, so the colored dot
   survived. Same for the aria-current menu item's gradient. Force both. */
.esim-lang-btn .dot,
.esim-lang .dot {
  background-color: #fff !important;
  background-image: none !important;
}
.esim-lang-menu a[aria-current="true"] {
  background-image: none !important;
  background-color: #000 !important;
}

/* --- fixed FABs vs footer overlap (mobile) ---------------------------------
   2026-10-08 bw-verify: the fixed bottom buttons (.search-fab bottom-left,
   .to-top back-to-top, .sw-launcher support chat) sat ON TOP of footer text
   on mobile when the footer was in view ("...in 195 destinations." partially
   hidden behind them). site.js toggles body.footer-inview via an
   IntersectionObserver on <footer>; fade the buttons out while it is set.
   Specificity body.footer-inview .sw-launcher (0,2,1) beats the widget's own
   injected .sw-launcher rule (0,1,0) regardless of style order. */
.search-fab, .to-top, .sw-launcher {
  transition: opacity .25s ease, visibility .25s ease;
}
body.footer-inview .search-fab,
body.footer-inview .to-top,
body.footer-inview .sw-launcher {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

/* --- ds-ring: data-usage SVG ring must stay transparent --------------------
   2026-10-08 (William's phone screenshots): the .ds-ring div (54px SVG
   progress ring inside the hero phone mockup's data card) was painted an
   opaque BLACK square by the universal div background kill, floating over
   photographic content. The div is a positioning container for the SVG —
   it must be transparent. The progress arc (#101418) is invisible on black,
   so it goes white to keep the ring readable. */
.ds-ring {
  background-color: transparent !important;
}
.ds-ring #ds-ring-fg {
  stroke: #fff !important;
}

/* --- 2026-10-16 no-strokes pass (Ethan: remove stroke and borders from
   everything and everywhere; separation comes from spacing and contrast).
   Global kill for every border/outline from any linked stylesheet, <style>
   block or non-important inline style. border-radius is kept (shape, not a
   stroke). SVG stroke= rules above stay - they paint icon glyphs, not
   borders. Focus rings are covered by this rule like everything else. --- */
*, *::before, *::after {
  border: 0 !important;
  outline: 0 !important;
}


/* --- 2026-10-16 edge-accent kill: pseudo-element accent bars are strokes too.
   dash.css paints .dstat::before as a 3px accent bar down the left of result/
   metric cards. content:none removes it layout-safe (the bar is absolutely
   positioned and .dstat padding is symmetric 16px 18px). --- */
.dstat::before {
  content: none !important;
}