/*!
 * Krunus Order-Form — krunus-order.css  ·  VIVID design system
 * ====================================================================
 * Bold, branded, light-first (with full dark parity). Loaded AFTER
 * all.min.css + the theme CSS so it wins the cascade and restyles the
 * real .kr-* and WHMCS order-form classes — templates keep every WHMCS
 * data-binding; this file carries the entire look. Removing its <link>
 * in common.tpl is a complete rollback.
 * ==================================================================== */

/* ── 0. Tokens (defensive fallback; values are the live ones) ────────── */
:root{
  --kr-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --kr-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --kr-bg:#f4f3ff; --kr-bg2:#faf9ff; --kr-card:#fff; --kr-card-border:#e9e7fb; --kr-border2:#ded9f7;
  --kr-text:#15132b; --kr-text-muted:#6d6a8a; --kr-text-light:#9893b4;
  --kr-primary:#5b21e6; --kr-primary-2:#8b5cf6; --kr-primary-hover:#4c17c9;
  --kr-primary-light:#efeaff; --kr-primary-light2:#f5f1ff; --kr-primary-ring:#d6c9fb; --kr-primary-text:#5b21e6;
  --kr-primary-rgb:91,33,230;
  --kr-grad:linear-gradient(135deg,#5b21e6,#8b5cf6);
  --kr-input-bg:#faf9ff; --kr-input-border:#ded9f7; --kr-table-head:#f5f1ff; --kr-table-border:#efeaff;
  --kr-success:#10b981; --kr-success-bg:#e7f8f1; --kr-success-text:#0a7a55;
  --kr-warning:#f59e0b; --kr-warning-bg:#fef4e4; --kr-warning-text:#a96808;
  --kr-danger:#e23d6d; --kr-danger-bg:#fdecf1; --kr-danger-text:#b21e49;
  --kr-info:#5b21e6; --kr-info-bg:#efeaff; --kr-info-text:#4c17c9;
  --kr-amber:#f59e0b;
  --kr-radius-lg:22px; --kr-radius:14px; --kr-radius-sm:10px;
  --kr-shadow-sm:0 1px 2px rgba(20,16,60,.04),0 10px 30px rgba(var(--kr-primary-rgb),.07);
  --kr-shadow:0 12px 30px rgba(var(--kr-primary-rgb),.12);
  --kr-shadow-lg:0 26px 50px rgba(var(--kr-primary-rgb),.18);
  --kr-shadow-primary:0 14px 32px rgba(var(--kr-primary-rgb),.40);
  --kr-t:.18s ease; --kro-ring:0 0 0 4px var(--kr-primary-ring);
  --kro-summary-w:360px; --kro-gap:24px;
}
[data-theme="dark"]{
  --kr-bg:#0e0b1c; --kr-bg2:#120e24; --kr-card:#191333; --kr-card-border:#2a2150; --kr-border2:#352a63;
  --kr-text:#f1eefc; --kr-text-muted:#a79fcf; --kr-text-light:#7c72a8;
  --kr-primary-light:#241a4d; --kr-primary-light2:#1c1540; --kr-primary-ring:#5b3fb0; --kr-primary-text:#c4b3ff;
  --kr-input-bg:#120e24; --kr-input-border:#352a63; --kr-table-head:#1c1540; --kr-table-border:#2a2150;
  --kr-success-bg:rgba(16,185,129,.14); --kr-success-text:#34d399;
  --kr-warning-bg:rgba(245,158,11,.14); --kr-warning-text:#fbbf24;
  --kr-danger-bg:rgba(226,61,109,.18); --kr-danger-text:#fb7299;
  --kr-info-bg:rgba(91,33,230,.20); --kr-info-text:#c4b3ff;
  --kr-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.45);
  --kr-shadow:0 14px 34px rgba(0,0,0,.5); --kr-shadow-lg:0 26px 50px rgba(0,0,0,.55);
}

/* ── 1. Scope + container ────────────────────────────────────────────── */
.kr-orderform{font-family:var(--kr-font);color:var(--kr-text);max-width:1140px;margin:0 auto;padding:6px 6px 90px;-webkit-font-smoothing:antialiased}
/* storefront needs more room for sidebar + 3 product cards side-by-side */
.kr-orderform.kr-store-page{max-width:1320px}
.kr-orderform *,.kr-orderform *::before,.kr-orderform *::after{box-sizing:border-box}
.kr-orderform-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:18px 2px 24px}
.kr-orderform-title{font-size:clamp(30px,4.2vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0;color:var(--kr-text)}
.kr-orderform-subtitle,.kr-orderform-intro{margin:10px 0 0;color:var(--kr-text-muted);font-size:16.5px;line-height:1.55;max-width:62ch}
.kr-section-title{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--kr-text-light);font-weight:800;margin:26px 0 14px}

/* ── 2. Step progress bar (new) ──────────────────────────────────────── */
.kr-steps{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--kr-text-light);flex-wrap:wrap}
.kr-steps .kr-step{display:flex;align-items:center;gap:8px}
.kr-steps .kr-step-n{width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--kr-card);border:1.5px solid var(--kr-border2);color:var(--kr-text-light)}
.kr-steps .kr-step.is-active{color:var(--kr-text)} .kr-steps .kr-step.is-active .kr-step-n{background:var(--kr-grad);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(var(--kr-primary-rgb),.4)}
.kr-steps .kr-step.is-done .kr-step-n{background:var(--kr-success-bg);border-color:transparent;color:var(--kr-success)}
.kr-steps .kr-step-bar{width:26px;height:2px;background:var(--kr-border2);border-radius:2px}
.kr-steps .kr-step-label{white-space:nowrap}
@media (max-width:520px){ .kr-steps .kr-step-label{display:none} .kr-steps .kr-step-bar{width:16px} }

/* ── 3. Buttons ──────────────────────────────────────────────────────── */
.kr-orderform .kr-btn,.kr-product-cta,#btnCompleteOrder,#btnCompleteProductConfig,#order-standard_cart .btn.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:14.5px;font-weight:800;line-height:1;
  padding:13px 22px;border-radius:var(--kr-radius);border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--kr-t)}
.kr-orderform .kr-btn-primary,.kr-product-cta,#btnCompleteOrder,#btnCompleteProductConfig,#order-standard_cart .btn.btn-primary{
  background:var(--kr-grad);color:#fff!important;border-color:transparent;box-shadow:0 12px 28px rgba(var(--kr-primary-rgb),.40)}
.kr-orderform .kr-btn-primary:hover,.kr-product-cta:hover,#btnCompleteOrder:hover,#btnCompleteProductConfig:hover,#order-standard_cart .btn.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 34px rgba(var(--kr-primary-rgb),.5)}
.kr-orderform .kr-btn-secondary{background:var(--kr-card);color:var(--kr-primary-text)!important;border-color:var(--kr-border2)}
.kr-orderform .kr-btn-secondary:hover{border-color:var(--kr-primary);background:var(--kr-primary-light)}
.kr-orderform .kr-btn-ghost{background:transparent;color:var(--kr-primary-text)!important;border-color:transparent}
.kr-orderform .kr-btn-sm{font-size:13px;padding:9px 15px} .kr-orderform .kr-btn-lg,#order-standard_cart .btn.btn-lg{font-size:16px;padding:15px 28px} .kr-orderform .kr-btn-block{width:100%}
.kr-orderform .kr-btn:active,.kr-product-cta:active{transform:translateY(1px)}
.kr-orderform .kr-btn:focus-visible{outline:none;box-shadow:var(--kro-ring)}
.kr-orderform .kr-btn[disabled],.kr-orderform .kr-btn.disabled,.kr-orderform .kr-btn.is-busy,.kr-product-cta.disabled{opacity:.5;pointer-events:none;box-shadow:none;transform:none}
.kr-orderform .kr-btn.is-busy{position:relative;color:transparent!important}
.kr-orderform .kr-btn.is-busy::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;animation:kr-spin .6s linear infinite}
@keyframes kr-spin{to{transform:rotate(360deg)}}
.kr-product-cta i,#order-standard_cart .btn.btn-primary i{transition:var(--kr-t)} .kr-product-cta:hover i{transform:translateX(3px)}

