/* ============================================================================
   POT CART — Cinematic order form / checkout styling for WHMCS standard_cart
   Loaded from common.tpl (in-body, so it wins over the head theme layer).
   Self-contained: redefines brand tokens so the cart looks right even if the
   active system theme isn't POT Portal. Internal testing only.
   ========================================================================== */

:root {
    --pot-orange:#ff8a00; --pot-orange-bright:#ffb43d; --pot-amber:#ffcf6b;
    --pot-plum:#7b34d6; --pot-crimson:#cc1f3c; --pot-green:#23c483;
    --pot-bg:#070310; --pot-bg2:#0d0720; --pot-panel:#140b26; --pot-panel2:#1b1033;
    --pot-text:#fbf6ff; --pot-dim:#b9aed3; --pot-faint:#827798;
    --pot-line:rgba(255,170,80,.14); --pot-line-2:rgba(255,170,80,.30); --pot-glass:rgba(255,255,255,.05);
    --pot-grad:linear-gradient(120deg,#d68f12 0%,#f0aa30 50%,#ffce6b 100%);
    --pot-card:linear-gradient(160deg,#140b26,#0d0720);
    --pot-radius:14px; --pot-radius-lg:20px;
    --pot-shadow:0 6px 24px rgba(0,0,0,.4);
    --pot-shadow-lg:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(240,170,48,.18);
    --pot-btn-shadow:0 10px 30px rgba(216,150,20,.42),inset 0 1px 0 rgba(255,255,255,.25);
    --pot-ease:.22s cubic-bezier(.2,.7,.3,1);
}

#order-standard_cart { font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--pot-text); }
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3 { font-family: 'Space Grotesk','Inter',sans-serif; color: var(--pot-text); }
#order-standard_cart .header-lined { border-bottom: 1px solid var(--pot-line); }
#order-standard_cart p, #order-standard_cart label { color: var(--pot-dim); }

/* ============================ progress stepper =========================== */
.pot-steps {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 0 22px;
    margin: 0 0 6px;
    counter-reset: potstep;
}
.pot-step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    color: var(--pot-faint);
    font-size: 13px;
    min-width: 0;
}
/* connector line between steps */
.pot-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background: var(--pot-line-2);
    z-index: 0;
}
.pot-step.done:not(:last-child)::after { background: var(--pot-grad); }
.pot-step-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: var(--pot-panel2);
    border: 1px solid var(--pot-line-2);
    color: var(--pot-faint);
    font-size: 15px;
    transition: all var(--pot-ease);
}
.pot-step.done .pot-step-dot {
    background: var(--pot-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--pot-btn-shadow);
}
.pot-step.current .pot-step-dot {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(255,138,0,.18), var(--pot-btn-shadow);
}
.pot-step-label {
    display: block;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-weight: 500;
    color: var(--pot-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pot-step.current .pot-step-label,
.pot-step.done .pot-step-label { color: var(--pot-text); }

/* RTL: flow right -> left, connector mirrors */
html[dir="rtl"] .pot-steps { flex-direction: row-reverse; }
html[dir="rtl"] .pot-step:not(:last-child)::after { inset-inline-start: auto; inset-inline-end: 50%; }

@media (max-width: 575px) {
    .pot-step-label { font-size: 11px; }
    .pot-step-dot { width: 32px; height: 32px; font-size: 13px; }
    .pot-step:not(:last-child)::after { top: 15px; }
}

/* ============================== product grid ============================ */
.products .product {
    background: var(--pot-card);
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius-lg);
    box-shadow: var(--pot-shadow);
    padding: 22px;
    transition: transform var(--pot-ease), border-color var(--pot-ease), box-shadow var(--pot-ease);
    height: 100%;
}
/* the card is height:100% to equalise within a row; rows themselves had no
   vertical gap so stacked cards touched. Space the columns (flex items in the
   eq-height row) so the gap sits between rows, not inside the card. */
.products .row-eq-height > [class*="col-"] { margin-bottom: 26px; }
.products > .row-eq-height:last-child > [class*="col-"] { margin-bottom: 0; }
.products .product:hover {
    transform: translateY(-4px);
    border-color: var(--pot-line-2);
    box-shadow: var(--pot-shadow-lg);
}
.products .product header {
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--pot-text);
    border-bottom: 1px solid var(--pot-line);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.products .product .qty { color: var(--pot-amber); font-size: 12px; }
.products .product-desc, .products .product-desc li { color: var(--pot-dim); }
.products .product-desc ul { list-style: none; padding: 0; }
.products .product-desc li { padding: 4px 0; border-bottom: 1px dashed var(--pot-line); }
.products .product-desc .feature-value { color: var(--pot-orange-bright); font-weight: 600; }
.products .product-pricing { color: var(--pot-text); }
.products .product-pricing .price {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 28px;
    font-weight: 700;
    background: var(--pot-grad);
    color: var(--pot-amber); /* visible fallback when background-clip:text isn't honored (print / forced-colors / old engines) */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================= line items =============================== */
.view-cart-items-header { color: var(--pot-dim); border-bottom: 1px solid var(--pot-line-2); }
.view-cart-items .item {
    background: var(--pot-glass);
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.view-cart-items .item-title { color: var(--pot-text); font-weight: 600; }
.view-cart-items .item-group { color: var(--pot-faint); }
.view-cart-items .item-domain { color: var(--pot-orange-bright); }
.view-cart-items .item-price { color: var(--pot-text); }
.view-cart-items .item-price .cycle { color: var(--pot-faint); }
/* Stock standard_cart is a LIGHT theme (white item bg, dark price text); on our
   dark cart the line-item price was inheriting that dark colour. Force it light
   (and reset -webkit-text-fill-color in case a gradient-clip leaks in). */
#order-standard_cart .view-cart-items .item-price,
#order-standard_cart .view-cart-items .item-price * {
    color: var(--pot-text) !important; -webkit-text-fill-color: var(--pot-text) !important;
}
#order-standard_cart .view-cart-items .item-price .cycle,
#order-standard_cart .view-cart-items .item-price .renewal,
#order-standard_cart .view-cart-items .item-price .renewal * {
    color: var(--pot-faint) !important; -webkit-text-fill-color: var(--pot-faint) !important;
}
.btn-remove-from-cart { color: var(--pot-faint) !important; }
.btn-remove-from-cart:hover { color: var(--pot-crimson) !important; }

/* ============================ order summary ============================= */
.secondary-cart-sidebar { position: sticky; top: calc(var(--pot-hh, 150px) + 16px); }
.order-summary {
    background: var(--pot-card);
    border: 1px solid var(--pot-line-2);
    border-radius: var(--pot-radius-lg);
    box-shadow: var(--pot-shadow-lg);
    padding: 22px;
    color: var(--pot-text);
}
.order-summary h2 { font-family: 'Space Grotesk',sans-serif; color: var(--pot-text); }
.order-summary .subtotal,
.order-summary .recurring-totals,
.order-summary .bordered-totals { color: var(--pot-dim); }
.order-summary .bordered-totals { border-block: 1px solid var(--pot-line); padding-block: 8px; margin-block: 8px; }
.order-summary .total-due-today {
    border-top: 1px solid var(--pot-line-2);
    margin-top: 12px;
    padding-top: 14px;
}
.order-summary .total-due-today .amt {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 30px;
    font-weight: 700;
    background: var(--pot-grad);
    color: var(--pot-amber); /* visible fallback when background-clip:text isn't honored (print / forced-colors / old engines) */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.order-summary .total-due-today span:last-child { color: var(--pot-faint); display: block; }
#orderSummaryLoader, .order-summary .loader { color: var(--pot-orange); }

/* ================= checkout: payment + account + ToS ===================== */
/* Payment gateways & account choices as modern selectable icon-cards. Icons are
   REAL FontAwesome 6 <i> elements (.pot-pm-ic / .pot-acc-ic) — the CSS-glyph
   ::before approach broke under FA6. Native radio box hidden; any themed radio
   circle on the label pseudo-element is suppressed; the gold card border + gold
   icon tile are the selected-state cue. */
#order-standard_cart .pot-pm-ic, #order-standard_cart .pot-acc-ic {
    font-size: 18px; color: var(--pot-amber); width: 40px; height: 40px; flex: none;
    display: grid; place-items: center; border-radius: 11px;
    background: rgba(255,138,0,.12); border: 1px solid var(--pot-line-2); transition: all var(--pot-ease);
}
/* ---- payment methods ---- */
#order-standard_cart #paymentGatewaysContainer .text-center {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline {
    position: relative; display: inline-flex; align-items: center; gap: 12px;
    margin: 0; padding: 14px 26px; min-width: 230px;
    border: 1.5px solid var(--pot-line-2); border-radius: 14px; background: var(--pot-glass);
    color: var(--pot-text); font-weight: 600; font-size: 15px; cursor: pointer; transition: all var(--pot-ease);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    border-color: var(--pot-orange); transform: translateY(-2px); box-shadow: var(--pot-shadow);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline input.payment-methods {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline::before,
#order-standard_cart #paymentGatewaysContainer .radio-inline::after { content: none; }
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input.payment-methods:checked) {
    border-color: var(--pot-orange);
    background: linear-gradient(160deg, rgba(255,138,0,.16), rgba(255,138,0,.04));
    box-shadow: inset 0 0 0 1px var(--pot-orange), 0 12px 30px rgba(216,150,20,.22);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input.payment-methods:checked) .pot-pm-ic {
    background: var(--pot-grad); color: #3a1d00; border-color: transparent;
}
/* ---- choose account (same icon-card treatment) ---- */
#order-standard_cart .account-select-container .account {
    position: relative; border: 1.5px solid var(--pot-line-2) !important; border-radius: 14px !important;
    background: var(--pot-glass) !important; padding: 15px 18px !important; margin-bottom: 14px;
    cursor: pointer; transition: all var(--pot-ease);
}
#order-standard_cart .account-select-container .account:hover { border-color: var(--pot-orange) !important; }
#order-standard_cart .account-select-container .account .radio-inline {
    display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 0; width: 100%;
    color: var(--pot-text); font-weight: 600;
}
#order-standard_cart .account-select-container .account input.account-select {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0;
}
#order-standard_cart .account-select-container .account .radio-inline::before,
#order-standard_cart .account-select-container .account .radio-inline::after { content: none; }
#order-standard_cart .pot-acc-ic { margin-top: 1px; }
#order-standard_cart .account-select-container .account.active,
#order-standard_cart .account-select-container .account:has(input.account-select:checked) {
    border-color: var(--pot-orange) !important;
    background: linear-gradient(160deg, rgba(255,138,0,.14), rgba(255,138,0,.04)) !important;
    box-shadow: inset 0 0 0 1px var(--pot-orange) !important;
}
#order-standard_cart .account-select-container .account.active .pot-acc-ic,
#order-standard_cart .account-select-container .account:has(input.account-select:checked) .pot-acc-ic {
    background: var(--pot-grad); color: #3a1d00; border-color: transparent;
}
/* Modern Terms-of-Service agreement row (was a tiny default checkbox) */
#order-standard_cart .checkbox-inline:has(#accepttos) {
    display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 4px;
    padding: 14px 24px; border: 1px solid var(--pot-line-2); border-radius: 12px;
    background: var(--pot-glass); font-size: 15px; color: var(--pot-text); font-weight: 500;
    cursor: pointer; transition: all var(--pot-ease);
}
#order-standard_cart .checkbox-inline:has(#accepttos):hover { border-color: var(--pot-orange); }
#order-standard_cart #accepttos {
    width: 21px; height: 21px; accent-color: var(--pot-orange); cursor: pointer; flex: none; margin: 0;
}
#order-standard_cart .checkbox-inline:has(#accepttos) a {
    color: var(--pot-orange-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ============================ sub-headings ============================== */
.sub-heading { border-bottom: 1px solid var(--pot-line); margin: 24px 0 16px; }
.sub-heading span.primary-bg-color,
.sub-heading .primary-bg-color {
    display: inline-block;
    background: var(--pot-grad) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 7px 16px;
    font-family: 'Space Grotesk',sans-serif;
    font-weight: 600;
}

/* ============================ addon panels ============================== */
.addon-products .panel-addon, .panel-addon {
    background: var(--pot-card) !important;
    border: 1px solid var(--pot-line) !important;
    border-radius: var(--pot-radius) !important;
    transition: border-color var(--pot-ease), transform var(--pot-ease);
}
.panel-addon:hover { transform: translateY(-2px); border-color: var(--pot-line-2) !important; }
.panel-addon.panel-addon-selected { border-color: var(--pot-orange) !important; box-shadow: 0 0 0 1px var(--pot-orange) inset; }
.panel-addon .panel-add { color: var(--pot-orange-bright); }
.panel-addon .panel-price { color: var(--pot-text); }

/* =========================== buttons & fields ========================== */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
.btn-order-now, .btn-checkout, #btnCompleteOrder, #btnCompleteProductConfig {
    background: var(--pot-grad) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 600;
    box-shadow: var(--pot-btn-shadow);
    transition: transform var(--pot-ease), box-shadow var(--pot-ease);
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
.btn-order-now:hover, .btn-checkout:hover,
#btnCompleteOrder:hover, #btnCompleteProductConfig:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 14px 36px rgba(216,150,20,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
#order-standard_cart .btn-default {
    background: var(--pot-glass) !important;
    border: 1px solid var(--pot-line-2) !important;
    color: var(--pot-text) !important;
    border-radius: 10px !important;
}
#order-standard_cart .btn-default:hover { border-color: var(--pot-orange-bright) !important; color: var(--pot-orange-bright) !important; }
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart textarea,
#order-standard_cart .field.form-control {
    background: rgba(7,3,16,.55) !important;
    border: 1px solid var(--pot-line) !important;
    color: var(--pot-text) !important;
    border-radius: 10px !important;
}
#order-standard_cart .form-control::placeholder { color: var(--pot-faint) !important; }
#order-standard_cart .form-control:focus, #order-standard_cart .custom-select:focus {
    border-color: var(--pot-orange) !important;
    box-shadow: 0 0 0 .2rem rgba(255,138,0,.18) !important;
}
#order-standard_cart .prepend-icon .field-icon { color: var(--pot-faint); }

