/* ==========================================================================
   ElypseCloud — Order Form (Standard Cart)
   Same design tokens as the client area theme. This file only restyles
   colors/typography/spacing on top of WHMCS's own structural CSS
   (css/style.css) — no layout logic is touched, so the checkout flow's
   markup and JS keep working exactly as shipped by WHMCS.
   ========================================================================== */

@font-face{
  font-family:"Inter";
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  src:url(../fonts/inter-variable.woff2) format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  src:url(../fonts/manrope-variable.woff2) format("woff2");
}

:root{
  --ec-bg:#f5f7fa;
  --ec-card:#ffffff;
  --ec-border:rgba(15,23,42,.09);
  --ec-border-strong:rgba(15,23,42,.16);
  --ec-blue:#2e5f9e;
  --ec-blue-dark:#1c3c63;
  --ec-blue-light:#3b6fb0;
  --ec-blue-tint:rgba(46,95,158,.09);
  --ec-text:#182230;
  --ec-text-muted:#5b6b80;
  --ec-text-faint:#8695a8;
  --ec-green:#1a8a54;
  --ec-orange:#b35900;
  --ec-red:#c4342a;
  --ec-radius-lg:16px;
  --ec-radius-md:10px;
  --ec-radius-sm:7px;
  --ec-font-display:"Manrope",sans-serif;
  --ec-font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ==========================================================================
   Dark theme — same values as the client area's tokens (css/custom.css), so
   both themes share one palette. The client area's own dark block also
   reaches order-form pages (identical --ec-* names, higher specificity than
   this file's plain :root), but it's mirrored here explicitly so this file
   stays self-contained instead of quietly depending on another stylesheet's
   cascade order.
   Most component rules above already read var(--ec-*) and adapt on their
   own — this only needs the handful of selectors that used a hardcoded
   rgba(15,23,42,X) wash (a dark tint meant for a light card) instead of a
   token; those go nearly invisible on a dark card, so they're inverted to a
   white-based tint at roughly the same visual weight. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ec-bg:#0f1720;
  --ec-card:#151f2b;
  --ec-border:rgba(255,255,255,.10);
  --ec-border-strong:rgba(255,255,255,.18);
  --ec-blue:#4d8bd8;
  --ec-blue-dark:#3b6fb0;
  --ec-blue-light:#7ab0ea;
  --ec-blue-tint:rgba(77,139,216,.16);
  --ec-text:#e8eef6;
  --ec-text-muted:#a3b2c4;
  --ec-text-faint:#7a8ba0;
  --ec-green:#3fbe83;
  --ec-orange:#e0913c;
  --ec-red:#f0736a;
}
:root[data-theme="dark"] #order-standard_cart .products .product header,
:root[data-theme="dark"] #order-standard_cart .well,
:root[data-theme="dark"] #order-standard_cart .domain-bulk-domain-well,
:root[data-theme="dark"] #order-standard_cart .domain-bulk-options-box,
:root[data-theme="dark"] #order-standard_cart .ec-choice-card,
:root[data-theme="dark"] #order-standard_cart table th{background-color:rgba(255,255,255,.04);}
:root[data-theme="dark"] #order-standard_cart .btn-default:hover,
:root[data-theme="dark"] #order-standard_cart .btn-default:focus,
:root[data-theme="dark"] #order-standard_cart .form-control[readonly],
:root[data-theme="dark"] #order-standard_cart .form-control[disabled],
:root[data-theme="dark"] #order-standard_cart .field[readonly],
:root[data-theme="dark"] #order-standard_cart .field[disabled],
:root[data-theme="dark"] #order-standard_cart .ec-radio-pill{background-color:rgba(255,255,255,.06);}
:root[data-theme="dark"] #order-standard_cart .ec-step-dot{background-color:rgba(255,255,255,.08);}
:root[data-theme="dark"] #order-standard_cart .ec-shop-desc .list-unstyled>li .badge,
:root[data-theme="dark"] #order-standard_cart .ec-shop-desc .list-unstyled>li .label{background-color:rgba(255,255,255,.08) !important;}

#order-standard_cart{
  font-family:var(--ec-font-body);
  color:var(--ec-text);
  font-size:14px;
}
#order-standard_cart h1,#order-standard_cart h2,#order-standard_cart h3,#order-standard_cart h4{
  font-family:var(--ec-font-display);color:var(--ec-text);font-weight:800;
}
#order-standard_cart a{color:var(--ec-blue-light);}
#order-standard_cart a:hover{color:var(--ec-blue-dark);}
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc{color:var(--ec-text-muted);font-weight:500;}

/* section titles ("header-lined" underlines a page/section heading) */
#order-standard_cart .header-lined{border-bottom:1px solid var(--ec-border);padding-bottom:14px;margin-bottom:22px;}
#order-standard_cart .header-lined h1{font-size:1.5em;margin:0;}
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless{color:var(--ec-text-muted);}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span{background:var(--ec-bg);color:var(--ec-text-muted);}
#order-standard_cart .sub-heading-borderless{border-top-color:var(--ec-border);}

/* category sidebar */
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3{color:var(--ec-text);font-family:var(--ec-font-display);}
#order-standard_cart .cart-sidebar .list-group-item{
  border-color:var(--ec-border);color:var(--ec-text-muted);font-weight:500;
}
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item:hover{
  background:var(--ec-blue-tint);color:var(--ec-blue-dark);
}
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .sidebar-collapsed .card{border-radius:var(--ec-radius-lg);}

