/* Checkout — alleen geladen op bestellen.html */
:root{
  --bg:#07111b; --bg-glow-1:rgba(31,145,225,.12); --bg-glow-2:rgba(255,106,0,.04);
  --panel:#0d1f2f; --panel-2:#0a1826; --line:rgba(255,255,255,.09); --line-strong:rgba(103,189,245,.32);
  --text:#f4f9fc; --muted:#96acbd; --muted-2:#6d879b;
  --blue:#67bdf5; --blue-2:#168fff; --orange:#ff6a00; --green:#45d39d;
  --shadow-lg:0 24px 70px rgba(0,0,0,.32); --shadow-sm:0 10px 26px rgba(0,0,0,.22);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:20px;
  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  font-family:"Inter",Arial,Helvetica,sans-serif;
  font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--text);
  background:var(--bg);
}
.shell{width:min(1240px, calc(100% - 32px)); margin:auto}
a{color:inherit}
::selection{background:rgba(103,189,245,.28)}
:focus-visible{outline:3px solid #ffa566; outline-offset:3px}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hp-field{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden}

/* Header bar */
.checkout-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:32px 0 16px;
}
.checkout-head .eyebrow{
  margin:0 0 6px; color:var(--blue); font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
}
.checkout-head h1{
  margin:0 0 8px; font-size:clamp(26px, 3.4vw, 36px); font-weight:700; letter-spacing:-.5px; line-height:1.2;
}
.checkout-head .head-lead{margin:0; max-width:560px; color:var(--muted); font-size:var(--fs-sm); line-height:1.55}
.service-tabs{
  display:flex; gap:0; margin:0 0 22px; border-bottom:1px solid var(--line);
}
.service-tabs button{
  appearance:none; border:0; background:none; cursor:pointer; font:inherit;
  color:var(--muted); font-size:14px; font-weight:600; padding:10px 16px 12px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.service-tabs button:hover{color:var(--text)}
.service-tabs button[aria-current="true"]{
  color:var(--text); border-bottom-color:var(--blue-2);
}

/* Stepper */
.stepper{
  display:flex; align-items:center; list-style:none; margin:18px 0 22px; padding:0;
}
.stepper li{display:flex; align-items:center; flex:1}
.stepper li:last-child{flex:0 0 auto}
.step-line{flex:1; height:2px; background:var(--line); margin:0 8px; border-radius:2px}
.step-line.is-filled{background:linear-gradient(90deg, var(--blue-2), var(--blue))}
.step-btn{
  display:flex; align-items:center; gap:8px; padding:0; border:0; background:none;
  color:var(--muted-2); font:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer;
}
.step-btn:disabled{cursor:default; opacity:.7}
.step-num{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); background:var(--panel-2); font-size:12px;
}
.step-node.is-current .step-num{border-color:var(--blue-2); color:var(--blue); box-shadow:0 0 0 4px rgba(22,143,255,.12)}
.step-node.is-current .step-btn{color:var(--text)}
.step-node.is-complete .step-num{border-color:var(--green); background:rgba(69,211,157,.12); color:var(--green)}
@media(max-width:760px){.step-label{display:none}}

/* Layout */
.product-form{display:none}
.product-form.active{display:block}
.product-form[hidden]{display:none !important}
.layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start}
.product-form[data-product="microsoft365"] .layout,
.product-form[data-product="webhosting"] .layout,
.product-form[data-product="domein"] .layout{grid-template-columns:1fr}
.product-form[data-product="microsoft365"] .summary,
.product-form[data-product="webhosting"] .summary,
.product-form[data-product="domein"] .summary{max-width:360px; justify-self:end}
.panel{
  background:#0b1824; border:1px solid var(--line); border-radius:12px; padding:24px 24px 22px;
}
.step-panel[hidden]{display:none !important}
.step-panel h2{font-size:var(--fs-md); font-weight:700; letter-spacing:-.2px; margin:0 0 8px}
.lead{color:var(--muted); font-size:var(--fs-sm); line-height:1.6; margin:0 0 20px}