/* account-select cards on checkout */
.account-select-container .account {
    background: var(--pot-glass);
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius);
    padding: 12px 14px;
    transition: border-color var(--pot-ease);
}
.account-select-container .account.active { border-color: var(--pot-orange); }
.account-select-container .address strong { color: var(--pot-text); }

/* alerts within cart */
#order-standard_cart .alert-success { background: rgba(35,196,131,.12); border:1px solid rgba(35,196,131,.4); color:#b8f5dc; }
#order-standard_cart .alert-info    { background: rgba(240,170,48,.14); border:1px solid rgba(240,170,48,.4); color:#e3d4ff; }
#order-standard_cart .alert-warning { background: rgba(255,207,107,.12); border:1px solid rgba(255,207,107,.4); color:var(--pot-amber); }
#order-standard_cart .alert-danger  { background: rgba(204,31,60,.14);  border:1px solid rgba(204,31,60,.45); color:#ffc2cc; }

@media (max-width: 991px) {
    .secondary-cart-sidebar { position: static; margin-top: 20px; }
}

/* ============================================================================
   PREMIUM MOTION & POLISH LAYER (cart) — gated behind prefers-reduced-motion
   ========================================================================== */

/* the active step gently pulses so the customer's position is unmistakable */
.pot-step.current .pot-step-dot { animation: pot-step-pulse 2.4s ease-in-out infinite; }
@keyframes pot-step-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,138,0,.40), var(--pot-btn-shadow); }
    70%  { box-shadow: 0 0 0 12px rgba(255,138,0,0), var(--pot-btn-shadow); }
    100% { box-shadow: 0 0 0 0 rgba(255,138,0,0), var(--pot-btn-shadow); }
}