/* product boxes */
#order-standard_cart .products .product{
  background:var(--ec-card);border:1px solid var(--ec-border);
  border-radius:var(--ec-radius-lg);box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:.15s;overflow:hidden;
}
#order-standard_cart .products .product:hover{border-color:var(--ec-border-strong);box-shadow:0 8px 20px rgba(15,23,42,.08);}
#order-standard_cart .products .product header{background:rgba(15,23,42,.02);border-bottom:1px solid var(--ec-border);}
#order-standard_cart .products .product header span{color:var(--ec-text);font-family:var(--ec-font-display);font-weight:700;}
#order-standard_cart .products .product header .qty{color:var(--ec-text-faint);}
#order-standard_cart .products .product div.product-desc{color:var(--ec-text-muted);}
#order-standard_cart .products .product span.feature-value{color:var(--ec-blue-dark);}
#order-standard_cart .products .product div.product-pricing span.price{
  font-family:var(--ec-font-display);color:var(--ec-text);font-weight:800;
}
#order-standard_cart .products .product .btn-order-now{
  background:var(--ec-blue);border-color:var(--ec-blue);border-radius:var(--ec-radius-sm);font-weight:600;
}
#order-standard_cart .products .product .btn-order-now:hover{background:var(--ec-blue-dark);border-color:var(--ec-blue-dark);}

/* ---------- base button system ----------
   WHMCS's stock cart markup uses plain .btn/.btn-default/.btn-primary/.btn-link
   all over (edit, remove, update qty, apply promo, continue shopping, modal
   confirm/cancel...) but only a handful of bespoke buttons (checkout, order-
   now) were ever restyled — everything else fell back to WHMCS's unstyled
   defaults, which is what reads as low-contrast next to the rest of the page. */
#order-standard_cart .btn{border-radius:var(--ec-radius-sm);font-weight:600;}
#order-standard_cart .btn-primary{background-color:var(--ec-blue);border-color:var(--ec-blue);color:#fff;}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-primary:focus{background-color:var(--ec-blue-dark);border-color:var(--ec-blue-dark);color:#fff;}
#order-standard_cart .btn-default{background-color:var(--ec-card);border-color:var(--ec-border-strong);color:var(--ec-text);}
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-default:focus{background-color:rgba(15,23,42,.03);border-color:var(--ec-border-strong);color:var(--ec-text);}
#order-standard_cart .btn-link{color:var(--ec-blue-light);font-weight:600;}
#order-standard_cart .btn-link:hover,
#order-standard_cart .btn-link:focus{color:var(--ec-blue-dark);text-decoration:none;}
#order-standard_cart .btn:focus,
#order-standard_cart .btn.focus{outline:none;box-shadow:0 0 0 3px rgba(46,95,158,.15);}
#order-standard_cart .btn.disabled,
#order-standard_cart .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;}

/* "remove from cart" buttons: icon-only, discreet by default, red on hover.
   Not scoped to one section — this same class is reused for every product/
   addon/domain/renewal/upgrade row in the cart. */
#order-standard_cart .btn-remove-from-cart{
  padding:6px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  color:var(--ec-text-faint);background:transparent;border:none;
}
#order-standard_cart .btn-remove-from-cart:hover,
#order-standard_cart .btn-remove-from-cart:focus{background:rgba(196,52,42,.08);color:var(--ec-red);}

/* form fields (.field / .prepend-icon is WHMCS's own icon-prefixed input pattern) */
#order-standard_cart .field,
#order-standard_cart .form-control{
  background-color:var(--ec-card);border:1px solid var(--ec-border-strong);
  color:var(--ec-text);border-radius:var(--ec-radius-sm);
}
#order-standard_cart .field:focus,
#order-standard_cart .form-control:focus{
  border-color:var(--ec-blue-light);box-shadow:0 0 0 3px rgba(46,95,158,.15);
}
#order-standard_cart .field-icon i{color:var(--ec-text-faint);}
#order-standard_cart .field-help-text{color:var(--ec-text-faint);}
#order-standard_cart .field-error-msg{color:var(--ec-red);}
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly]{background-color:rgba(15,23,42,.03);}

/* cart / checkout totals + line items */
#order-standard_cart .cart-body .card,
#order-standard_cart .cart-body .panel{
  border-radius:var(--ec-radius-lg);border-color:var(--ec-border);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart .bordered-totals,
#order-standard_cart .order-summary{border-color:var(--ec-border);}
#order-standard_cart .item{border-bottom:1px solid var(--ec-border);}
#order-standard_cart .item-domain,#order-standard_cart .item-group{color:var(--ec-text-faint);}
#order-standard_cart .item-price,#order-standard_cart .cost,#order-standard_cart .amt{
  font-family:var(--ec-font-display);font-weight:700;color:var(--ec-text);
}
#order-standard_cart .empty-cart{color:var(--ec-text-muted);}
#order-standard_cart .empty-cart .fa-3x{color:var(--ec-border-strong);}

/* express checkout / payment methods */
#order-standard_cart .express-checkout-buttons .separator{color:var(--ec-text-faint);}
#order-standard_cart .express-checkout-buttons .separator::before,
#order-standard_cart .express-checkout-buttons .separator::after{background:var(--ec-border);}
#order-standard_cart .account-select-container div.account{
  border-color:var(--ec-border);border-radius:var(--ec-radius-md);
}
#order-standard_cart .account-select-container div.account.active{
  border-color:var(--ec-blue);background:var(--ec-blue-tint);
}
#order-standard_cart .existing-cc-grid .card{border-radius:var(--ec-radius-md);border-color:var(--ec-border);}
#order-standard_cart .checkout-security-msg{color:var(--ec-text-faint);}

/* domain checker */
#order-standard_cart .domain-checker-bg{background:var(--ec-blue-dark);}
#order-standard_cart .domain-checker-container .field,
#order-standard_cart .domain-checker-container .form-control{border-radius:var(--ec-radius-sm) 0 0 var(--ec-radius-sm);}
#order-standard_cart .domain-checker-result-headline{color:var(--ec-text);}
#order-standard_cart .domain-checker-available{color:var(--ec-green);}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid{color:var(--ec-red);}

