/* VERIFPOL PCP checkout — from final PEP v3 (owner-approved design, final corrections 2026-10-25).
   SCOPING: every rule is prefixed with #vp-checkout.vp-checkout (id+class specificity, also beats "#app div"-style rules), so generic application styles
   (h1, a, label, input, button, div, header, main, *, body, .container, #app h1 …) cannot override the
   approved black header, white title, Manrope typography or accent colour. Nothing here targets html/body or any element
   outside #vp-checkout. Accent per product: --vp-accent (inline style on the root). */
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2")}

#vp-checkout.vp-checkout{
  --vp-bg:#0b0c0e; --vp-card:#14161a; --vp-line:#22252b; --vp-line-3:#3a3f47;
  --vp-text:#f2f3f5; --vp-soft:#c9cdd2; --vp-muted:#9aa1ab;
  --vp-accent:#B6C2D0;                 /* PCP Satin Steel (overridable inline) */
  --vp-on-accent:#0b0c0e;
  --vp-bar-h:calc(79px + env(safe-area-inset-bottom,0px));   /* 1 border + 12 + 52 button + 14 + safe area */
  position:relative; display:block; width:100%; min-height:100vh; min-height:100dvh;
  margin:0; padding:0; border:0; background:var(--vp-bg); color:var(--vp-text);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.4; font-weight:400;
  letter-spacing:normal; text-transform:none; text-align:left; -webkit-text-size-adjust:100%;
}
#vp-checkout.vp-checkout *,#vp-checkout.vp-checkout *::before,#vp-checkout.vp-checkout *::after{box-sizing:border-box;margin:0;padding:0;border:0;background:transparent;box-shadow:none;position:static;float:none;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-style:normal;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit;color:inherit;text-decoration:none}

/* Header (black): logo + "Back to VERIFPOL" on one row, tagline below */
#vp-checkout.vp-checkout .vp-top{display:block;margin:0;border:0;border-bottom:1px solid var(--vp-line);padding:16px 16px 12px;background:var(--vp-bg);position:static}
#vp-checkout.vp-checkout .vp-top__row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0;padding:0}
#vp-checkout.vp-checkout .vp-brand{margin:0;padding:0;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:.22em;color:var(--vp-text)}
#vp-checkout.vp-checkout .vp-back{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 0;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:normal;color:var(--vp-soft);text-decoration:none;white-space:nowrap}
#vp-checkout.vp-checkout .vp-back::before{content:"\2190";font-size:14px;line-height:1;color:var(--vp-accent)}
#vp-checkout.vp-checkout .vp-back:hover,#vp-checkout.vp-checkout .vp-back:focus-visible{color:var(--vp-text);text-decoration:underline;text-underline-offset:3px}
#vp-checkout.vp-checkout .vp-back:focus-visible{outline:2px solid var(--vp-accent);outline-offset:3px;border-radius:4px}
#vp-checkout.vp-checkout .vp-tag{margin:2px 0 0;padding:0;font-size:12px;line-height:1.4;font-weight:400;color:var(--vp-muted)}

/* Content; bottom padding reserves the CTA bar's height so the bar can never sit on top of the last consent */
#vp-checkout.vp-checkout .vp-main{display:flex;flex-direction:column;gap:20px;width:100%;max-width:480px;margin:0 auto;border:0;background:transparent;position:static;
  padding:16px 16px calc(var(--vp-bar-h) + 24px)}
#vp-checkout.vp-checkout .vp-cover{display:block;width:100%;margin:0;padding:0;border:0;aspect-ratio:21/9;border-radius:14px;overflow:hidden;background:#1b1e23}
#vp-checkout.vp-checkout .vp-cover img{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;object-fit:cover}
#vp-checkout.vp-checkout .vp-title{margin:0;padding:0;border:0;font-size:22px;line-height:1.2;font-weight:800;font-style:normal;letter-spacing:-.01em;text-transform:none;text-align:left;color:#fff;background:transparent}
#vp-checkout.vp-checkout .vp-price{display:flex;align-items:baseline;gap:10px;margin:8px 0 0;padding:0}
#vp-checkout.vp-checkout .vp-price b{margin:0;padding:0;font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--vp-accent)}
#vp-checkout.vp-checkout .vp-price span{margin:0;padding:0;font-size:14px;line-height:1.4;font-weight:400;color:var(--vp-muted)}