/* ── 4. Cards + inputs ───────────────────────────────────────────────── */
.kr-orderform .kr-card{background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);box-shadow:var(--kr-shadow-sm);overflow:hidden}
.kr-orderform .kr-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--kr-card-border)}
.kr-orderform .kr-card-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;margin:0;color:var(--kr-text)}
.kr-orderform .kr-card-title i{color:var(--kr-primary)} .kr-orderform .kr-card-body{padding:24px}
.kr-orderform .kr-input,.kr-orderform .form-control,.kr-orderform .custom-select,.kr-orderform select.form-control,
#order-standard_cart .form-control{width:100%;font-family:inherit;font-size:14px;color:var(--kr-text);background:var(--kr-input-bg);
  border:1.5px solid var(--kr-input-border);border-radius:var(--kr-radius);padding:12px 15px;transition:var(--kr-t)}
.kr-orderform .kr-input:focus,.kr-orderform .form-control:focus,.kr-orderform .custom-select:focus,#order-standard_cart .form-control:focus{outline:none;border-color:var(--kr-primary);background:var(--kr-card);box-shadow:var(--kro-ring)}
.kr-orderform .custom-select,.kr-orderform select.form-control{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236d6a8a' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.kr-label{display:block;font-size:13px;font-weight:700;color:var(--kr-text);margin-bottom:7px}
.kr-help-text,.kr-orderform .help-block,.kr-orderform .field-help-text{font-size:12.5px;color:var(--kr-text-muted);margin-top:6px;display:block}
.kr-form-group,.kr-orderform .form-group{margin-bottom:16px}
.kr-divider{display:flex;align-items:center;gap:14px;color:var(--kr-text-light);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:20px 0}
.kr-divider::before,.kr-divider::after{content:"";flex:1;height:1px;background:var(--kr-border2)}

/* ── 5. Layout grids ─────────────────────────────────────────────────── */
.kr-orderform-grid{display:block} /* products: single centered column (sidebar removed in template) */
.kr-viewcart-grid,.kr-confproduct-grid,.kr-checkout-grid{display:grid;grid-template-columns:1fr var(--kro-summary-w);gap:var(--kro-gap);align-items:start}
.kr-viewcart-main,.kr-confproduct-main,.kr-checkout-main{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ── 6. Product grid + cards ─────────────────────────────────────────── */
.kr-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:6px}
/* responsive: 3 → 2 → 1 as width tightens (keeps cards from getting too narrow) */
@media (max-width:1180px){ .kr-product-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .kr-product-grid{grid-template-columns:1fr} }
.kr-product-card{position:relative;display:flex;flex-direction:column;background:var(--kr-card);border:2px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);padding:30px 26px;box-shadow:var(--kr-shadow-sm);transition:transform var(--kr-t),box-shadow var(--kr-t),border-color var(--kr-t)}
.kr-product-card:hover{transform:translateY(-6px);box-shadow:var(--kr-shadow-lg);border-color:var(--kr-primary-ring)}
.kr-product-card.kr-featured{background:var(--kr-grad);border-color:transparent;color:#fff;box-shadow:var(--kr-shadow-primary)}
.kr-product-card.kr-featured .kr-product-name,.kr-product-card.kr-featured .kr-product-desc,.kr-product-card.kr-featured .kr-product-price-cycle{color:#fff}
.kr-product-card.kr-featured .kr-product-price-amount{color:#fff}
.kr-product-card.kr-featured .kr-product-desc li{color:rgba(255,255,255,.95)} .kr-product-card.kr-featured .kr-product-desc li::before{color:#fff}
.kr-product-card.kr-featured .kr-product-cta{background:#fff;color:var(--kr-primary)!important;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.kr-product-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--kr-primary);background:#fff;padding:6px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.kr-product-name{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;color:var(--kr-text)}
.kr-product-desc{font-size:14px;line-height:1.6;color:var(--kr-text-muted);margin:0 0 18px;flex:1}
.kr-product-desc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.kr-product-desc li{position:relative;padding:0;font-weight:500;display:flex;align-items:flex-start;gap:9px}
.kr-product-desc li > i{color:var(--kr-primary);margin-top:3px;flex:0 0 auto}
/* NO injected ::before checkmark — the product description HTML provides its own
   icons; injecting one caused a double-marker/tofu box. */
.kr-product-price{display:flex;align-items:baseline;gap:6px;margin:0 0 18px}
.kr-product-price-amount{font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--kr-text)}
.kr-product-price-cycle{font-size:14px;font-weight:700;color:var(--kr-text-muted)}
.kr-product-card.kr-cycle-unavailable .kr-product-cta{background:var(--kr-table-head);color:var(--kr-text-muted)!important;box-shadow:none;pointer-events:none}

/* ── 7. Billing-cycle toggle ─────────────────────────────────────────── */
.kr-cycle-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px;background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:999px;box-shadow:0 6px 18px rgba(var(--kr-primary-rgb),.07)}
.kr-cycle-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;color:var(--kr-text-muted);background:transparent;border:0;border-radius:999px;padding:10px 22px;cursor:pointer;transition:var(--kr-t)}
.kr-cycle-btn.active{color:#fff;background:var(--kr-grad);box-shadow:0 8px 18px rgba(var(--kr-primary-rgb),.4)}
.kr-cycle-save{font-size:11px;font-weight:800;color:#fff;background:var(--kr-amber);padding:2px 8px;border-radius:999px;line-height:1.5}
.kr-cycle-btn.active .kr-cycle-save{color:#fff}
/* storefront: two-column layout — VERTICAL category sidebar + product grid */
.kr-store-layout{display:grid;grid-template-columns:248px 1fr;gap:24px;align-items:start}
.kr-store-layout.kr-no-cats{grid-template-columns:1fr}
.kr-store-main{min-width:0}
.kr-cat-nav-vertical{position:sticky;top:24px;display:flex;flex-direction:column;gap:6px;background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);padding:12px;box-shadow:var(--kr-shadow-sm)}
.kr-cat-nav-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--kr-text-light);padding:8px 12px 6px}
.kr-cat-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:700;color:var(--kr-text-muted);background:transparent;border:1.5px solid transparent;border-radius:var(--kr-radius);padding:11px 14px;text-decoration:none;transition:var(--kr-t)}
.kr-cat-pill:hover{background:var(--kr-table-head);color:var(--kr-text)}
.kr-cat-pill.active{background:var(--kr-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(var(--kr-primary-rgb),.35)}
.kr-cat-pill .kr-cat-chev{font-size:10px;opacity:.45;transition:transform var(--kr-t)}
.kr-cat-pill:hover .kr-cat-chev{transform:translateX(2px);opacity:.8}
.kr-cat-pill.active .kr-cat-chev{opacity:.9}
.kr-store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 2px 22px}
.kr-store-toolbar .kr-orderform-intro{margin:0;max-width:54ch}
.kr-product-head{margin-bottom:6px} .kr-product-body{display:flex;flex-direction:column;flex:1}
.kr-empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--kr-text-muted)} .kr-empty-state i{font-size:42px;color:var(--kr-text-light);display:block;margin-bottom:14px}

