/* ════════════════════════════════════════════════════════════════════
QGS Hosting — Order form (standard_cart)
Dark theme, Fira Sans font, QGS blue #029df6 accent, devpanel palette.
Matches qgshosting.com, devpanel.qgshosting.com, and nexus-qgs-v906.
Auto-loaded by common.tpl AFTER all.min.css → wins via id-scope.
════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');
#order-standard_cart {
--green:#029df6;
--green-dark:#0b7fd0;
--green-dim:rgba(2,157,246,.10);
--green-line:rgba(2,157,246,.28);
--green-glow:0 8px 28px rgba(2,157,246,.28);
--accent2:#22b8e6;
--blue:#2563eb;
--red:#ef4444;
--orange:#fb923c;
--navy:#0b1016;
--navy-2:#0f151d;
--navy-3:#131a22;
/* Surfaces — 1:1 with QGS-MAIN-EN (the /configure page) */
--bg:#0b1016; /* site --bg */
--bg-2:#0f151d; /* site --bg-2 */
--card:#131a22; /* site --surface */
--card-2:#18212c; /* site --surface-2 */
--card-3:#202b38; /* site --surface-3 */
--card-edge:#232a39; /* thick .cfg-card border */
--head:#18212c;
--border:rgba(255,255,255,.08);
--border-soft:rgba(255,255,255,.13);
--text:#eaeef2;
--muted:#96a3b4;
--dim:#61707f;
--r-card:12px;
--r-input:8px;
--r-pill:999px;
}
/* ── Page canvas (dark) ─────────────────────────────────────── */
html, body { background:#0b1016 !important; color:#eaeef2; }
body, body * { font-family:'Fira Sans', system-ui, -apple-system, sans-serif; }
/* Force every wrapper element between and the cart to be transparent
so no light WHMCS default sneaks through under the yellow dev-banner. */
body.cart,
body.cart #main-body,
body.cart section#main-body,
body.cart .container,
body.cart .primary-content,
body.cart .cart-container,
body.do-app .primary-content,
body.do-app .do-main,
body.do-app .do-main-inner { background:transparent !important; }
body.cart, body.do-app { background:#0b1016 !important; }
/* Tighten WHMCS theme chrome around the cart for a cleaner one-screen feel */
body.cart .container, .cart-container { max-width:1320px !important; }
#header.header, header.header { box-shadow:0 1px 0 var(--hc-border,rgba(255,255,255,.08)); }
.hc-auth-bar, .hc-auth-content { background:transparent !important; }
.breadcrumb, .page-header-breadcrumb, ol.breadcrumb { background:transparent !important; padding:10px 0 !important; margin:0 !important; font-size:12.5px; color:#96a3b4; }
.breadcrumb a { color:#029df6; }
/* Let nexus handle the footer — do NOT override .do-footer / #footer styles here.
nexus renders the light `.do-footer` for logged-in users and the rich `#footer`
for guests; both already match the client-area home aesthetic. */
/* Sticky-safe parents: if any ancestor sets overflow:hidden|auto|scroll,
position:sticky becomes scoped to that ancestor (likely off-screen).
Free up the nexus app chrome so the sidebar can stick to the viewport. */
body.do-app, body.do-app .do-content, body.do-app .primary-content,
body.do-app .do-main, body.do-app .do-main-inner, body.do-app main,
body.cart .primary-content, body.cart .container { overflow:visible !important; }
#order-standard_cart,
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart button,
#order-standard_cart .btn { font-family:'Fira Sans', system-ui, -apple-system, sans-serif; }
#order-standard_cart {
color:var(--text) !important;
max-width:1320px; margin:0 auto; padding:18px 20px 36px;
line-height:1.5; position:relative;
}
#order-standard_cart .cart-body { float:none !important; width:100% !important; padding:0 !important; background:transparent !important; }
#order-standard_cart::before {
content:""; position:fixed; inset:0;
background:#0b1016; z-index:-1;
}
#order-standard_cart > * { position:relative; z-index:1; }
#order-standard_cart a { color:var(--green); }
#order-standard_cart a:hover { color:var(--green-dark); }
/* ── Page header (compact) ──────────────────────────────────── */
#order-standard_cart .thc-head { border:0; border-left:3px solid var(--green); padding:1px 0 1px 14px; margin-bottom:14px; }
#order-standard_cart .thc-head h1,
#order-standard_cart .thc-head h1.font-size-36 { font-size:22px !important; font-weight:800 !important; letter-spacing:-.02em; color:var(--text); margin:0 0 2px !important; line-height:1.2; }
#order-standard_cart .thc-head h1::after { display:none; }
#order-standard_cart .thc-head p { font-size:13px; color:var(--muted); margin:0; }
/* ── Two column grid ────────────────────────────────────────── */
#order-standard_cart .thc-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start; margin:0; }
@media (min-width:1200px) {
#order-standard_cart .thc-grid { grid-template-columns:minmax(0,1fr) 400px; }
}
/* Cart card always lives in the sidebar; on mobile the whole sidebar moves
to the top of the page via `order:-1` in the @media block below. */
#order-standard_cart .thc-main,
#order-standard_cart .secondary-cart-body.thc-main,
/* viewcart uses the bare .secondary-cart-body (no .thc-main) — all.min.css
gives it float:left/width:65%, which breaks the grid track sizing. */
#order-standard_cart .thc-grid > .secondary-cart-body { min-width:0; width:auto; float:none; padding:0; }
/* Sidebar column itself must not be position:relative/overflow:hidden so the
inner .order-summary can `position:sticky` against the page viewport. */
#order-standard_cart .thc-sidebar,
#order-standard_cart .secondary-cart-sidebar { min-width:0; width:auto; float:none; padding:0; margin:0; overflow:visible; }
/* The actual sticky wrapper — both cart card AND order summary live inside.
Uses calc(100vh - …) for max-height so it scrolls internally if the
combined sidebar content is taller than the viewport. */
#order-standard_cart .thc-sidebar > .secondary-cart-sidebar,
#order-standard_cart .cfg-side > .secondary-cart-sidebar,
#order-standard_cart.thc-viewcart .secondary-cart-sidebar {
position:sticky; top:18px;
max-height:calc(100vh - 36px);
overflow-y:auto;
overscroll-behavior:contain;
display:flex; flex-direction:column; gap:14px;
}
/* Slim scrollbar inside the sticky panel */
#order-standard_cart .secondary-cart-sidebar::-webkit-scrollbar { width:6px; }
#order-standard_cart .secondary-cart-sidebar::-webkit-scrollbar-track { background:transparent; }
#order-standard_cart .secondary-cart-sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
#order-standard_cart .secondary-cart-sidebar::-webkit-scrollbar-thumb:hover { background:var(--dim); }
/* Inner cards no longer need their own margin since flex gap handles spacing */
#order-standard_cart .secondary-cart-sidebar .thc-card,
#order-standard_cart .secondary-cart-sidebar .order-summary { margin:0; }
@media (max-width:900px) {
#order-standard_cart .thc-grid { grid-template-columns:1fr; }
#order-standard_cart .thc-sidebar { order:-1; }
#order-standard_cart .thc-sidebar > .secondary-cart-sidebar,
#order-standard_cart.thc-viewcart .secondary-cart-sidebar { position:static; max-height:none; overflow:visible; }
}
/* ── Narrower cart items inside the sidebar column ──────────── */
#order-standard_cart .secondary-cart-sidebar .view-cart-items-header { display:none; }
/* In the narrow sidebar column, stack title above price and float the remove
button into the top-right of each item. Bootstrap col-sm-* would only
collapse below 576px — our sidebar is wider than that — so we override the
row layout manually. */
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item { padding:10px 14px; position:relative; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px; margin:0; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > [class*="col-"] { padding:0; flex:1 1 auto; max-width:none; width:auto; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > .col-sm-7,
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > .col-sm-5 { flex:1 1 100%; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > .col-sm-4 { flex:1 1 100%; text-align:left; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > .col-sm-4.item-price { padding-top:6px; border-top:1px dashed var(--border-soft); margin-top:5px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item-price span { display:inline-block; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item-price > span:first-child { font-size:14.5px; color:var(--green-dark) !important; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item .row > .col-sm-1 { position:absolute; right:8px; top:6px; flex:0 0 auto; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item-title { padding-right:24px; font-size:13.5px; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items .item-title .btn-link { font-size:11px; padding-left:4px; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items-header .row { display:flex; }
#order-standard_cart .secondary-cart-sidebar .view-cart-items-header .col-sm-4 { text-align:right; flex:0 0 auto; margin-left:auto; }
#order-standard_cart .secondary-cart-sidebar .thc-cart-foot { flex-direction:column; align-items:stretch; gap:8px; padding:10px 14px; }
#order-standard_cart .secondary-cart-sidebar .thc-promo-inline { width:100%; max-width:none; }
#order-standard_cart .secondary-cart-sidebar .thc-cart-actions { justify-content:space-between; }
/* ── Cards ──────────────────────────────────────────────────── */
#order-standard_cart .thc-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); box-shadow:0 6px 22px rgba(15,24,40,.05); margin-bottom:12px; overflow:hidden; }
/* ── Cart card head/foot ────────────────────────────────────── */
#order-standard_cart .thc-cart-head { display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--head); border-bottom:1px solid var(--border); }
#order-standard_cart .thc-cart-head .thc-cart-title { flex:1; font-size:14px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
#order-standard_cart .thc-cart-ico { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; background:var(--green-dim); color:var(--green); font-size:13px; }
#order-standard_cart .thc-cart-count { min-width:22px; height:22px; padding:0 7px; border-radius:var(--r-pill); background:var(--green); color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
#order-standard_cart .thc-cart-foot { padding:10px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--bg); }
#order-standard_cart .thc-cart-foot .btn-link:not(.thc-empty-cart) { color:var(--green) !important; font-weight:700; font-size:13px; padding:0; }
#order-standard_cart .thc-empty-cart {
color:var(--red) !important; font-weight:700; font-size:12.5px;
padding:4px 0 !important; background:transparent !important; border:0 !important;
box-shadow:none !important; text-decoration:none;
display:inline-flex; align-items:center; gap:7px;
}
#order-standard_cart .thc-empty-cart i { width:14px; font-size:13px; text-align:center; color:var(--red) !important; }
#order-standard_cart .thc-empty-cart:hover { color:#f87171 !important; text-decoration:underline; }
#order-standard_cart .thc-empty-cart:hover i { color:#f87171 !important; }
/* inline promo inside cart foot */
#order-standard_cart .thc-cart-foot .thc-promo-inline { display:flex; align-items:center; gap:8px; flex:1; min-width:240px; max-width:420px; }
#order-standard_cart .thc-cart-foot .thc-promo-inline input { flex:1; min-height:36px; padding:7px 12px 7px 32px; font-size:12.5px; border:1px solid var(--border); border-radius:7px; background:var(--bg-2) !important; color:var(--text) !important; }
#order-standard_cart .thc-cart-foot .thc-promo-inline .field-icon { left:10px; top:50%; transform:translateY(-50%); position:absolute; color:var(--dim); }
#order-standard_cart .thc-cart-foot .thc-promo-inline .form-group { position:relative; flex:1; margin:0; }
#order-standard_cart .thc-cart-foot .thc-promo-inline button { min-height:36px; padding:0 14px; font-size:12.5px; font-weight:700; border-radius:7px; }
/* ── Line items (compact) ───────────────────────────────────── */
#order-standard_cart .view-cart-items-header { padding:9px 16px; border:0; border-radius:0; border-bottom:1px solid var(--border); background:var(--bg) !important; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim) !important; }
#order-standard_cart .view-cart-items { padding:0; }
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items .item:nth-child(even) { padding:11px 16px; border-top:1px solid var(--border-soft); background:var(--card) !important; }
#order-standard_cart .view-cart-items .item:first-child { border-top:0; }
#order-standard_cart .view-cart-items .item span:not(.caret):not(.renewal-price) { color:var(--text); }
#order-standard_cart .view-cart-items .item-title { display:block; font-size:14px; font-weight:800; color:var(--text) !important; margin-bottom:2px; line-height:1.3; }
#order-standard_cart .view-cart-items .item-title .btn-link { color:var(--green) !important; font-weight:600; font-size:11.5px; padding:0 0 0 6px; }
#order-standard_cart .view-cart-items .item-group { display:block; font-size:12px; color:var(--muted) !important; font-style:normal; }
#order-standard_cart .view-cart-items .item-domain { display:block; font-size:12px; color:var(--green) !important; font-weight:600; }
#order-standard_cart .view-cart-items .item small,
#order-standard_cart .view-cart-items .item small * { display:block; margin-top:4px; font-size:11.5px; color:var(--muted) !important; line-height:1.65; }
#order-standard_cart .view-cart-items .item-price { text-align:right; }
#order-standard_cart .view-cart-items .item-price span { display:block; }
#order-standard_cart .view-cart-items .item-price > span:first-child { font-size:14px; font-weight:800; color:var(--text) !important; }
#order-standard_cart .view-cart-items .item-price .cycle { font-size:11.5px; color:var(--muted) !important; font-weight:500; }
#order-standard_cart .view-cart-items .item-price .renewal { font-size:10.5px; color:var(--dim) !important; }
#order-standard_cart .btn-remove-from-cart { color:var(--dim); padding:2px 6px; }
#order-standard_cart .btn-remove-from-cart:hover { color:var(--red); }
#order-standard_cart .view-cart-items .item-qty input { background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:6px; }
#order-standard_cart .view-cart-empty { padding:38px 20px; text-align:center; color:var(--muted); background:var(--card) !important; border:1px dashed var(--border) !important; border-radius:var(--r-card); margin:8px 12px 12px !important; }
#order-standard_cart .view-cart-items { background:transparent !important; }
/* ── Personal Information bar ───────────────────────────────── */
#order-standard_cart .already-registered { border:0; padding:0; margin:16px 0 10px; min-height:0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#order-standard_cart .already-registered p { display:none; }
#order-standard_cart .thc-pi-label { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; color:var(--text); }
#order-standard_cart .thc-pi-label i { color:var(--green); font-size:14px; }
#order-standard_cart .thc-pi-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
/* ── Sub-headings (compact) ─────────────────────────────────── */
#order-standard_cart .sub-heading { border:0; margin:14px 0 9px; padding:0 0 10px; border-bottom:1px solid var(--green-dark); }
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color { background:transparent !important; color:var(--text) !important; padding:0 !important; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border-radius:0; }
#order-standard_cart .sub-heading .primary-bg-color::before { content:""; display:inline-block; width:6px; height:6px; border-radius:2px; background:var(--green); margin-right:8px; vertical-align:middle; }
#order-standard_cart .sub-heading small,
#order-standard_cart .sub-heading i { text-transform:none; color:var(--dim); font-weight:500; }
/* ── Form fields (compact) ──────────────────────────────────── */
#order-standard_cart .form-group { margin-bottom:9px; }
#order-standard_cart label { color:var(--muted); font-weight:600; font-size:12.5px; }
#order-standard_cart .field,
#order-standard_cart .form-control { background-color:var(--bg-2) !important; border:1.5px solid var(--border); color:var(--text) !important; border-radius:var(--r-input); min-height:40px; padding:9px 12px; width:100%; box-shadow:none; transition:border-color .16s, box-shadow .16s; font-size:13.5px; }
#order-standard_cart .prepend-icon .field { padding-left:44px; }
/* Icon box has to match the 48px input height, or the glyph sits high.
FontAwesome glyphs also differ in intrinsic width, which made the column
of icons look ragged — pin every one to the same 16px box. */
#order-standard_cart .prepend-icon .field-icon {
position:absolute; left:0; top:0;
width:44px; height:48px; line-height:normal;
display:flex; align-items:center; justify-content:center;
margin:0; padding:0; z-index:2; pointer-events:none;
color:var(--dim);
}
#order-standard_cart .field-icon i,
#order-standard_cart .prepend-icon .field-icon i {
color:var(--dim); display:inline-block;
width:16px; font-size:14px; line-height:1; text-align:center;
}
#order-standard_cart .field::placeholder,
#order-standard_cart .form-control::placeholder { color:var(--dim); }
#order-standard_cart .field:focus,
#order-standard_cart .form-control:focus { background-color:var(--card-2) !important; border-color:var(--green); box-shadow:0 0 0 3px rgba(2,157,246,.20); color:var(--text) !important; }
#order-standard_cart .form-group.prepend-icon:focus-within .field-icon i { color:var(--green); }
#order-standard_cart select.field,
#order-standard_cart select.form-control { -webkit-appearance:none; appearance:none; 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=%22%2396a3b4%22 d='M6 9 1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
#order-standard_cart textarea.field,
#order-standard_cart textarea.form-control { min-height:104px; padding-left:14px; }
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] { background-color:var(--bg-2) !important; color:var(--muted) !important; }
#order-standard_cart .field-help-text { color:var(--dim); }
#order-standard_cart .field-error-msg { color:var(--red); font-size:12px; }
#order-standard_cart .text-muted,
#order-standard_cart .small.text-muted { color:var(--muted) !important; }
/* Phone field: intl-tel-input injects a country flag + dial-code overlay on
the LEFT of the input. Hide our normal field-icon for these fields and
leave plenty of room for the flag dropdown (~76px). When intl-tel-input
has NOT initialized yet, the input still needs the icon's space. */
#order-standard_cart label[for="inputPhone"].field-icon,
#order-standard_cart label[for="inputDCPhone"].field-icon { display:none !important; }
#order-standard_cart #inputPhone,
#order-standard_cart #inputDCPhone { padding-left:14px; }
#order-standard_cart .iti { width:100%; display:block; position:relative; }
#order-standard_cart .iti input.field,
#order-standard_cart .iti #inputPhone,
#order-standard_cart .iti #inputDCPhone { padding-left:92px !important; }
#order-standard_cart .iti__flag-container { z-index:3; }
#order-standard_cart .iti__selected-flag { padding:0 8px 0 12px; height:48px; }
/* ── Company / VAT toggle ───────────────────────────────────── */
#order-standard_cart .thc-company { margin:6px 0 4px; }
#order-standard_cart .thc-company-toggle { display:flex; align-items:center; gap:11px; margin:0; padding:13px 16px; background:var(--green-dim); border:1.5px solid var(--green-line); border-radius:var(--r-input); cursor:pointer; font-weight:600; color:var(--text); }
#order-standard_cart .thc-company-toggle input { width:16px; height:16px; accent-color:var(--green); margin:0; }
#order-standard_cart .thc-company-label { font-size:13.5px; }
#order-standard_cart .thc-company-taxlabel { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted); }
#order-standard_cart .thc-company-fields { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#order-standard_cart .thc-company-fields[hidden] { display:none; }
@media (max-width:560px){ #order-standard_cart .thc-company-fields { grid-template-columns:1fr; } }
/* ── Account select ─────────────────────────────────────────── */
#order-standard_cart .account { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-input); padding:12px 14px; margin-bottom:10px; }
#order-standard_cart .account.active { border-color:var(--green); box-shadow:0 0 0 3px var(--green-dim); }
#order-standard_cart .account .small { color:var(--muted); }
/* ── Buttons ────────────────────────────────────────────────── */
#order-standard_cart .btn { border-radius:8px; font-weight:700; border:1.5px solid transparent; transition:all .16s ease; padding:8px 16px; font-size:13px; }
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-checkout { background:var(--green) !important; border-color:transparent !important; color:#fff !important; box-shadow:var(--green-glow); text-shadow:none; }
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-checkout:hover { background:var(--green-dark) !important; color:#fff !important; transform:translateY(-1px); }
#order-standard_cart .btn-lg { padding:13px 26px; font-size:14.5px; }
#order-standard_cart .btn-sm { padding:6px 12px; font-size:12px; }
/* Identical to the REGISTER button in the site header */
#order-standard_cart .btn-info:not(.w-hidden),
#order-standard_cart .btn-warning:not(.w-hidden) {
display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
font-family:"Oswald","Fira Sans",sans-serif !important;
font-weight:700 !important; font-size:.98rem !important; letter-spacing:1px !important;
text-transform:uppercase !important; line-height:1.5 !important;
padding:9px 20px !important; border-radius:5px !important;
min-height:0 !important; height:auto !important;
background:var(--green) !important; border:1px solid transparent !important;
color:#fff !important; box-shadow:none !important;
}
#order-standard_cart .btn-info:hover,
#order-standard_cart .btn-warning:hover {
background:var(--green) !important; color:#eef6ff !important;
box-shadow:0 .0625rem .5625rem var(--green) !important; transform:none !important;
}
#order-standard_cart .btn-default { background:var(--card) !important; border-color:var(--border) !important; color:var(--text) !important; }
#order-standard_cart .btn-default:hover { background:var(--green-dim) !important; color:var(--green-dark) !important; border-color:var(--green-line) !important; }
/* Blanket link-button styling, but NOT for the destructive actions — this rule
sits below .thc-empty-cart / .btn-remove-from-cart and used to repaint them
blue at equal specificity (later rule wins). */
#order-standard_cart .btn-link:not(.thc-empty-cart):not(.btn-remove-from-cart) { color:var(--green) !important; background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
#order-standard_cart .btn-link:not(.thc-empty-cart):not(.btn-remove-from-cart):hover { color:var(--green-dark) !important; background:transparent !important; transform:none !important; }
#order-standard_cart #btnCompleteOrder { margin-top:6px; min-width:260px; padding:13px 28px; font-size:15px; font-weight:800; letter-spacing:.01em; }
#order-standard_cart #btnCompleteOrder:hover { box-shadow:0 12px 32px rgba(2,157,246,.36); }
/* ── Alerts ─────────────────────────────────────────────────── */
#order-standard_cart .alert { border-radius:10px; border:1px solid transparent; }
#order-standard_cart .alert-danger { background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.30); color:#b91c1c; }
#order-standard_cart .alert-success { background:var(--green-dim); border-color:var(--green-line); color:var(--green-dark); }
#order-standard_cart .alert-info { background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.22); color:#1d4ed8; }
#order-standard_cart .alert-warning { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.28); color:#b45309; }
#order-standard_cart #checkoutDueTodayAlert { font-size:16px; }
#order-standard_cart #checkoutDueTodayAlert strong { color:var(--green-dark); }
/* ── Promo (inline in cart foot) ─────────────────────────────── */
#order-standard_cart .thc-cart-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#order-standard_cart .view-cart-promotion-code {
display:flex; align-items:center; gap:8px;
padding:9px 12px; border-radius:5px;
background:rgba(55,226,154,.12); border:1px solid rgba(55,226,153,.30);
color:#37e28a; font-weight:700; font-size:.85rem;
}
#order-standard_cart .view-cart-promotion-code > i { flex:0 0 16px; width:16px; font-size:14px; line-height:1; text-align:center; }
#order-standard_cart .thc-promo-remove { margin-left:auto; flex:0 0 auto; color:#37e28a !important; opacity:.6; font-size:18px; line-height:1; padding:0 2px; text-decoration:none; }
#order-standard_cart .thc-promo-remove:hover { opacity:1; color:var(--red) !important; }
/* discount line in the order summary matches */
#order-standard_cart #discount, #order-standard_cart .os-promo b { color:#37e28a !important; }
/* ── Security / compliance notice (compact) ─────────────────── */
/* Green "success pill" — same recipe as .os-save / .pc-save on the site's
configure page. The icon is pinned to a fixed box so it can't stretch. */
#order-standard_cart .thc-security-notice {
display:flex; align-items:center; gap:12px;
margin-top:12px; padding:9px 12px;
background:rgba(55,226,154,.12) !important;
border:1px solid rgba(55,226,153,.30) !important;
border-radius:5px;
color:#37e28a; font-weight:500; font-size:.85rem; line-height:1.5;
box-shadow:none;
}
#order-standard_cart .thc-security-notice i {
flex:0 0 24px; width:24px; font-size:22px; line-height:1;
text-align:center; color:#37e28a; margin:0;
}
#order-standard_cart .thc-security-notice p { margin:0; color:#37e28a; font-weight:200; font-size:.85rem; }
#order-standard_cart .thc-security-notice strong { color:#5cf0ab; font-weight:700; }
/* ── Payment ────────────────────────────────────────────────── */
#order-standard_cart .radio-inline,
#order-standard_cart .checkbox-inline { color:var(--muted); }
#order-standard_cart input[type="radio"],
#order-standard_cart input[type="checkbox"] { accent-color:var(--green); }
#order-standard_cart .cc-input-container { margin-top:10px; }
#order-standard_cart .existing-cc-grid .credit-card,
#order-standard_cart .existing-cc-grid label { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-input); color:var(--text); }
#order-standard_cart .input-group-append .btn,
#order-standard_cart .input-group-btn .btn { border-radius:0 8px 8px 0; }
/* Payment method tiles (large vertical cards with inline radio + label) */
#order-standard_cart .thc-pm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:8px; }
#order-standard_cart .thc-pm-tile {
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center;
background:var(--card); border:1.5px solid var(--border); border-radius:12px;
padding:0px 10px; min-height:100px;
font-weight:600; color:var(--text); cursor:pointer;
transition:border-color .15s, background .15s, transform .15s, box-shadow .15s;
margin:0; position:relative;
}
#order-standard_cart .thc-pm-tile:hover { border-color:var(--green-line); background:var(--card-2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,24,40,.08); }
#order-standard_cart .thc-pm-tile-active,
#order-standard_cart .thc-pm-tile:has(input:checked) { border-color:var(--green) !important; background:var(--green-dim) !important; box-shadow:0 0 0 3px rgba(2,157,246,.16), 0 10px 28px rgba(2,157,246,.14); }
/* Hide the native radio AND any iCheck wrapper that WHMCS scripts.min.js
may inject. The visual selection indicator lives in .thc-pm-name::before. */
#order-standard_cart .thc-pm-tile input[type="radio"],
#order-standard_cart .thc-pm-tile div[class*="iradio"],
#order-standard_cart .thc-pm-tile div[class*="icheckbox"],
#order-standard_cart .thc-pm-tile ins.iCheck-helper {
position:absolute !important;
opacity:0 !important; width:0 !important; height:0 !important;
margin:0 !important; padding:0 !important;
pointer-events:none !important;
overflow:hidden;
}
#order-standard_cart .thc-pm-icon { width:auto; height:48px; max-width:140px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(15,24,40,.08)); }
/* Bottom row: pseudo-radio dot inline-left of the payment name (matches the
reference design — single selection indicator, no corner badge). */
#order-standard_cart .thc-pm-name {
display:inline-flex; align-items:center; gap:9px;
font-size:13.5px; font-weight:700; color:var(--text); line-height:1.25; letter-spacing:-.005em;
}
#order-standard_cart .thc-pm-name::before {
content:""; flex:0 0 auto;
width:18px; height:18px; border-radius:50%;
background:var(--card); border:2px solid var(--border);
background-position:center; background-repeat:no-repeat; background-size:11px 11px;
transition:all .15s ease;
}
#order-standard_cart .thc-pm-tile-active .thc-pm-name::before,
#order-standard_cart .thc-pm-tile:has(input:checked) .thc-pm-name::before {
background-color:var(--green);
border-color:var(--green);
box-shadow:0 3px 8px rgba(2,157,246,.35);
background-image:url("data:image/svg+xml;utf8,");
}
/* Generic fallback icon for gateways without a logo */
#order-standard_cart .thc-pm-tile:not(:has(.thc-pm-icon)) .thc-pm-name::after {
content:"\f09d"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome"; font-weight:900;
display:block; font-size:38px; color:var(--green); margin:0 0 10px;
order:-1; width:100%;
}
@media (max-width:560px) {
#order-standard_cart .thc-pm-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
#order-standard_cart .thc-pm-tile { min-height:108px; padding:14px 10px; gap:10px; }
#order-standard_cart .thc-pm-icon { height:32px; }
#order-standard_cart .thc-pm-name { font-size:12.5px; }
}
/* ── Order summary sidebar (navy header, compact) ───────────── */
#order-standard_cart .order-summary { background:var(--card) !important; border:1.5px solid var(--border); border-radius:var(--r-card); box-shadow:0 6px 22px rgba(15,24,40,.06); margin:0; overflow:hidden; position:relative; }
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h2.font-size-30 { font-size:14px !important; font-weight:800 !important; color:#fff !important; text-align:left !important; padding:12px 16px !important; background:linear-gradient(135deg,var(--navy),var(--navy-3)) !important; border-bottom:0 !important; margin:0 !important; letter-spacing:-.005em; line-height:1.3 !important; text-shadow:none !important; }
#order-standard_cart .order-summary h2::before { content:"\f0ca"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome"; font-weight:900; color:var(--green); font-size:12px; margin-right:8px; }
#order-standard_cart .summary-container { background:transparent !important; padding:13px 16px; font-size:13.5px; min-height:0; }
#order-standard_cart .order-summary .subtotal { display:flex; justify-content:space-between; padding:4px 0; color:var(--muted); font-weight:600; font-size:13px; }
#order-standard_cart .order-summary .subtotal #subtotal { color:var(--text); font-weight:800; }
#order-standard_cart .order-summary .bordered-totals { border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:6px 0; margin:4px 0 9px; color:var(--muted); font-size:13px; }
#order-standard_cart .order-summary .bordered-totals .clearfix { display:flex; justify-content:space-between; padding:2px 0; }
#order-standard_cart .order-summary .bordered-totals span[id^="taxTotal"],
#order-standard_cart .order-summary .bordered-totals #discount { color:var(--text); font-weight:700; }
/* Estimate Taxes — obvious clickable disclosure row */
#order-standard_cart .thc-est-tax { margin:0 0 10px; }
#order-standard_cart .thc-est-tax summary {
cursor:pointer; list-style:none;
display:flex; align-items:center; gap:9px;
padding:9px 12px;
background:var(--card); border:1.5px dashed var(--green-line);
border-radius:8px;
font-size:12.5px; font-weight:700; color:var(--green-dark);
transition:all .15s ease;
}
#order-standard_cart .thc-est-tax summary:hover {
background:var(--green-dim); border-style:solid;
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(2,157,246,.18);
}
#order-standard_cart .thc-est-tax summary::-webkit-details-marker { display:none; }
#order-standard_cart .thc-est-tax summary::before {
content:"\f1ec"; /* calculator */
font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome"; font-weight:900;
font-size:13px; color:var(--green);
width:22px; height:22px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--green-dim); border-radius:6px;
flex:0 0 auto;
}
#order-standard_cart .thc-est-tax summary::after {
content:"\f078"; /* chevron-down */
font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome"; font-weight:900;
font-size:10px; color:var(--green); margin-left:auto;
transition:transform .2s ease;
}
#order-standard_cart .thc-est-tax[open] summary { background:var(--green-dim); border-style:solid; }
#order-standard_cart .thc-est-tax[open] summary::after { transform:rotate(180deg); }
#order-standard_cart .thc-est-tax-body { margin:8px 4px 0; padding:10px 12px; background:var(--bg); border-radius:7px; font-size:12px; color:var(--muted); line-height:1.6; }
/* Recurring totals: flat row, no nested box (avoids "card inside a card") */
#order-standard_cart .order-summary .recurring-totals { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; background:none; border:0; border-radius:0; padding:6px 0; margin-bottom:0; font-weight:600; color:var(--muted); font-size:12.5px; }
#order-standard_cart .order-summary .recurring-totals .recurring-charges { text-align:right; }
#order-standard_cart .order-summary .recurring-totals .cost { color:var(--text); font-weight:800; }
/* Total due today: flat total row — divider + big blue figure, like .os-totalrow */
#order-standard_cart .order-summary .total-due-today {
background:none; border:0; border-top:1px solid var(--border); border-radius:0;
padding:14px 0 0; margin-top:12px;
display:flex; flex-direction:row-reverse; align-items:flex-end; justify-content:space-between; gap:12px;
}
#order-standard_cart .order-summary .total-due-today span { display:block; }
#order-standard_cart .order-summary .total-due-today > span:last-child { font-family:"Oswald","Fira Sans",sans-serif; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; color:var(--text); font-weight:700; text-align:left; }
#order-standard_cart .order-summary .total-due-today .amt { font-family:"Oswald","Fira Sans",sans-serif; font-size:2rem; font-weight:700; color:var(--green); letter-spacing:-.02em; line-height:1.1; text-align:right; white-space:nowrap; }
#order-standard_cart .order-summary .loader { color:var(--green); position:absolute; top:14px; right:14px; }
#order-standard_cart .order-summary .btn-checkout { width:100%; margin-top:16px; }
#order-standard_cart .order-summary .btn-continue-shopping { display:block; margin-top:10px; text-align:center; color:var(--muted); font-weight:600; font-size:13px; }
#order-standard_cart .express-checkout-buttons { margin-top:14px; }
#order-standard_cart .express-checkout-buttons .separator { text-align:center; color:var(--dim); font-size:12px; margin:8px 0; }
/* ── Password strength / marketing optin ────────────────────── */
#order-standard_cart .progress { background:#e9eef5; border-radius:var(--r-pill); height:8px; }
#order-standard_cart .progress-bar { background:var(--green); }
#order-standard_cart .marketing-email-optin { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-card); padding:16px 18px; margin:16px 0; }
#order-standard_cart .marketing-email-optin h4 { color:var(--text); font-weight:800; }
#order-standard_cart .marketing-email-optin p { color:var(--muted); }
/* ── Modals ─────────────────────────────────────────────────── */
#order-standard_cart .modal-content { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); color:var(--text); }
#order-standard_cart .modal-title i { color:var(--green); }
#order-standard_cart .modal-footer { border-top:1px solid var(--border); }
#order-standard_cart .modal .close { color:var(--muted); opacity:1; text-shadow:none; }
#order-standard_cart .modal .close:hover { color:var(--text); }
/* ── Confirm modals (Empty Cart / Remove Item) ──────────────── */
.thc-confirm-modal { z-index:1080; }
.thc-confirm-modal .modal-dialog { max-width:440px; margin:auto; }
.thc-confirm-modal .modal-dialog-centered { display:flex; align-items:center; min-height:calc(100% - 1rem); }
/* devpanel modal recipe: --secondary body, 5px blue edge, square corners */
.thc-confirm-modal .modal-content { background:#131a22; border:5px solid #029df6 !important; border-radius:0 !important; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.55); position:relative; }
.thc-confirm-modal form { margin:0; }
.thc-confirm-close {
position:absolute; top:0; right:0;
width:38px; height:38px; padding:0; margin:0;
display:flex; align-items:center; justify-content:center;
background:#029df6 !important; border:0; border-radius:0; /* literal: this button can render outside #order-standard_cart, where the palette vars do not resolve */
font-size:20px; line-height:1; color:#fff; opacity:.55;
cursor:pointer; z-index:3;
transition:opacity .15s linear, transform .15s linear;
}
.thc-confirm-close:hover { opacity:1; transform:rotate(90deg); background:#029df6 !important; color:#fff; }
.thc-confirm-body { padding:28px 28px 16px; text-align:center; }
.thc-confirm-icon { width:64px; height:64px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:28px; }
.thc-confirm-icon-red { background:rgba(239,68,68,.12); color:#ef4444; }
.thc-confirm-icon-green { background:rgba(2,157,246,.14); color:#0b7fd0; }
.thc-confirm-modal .modal-title { font-size:19px; font-weight:800; color:#eaeef2; letter-spacing:-.01em; margin:0 0 8px; }
.thc-confirm-text { font-size:14px; color:#96a3b4; line-height:1.6; margin:0; }
.thc-confirm-footer { display:flex; gap:10px; padding:14px 22px 22px; border-top:0; justify-content:center; }
.thc-confirm-footer .btn { flex:1; max-width:160px; padding:11px 18px !important; font-size:14px !important; font-weight:700 !important; border-radius:9px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:44px; }
.thc-confirm-footer .btn-default { background:#131a22 !important; border:1.5px solid rgba(255,255,255,.08) !important; color:#eaeef2 !important; box-shadow:none !important; }
.thc-confirm-footer .btn-default:hover { background:#0b1016 !important; color:#eaeef2 !important; border-color:rgba(255,255,255,.13) !important; }
.thc-confirm-footer .btn-primary { background:#029df6 !important; border:0 !important; color:#fff !important; box-shadow:0 8px 22px rgba(2,157,246,.28) !important; }
.thc-confirm-footer .btn-primary:hover { background:#0b7fd0 !important; transform:translateY(-1px); }
@media (max-width:480px) {
.thc-confirm-modal .modal-dialog { max-width:calc(100% - 24px); margin:12px; }
.thc-confirm-body { padding:22px 20px 12px; }
.thc-confirm-footer { padding:12px 16px 18px; }
}
/* ── Edit-item modal (iframe-based product configurator) ─────── */
/* Body-scroll lock — beats our earlier `overflow:visible !important` on .do-app
so the user can't scroll the cart behind the open modal. */
body.modal-open, body.do-app.modal-open,
body.modal-open .do-content, body.modal-open .primary-content,
body.modal-open .do-main, body.modal-open .do-main-inner, body.modal-open main {
overflow:hidden !important;
}
.thc-edit-modal { z-index:1080; }
.thc-edit-modal .modal-dialog { max-width:min(1000px, calc(100vw - 32px)); margin:20px auto; }
.thc-edit-modal .modal-content { background:#131a22; border:5px solid #029df6 !important; border-radius:0 !important; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.thc-edit-modal .modal-header { padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; background:#18212c; }
.thc-edit-modal .modal-title { font-size:15px; font-weight:800; color:#eaeef2; margin:0; display:flex; align-items:center; gap:10px; }
.thc-edit-modal .modal-title i { color:#029df6; font-size:14px; }
.thc-edit-modal .close { background:transparent; border:0; font-size:24px; line-height:1; color:#96a3b4; padding:0 6px; cursor:pointer; margin-left:auto; }
.thc-edit-modal .close:hover { color:#eaeef2; }
.thc-edit-modal-body { padding:0; position:relative; background:#131a22; }
.thc-edit-modal-body iframe { display:block; width:100%; height:calc(100vh - 140px); min-height:480px; max-height:780px; border:0; background:#131a22; }
.thc-edit-modal-body iframe.thc-iframe-hidden { visibility:hidden; }
.thc-edit-modal-loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; background:#131a22; color:#96a3b4; font-weight:700; font-size:13.5px; z-index:1; }
.thc-edit-modal-loader i { color:#029df6; font-size:18px; }
.modal-backdrop.show { opacity:.55; }
@media (max-width:600px) {
.thc-edit-modal .modal-dialog { margin:6px; }
.thc-edit-modal-body iframe { height:calc(100vh - 100px); min-height:0; }
}
/* ── intl-tel-input ─────────────────────────────────────────── */
#order-standard_cart .iti { width:100%; display:block; }
/* (padding-left is set to 92px above — do not override it back to 52px,
the flag + dial code needs the room or it overlaps the placeholder) */
#order-standard_cart .iti__country-list { background:var(--card); border:1px solid var(--border); color:var(--text); box-shadow:0 16px 40px rgba(15,24,40,.18); }
#order-standard_cart .iti__country.iti__highlight { background:var(--green-dim); }
#order-standard_cart .iti__dial-code { color:var(--dim); }
/* ── Misc ───────────────────────────────────────────────────── */
#order-standard_cart .header-lined { border:0; }
#order-standard_cart hr { border-color:var(--border); }
/* ═══════════════════════════════════════════════════════════════
Domain register / transfer page (cart.php?a=add&domain=register)
Hero search, featured TLDs, pricing table, transfer/hosting CTAs.
═══════════════════════════════════════════════════════════════ */
#order-standard_cart .thc-dom-hero {
background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(2,157,246,.12) 0%,transparent 60%),
linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 45%,#0f2235 100%);
border-radius:14px;
padding:48px 32px 40px;
margin-bottom:28px;
position:relative;
overflow:hidden;
color:#fff;
}
#order-standard_cart .thc-dom-hero::before {
content:''; position:absolute; inset:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,.05)'/%3E%3C/svg%3E");
pointer-events:none;
}
#order-standard_cart .thc-dom-hero > * { position:relative; z-index:1; }
#order-standard_cart .thc-dom-hero .thc-dom-tag { display:inline-flex; align-items:center; gap:7px; background:rgba(2,157,246,.16); border:1px solid var(--green-line); color:var(--green); font-size:12px; font-weight:700; padding:5px 13px; border-radius:var(--r-pill); margin-bottom:18px; letter-spacing:.05em; text-transform:uppercase; }
#order-standard_cart .thc-dom-hero h1 { font-size:clamp(28px,3.6vw,42px); font-weight:900; line-height:1.05; letter-spacing:-.03em; color:#fff; margin:0 0 10px; max-width:760px; }
#order-standard_cart .thc-dom-hero h1 em { font-style:normal; color:var(--green); }
#order-standard_cart .thc-dom-hero .thc-dom-sub { font-size:15px; color:rgba(255,255,255,.62); line-height:1.65; margin:0 0 26px; max-width:620px; }
/* Search box inside hero */
#order-standard_cart .domain-checker-container { background:transparent; padding:0; border:0; }
#order-standard_cart .domain-checker-bg { background:transparent; padding:0; }
#order-standard_cart .thc-dom-hero .input-group { display:flex; gap:0; background:var(--card); padding:6px; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.18); max-width:760px; }
#order-standard_cart .thc-dom-hero .input-group input[type="text"],
#order-standard_cart .thc-dom-hero .input-group textarea { flex:1; border:0 !important; box-shadow:none !important; background:transparent !important; padding:12px 14px; min-height:48px; font-size:15px; color:var(--text) !important; font-weight:600; resize:none; }
#order-standard_cart .thc-dom-hero .input-group input::placeholder,
#order-standard_cart .thc-dom-hero .input-group textarea::placeholder { color:#61707f; font-weight:500; }
#order-standard_cart .thc-dom-hero .input-group-btn,
#order-standard_cart .thc-dom-hero .input-group-append { display:flex; }
#order-standard_cart .thc-dom-hero .input-group .btn-primary { background:var(--green) !important; border:0 !important; border-radius:8px !important; padding:0 28px; min-height:48px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#fff !important; box-shadow:var(--green-glow); }
#order-standard_cart .thc-dom-hero .input-group .btn-primary:hover { background:var(--green-dark) !important; transform:translateY(-1px); }
/* Domain action tabs (register / transfer) */
#order-standard_cart .thc-dom-tabs { display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
#order-standard_cart .thc-dom-tab { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.78); border-radius:var(--r-pill); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; transition:all .15s; }
#order-standard_cart .thc-dom-tab:hover { background:rgba(255,255,255,.12); color:#fff; }
#order-standard_cart .thc-dom-tab.active { background:var(--green); border-color:var(--green); color:#fff; box-shadow:var(--green-glow); }
#order-standard_cart .thc-dom-tab i { font-size:11px; }
/* Search results headline */
#order-standard_cart .primary-domain-header { font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 10px; padding-left:6px; }
#order-standard_cart .primary-domain-header i { color:var(--green); margin-right:6px; }
#order-standard_cart .domain-checker-result-headline { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); padding:18px 22px; box-shadow:0 6px 22px rgba(15,24,40,.04); }
#order-standard_cart .domain-checker-result-headline p.domain-available { color:var(--green-dark); font-weight:700; font-size:14.5px; }
#order-standard_cart .domain-checker-result-headline p.domain-unavailable,
#order-standard_cart .domain-checker-result-headline p.domain-tld-unavailable,
#order-standard_cart .domain-checker-result-headline p.domain-invalid { color:#b91c1c; font-weight:700; font-size:14.5px; }
#order-standard_cart .domain-checker-result-headline .domain-price { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--border-soft); }
#order-standard_cart .domain-checker-result-headline .domain-price .price { font-size:20px; font-weight:900; color:var(--text); }
#order-standard_cart .domain-checker-result-headline .btn-add-to-cart { background:var(--green) !important; color:#fff !important; border:0 !important; padding:10px 22px; border-radius:8px; font-weight:700; box-shadow:var(--green-glow); }
#order-standard_cart .domain-checker-result-headline .btn-add-to-cart:hover { background:var(--green-dark) !important; }
/* Spotlight TLDs */
#order-standard_cart .spotlight-tlds { margin:18px 0 8px; }
#order-standard_cart .spotlight-tlds-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
#order-standard_cart .spotlight-tld { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); padding:18px 14px; text-align:center; transition:all .18s; position:relative; overflow:hidden; }
#order-standard_cart .spotlight-tld:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(15,24,40,.10); border-color:var(--green-line); }
#order-standard_cart .spotlight-tld > div:not(.spotlight-tld-hot):not(.spotlight-tld-new):not(.spotlight-tld-sale):not(.domain-lookup-result) { font-size:18px; font-weight:900; color:var(--text); letter-spacing:-.01em; }
#order-standard_cart .spotlight-tld-hot,
#order-standard_cart .spotlight-tld-new,
#order-standard_cart .spotlight-tld-sale { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-pill); margin-bottom:8px; }
#order-standard_cart .spotlight-tld-hot { background:rgba(248,113,113,.14); color:#dc2626; }
#order-standard_cart .spotlight-tld-new { background:rgba(99,179,237,.16); color:#1d4ed8; }
#order-standard_cart .spotlight-tld-sale { background:var(--green-dim); color:var(--green-dark); }
#order-standard_cart .spotlight-tld .available.price { display:block !important; color:var(--green-dark); font-size:14px; font-weight:800; margin:6px 0; }
#order-standard_cart .spotlight-tld .btn-add-to-cart { width:100%; margin-top:6px; background:var(--green) !important; color:#fff !important; border:0 !important; padding:8px 12px; border-radius:8px; font-weight:700; font-size:12.5px; }
#order-standard_cart .spotlight-tld .btn-add-to-cart:hover { background:var(--green-dark) !important; }
/* Suggested domains list */
#order-standard_cart .suggested-domains { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); margin-top:18px; overflow:hidden; }
#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header { background:var(--head); padding:14px 20px; font-size:13px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); }
#order-standard_cart .suggested-domains .domain-suggestion { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--border-soft); }
#order-standard_cart .suggested-domains .domain-suggestion:first-child { border-top:0; }
#order-standard_cart .suggested-domains .domain-suggestion .domain { font-weight:800; color:var(--text); font-size:14.5px; }
#order-standard_cart .suggested-domains .domain-suggestion .extension { color:var(--green); font-weight:800; }
#order-standard_cart .suggested-domains .domain-suggestion .actions { margin-left:auto; display:flex; align-items:center; gap:12px; }
#order-standard_cart .suggested-domains .domain-suggestion .price { font-weight:800; color:var(--text); }
#order-standard_cart .suggested-domains .btn-add-to-cart { background:var(--green) !important; color:#fff !important; border:0 !important; padding:7px 16px; border-radius:8px; font-weight:700; font-size:12px; }
#order-standard_cart .suggested-domains .panel-footer,
#order-standard_cart .suggested-domains .card-footer { padding:12px 20px; background:var(--bg); border-top:1px solid var(--border); text-align:center; font-size:13px; }
/* Featured TLDs */
#order-standard_cart .featured-tlds-container { margin:22px 0; }
#order-standard_cart .featured-tlds-container .row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0; }
#order-standard_cart .featured-tlds-container [class*="col-"] { padding:0; flex:none; max-width:none; width:auto; }
#order-standard_cart .featured-tld { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); padding:18px; display:flex; align-items:center; gap:14px; transition:all .18s; }
#order-standard_cart .featured-tld:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(15,24,40,.10); border-color:var(--green-line); }
#order-standard_cart .featured-tld .img-container { width:54px; height:54px; flex:0 0 auto; display:grid; place-items:center; background:var(--bg); border-radius:10px; }
#order-standard_cart .featured-tld .img-container img { max-width:36px; max-height:36px; }
#order-standard_cart .featured-tld .price { font-size:14px; font-weight:800; color:var(--text); }
/* TLD category filter pills */
#order-standard_cart .domain-pricing h4 { font-size:16px; font-weight:800; color:var(--text); margin:22px 0 12px; }
#order-standard_cart .tld-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
#order-standard_cart .tld-filters .badge { background:var(--card) !important; border:1.5px solid var(--border); color:var(--muted) !important; padding:7px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; cursor:pointer; transition:all .15s; text-transform:capitalize; }
#order-standard_cart .tld-filters .badge:hover { border-color:var(--green-line); color:var(--green-dark) !important; background:var(--green-dim) !important; }
#order-standard_cart .tld-filters .badge.active { background:var(--green) !important; border-color:var(--green); color:#fff !important; box-shadow:var(--green-glow); }
/* TLD pricing table */
#order-standard_cart .domain-pricing .bg-white { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:0 6px 22px rgba(15,24,40,.04); }
#order-standard_cart .tld-pricing-header { background:linear-gradient(135deg,var(--navy),var(--navy-3)); color:#fff; padding:12px 16px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
#order-standard_cart .tld-pricing-header [class*="col-"] { padding:0; }
#order-standard_cart .tld-row { padding:14px 16px; border-top:1px solid var(--border-soft); align-items:center; }
#order-standard_cart .tld-row:nth-child(even) { background:var(--card-2); }
#order-standard_cart .tld-row strong { font-size:15px; font-weight:800; color:var(--text); }
#order-standard_cart .tld-row small { font-size:11px; color:var(--dim); }
#order-standard_cart .tld-row .col-md-8 .col-xs-4,
#order-standard_cart .tld-row .col-md-8 .col-4 { font-size:14px; font-weight:700; color:var(--text); }
#order-standard_cart .tld-sale-group { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-pill); margin-left:8px; vertical-align:middle; }
#order-standard_cart .tld-sale-group-hot { background:rgba(248,113,113,.14); color:#dc2626; }
#order-standard_cart .tld-sale-group-new { background:rgba(99,179,237,.16); color:#1d4ed8; }
#order-standard_cart .tld-sale-group-sale { background:var(--green-dim); color:var(--green-dark); }
#order-standard_cart .tld-row.no-tlds { color:var(--muted); }
/* Domain promo boxes */
#order-standard_cart .domain-promo-box { background:linear-gradient(155deg,var(--navy-3),var(--navy-2)); border-radius:var(--r-card); padding:24px; color:#fff; display:flex; flex-direction:column; gap:10px; height:100%; box-shadow:0 12px 32px rgba(15,24,40,.10); }
#order-standard_cart .domain-promo-box h3 { color:#fff; font-weight:800; letter-spacing:-.01em; margin:0; }
#order-standard_cart .domain-promo-box p { color:rgba(255,255,255,.66); margin:0; font-size:13.5px; line-height:1.6; }
#order-standard_cart .domain-promo-box .text-warning { color:var(--orange) !important; font-weight:700; }
#order-standard_cart .domain-promo-box .text-primary { color:var(--green) !important; font-weight:700; }
#order-standard_cart .domain-promo-box i.fa-4x { color:rgba(255,255,255,.18); font-size:54px; align-self:flex-start; }
#order-standard_cart .domain-promo-box .btn { align-self:flex-start; margin-top:auto; }
#order-standard_cart .domain-promo-box .btn-warning { background:var(--orange) !important; border:0 !important; color:#fff !important; padding:11px 22px; }
#order-standard_cart .domain-promo-box .btn-warning:hover { background:#ea7c2f !important; }
#order-standard_cart .domain-promo-box .btn-primary { background:var(--green) !important; padding:11px 22px; }
/* Domain configuration headings reuse sub-heading style */
/* ── Sidebar categories (hidden on the cart, kept for pricing) ──── */
#order-standard_cart .cart-sidebar { display:none; }
/* ════════════════════════════════════════════════════════════════════
Late-order fixes: sweep every residual white WHMCS default surface
discovered in-browser on the viewcart page. Each rule is scoped
under #order-standard_cart / cart-body so nothing leaks to nexus.
════════════════════════════════════════════════════════════════════ */
/* Sidebar Actions panel (Bootstrap-4 card, "Действия" collapse) */
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-sidebar-collapsed,
#order-standard_cart .cart-sidebar > .card,
#order-standard_cart .cart-sidebar-collapsed > .card,
#order-standard_cart .panel,
#order-standard_cart .card { background:var(--card) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:var(--r-card) !important; }
#order-standard_cart .panel-heading,
#order-standard_cart .card-header,
#order-standard_cart .panel-heading.card-header { background:var(--head) !important; color:var(--text) !important; border-bottom:1px solid var(--border) !important; font-weight:700; }
#order-standard_cart .panel-heading a,
#order-standard_cart .card-header a { color:var(--text) !important; }
#order-standard_cart .panel-body,
#order-standard_cart .card-body { background:var(--card) !important; color:var(--text) !important; padding:6px 0 !important; }
#order-standard_cart .list-group { background:transparent !important; border-radius:0 !important; }
#order-standard_cart .list-group-item { background:transparent !important; color:var(--text) !important; border:0 !important; border-top:1px solid var(--border-soft) !important; padding:10px 16px !important; }
#order-standard_cart .list-group-item:first-child { border-top:0 !important; }
#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item-action.active { background:rgba(2,157,246,.14) !important; color:var(--green) !important; }
#order-standard_cart .list-group-item i,
#order-standard_cart .list-group-item .fa { color:var(--green); margin-right:8px; }
#order-standard_cart .list-group-item:hover { background:rgba(2,157,246,.08) !important; }
/* Promo-code nav-tabs pill (single active tab renders as a white pill) */
#order-standard_cart .nav-tabs,
#order-standard_cart .nav.nav-tabs { border-bottom:0 !important; margin-bottom:0 !important; }
#order-standard_cart .nav-tabs .nav-link,
#order-standard_cart .nav-tabs .nav-item .nav-link { background:var(--card) !important; color:var(--muted) !important; border:1px solid var(--border) !important; border-bottom:0 !important; border-radius:var(--r-input) var(--r-input) 0 0 !important; padding:8px 16px !important; font-weight:700; font-size:12.5px; }
#order-standard_cart .nav-tabs .nav-link.active,
#order-standard_cart .nav-tabs .nav-item .nav-link.active { background:var(--card-2) !important; color:var(--green) !important; border-color:var(--border) !important; }
#order-standard_cart .tab-content { background:var(--card-2) !important; border:1px solid var(--border) !important; border-radius:0 var(--r-card) var(--r-card) var(--r-card) !important; padding:14px !important; margin-top:-1px; }
/* Buttons — btn-default (Validate Code / Update Totals / modal "No") */
#order-standard_cart .btn-default,
#order-standard_cart .btn-outline-primary,
#order-standard_cart .btn-secondary,
#order-standard_cart .btn.btn-block.btn-default { background:var(--card-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; font-weight:700; box-shadow:none !important; }
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-outline-primary:hover,
#order-standard_cart .btn-secondary:hover { background:rgba(2,157,246,.10) !important; border-color:var(--green-line) !important; color:var(--green) !important; }
/* Checkout button — was WHMCS btn-success white, force full-QGS blue treatment */
#order-standard_cart #checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart a#checkout.btn { background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%) !important; border:0 !important; color:#fff !important; font-weight:800 !important; letter-spacing:.02em; box-shadow:var(--green-glow) !important; }
#order-standard_cart #checkout.disabled,
#order-standard_cart a#checkout.disabled { background:var(--card-2) !important; color:var(--dim) !important; box-shadow:none !important; opacity:.55; cursor:not-allowed; }
#order-standard_cart .btn-primary { background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%) !important; border:0 !important; color:#fff !important; }
/* "Continue Shopping" link under checkout was rgb(34,34,34) */
#order-standard_cart .btn-continue-shopping,
#order-standard_cart .order-summary .btn-continue-shopping { color:var(--muted) !important; background:transparent !important; }
#order-standard_cart .btn-continue-shopping:hover { color:var(--green) !important; }
/* Bootstrap modals (Remove / Confirm / Choose Language / Recommendations)
────────────────────────────────────────────────────────────────────────
NO var() BELOW — ON PURPOSE. The palette custom properties are declared on
#order-standard_cart, not on :root, so they do NOT resolve for modals:
Bootstrap and WHMCS render those at the very end of , outside the
order-form wrapper (the language chooser lives in the theme's footer.tpl).
A var() that resolves to nothing is "invalid at computed-value time" and
falls back to `unset` — which for background-color means TRANSPARENT, and
for border means none. Worse, because these declarations carry !important
they also beat the parent theme's own perfectly valid rule, so the modal
ended up as bare text floating over the page.
Literals below; keep them in sync with the :scope block at the top of this
file (--card #131a22, --border rgba(255,255,255,.08), --text #eaeef2,
--muted #96a3b4, --green #029df6). */
#order-standard_cart .modal-content,
body.cart .modal-content,
body.do-app .modal-content {
background:#131a22 !important;
border:5px solid #029df6 !important; /* devpanel recipe — same as .thc-confirm-modal */
border-radius:0 !important;
color:#eaeef2 !important;
box-shadow:0 12px 40px rgba(0,0,0,.55) !important;
}
body.cart .modal-header, body.do-app .modal-header,
body.cart .modal-footer, body.do-app .modal-footer { background:#131a22 !important; border-color:rgba(255,255,255,.08) !important; color:#eaeef2 !important; }
body.cart .modal-body, body.do-app .modal-body { background:#131a22 !important; color:#eaeef2 !important; }
body.cart .modal-title, body.do-app .modal-title { color:#eaeef2 !important; }
body.cart .modal .close, body.do-app .modal .close { color:#96a3b4 !important; text-shadow:none !important; opacity:.7; }
body.cart .modal .close:hover, body.do-app .modal .close:hover { color:#eaeef2 !important; opacity:1; }
body.cart .modal-backdrop, body.do-app .modal-backdrop { background:#0b1016 !important; }
/* Alerts inside cart */
#order-standard_cart .alert { background:var(--card-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; }
#order-standard_cart .alert-warning { background:rgba(251,146,60,.10) !important; border-color:rgba(251,146,60,.28) !important; color:#fbbf24 !important; }
#order-standard_cart .alert-danger { background:rgba(239,68,68,.10) !important; border-color:rgba(239,68,68,.28) !important; color:#fca5a5 !important; }
#order-standard_cart .alert-info { background:rgba(99,179,237,.10) !important; border-color:rgba(99,179,237,.28) !important; color:#93c5fd !important; }
#order-standard_cart .alert-success { background:rgba(2,157,246,.10) !important; border-color:rgba(2,157,246,.28) !important; color:var(--green) !important; }
/* ════════════════════════════════════════════════════════════════════
Account picker (logged-in checkout) + discount sign + breadcrumb
════════════════════════════════════════════════════════════════════ */
/* Discount is a deduction — show the minus. Done in CSS rather than in the
template because CartTotalUpdater.js rewrites #discount over AJAX and
would wipe a hardcoded "-". */
#order-standard_cart #discount::before,
#order-standard_cart .os-promo b::before { content:"-"; }
/* Logged-in "Choose account" radio cards — WHMCS renders these white */
#order-standard_cart .account-select-container div.account {
background:#232a39;
border:0;
border-radius:5px;
padding:10px;
margin-bottom:10px;
color:var(--text);
}
#order-standard_cart .account-select-container div.account.active { background:#18212d; }
#order-standard_cart .account-select-container div.account .address,
#order-standard_cart .account-select-container div.account label { color:var(--text); }
#order-standard_cart .account-select-container div.account .address strong { color:var(--text); font-weight:700; }
#order-standard_cart .account-select-container div.account .small,
#order-standard_cart .account-select-container div.account .address .small { color:var(--muted); }
#order-standard_cart .account-select-container div.account .label-info { background:var(--green) !important; color:#fff !important; }
#order-standard_cart .account-select-container div.account .label-default { background:var(--card-3, #202b38) !important; color:var(--muted) !important; }
#order-standard_cart .border-bottom { border-bottom:1px solid #232a39 !important; }
/* Breadcrumb strip ("Shopping Cart") — hidden for guests *and* logged-in
users; the logged-in layout uses .do-breadcrumb, not .master-breadcrumb. */
body.cart .master-breadcrumb,
body.cart nav.master-breadcrumb,
body.cart .do-breadcrumb,
body.cart nav.do-breadcrumb { display:none !important; }
/* WHMCS uses .w-hidden to hide the "Already registered?" / "Create account"
toggles once the customer type is known (and always when logged in). The
button styling above sets display:inline-flex !important, which was
overriding that — hence the button showing for logged-in users. Keep
.w-hidden authoritative *for the buttons only*.
IMPORTANT: this must NOT be a blanket `.w-hidden { display:none !important }`.
WHMCS also ships .w-hidden on containers it reveals with jQuery .slideDown()
/ .fadeIn() — #containerExistingUserSignin (the "Already registered?" login
form), #containerNewUserSignup, #existingLoginMessage, … Those animations set
an *inline* display, which loses against !important, so a blanket rule makes
the login form impossible to open: the button fades out and nothing appears. */
#order-standard_cart .btn.w-hidden,
#order-standard_cart .btn-info.w-hidden,
#order-standard_cart .btn-warning.w-hidden,
body.cart .btn.w-hidden { display: none !important; }
/* ── Destructive cart actions are red, always ────────────────────────
Defined last on purpose: several blanket .btn-link rules above use
!important at the same specificity, and at a tie the later rule wins. */
/* Specificity note: the blanket rules these have to beat are
`#order-standard_cart .thc-cart-foot .btn-link` (1,2,0) and
`#order-standard_cart .view-cart-items .item-title .btn-link` (1,3,0),
both !important. Hence the ID for Empty Cart (2,0,0) and the extra
ancestors for the remove-× — a plain (1,1,0) selector loses. */
#order-standard_cart #btnEmptyCart,
#order-standard_cart .thc-cart-foot .thc-empty-cart,
#order-standard_cart .view-cart-items .item-title .btn-remove-from-cart,
#order-standard_cart .view-cart-items .item .btn-remove-from-cart,
#order-standard_cart .secondary-cart-sidebar .btn-remove-from-cart,
#order-standard_cart .btn.btn-link.btn-remove-from-cart {
color: var(--red) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#order-standard_cart #btnEmptyCart i,
#order-standard_cart .thc-cart-foot .thc-empty-cart i,
#order-standard_cart .view-cart-items .item-title .btn-remove-from-cart i,
#order-standard_cart .view-cart-items .item .btn-remove-from-cart i,
#order-standard_cart .secondary-cart-sidebar .btn-remove-from-cart i,
#order-standard_cart .btn.btn-link.btn-remove-from-cart i { color: var(--red) !important; }
#order-standard_cart #btnEmptyCart:hover,
#order-standard_cart .thc-cart-foot .thc-empty-cart:hover,
#order-standard_cart .view-cart-items .item-title .btn-remove-from-cart:hover,
#order-standard_cart .view-cart-items .item .btn-remove-from-cart:hover,
#order-standard_cart .secondary-cart-sidebar .btn-remove-from-cart:hover,
#order-standard_cart .btn.btn-link.btn-remove-from-cart:hover {
color: #f87171 !important;
background: transparent !important;
}
#order-standard_cart #btnEmptyCart:hover i,
#order-standard_cart .thc-cart-foot .thc-empty-cart:hover i,
#order-standard_cart .view-cart-items .item-title .btn-remove-from-cart:hover i,
#order-standard_cart .view-cart-items .item .btn-remove-from-cart:hover i,
#order-standard_cart .secondary-cart-sidebar .btn-remove-from-cart:hover i,
#order-standard_cart .btn.btn-link.btn-remove-from-cart:hover i { color: #f87171 !important; }
/* ── Re-parented modals: no cart-scoped variables allowed ────────────
checkout.tpl's JS moves .thc-confirm-modal / .thc-edit-modal (and the
Bootstrap modals in general) out to so their