.packages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.confirm-pick .wx-card{
  display:flex; flex-direction:column;
  padding:16px 36px 14px 16px; min-height:100%;
  border-radius:10px; border:1px solid #2a3d4e; background:#0e1d2b;
}
.confirm-pick .wx-featured{border-color:#3d6f94; background:#102233; box-shadow:none}
.confirm-pick .wx-card:hover{border-color:#3d6a8a}
.confirm-pick .wx-card-top{min-height:0; margin:0 0 8px; padding:0}
.confirm-pick .wx-card-top > span:not(.wx-badge){display:none}
.confirm-pick .wx-badge{padding:3px 8px; font-size:11px; font-weight:600}
.confirm-pick .wx-card h3{font-size:17px; margin:0 0 4px; font-weight:700; letter-spacing:0}
.confirm-pick .wx-for{min-height:0 !important; margin:0 0 10px; font-size:13px; line-height:1.4}
.confirm-pick .wx-price{margin:0; font-size:22px; font-weight:700; letter-spacing:-.2px; line-height:1.15}
.confirm-pick .wx-card > .wx-note{margin:2px 0 10px; font-size:12px}
.confirm-pick .wx-card > ul{
  min-height:0 !important; display:flex; flex-direction:column;
  margin:8px 0 0; padding:0;
}
.confirm-pick .wx-card > ul li{padding:3px 0 3px 18px; font-size:13px; line-height:1.4; margin:0}
.confirm-pick .wx-detail{display:none}
.confirm-toggle{display:none}
.compare-hint{margin:10px 0 0; font-size:var(--fs-xs)}
.compare-hint a{color:#8ecfff; text-decoration:none}
.compare-hint a:hover{text-decoration:underline}
.pkg,.hosting-pkg.wx-card{position:relative; cursor:pointer}
.pkg input,
.hosting-pkg.wx-card input{position:absolute; opacity:0; pointer-events:none}
.pkg.wx-card::before,
.hosting-pkg.wx-card::before{
  content:""; position:absolute; top:18px; right:16px;
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(103,189,245,.4);
  background:rgba(7,17,27,.5);
  box-shadow:inset 0 0 0 4px transparent;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pkg.wx-card:has(input:checked)::before,
.hosting-pkg.wx-card:has(input:checked)::before{
  border-color:#67bdf5; background:#168fff;
  box-shadow:inset 0 0 0 4px #102536;
}
.pkg.wx-card:has(input:checked),
.hosting-pkg.wx-card:has(input:checked){
  border-color:#4ea3d8; background:#12283a; box-shadow:none;
}

.block-label{margin:22px 0 8px; font-size:13px; font-weight:700; color:#c9d8e3}
.project-types,.options{
  display:flex; flex-direction:column; gap:0; margin-top:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.choice,.option{
  position:relative; min-height:0;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 14px;
  background:transparent; display:flex; flex-direction:row; align-items:flex-start;
  gap:12px; cursor:pointer;
}
.choice:last-child,.option:last-child{border-bottom:0}
.choice:hover,.option:hover{background:rgba(22,143,255,.05)}
.choice:has(input:checked),
.option:has(input:checked){background:rgba(22,143,255,.08)}
.choice input,.option input{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; margin:3px 0 0; flex-shrink:0;
  border:1.5px solid #4a6a82; background:transparent; border-radius:50%;
}
.option input{border-radius:4px}
.choice input:checked{
  border-color:#67bdf5;
  background:radial-gradient(circle at center, #67bdf5 0 4px, transparent 5px);
}
.option input:checked{
  border-color:#168fff; background:#168fff;
  box-shadow:inset 0 0 0 3px #0d2133;
}
.choice b,.option b{display:block; font-size:14px; font-weight:600}
.choice span,.option span{display:block; color:var(--muted-2); font-size:12.5px; line-height:1.4; margin:2px 0 0}
.four-pkgs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.m365-plans{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; margin-bottom:12px; align-items:stretch;
}
.confirm-pick .m365-plan.wx-card{
  min-width:0; padding:20px 16px 16px;
}
.m365-plan.wx-card::before{display:none}
.m365-plan.wx-featured{
  border-color:#3d6f94; background:#102233;
  box-shadow:inset 0 3px 0 #168fff;
}
.m365-apps{
  display:flex; align-items:center; gap:6px;
  margin:0 0 12px; min-height:24px;
}
.m365-plan.wx-featured .m365-apps{padding-right:96px}
.m365-apps svg{
  display:block; width:24px; height:24px; border-radius:5px;
  overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.m365-head{display:block; min-height:0; margin:0 0 4px}
.m365-head h3{margin:0; font-size:17px; line-height:1.25}
.m365-plan .wx-badge{
  position:absolute; top:14px; right:12px;
  padding:3px 8px; border-radius:999px; background:#168fff; color:#04111c;
  font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.m365-plan .wx-for{min-height:36px !important}
.m365-price{
  margin:0 0 10px; padding:10px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.m365-price strong{
  display:block; font-size:20px; font-weight:700; letter-spacing:-.3px; line-height:1.2;
}
.m365-price span{display:block; margin-top:2px; color:var(--muted-2); font-size:12px}
.m365-plan ul{flex:1}
.m365-pick{
  display:block; margin-top:14px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(103,189,245,.28); background:rgba(22,143,255,.1);
  color:#e2f3fd; font-size:13px; font-weight:700; text-align:center;
}
.m365-plan:has(input:checked) .m365-pick{
  border-color:transparent; background:linear-gradient(90deg,#168fff,#64bef4); color:#04111c;
}
.m365-advice{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  margin:0 0 8px; padding:14px 16px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:#0e1d2b;
}
.m365-advice input{position:absolute; opacity:0; pointer-events:none}
.m365-advice-radio{
  width:18px; height:18px; margin-top:2px; flex-shrink:0; border-radius:50%;
  border:1.5px solid #4a6a82; background:transparent;
}
.m365-advice:hover{border-color:#3d6a8a}
.m365-advice:has(input:checked){border-color:#4ea3d8; background:#12283a}
.m365-advice:has(input:checked) .m365-advice-radio{
  border-color:#67bdf5;
  background:radial-gradient(circle at center, #67bdf5 0 4px, transparent 5px);
}
.m365-advice b{display:block; font-size:14px; font-weight:700}
.m365-advice b + span{display:block; margin-top:2px; color:var(--muted-2); font-size:12.5px; line-height:1.4}

.host-plans{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; align-items:stretch;
}
.confirm-pick .host-plan.wx-card{
  min-width:0; padding:20px 16px 16px;
}
.host-plan.wx-card::before{display:none}
.host-plan.wx-featured{
  border-color:#3d6f94; background:#102233;
  box-shadow:inset 0 3px 0 #168fff;
}
.host-apps{
  display:flex; align-items:center; gap:6px;
  margin:0 0 12px; min-height:24px;
}
.host-plan.wx-featured .host-apps{padding-right:96px}
.host-apps svg{
  display:block; width:24px; height:24px; border-radius:5px;
  overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.host-head{display:block; min-height:0; margin:0 0 4px}
.host-head h3{margin:0; font-size:17px; line-height:1.25}
.host-plan .wx-badge{
  position:absolute; top:14px; right:12px;
  padding:3px 8px; border-radius:999px; background:#168fff; color:#04111c;
  font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.host-plan .wx-for{min-height:36px !important}
.host-price{
  margin:0 0 10px; padding:10px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.host-price strong{
  display:block; font-size:20px; font-weight:700; letter-spacing:-.3px; line-height:1.2;
}
.host-price span{display:block; margin-top:2px; color:var(--muted-2); font-size:12px}
.host-plan ul{flex:1}
.host-pick{
  display:block; margin-top:14px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(103,189,245,.28); background:rgba(22,143,255,.1);
  color:#e2f3fd; font-size:13px; font-weight:700; text-align:center;
}
.host-plan:has(input:checked) .host-pick{
  border-color:transparent; background:linear-gradient(90deg,#168fff,#64bef4); color:#04111c;
}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field.full{grid-column:1/-1}
.field label{display:block; color:#c9d8e3; font-size:var(--fs-sm); font-weight:700; margin:0 0 7px}
.field input,.field select,.field textarea{
  width:100%; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm);
  background:#071621; color:#edf7fc; padding:13px 14px; font:inherit; font-size:var(--fs-sm); outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(103,189,245,.62); box-shadow:0 0 0 3px rgba(22,143,255,.09);
}
.field textarea{min-height:104px; resize:vertical}
.field-hint{font-size:11.5px; color:var(--muted-2); margin-top:6px}

.domain-search{
  margin:0 0 8px; padding:20px; border-radius:12px;
  border:1px solid var(--line); background:#0e1d2b;
}
.domain-search > label{display:block; color:#c9d8e3; font-size:var(--fs-sm); font-weight:700; margin:0 0 10px}
.domain-box{display:grid; grid-template-columns:1fr auto; gap:10px}
.domain-box input{
  width:100%; min-height:52px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:#071621; color:#edf7fc;
  font:inherit; font-size:18px; font-weight:600; letter-spacing:-.2px; outline:none;
}
.domain-box input:focus{
  border-color:rgba(103,189,245,.62); box-shadow:0 0 0 3px rgba(22,143,255,.09);
}
.domain-box input::placeholder{color:#5d7588}
.domain-check{
  min-height:52px; padding:0 22px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(90deg,#168fff,#64bef4); color:#04111c;
  font:inherit; font-size:15px; font-weight:700; white-space:nowrap;
}
.domain-check:disabled{opacity:.65; cursor:wait}
.domain-tlds{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.domain-tld{position:relative; cursor:pointer}
.domain-tld input{position:absolute; opacity:0; pointer-events:none}
.domain-tld span{
  display:block; min-width:54px; padding:8px 12px; border-radius:8px; text-align:center;
  border:1px solid #2a3d4e; background:#071621; color:#d5e6f2;
  font-size:14px; font-weight:700;
}
.domain-tld:hover span{border-color:#3d6a8a}
.domain-tld:has(input:checked) span{
  border-color:#4ea3d8; background:#12283a; color:#8ecfff;
  box-shadow:inset 0 2px 0 #168fff;
}
.domain-price{margin:12px 0 0; color:var(--muted-2); font-size:12.5px}
.domain-result{
  margin:12px 0 0; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:#071621;
  color:#82a2b7; font-size:var(--fs-sm); line-height:1.5;
}
.domain-result.is-ok{border-color:rgba(69,211,157,.35); background:rgba(69,211,157,.08); color:#9be8c4}
.domain-result.is-taken{border-color:rgba(255,176,64,.32); background:rgba(255,176,64,.08); color:#f3c27a}
.domain-result.is-wait{border-color:rgba(103,189,245,.28); background:rgba(22,143,255,.06); color:#9fd0f5}
.domain-result.is-err{border-color:rgba(255,106,0,.35); background:rgba(255,106,0,.08); color:#ffb07a}
.domain-actions,.domain-addons{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 8px;
}
.domain-addons{grid-template-columns:repeat(4,minmax(0,1fr))}
.domain-action,.domain-addon{
  position:relative; display:flex; flex-direction:column; gap:4px;
  min-height:100%; padding:16px; cursor:pointer;
  border:1px solid #2a3d4e; border-radius:10px; background:#0e1d2b;
}
.domain-action input,.domain-addon input{position:absolute; opacity:0; pointer-events:none}
.domain-action:hover,.domain-addon:hover{border-color:#3d6a8a}
.domain-action:has(input:checked),
.domain-addon:has(input:checked){
  border-color:#4ea3d8; background:#12283a;
}
.domain-action svg,.domain-addon svg{
  display:block; width:26px; height:26px; margin:0 0 8px; border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.domain-action b,.domain-addon b{display:block; font-size:15px; font-weight:700}
.domain-action span,.domain-addon span{display:block; color:var(--muted-2); font-size:12.5px; line-height:1.4}
.btn-secondary,.btn-back,.btn-next{
  border:1px solid rgba(103,189,245,.24); background:rgba(22,143,255,.1); color:#e2f3fd;
  border-radius:10px; padding:0 18px; min-height:48px; font:inherit; font-weight:700;
  font-size:var(--fs-sm); cursor:pointer;
}
.btn-back{background:transparent; border-color:var(--line); color:#c3d6e3}
.btn-next{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg,#168fff,#64bef4); border:0; color:#04111c;
}
.btn-next::after{content:"→"; font-weight:700}
.btn-secondary:disabled,.btn-next:disabled,.submit:disabled{opacity:.65; cursor:wait}
.order-addons{margin-top:8px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md)}
.order-addons legend{font-size:var(--fs-sm); font-weight:800; padding:0 4px; color:#c9d8e3}
.order-addons label{display:flex; gap:10px; align-items:center; margin:10px 0; font-size:var(--fs-sm); cursor:pointer}
.order-addons input{accent-color:var(--blue-2)}
.msnote{
  margin-bottom:18px; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid rgba(255,185,0,.16); background:rgba(255,185,0,.05);
  color:#c2cdd6; font-size:var(--fs-sm); line-height:1.55;
}

.review{display:grid; gap:0; margin-bottom:22px}
.review-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:var(--fs-sm);
}
.review-row span{color:var(--muted-2)}
.review-row strong{font-weight:700}
.review-row button{
  border:0; background:none; color:var(--blue); font:inherit; font-size:var(--fs-xs);
  font-weight:800; cursor:pointer; padding:0;
}
.account-box{
  padding:16px; border:1px solid rgba(103,189,245,.2); border-radius:var(--r-md);
  background:rgba(22,143,255,.05);
}
.account-box h3{margin:0 0 6px; font-size:16px}
.account-box p{margin:0 0 14px; color:var(--muted); font-size:var(--fs-sm); line-height:1.5}

.step-actions{
  display:flex; justify-content:flex-end; gap:12px; margin-top:20px;
}
.step-actions .btn-back{margin-right:auto}
.step-actions .submit{margin-top:0; width:auto; min-width:220px}

.order-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:38px; margin-left:6px; padding:0; cursor:pointer;
  border:1px solid #335774; border-radius:8px; background:transparent; color:#d5e6f2;
}
.order-cart:hover{border-color:#67bdf5; color:#fff}
.order-cart-count{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--orange); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center;
}
.order-cart-count[hidden]{display:none}
.cart-backdrop{display:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cart-close{
  display:none; border:0; background:none; color:var(--blue); font:inherit;
  font-size:var(--fs-xs); font-weight:800; cursor:pointer; padding:0;
}
.cart-line{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.055);
}
.cart-line b{display:block; font-size:var(--fs-sm); letter-spacing:-.2px}
.cart-line span{display:block; color:var(--muted-2); font-size:12px; line-height:1.4; margin-top:3px}
.cart-line strong{font-size:var(--fs-sm); text-align:right; white-space:nowrap}
.cart-remove{
  grid-column:1/-1; justify-self:start; border:0; background:none; padding:0;
  color:#8ecfff; font:inherit; font-size:12px; font-weight:800; cursor:pointer;
}

/* Receipt */
.summary{position:sticky; top:18px}
.summary-label{
  font-size:11px; letter-spacing:1.2px; font-weight:700; color:var(--muted-2);
  text-transform:uppercase;
}
.summary h3{font-size:20px; margin:10px 0 4px; letter-spacing:-.3px}
.summary .sub{font-size:var(--fs-sm); color:var(--muted-2); line-height:1.5}
.sumrow{
  display:flex; justify-content:space-between; gap:12px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.055); font-size:var(--fs-xs); color:#8ea6b8;
}
.sumrow strong{color:#eaf6fc; text-align:right; font-weight:700}
.total{display:flex; justify-content:space-between; align-items:flex-end; margin-top:14px}
.total span{color:var(--muted-2); font-size:var(--fs-sm)}
.total strong{font-size:24px; font-weight:700; letter-spacing:-.3px}
.submit{
  width:100%; border:0; border-radius:var(--r-sm); min-height:50px; margin-top:16px; cursor:pointer;
  background:linear-gradient(90deg,#168fff,#64bef4); color:#04111c; font-weight:700; font-size:var(--fs-sm);
}
.submit[hidden]{display:none !important}
.fine{font-size:11.5px; line-height:1.55; color:var(--muted-2); margin-top:12px}
.status{display:none; margin-top:12px; padding:11px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm)}
.status.show{display:block}
.status.ok{background:rgba(69,211,157,.08); border:1px solid rgba(69,211,157,.2); color:#a9ebce}
.status.err{background:rgba(255,106,0,.08); border:1px solid rgba(255,106,0,.2); color:#ffc09a}
.download-request{
  margin-top:12px; padding:12px; width:100%; border-radius:var(--r-sm); cursor:pointer;
  background:#172e41; color:#def1ff; border:1px solid #426984; font:inherit; font-size:var(--fs-sm); font-weight:700;
}
.next-steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  list-style:none; margin:36px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
}
.next-steps li{display:flex; gap:12px; align-items:flex-start}
.next-steps span{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; border:1px solid #335774;
  color:#8ecfff; font-size:12px; font-weight:700;
}
.next-steps b{display:block; font-size:14px; font-weight:600; margin-bottom:2px}
.next-steps small{display:block; color:var(--muted-2); font-size:12.5px; line-height:1.45}
.checkout-foot{padding:20px 0 48px; color:var(--muted-2); font-size:var(--fs-sm); text-align:center}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none !important; animation:none !important}
}
@media(max-width:980px){
  .m365-plans,.host-plans,.domain-addons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m365-plan .wx-for,.host-plan .wx-for{min-height:0 !important}
}
@media(max-width:1080px){
  .layout{grid-template-columns:1fr}
  .product-form.active .summary{display:none}
  body.cart-open .product-form.active .summary{
    display:block; position:fixed; left:12px; right:12px; bottom:12px; top:auto; z-index:80;
    max-height:min(78vh,640px); overflow:auto; margin:0;
    box-shadow:var(--shadow-lg);
  }
  body.cart-open .cart-backdrop{
    display:block; position:fixed; inset:0; z-index:70; background:rgba(4,12,20,.62);
  }
  body.cart-open .cart-close{display:inline}
  body.cart-open{overflow:hidden}
  .steps-col{padding-bottom:76px}
  .step-actions{
    position:sticky; bottom:0; z-index:30; margin:20px -8px 0; padding:12px 8px 16px;
    background:linear-gradient(180deg, transparent, #07111b 28%);
  }
}
@media(max-width:760px){
  .shell{width:calc(100% - 24px)}
  .checkout-head{flex-direction:column; padding-top:20px}
  .packages,.four-pkgs,.grid,.next-steps,.domain-actions,.domain-addons{grid-template-columns:1fr}
  .m365-plans,.host-plans{grid-template-columns:1fr}
  .domain-box{grid-template-columns:1fr}
  .m365-plan .wx-for,.host-plan .wx-for{min-height:0 !important}
  .service-tabs{overflow-x:auto}
  .choice,.option{min-height:0}
  .pkg .for{min-height:0}
  .field.full{grid-column:auto}
  .panel{padding:18px}
  .review-row{grid-template-columns:1fr auto; }
  .review-row span{grid-column:1/-1}
  .step-actions .submit{min-width:0; flex:1}
}