/* ── 8. Choice tiles (.kr-choice + WHMCS .option + payment) ──────────── */
.kr-choice,#order-standard_cart .option{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 12px;border:2px solid var(--kr-card-border);border-radius:var(--kr-radius);background:var(--kr-bg2);cursor:pointer;transition:var(--kr-t)}
.kr-choice:hover,#order-standard_cart .option:hover{border-color:var(--kr-primary-ring)}
.kr-choice.is-checked,.kr-choice:has(input:checked),#order-standard_cart .option:has(input:checked){border-color:var(--kr-primary);background:var(--kr-primary-light2);box-shadow:var(--kro-ring)}
#order-standard_cart .option>label{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--kr-text);margin:0;cursor:pointer;flex:1 1 auto;min-width:0}
.kr-choice-body{flex:1;min-width:0} .kr-choice-title{font-weight:700;font-size:14.5px;color:var(--kr-text)} .kr-choice-desc{font-size:13px;color:var(--kr-text-muted);margin-top:3px}
.kr-choice-price{font-weight:800;color:var(--kr-primary-text);white-space:nowrap}

/* ── 9. Native input + Vivid iCheck skin ─────────────────────────────── */
.kr-orderform input[type="checkbox"],.kr-orderform input[type="radio"],#order-standard_cart input[type="checkbox"]:not(.no-icheck),#order-standard_cart input[type="radio"]:not(.no-icheck){accent-color:var(--kr-primary);width:18px;height:18px;cursor:pointer}
.icheckbox_square-blue,.iradio_square-blue{box-sizing:border-box;display:inline-block;position:relative;width:21px!important;height:21px!important;padding:0!important;margin-right:9px;vertical-align:middle;cursor:pointer;flex:0 0 auto;background:var(--kr-input-bg)!important;background-image:none!important;border:2px solid var(--kr-border2);transition:var(--kr-t)}
.icheckbox_square-blue{border-radius:6px} .iradio_square-blue{border-radius:50%}
.icheckbox_square-blue.hover,.icheckbox_square-blue.focus,.iradio_square-blue.hover,.iradio_square-blue.focus{border-color:var(--kr-primary);box-shadow:var(--kro-ring)}
.icheckbox_square-blue.checked,.iradio_square-blue.checked{background:var(--kr-grad)!important;border-color:transparent}
.icheckbox_square-blue.checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.iradio_square-blue.checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.icheckbox_square-blue.disabled,.iradio_square-blue.disabled{opacity:.5;cursor:not-allowed}
.icheckbox_square-blue .iCheck-helper,.iradio_square-blue .iCheck-helper{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}

/* ── 10. Cart ────────────────────────────────────────────────────────── */
.kr-table.kr-cart-table{width:100%;border-collapse:collapse}
.kr-cart-table thead th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--kr-text-light);padding:0 0 12px;border-bottom:1px solid var(--kr-card-border)}
.kr-cart-table .kr-cart-price-col{text-align:right} .kr-cart-table .kr-cart-act-col{width:44px}
.kr-cart-row td{padding:18px 0;border-bottom:1px solid var(--kr-table-border);vertical-align:top} .kr-cart-row:last-child td{border-bottom:0}
.kr-cart-item-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:800;font-size:14.5px;color:var(--kr-text)} .kr-cart-item-name>i{color:var(--kr-primary)}
.kr-cart-item-domain{font-size:13px;color:var(--kr-text-muted);margin-top:6px} .kr-cart-item-domain i{color:var(--kr-text-light)}
.kr-cart-item-opts{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:3px} .kr-cart-item-opts li{font-size:12.5px;color:var(--kr-text-muted)} .kr-opt-key{font-weight:700;color:var(--kr-text)}
.kr-cart-edit{font-size:12px;font-weight:700;color:var(--kr-primary-text);text-decoration:none} .kr-cart-edit:hover{text-decoration:underline}
.kr-cart-item-price{text-align:right;white-space:nowrap} .kr-cart-price-val{display:block;font-weight:800;font-size:14.5px;color:var(--kr-text)} .kr-cart-cycle-val{display:block;font-size:12px;color:var(--kr-text-muted);margin-top:2px}
.kr-cart-remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--kr-radius-sm);color:var(--kr-danger);background:var(--kr-danger-bg);border:0;cursor:pointer;transition:var(--kr-t)}
.kr-cart-remove:hover{filter:brightness(.95)} .kr-cart-remove.is-busy{pointer-events:none;opacity:.5}
.kr-cart-remove-locked{color:var(--kr-text-light);background:var(--kr-table-head);cursor:not-allowed}
.kr-cart-link-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--kr-primary-light);color:var(--kr-primary-text);white-space:nowrap} .kr-cart-link-badge i{font-size:10px}
.kr-cart-footer{margin-top:16px;display:flex;justify-content:flex-end}
.kr-cart-empty-state{text-align:center;padding:48px 20px;color:var(--kr-text-muted)} .kr-cart-empty-icon{font-size:42px;color:var(--kr-text-light);margin-bottom:14px;display:block} .kr-cart-empty-state p{margin:0 0 18px}
.kr-cart-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:40px 16px;color:var(--kr-text-muted);font-size:14px} .kr-cart-loading i{color:var(--kr-primary)}
.kr-cart-row.is-removing{opacity:.4;pointer-events:none}
.kr-promo-card .kr-promo-header{display:flex;align-items:center;gap:9px;padding:16px 24px 0;font-weight:800;font-size:14px} .kr-promo-card .kr-promo-header i{color:var(--kr-primary)}
.kr-promo-card form[data-kr-promo-form]{display:flex;gap:10px} .kr-promo-card .kr-input{flex:1}
.kr-promo-applied{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--kr-radius);background:var(--kr-success-bg);color:var(--kr-success-text);font-size:13.5px;margin-bottom:12px} .kr-promo-applied i.fa-check-circle{color:var(--kr-success)}
.kr-promo-clear{margin-left:auto;background:transparent;border:0;color:inherit;cursor:pointer;opacity:.7} .kr-promo-clear:hover{opacity:1}