/* TLD spotlight tiles */
#order-standard_cart .spotlight-tld{
  border:1px solid var(--ec-border);border-radius:var(--ec-radius-md);background:var(--ec-card);
}
#order-standard_cart .spotlight-tld-hot,
#order-standard_cart .spotlight-tld-sale{color:var(--ec-orange);}
#order-standard_cart .spotlight-tld-new{color:var(--ec-green);}

/* misc */
#order-standard_cart .well,
#order-standard_cart .domain-bulk-domain-well,
#order-standard_cart .domain-bulk-options-box{
  background:rgba(15,23,42,.02);border:1px solid var(--ec-border);border-radius:var(--ec-radius-md);
}
#order-standard_cart .mc-promo{border-radius:var(--ec-radius-lg);border-color:var(--ec-border);}

/* categories sidebar removed — content takes the full width */
#order-standard_cart .ec-cart-body-full{width:100% !important;float:none !important;}

/* ---------- progress steps ---------- */
#order-standard_cart .ec-steps{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0;margin:0 0 26px;padding:16px;background:var(--ec-card);border:1px solid var(--ec-border);
  border-radius:var(--ec-radius-lg);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart .ec-step{
  display:flex;align-items:center;gap:9px;font-size:.85em;font-weight:600;color:var(--ec-text-faint);
}
#order-standard_cart .ec-step-dot{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8em;font-weight:700;background:rgba(15,23,42,.05);color:var(--ec-text-faint);flex-shrink:0;
}
#order-standard_cart .ec-step.done{color:var(--ec-text-muted);}
#order-standard_cart .ec-step.done .ec-step-dot{background:var(--ec-green);color:#fff;}
#order-standard_cart .ec-step.done .ec-step-dot .icon{width:12px;height:12px;}
#order-standard_cart .ec-step.active{color:var(--ec-text);}
#order-standard_cart .ec-step.active .ec-step-dot{background:var(--ec-blue);color:#fff;}
#order-standard_cart .ec-step-line{width:44px;height:1.5px;background:var(--ec-border-strong);margin:0 14px;}

/* ---------- configure product ---------- */
#order-standard_cart .ec-config-header{
  background:var(--ec-card);border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:22px 24px;margin-bottom:20px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart .ec-config-header h1{font-size:1.3em;margin:0 0 4px;}
#order-standard_cart .ec-config-header p{color:var(--ec-text-muted);margin:0;}

/* Product description spec list — admin-authored HTML (<ul class="list-unstyled"><li
   class="d-flex justify-content-between">). This targets the classes it always uses,
   so it works for every product/offer that follows the same pattern, with no per-
   product code. */
#order-standard_cart .ec-config-desc{margin-top:16px;contain:layout paint;color:var(--ec-text-muted);line-height:1.65;font-size:.92em;}

/* Generic typography for whatever an admin actually typed into the
   description field — a plain paragraph, a basic bullet/numbered list, bold
   text, links — so descriptions look polished even when they don't follow
   the specific spec-list markup pattern targeted below. */
#order-standard_cart .ec-config-desc p{margin:0 0 12px;}
#order-standard_cart .ec-config-desc p:last-child{margin-bottom:0;}
#order-standard_cart .ec-config-desc strong,
#order-standard_cart .ec-config-desc b{color:var(--ec-text);font-weight:700;}
#order-standard_cart .ec-config-desc a{color:var(--ec-blue-light);font-weight:600;}
#order-standard_cart .ec-config-desc a:hover{color:var(--ec-blue-dark);}
#order-standard_cart .ec-config-desc ul:not(.list-unstyled){margin:0 0 12px;padding-left:0;list-style:none;}
#order-standard_cart .ec-config-desc ul:not(.list-unstyled) li{position:relative;padding-left:20px;margin-bottom:7px;}
#order-standard_cart .ec-config-desc ul:not(.list-unstyled) li::before{
  content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--ec-blue);
}
#order-standard_cart .ec-config-desc ol:not(.list-unstyled){margin:0 0 12px;padding-left:0;list-style:none;counter-reset:ecdesc;}
#order-standard_cart .ec-config-desc ol:not(.list-unstyled) li{position:relative;padding-left:24px;margin-bottom:7px;}
#order-standard_cart .ec-config-desc ol:not(.list-unstyled) li::before{
  content:counter(ecdesc) ".";counter-increment:ecdesc;
  position:absolute;left:0;top:0;font-weight:700;color:var(--ec-blue);font-size:.95em;
}
#order-standard_cart .ec-config-desc .list-unstyled{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:10px 16px !important;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
@media (max-width:1000px){#order-standard_cart .ec-config-desc .list-unstyled{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:600px){#order-standard_cart .ec-config-desc .list-unstyled{grid-template-columns:minmax(0,1fr) !important;}}
/* Admins paste multi-line HTML into the description field, and WHMCS's editor
   turns the blank lines between each <li> into stray <br>/text nodes that land
   as direct children of the <ul>. On a grid those become invisible extra cells
   that shove every real item sideways (the checkerboard bug) — so anything
   that isn't an <li> is dropped from layout entirely. */
#order-standard_cart .ec-config-desc .list-unstyled > *:not(li){display:none !important;}
#order-standard_cart .ec-config-desc .list-unstyled > li br{display:none !important;}
#order-standard_cart .ec-config-desc .list-unstyled > li{
  display:flex !important;align-items:center;justify-content:space-between !important;
  min-width:0 !important;
  gap:10px;background:var(--ec-card) !important;border:1px solid var(--ec-border) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  border-radius:var(--ec-radius-md) !important;padding:11px 14px !important;margin:0 !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li .text-primary,
#order-standard_cart .ec-config-desc .list-unstyled > li .text-success,
#order-standard_cart .ec-config-desc .list-unstyled > li [class*="text-"]{
  display:flex !important;align-items:center;gap:9px;flex-shrink:0;
  color:var(--ec-text) !important;font-size:.85em;font-weight:600 !important;
  white-space:nowrap;
}
/* Font Awesome glyphs don't render in the order-form context (no icon font
   loaded here) — swap each known spec icon for a real SVG (the exact same
   shapes as the site's icon sprite, baked in as data-URIs since a CSS
   background-image can't reference a <symbol> by id) via background-image,
   keyed off the specific fa-* class the admin's description HTML uses. This
   is generic across every product: any li following the pattern gets an
   icon chip automatically, defaulting to a neutral dot for unmapped classes.
   Colors are hardcoded to match --ec-blue/--ec-green — custom properties
   aren't readable from inside a data-URI's own SVG markup. */