/* product cards rise in on load */
.products .product { animation: pot-rise-c .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pot-rise-c { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.products .col-md-6:nth-child(1) .product { animation-delay: .08s; }
.products .col-md-6:nth-child(2) .product { animation-delay: .14s; }
.products .col-md-6:nth-child(3) .product { animation-delay: .20s; }
.products .col-md-6:nth-child(4) .product { animation-delay: .26s; }

/* primary cart CTAs shimmer to stay the obvious next step */
#btnCompleteOrder, #btnCompleteProductConfig,
#order-standard_cart .btn-checkout, #order-standard_cart .btn-order-now { position: relative; overflow: hidden; }
#btnCompleteOrder::after, #btnCompleteProductConfig::after,
#order-standard_cart .btn-checkout::after, #order-standard_cart .btn-order-now::after {
    content: ""; position: absolute; top: 0; inset-inline-start: -60%;
    width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg); animation: pot-sweep-c 3.4s ease-in-out infinite;
}
@keyframes pot-sweep-c { 0% { inset-inline-start: -60%; } 55%, 100% { inset-inline-start: 140%; } }

::selection { background: rgba(255,138,0,.30); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .pot-step.current .pot-step-dot,
    .products .product,
    #btnCompleteOrder::after, #btnCompleteProductConfig::after,
    #order-standard_cart .btn-checkout::after, #order-standard_cart .btn-order-now::after { animation: none !important; }
}

