/* KuvoHost order flow — stepper, plan cards, cycles, domain search, add-ons, cart, sticky summary, mobile bottom bar.
   Uses the tokens from tokens.css only. */
.kh-steps{display:flex; gap:6px; list-style:none; margin:0 0 22px; padding:0; counter-reset:s; overflow-x:auto; scrollbar-width:none}
.kh-steps::-webkit-scrollbar{display:none}
.kh-step{display:flex; align-items:center; flex:1; min-width:max-content; position:relative}
.kh-step > a,.kh-step{gap:8px; color:var(--muted); font:600 13px var(--fh); text-decoration:none}
.kh-step > a{display:flex; align-items:center; color:inherit}
.kh-step:not(:last-child)::after{content:""; flex:1; height:2px; background:var(--line); margin:0 8px; min-width:16px; border-radius:2px}
.kh-step-n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 12px var(--fh); background:var(--bg-elev); border:1.5px solid var(--line-2); color:var(--muted); flex:none}
.kh-step-done{color:var(--heading); cursor:pointer}
.kh-step-done .kh-step-n{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok)}
.kh-step-done:not(:last-child)::after{background:var(--ok-line)}
.kh-step-on{color:var(--heading)}
.kh-step-on .kh-step-n{background:var(--purple); border-color:var(--purple); color:#fff; box-shadow:0 0 0 4px var(--tint)}
@media (max-width:860px){ .kh-step:not(.kh-step-on) .kh-step-l{display:none} .kh-step{flex:none} .kh-step:not(:last-child)::after{min-width:12px; flex:none; width:14px} }

.kh-order-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.kh-tabs{display:flex; gap:4px; padding:4px; background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; overflow-x:auto; scrollbar-width:none; max-width:100%}
.kh-tabs::-webkit-scrollbar{display:none}
.kh-tab{white-space:nowrap; padding:9px 14px; border-radius:10px; font:650 13.5px var(--fh); color:var(--text); text-decoration:none !important}
.kh-tab:hover{background:var(--tint); color:var(--heading)}
.kh-tab.kh-is-on{background:var(--purple); color:#fff}
.kh-cycle-toggle{display:flex; gap:2px; padding:4px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px}
.kh-cycle-toggle button{border:0; background:none; padding:7px 14px; border-radius:999px; font:600 13px var(--fh); color:var(--muted); cursor:pointer}
.kh-cycle-toggle button.kh-is-on{background:var(--bg-elev); color:var(--heading); box-shadow:var(--sh-xs)}
.kh-tabpanel{display:none}.kh-tabpanel.kh-is-on{display:block}

.kh-plans{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.kh-plan{position:relative; display:flex; flex-direction:column; gap:12px; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:22px 20px; box-shadow:var(--sh-sm)}
.kh-plan-featured{border-color:var(--purple); box-shadow:0 0 0 3px var(--tint), var(--sh-md)}
.kh-plan-badge{position:absolute; top:-11px; left:20px; background:var(--purple); color:#fff; font:700 11px var(--fh); letter-spacing:.02em; padding:4px 10px; border-radius:999px}
.kh-plan h3{font:800 18px var(--fh); color:var(--heading); margin:0}
.kh-plan-tag{color:var(--muted); font-size:13.5px; margin:0}
.kh-plan-price{min-height:64px}
.kh-plan-cycle b{font:800 30px var(--fh); letter-spacing:-.03em; color:var(--heading)}
.kh-plan-cycle small{color:var(--muted); font-size:13px; margin-left:2px}
.kh-plan-billed{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.kh-save{display:inline-block; margin-top:6px; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line); font:700 11.5px var(--fh); padding:2px 8px; border-radius:999px}
.kh-plan-feats{list-style:none; margin:4px 0 0; padding:12px 0 0; border-top:1px dashed var(--line); display:grid; gap:8px}
.kh-plan-feats li{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--text)}
.kh-plan-feats .kh-ic{color:var(--ok); flex:none; margin-top:2px}

.kh-order-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start}
.kh-order-main{display:grid; gap:16px; min-width:0}
.kh-summary{position:sticky; top:calc(var(--topbar,64px) + 16px)}
.kh-guest .kh-summary{top:84px}
.kh-sum-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px; color:var(--text)}
.kh-sum-row span:last-child{text-align:right; white-space:nowrap}
.kh-sum-main b{display:block; color:var(--heading)}
.kh-sum-main small{color:var(--muted)}
.kh-sum-cfg{color:var(--muted); font-size:12.5px; padding:3px 0}
.kh-sum-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font:600 14px var(--fh); color:var(--heading)}
.kh-sum-total b{font:800 22px var(--fh)}
.kh-summary .kh-btn-lg{margin-top:14px}
.kh-summary .kh-card-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.kh-cur-select{width:auto; min-height:34px !important; padding-top:4px; padding-bottom:4px}
.kh-err{color:var(--danger); font-size:13px; margin:8px 0 0}
.kh-hint{color:var(--muted); font-size:12.5px; margin:8px 0 0}
.kh-req{color:var(--danger)}
.kh-ok-text{color:var(--ok)}
.kh-mt-16{margin-top:16px}.kh-mb-16{margin-bottom:16px}
.kh-h2{font:800 20px var(--fh); color:var(--heading); margin:0 0 4px}
.kh-h3{font:700 15px var(--fh); color:var(--heading); margin:0 0 10px}