#order-standard_cart .ec-config-desc .list-unstyled > li i.fas,
#order-standard_cart .ec-config-desc .list-unstyled > li i.far{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;border-radius:8px;
  background-color:var(--ec-blue-tint);
  background-repeat:no-repeat !important;background-position:center !important;background-size:16px !important;
  font-size:0;line-height:1;margin:0 !important;color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%232e5f9e'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-microchip{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5h3l2-5 4 9 2-6h3'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-memory,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-server{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3' width='14' height='6' rx='1.4' fill='none' stroke='%232e5f9e' stroke-width='1.6'/%3E%3Crect x='3' y='11' width='14' height='6' rx='1.4' fill='none' stroke='%232e5f9e' stroke-width='1.6'/%3E%3Ccircle cx='6.2' cy='6' r='.9' fill='%232e5f9e'/%3E%3Ccircle cx='6.2' cy='14' r='.9' fill='%232e5f9e'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-hdd,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-database{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.8 17 6.5v7L10 17.2 3 13.5v-7Z'/%3E%3Cpath d='M3 6.5 10 10l7-3.5M10 10v7.2'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-network-wired,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-wifi,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-globe,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-globe-americas{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M3 10h14M10 3c2.2 2 2.2 12 0 14M10 3c-2.2 2-2.2 12 0 14'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-map-marker-alt{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 17.5S15.5 12.4 15.5 8a5.5 5.5 0 0 0-11 0c0 4.4 5.5 9.5 5.5 9.5Z'/%3E%3Ccircle cx='10' cy='8' r='2'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-shield-alt{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 16 5v5c0 4.2-2.7 6.6-6 8-3.3-1.4-6-3.8-6-8V5Z'/%3E%3Cpath d='m7.3 10 1.9 1.9L13 8'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-lock{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6'%3E%3Crect x='4.5' y='9' width='11' height='7.5' rx='1.6'/%3E%3Cpath d='M6.5 9V6.5a3.5 3.5 0 0 1 7 0V9'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-check,
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-check-circle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-bolt{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11 2.5 4.5 11h4.2L8 17.5 15.5 9h-4.2L11 2.5Z' fill='%232e5f9e'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li i.fa-cloud{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232e5f9e' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6.5 14.5a3.3 3.3 0 0 1-.5-6.56 4 4 0 0 1 7.74-1.2A3.3 3.3 0 0 1 13.5 14.5Z'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li .text-success i{
  background-color:rgba(26,138,84,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231a8a54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") !important;
}
#order-standard_cart .ec-config-desc .list-unstyled > li .badge{
  background:transparent !important;border:none !important;
  color:var(--ec-text) !important;font-weight:700 !important;
  font-size:.9em !important;padding:0 !important;
  flex:1 1 auto;min-width:0;text-align:right;white-space:normal;
  overflow-wrap:break-word;
}
#order-standard_cart .ec-config-desc .list-unstyled > li .badge-success{color:var(--ec-green) !important;}
#order-standard_cart .ec-config-desc .list-unstyled > li .badge i{
  width:auto;height:auto;background:none !important;color:inherit !important;
  border-radius:0;font-size:1em;margin-right:4px !important;
}
#order-standard_cart .ec-section-label{
  font-size:.72em;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ec-text-faint);margin:22px 2px 10px;
}
#order-standard_cart .ec-config-card{
  background:var(--ec-card);border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:20px 22px;margin-bottom:6px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}

