/* ============================================================================
   ChatGPT Checkout — complete stylesheet
   Sections:
     1.  Design tokens + reset
     2.  Plans page
     3.  Checkout page — layout, form fields, wallets, summary
     4.  Wallet <dialog> sheets (Apple Pay, Google Pay)
     5.  Offer banner
     6.  Overlay screens (loading, OTP, charge, custom views, rejected)
     7.  Post-payment "getting your plan ready" animation
     8.  Motion / reduced-motion
   ============================================================================ */

/* ───────────────────────── 1. Tokens + reset ───────────────────────── */
:root{
  --bg:#ffffff; --surface:#f4f4f5; --text:#0d0d0d; --muted:#6b6b6b; --line:#e3e3e3;
  --accent:#10a37f; --accent-text:#ffffff; --blue:#2c67c5;
  --btn:#0d0d0d; --btn-text:#ffffff; --err:#c62828;
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171717; --surface:#242424; --text:#f2f2f2; --muted:#a0a0a0; --line:#383838;
    --btn:#f2f2f2; --btn-text:#0d0d0d; --err:#ff8a80; --blue:#6f9df0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#171717; --surface:#242424; --text:#f2f2f2; --muted:#a0a0a0; --line:#383838;
  --btn:#f2f2f2; --btn-text:#0d0d0d; --err:#ff8a80; --blue:#6f9df0;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:56px 20px 72px}

/* ───────────────────────── 2. Plans page ───────────────────────── */
.brand-mark{
  display:block;margin:0 auto 28px;
  width:34px;height:34px;object-fit:contain;border-radius:6px;
}
h1{
  font-size:clamp(28px,5vw,40px);text-align:center;
  margin:0 0 8px;font-weight:600;letter-spacing:-.02em;
}
.sub{text-align:center;color:var(--muted);margin:0 0 28px}
.plans-head .sub{margin-bottom:36px}

.toggle{
  display:flex;width:fit-content;margin:0 auto 36px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:4px;
}
.toggle button{
  border:0;background:transparent;color:var(--muted);font-size:14px;
  padding:8px 18px;border-radius:999px;cursor:pointer;
}
.toggle button[aria-pressed="true"]{
  background:var(--bg);color:var(--text);box-shadow:0 0 0 1px var(--line);
}

.plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:960px;margin:0 auto;
}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:440px}}

.plan{
  border:1px solid var(--line);border-radius:20px;padding:28px 24px;
  display:flex;flex-direction:column;
}
.plan.featured{border:2px solid var(--accent)}
.badge{
  align-self:flex-start;background:var(--accent);color:var(--accent-text);
  font-size:12px;padding:2px 10px;border-radius:999px;margin-bottom:10px;
}
.plan h2{margin:0;font-size:22px;font-weight:600}
.tag{color:var(--muted);font-size:14px;margin:4px 0 18px;min-height:42px}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.amt{font-size:42px;font-weight:600;letter-spacing:-.02em}
.amt.custom{font-size:28px}
.per{color:var(--muted);font-size:14px}
.price s{color:var(--muted);font-size:22px;font-weight:400;margin-right:8px}
.note{color:var(--muted);font-size:13px;margin:0 0 20px;min-height:20px}

.cta{
  font-weight:500;border-radius:999px;padding:12px 16px;cursor:pointer;
  border:1px solid var(--line);background:transparent;width:100%;
}
.featured .cta{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.cta.dark{background:var(--btn);color:var(--btn-text);border-color:var(--btn)}

ul.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;font-size:14px}
ul.checks li{display:flex;gap:10px;align-items:flex-start}
ul.checks li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
ul.checks li svg{
  width:20px;height:20px;flex:none;color:var(--blue);
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Little "LIVE" pill + current-plan state from your original */
.plan .lt{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:2px 9px;
}
.plan .lt::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:5px;
  border:1.4px solid currentColor;border-radius:50%;vertical-align:-1px;
  background:conic-gradient(currentColor 0 25%,transparent 0 100%);
  -webkit-mask:radial-gradient(circle at center,transparent 2.2px,#000 2.6px);
          mask:radial-gradient(circle at center,transparent 2.2px,#000 2.6px);
}
.plan.current{opacity:.92}
.plan.current .cta{color:var(--muted);pointer-events:none}

.trust{text-align:center;color:var(--muted);font-size:13px;margin-top:28px}
.faq{max-width:680px;margin:56px auto 0}
.faq h3{text-align:center;font-size:22px;margin:0 0 16px;font-weight:600}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:500}
details p{color:var(--muted);margin:8px 0 0;font-size:14px}

.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  background:var(--btn);color:var(--btn-text);
  padding:10px 18px;border-radius:999px;font-size:14px;max-width:90%;
  z-index:200;
}