.kh-ostep{display:none}.kh-ostep.kh-is-on{display:block}
.kh-ostep-nav{display:flex; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--line)}
.kh-cycles{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.kh-cycle{position:relative; cursor:pointer}
.kh-cycle input{position:absolute; opacity:0; pointer-events:none}
.kh-cycle-in{display:flex; flex-direction:column; gap:4px; padding:14px; border:1.5px solid var(--line-2); border-radius:14px; background:var(--bg-elev); height:100%}
.kh-cycle-in b{font:700 14px var(--fh); color:var(--heading)}
.kh-cycle-price{font:800 20px var(--fh); color:var(--heading)}
.kh-cycle-price small{font:500 12px var(--fb); color:var(--muted)}
.kh-cycle .kh-save{align-self:flex-start}
.kh-cycle input:checked + .kh-cycle-in{border-color:var(--purple); box-shadow:0 0 0 3px var(--tint)}
.kh-cycle input:focus-visible + .kh-cycle-in{box-shadow:var(--focus)}
.kh-muted{color:var(--muted)}

.kh-dsearch-box{display:flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; border:1.5px solid var(--line-2); border-radius:14px; background:var(--input-bg,var(--bg-elev))}
.kh-dsearch-box:focus-within{border-color:#C6B5EC; box-shadow:var(--focus)}
.kh-dsearch-box input{flex:1; min-width:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent; font:500 16px var(--fb); color:var(--heading); padding:8px 0}
.kh-dsearch-box .kh-ic{color:var(--muted); flex:none}
.kh-dresults{display:grid; gap:8px; margin-top:12px}
.kh-drow{display:grid; grid-template-columns:minmax(0,1fr) auto auto 96px; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev)}
.kh-drow-main{border-color:var(--line-2); box-shadow:var(--sh-xs)}
.kh-drow.kh-is-on{border-color:var(--purple); box-shadow:0 0 0 3px var(--tint)}
.kh-dname{font-size:15px; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.kh-dname b{color:var(--heading)}
.kh-dprice{font:700 14px var(--fh); color:var(--heading)}
.kh-dprice small{font:500 11.5px var(--fb); color:var(--muted)}
.kh-dact{text-align:right}
.kh-tld-strip{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.kh-tld{display:inline-flex; gap:6px; align-items:baseline; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); font-size:12.5px; color:var(--muted)}
.kh-tld b{color:var(--heading); font:700 13px var(--fh)}
.kh-dom-years{margin-top:14px; display:flex; align-items:center; gap:10px}
.kh-dom-years label{font:600 13px var(--fh); color:var(--heading)}
.kh-dom-years select{width:auto}
.kh-seg button{border:0; background:none; cursor:pointer}
@media (max-width:560px){ .kh-drow{grid-template-columns:1fr auto; } .kh-dstat{grid-column:1} .kh-dact{grid-column:2; grid-row:1 / span 2; align-self:center} }

.kh-radios{display:flex; flex-wrap:wrap; gap:8px}
.kh-radio{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; font-size:13.5px}
.kh-addons{display:grid; gap:10px}
.kh-addon{display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--line-2); border-radius:14px; cursor:pointer; background:var(--bg-elev)}
.kh-addon:has(input:checked){border-color:var(--purple); box-shadow:0 0 0 3px var(--tint)}
.kh-addon input{width:18px; height:18px; accent-color:var(--purple); flex:none}
.kh-addon-in{flex:1; display:grid}
.kh-addon-in b{font:700 14px var(--fh); color:var(--heading)}
.kh-addon-in small{color:var(--muted); font-size:12.5px}
.kh-addon-price{font:700 14px var(--fh); color:var(--heading); white-space:nowrap}

.kh-cart-items{list-style:none; margin:0; padding:0}
.kh-cart-item{display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid var(--line)}
.kh-cart-item:first-child{border-top:0}
.kh-cart-ico{width:40px; height:40px; border-radius:12px; background:var(--tint); color:var(--accent-text); display:grid; place-items:center; flex:none}
.kh-cart-info{flex:1; min-width:0; display:grid}
.kh-cart-info b{color:var(--heading); font:700 14.5px var(--fh)}
.kh-cart-info small{color:var(--muted); font-size:12.5px}
.kh-cart-price{text-align:right; white-space:nowrap}
.kh-cart-price del{color:var(--faint); font-size:12px}
.kh-coupon{display:flex; gap:8px; margin-top:14px; align-items:center}
.kh-coupon .form-control{min-width:0}
.kh-gateways{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.kh-gateway{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:12px; cursor:pointer}
.kh-gateway:has(input:checked){border-color:var(--purple); box-shadow:0 0 0 3px var(--tint)}
.kh-gateway input{accent-color:var(--purple)}
.kh-gateway span{display:flex; align-items:center; gap:8px; color:var(--heading)}
.kh-check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text)}
.kh-check input{margin-top:3px; accent-color:var(--purple); width:16px; height:16px; flex:none}
.kh-auth-pane .kh-btn{margin-top:14px}

.kh-mbar{display:none}
@media (max-width:1100px){ .kh-order-grid{grid-template-columns:minmax(0,1fr) 300px} }
@media (max-width:960px){
  .kh-order-grid{grid-template-columns:1fr}
  .kh-summary{position:static}
  .kh-summary .kh-btn-lg{display:none}
  .kh-order-flow .kh-ai-fab{display:none}
  .kh-mbar{display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg-elev); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(20,10,50,.08)}
  .kh-mbar small{display:block; color:var(--muted); font-size:11.5px}
  .kh-mbar b{font:800 18px var(--fh); color:var(--heading)}
  .kh-app .kh-mbar,body:has(.kh-bottom-nav) .kh-mbar{bottom:var(--bottom,64px)}
  .kh-order-flow .kh-content{padding-bottom:180px}
}
@media (min-width:861px) and (max-width:960px){ body:has(.kh-bottom-nav) .kh-mbar{bottom:0} }