#order-standard_cart .ec-option-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px 28px !important;
  background:none !important;border:none !important;padding:4px 2px !important;
}
@media (max-width:1100px){#order-standard_cart .ec-option-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media (max-width:600px){#order-standard_cart .ec-option-grid{grid-template-columns:1fr !important;}}
#order-standard_cart .ec-option-card{
  display:flex !important;gap:13px;align-items:center;
  background:var(--ec-card) !important;border:1px solid var(--ec-border) !important;
  border-radius:var(--ec-radius-md) !important;padding:14px 16px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,box-shadow .15s;
}
#order-standard_cart .ec-option-card:hover,
#order-standard_cart .ec-option-card:focus-within{
  border-color:var(--ec-border-strong) !important;box-shadow:0 4px 12px rgba(15,23,42,.06);
}
#order-standard_cart .ec-option-card-full{grid-column:1/-1 !important;}
#order-standard_cart .ec-option-group-label{
  grid-column:1/-1;font-size:.72em;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ec-text-faint);margin:14px 2px 0;
}
#order-standard_cart .ec-option-group-label:first-child{margin-top:0;}
#order-standard_cart .ec-option-icon{
  width:38px;height:38px;min-width:38px;border-radius:10px;flex-shrink:0;
  background:var(--ec-blue-tint) !important;color:var(--ec-blue) !important;
  display:flex !important;align-items:center;justify-content:center;
}
#order-standard_cart .ec-option-icon .icon{width:18px;height:18px;}
#order-standard_cart .ec-option-body{flex:1;min-width:0;display:flex;flex-direction:column-reverse;}
#order-standard_cart .ec-option-body label{
  display:block !important;font-size:.85em !important;font-weight:400 !important;
  text-transform:none !important;letter-spacing:0 !important;
  color:var(--ec-text-muted) !important;margin:2px 0 0 !important;
}
#order-standard_cart .ec-option-body select.form-control,
#order-standard_cart .ec-option-body input.form-control{
  -webkit-appearance:none;appearance:none;
  background:none !important;border:none !important;box-shadow:none !important;
  padding:0 !important;height:auto !important;line-height:1.3 !important;
  font-size:1.15em !important;font-weight:700 !important;color:var(--ec-text) !important;
  border-radius:0 !important;
}
#order-standard_cart .ec-option-body select.form-control:focus,
#order-standard_cart .ec-option-body input.form-control:focus{box-shadow:none !important;}
#order-standard_cart .ec-option-radios{display:flex;flex-wrap:wrap;gap:6px;}
#order-standard_cart .ec-radio-pill{
  position:relative;display:inline-flex;align-items:center;background:rgba(15,23,42,.03);
  border:1px solid var(--ec-border-strong);border-radius:999px;padding:7px 14px;
  font-size:.83em;font-weight:500;color:var(--ec-text-muted);cursor:pointer;margin:0;
}
#order-standard_cart .ec-radio-pill input{position:absolute;opacity:0;width:0;height:0;}
#order-standard_cart .ec-toggle-label{
  display:flex;align-items:center;gap:8px;font-size:.9em;font-weight:600;color:var(--ec-text);margin:0;
}
#order-standard_cart .ec-toggle-label input{accent-color:var(--ec-green);width:16px;height:16px;}

/* ---------- server config fields (hostname / root password / NS1 / NS2) ----------
   Unlike .ec-option-card (a spec-sheet style for picking from a set of values,
   deliberately borderless), these are free-text fields the customer types
   into — they keep a real, visible input box so they still read as fillable. */
#order-standard_cart .ec-field-grid{
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:18px 20px !important;
}
@media (max-width:700px){#order-standard_cart .ec-field-grid{grid-template-columns:1fr !important;}}
#order-standard_cart .ec-field-card{display:flex;gap:13px;align-items:flex-start;}
#order-standard_cart .ec-field-icon{
  width:38px;height:38px;min-width:38px;border-radius:10px;flex-shrink:0;margin-top:1px;
  background:var(--ec-blue-tint);color:var(--ec-blue);
  display:flex;align-items:center;justify-content:center;
}
#order-standard_cart .ec-field-icon .icon{width:18px;height:18px;}
#order-standard_cart .ec-field-body{flex:1;min-width:0;}
#order-standard_cart .ec-field-body label{
  display:block;font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ec-text-faint);margin-bottom:6px;
}
#order-standard_cart .ec-field-body .form-control{background:var(--ec-card);}
#order-standard_cart .ec-field-body .field-help-text{display:block;margin-top:5px;font-size:.78em;}

/* selected-state highlight, shared by billing-cycle pills and config-option
   radio pills — pure CSS, no JS needed to track which one is checked */
#order-standard_cart .ec-radio-pill:has(input:checked){
  background:var(--ec-blue-tint);border-color:var(--ec-blue);color:var(--ec-blue-dark);
}
#order-standard_cart .ec-radio-pill:has(input:focus-visible){outline:2px solid var(--ec-blue-light);outline-offset:2px;}

/* choice grid: for options with more than 3 choices or long labels (OS lists,
   one-click app "recipes"...) where pills wrapping one-per-line looks broken.
   A fixed 2-column grid keeps cards compact and even-height regardless of
   label length or count. */
#order-standard_cart .ec-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;}
@media (max-width:480px){#order-standard_cart .ec-choice-grid{grid-template-columns:1fr;}}
#order-standard_cart .ec-choice-card{
  position:relative;display:flex;align-items:center;gap:10px;
  background:rgba(15,23,42,.02);border:1.5px solid var(--ec-border-strong);border-radius:var(--ec-radius-sm);
  padding:10px 30px 10px 12px;font-size:.85em;font-weight:500;color:var(--ec-text-muted);
  cursor:pointer;line-height:1.3;transition:.15s;
}
#order-standard_cart .ec-choice-card input{position:absolute;opacity:0;width:0;height:0;}
#order-standard_cart .ec-choice-icon{width:19px;height:19px;flex-shrink:0;color:var(--ec-text-faint);transition:color .15s;}
#order-standard_cart .ec-choice-card:hover{border-color:var(--ec-blue);}
#order-standard_cart .ec-choice-card:has(input:checked){
  background:var(--ec-blue-tint);border-color:var(--ec-blue);color:var(--ec-blue-dark);font-weight:700;
}
#order-standard_cart .ec-choice-card:has(input:checked) .ec-choice-icon{color:var(--ec-blue);}
#order-standard_cart .ec-choice-card:has(input:checked)::after{
  content:"";position:absolute;top:50%;right:10px;width:16px;height:16px;border-radius:50%;
  transform:translateY(-50%);background-color:var(--ec-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  background-position:center;background-repeat:no-repeat;background-size:10px;
}
#order-standard_cart .ec-choice-card:has(input:focus-visible){outline:2px solid var(--ec-blue-light);outline-offset:2px;}

/* billing-cycle picker: equal-width grid cards — a flex-wrap row made every
   pill a different width depending on its price string's length, which
   looked ragged with a mix of short (monthly) and long (semiannually) labels. */