/* ── 11. Order summary (cart JS + checkout) ──────────────────────────── */
.kr-viewcart-summary .kr-card,.kr-checkout-summary,.kr-confproduct-summary .kr-card{position:sticky;top:24px}
.kr-summary-rows{padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.kr-summary-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--kr-text-muted)} .kr-summary-row span:last-child{font-weight:700;color:var(--kr-text)}
.kr-summary-row-discount span:last-child{color:var(--kr-success-text)} .kr-summary-row-recurring{font-size:13px;color:var(--kr-text-light);font-style:italic}
.kr-summary-total{display:flex;align-items:baseline;justify-content:space-between;padding:20px 22px;background:var(--kr-primary-light2);border-top:2px dashed var(--kr-border2)}
.kr-summary-total-label{font-size:12px;font-weight:800;color:var(--kr-primary-text);text-transform:uppercase;letter-spacing:.04em} .kr-summary-total-amount{font-size:30px;font-weight:800;color:var(--kr-primary-text);letter-spacing:-.03em}
.kr-summary-actions{padding:18px 22px;display:flex;flex-direction:column;gap:12px} .kr-summary-checkout{width:100%}
.kr-summary-continue{text-align:center;font-size:13px;font-weight:700;color:var(--kr-text-muted);text-decoration:none} .kr-summary-continue:hover{color:var(--kr-primary-text)}
/* configure fragment (#producttotal / ordersummary.tpl) */
#orderSummary{padding:4px 22px 18px;font-size:13.5px} #orderSummary .product-name{display:block;font-size:15px;font-weight:800;margin-bottom:2px} #orderSummary .product-group{display:block;font-size:12px;color:var(--kr-text-light);margin-bottom:14px}
#orderSummary .clearfix{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;color:var(--kr-text-muted)} #orderSummary .clearfix .float-right,#orderSummary .clearfix .pull-right{color:var(--kr-text);font-weight:700;white-space:nowrap}
#orderSummary .summary-totals{margin-top:12px;padding-top:12px;border-top:1px solid var(--kr-card-border)}
#orderSummary .total-due-today{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:2px dashed var(--kr-border2)}
#orderSummary .total-due-today .amt{font-size:24px;font-weight:800;color:var(--kr-primary-text);order:2} #orderSummary .total-due-today>span:not(.amt){font-size:12px;font-weight:800;text-transform:uppercase;color:var(--kr-text-muted)}
#orderSummaryLoader,.loader{text-align:center;color:var(--kr-text-light);padding:8px 0}

/* ── 12. Trust row (facts only) ──────────────────────────────────────── */
.kr-trust-row{display:flex;flex-wrap:wrap;gap:14px 24px;padding:16px 22px}
.kr-trust-item{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--kr-text-muted)} .kr-trust-item i{color:var(--kr-success);font-size:14px}

/* ── 13. Configure page ──────────────────────────────────────────────── */
.kr-conf-card .kr-conf-card-body{padding:24px}
.kr-orderform .product-configurable-options .form-group{margin-bottom:18px} .kr-orderform .product-configurable-options label{font-size:13.5px;font-weight:700;color:var(--kr-text)}
.kr-orderform .form-control-qty{max-width:120px;display:inline-block} .kr-orderform .form-control-static-inline{margin-left:10px;color:var(--kr-text-muted);font-size:13.5px}
.kr-orderform .addon-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0}
.kr-orderform .addon-products>[class^="col-"]{width:100%;max-width:100%;flex:none;padding:0}
.kr-orderform .panel-addon{position:relative;display:flex;flex-direction:column;height:100%;background:var(--kr-bg2);border:2px solid var(--kr-card-border);border-radius:var(--kr-radius);padding:16px;margin:0;box-shadow:none;transition:var(--kr-t)}
.kr-orderform .panel-addon:hover{border-color:var(--kr-primary-ring)} .kr-orderform .panel-addon.panel-addon-selected{border-color:var(--kr-primary);background:var(--kr-primary-light2);box-shadow:var(--kro-ring)}
.kr-orderform .panel-addon .panel-body,.kr-orderform .panel-addon .card-body{padding:0;font-size:13px;color:var(--kr-text-muted)} .kr-orderform .panel-addon label{display:inline-flex;align-items:center;font-weight:800;font-size:14px;color:var(--kr-text);margin:0 0 6px}
.kr-orderform .panel-addon .panel-price{margin-top:12px;font-weight:800;color:var(--kr-primary-text)} .kr-orderform .panel-addon .panel-add{display:none}
/* merged domain add-on rows (ID Protection / DNS / email forwarding) */
.kr-orderform .kr-addon-row{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0 0 10px;border:1.5px solid var(--kr-card-border);border-radius:var(--kr-radius);background:var(--kr-bg2);cursor:pointer;transition:var(--kr-t)}
.kr-orderform .kr-addon-row:last-child{margin-bottom:0}
.kr-orderform .kr-addon-row:hover{border-color:var(--kr-primary-ring)}
.kr-orderform .kr-addon-row:has(input:checked){border-color:var(--kr-primary);background:var(--kr-primary-light2);box-shadow:var(--kro-ring)}
.kr-orderform .kr-addon-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--kr-primary);flex:0 0 auto}
.kr-orderform .kr-addon-label{flex:1;font-size:14px;font-weight:600;color:var(--kr-text)}
.kr-orderform .kr-addon-price{font-weight:800;color:var(--kr-primary-text);white-space:nowrap}

/* ── 14. Domain flow (standard_cart DOM, Vivid) ──────────────────────── */
#order-standard_cart .domain-selection-options{display:flex;flex-direction:column;gap:12px}
/* inline single-row layout: [www.][name input][.tld ▾][Check] — no wrapping.
   The cluster is PINNED RIGHT (margin-left:auto) with a CONSISTENT fixed width so
   it lands in the same spot for every option regardless of label length — the
   label (flex:1 1 auto + min-width:0, set above) shrinks/wraps instead of shoving
   the cluster around. This also kills the TLD↔button overlap on the long
   "update my nameservers" option, since the cluster can no longer be squeezed. */
#order-standard_cart .domain-input-group{margin-top:0;margin-left:auto;flex:0 0 600px;max-width:62%;padding:0}
/* Normalize Bootstrap's negative .row margins + col padding + grid OFFSETS inside
   the cluster — otherwise offset-sm-1 (~50px) wastes the cluster's left edge and the
   negative row margins skew the button's right edge. Zeroing them makes the cluster
   math deterministic and gives the name input back its full length. */
#order-standard_cart .domain-input-group .row{margin-left:0;margin-right:0}
#order-standard_cart .domain-input-group [class*="col-"]{padding-left:0;padding-right:0;margin-left:0;margin-right:0;float:none}
#order-standard_cart .domain-input-group > .row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
#order-standard_cart .domains-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;width:100%}
#order-standard_cart .domains-row > [class*="col-"]{width:auto}
#order-standard_cart .domains-row .col-xs-9,#order-standard_cart .domains-row .col-9{flex:1 1 auto;min-width:0}
/* TLD column: FIXED width so a <select> (sized to its options) and a free-text
   <input> (sized to its default ~20ch) render at the SAME width and can NEVER push
   into the action button — this was the owndomain "Use"-button overlap. */
#order-standard_cart .domains-row .col-xs-3,#order-standard_cart .domains-row .col-3{flex:0 0 116px;width:116px;max-width:116px}
/* bare selects/inputs sitting directly in a domains-row (e.g. the incart domain
   dropdown) must grow to fill, so the Use button stays pinned far-right like the rest */
#order-standard_cart .domains-row > .form-control,#order-standard_cart .domains-row > select.form-control{flex:1 1 auto;min-width:0}
#order-standard_cart .domain-input-group > .row > [class*="col-sm-8"]{flex:1 1 auto;min-width:0;max-width:none}
/* Action-button column: FIXED width so every button (Use/Check/Transfer) is the
   same size and its right edge lands on the cluster's right edge — "aligned right",
   uniform, no floating narrow buttons. */
