/* v2 light theme for the functional checkout and account pages.
 *
 * Those pages are the real payment and account surfaces: Stripe Elements,
 * Google Pay, PayPal, the crypto flow, the access-code lookup. Their markup and
 * scripts are NOT touched. The whole design system there is already driven by
 * --uvpn-* custom properties on :root, and the Stripe Elements appearance reads
 * the SAME properties at runtime, so redefining the tokens re-themes the page
 * and the embedded card fields together, with no change to payment logic.
 *
 * Palette is the v2 redesign's own: ink #0b2545, accent #1463ff, deep #0b3fd1,
 * surfaces #fff / #f7faff / #eef4ff, borders on rgba(11,37,69,...).
 */
:root{
  --uvpn-bg:#e8edf6;
  --uvpn-bg-soft:#f4f8ff;
  --uvpn-bg-elevated:#ffffff;
  --uvpn-surface:#ffffff;
  --uvpn-surface-hover:#f4f8ff;
  --uvpn-surface-active:#eef4ff;
  --uvpn-border:#dde5f1;
  --uvpn-border-strong:#c2d2e8;

  /* WCAG 1.4.3: #1463ff as TEXT is 4.93:1 on white but only 4.47:1 on the pale
     blue surfaces this design uses, so it fails 4.5:1 for normal text. The
     accent used for text/links/borders is therefore the design's deep blue,
     which is 7.19:1 even on #eef4ff. #1463ff stays the CTA BACKGROUND
     (--uvpn-success), where white on it is 4.93:1. */
  --uvpn-cyan:#0b3fd1;
  --uvpn-cyan-bright:#0b3fd1;
  --uvpn-cyan-soft:#4f8bff;
  --uvpn-blue:#0b3fd1;    /* link/accent TEXT; CTA background stays #1463ff */
  --uvpn-blue-bright:#4f8bff;
  --uvpn-blue-deep:#0b3fd1;

  --uvpn-text:#0b2545;
  --uvpn-text-muted:#445369;   /* 4.5:1+ even on the deepest tinted card */
  --uvpn-text-subtle:#5b6b80;  /* 4.93:1 on #eef4ff; #8193a8 was 2.85 */
  --uvpn-text-inverse:#ffffff;

  /* .btn takes its background from --uvpn-green: in the dark build this was
     the mint CTA (#32e3a0), so leaving it green made every primary button,
     including "Pay $X", green on the light page. It is the BRAND CTA token
     here, not a success colour, so it becomes the v2 accent blue.
     --uvpn-success stays a real green for success states. */
  --uvpn-green:#1463ff;
  --uvpn-green-bright:#0b3fd1;
  /* --uvpn-success is ALSO the primary CTA background in this system
     (background:var(--uvpn-success) on the Pay and Get uVPN buttons), which is
     why a green success colour turned every CTA green. The approved v2 design
     renders its "Payment confirmed" pill in blue too, so one accent is correct
     for both uses. */
  --uvpn-success:#1463ff;
  --uvpn-danger:#8f1622;    /* 4.5:1+ on its own pale-red panel */
  --uvpn-warning:#6b4600;   /* #8a5a00 measured 3.56:1 at 10px */
  --uvpn-focus:#1463ff;

  --uvpn-font-body:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --uvpn-font-display:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --uvpn-shadow-card:0 10px 30px rgba(11,37,69,.07);
  --uvpn-shadow-float:0 18px 40px rgba(11,37,69,.16);
  --uvpn-glow-brand:0 8px 20px rgba(20,99,255,.28);
  --uvpn-gradient-brand:linear-gradient(180deg,#1463ff,#0b3fd1);
  --uvpn-gradient-brand-hover:linear-gradient(180deg,#2b74ff,#1463ff);
  --uvpn-gradient-card:linear-gradient(180deg,#ffffff,#f7faff);
  --uvpn-gradient-page:linear-gradient(180deg,#f4f8ff,#e8edf6);
}

/* The dark build painted these directly rather than through a token. */
body{background:var(--uvpn-bg);color:var(--uvpn-text)}
.site-header{background:rgba(255,255,255,.9);border-bottom:1px solid rgba(11,37,69,.08)}
.site-footer{background:#ffffff;border-top:1px solid rgba(11,37,69,.08);color:var(--uvpn-text)}

/* A dark page hides text with translucent white; on white that vanishes. */
.checkout-shell,.checkout-card,.checkout-intro{color:var(--uvpn-text)}
.checkout-card{background:#fff;border:1px solid rgba(11,37,69,.10);box-shadow:var(--uvpn-shadow-card)}

/* Selected plan / payment tiles: pale blue, not a glowing dark card. */
[class*="plan"][aria-checked="true"],[class*="plan"].is-selected,
[class*="method"][aria-checked="true"],[class*="method"].is-selected{
  background:#eef4ff;border-color:#1463ff}

/* Buttons the dark theme rendered as glowing cyan. */
.btn,button.btn{font-family:var(--uvpn-font-body)}
.btn.primary,.btn-primary{background:#1463ff;color:#fff;border-color:#1463ff}
.btn.primary:hover,.btn-primary:hover{background:#0b3fd1;border-color:#0b3fd1}

/* The header logo asset is the white-on-dark variant; on a white header it is
   invisible. Swapped to the dark-ink variant made for light backgrounds. */
.site-header img[src*="uvpn-logo-dark-bg"]{content:url("/assets/brand/uvpn-logo-light-bg.svg")}

/* Text inputs. The dark build painted .field with a literal near-black
   (#0d1d30) rather than a token, so the token override could not reach it and
   the access-code box stayed dark with white text on a white card. */
.field,input.field,textarea.field,select.field{
  background:#ffffff;color:var(--uvpn-text);
  border:1px solid rgba(11,37,69,.16);border-radius:12px}
.field::placeholder{color:var(--uvpn-text-subtle)}
.field:focus,.field:focus-visible{
  outline:2px solid #1463ff;outline-offset:1px;border-color:#1463ff}

/* The access-code box is targeted as #rc.field with LITERAL dark colours and a
   -webkit-text-fill-color, which outranks a plain .field rule. Matched at the
   same specificity so the field is white with navy text and a visible caret. */
#rc.field{
  background-color:#ffffff;color:var(--uvpn-text);
  -webkit-text-fill-color:#0b2545;caret-color:#1463ff;
  border:1px solid rgba(11,37,69,.16)}
#rc.field::placeholder{color:var(--uvpn-text-subtle);-webkit-text-fill-color:#8193a8}

/* The day-pass campaign variant ships hidden and is revealed for some traffic.
   Its hero was white text for a dark page; on the light page it would be
   invisible, so it is corrected now rather than left as a trap. */
.day-pass-campaign,.day-pass-campaign h1,.day-pass-campaign p,
.privacy-hero-copy,.privacy-hero-copy h1{color:var(--uvpn-text)}
.privacy-hero-note{color:var(--uvpn-text-muted)}
.privacy-hero-status{color:var(--uvpn-text-muted)}
#day-pass-campaign-title{color:var(--uvpn-text)}


/* ---------------------------------------------------------------- v2 chrome
   The header and footer transplanted onto /checkout and /account/ are the
   redesign's own markup and use its custom properties (--navPad, --footPad,
   --footCols and the rest), which lived in a per-page <style> block on the
   redesign pages. They are published here so the same chrome renders
   identically on the functional pages, including at the 900px breakpoint. */
:root{--siteW:1440px;--frameRadius:22px;--navPad:16px 56px;--navGap:30px;--logoSize:21px/1;--navCtaPad:12px 20px;--heroCols:1fr 430px;--heroPad:64px 56px 56px;--h1:70px/.98;--h2:44px/1.04;--h3:32px/1.06;--leadSize:18px/1.55;--sectionPad:72px 56px;--trustPad:34px 56px;--ctaPad:64px 56px;--footPad:48px 56px 36px;--footCols:1.4fr 1fr 1fr 1fr;--cols2:1fr 1fr;--cols3:repeat(3,1fr);--cols4:repeat(4,1fr);--cols5:repeat(5,1fr);--checkoutCols:1.3fr 1fr;--phoneW:372px;--phoneH:700px;--mapH:420px;--codeSize:26px/1.2}@media (min-width:901px){.v2-mb{display:none!important}}@media (max-width:900px){:root{--frameRadius:34px;--navPad:12px 16px;--navGap:12px;--logoSize:19px/1;--navCtaPad:11px 16px;--heroCols:1fr;--heroPad:26px 18px 34px;--h1:40px/1.02;--h2:27px/1.08;--h3:23px/1.1;--leadSize:15px/1.6;--sectionPad:34px 18px;--trustPad:26px 18px;--ctaPad:34px 18px;--footPad:30px 18px 24px;--footCols:1fr 1fr;--cols2:1fr;--cols3:1fr;--cols4:1fr;--cols5:1fr 1fr;--checkoutCols:1fr;--phoneW:300px;--phoneH:600px;--mapH:260px;--codeSize:20px/1.3}.v2-dt{display:none!important}}img,svg{max-width:100%}

/* The chrome's inner div now carries the page's OWN container class
   (.checkout-shell / .wrap), so its width tracks that container at every
   breakpoint by construction rather than by me restating breakpoints. Only the
   container's vertical padding is neutralised. */

/* Literal colours in the hidden day-pass variant that no token could reach.
   #8fa3b8 measured 2.21:1 and #d9828b 2.38:1 against their own surfaces. */
.privacy-hero-status,[class*="privacy-hero"] [class*="label"]{color:var(--uvpn-text-muted)}
.privacy-hero-dot{background:var(--uvpn-danger)}
.day-pass-campaign [style*="#8fa3b8"],.day-pass-campaign [style*="#d9828b"]{color:var(--uvpn-text-muted)}

/* Remaining literals the tokens cannot reach, each measured failing:
   #8fa3b8 placeholder 2.21:1, #ff667a error text ~1:1 on its own tinted panel. */
#rc.field::placeholder{color:#5b6b80;-webkit-text-fill-color:#5b6b80}
[class*="error"],[class*="danger"],[role="alert"]{color:var(--uvpn-danger)}

/* /v2/site.css sets a{color:#1463ff}. That is 4.93:1 on white but 4.2:1 on the
   surfaces these pages use, so links are moved to the deep accent. Loaded after
   site.css, and scoped to these two pages only. */
a{color:#0b3fd1}
a:hover{color:#093099}

/* The hidden day-pass variant carries its own literal palette that no token
   reaches. Every text colour in it is set explicitly so, if that variant is
   ever shown, it is readable rather than a latent failure. */
.day-pass-campaign,.day-pass-campaign *,
[class*="privacy-hero"],[class*="privacy-hero"] *{color:var(--uvpn-text)}
.day-pass-campaign [class*="note"],.day-pass-campaign [class*="muted"],
.day-pass-campaign li,[class*="privacy-hero"] li{color:var(--uvpn-text-muted)}
.day-pass-campaign a,[class*="privacy-hero"] a{color:#093099}
.day-pass-campaign [class*="status"],[class*="privacy-hero-status"]{color:var(--uvpn-danger)}

/* Precisely-targeted remainder, each identified from the rendered DOM:
   - dt inside .privacy-hero-fact was #8fa3b8 (2.21:1) on the page background
   - .checkout-error paints a pale-red panel that dragged its own text and the
     "Try again" control under 4.5:1 and 3:1 respectively */
.privacy-hero-fact dt,.privacy-hero-fact dd{color:var(--uvpn-text)}
.privacy-hero-fact dt{color:var(--uvpn-text-muted)}
.checkout-error{background:#fdf2f3;border:1px solid rgba(143,22,34,.35)}
.checkout-error,.checkout-error span,.checkout-error p{color:#7a1220}
.checkout-error .btn.ghost{color:#7a1220;border-color:rgba(143,22,34,.55);background:#fff}

/* ------------------------------------------------------------- page content
   The functional body now sits inside the real v2 frame, so the frame supplies
   the width, radius and background and the section padding supplies the gutter
   - exactly as on every other page. The page's own container classes had their
   own max-width and centring, which fought the frame, so they are neutralised
   here rather than given bespoke widths. */
.v2page{padding:var(--sectionPad)}
.v2page .checkout-shell,.v2page .wrap{width:100%;max-width:none;margin:0;padding-left:0;padding-right:0}
.v2page > main{width:100%}

/* ---------------------------------------------------------------------------
   WCAG 1.4.3 fixes for late hard-coded rules in style.css that assumed the
   OLD dark theme, where the primary CTA background was a light cyan and so
   near-black label text was correct. In the v2 light system that background
   is the brand blue #1463ff, on which #031216 measures 3.86:1.
   These selectors are only ever loaded on /checkout and /account/.
   --------------------------------------------------------------------------- */

/* style.css:3207 .btn,.btn:hover,.btn:focus-visible{color:#031216} -> 3.86:1 */
a.btn, button.btn,
a.btn:hover, button.btn:hover,
a.btn:focus-visible, button.btn:focus-visible { color:#ffffff; }        /* 4.93:1 on #1463ff */

/* the ghost variant is dark text on white, so it must NOT go white */
a.btn.ghost, button.btn.ghost,
a.btn.ghost:hover, button.btn.ghost:hover { color:var(--uvpn-blue-deep); background:#ffffff; }  /* 8.59:1 */

/* style.css:1472,1538 hard-code #FF667A, which is 2.58:1 on the light panel */
.checkout-error, .checkout-error strong,
p.checkout-error, div.checkout-error { color:var(--uvpn-danger); }      /* #8f1622, 7.51:1 on #fff */

/* the express-checkout divider label was #9FB3C8 = 2.15:1 on white */
.checkout-express-divider, .checkout-express-divider span { color:var(--uvpn-text-subtle); }  /* 4.93:1 */

/* A gradient paints via background-image, so background-color stays transparent
   and any contrast measurement walks up to the white card behind it. Give the
   brand buttons a solid base equal to the gradient's LIGHTEST stop (#1463ff,
   the worst case for white text at 4.93:1). The gradient still paints over it,
   so nothing changes visually. */
a.btn, button.btn { background-color:#1463ff; }
a.btn.ghost, button.btn.ghost { background-color:#ffffff; }

/* The nth-child min-height pins that used to sit in the block above were
   copied here with the redesign's <style> block. They are per-page geometry
   locks measured against a SEVEN-section redesign page. /checkout and
   /account/ have three frame children (header, page, footer), so
   :nth-child(3) was forcing min-height:500px (451px mobile) onto the
   FOOTER, whose content is ~250px - leaving a large empty band under the
   copyright line. The pins are removed; the custom properties and the
   .v2-mb/.v2-dt responsive toggles in those same media queries are kept. */