#order-standard_cart .ec-cycle-pills{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:6px;
}
#order-standard_cart .ec-cycle-pill{
  position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--ec-card);border:1.5px solid var(--ec-border-strong);border-radius:var(--ec-radius-md);
  padding:12px 14px;font-family:var(--ec-font-display);font-weight:700;font-size:.88em;
  color:var(--ec-text-muted);transition:.15s;
}
#order-standard_cart .ec-cycle-pill:hover{border-color:var(--ec-blue);color:var(--ec-blue-dark);}
#order-standard_cart .ec-cycle-pill input{position:absolute;opacity:0;width:0;height:0;}
#order-standard_cart .ec-cycle-pill:has(input:checked){background:var(--ec-blue);border-color:var(--ec-blue);color:#fff;}
#order-standard_cart .ec-cycle-pill:has(input:focus-visible){outline:2px solid var(--ec-blue-light);outline-offset:2px;}

/* type-1 config options with too many choices for pills keep a native
   <select>, but get a visible chevron + hover/focus affordance instead of
   the invisible borderless text it had before (arrow color hardcoded to
   match --ec-text-faint — custom properties can't be read inside a data-URI) */
#order-standard_cart .ec-option-body select.form-control{
  padding-right:20px !important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238695a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right center !important;background-size:14px !important;
  border-bottom:1.5px dashed var(--ec-border-strong) !important;
}
#order-standard_cart .ec-option-body select.form-control:hover{border-bottom-color:var(--ec-blue) !important;color:var(--ec-blue-dark) !important;}
#order-standard_cart .ec-option-body select.form-control:focus{border-bottom:1.5px solid var(--ec-blue) !important;}

/* ---------- order summary sidebar ---------- */
/* #orderSummary is WHMCS's own wrapper around .ec-summary-card — it carries a
   stock light background/border of its own that we never touched, so even
   with .ec-summary-card correctly dark, its wrapper still showed through as
   a light seam around it. Strip its own chrome so only the card is visible. */
#order-standard_cart #orderSummary,
#order-standard_cart .secondary-cart-sidebar{background:transparent !important;border:none !important;box-shadow:none !important;}
#order-standard_cart .ec-summary-card{
  /* !important: this card is the one thing on the page that stayed stock-white
     even after the wrapper/everything else around it went dark and the CSS
     cache-bust confirmed fresh — WHMCS's own recalctotals() AJAX refresh
     likely re-renders this fragment with its own inline/stock background,
     which a plain rule can't outrank. */
  background:var(--ec-card) !important;color:var(--ec-text);
  border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:22px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);position:relative;
}
#order-standard_cart .ec-summary-card h2{font-size:1.05em;margin:0 0 14px;}
#order-standard_cart .ec-summary-cta{border-radius:var(--ec-radius-sm);font-weight:600;}
#order-standard_cart #orderSummaryLoader{position:absolute;top:20px;right:20px;color:var(--ec-blue);}
#order-standard_cart .product-name{display:block;font-family:var(--ec-font-display);font-weight:700;color:var(--ec-text);font-size:1.02em;}
#order-standard_cart .product-group{
  display:block;color:var(--ec-text-faint);font-size:.8em;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ec-border);
}
#order-standard_cart .ec-trust-badge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px 0 0;color:var(--ec-text-faint);font-size:.78em;font-weight:600;
}
#order-standard_cart .ec-trust-badge .icon{width:12px;height:12px;}

#order-standard_cart .ec-promo-disclosure{margin-top:16px;text-align:center;}
#order-standard_cart .ec-promo-disclosure summary{
  cursor:pointer;font-size:.83em;font-weight:600;color:var(--ec-blue-light);list-style:none;
}
#order-standard_cart .ec-promo-disclosure summary::-webkit-details-marker{display:none;}
#order-standard_cart .ec-promo-disclosure summary:hover{color:var(--ec-blue-dark);}
#order-standard_cart .ec-promo-disclosure[open] summary{margin-bottom:10px;}
#order-standard_cart .ec-promo-form{display:flex;gap:8px;text-align:left;}
#order-standard_cart .ec-promo-form input{flex:1;min-width:0;}
#order-standard_cart .ec-promo-form button{flex-shrink:0;}
/* #producttotal is the AJAX-refreshed price-breakdown block (recalctotals())
   nested inside .ec-summary-card — only its .clearfix rows were ever styled,
   so the container itself kept whatever stock background WHMCS renders it
   with, showing as a separate light box floating inside the otherwise-dark
   card (title above and CTA below sit directly on .ec-summary-card and were
   already fine). */
#order-standard_cart #producttotal{background:transparent !important;color:var(--ec-text);}
#order-standard_cart #producttotal .clearfix{
  display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--ec-border);font-size:.87em;color:var(--ec-text-muted);
}
#order-standard_cart #producttotal .clearfix .pull-left,
#order-standard_cart #producttotal .clearfix .pull-right{float:none;}
#order-standard_cart .summary-totals{margin-top:6px;}
#order-standard_cart .summary-totals .clearfix{color:var(--ec-text);}
#order-standard_cart .total-due-today{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:14px;padding-top:14px;border-top:2px solid var(--ec-border);
}
#order-standard_cart .total-due-today .amt{
  font-family:var(--ec-font-display);font-size:1.6em;font-weight:800;color:var(--ec-text);
}
#order-standard_cart .total-due-today span:not(.amt){color:var(--ec-text-muted);font-size:.83em;}

@media (max-width:700px){
  #order-standard_cart .ec-steps{gap:6px 0;}
  #order-standard_cart .ec-step span:not(.ec-step-dot){display:none;}
  #order-standard_cart .ec-step-line{width:20px;margin:0 6px;}
}