#order-standard_cart .domain-input-group > .row > [class*="col-sm-2"]{flex:0 0 128px;width:128px;max-width:128px}
#order-standard_cart .input-group{display:flex;align-items:stretch;width:100%}
#order-standard_cart .input-group-addon,#order-standard_cart .input-group-prepend{display:flex;align-items:center;padding:0 14px;border:1.5px solid var(--kr-input-border);border-right:0;border-radius:var(--kr-radius) 0 0 var(--kr-radius);background:var(--kr-table-head);color:var(--kr-text-muted);font-size:13px;white-space:nowrap}
#order-standard_cart .input-group .input-group-text{background:transparent;border:0;padding:0;color:inherit} #order-standard_cart .input-group .form-control{border-radius:0 var(--kr-radius) var(--kr-radius) 0;flex:1 1 auto;min-width:0}
/* TLD select / own-tld input — themed, sized to content, inline */
#order-standard_cart #registertld,#order-standard_cart #transfertld,#order-standard_cart #owndomaintld,#order-standard_cart #subdomaintld{
  width:100%;min-width:0;height:100%;font-family:inherit;font-size:14px;font-weight:600;color:var(--kr-text);
  background:var(--kr-input-bg);border:1.5px solid var(--kr-input-border);border-radius:var(--kr-radius);padding:0 34px 0 14px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b21e6' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
#order-standard_cart #registertld:focus,#order-standard_cart #transfertld:focus,#order-standard_cart #owndomaintld:focus,#order-standard_cart #subdomaintld:focus{outline:none;border-color:var(--kr-primary);box-shadow:var(--kro-ring)}
#order-standard_cart #owndomaintld{appearance:auto;-webkit-appearance:auto;background-image:none;padding:0 14px}
/* the option's submit (Check/Transfer/Use) button fills its fixed column so all
   three are identical width and flush-right */
#order-standard_cart .domain-input-group .btn.btn-primary,#order-standard_cart .domain-input-group .btn-block{width:100%;white-space:nowrap;align-self:stretch;padding:0 18px}
#order-standard_cart textarea#message{width:100%;min-height:84px;resize:vertical;font-family:inherit;font-size:14px;color:var(--kr-text);background:var(--kr-input-bg);border:1.5px solid var(--kr-input-border);border-radius:var(--kr-radius);padding:12px 15px} #order-standard_cart textarea#message:focus{outline:none;border-color:var(--kr-primary);box-shadow:var(--kro-ring)}
#order-standard_cart .btn-block{width:100%}
#order-standard_cart #DomainSearchResults{margin-top:22px} #order-standard_cart .primary-domain-header{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--kr-text-light);margin:0 0 10px} #order-standard_cart .primary-domain-header .fa-sparkles{color:var(--kr-primary)}
#order-standard_cart #primaryLookupResult,#order-standard_cart #searchDomainInfo{background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);padding:20px 22px;box-shadow:var(--kr-shadow-sm)}
#order-standard_cart .domain-lookup-loader .fa-spinner{color:var(--kr-primary)} #order-standard_cart .headline{font-size:16px;font-weight:800}
#order-standard_cart .domain-checker-available,#order-standard_cart .domain-available{color:var(--kr-success-text)} #order-standard_cart .domain-checker-unavailable,#order-standard_cart .domain-unavailable,#order-standard_cart .domain-invalid .headline,#order-standard_cart .domain-error{color:var(--kr-danger-text)}
#order-standard_cart .domain-price{margin-top:12px;font-size:15px} #order-standard_cart .domain-price .price{font-weight:800;color:var(--kr-primary-text);margin-left:6px}
#order-standard_cart .spotlight-tlds{margin-top:22px} #order-standard_cart .spotlight-tlds-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#order-standard_cart .spotlight-tld{position:relative;background:var(--kr-card);border:2px solid var(--kr-card-border);border-radius:var(--kr-radius);padding:16px 14px;text-align:center;font-size:18px;font-weight:800;color:var(--kr-text);box-shadow:var(--kr-shadow-sm)}
#order-standard_cart .spotlight-tld [class^="spotlight-tld-"]{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--kr-primary-text);background:var(--kr-primary-light);border-radius:999px;padding:2px 8px;display:inline-block;margin-bottom:6px} #order-standard_cart .spotlight-tld .price{display:block;font-size:14px;font-weight:700;color:var(--kr-text-muted);margin:8px 0}
#order-standard_cart .btn-add-to-cart{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;font-weight:800;font-size:13px;padding:10px 12px;border-radius:var(--kr-radius);background:var(--kr-primary-light);color:var(--kr-primary-text);border:0;cursor:pointer;transition:var(--kr-t)} #order-standard_cart .btn-add-to-cart:hover{background:var(--kr-grad);color:#fff}
#order-standard_cart .suggested-domains{margin-top:22px;background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);overflow:hidden;box-shadow:var(--kr-shadow-sm)} #order-standard_cart .suggested-domains .panel-heading,#order-standard_cart .suggested-domains .card-header{padding:14px 22px;font-weight:800;border-bottom:1px solid var(--kr-card-border);background:var(--kr-table-head)}
#order-standard_cart .domain-suggestion,#order-standard_cart .list-group-item{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--kr-table-border);border-left:0;border-right:0} #order-standard_cart .domain-suggestion .domain{font-weight:800;color:var(--kr-text)} #order-standard_cart .domain-suggestion .extension{color:var(--kr-text-muted)} #order-standard_cart .domain-suggestion .actions{margin-left:auto;display:flex;align-items:center;gap:12px} #order-standard_cart .domain-suggestion .price{font-weight:800;color:var(--kr-primary-text)} #order-standard_cart .domain-suggestion .btn-add-to-cart{width:auto}
#order-standard_cart .kr-ns-verify{margin-top:22px} #order-standard_cart .kr-ns-verify code{background:var(--kr-table-head);border:1px solid var(--kr-card-border);border-radius:6px;padding:1px 6px;font-family:var(--kr-font-mono);font-size:12.5px;color:var(--kr-primary-text)}

/* ── 15. Checkout ────────────────────────────────────────────────────── */
.kr-checkout-page .sub-heading{margin:8px 0 16px} .kr-checkout-page .sub-heading:first-of-type{margin-top:0}
.kr-checkout-page .sub-heading .primary-bg-color{display:block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--kr-text);padding:0 0 10px;border-bottom:2px solid var(--kr-card-border)}
.kr-checkout-page .prepend-icon{position:relative} .kr-checkout-page .prepend-icon .field-icon{position:absolute;left:0;top:0;width:44px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--kr-text-light);margin:0;pointer-events:none;z-index:2} .kr-checkout-page .prepend-icon .field-icon~.field-icon{display:none}
.kr-checkout-page input.field,.kr-checkout-page select.field,.kr-checkout-page .field.form-control{width:100%;font-family:inherit;font-size:14px;color:var(--kr-text);background:var(--kr-input-bg);border:1.5px solid var(--kr-input-border);border-radius:var(--kr-radius);padding:12px 15px;transition:var(--kr-t)}
.kr-checkout-page .prepend-icon input.field,.kr-checkout-page .prepend-icon select.field{padding-left:44px}
.kr-checkout-page input.field:focus,.kr-checkout-page select.field:focus{outline:none;border-color:var(--kr-primary);background:var(--kr-card);box-shadow:var(--kro-ring)}
.kr-checkout-page .field-error-msg{display:none;font-size:12px;color:var(--kr-danger-text);margin-top:5px} .kr-checkout-page .has-error .field-error-msg,.kr-checkout-page .field-error-msg.d-block{display:block}
.kr-checkout-page .account-select-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .kr-checkout-page .account-select-container>[class*="col-"]{width:100%;max-width:100%;padding:0;flex:none}
.kr-checkout-page .account{border:2px solid var(--kr-card-border);border-radius:var(--kr-radius);padding:14px 16px;background:var(--kr-bg2);transition:var(--kr-t)} .kr-checkout-page .account.active{border-color:var(--kr-primary);background:var(--kr-primary-light2);box-shadow:var(--kro-ring)} .kr-checkout-page .account .radio-inline{display:flex;gap:10px;margin:0;cursor:pointer} .kr-checkout-page .account .small{color:var(--kr-text-muted);font-size:12.5px}
.kr-checkout-page #totalDueToday{display:none}
.kr-checkout-page .apply-credit-container{background:var(--kr-table-head);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius);padding:14px 16px;margin-bottom:18px} .kr-checkout-page .apply-credit-container .radio{display:flex;align-items:center;gap:9px;margin:6px 0}
.kr-checkout-page #paymentGatewaysContainer{margin:6px 0 16px} .kr-checkout-page #paymentGatewaysContainer .text-center{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
/* payment-method tiles ONLY — scoped to the gateway picker + the card-input area
   so this border/ring does NOT leak onto the account card's <label class="radio-inline">
   (that leak was the "double rectangle" on Choose Account). */