/* ============================================================================
   SMART CONFIGURATOR CONTROLS
   Fancy controls layered over WHMCS's real inputs (which are clipped, not
   removed, so pricing keeps working). Segmented cards, sliders, toggles,
   steppers, billing-term pills.
   ========================================================================== */

/* the real WHMCS control: kept in the DOM (submits + recalc) but out of sight */
.pot-orig-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important;
}

/* ---- segmented option cards (dropdown / radio replacement) ---- */
.pot-seg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pot-seg-opt {
    position: relative; flex: 1 1 auto; min-width: 132px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 13px 36px 13px 15px;
    border-radius: 14px; background: var(--pot-glass); border: 1px solid var(--pot-line);
    color: var(--pot-text); cursor: pointer; text-align: start; font: inherit;
    transition: transform var(--pot-ease), border-color var(--pot-ease), box-shadow var(--pot-ease), background var(--pot-ease);
}
.pot-seg-opt:hover { transform: translateY(-2px); border-color: var(--pot-line-2); }
.pot-seg-opt.on {
    border-color: transparent;
    background: linear-gradient(160deg, rgba(240,170,48,.26), rgba(255,138,0,.12)), var(--pot-glass);
    box-shadow: 0 0 0 1.5px var(--pot-orange), var(--pot-shadow);
}
.pso-name  { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.pso-price { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--pot-amber); }
.pso-check {
    position: absolute; top: 11px; inset-inline-end: 11px;
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: var(--pot-grad); color: #fff; font-size: 10px;
    opacity: 0; transform: scale(.5); transition: opacity var(--pot-ease), transform var(--pot-ease);
}
.pot-seg-opt.on .pso-check { opacity: 1; transform: scale(1); }