/* ---------- cart: configured-offer recap card ---------- */
#order-standard_cart .ec-cart-items{display:flex;flex-direction:column;gap:14px;}
#order-standard_cart .ec-offer-card{
  background:var(--ec-card);border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:20px 22px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart .ec-offer-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--ec-border);
}
#order-standard_cart .ec-offer-card-head h3{font-size:1.15em;margin:0;}
#order-standard_cart .ec-offer-domain{color:var(--ec-text-muted);font-weight:500;font-size:.7em;margin-left:8px;}
#order-standard_cart .ec-offer-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#order-standard_cart .ec-offer-card-actions .item-price{text-align:right;}
#order-standard_cart .ec-offer-price{
  display:block;font-family:var(--ec-font-display);font-weight:800;font-size:1.15em;color:var(--ec-text);
}
#order-standard_cart .ec-offer-card-actions .cycle{color:var(--ec-text-faint);font-size:.78em;}

#order-standard_cart .ec-offer-spec-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:16px 20px;
}
@media (max-width:900px){#order-standard_cart .ec-offer-spec-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media (max-width:560px){#order-standard_cart .ec-offer-spec-grid{grid-template-columns:1fr !important;}}
#order-standard_cart .ec-spec-tile{display:flex !important;align-items:center;gap:12px;}
#order-standard_cart .ec-spec-value{font-weight:700;color:var(--ec-text);font-size:.95em;}
#order-standard_cart .ec-spec-label{color:var(--ec-text-faint);font-size:.78em;}

#order-standard_cart .ec-offer-qty{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--ec-border);}
#order-standard_cart .ec-offer-qty label{margin:0;}
#order-standard_cart .ec-offer-qty .form-control{width:80px;}
#order-standard_cart .ec-offer-note{color:var(--ec-text-faint);font-size:.8em;margin:12px 0 0;}

#order-standard_cart .ec-continue-link{display:block;text-align:center;margin-top:10px;color:var(--ec-text-muted);}
#order-standard_cart .btn-checkout{border-radius:var(--ec-radius-sm);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}

/* ---------- shop: step 1 — pick a category ---------- */
#order-standard_cart .header-lined p{color:var(--ec-text-muted);margin:6px 0 0;}
#order-standard_cart .ec-cat-grid{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px;
}
@media (max-width:900px){#order-standard_cart .ec-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:560px){#order-standard_cart .ec-cat-grid{grid-template-columns:minmax(0,1fr) !important;}}
#order-standard_cart .ec-cat-card{
  display:flex !important;align-items:center;gap:14px;
  background:var(--ec-card);border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:20px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.15s;
}
#order-standard_cart .ec-cat-card:hover,
#order-standard_cart .ec-cat-card.active{border-color:var(--ec-blue);box-shadow:0 8px 20px rgba(15,23,42,.08);}
#order-standard_cart .ec-cat-icon{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--ec-radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--ec-blue-tint);font-size:1.3em;
}
#order-standard_cart .ec-cat-label{flex:1;min-width:0;font-family:var(--ec-font-display);font-weight:700;color:var(--ec-text);}
#order-standard_cart .ec-cat-label .badge{margin-left:8px;background:var(--ec-blue-tint);color:var(--ec-blue);font-weight:600;}
#order-standard_cart .ec-cat-arrow{width:14px;height:14px;flex-shrink:0;color:var(--ec-text-faint);}

/* ---------- shop: step 2 — category pills + offer cards ---------- */
#order-standard_cart .ec-cat-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
#order-standard_cart .ec-cat-pill{
  display:inline-flex;align-items:center;
  background:var(--ec-card);border:1px solid var(--ec-border-strong);border-radius:999px;
  padding:10px 20px;font-family:var(--ec-font-display);font-weight:700;font-size:.88em;
  color:var(--ec-text-muted);box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.15s;
}
#order-standard_cart .ec-cat-pill:hover{border-color:var(--ec-blue);color:var(--ec-blue-dark);box-shadow:0 4px 12px rgba(15,23,42,.08);}
#order-standard_cart .ec-cat-pill.active{background:var(--ec-blue);border-color:var(--ec-blue);color:#fff;}

#order-standard_cart .ec-offer-grid{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px;
}
@media (max-width:1000px){#order-standard_cart .ec-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:640px){#order-standard_cart .ec-offer-grid{grid-template-columns:minmax(0,1fr) !important;}}
#order-standard_cart .ec-shop-card{
  display:flex;flex-direction:column;
  background:var(--ec-card);border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);
  padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.15s;
}
#order-standard_cart .ec-shop-card:hover{border-color:var(--ec-border-strong);box-shadow:0 8px 20px rgba(15,23,42,.08);}
#order-standard_cart .ec-shop-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;}
#order-standard_cart .ec-shop-card-head h3{font-size:1.1em;margin:0;}
#order-standard_cart .ec-shop-stock{flex-shrink:0;color:var(--ec-text-faint);font-size:.75em;font-weight:600;white-space:nowrap;}

/* The offer card is a narrow 1/3-width column, so the description's spec list
   (a 3-column grid of bordered chips on the wide configure page) collapses to
   a single stacked column here — and the per-item box is dropped in favour of
   plain rows separated by hairlines, matching the upgrade/downgrade plan cards
   in the client area. Scoped to .ec-shop-desc so the configure page keeps its
   own chip treatment. */
#order-standard_cart .ec-shop-desc{flex:1;margin-top:14px !important;}
#order-standard_cart .ec-shop-desc .list-unstyled{
  grid-template-columns:1fr !important;gap:0 !important;
}
#order-standard_cart .ec-shop-desc .list-unstyled>li{
  background:none !important;border:none !important;box-shadow:none !important;
  border-radius:0 !important;padding:9px 0 !important;
  border-bottom:1px solid var(--ec-border) !important;
}
#order-standard_cart .ec-shop-desc .list-unstyled>li:last-child{border-bottom:none !important;}
/* the spec icons carry no information the label doesn't already give, and
   dropping them is what makes these rows read as the same quiet list */