.kr-checkout-page #paymentGatewaysContainer label.radio-inline,.kr-checkout-page .cc-input-container label.radio-inline{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border:2px solid var(--kr-card-border);border-radius:var(--kr-radius);cursor:pointer;font-weight:700;font-size:13.5px;background:var(--kr-bg2);transition:var(--kr-t);margin:0} .kr-checkout-page #paymentGatewaysContainer label.radio-inline:hover,.kr-checkout-page .cc-input-container label.radio-inline:hover{border-color:var(--kr-primary-ring)} .kr-checkout-page #paymentGatewaysContainer label.radio-inline:has(input:checked),.kr-checkout-page .cc-input-container label.radio-inline:has(input:checked){border-color:var(--kr-primary);background:var(--kr-primary-light2);box-shadow:var(--kro-ring)}
/* the account card's inner label must stay flat — the .account div provides the box */
.kr-checkout-page .account label.radio-inline{border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
/* the "Enter New Card" tile sits in a <ul><li>; a list-context rule knocks its
   padding-left to 0 so the radio smooshes against the left wall. Restore the inset
   (high specificity to beat that rule). Shown for both Stripe + Card gateways. */
#order-standard_cart.kr-checkout-page .cc-input-container ul li label.radio-inline{padding-left:18px}
.kr-checkout-page #paymentGatewayInput:not(:empty){margin:14px 0;padding:18px;background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);box-shadow:var(--kr-shadow-sm)} .kr-checkout-page .gateway-errors{margin:12px 0}
/* Card-input panel. Stock orderform paints .cc-input-container a flat #f3f3f3 /
   #d9d9d9 / 4px slab (style.css:553) — the one checkout block that ignores the
   indigo tokens, so it reads as a grey rectangle on the white page. Re-skin it
   as a clean card matching the gateway pills + domain panels + summary aside.
   The #id.class .class selector outranks the stock #id .class rule. */
#order-standard_cart.kr-checkout-page .cc-input-container{background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);padding:20px 22px;box-shadow:var(--kr-shadow-sm)}
/* Saved payment methods on CHECKOUT (.existing-cc-grid). WHMCS emits FIVE flat
   .paymethod-info cells per card (radio·icon·label·brand·expiry). The old auto-fit
   rule scattered them into 220px columns and rendered the empty brand/desc cells as
   grey boxes. Lay them as a real 5-col grid → each card is one clean row, empties are
   just blank (transparent), selected card highlights. (Client-area page uses the
   separate .three-column-grid block in whmcs-overrides.css.) */
#order-standard_cart.kr-checkout-page .cc-input-container .existing-cc-grid{display:grid;grid-template-columns:44px 36px minmax(0,1fr) auto auto;column-gap:0;width:100%;margin-bottom:14px;border:1px solid var(--kr-card-border);border-radius:var(--kr-radius);overflow:hidden}
.kr-checkout-page .existing-cc-grid .paymethod-info{display:flex;align-items:center;min-width:0;padding:12px 8px;margin:0;background:transparent;border:0;border-bottom:1px solid var(--kr-table-border);cursor:pointer;font-size:13px;color:var(--kr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr-checkout-page .existing-cc-grid .paymethod-info:nth-child(5n+1){padding-left:16px} .kr-checkout-page .existing-cc-grid .paymethod-info:nth-child(5n){padding-right:16px;justify-content:flex-end;color:var(--kr-text-muted)}
.kr-checkout-page .existing-cc-grid .paymethod-info:nth-last-child(-n+5){border-bottom:0}
.kr-checkout-page .existing-cc-grid .paymethod-info.selected{background:var(--kr-primary-light2)}
.kr-checkout-page .existing-cc-grid .paymethod-info i{font-size:19px;color:var(--kr-text-muted)}
/* Save-card toggle (bootstrap-switch). Plugin renders [Yes][label][No] but the theme
   never styled .bootstrap-switch → it collapsed to raw "Yes No". Render it as a compact
   SEGMENTED pill (both shown, active side colored). The !important overrides neutralize
   the plugin's slide-offset so both segments stay visible. */
.kr-checkout-page #inputNoStoreContainer{display:flex;align-items:center;gap:10px;line-height:1.4;min-height:42px}
.kr-checkout-page #inputNoStoreContainer label.checkbox-inline{margin:0;font-size:13.5px;color:var(--kr-text)}
.kr-checkout-page .bootstrap-switch{display:inline-flex;flex:0 0 auto;width:auto!important;border:1.5px solid var(--kr-input-border);border-radius:999px;overflow:hidden;cursor:pointer;user-select:none;line-height:1}
.kr-checkout-page .bootstrap-switch .bootstrap-switch-container{display:inline-flex!important;align-items:stretch;width:auto!important;margin:0!important;transform:none!important}
.kr-checkout-page .bootstrap-switch .bootstrap-switch-handle-on,.kr-checkout-page .bootstrap-switch .bootstrap-switch-handle-off{display:inline-flex;align-items:center;justify-content:center;padding:6px 15px;font-size:12px;font-weight:800;background:var(--kr-table-head);color:var(--kr-text-muted);transition:var(--kr-t)}
.kr-checkout-page .bootstrap-switch .bootstrap-switch-label{display:none}
.kr-checkout-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on{background:var(--kr-grad);color:#fff}
.kr-checkout-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off{background:var(--kr-text-muted);color:#fff}
.kr-checkout-page .bootstrap-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kr-checkout-page .password-strength-meter .progress{height:8px;border-radius:999px;background:var(--kr-table-border);overflow:hidden;margin-top:6px} .kr-checkout-page .password-strength-meter .progress-bar{background:var(--kr-success);height:100%;transition:var(--kr-t)}
.kr-checkout-page .marketing-email-optin{background:var(--kr-table-head);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius);padding:16px;margin:18px 0}
.kr-checkout-page .checkbox-inline{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--kr-text)} .kr-checkout-page #btnCompleteOrder{width:100%;margin-top:10px}
.kr-express-pay{margin-bottom:8px} .kr-express-pay[hidden]{display:none} .kr-express-pay-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--kr-text-light);margin-bottom:10px} .kr-express-pay-buttons{display:flex;flex-direction:column;gap:10px} .kr-express-btn-mount:empty{display:none}
/* server-rendered checkout summary */
.kr-checkout-summary{background:var(--kr-card);border:1px solid var(--kr-card-border);border-radius:var(--kr-radius-lg);padding:0;box-shadow:var(--kr-shadow-sm);overflow:hidden}
.kr-checkout-summary-title{font-size:15px;font-weight:800;margin:0;padding:18px 22px;border-bottom:1px solid var(--kr-card-border)}
.kr-checkout-summary-items{display:flex;flex-direction:column;gap:14px;padding:18px 22px;border-bottom:1px solid var(--kr-card-border)}
.kr-checkout-summary-item{display:flex;align-items:flex-start;gap:12px} .kr-checkout-summary-item-icon{width:38px;height:38px;border-radius:11px;background:var(--kr-grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 14px rgba(var(--kr-primary-rgb),.28)}
.kr-checkout-summary-item-meta{flex:1;min-width:0} .kr-checkout-summary-item-name{font-weight:800;font-size:14px} .kr-checkout-summary-item-sub{font-size:12.5px;color:var(--kr-text-muted);margin-top:2px;word-break:break-all} .kr-checkout-summary-item-cycle{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--kr-text-light);margin-top:3px} .kr-checkout-summary-item-price{font-weight:800;white-space:nowrap}
.kr-checkout-summary-rows{display:flex;flex-direction:column;gap:9px;padding:18px 22px} .kr-checkout-summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--kr-text-muted)} .kr-checkout-summary-row span:last-child{font-weight:700;color:var(--kr-text)}
.kr-checkout-summary-total{display:flex;align-items:baseline;justify-content:space-between;padding:20px 22px;background:var(--kr-primary-light2);border-top:2px dashed var(--kr-border2)} .kr-checkout-summary-total-label{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--kr-primary-text)} .kr-checkout-summary-total-amount{font-size:30px;font-weight:800;color:var(--kr-primary-text);letter-spacing:-.03em}
.kr-checkout-summary-trust{display:flex;gap:10px;align-items:flex-start;padding:16px 22px;font-size:12px;color:var(--kr-text-muted)} .kr-checkout-summary-trust i{color:var(--kr-success);font-size:15px;margin-top:1px} .kr-checkout-summary-trust strong{display:block;color:var(--kr-text);font-size:13px}