/* ---- slider (numeric dropdown / quantity) ---- */
.pot-slider { margin-top: 16px; }
.pot-track-wrap { position: relative; padding-top: 32px; }
.pot-bubble {
    position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
    background: var(--pot-grad); color: #fff; font-family: 'Space Grotesk',sans-serif; font-weight: 600;
    font-size: 13px; padding: 3px 11px; border-radius: 999px; box-shadow: var(--pot-btn-shadow);
}
.pot-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; outline: none;
    background: linear-gradient(90deg, var(--pot-orange) var(--pct,50%), rgba(255,255,255,.08) var(--pct,50%));
}
.pot-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--pot-grad); border: 2px solid rgba(255,255,255,.85); box-shadow: var(--pot-btn-shadow); cursor: pointer; margin-top: -7px;
}
.pot-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pot-grad); border: 2px solid rgba(255,255,255,.85); box-shadow: var(--pot-btn-shadow); cursor: pointer; }
.pot-range::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
.pot-ends { display: flex; justify-content: space-between; color: var(--pot-faint); font-family: 'JetBrains Mono',monospace; font-size: 12px; margin-top: 9px; }

/* ---- toggle switch (yes/no checkbox) ---- */
.pot-toggle {
    width: 52px; height: 30px; border-radius: 999px; padding: 0; cursor: pointer; position: relative; vertical-align: middle;
    background: rgba(255,255,255,.10); border: 1px solid var(--pot-line-2); transition: background var(--pot-ease), border-color var(--pot-ease);
}
.pt-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: inset-inline-start var(--pot-ease); }
.pot-toggle.on { background: var(--pot-grad); border-color: transparent; }
.pot-toggle.on .pt-knob { inset-inline-start: calc(100% - 25px); }

/* ---- +/- stepper (plain quantity) ---- */
.pot-qty { display: inline-flex; align-items: center; border: 1px solid var(--pot-line-2); border-radius: 12px; overflow: hidden; background: var(--pot-glass); }
.pot-qty-btn { width: 42px; height: 44px; border: 0; background: transparent; color: var(--pot-orange-bright); font-size: 14px; cursor: pointer; transition: background var(--pot-ease); }
.pot-qty-btn:hover { background: rgba(255,255,255,.07); }
.pot-qty .pot-qty-input { width: 64px !important; text-align: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: 'Space Grotesk',sans-serif; font-weight: 600; }

/* ---- billing-cycle term pills ---- */
.pot-terms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.pot-term {
    position: relative; flex: 1 1 150px; min-width: 148px;
    display: flex; flex-direction: column; gap: 4px; padding: 15px 16px;
    border-radius: 16px; background: var(--pot-card); border: 1px solid var(--pot-line); cursor: pointer;
    transition: transform var(--pot-ease), border-color var(--pot-ease), box-shadow var(--pot-ease);
}
.pot-term:hover { transform: translateY(-2px); border-color: var(--pot-line-2); }
.pot-term.on {
    border-color: transparent;
    background: linear-gradient(160deg, rgba(240,170,48,.24), rgba(255,138,0,.12)), var(--pot-card);
    box-shadow: 0 0 0 1.5px var(--pot-orange), var(--pot-shadow);
}
.pt-cyc { font-family: 'Space Grotesk',sans-serif; font-weight: 600; font-size: 15px; color: var(--pot-text); }
.pt-price { font-family: 'JetBrains Mono',monospace; font-size: 13px; color: var(--pot-dim); }
.pot-term-save {
    position: absolute; top: -9px; inset-inline-end: 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #06281e;
    background: var(--pot-green); padding: 2px 9px; border-radius: 999px; box-shadow: 0 4px 12px rgba(35,196,131,.32);
}

/* ============================================================================
   CREATIVE ORDER SUMMARY (configure page #producttotal, via ordersummary.tpl)
   ========================================================================== */
.order-summary { position: relative; overflow: hidden; }
.order-summary::before {
    content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--pot-grad);
}
.order-summary h2 {
    text-align: center; position: relative; padding-bottom: 14px; margin: 4px 0 10px;
}
.order-summary h2::after {
    content: ""; position: absolute; inset-inline-start: 50%; bottom: 0; transform: translateX(-50%);
    width: 54px; height: 3px; border-radius: 3px; background: var(--pot-grad);
}

.pot-os-head { padding: 2px 0 14px; border-bottom: 1px solid var(--pot-line); margin-bottom: 4px; }
.pot-os-name { display: block; font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700; font-size: 18px; color: var(--pot-text); line-height: 1.25; }
.pot-os-group {
    display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--pot-amber); background: rgba(255,138,0,.12);
    border: 1px solid var(--pot-line-2); padding: 3px 11px; border-radius: 999px;
}

.pot-os-lines { padding: 2px 0; }
.order-summary .pot-li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 0; border-bottom: 1px dashed var(--pot-line); float: none;
}
.order-summary .pot-li::after { content: none; }
.order-summary .pot-os-lines .pot-li:last-child { border-bottom: 0; }
.pot-li-label { color: var(--pot-dim); font-size: 13.5px; }
.pot-li-label b { color: var(--pot-text); font-weight: 600; }
.pot-li-price { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--pot-text); white-space: nowrap; }
.order-summary .pot-li-main .pot-li-label { color: var(--pot-text); font-weight: 600; font-size: 14px; }
.pot-li-sub .pot-li-label::before   { content: "\203A"; color: var(--pot-orange); font-weight: 700; margin-inline-end: 8px; }
.pot-li-addon .pot-li-label::before { content: "+"; color: var(--pot-green); font-weight: 700; margin-inline-end: 8px; }

