/* =====================================================================
   Checkout v2 — Webmania Financeiro
   Pixel target: design_ref.html (Checkout Site v2). Enqueued is_checkout-gated.
   ALL tokens + components are checkout-scoped (page-only). Never promoted site-wide.
   ===================================================================== */

/* ---------- Fonts: Borna (display, local WOFF2) ----------
   Inter (UI) + JetBrains Mono (mono) enqueued separately from Google Fonts
   (checkout-gated, no @import here per render-blocking rule). */
@font-face { font-family:'Borna'; src:url('../fonts/checkout-v2/borna-regular-webfont.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Borna'; src:url('../fonts/checkout-v2/borna-medium-webfont.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Borna'; src:url('../fonts/checkout-v2/borna-semibold-webfont.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Borna'; src:url('../fonts/checkout-v2/borna-bold-webfont.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens (checkout-scoped :root) ---------- */
body.checkout-v2{
  --wm-green-900:#00251F; --wm-green-800:#003D33; --wm-green-700:#00695A; --wm-green-600:#008070;
  --wm-green-500:#0E9984; --wm-green-400:#2CB39C; --wm-green-300:#6FCEBD; --wm-green-200:#AEE3D6;
  --wm-green-100:#D6F0E8; --wm-green-50:#EBF7F3; --wm-green-mist:#DFF5EC;
  --pn-bg:#F4F7F5; --pn-card:#FFFFFF; --pn-border:#E2E8E4;
  --wm-white:#FFFFFF;
  --wm-ink-50:#F4F7F5; --wm-ink-100:#E8EDEA; --wm-ink-200:#D4DCD8; --wm-ink-300:#B3BDB8;
  --wm-ink-400:#8B9691; --wm-ink-500:#687370; --wm-ink-600:#4D5854; --wm-ink-700:#343D39;
  --wm-ink-800:#1F2724; --wm-ink-900:#0A110E;
  --wm-amber-600:#B86F1A; --wm-amber-200:#F1D7A8; --wm-amber-50:#FDF6EA;
  --wm-red-600:#C2413A;
  --wm-blue-600:#2C6FB8;
  --wm-font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wm-font-display:'Borna', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --wm-font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wm-shadow-sm:0 2px 6px rgba(10,41,33,.06), 0 1px 2px rgba(10,41,33,.04);
  --wm-shadow-md:0 6px 18px rgba(10,41,33,.08), 0 2px 4px rgba(10,41,33,.04);
  --wm-shadow-lg:0 18px 40px rgba(10,41,33,.12), 0 4px 10px rgba(10,41,33,.05);
  --wm-ease-out:cubic-bezier(.22,1,.36,1);
  --wm-dur-fast:140ms; --wm-dur-med:220ms;
  --top-h:62px;
  color-scheme:light; /* prevent OS dark-mode auto-styling of inputs */
}

/* =====================================================================
   LEGACY CASCADE NARROWING (root fix, not !important war)
   custom_css_checkout() prints late inline !important rules in wp_head.
   On the v2 surface we neutralise only the rules that would touch v2 markup.
   The v2 components use NEW class names (.fg/.co-*/.ck-*) so .form-control,
   .col-md-6, .row-checkout, .table-checkout rules simply don't match.
   These resets cover the residual global selectors the second planner flagged
   (input[type=text]{width:100%!important}, #payment .payment_box, .btn-primary).
   ===================================================================== */
body.checkout-v2 .co-checkout-root input[type="text"],
body.checkout-v2 .co-checkout-root input[type="email"],
body.checkout-v2 .co-checkout-root input[type="tel"],
body.checkout-v2 .co-checkout-root input[type="password"]{
  /* legacy forces width:100%!important — harmless; keep box-sizing sane */
  box-sizing:border-box;
}
/* Legacy paints #payment .payment_box with green border + arrow; the v2 panes
   are .co-pane/.co-note and never carry .payment_box, so nothing to override.
   Boleto/userede gateway panes DO carry .payment_box — restyle them flat. */
body.checkout-v2 .co-checkout-root #payment div.payment_box{
  position:static !important;
  width:100% !important;
  max-width:none !important;
  background:#FBFCFB !important;
  border:1px solid var(--pn-border) !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  border-radius:12px !important;
  padding:15px 16px !important;
  margin:0 !important;
  font-size:13px !important;
}
body.checkout-v2 .co-checkout-root #payment div.payment_box:after{ display:none !important; }
/* Hide the legacy h1/h3 checkout titles the theme still prints */
body.checkout-v2 .title_checkout,
body.checkout-v2 #order_review_heading.titulo_checkout,
body.checkout-v2 h1.title_checkout{ display:none !important; }

/* Same job, different element: page.php:35 prints its own <h1> — the page
   title on /finalizar-compra/, or "Pedido #<id>" on the pay-for-order route
   (page.php:38). It carries NO class, so the .title_checkout selectors above
   never matched it and it survived above the v2 top bar as a stray heading.
   The v2 surface renders its own header, so the legacy one is redundant here.

   Scoped to #content > #main > article > header to hit only that heading;
   `!important` because page.php:35 sets an inline `style="margin:..."` and
   inline styles outrank a plain declaration. Suppressing rather than editing
   page.php keeps the legacy (non-v2) pages that share this template intact. */
body.checkout-v2 #content #main article > header > h1{ display:none !important; }

/* U4 — strip the legacy box around #order_review / the review table. style.css:389
   `.checkout #order_review{background:#f7f7f7;padding:.618em;border-radius:.382em}`
   + :390 `#order_review table{background:#fcfcfc;border;box-shadow}` wrap the
   payment/summary in an extra tinted block that clashes with the v2 design (the
   green is meant to be ONLY the .co-summary column bg, with WHITE inner cards).
   Reset the wrapper to transparent/no-pad/no-radius/no-box so only the v2
   .co-summary-v2 + .co-prod/.co-plan-card cards show. */
body.checkout-v2 .checkout #order_review,
body.checkout-v2 #order_review{ background:transparent; padding:0 !important; border-radius:0; box-shadow:none; -webkit-box-shadow:none; }
body.checkout-v2 .checkout #order_review table{ background:transparent; border:0; box-shadow:none; -webkit-box-shadow:none; }

/* ALIGNMENT RESET (DE-I / F9).
   style.css:1224 sets `.checkout #order_review .form-row.place-order{text-align:center!important}`
   which centres the CTA block (and via inheritance the summary text reads centred
   on the collapsed tablet/mobile layout). Re-assert left alignment on the v2
   columns + the place-order region so the ref's left-anchored reading order holds
   at every viewport. The CTA itself is flex-centred by .co-pay-btn; the footer
   trust line (.co-foot) keeps its own intentional center. */
body.checkout-v2 .co-checkout-root .co-col,
body.checkout-v2 .co-checkout-root .co-summary,
body.checkout-v2 .co-checkout-root .co-form,
body.checkout-v2 .co-checkout-root .co-inner,
body.checkout-v2 .co-checkout-root .co-summary-v2{ text-align:left; }
/* The single legacy !important place-order centering (style.css:1224) is the
   only declaration that needs an !important to override — a narrow, surgical
   counter (NOT broad !important spam). */
body.checkout-v2 .checkout #order_review .form-row.place-order,
body.checkout-v2 .checkout #order_review .form-row.place-order .co-terms,
body.checkout-v2 .checkout #order_review .form-row.place-order .co-terms-txt{ text-align:left !important; }

/* =====================================================================
   GLOBAL RESETS for the v2 surface only
   ===================================================================== */
/* BODY FONT OVERRIDE (DE-B / F3).
   The legacy theme sets `body{font-family:"Open Sans";font-smoothing:subpixel}`
   (style.css:29/:513, specificity 0,0,1). That cascades into the checkout body
   and every label. `body.checkout-v2` (specificity 0,1,1) beats it WITHOUT
   !important. We bind Inter (var(--wm-font-sans)) + antialiased smoothing to the
   body, the checkout root, and every label/text node so the whole surface reads
   Inter 13.5px -0.0675px exactly like the ref (NOT Open Sans 14px subpixel). */
body.checkout-v2,
body.checkout-v2 #content,
body.checkout-v2 .co-checkout-root,
body.checkout-v2 .co-checkout-root label,
body.checkout-v2 .co-checkout-root p,
body.checkout-v2 .co-checkout-root span,
body.checkout-v2 .co-checkout-root a,
body.checkout-v2 .co-checkout-root div,
body.checkout-v2 .co-checkout-root input,
body.checkout-v2 .co-checkout-root select,
body.checkout-v2 .co-checkout-root textarea,
body.checkout-v2 .co-checkout-root button{
  font-family:var(--wm-font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
}
/* Keep the Borna display family on the amount/total/display nodes even though
   the broad Inter rule above touches them — display elements re-assert Borna. */
body.checkout-v2 .co-checkout-root .co-amount,
body.checkout-v2 .co-checkout-root .co-total-v,
body.checkout-v2 .co-checkout-root .co-gen-title,
body.checkout-v2 .co-checkout-root .co-gen-amt,
body.checkout-v2 .co-checkout-root .pay-state-title{ font-family:var(--wm-font-display); }
body.checkout-v2 .co-checkout-root .mono,
body.checkout-v2 .co-checkout-root .co-codebox code,
body.checkout-v2 .co-checkout-root input.mono{ font-family:var(--wm-font-mono); }

body.checkout-v2 .co-checkout-root *,
body.checkout-v2 .co-checkout-root *::before,
body.checkout-v2 .co-checkout-root *::after{ box-sizing:border-box; }
body.checkout-v2 .co-checkout-root{
  font-family:var(--wm-font-sans);
  font-size:13.5px;
  color:var(--wm-ink-900);
  background:var(--wm-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
}
body.checkout-v2 .co-checkout-root a{ color:inherit; text-decoration:none; }
body.checkout-v2 .co-checkout-root button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
body.checkout-v2 .co-checkout-root input,
body.checkout-v2 .co-checkout-root select,
body.checkout-v2 .co-checkout-root textarea{ font:inherit; color:inherit; }
body.checkout-v2 .co-checkout-root svg{ display:block; }
body.checkout-v2 .co-checkout-root ::selection{ background:var(--wm-green-200); color:var(--wm-green-900); }
body.checkout-v2 .co-checkout-root button:focus-visible,
body.checkout-v2 .co-checkout-root a:focus-visible,
body.checkout-v2 .co-checkout-root input:focus-visible,
body.checkout-v2 .co-checkout-root select:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(14,153,132,0.22); border-radius:6px;
}
body.checkout-v2 .co-checkout-root .fg input:focus-visible{ box-shadow:none; border-radius:0; }
body.checkout-v2 .co-checkout-root .mono{ font-family:var(--wm-font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.005em; }

/* =====================================================================
   TOP BAR (G-01)
   ===================================================================== */
.site-top{
  position:sticky; top:0; z-index:30;
  height:var(--top-h);
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--pn-border);
}
/* Backdrop-filter fallback — solid bg where blur is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-top{ background:#fff; }
}
.site-top-grid{ display:grid; grid-template-columns:0.88fr 1.12fr; height:100%; align-items:center; }
.site-top-left{ padding:0 52px; min-width:0; }
.site-top-right{ padding:0 52px; min-width:0; display:flex; justify-content:flex-end; }
.site-top-logo{ display:block; width:100%; max-width:412px; margin-left:auto; }
.site-top-logo img{ height:30px; width:auto; display:block; }
.site-top-mid{ position:absolute; left:50%; top:0; height:100%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:500; color:var(--wm-ink-500); white-space:nowrap; }
.site-top-mid svg{ width:14px; height:14px; color:var(--wm-green-600); }
.site-help{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--wm-ink-600); }
.site-help svg{ width:15px; height:15px; color:var(--wm-ink-400); }
.site-help:hover{ color:var(--wm-green-700); }

/* =====================================================================
   LEGACY THEME CHROME SUPPRESSION (REGRESSAO_S1 — double-header/footer)
   The v2 template (form-checkout.php) ships its OWN .site-top glass bar and
   .ck-footer. But page.php still pulls header.php (#top nav: logo + "Minha
   conta"/"Fale conosco"), footer.php (#footer + .footer2 copyright) and the
   sidebar (#sidebar.col-right). Without this rule the new render STACKS the
   legacy theme top bar above .site-top (double-header) and the legacy footer
   below .ck-footer (double-footer), and the legacy col-left/col-right grid
   constrains the v2 full-bleed shell. Suppress the legacy chrome so only the
   v2 top bar + v2 footer render — matching the single-minimal-bar design ref.
   Scoped to body.checkout-v2 (is_checkout-gated via body_class) → page-only.
   NOTE: the "Minha conta"/"Fale conosco" account links carried by #top are
   intentionally dropped here per the ref's logo+Ajuda-only top bar. If the
   Step 3.3-FE user pause picks option (b) "preserve account access", that link
   is re-added INSIDE .site-top-right (additive) — this suppression stays.
   ===================================================================== */
body.checkout-v2 #top,
body.checkout-v2 #footer,
body.checkout-v2 .footer2,
body.checkout-v2 #sidebar.col-right{ display:none !important; }
/* Neutralize the legacy two-column page wrapper so the v2 full-bleed shell
   (.co-checkout-root) is not boxed by #content.page.col-full / #main.col-left. */
body.checkout-v2 #content.page.col-full{ max-width:none; width:auto; margin:0; padding:0; float:none; }
body.checkout-v2 #content.page.col-full #main.col-left{ width:100%; max-width:none; margin:0; padding:0; float:none; }
/* U6 — kill the legacy fixed-footer RESERVATION that left a huge blank below the
   v2 footer. style.css:1377/:1426 set `.body{padding-bottom:254px!important}`
   (and 382px at another breakpoint) to reserve room for the OLD fixed #footer.
   With #footer suppressed, that reservation is pure dead space under .ck-footer.
   Also zero any residual wrapper bottom padding/margin so the v2 footer is the
   true bottom of the page (no trailing blank). */
body.checkout-v2 .body{ padding-bottom:0 !important; }
body.checkout-v2 #wrapper,
body.checkout-v2 #content{ padding-bottom:0; margin-bottom:0; min-height:0; }
/* Neutralize the legacy html,body{height:100%;min-height:100%} on checkout so the
   document height is purely content-driven (no forced-viewport phantom tail under
   the footer). The .co-grid still owns its own min-height for the above-fold fill. */
html body.checkout-v2{ height:auto; min-height:0; }
body.checkout-v2 .ck-footer{ margin-bottom:0; }
/* The legacy `.post,.type-page{margin:0 0 3.631em}` (style.css:106) put a ~51px
   margin under the checkout <article>, leaving a blank strip below the v2 footer.
   Zero it (and the article/entry/header chrome margins) on checkout. */
body.checkout-v2 #main article.type-page,
body.checkout-v2 #main article.post,
body.checkout-v2 #main .entry,
body.checkout-v2 #main article > header{ margin:0; padding:0; }
/* WC's form.checkout carries a ~1.36em (21px) bottom margin that pushed the v2
   footer down, leaving a WHITE strip between the green column and the footer
   (round-4 R4-A). The green column already stretches to the grid bottom; zero
   the form margin so the footer sits flush under the green. */
body.checkout-v2 form.checkout.co-checkout-root,
body.checkout-v2 .co-checkout-root{ margin-bottom:0 !important; }

/* =====================================================================
   SHELL / GRID (G-02)  — own classes, NOT .col-md-6 / .box_checkout
   ===================================================================== */
.co-grid{ display:grid; grid-template-columns:0.88fr 1.12fr; min-height:calc(100vh - var(--top-h)); }
.co-col{ padding:54px 52px 48px; min-width:0; }
.co-form{ background:#fff; }
.co-summary{ background:var(--wm-green-50); border-right:1px solid var(--wm-green-100); order:-1; }
.co-form .co-inner{ width:100%; max-width:486px; margin-right:auto; }
.co-summary .co-inner{ width:100%; max-width:412px; margin-left:auto; position:sticky; top:calc(var(--top-h) + 24px); }

/* ---------- Validation notices (v2 alert card) ----------
   WC prints .woocommerce-error / -message / -info here (form column, above the
   billing head). Restyle the raw legacy band into a v2 alert card: rounded 12px,
   tinted background, soft border, Inter. Errors = red, success = green, info =
   neutral. Scoped to .co-notices so it never touches global WC notices. */
.co-notices:empty{ display:none; }
.co-notices ul.woocommerce-error,
.co-notices .woocommerce-message,
.co-notices .woocommerce-info{ list-style:none; margin:0 0 18px; padding:13px 16px; border-radius:12px; font-family:var(--wm-font-sans); font-size:13px; line-height:1.5; border:1px solid var(--pn-border); }
.co-notices ul.woocommerce-error{ background:#FCF1F0; border-color:#EBC9C6; color:#8A2D27; }
.co-notices ul.woocommerce-error li{ margin:0; padding:0; list-style:none; }
.co-notices ul.woocommerce-error li + li{ margin-top:6px; }
.co-notices ul.woocommerce-error strong{ color:#6E231E; font-weight:600; }
.co-notices .woocommerce-message{ background:var(--wm-green-50); border-color:var(--wm-green-200); color:var(--wm-green-800); }
.co-notices .woocommerce-info{ background:var(--wm-ink-50); border-color:var(--pn-border); color:var(--wm-ink-700); }
/* Kill the legacy WC notice chrome (left bar, ::before icon, padding-left) on checkout. */
.co-notices .woocommerce-error,
.co-notices .woocommerce-message,
.co-notices .woocommerce-info{ position:relative; }
.co-notices .woocommerce-error::before,
.co-notices .woocommerce-message::before,
.co-notices .woocommerce-info::before{ display:none !important; content:none !important; }
.co-notices .woocommerce-message a,
.co-notices .woocommerce-error a{ color:inherit; font-weight:600; text-decoration:underline; }

/* ---------- Form column ---------- */
.ck-sec-eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--wm-green-700); }
.ck-formhead{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:18px; }

/* Segmented PJ/Rural (G-03 / INT-01)
   NOTE: the active (.on) / hover rules are scoped under .co-checkout-root so they
   out-specify the generic `body.checkout-v2 .co-checkout-root button{background:none}`
   reset (specificity 0,2,1) which otherwise wiped the white active pill. */
.ck-segt{ display:inline-flex; padding:3px; gap:3px; background:var(--wm-ink-50); border:1px solid var(--pn-border); border-radius:11px; }
/* U1 — the .ck-segt buttons rendered glued because the generic
   `body.checkout-v2 .co-checkout-root button{padding:0}` reset (spec 0,2,1)
   out-specified `.co-checkout-root .ck-segbtn{padding:0 18px}` (0,2,0), zeroing
   the 18px internal padding. Scope the segbtn rules under `.ck-segt` (0,3,0,
   beats the reset) and set inline-flex centering so each pill keeps its
   breathing room and the active pill shows white + shadow + green-800 text. */
.co-checkout-root .ck-segt .ck-segbtn{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 18px; border-radius:8px; font-size:13px; font-weight:600; color:var(--wm-ink-500); background:transparent; box-shadow:none; border:0; margin:0; line-height:1; white-space:nowrap; transition:background var(--wm-dur-fast), color var(--wm-dur-fast), box-shadow var(--wm-dur-fast); }
.co-checkout-root .ck-segt .ck-segbtn:hover{ color:var(--wm-ink-800); }
.co-checkout-root .ck-segt .ck-segbtn.on{ background:#fff; color:var(--wm-green-800); box-shadow:var(--wm-shadow-sm); }

.ck-row{ display:grid; gap:11px; margin-bottom:11px; }
.ck-row.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ck-field{ display:flex; flex-direction:column; min-width:0; }
.ck-label{ font-size:11.5px; font-weight:600; color:var(--wm-ink-700); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.ck-label-opt{ font-size:10.5px; font-weight:500; color:var(--wm-ink-400); }
.co-checkout-root .ck-input, .co-checkout-root .ck-select{ width:100%; height:42px; padding:0 13px; margin:0; border:1px solid var(--wm-ink-200); border-radius:9px; background:#fff; background-image:none; font-size:13.5px; box-shadow:none; -webkit-box-shadow:none; text-indent:0; transition:border-color var(--wm-dur-fast), box-shadow var(--wm-dur-fast); }
.ck-input.mono{ font-family:var(--wm-font-mono); font-size:13px; }
.ck-input:focus, .ck-select:focus{ outline:none; border-color:var(--wm-green-400); box-shadow:0 0 0 3px rgba(44,179,156,0.14); }
.ck-input::placeholder{ color:var(--wm-ink-400); }
.ck-subhead{ margin:18px 0 9px; }

/* Connected field-group (G-04 — hardest) */
.fg{ border:1px solid var(--wm-ink-200); border-radius:11px; overflow:hidden; background:#fff; transition:border-color var(--wm-dur-fast), box-shadow var(--wm-dur-fast); margin-bottom:11px; }
.fg:last-child{ margin-bottom:0; }
.ck-fieldset .fg{ margin-bottom:15px; }
.fg:focus-within{ border-color:var(--wm-green-400); box-shadow:0 0 0 3px rgba(44,179,156,0.14); }
.fg-row{ display:grid; }
.fg-row.c2{ grid-template-columns:1fr 1fr; }
.fg-row + .fg-row{ border-top:1px solid var(--wm-ink-200); }
.fg-cell{ padding:8px 13px; min-width:0; display:flex; flex-direction:column; }
.fg-cell + .fg-cell{ border-left:1px solid var(--wm-ink-200); }
.fg-cell > label{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--wm-ink-500); margin-bottom:2px; }
.fg-cell > label .ck-label-opt{ font-size:9.5px; font-weight:500; color:var(--wm-ink-300); }
/* U2 — the legacy `input[type=text]{margin:0 .327em; box-shadow:inset 0 1px 2px #d8d4d3,0 1px #fff}`
   rule (style.css:455) bled a ~4.4px left margin (input shifted right of the
   label) + an inset shadow that read as a stray bar under the field. We never
   reset margin/box-shadow on .fg-cell input, so they leaked. Scope under
   .co-checkout-root (beats the type selector) and zero margin + shadow so the
   label and value share the exact same flush-left edge, no underline. */
.co-checkout-root .fg-cell input{ border:0; outline:0; width:100%; min-width:0; background:none; background-image:none; font-size:13.5px; color:var(--wm-ink-900); padding:0; margin:0; height:20px; box-shadow:none; -webkit-box-shadow:none; text-indent:0; }
.fg-cell input.mono{ font-family:var(--wm-font-mono); font-size:13px; letter-spacing:0.01em; }
.fg-cell input::placeholder{ color:var(--wm-ink-300); }
/* Readonly fields (filled from the CNPJ/Serpro lookup) get a tinted background +
   muted text so it's visually clear they can't be edited. The tint sits on the
   .fg-cell (the input itself is transparent); :has() covers modern browsers and
   the .fg-cell--locked class (added by checkout-v2.js) is the no-:has() fallback. */
.co-checkout-root .fg-cell input[readonly],
.co-checkout-root .fg-cell select[readonly]{ color:var(--wm-ink-500); cursor:not-allowed; }
/* Tint the WHOLE cell (incl. the input area) so an autofilled readonly field reads
   as locked, not just a thin border. The cell carries the bg; the input is
   transparent so the tint shows through its full width. :has() covers modern
   browsers; .fg-cell--locked (added by checkout-v2.js) is the no-:has() fallback. */
.co-checkout-root .fg-cell:has(input[readonly]),
.co-checkout-root .fg-cell:has(select[readonly]),
.co-checkout-root .fg-cell.fg-cell--locked{ background:var(--wm-ink-50) !important; }
.co-checkout-root .fg-cell:has(input[readonly]) input,
.co-checkout-root .fg-cell.fg-cell--locked input,
.co-checkout-root .fg-cell.fg-cell--locked select{ background:transparent !important; }
.co-checkout-root .fg-cell:has(input[readonly]) > label,
.co-checkout-root .fg-cell:has(select[readonly]) > label,
.co-checkout-root .fg-cell.fg-cell--locked > label{ color:var(--wm-ink-400); }
.fg-cell select{ border:0; outline:0; width:100%; min-width:0; background:transparent; font-size:13.5px; color:var(--wm-ink-900); padding:0; height:20px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B9691' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; background-size:14px; cursor:pointer; }
.fg-row.r2a{ grid-template-columns:2fr 1fr; }
.fg-row.r2a .fg-cell + .fg-cell{ border-left:1px solid var(--wm-ink-200); }
.fg[hidden]{ display:none; }
.fg-pwd{ display:flex; align-items:center; gap:8px; margin:-3px 0 11px 1px; }
.ck-pwd-meter{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.ck-pwd-bars{ display:flex; gap:4px; flex:0 0 auto; }
.ck-pwd-bar{ width:22px; height:4px; border-radius:999px; background:var(--wm-ink-200); transition:background var(--wm-dur-fast); }
.ck-pwd-lbl{ font-size:11.5px; font-weight:600; color:var(--wm-ink-400); }
.ck-fieldset[hidden]{ display:none; }

/* Payment methods (G-06 / INT-02 / INT-08) */
.co-sec{ font-size:15px; font-weight:600; color:var(--wm-ink-900); margin-bottom:12px; }
.co-sec.mt{ margin-top:24px; }
.co-methods{ display:flex; flex-direction:column; gap:9px; }
/* .co-method is a <button>; the active border/bg rules are scoped under
   .co-checkout-root so they beat the generic button reset (which zeroed bg
   and let the green active border collapse to ink). */
/* The <button>.co-method inherits a legacy theme/WC button reset that zeroes
   border-width+style (computed 0px none), collapsing the 1.5px proto outline so
   only the active halo showed (round-4 R4-C). Force the border SHORTHAND with
   !important so width+style+color all stick: base = pn-border, hover = green-300,
   active = green-600 + soft halo. Matches proto .co-method exactly. */
/* The same legacy button reset that zeroed the border also zeroes the padding
   (computed 0px → methods collapse to ~42px, no breathing room — round-6 R6).
   Force the proto padding 13px 14px with !important so the methods get their full
   ~64px height like the design ref. */
.co-checkout-root .co-method{ display:flex; align-items:center; gap:12px; padding:13px 14px !important; border:1.5px solid var(--pn-border) !important; border-radius:12px; background:#fff; cursor:pointer; text-align:left; width:100%; transition:border-color var(--wm-dur-fast), background var(--wm-dur-fast), box-shadow var(--wm-dur-fast); }
.co-checkout-root .co-method:hover{ border:1.5px solid var(--wm-green-300) !important; }
.co-checkout-root .co-method.on{ border:1.5px solid var(--wm-green-600) !important; box-shadow:0 0 0 3px rgba(14,153,132,0.10); }
.co-method-ico{ width:44px; height:30px; flex:0 0 auto; border-radius:7px; border:1px solid var(--pn-border); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--wm-ink-700); overflow:hidden; }
.co-method-ico svg{ width:25px; height:auto; }
.co-method.mc .co-method-ico{ background:#1A1A1A; border-color:#1A1A1A; }
.co-method-main{ flex:1 1 auto; min-width:0; }
.co-method-name{ font-size:14px; font-weight:600; color:var(--wm-ink-900); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.co-method-meta{ font-size:11.5px; color:var(--wm-ink-500); margin-top:2px; }
.co-method-badge{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; background:var(--wm-green-100); color:var(--wm-green-800); }
.co-radio{ width:20px; height:20px; flex:0 0 auto; border-radius:50%; border:2px solid var(--wm-ink-300); display:inline-flex; align-items:center; justify-content:center; }
.co-checkout-root .co-method.on .co-radio{ border-color:var(--wm-green-600); }
.co-checkout-root .co-method.on .co-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--wm-green-600); }
/* native radios are visually hidden but kept focusable/in-DOM (a11y).
   The custom .co-radio is the ONLY visible dot — kill the native radio paint
   (appearance:none + zero box) so it never shows through as a 2nd dot, and
   neutralise the legacy `.radio{display:block!important;padding-left:20px}`
   rule from custom_css_checkout() which forced the native control visible. */
.co-checkout-root .co-method-radio,
.co-checkout-root input.input-radio.co-method-radio{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 !important;
  opacity:0; pointer-events:none; -webkit-appearance:none; appearance:none;
  display:inline-block !important;
}

.co-pane{ margin-top:14px; }
.co-methods > .co-pane{ margin-top:-2px; }
.co-pane[hidden]{ display:none; }
.co-note{ display:flex; gap:11px; padding:15px 16px; border:1px solid var(--pn-border); border-radius:12px; background:#FBFCFB; font-size:13px; color:var(--wm-ink-700); line-height:1.5; }
.co-note svg{ width:18px; height:18px; flex:0 0 auto; color:var(--wm-green-600); margin-top:1px; }
.co-note b{ color:var(--wm-ink-900); }

/* Card pane — styled note only (decision 5): no inline card form fabricated.
   These .ck-input/.ck-select/.ck-field styles also serve any fields the
   userede gateway natively renders (parcelas/país/CEP cobrança). */
.pm-form > .ck-field{ margin-bottom:15px; }
.pm-sec-lbl{ font-size:13px; font-weight:600; color:var(--wm-ink-900); margin-bottom:11px; }

/* Terms (G-10 / INT-03) */
.co-terms{ display:flex; gap:11px; align-items:flex-start; margin-top:20px; }
/* .co-check is a <button>; the checked (.on) green fill is scoped under
   .co-checkout-root to beat the generic button{background:none} reset. */
.co-checkout-root .co-check{ width:22px; height:22px; flex:0 0 auto; border:1.5px solid var(--wm-ink-300); border-radius:7px; background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; transition:background var(--wm-dur-fast), border-color var(--wm-dur-fast); }
.co-checkout-root .co-check svg{ width:13px; height:13px; stroke-width:3; color:#fff; opacity:0; }
.co-checkout-root .co-check.on{ background:var(--wm-green-700); border-color:var(--wm-green-700); }
.co-checkout-root .co-check.on svg{ opacity:1; }
/* Native #terms is mirrored by the styled .co-check button — keep it visually-hidden but
   submittable. A legacy theme rule (#order_review input / .input-checkbox) wins on position +
   size, defeating the clip and leaving a SECOND native checkmark beside .co-check (round-3
   residue). Force the visually-hidden geometry so only the .co-check glyph renders. */
body.checkout-v2 .co-terms .co-terms-native,
.co-terms-native{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap; border:0 !important; opacity:0 !important; pointer-events:none; }
.co-terms-txt{ font-family:var(--wm-font-sans); font-size:12.5px; color:var(--wm-ink-600); line-height:1.6; }
.co-terms-txt b{ color:var(--wm-ink-900); font-weight:600; }
.co-terms-txt a{ color:var(--wm-green-700); font-weight:600; text-decoration:none; }
.co-terms-txt a:hover{ text-decoration:underline; text-underline-offset:2px; }
.co-terms-txt .req, .co-terms-txt .required{ color:var(--wm-red-600); }

/* Primary CTA (G-07 / INT-08) — keeps name/id place_order, no disabled gate.
   The legacy .btn-finalizar_compra classes were DROPPED from the markup so the
   lime/pill `.checkout .btn-finalizar_compra` !important rule no longer matches.
   Scoped under .co-checkout-root for cascade robustness (no !important spam). */
.co-checkout-root .co-pay-btn,
.co-checkout-root input.co-pay-btn[type="submit"]{ width:100%; margin-top:18px; height:52px; border-radius:12px; background:var(--wm-green-700); color:#fff; font-size:15.5px; font-weight:600; font-family:var(--wm-font-sans); border:0; cursor:pointer; transition:background var(--wm-dur-fast), opacity var(--wm-dur-fast), transform var(--wm-dur-fast); display:inline-flex; align-items:center; justify-content:center; gap:9px; -webkit-appearance:none; appearance:none; text-shadow:none; text-transform:none; letter-spacing:0; line-height:1; }
.co-checkout-root .co-pay-btn svg{ width:17px; height:17px; }
.co-checkout-root .co-pay-btn:hover{ background:var(--wm-green-800); color:#fff; }
.co-checkout-root .co-pay-btn:active{ transform:scale(0.99); }
.co-checkout-root .co-pay-btn:disabled{ opacity:0.45; cursor:not-allowed; }
.co-foot{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; font-size:11.5px; color:var(--wm-ink-400); text-align:center; }
.co-foot svg{ width:13px; height:13px; color:var(--wm-green-600); flex:0 0 auto; }
.co-foot strong{ color:var(--wm-ink-600); font-weight:700; }

/* ---------- Summary (right — green column) (G-05) ---------- */
.co-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:var(--wm-green-700); }
.co-pay-to{ font-size:13px; color:var(--wm-ink-500); margin-top:10px; }
.co-prod{ margin-top:16px; margin-bottom:16px; padding:16px 17px; background:#fff; border:1px solid var(--wm-green-200); border-radius:13px; }
.co-prod-name{ font-size:14.5px; font-weight:700; color:var(--wm-ink-900); }
.co-prod-meta{ font-size:12px; color:var(--wm-ink-500); margin-top:3px; }
.co-prod-div{ height:1px; background:var(--wm-green-100); margin:13px 0 12px; }
.co-amount{ font-family:var(--wm-font-display); font-size:34px; font-weight:600; color:var(--wm-ink-900); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; margin-top:5px; min-height:41px; }
.co-amount small{ font-size:15px; font-weight:500; color:var(--wm-ink-500); letter-spacing:0; margin-left:4px; }
.co-plan-card{ display:flex; align-items:flex-start; gap:14px; margin-top:24px; padding:16px 17px; border:1px solid var(--wm-green-100); border-radius:14px; background:#fff; }
.co-plan-ico{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--wm-green-700); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.co-plan-ico svg{ width:21px; height:21px; stroke-width:1.7; }
.co-plan-main{ min-width:0; flex:1 1 auto; }
.co-plan-name{ font-size:14.5px; font-weight:600; color:var(--wm-ink-900); }
.co-plan-meta{ font-size:12px; color:var(--wm-ink-500); margin-top:3px; line-height:1.5; }
.co-plan-tag{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; background:var(--wm-green-50); color:var(--wm-green-700); border:1px solid var(--wm-green-200); }
.co-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid rgba(0,105,90,0.12); }
.co-line:first-of-type{ margin-top:18px; }
.co-line-k{ font-size:13.5px; color:var(--wm-ink-900); }
.co-line-k small{ display:block; font-size:12px; color:var(--wm-ink-500); margin-top:3px; }
.co-line-v{ font-size:13.5px; color:var(--wm-ink-900); font-variant-numeric:tabular-nums; white-space:nowrap; }
.co-line-v.muted{ color:var(--wm-ink-500); }
.co-line-v.disc{ color:var(--wm-green-700); font-weight:600; }
.co-line[hidden]{ display:none; }
.co-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-top:17px; margin-top:2px; border-top:1px solid var(--wm-green-200); }
.co-total-k{ font-size:14px; font-weight:600; color:var(--wm-ink-900); }
.co-total-k small{ display:block; font-size:11.5px; font-weight:400; color:var(--wm-ink-500); margin-top:2px; }
.co-total-v{ font-family:var(--wm-font-display); font-size:22px; font-weight:600; color:var(--wm-ink-900); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; min-height:27px; }
.co-install{ display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 16px; border-radius:12px; background:#fff; border:1px solid var(--wm-green-300); box-shadow:var(--wm-shadow-sm); font-size:13.5px; color:var(--wm-ink-700); line-height:1.45; font-variant-numeric:tabular-nums; }
.co-install svg{ width:21px; height:21px; flex:0 0 auto; color:var(--wm-green-700); stroke-width:1.9; }
.co-install b{ color:var(--wm-green-800); font-weight:700; }
.co-features-lbl{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--wm-green-700); margin-bottom:7px; }
.co-feat{ display:flex; align-items:flex-start; gap:9px; padding:5px 0; font-size:12.5px; color:var(--wm-ink-700); }
.co-feat svg{ width:16px; height:16px; flex:0 0 auto; color:var(--wm-green-600); stroke-width:2.4; margin-top:1px; }

/* Trust card (G-09) */
.ck-trust{ margin-top:26px; padding:20px 22px; background:var(--pn-bg); border:1px solid var(--pn-border); border-radius:14px; display:flex; flex-direction:column; gap:11px; }
.ck-trust-item{ display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--wm-ink-700); line-height:1.4; }
.ck-trust-item b{ color:var(--wm-ink-900); font-weight:700; }
.ck-trust-ico{ width:15px; height:15px; flex:0 0 auto; border-radius:50%; background:var(--wm-green-600); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.ck-trust-ico svg{ width:9px; height:9px; stroke-width:3.2; }

/* Footer */
.ck-footer{ border-top:1px solid var(--pn-border); background:#fff; }
.ck-footer-inner{ max-width:none; margin:0 auto; padding:16px 52px; }
.ck-footer-txt{ font-size:9.5px; color:var(--wm-ink-400); line-height:1.55; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.ck-footer-txt strong{ color:var(--wm-ink-600); font-weight:600; }

/* =====================================================================
   NATIVE GENERATED PAGES (Pix / Boleto / thank-you) — visual treatment only
   Applied to native WC plugin output where it renders. NO JS step machine.
   ===================================================================== */
.co-gen{ max-width:560px; margin:0 auto; padding:48px 24px 56px; }
.co-gen-back{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--wm-ink-500); margin-bottom:24px; }
.co-gen-back:hover{ color:var(--wm-green-700); }
.co-gen-back svg{ width:15px; height:15px; stroke-width:2; }
.co-gen-eyebrow{ font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--wm-green-700); }
.co-gen-title{ font-family:var(--wm-font-display); font-size:25px; font-weight:600; color:var(--wm-ink-900); letter-spacing:-0.015em; margin-top:7px; }
.co-gen-title span{ font-variant-numeric:tabular-nums; }
.co-gen-sub{ font-size:13px; color:var(--wm-ink-500); margin-top:9px; line-height:1.55; }
.co-genbox{ border:1px solid var(--pn-border); border-radius:16px; padding:24px; margin-top:24px; }
.co-genrow{ display:flex; gap:22px; align-items:center; }
.co-gen-qr{ width:150px; height:150px; flex:0 0 auto; border-radius:12px; background:#fff; border:1px solid var(--wm-green-200); padding:10px; }
.co-gen-qr img, .co-gen-qr svg{ width:100%; height:100%; }
.co-gen-amt{ font-family:var(--wm-font-display); font-size:27px; font-weight:600; color:var(--wm-ink-900); font-variant-numeric:tabular-nums; }
.co-gen-meta{ font-size:12.5px; color:var(--wm-ink-500); margin-top:7px; line-height:1.5; }
.co-codelbl{ font-size:11px; font-weight:600; color:var(--wm-ink-500); margin:18px 0 7px; }
.co-codebox{ display:flex; align-items:center; gap:12px; border:1px solid var(--pn-border); border-radius:12px; background:#FBFCFB; padding:13px 15px; }
.co-codebox code{ flex:1 1 auto; min-width:0; font-family:var(--wm-font-mono); font-size:11.5px; color:var(--wm-ink-800); word-break:break-all; line-height:1.55; }
.co-copybtn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; flex:0 0 auto; border-radius:9px; border:1px solid var(--wm-ink-200); background:#fff; font-size:12.5px; font-weight:600; color:var(--wm-ink-700); }
.co-copybtn:hover{ background:var(--wm-ink-50); }
.co-copybtn.done{ color:var(--wm-green-700); border-color:var(--wm-green-300); background:var(--wm-green-50); }
.co-copybtn svg{ width:14px; height:14px; }
.co-gen-actions{ display:flex; gap:10px; margin-top:28px; }
.co-result{ display:flex; align-items:center; justify-content:center; min-height:calc(100vh - var(--top-h)); padding:24px; }
.pay-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:38px 24px; }
.pay-state[hidden]{ display:none; }
.pay-spinner{ width:48px; height:48px; border-radius:50%; border:3px solid var(--wm-green-100); border-top-color:var(--wm-green-600); animation:paySpin 720ms linear infinite; }
@keyframes paySpin{ to{ transform:rotate(360deg); } }
.pay-state-ico{ width:62px; height:62px; border-radius:50%; background:var(--wm-green-50); color:var(--wm-green-700); border:1px solid var(--wm-green-200); display:inline-flex; align-items:center; justify-content:center; }
.pay-state-ico svg{ width:30px; height:30px; stroke-width:2.4; }
.pay-state-title{ font-family:var(--wm-font-display); font-size:22px; font-weight:600; color:var(--wm-ink-900); margin-top:18px; letter-spacing:-0.01em; }
.pay-state-desc{ font-size:13.5px; color:var(--wm-ink-500); margin-top:9px; max-width:42ch; line-height:1.6; }
.pay-receipt{ width:100%; max-width:380px; margin:22px auto 0; border:1px solid var(--pn-border); border-radius:14px; overflow:hidden; }
.pay-receipt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-top:1px solid #EEF2F0; font-size:13px; }
.pay-receipt-row:first-child{ border-top:0; }
.pay-receipt-row .k{ color:var(--wm-ink-500); }
.pay-receipt-row .v{ color:var(--wm-ink-900); font-weight:600; font-variant-numeric:tabular-nums; }
.cfg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 20px; border-radius:11px; border:1px solid transparent; font-size:14px; font-weight:600; cursor:pointer; transition:background var(--wm-dur-fast), border-color var(--wm-dur-fast); }
.cfg-btn svg{ width:16px; height:16px; stroke-width:1.9; }
.cfg-btn.primary{ background:var(--wm-green-700); color:#fff; }
.cfg-btn.primary:hover{ background:var(--wm-green-800); }
.cfg-btn.ghost{ background:#fff; color:var(--wm-ink-700); border-color:var(--wm-ink-200); }
.cfg-btn.ghost:hover{ background:var(--wm-ink-50); border-color:var(--wm-ink-300); color:var(--wm-ink-900); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .co-grid{ grid-template-columns:1fr; min-height:0; }
  .co-summary{ order:-1; border-right:0; border-bottom:1px solid var(--wm-green-100); }
  .co-form .co-inner, .co-summary .co-inner{ max-width:560px; margin:0 auto; }
  /* iOS Safari sticky guard — disable sticky once the grid collapses */
  .co-summary .co-inner{ position:static; top:auto; }
  .co-col{ padding:36px 26px 40px; }
  .site-top-grid{ grid-template-columns:1fr; }
  .site-top-right{ display:none; }
  .site-top-left{ padding:0 26px; }
  .site-top-logo{ max-width:560px; margin:0 auto; }
}
@media (max-width:560px){
  .site-top-left{ padding:0 16px; }
  .site-top-mid{ display:none; }
  .ck-row.cols-2{ grid-template-columns:1fr; }
  /* collapse connected 2-col rows to 1-col so 320/360 devices stay usable */
  .fg-row.c2{ grid-template-columns:1fr; }
  .fg-row.r2a{ grid-template-columns:1fr; }
  .fg-row.c2 .fg-cell + .fg-cell,
  .fg-row.r2a .fg-cell + .fg-cell{ border-left:0; border-top:1px solid var(--wm-ink-200); }
  .co-genrow{ flex-direction:column; align-items:flex-start; }
  .ck-footer-txt{ white-space:normal; }
  .ck-footer-inner{ padding:20px 24px; }
}