#vp-checkout.vp-checkout .vp-form{display:flex;flex-direction:column;gap:22px;margin:0;padding:0;border:0;background:transparent}
#vp-checkout.vp-checkout .vp-field{display:block;margin:0;padding:0}
#vp-checkout.vp-checkout .vp-label{display:block;margin:0 0 8px;padding:0;font-size:14px;line-height:1.4;font-weight:600;letter-spacing:normal;color:var(--vp-soft)}
#vp-checkout.vp-checkout .vp-input{display:block;width:100%;height:52px;margin:0;border-radius:12px;border:1px solid var(--vp-line-3);background:var(--vp-card);color:var(--vp-text);
  font-size:16px;line-height:normal;font-weight:600;letter-spacing:normal;padding:0 16px;box-shadow:none;-webkit-appearance:none;appearance:none;scroll-margin-bottom:calc(var(--vp-bar-h) + 16px)}
#vp-checkout.vp-checkout .vp-input::placeholder{color:#7c838d;font-weight:500;opacity:1}
#vp-checkout.vp-checkout .vp-input:focus{outline:2px solid var(--vp-accent);outline-offset:2px;border-color:var(--vp-accent);background:var(--vp-card);color:var(--vp-text)}
#vp-checkout.vp-checkout .vp-consents{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0;padding:0;border:0;background:transparent}
#vp-checkout.vp-checkout .vp-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0;padding:0;border:0}

#vp-checkout.vp-checkout .vp-consent{display:grid;grid-template-columns:24px 1fr;column-gap:12px;align-items:start;margin:0;padding:0;cursor:pointer;
  font-size:15px;font-weight:400;letter-spacing:normal;color:var(--vp-soft);scroll-margin-bottom:calc(var(--vp-bar-h) + 16px)}
#vp-checkout.vp-checkout .vp-consent input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:24px;height:24px;min-width:24px;margin:1px 0 0;padding:0;
  border:1.5px solid var(--vp-line-3);border-radius:7px;background:var(--vp-card);box-shadow:none;cursor:pointer}
#vp-checkout.vp-checkout .vp-consent input:checked{background:var(--vp-accent);border-color:var(--vp-accent)}
#vp-checkout.vp-checkout .vp-consent input:checked::after{content:"";width:6px;height:11px;border:solid var(--vp-on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
#vp-checkout.vp-checkout .vp-consent input:focus-visible{outline:2px solid var(--vp-accent);outline-offset:2px}
#vp-checkout.vp-checkout .vp-consent span{display:block;margin:0;padding:0;font-size:15px;line-height:1.55;font-weight:400;color:var(--vp-soft);overflow-wrap:break-word}
#vp-checkout.vp-checkout .vp-consent a{color:var(--vp-accent);font-size:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;background:none;border:0;padding:0;margin:0}
#vp-checkout.vp-checkout .vp-consent a:focus-visible{outline:2px solid var(--vp-accent);outline-offset:3px;border-radius:3px}

/* ONE sticky bottom CTA. position:fixed (independent of any scrolling/overflow ancestor) + reserved spacer in .vp-main above. */
#vp-checkout.vp-checkout .vp-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:block;margin:0;border:0;border-top:1px solid var(--vp-line);background:var(--vp-bg);
  padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
#vp-checkout.vp-checkout .vp-cta-bar__in{display:block;max-width:480px;margin:0 auto;padding:0}
#vp-checkout.vp-checkout .vp-cta{display:block;width:100%;height:52px;margin:0;padding:0 16px;border:0;border-radius:12px;background:var(--vp-accent);color:var(--vp-on-accent);
  font-size:16px;line-height:normal;font-weight:700;letter-spacing:normal;text-align:center;text-decoration:none;box-shadow:none;cursor:pointer;-webkit-appearance:none;appearance:none}
#vp-checkout.vp-checkout .vp-cta:disabled{opacity:.4;cursor:default;background:var(--vp-accent);color:var(--vp-on-accent)}
#vp-checkout.vp-checkout .vp-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
#vp-checkout.vp-checkout .vp-heading{display:block;margin:0;padding:0;border:0;background:transparent}

/* Keyboard / screen-reader focus: anything focusable scrolls into view ABOVE the sticky CTA bar, never under it. */
#vp-checkout.vp-checkout .vp-consent input,#vp-checkout.vp-checkout .vp-consent a,#vp-checkout.vp-checkout .vp-back{scroll-margin-bottom:calc(var(--vp-bar-h) + 16px)}