.order-summary .pot-os-sub { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--pot-line); }
.order-summary .pot-os-sub .pot-li { border-bottom: 0; padding: 5px 0; }
.order-summary .pot-os-sub .pot-li-label { color: var(--pot-faint); }

.order-summary .pot-os-total {
    margin-top: 16px; padding: 16px 18px; border-radius: 16px; text-align: end; border-top: 0;
    background: linear-gradient(160deg, rgba(240,170,48,.20), rgba(255,138,0,.10));
    border: 1px solid var(--pot-line-2);
}
.order-summary .pot-os-total .amt {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1;
    background: var(--pot-grad); color: var(--pot-amber); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pot-os-cap { color: var(--pot-faint); font-size: 13px; }

/* ============================================================================
   FIX: neutralise WHMCS stock LIGHT cart theme (all.min.css). Those rules use
   #order-standard_cart specificity and, on inherited domain pages, load AFTER
   ours — so we win with !important everywhere.
   ========================================================================== */
#order-standard_cart .field,
#order-standard_cart .form-control,
#order-standard_cart input[type="text"], #order-standard_cart input[type="email"],
#order-standard_cart input[type="tel"],  #order-standard_cart input[type="password"],
#order-standard_cart input[type="number"], #order-standard_cart select,
#order-standard_cart textarea {
    background-color: rgba(7,3,16,.55) !important;
    color: var(--pot-text) !important;
    border: 1px solid var(--pot-line) !important;
}
#order-standard_cart .form-control::placeholder { color: var(--pot-faint) !important; }
#order-standard_cart .form-control:focus, #order-standard_cart .field:focus,
#order-standard_cart select:focus { border-color: var(--pot-orange) !important; box-shadow: 0 0 0 .2rem rgba(255,138,0,.18) !important; }

#order-standard_cart .products .product { background: var(--pot-card) !important; border: 1px solid var(--pot-line) !important; }
#order-standard_cart .view-cart-items .item { background: var(--pot-glass) !important; border-color: var(--pot-line) !important; }
#order-standard_cart .view-cart-items-header { background: linear-gradient(180deg, rgba(255,176,61,.16), rgba(255,176,61,.05)) !important; color: var(--pot-amber) !important; border: 1px solid var(--pot-line-2) !important; border-bottom: none !important; border-radius: 12px 12px 0 0 !important; font-weight: 600; }
#order-standard_cart .view-cart-promotion-code { background: var(--pot-glass) !important; color: var(--pot-text) !important; border-color: var(--pot-line-2) !important; }
#order-standard_cart .well, #order-standard_cart .panel, #order-standard_cart .mc-promo { background: var(--pot-card) !important; border-color: var(--pot-line) !important; color: var(--pot-text) !important; }

/* promo / estimate-tax tabs */
#order-standard_cart .view-cart-tabs .tab-content { background: var(--pot-card) !important; border: 1px solid var(--pot-line) !important; border-radius: 0 0 12px 12px; }
#order-standard_cart .view-cart-tabs .nav-tabs a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { color: var(--pot-dim) !important; background: transparent !important; border-color: transparent !important; }
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    background: var(--pot-card) !important; color: var(--pot-text) !important;
    border: 1px solid var(--pot-line) !important; border-bottom-color: transparent !important;
}

/* domain selection / checker pages (inherited templates) */
.domain-selection-options .option {
    background: var(--pot-glass) !important; border: 1px solid var(--pot-line) !important; color: var(--pot-text) !important;
    margin-bottom: 10px !important; padding: 14px 18px !important; border-radius: 12px !important; transition: border-color var(--pot-ease);
}
.domain-selection-options .option:hover { border-color: var(--pot-line-2) !important; }
.domain-selection-options .option-selected { background: linear-gradient(160deg, rgba(240,170,48,.22), rgba(255,138,0,.12)) !important; border-color: var(--pot-orange) !important; box-shadow: 0 0 0 1px var(--pot-orange) inset !important; }
.domain-selection-options .option label, .domain-selection-options .option-selected label { color: var(--pot-text) !important; }
.domain-checker-container { background: var(--pot-card) !important; border: 1px solid var(--pot-line-2) !important; }
.domain-checker-container .input-group-box { background: rgba(7,3,16,.4) !important; }
.domain-checker-result-headline { color: var(--pot-text) !important; }

/* checkout existing-account cards */
#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active { background: var(--pot-glass) !important; }

/* keep the stepper input transparent despite the field override */
#order-standard_cart .pot-qty .pot-qty-input { background: transparent !important; border: 0 !important; }