/* ───────────────────────── 3. Checkout page ───────────────────────── */
#viewCheckout{max-width:1060px;padding-top:40px}
.co-head{display:flex;align-items:center;gap:12px;margin-bottom:44px}
.co-head h1{margin:0;text-align:left;font-size:28px;line-height:34px;font-weight:500}
.back{
  width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--text);
  text-decoration:none;
}
.back:hover{background:var(--surface)}
.back svg{width:24px;height:24px}

.co{
  display:flex;justify-content:space-between;align-items:flex-start;gap:72px;
}
@media (max-width:1000px){.co{gap:48px}}
@media (max-width:820px){.co{flex-direction:column;gap:32px;align-items:stretch}}

#payForm{width:486px;max-width:100%;flex:none}
.sec-title{font-size:18px;line-height:24px;font-weight:500;padding:0 8px;margin:0 0 16px}
.sec-title.next{margin-top:32px}

/* Apple Pay / Google Pay wallet buttons */
.wallets{display:grid;gap:8px}
.wallet{
  height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#000;color:#fff;
  border:1px solid #333;border-radius:999px;
  font-size:17px;font-weight:600;cursor:pointer;
  --logo-h:100%;
}
.wallet svg.paymark{height:22px;width:auto;display:block}
.wallet[data-w="Apple Pay"]{--logo-h:100%}

.or{
  display:flex;align-items:center;gap:12px;color:var(--muted);
  font-size:12px;font-weight:500;margin:20px 0;
}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Card / PayPal method buttons */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.method{
  height:77px;text-align:left;border:2px solid transparent;
  background:var(--surface);color:var(--muted);
  border-radius:24px;padding:14px 18px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:16px;font-weight:500;
}
.method[aria-checked="true"]{
  background:var(--bg);color:var(--text);border-color:var(--muted);
}
.method.na{opacity:.55;cursor:not-allowed}
.method svg{width:24px;height:24px}
.method .brand-logo{height:24px;width:auto}

/* Floating-label fields */
.field{position:relative;margin-bottom:12px}
.field label{
  position:absolute;left:21px;top:25px;
  font-size:17px;line-height:22px;color:var(--muted);
  pointer-events:none;transition:top .12s,font-size .12s;
}
.field:focus-within label,
.field:has(input:not(:placeholder-shown)) label,
.field:has(select) label{
  top:13px;font-size:12px;line-height:16px;
}
.field input,.field select{
  width:100%;height:72px;font:inherit;font-size:16px;
  padding:30px 20px 8px;border-radius:24px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);
  appearance:none;-webkit-appearance:none;
}
.field input::placeholder{color:transparent}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:var(--err)}

.chips{
  position:absolute;right:16px;top:25px;display:flex;gap:4px;pointer-events:none;
}
.chips img.cardstrip{
  height:22px;width:auto;border-radius:4px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

.err{display:block;color:var(--err);font-size:12px;line-height:16px;margin:4px 0 0 8px}
.err:empty{display:none}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.save-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:4px 4px 0;font-size:14px;font-weight:500;line-height:20px;
}
.save-row input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:2px 0 0;flex:none;
  border:1px solid var(--muted);border-radius:4px;background:var(--bg);cursor:pointer;
}
.save-row input:checked{
  background:var(--btn);border-color:var(--btn);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain;
}