/* ── 16. Complete + alerts ───────────────────────────────────────────── */
.kr-orderform .kr-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;margin:14px 0;border:1px solid transparent;border-radius:var(--kr-radius);font-size:13.5px;line-height:1.55} .kr-orderform .kr-alert i{margin-top:2px;flex:0 0 auto}
.kr-orderform .kr-alert-info{background:var(--kr-info-bg);color:var(--kr-info-text)} .kr-orderform .kr-alert-success{background:var(--kr-success-bg);color:var(--kr-success-text)} .kr-orderform .kr-alert-danger{background:var(--kr-danger-bg);color:var(--kr-danger-text)} .kr-orderform .kr-alert-warning{background:var(--kr-warning-bg);color:var(--kr-warning-text)} .kr-orderform .kr-alert .alert-link{color:inherit;font-weight:800;text-decoration:underline}
.kr-cart-error{display:none;align-items:flex-start;gap:10px;margin-bottom:16px;padding:13px 15px;border:1px solid var(--kr-danger);border-radius:var(--kr-radius);background:var(--kr-danger-bg);color:var(--kr-danger-text);font-size:13.5px} .kr-cart-error.is-visible{display:flex} .kr-cart-error i{margin-top:2px;color:var(--kr-danger);flex:0 0 auto}
.kr-complete-page{max-width:720px} .kr-complete-card{text-align:center;padding:48px 36px} .kr-complete-icon{font-size:60px;color:var(--kr-success);margin-bottom:18px;line-height:1} .kr-complete-icon.is-pending{color:var(--kr-warning)}
.kr-complete-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px} .kr-complete-msg{font-size:16px;color:var(--kr-text-muted);margin:0 0 20px}
.kr-complete-ordernum{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--kr-grad);color:#fff;font-size:14px;margin-bottom:18px;box-shadow:0 10px 24px rgba(var(--kr-primary-rgb),.35)} .kr-complete-ordernum strong{font-weight:800}
.kr-complete-card .kr-alert{text-align:left} .kr-complete-instructions{font-size:13.5px;color:var(--kr-text-muted);margin:18px 0 24px}

