/* Checkout modal — scoped under .checkout-modal */
.checkout-modal >
:root{--blue:#2F66FF;--blue2:#1F4FE0;--navy:#0B1530;--ink:#101828;--muted:#667085;--line:#E5EAF2;--soft:#F5F7FB;--green:#6EF07B;--danger:#F04438}
.checkout-modal *{box-sizing:border-box}
html.checkout-native-scroll,body.checkout-native-scroll{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:auto;touch-action:pan-y}
.checkout-modal{scroll-behavior:smooth;min-height:100%;overflow-x:hidden;overflow-y:visible;overscroll-behavior-y:auto;touch-action:pan-y}
.checkout-modal{margin:0;background:#EEF2F8;color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.checkout-modal button, .checkout-modal input{font:inherit}
.checkout-modal button{cursor:pointer}
.checkout-modal a{text-decoration:none;color:inherit}
.checkout-modal .checkout{width:calc(100% - 24px);max-width:1480px;min-height:calc(100svh - 24px);margin:12px auto;border-radius:34px;overflow:hidden;background:#fff;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.78fr);box-shadow:0 32px 90px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.04)}
.checkout-modal .proof{position:relative;min-width:0;padding:34px 42px 38px;color:#fff;background:linear-gradient(145deg,#2F66FF 0%,#2458EE 48%,#173FD0 100%);overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.checkout-modal .proof:before{content:"";position:absolute;width:780px;height:780px;border-radius:50%;border:1px solid rgba(255,255,255,.13);top:-410px;right:-220px;box-shadow:0 0 0 84px rgba(255,255,255,.035),0 0 0 170px rgba(255,255,255,.022),0 0 0 255px rgba(255,255,255,.015);z-index:-2}
.checkout-modal .proof:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;left:-180px;bottom:-180px;background:rgba(133,180,255,.26);filter:blur(80px);z-index:-2}
.checkout-modal .topbar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.checkout-modal .brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;letter-spacing:-.04em}
.checkout-modal .logo{width:42px;height:42px;border-radius:14px;background:#fff;color:#0B1530;display:grid;place-items:center;font-size:12px;font-weight:900}
.checkout-modal .secure{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.78)}
.checkout-modal .secure i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(110,240,123,.13)}
.checkout-modal .proof-copy{max-width:770px;margin-top:64px}
.checkout-modal .kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.checkout-modal .kicker i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.checkout-modal h1{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(52px,5.1vw,84px);line-height:.94;letter-spacing:-.02em;margin:17px 0 0;max-width:820px}
.checkout-modal h1 span{color:#9AB5FF}
.checkout-modal .proof-copy p{max-width:650px;margin:17px 0 0;color:rgba(255,255,255,.73);font-size:16px;line-height:1.65}
.checkout-modal .proof-copy p b{color:#fff}
.checkout-modal .reassure{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.checkout-modal .reassure span{padding:9px 11px;border-radius:999px;background:rgba(6,20,68,.18);border:1px solid rgba(255,255,255,.13);font-size:10px;font-weight:800;color:rgba(255,255,255,.83)}
.checkout-modal .fan-block{margin-top:auto;padding-top:38px}
.checkout-modal .fan-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:10px}
.checkout-modal .fan-head div:first-child{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.62)}
.checkout-modal .fan-head div:last-child{font-size:10px;color:rgba(255,255,255,.48)}
.checkout-modal .fan{position:relative;height:345px;display:flex;align-items:flex-end;justify-content:center;perspective:1000px}
.checkout-modal .review{position:absolute;width:180px;height:320px;border-radius:22px;background:#fff;padding:7px;box-shadow:0 25px 55px rgba(5,15,55,.35);border:1px solid rgba(255,255,255,.55);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-origin:center bottom;overflow:hidden;animation:fanIn .75s cubic-bezier(.16,1,.3,1) both}
.checkout-modal .review:hover{z-index:20!important;box-shadow:0 32px 70px rgba(5,15,55,.46)}
.checkout-modal .review .blur{position:absolute;inset:7px;border-radius:16px;background-size:cover;background-position:center;filter:blur(15px);transform:scale(1.12);opacity:.18}
.checkout-modal .review .screen{position:absolute;inset:7px;border-radius:16px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.checkout-modal .review img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.checkout-modal .review .tag{position:absolute;z-index:4;left:13px;right:13px;bottom:13px;border-radius:12px;padding:9px 10px;background:rgba(10,20,43,.86);backdrop-filter:blur(10px);font-size:8px;line-height:1.35;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#fff}
.checkout-modal .r1{transform:translateX(-285px) translateY(62px) rotate(-22deg) scale(.78);z-index:1;animation-delay:.02s}
.checkout-modal .r2{transform:translateX(-145px) translateY(18px) rotate(-11deg) scale(.9);z-index:3;animation-delay:.08s}
.checkout-modal .r3{transform:translateX(0) translateY(0) rotate(0deg) scale(1.02);z-index:7;animation-delay:.14s}
.checkout-modal .r4{transform:translateX(145px) translateY(18px) rotate(11deg) scale(.9);z-index:3;animation-delay:.2s}
.checkout-modal .r5{transform:translateX(285px) translateY(62px) rotate(22deg) scale(.78);z-index:1;animation-delay:.26s}
@keyframes fanIn{from{opacity:0;transform:translateY(100px) scale(.76) rotate(0)}to{opacity:1}}
.checkout-modal .quote-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:5px}
.checkout-modal .quote{padding:11px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);font-size:10px;line-height:1.5;color:rgba(255,255,255,.72)}
.checkout-modal .quote b{display:block;color:#fff;margin-bottom:4px;font-size:11px}
.checkout-modal .form-side{position:relative;background:#fff;padding:26px 28px 28px;display:flex;align-items:center}
.checkout-modal .form-shell{width:100%;max-width:520px;margin:0 auto}
.checkout-modal .progress{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.checkout-modal .progress .track{height:6px;flex:1;border-radius:999px;background:#EDF1F7;overflow:hidden}
.checkout-modal .progress .track i{display:block;width:50%;height:100%;background:linear-gradient(90deg,#2F66FF,#6C96FF);border-radius:inherit}
.checkout-modal .progress span{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#667085}
.checkout-modal .form-head{margin-bottom:22px}
.checkout-modal .form-head .pill{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:#EEF4FF;color:#2458EE;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.checkout-modal .form-head .pill i{width:7px;height:7px;border-radius:50%;background:#22C55E}
.checkout-modal .form-head h2{margin:13px 0 0;font-size:40px;line-height:1.03;letter-spacing:-.055em}
.checkout-modal .form-head p{margin:10px 0 0;color:#667085;font-size:13px;line-height:1.6}
.checkout-modal .form-head p b{color:#344054}
.checkout-modal .selection{border:1px solid #E3E9F2;background:#F8FAFD;border-radius:20px;padding:14px 15px;margin-bottom:18px}
.checkout-modal .selection-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.checkout-modal .sel-copy small{display:block;font-size:8px;font-weight:900;color:#98A2B3;text-transform:uppercase;letter-spacing:.11em}
.checkout-modal .sel-copy strong{display:block;margin-top:4px;font-size:19px;letter-spacing:-.04em}
.checkout-modal .sel-price{text-align:right}
.checkout-modal .sel-price strong{display:block;font-size:25px;letter-spacing:-.05em}
.checkout-modal .sel-price button{margin-top:3px;border:0;background:transparent;color:#2F66FF;padding:0;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.checkout-modal .plan-picker{display:none;grid-template-columns:1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #E7ECF3}
.checkout-modal .plan-picker.open{display:grid}
.checkout-modal .plan-option{border:1px solid #E4EAF2;background:#fff;border-radius:14px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;transition:.2s}
.checkout-modal .plan-option:hover{border-color:#AFC4FF}
.checkout-modal .plan-option.active{border-color:#2F66FF;background:#F3F7FF;box-shadow:0 0 0 3px rgba(47,102,255,.07)}
.checkout-modal .plan-option b{font-size:12px}
.checkout-modal .plan-option span{font-size:10px;color:#667085}
.checkout-modal .plan-option strong{font-size:13px;color:#101828}
.checkout-modal .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkout-modal .field{display:flex;flex-direction:column;gap:7px}
.checkout-modal .field.full{grid-column:1/-1}
.checkout-modal .field label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#475467}
.checkout-modal .field label em{font-style:normal;color:#98A2B3;font-weight:700;text-transform:none;letter-spacing:0}
.checkout-modal input{width:100%;height:54px;border:1px solid #E3E8F0;background:#fff;color:#101828;border-radius:15px;padding:0 15px;outline:none;transition:border-color .2s,box-shadow .2s}
.checkout-modal input::placeholder{color:#A5ADBA}
.checkout-modal input:focus{border-color:#8FAEFF;box-shadow:0 0 0 4px rgba(47,102,255,.09)}
.checkout-modal input.invalid{border-color:#F04438;box-shadow:0 0 0 4px rgba(240,68,56,.07)}
.checkout-modal .error{display:none;font-size:9px;font-weight:800;color:#D92D20}
.checkout-modal .error.show{display:block}
.checkout-modal .optional{margin-top:11px}
.checkout-modal .optional button{border:0;background:transparent;padding:2px 0;color:#667085;font-size:10px;font-weight:800}
.checkout-modal .optional button:hover{color:#2F66FF}
.checkout-modal .optional-field{display:none;margin-top:9px}
.checkout-modal .optional-field.open{display:block}
.checkout-modal .micro-proof{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:11px 12px;border-radius:14px;background:#F7F9FC;border:1px solid #E8EDF4;color:#475467;font-size:10px;line-height:1.45}
.checkout-modal .micro-proof i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 5px rgba(34,197,94,.09);flex:none}
.checkout-modal .micro-proof b{color:#101828}
.checkout-modal .terms{display:flex;align-items:flex-start;gap:9px;margin-top:13px}
.checkout-modal .terms input{width:17px;height:17px;margin:2px 0 0;accent-color:#2F66FF;flex:none}
.checkout-modal .terms label{font-size:10px;line-height:1.5;color:#667085}
.checkout-modal .terms b{color:#344054}
.checkout-modal .terms-error{display:none;margin-top:6px;font-size:9px;font-weight:800;color:#D92D20}
.checkout-modal .terms-error.show{display:block}
.checkout-modal .pay{width:100%;border:0;margin-top:15px;min-height:64px;border-radius:17px;padding:0 14px 0 19px;background:linear-gradient(180deg,#477DFF 0%,#2F66FF 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 16px 36px rgba(47,102,255,.28);font-size:14px;font-weight:900;transition:transform .2s,box-shadow .2s}
.checkout-modal .pay:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(47,102,255,.34)}
.checkout-modal .pay:active{transform:none}
.checkout-modal .pay .arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2F66FF;font-size:18px;flex:none}
.checkout-modal .pay[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.checkout-modal .pay-sub{display:block;margin-top:3px;font-size:9px;font-weight:600;color:#D9E5FF;text-align:left}
.checkout-modal .trustline{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:12px;color:#98A2B3;font-size:9px;font-weight:800}
.checkout-modal .trustline span{display:flex;align-items:center;gap:5px}
.checkout-modal .trustline i{width:5px;height:5px;border-radius:50%;background:#C3CAD5}
.checkout-modal .order-note{margin-top:18px;padding-top:15px;border-top:1px solid #EDF0F5;display:flex;align-items:center;justify-content:space-between;gap:16px}
.checkout-modal .order-note div:first-child{font-size:10px;color:#667085;line-height:1.45}
.checkout-modal .order-note div:first-child b{color:#344054}
.checkout-modal .total{text-align:right}
.checkout-modal .total small{display:block;font-size:8px;color:#98A2B3;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.checkout-modal .total strong{display:block;margin-top:3px;font-size:28px;letter-spacing:-.055em}
.checkout-modal .toast{position:fixed;z-index:1000;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#101828;color:#fff;border-radius:14px;padding:12px 15px;font-size:11px;font-weight:800;box-shadow:0 18px 44px rgba(0,0,0,.25);transition:.3s;max-width:calc(100vw - 28px);text-align:center}
.checkout-modal .toast.show{opacity:1;transform:translate(-50%,0)}
.checkout-modal .lightbox{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(4,9,20,.86);backdrop-filter:blur(10px)}
.checkout-modal .lightbox.open{display:flex}
.checkout-modal .lightbox-inner{position:relative;max-width:min(92vw,520px);max-height:92svh}
.checkout-modal .lightbox img{display:block;max-width:100%;max-height:90svh;border-radius:20px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.45)}
.checkout-modal .lightbox button{position:absolute;right:-8px;top:-8px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#101828;font-size:18px;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.18)}
@media(max-width:1080px){.checkout-modal .checkout{grid-template-columns:1fr}
.checkout-modal .proof{padding:28px 28px 24px}
.checkout-modal .proof-copy{margin-top:38px}
.checkout-modal .fan-block{margin-top:26px;padding-top:0}
.checkout-modal .quote-row{display:none}
.checkout-modal .form-side{padding:26px 20px 34px}
.checkout-modal .form-shell{max-width:680px}
.checkout-modal .fan{height:290px}
.checkout-modal .review{width:154px;height:272px}
.checkout-modal .r1{transform:translateX(-245px) translateY(55px) rotate(-20deg) scale(.78)}
.checkout-modal .r2{transform:translateX(-125px) translateY(15px) rotate(-10deg) scale(.9)}
.checkout-modal .r4{transform:translateX(125px) translateY(15px) rotate(10deg) scale(.9)}
.checkout-modal .r5{transform:translateX(245px) translateY(55px) rotate(20deg) scale(.78)}}
@media(max-height:700px) and (min-width:641px){
.checkout-modal .checkout{grid-template-columns:1fr;overflow:hidden}
.checkout-modal .proof{min-height:720px;padding:28px 32px 30px}
.checkout-modal .proof-copy{margin-top:34px}
.checkout-modal .fan-block{margin-top:24px;padding-top:0}
.checkout-modal .quote-row{display:none}
.checkout-modal .form-side{padding:32px 24px 40px;align-items:flex-start}
.checkout-modal .form-shell{max-width:680px}
}
@media(max-width:640px){.checkout-modal{background:#fff}
.checkout-modal .checkout{width:100%;min-height:100svh;margin:0;border-radius:0;border:0;box-shadow:none}
.checkout-modal .proof{padding:max(17px,env(safe-area-inset-top)) 15px 20px}
.checkout-modal .topbar{margin-bottom:20px}
.checkout-modal .logo{width:39px;height:39px;border-radius:13px}
.checkout-modal .brand{font-size:15px}
.checkout-modal .secure{font-size:8px}
.checkout-modal .proof-copy{margin-top:0}
.checkout-modal .kicker{font-size:8px;padding:8px 10px}
.checkout-modal h1{font-size:clamp(39px,12.5vw,50px);line-height:.96;margin-top:13px}
.checkout-modal .proof-copy p{font-size:13px;line-height:1.55;margin-top:12px}
.checkout-modal .reassure{margin-top:13px;gap:7px}
.checkout-modal .reassure span{font-size:8px;padding:7px 9px}
.checkout-modal .fan-block{margin-top:20px}
.checkout-modal .fan-head{margin-bottom:4px}
.checkout-modal .fan-head div:last-child{display:none}
.checkout-modal .fan{height:218px}
.checkout-modal .review{width:118px;height:210px;border-radius:16px;padding:5px}
.checkout-modal .review .blur, .checkout-modal .review .screen{inset:5px;border-radius:12px}
.checkout-modal .review .tag{left:8px;right:8px;bottom:8px;padding:6px 7px;border-radius:9px;font-size:6px}
.checkout-modal .r1{transform:translateX(-142px) translateY(42px) rotate(-18deg) scale(.75)}
.checkout-modal .r2{transform:translateX(-72px) translateY(10px) rotate(-9deg) scale(.88)}
.checkout-modal .r3{transform:translateX(0) scale(1)}
.checkout-modal .r4{transform:translateX(72px) translateY(10px) rotate(9deg) scale(.88)}
.checkout-modal .r5{transform:translateX(142px) translateY(42px) rotate(18deg) scale(.75)}
.checkout-modal .quote-row{display:none}
.checkout-modal .form-side{padding:22px 15px max(24px,env(safe-area-inset-bottom));align-items:flex-start}
.checkout-modal .progress{margin-bottom:18px}
.checkout-modal .form-head{margin-bottom:17px}
.checkout-modal .form-head h2{font-size:31px}
.checkout-modal .form-head p{font-size:12px}
.checkout-modal .selection{border-radius:17px;padding:12px 13px}
.checkout-modal .sel-copy strong{font-size:17px}
.checkout-modal .sel-price strong{font-size:22px}
.checkout-modal .fields{grid-template-columns:1fr;gap:11px}
.checkout-modal .field.full{grid-column:auto}
.checkout-modal input{height:53px}
.checkout-modal .micro-proof{font-size:9px}
.checkout-modal .pay{min-height:62px;font-size:13px;position:sticky;bottom:max(10px,env(safe-area-inset-bottom));z-index:10}
.checkout-modal .trustline{gap:8px;font-size:8px}
.checkout-modal .order-note{margin-top:15px}
.checkout-modal .total strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.checkout-modal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ── Checkout full page wrapper ── */
.checkout-modal {
  min-height: 100svh;
  background: #EEF2F8;
}

/* Toast inside modal (reuse .toast style but scoped) */
.checkout-modal .co-toast {
  position: fixed;
  z-index: 10002;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  background: #101828;
  color: #fff;
  border-radius: 14px;
  padding: 12px 15px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
  transition: .3s;
  max-width: calc(100vw - 28px);
  text-align: center;
  font-family: "DM Sans", system-ui, sans-serif;
}
.checkout-modal .co-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Make lightbox render above modal overlay */
.checkout-modal .lightbox {
  z-index: 10003;
}

/* ── Status screens (checking / success / cancelled) ── */
.co-status-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink, #101828);
}
.co-status-screen h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.03em;
}
.co-status-screen p {
  font-size: 15px;
  color: var(--muted, #667085);
  max-width: 380px;
  margin: 0;
  line-height: 1.6;
}
.co-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(47,102,255,.15);
  border-top-color: #2F66FF;
  border-radius: 50%;
  animation: coSpin .8s linear infinite;
}
@keyframes coSpin { to { transform: rotate(360deg); } }
.co-checkmark {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #6EF07B;
  color: #fff;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(110,240,123,.28);
}
.co-x {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #F04438;
  color: #fff;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(240,68,56,.22);
}
.co-back-btn {
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 14px;
  background: #2F66FF;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT LAYOUT FIXES — full height, bigger inputs
   ══════════════════════════════════════════════════════════ */

/* Full edge-to-edge on desktop */
@media(min-width:1081px){
  .checkout-modal .checkout {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: 100svh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
  }
  /* Proof fills full height */
  .checkout-modal .proof {
    height: 100svh;
    overflow-y: auto;
  }
  /* Form side scrolls independently */
  .checkout-modal .form-side {
    height: 100svh;
    overflow-y: auto;
    align-items: flex-start;
    padding: 36px 48px 48px;
  }
  .checkout-modal .form-shell {
    padding-top: 8px;
  }
}

/* Bigger, more comfortable inputs */
.checkout-modal input:not([type="checkbox"]):not([type="radio"]) {
  height: 62px !important;
  border-radius: 16px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border: 1.5px solid #E3E8F0 !important;
}
.checkout-modal .fields { gap: 14px; }
.checkout-modal .field label { font-size: 11px; margin-bottom: 2px; }
.checkout-modal .form-head h2 { font-size: 44px; }
.checkout-modal .selection { padding: 16px 18px; margin-bottom: 20px; border-radius: 22px; }
.checkout-modal .sel-copy strong { font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.checkout-modal .sel-price strong { font-size: 28px; }
.checkout-modal .pay { min-height: 70px !important; border-radius: 20px; font-size: 15px; margin-top: 18px; }


/* ══════════════════════════════════════════════════════════
   THANK YOU PAGE
   ══════════════════════════════════════════════════════════ */
.checkout-modal .ty-page {
  position: relative;
  min-height: 100svh;
  background: #070a12;
  color: #fff;
  overflow: hidden;
  font-family: "DM Sans", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
.checkout-modal .ty-page--cancelled { background: #09060e; }

/* Background decoration */
.checkout-modal .ty-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.checkout-modal .ty-bg-glow--1 {
  width: 680px; height: 680px;
  background: rgba(47,102,255,.18);
  top: -200px; left: -180px;
}
.checkout-modal .ty-bg-glow--2 {
  width: 500px; height: 500px;
  background: rgba(110,240,123,.10);
  bottom: -100px; right: -100px;
}
.checkout-modal .ty-bg-glow--cancel {
  width: 560px; height: 560px;
  background: rgba(240,68,56,.12);
  top: -150px; right: -150px;
}
.checkout-modal .ty-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* Nav */
.checkout-modal .ty-nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.checkout-modal .ty-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 900; letter-spacing: -.04em; color: #fff;
  text-decoration: none;
}
.checkout-modal .ty-logo {
  width: 38px; height: 38px; border-radius: 12px;
  background: #fff; color: #0B1530;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
}
.checkout-modal .ty-secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .11em; color: rgba(255,255,255,.55);
}
.checkout-modal .ty-secure i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6EF07B; box-shadow: 0 0 0 4px rgba(110,240,123,.15);
}

/* Body */
.checkout-modal .ty-body {
  position: relative; z-index: 5;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 32px 60px;
  max-width: 860px;
}
.checkout-modal .ty-body--center {
  max-width: 520px; margin: 0 auto; text-align: center; align-items: center;
}

/* Kicker */
.checkout-modal .ty-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 999px;
  background: rgba(110,240,123,.08); border: 1px solid rgba(110,240,123,.2);
  font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .13em;
  color: #6EF07B; margin-bottom: 20px;
}
.checkout-modal .ty-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6EF07B; box-shadow: 0 0 0 4px rgba(110,240,123,.2);
  animation: tyPulse 1.8s ease-in-out infinite;
}
@keyframes tyPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }

/* Headline */
.checkout-modal .ty-h1 {
  font-family: Anton, "DM Sans", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(52px, 7vw, 96px);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  color: #fff;
}
.checkout-modal .ty-h1--sm { font-size: clamp(42px, 6vw, 72px); }
.checkout-modal .ty-accent { color: #6EF07B; }
.checkout-modal .ty-accent-red { color: #F97066; }

/* Subtitle */
.checkout-modal .ty-sub {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(255,255,255,.62);
  max-width: 580px;
  margin: 0 0 36px;
}

/* Steps */
.checkout-modal .ty-steps {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 36px;
}
.checkout-modal .ty-step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  transition: background .2s;
}
.checkout-modal .ty-step:hover { background: rgba(255,255,255,.065); }
.checkout-modal .ty-step-num {
  font-family: Anton, sans-serif;
  font-size: 24px; line-height: 1;
  color: rgba(47,102,255,.7);
  flex: none; width: 36px;
  margin-top: 2px;
}
.checkout-modal .ty-step strong {
  display: block;
  font-size: 14px; font-weight: 800; color: #fff;
  letter-spacing: -.02em; margin-bottom: 4px;
}
.checkout-modal .ty-step span {
  font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5;
}

/* Proof strip */
.checkout-modal .ty-proof-strip {
  display: flex; align-items: center; gap: 0;
  padding: 16px 0; margin-bottom: 32px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap; gap: 0;
}
.checkout-modal .ty-proof-item {
  flex: 1; min-width: 100px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 20px;
}
.checkout-modal .ty-proof-item strong {
  font-size: clamp(18px, 2vw, 26px); font-weight: 900;
  letter-spacing: -.04em; color: #fff;
}
.checkout-modal .ty-proof-item span {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.38);
}
.checkout-modal .ty-proof-div {
  width: 1px; height: 36px; background: rgba(255,255,255,.1); flex: none;
}

/* CTAs */
.checkout-modal .ty-ctas {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.checkout-modal .ty-btn-primary {
  padding: 16px 28px; border-radius: 16px;
  background: #fff; color: #0B1530;
  font-size: 14px; font-weight: 900; letter-spacing: -.02em;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-family: inherit;
}
.checkout-modal .ty-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.34); }
.checkout-modal .ty-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 24px; border-radius: 16px;
  background: rgba(37,199,116,.12);
  border: 1px solid rgba(37,199,116,.25);
  color: #6EF07B; font-size: 14px; font-weight: 800;
  text-decoration: none; cursor: pointer;
  transition: background .18s, transform .18s;
  font-family: inherit;
}
.checkout-modal .ty-btn-secondary:hover { background: rgba(37,199,116,.18); transform: translateY(-2px); }

/* Footnote */
.checkout-modal .ty-footnote {
  font-size: 11px; color: rgba(255,255,255,.28);
  font-style: italic; margin: 0;
}

/* Cancelled icon */
.checkout-modal .ty-cancelled-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(249,112,102,.12); border: 1px solid rgba(249,112,102,.25);
  color: #F97066; font-size: 32px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}

/* Floating ROAS cards */
.checkout-modal .ty-float {
  position: absolute; z-index: 4; pointer-events: none;
}
.checkout-modal .ty-float--1 { right: 4vw; top: 18%; animation: tyFloat 5s ease-in-out infinite; }
.checkout-modal .ty-float--2 { right: 12vw; top: 44%; animation: tyFloat 6.5s ease-in-out infinite .8s; }
.checkout-modal .ty-float--3 { right: 2vw; top: 68%; animation: tyFloat 5.8s ease-in-out infinite 1.4s; }
@keyframes tyFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.checkout-modal .ty-roas-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  border-radius: 16px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 140px;
}
.checkout-modal .ty-roas-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.checkout-modal .ty-roas-val   { font-size: 26px; font-weight: 900; letter-spacing: -.04em; color: #fff; line-height: 1; }
.checkout-modal .ty-roas-badge { font-size: 9px; font-weight: 900; color: #6EF07B; }

/* Mobile */
@media(max-width:767px){
  .checkout-modal .ty-nav { padding: 16px 18px; }
  .checkout-modal .ty-body { padding: 36px 18px 48px; }
  .checkout-modal .ty-float { display: none; }
  .checkout-modal .ty-proof-strip { gap: 12px; padding: 14px 0; }
  .checkout-modal .ty-proof-item { min-width: 80px; padding: 0 12px; }
  .checkout-modal .ty-proof-div { display: none; }
  .checkout-modal .ty-ctas { flex-direction: column; }
  .checkout-modal .ty-btn-primary, .checkout-modal .ty-btn-secondary { text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   FIX — kartice vidljive + desna strana veći tekst/inputi
   ══════════════════════════════════════════════════════════ */

/* ── Leva strana: kartice se ne seku ── */
.checkout-modal .proof {
  overflow: visible !important;
}
/* Checkout wrapper: dopusti overflow da proba kroz leva strana */
@media(min-width:1081px){
  .checkout-modal .checkout {
    overflow: visible !important;
    box-shadow: none;
    /* Zadrži vizuelni okvir kroz background na .proof */
  }
  /* Proof drži rounded corners i background, checkout ne clipa */
  .checkout-modal .proof {
    border-radius: 0;
  }
}
.checkout-modal .fan-block {
  padding-bottom: 24px;
}
.checkout-modal .fan {
  height: 290px !important;
}
/* Kartice malo manje da stanu u proof */
.checkout-modal .review {
  width: 155px !important;
  height: 272px !important;
}
.checkout-modal .r1 { transform: translateX(-238px) translateY(52px) rotate(-22deg) scale(.78) !important; }
.checkout-modal .r2 { transform: translateX(-120px) translateY(14px) rotate(-11deg) scale(.9) !important; }
.checkout-modal .r3 { transform: translateX(0)      translateY(0)    rotate(0deg)  scale(1.02) !important; }
.checkout-modal .r4 { transform: translateX(120px)  translateY(14px) rotate(11deg)  scale(.9) !important; }
.checkout-modal .r5 { transform: translateX(238px)  translateY(52px) rotate(22deg)  scale(.78) !important; }

/* ── Desna strana: veći tekst ── */

/* Labele — iz 10px u 13px */
.checkout-modal .field label {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #344054 !important;
}
.checkout-modal .field label em {
  font-size: 12px !important;
}

/* Inputi — veći tekst i visina */
.checkout-modal input:not([type="checkbox"]):not([type="radio"]) {
  height: 58px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  border: 1.5px solid #D0D5DD !important;
  color: #101828 !important;
}
.checkout-modal input::placeholder {
  font-size: 15px !important;
  color: #98A2B3 !important;
}

/* Form heading */
.checkout-modal .form-head h2 {
  font-size: clamp(34px, 3.2vw, 50px) !important;
  letter-spacing: -.05em !important;
}
.checkout-modal .form-head p {
  font-size: 15px !important;
  color: #475467 !important;
}
.checkout-modal .form-head .pill {
  font-size: 11px !important;
}

/* Selektor paketa */
.checkout-modal .sel-copy strong { font-size: 17px !important; }
.checkout-modal .sel-price strong { font-size: 26px !important; }

/* Optional link dugme */
.checkout-modal .optional button {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Micro proof i terms */
.checkout-modal .micro-proof {
  font-size: 12px !important;
  padding: 13px 14px !important;
}
.checkout-modal .terms label {
  font-size: 12px !important;
}

/* CTA dugme */
.checkout-modal .pay {
  min-height: 68px !important;
  font-size: 16px !important;
  border-radius: 18px !important;
}
.checkout-modal .trustline {
  font-size: 11px !important;
}
.checkout-modal .order-note {
  font-size: 12px !important;
}
.checkout-modal .order-note div:first-child {
  font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   REDESIGN — desna strana u branding sajta (tamna, Anton)
   ══════════════════════════════════════════════════════════ */

/* Form side — tamna pozadina */
.checkout-modal .form-side {
  background: #080d18 !important;
}

/* Heading — Anton font, uppercase, belo */
.checkout-modal .form-head h2 {
  font-family: Anton, "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: clamp(36px, 3.8vw, 58px) !important;
  line-height: .93 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  margin-top: 14px !important;
}
.checkout-modal .form-head-accent {
  color: #5C8BFF;
}

/* Pill */
.checkout-modal .form-head .pill {
  background: rgba(92,139,255,.12) !important;
  color: #7AACFF !important;
  border: 1px solid rgba(92,139,255,.22) !important;
  font-size: 10px !important;
}
.checkout-modal .form-head .pill i {
  background: #7AACFF !important;
}

/* Subtitle */
.checkout-modal .form-head p {
  color: rgba(255,255,255,.5) !important;
  font-size: 14px !important;
}
.checkout-modal .form-head p b {
  color: rgba(255,255,255,.8) !important;
}

/* Progress */
.checkout-modal .progress .track {
  background: rgba(255,255,255,.1) !important;
}
.checkout-modal .progress span {
  color: rgba(255,255,255,.4) !important;
}

/* Selection box */
.checkout-modal .selection {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.checkout-modal .selection-top small {
  color: rgba(255,255,255,.4) !important;
}
.checkout-modal .sel-copy strong {
  color: #fff !important;
}
.checkout-modal .sel-price strong {
  color: #fff !important;
}
.checkout-modal .sel-price button {
  color: #5C8BFF !important;
}

/* Plan picker */
.checkout-modal .plan-picker {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}
.checkout-modal .plan-option {
  background: transparent !important;
  color: rgba(255,255,255,.7) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.checkout-modal .plan-option:last-child { border-bottom: none !important; }
.checkout-modal .plan-option:hover { background: rgba(255,255,255,.06) !important; }
.checkout-modal .plan-option.active {
  background: rgba(47,102,255,.18) !important;
  color: #fff !important;
}
.checkout-modal .plan-option strong { color: #fff !important; }

/* Labels */
.checkout-modal .field label {
  color: rgba(255,255,255,.6) !important;
}

/* Inputs — tamna pozadina, beli tekst */
.checkout-modal input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.checkout-modal input::placeholder {
  color: rgba(255,255,255,.28) !important;
}
.checkout-modal input:focus {
  border-color: #4B7BFF !important;
  box-shadow: 0 0 0 4px rgba(47,102,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
}
.checkout-modal input.invalid {
  border-color: #F04438 !important;
  box-shadow: 0 0 0 4px rgba(240,68,56,.12) !important;
}

/* Optional dugme */
.checkout-modal .optional button {
  color: rgba(255,255,255,.38) !important;
}
.checkout-modal .optional button:hover {
  color: #5C8BFF !important;
}

/* Micro proof */
.checkout-modal .micro-proof {
  background: rgba(34,197,94,.08) !important;
  border: 1px solid rgba(34,197,94,.18) !important;
  color: rgba(255,255,255,.6) !important;
}
.checkout-modal .micro-proof b { color: #fff !important; }

/* Terms */
.checkout-modal .terms label {
  color: rgba(255,255,255,.45) !important;
}
.checkout-modal .terms b { color: rgba(255,255,255,.7) !important; }
.checkout-modal .terms-error { color: #F97066 !important; }

/* Error spans */
.checkout-modal .error {
  color: #F97066 !important;
}

/* Trust line */
.checkout-modal .trustline {
  color: rgba(255,255,255,.28) !important;
}
.checkout-modal .trustline i {
  background: rgba(255,255,255,.2) !important;
}

/* Order note */
.checkout-modal .order-note {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.checkout-modal .order-note div:first-child {
  color: rgba(255,255,255,.38) !important;
}
.checkout-modal .order-note div:first-child b {
  color: rgba(255,255,255,.65) !important;
}
.checkout-modal .total small {
  color: rgba(255,255,255,.35) !important;
}
.checkout-modal .total strong {
  color: #fff !important;
}

/* Korak step badge */
.checkout-modal .korak-badge {
  color: rgba(255,255,255,.3) !important;
}

/* Final native-scroll layout guard.
   Checkout shares generic class names with the landing page, so keep these
   scoped, high-specificity rules last to prevent cross-page width/overflow
   styles from producing a narrow proof panel and a blank column. */
@media (max-width:1080px), (max-height:700px) {
  .checkout-modal > .checkout {
    width:calc(100% - 24px) !important;
    max-width:1480px !important;
    height:auto !important;
    min-height:calc(100svh - 24px) !important;
    margin:12px auto !important;
    grid-template-columns:minmax(0,1fr) !important;
    overflow:hidden !important;
  }
  .checkout-modal > .checkout > .proof,
  .checkout-modal > .checkout > .form-side {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
  }
  .checkout-modal > .checkout > .proof {
    min-height:720px !important;
    overflow:hidden !important;
  }
  .checkout-modal > .checkout > .form-side {
    overflow:visible !important;
    align-items:flex-start !important;
  }
}

@media (max-width:640px) {
  .checkout-modal > .checkout {
    width:100% !important;
    min-height:100svh !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  .checkout-modal > .checkout > .proof {
    min-height:auto !important;
  }
}