.paypal-note{
  background:var(--surface);border-radius:24px;padding:20px;
  color:var(--muted);font-size:14px;margin-bottom:12px;
}

/* Order summary */
.sum{
  width:432px;max-width:100%;flex:none;
  border:1px solid var(--line);border-radius:32px;padding:32px;
  box-shadow:0 4px 25px -5px rgba(0,0,0,.10);
}
@media (max-width:1000px){.sum{width:320px}}
@media (max-width:820px){.sum{width:100%}}
.sum h2{font-size:28px;line-height:34px;font-weight:500;margin:0 0 12px}
.sum .lbl{font-size:15px;line-height:20px;padding:8px 0;margin:0}
ul.feat{list-style:none;padding:0;margin:0 0 12px}
ul.feat li{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:15px;line-height:20px}
ul.feat svg{
  width:20px;height:20px;flex:none;color:var(--blue);
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.sum .feat .ck{color:var(--accent)}
.rule{border-top:1px solid var(--line);margin:12px 0 0}
.lines{
  padding:12px 0 20px;display:grid;gap:6px;
  font-size:14px;line-height:20px;color:var(--muted);
}
.lines div{display:flex;justify-content:space-between;white-space:pre-line}
.lines .due{color:var(--text);font-weight:600;font-size:16px;margin-top:6px}
.lines .promo span:last-child{color:var(--accent)}

.subscribe{
  width:100%;padding:16px;border-radius:999px;border:0;
  background:var(--btn);color:var(--btn-text);
  font-size:16px;font-weight:500;cursor:pointer;
}
.small{color:var(--muted);font-size:12px;line-height:20px;margin:12px 0 0}
.legal{
  color:var(--muted);font-size:12px;line-height:16px;
  padding:16px 12px 0;max-width:432px;
}
.legal a{color:inherit;text-decoration:underline}
.result{
  margin-top:12px;padding:14px 16px;border-radius:16px;
  background:var(--surface);font-size:14px;
}

/* ───────────────────────── 4. Wallet <dialog> sheets ───────────────────────── */
.paySheet{
  border:0;border-radius:20px;padding:0;
  width:360px;max-width:calc(100% - 32px);overflow:hidden;color:#000;
}
.paySheet::backdrop{background:rgba(0,0,0,.55)}
.paySheet .ps-head{
  padding:22px 24px 16px;display:flex;align-items:center;justify-content:space-between;
}
.paySheet .ps-head img,
.paySheet .ps-head svg{height:22px;width:auto}
.paySheet .ps-close{
  border:0;background:#0000000d;width:28px;height:28px;border-radius:50%;
  cursor:pointer;color:#000;font-size:15px;line-height:1;
}
.paySheet .ps-amt{padding:0 24px 18px;font-size:15px;color:#444}
.paySheet .ps-amt b{color:#000;font-weight:600}
.paySheet .ps-body{padding:0 24px 24px;display:grid;gap:10px}
.paySheet .ps-field{
  border:1px solid #ddd;border-radius:12px;padding:13px 14px;
  font:inherit;font-size:15px;width:100%;
}
.paySheet .ps-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paySheet .ps-pay{
  border:0;border-radius:999px;padding:15px;
  font-size:16px;font-weight:600;cursor:pointer;width:100%;margin-top:6px;
}
.paySheet .ps-note{padding:0 24px 22px;font-size:11px;color:#8a8a8a;text-align:center}

/* Apple's look: near-black sheet, pill fields, white pill Pay button */
#applePaySheet{background:#1c1c1e;color:#fff}
#applePaySheet .ps-close{background:#3a3a3c;color:#fff}
#applePaySheet .ps-amt{color:#a1a1a6}
#applePaySheet .ps-amt b{color:#fff}
#applePaySheet .ps-field{background:#2c2c2e;border-color:#3a3a3c;color:#fff;border-radius:12px}
#applePaySheet .ps-field::placeholder{color:#8e8e93}
#applePaySheet .ps-pay{background:#fff;color:#000}
#applePaySheet .ps-note{color:#8e8e93}

/* Google's look: white card, squarer corners, blue filled Pay button */
#googlePaySheet{background:#fff;color:#202124}
#googlePaySheet .ps-head{border-bottom:1px solid #e8eaed;padding-bottom:14px}
#googlePaySheet .ps-close{background:#f1f3f4}
#googlePaySheet .ps-amt{color:#5f6368}
#googlePaySheet .ps-field{border-radius:8px;border-color:#dadce0}
#googlePaySheet .ps-pay{background:#1a73e8;color:#fff;border-radius:8px}
#googlePaySheet .ps-pay:hover{background:#1765cc}

/* ───────────────────────── 5. Offer banner ───────────────────────── */
.offer{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:-16px auto 36px;max-width:760px;padding:13px 18px;
  border:1px solid #b7d3f5;background:#eaf3fe;color:#1c64c8;
  border-radius:14px;font-size:15px;font-weight:500;
}
.offer svg{width:18px;height:18px;flex:none;fill:currentColor}
.offer a{color:inherit;text-decoration:underline;font-weight:400;margin-left:2px}
.offer a::after{content:" \2192";text-decoration:none}
@media (max-width:640px){.offer{font-size:13px}}

/* ───────────────────────── 6. Overlay screens ───────────────────────── */
.screen{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.screen-card{
  background:var(--bg);border-radius:24px;
  padding:36px 28px;max-width:420px;width:100%;
  text-align:center;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.35);
}
.screen-card.dark{
  background:#1a162b;color:#fff;border:1px solid #2d2645;
}
.screen-card h3{font-size:1.4rem;font-weight:600;margin:0 0 10px}
.screen-card p{color:var(--muted);margin:0 0 20px;font-size:14px;line-height:1.6}
.screen-card.dark p{color:#a0a0b0}
.screen-card.dark h3{color:#fff}

.ico{font-size:2.5rem;display:block;margin-bottom:14px}

.spinner{
  display:inline-block;width:56px;height:56px;
  border:4px solid rgba(16,163,127,.25);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:20px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.otp-input{
  width:100%;padding:14px;
  font-size:1.5rem;text-align:center;letter-spacing:10px;font-weight:700;
  border:2px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--text);
  margin-bottom:14px;font-family:monospace;
}
.otp-input:focus{border-color:var(--accent);outline:none}

.btn-primary{
  width:100%;background:var(--btn);color:var(--btn-text);
  border:0;padding:14px;border-radius:999px;
  font-weight:600;font-size:16px;cursor:pointer;
}

/* ───────────────────────── 7. Ready animation ───────────────────────── */
.ready{
  position:fixed;inset:0;z-index:50;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.ready-in{width:min(560px,100%);margin:auto}
.ready h1{
  text-align:left;margin:0 0 5px;
  font-size:19px;line-height:26px;font-weight:500;letter-spacing:-.01em;
  background:linear-gradient(90deg,
    var(--muted) 0%,var(--text) 40%,var(--text) 60%,var(--muted) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sweep 2.4s ease-in-out infinite;
}
.ready.done h1{
  animation:none;background:none;
  -webkit-text-fill-color:var(--text);color:var(--text);
}
.ready-line{height:22px;overflow:hidden;position:relative}
.ready-line span{
  position:absolute;left:0;top:0;
  font-size:14px;line-height:22px;color:var(--muted);white-space:nowrap;
  animation:rise .5s ease both;
}
.ready-line span.out{animation:fall .4s ease both}
@keyframes sweep{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}
@keyframes rise{
  from{transform:translateY(100%);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes fall{
  from{transform:none;opacity:1}
  to{transform:translateY(-100%);opacity:0}
}

/* ───────────────────────── 8. Motion / reduced-motion ───────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .plan,.method{transition:border-color .15s}
}
@media (prefers-reduced-motion:reduce){
  .ready h1,.ready-line span,.ready-line span.out,
  .spinner,.paySheet{animation:none}
  .field label{transition:none}
}