/* ==========================================================================
   Checkout_Style.css
   ========================================================================== */

.nav-checkout .nav-inner{justify-content:space-between;}
.nav-secure{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;
  color:var(--sage);
}

/* ---------- progress bar ---------- */
.steps-bar{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.steps{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
  gap:10px;
  justify-content:center;
}
.s{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;
  color:var(--ink-4);
  flex-shrink:0;
}
.s:not(:last-child)::after{
  content:"";
  width:24px;height:2px;
  background:var(--line-2);
  border-radius:2px;
  margin-left:6px;
}
@media (min-width:560px){
  .s:not(:last-child)::after{width:44px;}
  .steps{gap:14px;}
}
.s-n{
  width:28px;height:28px;flex-shrink:0;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--line-2);
  color:var(--ink-4);
  display:grid;place-items:center;
  font-size:13px;font-weight:700;
}
.s-t{display:none;}
@media (min-width:480px){ .s-t{display:inline;} }

.s.is-now{color:var(--navy);}
.s.is-now .s-n{background:var(--navy);border-color:var(--navy);color:#fff;}
.s.is-done{color:var(--sage);}
.s.is-done .s-n{background:var(--sage);border-color:var(--sage);color:transparent;}
.s.is-done .s-n::after{
  content:"";
  position:absolute;
  width:11px;height:6px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.s-n{position:relative;}

/* ---------- layout ---------- */
.checkout{padding:30px 0 40px;}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media (min-width:1000px){
  .grid{grid-template-columns:minmax(0,1fr) 366px;gap:40px;align-items:start;}
}
.col-main{min-width:0;}

/* mobile: summary first so people see what they're buying */
.col-side{order:-1;}
@media (min-width:1000px){
  .col-side{order:0;position:sticky;top:88px;}
}

/* ---------- panels ---------- */
.panel{
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 20px 24px;
}
@media (min-width:700px){ .panel{padding:34px 34px 30px;} }

.panel-head{margin-bottom:26px;}
.panel-head h1{
  font-size:clamp(23px,3.4vw,31px);
  margin-bottom:9px;
}
.panel-head p{
  font-size:15px;color:var(--ink-3);line-height:1.6;
  max-width:520px;
}

/* fieldsets */
.fs{
  border:none;padding:0;
  margin:0 0 30px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.fs-last{border-bottom:none;padding-bottom:6px;margin-bottom:16px;}
.fs-legend{
  display:flex;align-items:center;gap:11px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:19px;font-weight:600;
  color:var(--ink);
  margin-bottom:18px;
  padding:0;
}
.fs-num{
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;
  background:var(--navy-lt);
  color:var(--navy);
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;
}

/* address grid — huisnummer + toevoeging stay narrow */
.field-row.addr{grid-template-columns:1fr;}
@media (min-width:560px){
  .field-row.addr{grid-template-columns:1fr 90px 90px;}
}

/* business fields */
.biz-toggle{margin-bottom:4px;}
.biz-fields{
  margin-top:18px;padding-top:18px;
  border-top:1px dashed var(--line-2);
  animation:slideDown .22s var(--ease);
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

.fs-intro{
  font-size:14.5px;color:var(--ink-3);
  line-height:1.6;margin:-6px 0 16px;
  max-width:520px;
}

/* ---------- van A tot Z ---------- */
.az{
  background:var(--navy);
  color:rgba(255,255,255,.82);
  border-radius:var(--r-lg);
  padding:22px 20px 20px;
  margin-bottom:20px;
}
@media (min-width:700px){ .az{padding:26px 26px 22px;} }
.az-tag{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  margin-bottom:11px;
}
.az-head h3{color:#fff;font-size:19px;margin-bottom:7px;line-height:1.3;}
.az-head p{font-size:14px;line-height:1.6;max-width:460px;}
.az-list{
  list-style:none;padding:0;
  margin:16px 0 0;
  display:grid;grid-template-columns:1fr;gap:7px 22px;
}
@media (min-width:620px){ .az-list{grid-template-columns:1fr 1fr;} }
.az-list li{
  position:relative;
  padding-left:24px;
  font-size:13.5px;color:#fff;
  line-height:1.5;
}
.az-list li::before{
  content:"";
  position:absolute;left:0;top:5px;
  width:13px;height:7px;
  border-left:2px solid #5FD4B4;
  border-bottom:2px solid #5FD4B4;
  transform:rotate(-45deg);
}
.az-foot{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:13px;line-height:1.55;
}
.az-foot b{color:#fff;}

/* ---------- plan picker ---------- */
.picks{display:flex;flex-direction:column;gap:10px;}
.pick{
  display:flex;align-items:center;gap:13px;
  padding:16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .16s,background .16s;
  min-height:68px;
}
.pick:hover{border-color:var(--line-2);}
.pick.is-on{border-color:var(--navy);background:var(--navy-lt);}
.pick input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex-shrink:0;margin:0;
  border:1.5px solid var(--line-2);
  border-radius:50%;
  background:var(--surface);
  cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .15s;
}
.pick input:checked{border-color:var(--navy);border-width:2px;}
.pick input:checked::after{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--navy);
}
.pick input:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;}
.pick-body{flex:1;min-width:0;}
.pick-name{display:block;font-size:15.5px;font-weight:700;color:var(--ink);}
.pick-for{display:block;font-size:13px;color:var(--ink-3);margin-top:1px;}
.pick-price{text-align:right;flex-shrink:0;}
.pick-price b{
  display:block;
  font-size:18px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;
}
.pick-price small{font-size:11.5px;color:var(--ink-4);}

/* ---------- addons ---------- */
.addons{display:flex;flex-direction:column;gap:11px;}
.addon{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "box  body"
    ".    price";
  gap:6px 13px;
  align-items:start;
  padding:16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .16s,background .16s;
}
@media (min-width:560px){
  .addon{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"box body price";
    align-items:center;
  }
}
.addon:hover{border-color:var(--line-2);}
.addon.is-on{
  border-color:var(--navy);
  background:var(--navy-lt);
}
.addon-box{
  grid-area:box;
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex-shrink:0;margin:0;
  border:1.5px solid var(--line-2);
  border-radius:6px;
  background:var(--surface);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.addon-box:checked{background:var(--navy);border-color:var(--navy);}
.addon-box:checked::after{
  content:"";
  width:11px;height:6px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.addon-box:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;}
.addon-body{grid-area:body;min-width:0;}
.addon-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:15px;font-weight:600;color:var(--ink);
  margin-bottom:3px;
}
.addon-desc{
  display:block;
  font-size:13.5px;color:var(--ink-3);line-height:1.5;
}
.addon-price{
  grid-area:price;
  font-size:16px;font-weight:700;color:var(--ink);
  white-space:nowrap;
}
.addon-price small{font-size:12px;font-weight:500;color:var(--ink-4);}

/* ---------- review block on step 2 ---------- */
.review{
  display:flex;flex-wrap:wrap;gap:12px 22px;
  padding:16px 18px;
  background:var(--paper-2);
  border-radius:var(--r);
  margin-bottom:28px;
  font-size:14px;
}
.review div{min-width:0;}
.review dt{
  font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px;
}
.review dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.review-edit{
  margin-left:auto;align-self:center;
  font-size:14px;font-weight:600;color:var(--accent-text);
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;
  text-decoration:underline;text-underline-offset:2px;
  padding:6px;
}

/* ---------- payment methods ---------- */
.methods{display:flex;flex-direction:column;gap:10px;}
.method{
  display:flex;align-items:center;gap:13px;
  padding:16px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .16s,background .16s;
  min-height:64px;
}
.method:hover{border-color:var(--line-2);}
.method.is-on{border-color:var(--navy);background:var(--navy-lt);}
.method input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex-shrink:0;margin:0;
  border:1.5px solid var(--line-2);
  border-radius:50%;
  background:var(--surface);
  cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .15s;
}
.method input:checked{border-color:var(--navy);border-width:2px;}
.method input:checked::after{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--navy);
}
.method input:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;}
.m-body{flex:1;min-width:0;}
.m-name{display:block;font-size:15px;font-weight:600;color:var(--ink);}
.m-sub{display:block;font-size:13px;color:var(--ink-3);margin-top:1px;}
.m-brands{display:flex;gap:5px;flex-shrink:0;}
.m-brands i{
  font-style:normal;
  font-size:10px;font-weight:800;
  letter-spacing:.02em;
  color:var(--ink-3);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:4px;
  padding:4px 6px;
}