#order-standard_cart .ec-shop-desc .list-unstyled>li i{display:none !important;}
#order-standard_cart .ec-shop-desc .list-unstyled>li [class*="text-"]{
  color:var(--ec-text-muted) !important;font-weight:600 !important;
}
#order-standard_cart .ec-shop-desc .list-unstyled>li .badge,
#order-standard_cart .ec-shop-desc .list-unstyled>li .label{
  background:rgba(15,23,42,.05) !important;color:var(--ec-text) !important;
  font-weight:700 !important;font-size:.9em !important;
  padding:3px 9px !important;border-radius:6px !important;
  margin-left:auto !important;white-space:nowrap;
}

#order-standard_cart .ec-shop-card-foot{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--ec-border);
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
}
#order-standard_cart .ec-shop-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;line-height:1.3;}
/* the caption and the setup fee each take their own line; the amount and its
   billing cycle read together on one */
#order-standard_cart .ec-shop-price-label{
  width:100%;color:var(--ec-text-faint);font-size:.7em;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
}
#order-standard_cart .ec-shop-price-amt{font-family:var(--ec-font-display);font-size:1.35em;font-weight:800;color:var(--ec-text);}
#order-standard_cart .ec-shop-price-cycle{color:var(--ec-text-faint);font-size:.78em;}
#order-standard_cart .ec-shop-setup{width:100%;color:var(--ec-text-faint);font-size:.72em;}
/* full-width call to action, like the plan cards it now matches — a bigger
   target than the old inline button squeezed beside the price */
#order-standard_cart .ec-shop-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border-radius:var(--ec-radius-sm);font-weight:600;
  background:var(--ec-blue) !important;border-color:var(--ec-blue) !important;color:#fff !important;
  opacity:1 !important;
}
#order-standard_cart .ec-shop-cta:hover,
#order-standard_cart .ec-shop-cta:focus{
  background:var(--ec-blue-dark) !important;border-color:var(--ec-blue-dark) !important;color:#fff !important;
}
#order-standard_cart .ec-shop-cta .icon{width:14px;height:14px;}

/* ---------- domain register/transfer page — restyle only, stock domainregister.tpl ----------
   No template override here (deliberately — see conversation: a full rewrite risked
   guessing WHMCS's internal Smarty variables wrong on a live purchase flow). Same
   idea as the .domain-checker-*/.spotlight-tld rules above: target WHMCS's own
   real markup/classes so the page keeps using WHMCS's stock search + availability
   logic untouched, only the visuals change. */

/* sidebar removed. products.tpl/viewcart.tpl achieve this by simply not rendering
   the sidebar markup at all (see .ec-cart-body-full above) — this page still uses
   WHMCS's stock template, which does render it, so it's hidden via CSS instead.
   Confirmed via live page source: WHMCS renders BOTH a desktop version
   (.cart-sidebar, containing the "Catégories"/"Actions" panels directly) AND a
   separate mobile-breakpoint version nested inside .cart-body itself
   (.sidebar-collapsed, same panels as a <select> dropdown) — both must be hidden. */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed{display:none !important;}
#order-standard_cart .cart-body{width:100% !important;float:none !important;}

/* search hero: give the existing dark banner (.domain-checker-bg is WHMCS's own
   class, already dark-blue via the rule above) a proper card treatment instead of
   a flat full-bleed rectangle, and center the search form inside it. border/outline
   reset in case the odd corner highlight seen in testing comes from a stock
   validation-state border (e.g. .has-warning) landing on this container. */
#order-standard_cart .domain-checker-bg{
  border-radius:var(--ec-radius-lg);padding:36px 28px;margin-bottom:28px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  border:none !important;outline:none !important;
}
#order-standard_cart .domain-checker-bg h1,
#order-standard_cart .domain-checker-bg h2,
#order-standard_cart .domain-checker-bg h3,
#order-standard_cart .domain-checker-bg p{color:#fff;}
#order-standard_cart .domain-checker-container{max-width:640px;margin:0 auto;}
#order-standard_cart .domain-checker-container .btn{
  border-radius:0 var(--ec-radius-sm) var(--ec-radius-sm) 0 !important;
}

/* TLD category filter pills ("Popular"/"Other") — WHMCS renders these as
   Bootstrap badges (badge/badge-secondary, badge-success for the active one) */
#order-standard_cart .badge-secondary{
  display:inline-flex;align-items:center;background:var(--ec-card) !important;
  border:1px solid var(--ec-border-strong);border-radius:999px;
  padding:8px 16px;font-family:var(--ec-font-display);font-weight:700;font-size:.85em;
  color:var(--ec-text-muted) !important;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart .badge-success{
  background:var(--ec-blue) !important;border-color:var(--ec-blue) !important;color:#fff !important;
}

/* TLD pricing table: round it into a card and clean up the header/row styling */
#order-standard_cart table{
  background:var(--ec-card);border-collapse:separate;border-spacing:0;width:100%;
  border:1px solid var(--ec-border);border-radius:var(--ec-radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
#order-standard_cart table th{
  background:rgba(15,23,42,.02);font-family:var(--ec-font-display);font-weight:700;
  color:var(--ec-text);border-color:var(--ec-border) !important;
}
#order-standard_cart table td{border-color:var(--ec-border) !important;color:var(--ec-text-muted);}
#order-standard_cart table tr:hover td{background:rgba(15,23,42,.015);}
#order-standard_cart table td strong,
#order-standard_cart table td b{font-family:var(--ec-font-display);color:var(--ec-text);}