/* ── 17. Mobile ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  /* store sidebar collapses to a horizontal scroll-strip above the grid */
  .kr-store-layout{grid-template-columns:1fr}
  .kr-cat-nav-vertical{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:10px}
  .kr-cat-nav-vertical .kr-cat-nav-title{display:none}
  .kr-cat-nav-vertical .kr-cat-pill{white-space:nowrap;border:1.5px solid var(--kr-card-border)}
  .kr-cat-nav-vertical .kr-cat-pill .kr-cat-chev{display:none}
}
@media (max-width:880px){
  .kr-viewcart-grid,.kr-confproduct-grid,.kr-checkout-grid{grid-template-columns:1fr}
  .kr-viewcart-summary .kr-card,.kr-confproduct-summary .kr-card,.kr-checkout-summary{position:static!important}
  .kr-steps{display:none}
}
@media (max-width:600px){
  .kr-orderform{padding:4px 0 80px} .kr-product-grid{grid-template-columns:1fr;gap:16px}
  /* domain row wraps on mobile: cluster drops full-width below the label, then
     name input full width, tld + button below */
  #order-standard_cart .option{flex-wrap:wrap}
  #order-standard_cart .domain-input-group{flex-basis:100%;max-width:100%;margin-left:0;margin-top:12px}
  #order-standard_cart .domain-input-group > .row,#order-standard_cart .domains-row{flex-wrap:wrap}
  #order-standard_cart .domains-row .col-xs-9,#order-standard_cart .domains-row .col-9,#order-standard_cart .domain-input-group > .row > [class*="col-sm-8"]{flex:1 1 100%}
  #order-standard_cart .domain-input-group .btn.btn-primary,#order-standard_cart .domain-input-group .btn-block{flex:1 1 100%;width:100%}
  .kr-card-body,.kr-summary-rows,.kr-summary-actions{padding-left:18px;padding-right:18px}
  .kr-cycle-toggle{width:100%;justify-content:center}
  .kr-orderform .kr-btn,.kr-product-cta,#btnCompleteOrder{min-height:48px}
  .kr-cart-remove{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){ .kr-orderform *,.kr-orderform *::before,.kr-orderform *::after{transition:none!important;animation:none!important} }

/* ════════════════════════════════════════════════════════════════════════
   18. CASCADE-WIN LAYER  —  must be LAST in the file.
   whmcs-overrides.css ships ~645 !important rules at body.kr-body specificity
   that target generic .card / .btn / .panel / .form-control / ul-li, which our
   .kr-* order-form elements inherit and lose to. This block re-asserts the Vivid
   look with MATCHING specificity (body.kr-body + scope) + !important so the order
   form wins inside the real live cascade. Scoped to the order form only — never
   leaks to the rest of the client area. (Built/verified against the full live
   CSS stack in _preview/live/, not in isolation.)
   ════════════════════════════════════════════════════════════════════════ */

/* — Remove the animated hover line atop product cards (theme stylesheet.css:1576) — */
body.kr-body .kr-orderform .kr-product-card::before{content:none!important;display:none!important}

/* — Featured plan card: force the gradient + white text (overrides .card{background:var(--kr-card)!important}) — */
body.kr-body .kr-orderform .kr-product-card{background:var(--kr-card)!important;border:2px solid var(--kr-card-border)!important;border-radius:var(--kr-radius-lg)!important;color:var(--kr-text)!important}
body.kr-body .kr-orderform .kr-product-card.kr-featured{background:var(--kr-grad)!important;border-color:transparent!important;color:#fff!important}
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-name,
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-desc,
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-desc *,
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-price-amount,
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-price-cycle{color:#fff!important}
/* Featured-card tagline pill: a translucent WHITE band gave white-on-pale (barely
   legible over the violet gradient). Use a dark translucent band + faint white
   hairline so the white 700-weight text pops. Text content is the product's
   description first <p> (editable in WHMCS), styling is ours. */
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-desc > p{background:rgba(15,8,40,.24)!important;border:1px solid rgba(255,255,255,.30)!important;color:#fff!important}
/* non-featured cards keep brand-violet name + dark body text */
body.kr-body .kr-orderform .kr-product-card:not(.kr-featured) .kr-product-name{color:var(--kr-primary-text)!important}
body.kr-body .kr-orderform .kr-product-card:not(.kr-featured) .kr-product-desc li > i{color:var(--kr-primary)!important}

/* — Description list: kill Bootstrap's native bullet + line-height collision (the "ghost/overlap") — */
body.kr-body .kr-orderform .kr-product-desc ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:11px!important}
body.kr-body .kr-orderform .kr-product-desc li{display:flex!important;align-items:flex-start!important;gap:9px!important;padding:0!important;margin:0!important;line-height:1.5!important;list-style:none!important}
body.kr-body .kr-orderform .kr-product-desc li::before,
body.kr-body .kr-orderform .kr-product-desc li::marker{content:none!important}
body.kr-body .kr-orderform .kr-product-desc > p{text-align:center!important;font-weight:700!important;padding:8px 12px!important;border-radius:var(--kr-radius-sm)!important;background:var(--kr-primary-light2)!important;margin:0 0 16px!important}

/* — CTA buttons: force the gradient fill (overrides .btn/.card a backgrounds) — */
body.kr-body .kr-orderform .kr-product-cta{background:var(--kr-grad)!important;color:#fff!important;border:0!important;border-radius:var(--kr-radius)!important}
body.kr-body .kr-orderform .kr-product-card.kr-featured .kr-product-cta{background:#fff!important;color:var(--kr-primary)!important}
body.kr-body .kr-orderform .kr-product-card.kr-cycle-unavailable .kr-product-cta{background:var(--kr-table-head)!important;color:var(--kr-text-muted)!important}

/* — Primary buttons / checkout / continue —
   whmcs-overrides ships `body.kr-body #order-standard_cart .btn.btn-primary`
   (specificity 0,1,3,1) with !important + a SOLID background — to beat it our
   selectors must MATCH that specificity, so we repeat the id+.btn.btn-primary
   shape (and add #btnCompleteOrder.btn.btn-primary for an extra-strong tie-break
   that source-order then wins, since we load last). *)*/
body.kr-body #order-standard_cart .btn.btn-primary,
body.kr-body #order-standard_cart #btnCompleteOrder.btn,
body.kr-body #order-standard_cart .kr-btn-primary.kr-btn,
body.kr-body .kr-orderform .kr-btn-primary,
body.kr-body .kr-orderform .kr-summary-checkout,
body.kr-body #order-standard_cart .kr-summary-checkout,
body.kr-body #btnCompleteOrder,
body.kr-body #btnCompleteProductConfig{
  /* set the gradient as its OWN longhand — whmcs-overrides uses the `background`
     SHORTHAND with !important, which keeps resetting background-image:none. A
     longhand background-image:!important is immune to their shorthand. */
  background-color:var(--kr-primary)!important;
  background-image:var(--kr-grad)!important;
  background-repeat:no-repeat!important;
  color:#fff!important;border:0!important
}
body.kr-body #order-standard_cart .btn.btn-primary:hover{filter:brightness(1.06)!important}
body.kr-body .kr-orderform .kr-btn-secondary{background:var(--kr-card)!important;color:var(--kr-primary-text)!important;border:2px solid var(--kr-border2)!important}

/* — Cards / cart / summary containers: ensure our radius+bg, not Bootstrap's — */
body.kr-body .kr-orderform .kr-card,
body.kr-body #order-standard_cart .kr-card{background:var(--kr-card)!important;border:1px solid var(--kr-card-border)!important;border-radius:var(--kr-radius-lg)!important;box-shadow:var(--kr-shadow-sm)!important}
body.kr-body .kr-orderform .kr-summary-total{background:var(--kr-primary-light2)!important}

/* — Promo input: undo Bootstrap .form-control{width:1%} input-group collapse + iCheck wrapper — */
body.kr-body .kr-orderform .kr-promo-card form[data-kr-promo-form]{display:flex!important;gap:10px!important;align-items:stretch!important}
body.kr-body .kr-orderform .kr-promo-card .iradio_square-blue,
body.kr-body .kr-orderform .kr-promo-card .icheckbox_square-blue{all:unset!important;flex:1!important;display:block!important;position:static!important}
body.kr-body .kr-orderform .kr-promo-card input[name="promocode"]{flex:1!important;width:100%!important;display:block!important;background:var(--kr-input-bg)!important;border:1.5px solid var(--kr-input-border)!important;border-radius:var(--kr-radius)!important;padding:12px 15px!important;font-size:14px!important;color:var(--kr-text)!important}
body.kr-body .kr-orderform .kr-promo-card .iCheck-helper{display:none!important}
body.kr-body .kr-orderform .kr-promo-btn{flex:0 0 auto!important;width:auto!important}

/* — Category pills (vertical sidebar) + step bar: never hit by .btn/.nav overrides — */
body.kr-body .kr-orderform .kr-cat-nav-vertical{background:var(--kr-card)!important;border:1px solid var(--kr-card-border)!important;border-radius:var(--kr-radius-lg)!important}
body.kr-body .kr-orderform .kr-cat-pill{background:transparent!important;border:1.5px solid transparent!important;color:var(--kr-text-muted)!important;border-radius:var(--kr-radius)!important}
body.kr-body .kr-orderform .kr-cat-pill:hover{background:var(--kr-table-head)!important;color:var(--kr-text)!important}
body.kr-body .kr-orderform .kr-cat-pill.active{background:var(--kr-grad)!important;border-color:transparent!important;color:#fff!important}
body.kr-body .kr-orderform .kr-steps .kr-step-n{border-radius:50%!important}
body.kr-body .kr-orderform .kr-steps .kr-step.is-active .kr-step-n{background:var(--kr-grad)!important;color:#fff!important;border:0!important}
body.kr-body .kr-orderform .kr-steps .kr-step.is-done .kr-step-n{background:var(--kr-success-bg)!important;color:var(--kr-success)!important;border:0!important}

/* — Neutralize iCheck visuals on order-form choice/option/payment inputs so native styled inputs show — */
body.kr-body .kr-orderform .kr-choice .iCheck-helper,
body.kr-body #order-standard_cart .option .iCheck-helper{cursor:pointer!important}