/* card number + brand chip */
.card-wrap{position:relative;}
.card-wrap .inp{padding-right:66px;}
.card-brand{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:10px;font-weight:800;
  color:var(--navy);
  background:var(--navy-lt);
  border-radius:4px;
  padding:4px 7px;
  opacity:0;
  transition:opacity .18s;
  pointer-events:none;
}
.card-brand.show{opacity:1;}

.test-note{
  font-size:12.5px;color:var(--ink-4);
  margin-top:14px;line-height:1.55;
}
.test-fill{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;
  color:var(--accent-text);
  background:none;border:none;padding:0;
  cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}

.terms-check{align-items:flex-start;margin-bottom:6px;}
.terms-check span{line-height:1.55;padding-top:1px;}
.terms-check a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- error banner ---------- */
.pay-error{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--red-lt);
  border:1.5px solid rgba(192,57,43,.3);
  border-radius:var(--r);
  padding:14px 16px;
  margin-bottom:20px;
  color:var(--red);
  font-size:14.5px;font-weight:500;
  line-height:1.5;
}
.pay-error svg{flex-shrink:0;margin-top:1px;}

/* ---------- panel footer ---------- */
.panel-foot{
  display:flex;flex-direction:column-reverse;gap:12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
@media (min-width:560px){
  .panel-foot{
    flex-direction:row;align-items:center;justify-content:space-between;
  }
}
.panel-foot .btn-lg{width:100%;}
@media (min-width:560px){ .panel-foot .btn-lg{width:auto;min-width:210px;} }

.pay-trust{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:18px;
  font-size:12.5px;color:var(--ink-4);
  text-align:center;
}

/* ---------- done ---------- */
.done{text-align:center;padding-top:40px;padding-bottom:36px;}
.done-mark{
  width:66px;height:66px;
  margin:0 auto 22px;
  border-radius:50%;
  background:var(--sage-lt);
  color:var(--sage);
  display:grid;place-items:center;
  animation:pop .4s var(--ease) both;
}
@keyframes pop{
  from{transform:scale(.7);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.done h1{font-size:clamp(24px,3.6vw,33px);margin-bottom:12px;}
.done h1 span{color:var(--accent);overflow-wrap:anywhere;}
.done-lead{
  font-size:16px;color:var(--ink-3);
  max-width:460px;margin:0 auto 32px;line-height:1.6;
}
.done-next{
  text-align:left;
  background:var(--paper-2);
  border-radius:var(--r-lg);
  padding:24px 22px;
  margin-bottom:28px;
}
.done-next h2{font-size:18px;margin-bottom:16px;}
.next-list{list-style:none;padding:0;margin:0;}
.next-list li{
  position:relative;
  padding:0 0 18px 24px;
  border-left:2px solid var(--line-2);
  margin-left:6px;
}
.next-list li:last-child{padding-bottom:0;border-left-color:transparent;}
.next-list li::before{
  content:"";
  position:absolute;left:-7px;top:5px;
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  border:2.5px solid var(--paper-2);
}
.next-list b{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:3px;
}
.next-list span{font-size:14.5px;color:var(--ink-2);line-height:1.55;}

.done-account{
  text-align:left;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px;
  margin-bottom:20px;
}
.done-account h2{font-size:18px;margin-bottom:7px;}
.done-account > p{font-size:14px;color:var(--ink-3);line-height:1.55;margin-bottom:18px;}
.done-account-actions{
  display:flex;flex-direction:column-reverse;gap:10px;
  margin-top:6px;
}
@media (min-width:460px){
  .done-account-actions{flex-direction:row;align-items:center;}
}

.done-account-ok{
  display:flex;align-items:center;gap:10px;
  text-align:left;
  background:var(--sage-lt);color:var(--sage);
  border-radius:var(--r-lg);
  padding:16px 18px;
  margin-bottom:20px;
  font-size:14.5px;font-weight:500;
}
.done-account-ok svg{flex-shrink:0;}

.done-cta{display:flex;flex-direction:column;gap:11px;flex-wrap:wrap;}
@media (min-width:520px){ .done-cta{flex-direction:row;justify-content:center;} }

/* ==========================================================================
   SUMMARY
   ========================================================================== */
.summary{
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}

/* collapsible header — mobile only */
.sum-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;
  padding:16px 18px;
  background:var(--paper-2);
  border:none;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  text-align:left;
  min-height:64px;
}
.sum-toggle-t{
  display:block;
  font-size:15px;font-weight:700;color:var(--ink);
}
.sum-toggle-c{
  display:block;
  font-size:12.5px;color:var(--ink-3);margin-top:1px;
}
.sum-toggle-r{display:flex;align-items:center;gap:11px;}
.sum-toggle-p{font-size:17px;font-weight:700;color:var(--ink);}
.sum-chev{
  width:11px;height:11px;flex-shrink:0;
  border-right:2.2px solid var(--ink-3);
  border-bottom:2.2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s var(--ease);
}
.sum-toggle[aria-expanded="true"] .sum-chev{transform:rotate(-135deg) translateY(-2px);}

.sum-body{display:none;padding:22px 20px 24px;}
.sum-body.is-open{display:block;}
.sum-title{display:none;}

@media (min-width:1000px){
  .sum-toggle{display:none;}
  .sum-body{display:block !important;padding:24px 22px 26px;}
  .sum-title{
    display:block;
    font-size:19px;margin-bottom:18px;
  }
}

/* the domain block */
.sum-domains{
  padding:15px 16px;
  background:var(--navy-lt);
  border-radius:var(--r);
  margin-bottom:18px;
}
.sum-domain-lab{
  display:block;
  font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);
  margin-bottom:6px;
}
.sum-dom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:3px 0;
}
.sum-dom-name{
  font-family:'Inter',system-ui,sans-serif;
  font-size:18px;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.3;
  min-width:0;
}
.sum-dom-x{
  flex-shrink:0;
  width:28px;height:28px;
  border:none;border-radius:50%;
  background:rgba(18,33,58,.09);
  color:var(--navy);
  font-size:18px;line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;
  transition:background .15s,color .15s;
}
.sum-dom-x:hover{background:var(--red);color:#fff;}
.sum-domain-plan{
  display:block;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(18,33,58,.13);
  font-size:13px;color:var(--ink-2);
}
.sum-domain-plan b{font-weight:600;}
.sum-change{
  display:inline-block;margin-top:8px;
  font-size:13px;font-weight:600;color:var(--accent-text);
  text-decoration:underline;text-underline-offset:2px;
}

/* line items */
.sum-lines{list-style:none;padding:0;margin:0 0 18px;}
.sum-lines li{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;
  padding:11px 0;
  border-bottom:1px dashed var(--line);
  font-size:14.5px;
}
.sum-lines li:last-child{border-bottom:none;}
.sum-lines .li-name{color:var(--ink-2);min-width:0;}
.sum-lines .li-name small{
  display:block;
  font-size:12.5px;color:var(--ink-4);margin-top:2px;
}
.sum-lines .li-price{font-weight:600;color:var(--ink);white-space:nowrap;}
.sum-lines .li-free{color:var(--sage);font-weight:700;}
.sum-lines .li-strike{
  text-decoration:line-through;
  color:var(--ink-4);font-weight:500;
  margin-right:6px;font-size:13px;
}

/* totals */
.sum-totals{
  padding-top:14px;
  border-top:1.5px solid var(--line);
}
.sum-row{
  display:flex;justify-content:space-between;
  padding:6px 0;
  font-size:14.5px;color:var(--ink-3);
}
.sum-total{
  margin-top:8px;padding-top:13px;
  border-top:1.5px solid var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:19px;font-weight:600;
  color:var(--ink);
  align-items:baseline;
}
/* the amount itself in Inter — tabular numerals, cleaner euro glyph */
.sum-total span:last-child{
  font-family:'Inter',sans-serif;
  font-size:24px;font-weight:800;
  letter-spacing:-.03em;
}

.sum-recur{
  margin-top:13px;padding:11px 13px;
  background:var(--amber-lt);
  border-radius:var(--r-sm);
  font-size:12.5px;color:var(--amber);
  line-height:1.5;
}

/* promo */
.sum-promo{
  margin-top:20px;padding-top:20px;
  border-top:1px solid var(--line);
}
.promo-row{display:flex;gap:8px;}
.promo-row .inp{min-height:46px;padding:11px 13px;}
.promo-row .btn{flex-shrink:0;min-height:46px;}
.promo-msg{display:none;margin-top:8px;font-size:13px;font-weight:500;}
.promo-msg.ok{display:block;color:var(--sage);}
.promo-msg.bad{display:block;color:var(--red);}

/* perks */
.sum-perks{
  list-style:none;padding:0;
  margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--line);
}
.sum-perks li{
  position:relative;
  padding:5px 0 5px 23px;
  font-size:13.5px;color:var(--ink-3);
}
.sum-perks li::before{
  content:"";
  position:absolute;left:1px;top:11px;
  width:12px;height:7px;
  border-left:2px solid var(--sage);
  border-bottom:2px solid var(--sage);
  transform:rotate(-45deg);
}

/* On mobile this sits between the summary and the form and interrupts the
   flow — the footer and pay-trust line already cover reassurance there. */
.side-help{display:none;}
.side-help a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
@media (min-width:1000px){
  .side-help{
    display:block;
    margin-top:16px;padding:0 4px;
    font-size:13.5px;color:var(--ink-4);
    line-height:1.55;
  }
}

/* ==========================================================================
   MOBILE STICKY BAR
   ========================================================================== */
.mbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1.5px solid var(--line);
  box-shadow:0 -4px 20px rgba(22,38,61,.07);
}
.mbar-l{display:flex;flex-direction:column;flex-shrink:0;}
.mbar-lab{font-size:11.5px;font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;}
.mbar-price{font-size:19px;font-weight:700;color:var(--ink);line-height:1.2;}
.mbar-btn{flex:1;min-height:50px;}

@media (min-width:1000px){
  .mbar{display:none !important;}
}

/* ---------- slim footer ---------- */
.footer-slim{padding:26px 0 22px;}
.footer-slim .footer-bar{padding-top:0;}
@media (max-width:999px){
  .footer-slim{padding-bottom:98px;}
}