/* ---- configure-page section icons (added by pot-cart-enhance.js) ---- */
/* bespoke gradient-stroked icon chips (added by pot-cart-enhance.js) */
.pot-ic {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px; vertical-align: middle; margin-inline-end: 11px;
    background: linear-gradient(155deg, rgba(255,138,0,.15), rgba(240,170,48,.14));
    border: 1px solid var(--pot-line-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pot-ic svg { width: 18px; height: 18px; display: block; }
.pot-has-ic { display: flex; align-items: center; }
/* field labels become flex rows so chip + text align cleanly */
#order-standard_cart .form-group > label.pot-has-ic { display: flex; align-items: center; }

/* sub-heading badge: small white-stroke icon inline before the text
   (NOT flex on the badge — that breaks the two-line "Additional Information" pill) */
.pot-ic-sub { display: inline !important; width: auto !important; height: auto !important; margin-inline-end: 7px !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; vertical-align: middle; }
.pot-ic-sub svg { width: 15px !important; height: 15px !important; stroke: #fff !important; vertical-align: -3px; display: inline-block !important; }

/* billing term pills: inline gradient icon before the cycle name */
.pot-term .pt-cyc { display: inline-flex; align-items: center; }
.pt-ic { display: inline-flex; margin-inline-end: 8px; }
.pt-ic svg { width: 17px; height: 17px; display: block; }

/* slider live price readout (memory / cpu / storage / players) */
.pot-slider-foot { text-align: end; margin-top: 9px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.pot-slider-foot .psf-add { color: var(--pot-amber); }
.pot-slider-foot .psf-inc { color: var(--pot-faint); }

/* server-location: animated region globe */
.pot-geo {
    display: flex; align-items: center; gap: 20px; margin-top: 6px; padding: 18px 20px; position: relative; overflow: hidden;
    border-radius: var(--pot-radius-lg); border: 1px solid var(--pot-line-2); box-shadow: var(--pot-shadow);
    background: radial-gradient(120% 120% at 0% 0%, rgba(240,170,48,.16), transparent 60%), var(--pot-card);
}
.pot-geo-map { flex: 0 0 auto; width: 140px; height: 140px; display: grid; place-items: center; }
.pot-globe { width: 140px; height: 140px; overflow: visible; }
.pot-globe .globe-rim   { stroke: url(#potIconGrad); }
.pot-globe .globe-lines { fill: none; stroke: rgba(190,215,255,.18); stroke-width: .7; }
.pot-globe .globe-atmo  { animation: globeAtmo 5s ease-in-out infinite; }
.pot-globe .globe-spec  { animation: globeSpec 9s ease-in-out infinite; }
@keyframes globeAtmo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes globeSpec { 0%, 100% { opacity: .5; transform: translate(0,0); } 50% { opacity: .85; transform: translate(3px,2px); } }
.geo-marker .ping  { fill: rgba(255,138,0,.35); transform-box: fill-box; transform-origin: center; animation: geoPing 2.6s ease-out infinite; }
.geo-marker .ping2 { animation-delay: 1.1s; }
.geo-marker .geo-dot { fill: var(--pot-orange); stroke: #fff; stroke-width: 1.4; }
@keyframes geoPing { 0% { transform: scale(.25); opacity: .85; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.pot-geo-info { flex: 1 1 auto; min-width: 0; }
.pot-geo-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--pot-amber); background: rgba(255,138,0,.12); border: 1px solid var(--pot-line-2); padding: 4px 11px; border-radius: 999px; }
.pot-geo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pot-green); box-shadow: 0 0 8px var(--pot-green); }
.pot-geo-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; margin-top: 11px; color: var(--pot-text); }
.pot-geo-sub { color: var(--pot-dim); font-size: 13.5px; margin-top: 5px; line-height: 1.5; }
.pot-geo-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--pot-green); font-size: 13.5px; font-weight: 600; }
.pot-geo-tag svg { width: 17px; height: 17px; stroke: var(--pot-green) !important; }
@media (max-width: 560px) { .pot-geo { flex-direction: column; text-align: center; gap: 14px; } .pot-geo-map, .pot-globe { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .geo-marker .ping, .pot-globe .globe-atmo, .pot-globe .globe-spec { animation: none; } }

/* compact variant: globe sits inside its natural half-width column next to the
   preceding field (e.g. Storage). Smaller globe + flex-wrap so the info text
   drops below the globe if the column ever gets too narrow — no overflow. */
.pot-geo-compact { gap: 16px; padding: 16px 18px; flex-wrap: wrap; align-content: center; }
.pot-geo-compact .pot-geo-map, .pot-geo-compact .pot-globe { width: 104px; height: 104px; }
.pot-geo-compact .pot-geo-info { flex: 1 1 170px; }
.pot-geo-compact .pot-geo-title { font-size: 19px; margin-top: 9px; }
.pot-geo-compact .pot-geo-sub { font-size: 12.5px; margin-top: 4px; }
.pot-geo-compact .pot-geo-tag { margin-top: 10px; font-size: 12.5px; }

/* sliders take their own full-width row (so two never sit side-by-side and
   collide their value bubbles, and each gets room to breathe) */
.pot-col-full { flex: 0 0 100% !important; max-width: 100% !important; }

/* mobile: .cart-body has 0 padding, so Bootstrap's -15px row margins bleed off
   screen. Neutralise the negative margins and add comfortable edge padding. */
@media (max-width: 575px) {
    #order-standard_cart .cart-body { padding-left: 6px !important; padding-right: 6px !important; }
    #order-standard_cart .row { margin-left: 0 !important; margin-right: 0 !important; }
    #order-standard_cart [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; }
    .pot-geo { padding: 16px 14px; }
    .pot-bubble { font-size: 12px; padding: 3px 9px; }
}

/* ============================================================================
   MOBILE / RESPONSIVE (cart)
   ========================================================================== */
.pot-slider { padding-inline: 2px; }
#order-standard_cart .secondary-cart-sidebar, #order-standard_cart .secondary-cart-body,
#order-standard_cart .cart-body, #order-standard_cart [class*="col-"] { max-width: 100%; }
@media (max-width: 991px) {
    .secondary-cart-sidebar { position: static !important; margin-top: 20px; width: 100% !important; float: none !important; }
}
@media (max-width: 768px) {
    #order-standard_cart .header-lined h1, #order-standard_cart .font-size-36 { font-size: 24px !important; }
    .order-summary { padding: 18px; }
    .order-summary h2, .order-summary .font-size-30 { font-size: 22px !important; }
    .pot-os-name { font-size: 16px; }
    .order-summary .pot-os-total .amt { font-size: 28px; }
    .pot-seg-opt { min-width: 0; flex: 1 1 calc(50% - 10px); }
    .pot-term { min-width: 0; flex: 1 1 calc(50% - 12px); }
    .pot-products .product, .products .product { padding: 18px; }
}
@media (max-width: 480px) {
    .pot-steps { gap: 2px; padding-bottom: 22px; }
    .pot-step-dot { width: 30px; height: 30px; font-size: 12px; margin-bottom: 6px; }
    .pot-step:not(:last-child)::after { top: 14px; }
    .pot-step-label { font-size: 10px; }
    .pot-seg-opt, .pot-term { flex: 1 1 100%; }
    .order-summary .pot-os-total .amt { font-size: 26px; }
    .pot-li-sub .pot-li-label, .pot-li-label { font-size: 13px; }
}

/* ============================================================================
   FIX: nexus theme.min.css ships a LIGHT cart skin. Some rules are token-based
   (var(--bg) etc.) and some are hardcoded #fff with high specificity
   (body #order-standard_cart ...). Belt: re-point nexus tokens to dark within
   the cart. Braces: !important-override the hardcoded light spots.
   ========================================================================== */
#order-standard_cart {
    --bg: #0d0720; --bg-lifted: #1b1033; --bg-muted: #140b26;
    --text: var(--pot-text); --text-lifted: var(--pot-dim); --text-muted: var(--pot-faint);
    --border-muted: var(--pot-line);
}
body #order-standard_cart .cart-body .products .product header,
#order-standard_cart .products .product header,
#order-standard_cart .products .product header span { background: transparent !important; color: var(--pot-text) !important; }
body #order-standard_cart .domain-selection-options,
#order-standard_cart .domain-selection-options { background: transparent !important; border: 1px solid var(--pot-line) !important; }
#order-standard_cart .domain-selection-options .option { background: rgba(7,3,16,.5) !important; }
body #order-standard_cart .cart-body .view-cart-empty,
#order-standard_cart .view-cart-empty { background: var(--pot-glass) !important; color: var(--pot-text) !important; border-color: var(--pot-line) !important; }
body .secondary-cart-body #domainRenewals { background: var(--pot-card) !important; border-color: var(--pot-line) !important; }
body #order-standard_cart .sub-heading span.primary-bg-color { background: var(--pot-grad) !important; color: #fff !important; }
body #order-standard_cart .alert:has(form) { background: var(--pot-card) !important; border-color: var(--pot-line) !important; color: var(--pot-text) !important; }

/* gold-gradient text legibility */
#order-standard_cart .btn-primary,#order-standard_cart .btn-success,.btn-order-now,.btn-checkout,#btnCompleteOrder,#btnCompleteProductConfig,.sub-heading .primary-bg-color{text-shadow:0 1px 2px rgba(74,42,0,.6),0 0 8px rgba(74,42,0,.22)}
.pot-step.done .pot-step-dot{text-shadow:0 1px 2px rgba(74,42,0,.5)}

/* ---- production hardening: gradient-clipped prices stay visible in print and
   Windows high-contrast (forced-colors), where background-clip:text fails ---- */
@media (forced-colors: active), print {
    .products .product-pricing .price,
    .order-summary .total-due-today .amt,
    .order-summary .pot-os-total .amt {
        -webkit-text-fill-color: currentColor !important;
        background: none !important;
    }
}