/* ============================================================================
 * SurgeNode v2 order form :: css/custom.css
 *
 * This file IS the order form. There are no template overrides in this fork,
 * by design. Every cart page is standard_cart's markup, restyled from here.
 *
 * It is picked up by standard_cart/common.tpl, which ends with
 *     {assetExists file="custom.css"}
 *     <link rel="stylesheet" href="{$__assetPath__}?v={$versionHash}" />
 *     {/assetExists}
 * and assetExists/assetPath resolve child first. Because every cart template
 * hardcodes {include file="orderforms/standard_cart/common.tpl"}, going
 * through custom.css is the ONLY way to reach all cart pages at once. An
 * override of common.tpl here would only apply to pages we also override.
 *
 * ----------------------------------------------------------------------------
 * WHAT THIS IS FIGHTING
 *
 * orderforms/standard_cart/css/all.min.css (37 KB) is a light theme with the
 * palette hardcoded: #fff cards, #f8f8f8 panels, #ddd and #ccc rules, #058
 * blue headers, #666 summary. All of it is scoped under #order-standard_cart,
 * so matching that id plus later document order is enough to win. This file
 * is the LAST stylesheet in the document, so ties go to it and !important is
 * never needed.
 *
 * ----------------------------------------------------------------------------
 * THE ALIAS BLOCK BELOW IS NOT A SET OF NEW DESIGN TOKENS
 *
 * sn-tokens.css is frozen and nothing here redeclares any of it. But the
 * order form can legitimately run WITHOUT the v2 client theme: WHMCS lets an
 * order form be selected per product group (tblproductgroups.orderfrmtpl), so
 * the operator can point one group at this cart while the global client theme
 * is still the live `surgenode`. In that configuration sn-tokens.css is not
 * on the page at all, every var() would resolve to nothing, the declarations
 * would be dropped, and the cart would render as unstyled black on black.
 *
 * So the palette is aliased once, here, with a literal fallback per token.
 * When sn-tokens.css IS present every alias resolves to the frozen token and
 * the fallback is dead weight. When it is absent the cart still renders and
 * is still legible. The rest of the file references only these aliases, so
 * the literals appear exactly once and never in a rule.
 *
 * The aliases are scoped to #order-standard_cart, not :root, so they cannot
 * leak into or shadow anything the client theme owns.
 *
 * Because --cobalt is what the 17 .theme-<game> scopes override, a cart
 * rendered inside one of those scopes picks up that game's accent for free.
 *
 * ----------------------------------------------------------------------------
 * HOUSE RULES OBSERVED HERE
 *   - Flat. Hairline borders, never glows. --shadow-soft and --shadow-pop are
 *     the two offset "pop" shadows that were never flattened, and they are
 *     deliberately NOT used.
 *   - Radii come from the r- scale: 6px controls, 10px medium, 12px cards.
 *   - No em dashes, in code, comments or copy.
 *   - No markup, field name, id, form action or AJAX endpoint is touched by
 *     anything in this file. It is styling only.
 * ==========================================================================*/

#order-standard_cart {
  /* palette aliases, see the note above. left is the frozen token, right is
     the standalone fallback used only when sn-tokens.css is not on the page */
  --c-ground:    var(--ink-900,  #050505);
  --c-card:      var(--ink-850,  #0a0a0a);
  --c-raised:    var(--ink-800,  #111111);
  --c-sunken:    var(--ink-750,  #0d0d0d);
  --c-line:      var(--line,      rgba(255,255,255,.14));
  --c-line-soft: var(--line-soft, rgba(255,255,255,.08));
  --c-text:      var(--ink-100,  #f5f5f5);
  --c-text-2:    var(--ink-300,  #c9c9c9);
  --c-text-dim:  var(--ink-400,  #8f8f8f);
  --c-accent:    var(--cobalt,   #00bcff);
  --c-accent-lo: var(--cobalt-lo,#0092c7);
  --c-on-accent: var(--ink-on-accent, #04202c);
  --c-danger:    var(--danger,   #ff4d6d);
  --c-mint:      var(--mint,     #22c55e);
  --c-amber:     var(--amber,    #ffb900);

  --c-r-ctl:  var(--r-btn, 6px);
  --c-r-md:   var(--r-md, 10px);
  --c-r-lg:   var(--r-lg, 12px);

  --c-sans:    var(--sans,    'Inter', ui-sans-serif, system-ui, sans-serif);
  --c-display: var(--display, 'Plus Jakarta Sans', 'Inter', sans-serif);
  --c-mono:    var(--mono,    'Geist Mono', ui-monospace, monospace);

  font-family: var(--c-sans);
  color: var(--c-text);
}

/* ---------------------------------------------------------------------------
 * 1. Page furniture
 * The float based 25/75 and 65/35 column split and its three breakpoints are
 * standard_cart's and are left exactly alone. Only the surfaces change.
 * ------------------------------------------------------------------------ */

#order-standard_cart .header-lined {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
#order-standard_cart .header-lined h1 {
  font-family: var(--c-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
#order-standard_cart .header-lined p {
  color: var(--c-text-dim);
  margin-bottom: 0;
}

#order-standard_cart a { color: var(--c-accent); }
#order-standard_cart a:hover,
#order-standard_cart a:focus { color: var(--c-accent-lo); }

#order-standard_cart hr { border-top-color: var(--c-line-soft); }

/* Category rail. nexus renders these as bootstrap list-group items, which are
   white with a light border out of the box. */
#order-standard_cart .cart-sidebar .list-group-item,
#order-standard_cart .sidebar .list-group-item {
  background: var(--c-card);
  border-color: var(--c-line-soft);
  color: var(--c-text-2);
}
#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .sidebar .list-group-item:hover {
  background: var(--c-raised);
  color: var(--c-text);
}
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .sidebar .list-group-item.active {
  background: var(--c-raised);
  border-color: var(--c-accent);
  color: var(--c-text);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

/* ---------------------------------------------------------------------------
 * 2. Product grid
 *
 * products.tpl emits a NEW .row every two products
 * ({if $product@iteration % 2 == 0}), which hard codes a two across layout no
 * matter how wide the viewport is. Rather than override the template to fix
 * the markup, the row wrappers are removed from the box tree with
 * display:contents so every .col-md-6 becomes a direct grid item of .products.
 * That turns the fixed pairs into a real responsive grid and costs no markup
 * change, so configureproduct.tpl and products.tpl stay inherited.
 * ------------------------------------------------------------------------ */

#order-standard_cart .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}
#order-standard_cart .products > .row { display: contents; }
#order-standard_cart .products > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

#order-standard_cart .products .product {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 16px 0;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-lg);
  box-shadow: none;
  transition: border-color .18s var(--sn-ease, ease), background-color .18s var(--sn-ease, ease);
}
#order-standard_cart .products .product:hover {
  background: var(--c-raised);
  border-color: var(--c-line);
}

#order-standard_cart .products .product header {
  margin: 0;
  padding: 14px 18px;
  background: transparent;
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-lg) var(--c-r-lg) 0 0;
}
#order-standard_cart .products .product header span {
  font-family: var(--c-display);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--c-text);
}
#order-standard_cart .products .product header .qty {
  font-style: normal;
  font-family: var(--c-mono);
  font-size: .72em;
  color: var(--c-text-dim);
}

/* desc and footer are floated 60/40 upstream, which is cramped inside a card.
   Stacked here, with the footer pinned to the bottom so cards in a row line up. */
#order-standard_cart .products .product div.product-desc {
  float: none;
  width: auto;
  padding: 16px 18px 8px;
  font-size: .86em;
  color: var(--c-text-2);
}
#order-standard_cart .products .product div.product-desc ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
#order-standard_cart .products .product div.product-desc li {
  padding: 5px 0;
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-text-2);
}
#order-standard_cart .products .product div.product-desc li:last-child { border-bottom: 0; }
#order-standard_cart .products .product span.feature-value {
  font-family: var(--c-mono);
  font-weight: 500;
  color: var(--c-text);
  margin-right: 6px;
}

#order-standard_cart .products .product footer {
  float: none;
  width: auto;
  margin: auto 0 0;
  padding: 12px 18px 0;
  text-align: left;
  font-size: .86em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
#order-standard_cart .products .product div.product-pricing {
  margin-bottom: 0;
  color: var(--c-text-dim);
  line-height: 1.35;
}
#order-standard_cart .products .product div.product-pricing span.price {
  display: block;
  font-family: var(--c-display);
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
#order-standard_cart .products .product div.product-pricing small {
  color: var(--c-text-dim);
}

/* ---------------------------------------------------------------------------
 * 3. Buttons
 * ------------------------------------------------------------------------ */

#order-standard_cart .btn {
  border-radius: var(--c-r-ctl);
  font-family: var(--c-sans);
  font-weight: 600;
  box-shadow: none;
}
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-checkout {
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: var(--c-on-accent);
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-primary:focus,
#order-standard_cart .btn-success:focus,
#order-standard_cart .btn-order-now:focus,
#order-standard_cart .btn-checkout:focus {
  background: var(--c-accent-lo);
  border-color: var(--c-accent-lo);
  color: var(--c-on-accent);
}
#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary {
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  color: var(--c-text);
}
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover {
  background: var(--c-sunken);
  border-color: var(--c-line-soft);
  color: var(--c-text);
}
#order-standard_cart .btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-accent, 0 0 0 1px var(--c-accent));
}

/* ---------------------------------------------------------------------------
 * 4. Form controls
 * Includes the Game Servers RAM dropdown (name="configoption[1]",
 * id="inputConfigOption1"). Styling only. The name, the id, the option values
 * and the selected state are the template's and are untouched.
 * ------------------------------------------------------------------------ */

#order-standard_cart label,
#order-standard_cart .control-label {
  color: var(--c-text-2);
  font-weight: 500;
}
#order-standard_cart .sub-heading {
  font-family: var(--c-display);
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line-soft);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="number"],
#order-standard_cart input[type="password"],
#order-standard_cart textarea {
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-ctl);
  color: var(--c-text);
  box-shadow: none;
}
#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus,
#order-standard_cart select:focus,
#order-standard_cart textarea:focus {
  background: var(--c-sunken);
  border-color: var(--c-accent);
  color: var(--c-text);
  outline: none;
  box-shadow: var(--shadow-accent, 0 0 0 1px var(--c-accent));
}
#order-standard_cart .form-control::placeholder,
#order-standard_cart textarea::placeholder { color: var(--c-text-dim); }

/* Native dropdown lists paint with the OS palette unless the option elements
   are told otherwise, which on a dark control reads as white on white. */
#order-standard_cart select option {
  background: var(--c-raised);
  color: var(--c-text);
}

#order-standard_cart .field-container { margin-bottom: 26px; }
#order-standard_cart .field-help-text { color: var(--c-text-dim); font-size: .85em; }
#order-standard_cart .field-error-msg { color: var(--c-danger); }
#order-standard_cart .field-icon { color: var(--c-text-dim); }
#order-standard_cart .input-group-text {
  background: var(--c-raised);
  border-color: var(--c-line);
  color: var(--c-text-dim);
}

/* ---------------------------------------------------------------------------
 * 5. Product configuration page
 * ------------------------------------------------------------------------ */

#order-standard_cart .product-info {
  background: var(--c-card);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-md);
  padding: 14px 18px;
  color: var(--c-text-2);
}
#order-standard_cart .product-info .product-title {
  font-family: var(--c-display);
  font-weight: 700;
  color: var(--c-text);
}

#order-standard_cart .addon-products .panel,
#order-standard_cart .panel-addon {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-md);
  box-shadow: none;
  color: var(--c-text-2);
}
#order-standard_cart .panel-addon:hover { border-color: var(--c-line); }

/* ---------------------------------------------------------------------------
 * 6. Order summary
 *
 * ordersummary.tpl is the AJAX partial that recalctotals() replaces on every
 * option change. Nothing here changes its markup or its contract; these are
 * the same class names it has always emitted.
 * ------------------------------------------------------------------------ */

#order-standard_cart .order-summary {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-lg);
  overflow: hidden;
}
#order-standard_cart .order-summary h2 {
  font-family: var(--c-display);
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-raised);
  border-bottom: 1px solid var(--c-line-soft);
  padding: 12px;
}
#order-standard_cart .summary-container {
  background: transparent;
  border-radius: 0;
  padding: 16px;
  color: var(--c-text-2);
}
#order-standard_cart .order-summary .product-name {
  font-family: var(--c-display);
  font-weight: 700;
  color: var(--c-text);
}
#order-standard_cart .order-summary .product-group {
  font-style: normal;
  color: var(--c-text-dim);
  font-size: .92em;
}
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals {
  border-top-color: var(--c-line-soft);
  border-bottom-color: var(--c-line-soft);
}
#order-standard_cart .order-summary .total-due-today {
  padding-top: 6px;
  border-top: 1px solid var(--c-line);
}
#order-standard_cart .order-summary .total-due-today .amt {
  font-family: var(--c-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
#order-standard_cart .order-summary .total-due-today span { color: var(--c-text-dim); }
#order-standard_cart .order-summary .recurring-charges { color: var(--c-text-dim); }
#order-standard_cart .order-summary .loader { color: var(--c-text-dim); }

/* ---------------------------------------------------------------------------
 * 7. View cart
 * ------------------------------------------------------------------------ */

#order-standard_cart .view-cart-items-header {
  background: var(--c-raised);
  color: var(--c-text);
  border: 1px solid var(--c-line-soft);
  border-bottom: 0;
  border-radius: var(--c-r-lg) var(--c-r-lg) 0 0;
  font-family: var(--c-display);
  font-weight: 600;
  padding: 12px 16px;
}
#order-standard_cart .view-cart-items {
  border: 1px solid var(--c-line-soft);
  border-radius: 0 0 var(--c-r-lg) var(--c-r-lg);
  overflow: hidden;
}
#order-standard_cart .view-cart-items .item {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line-soft);
  padding: 14px 16px;
}
#order-standard_cart .view-cart-items .item:nth-child(even) { background: var(--c-card); }
#order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-standard_cart .view-cart-items .item-title {
  font-family: var(--c-display);
  font-weight: 700;
  font-size: 1.35em;
  color: var(--c-text);
}
#order-standard_cart .view-cart-items .item-group { color: var(--c-text-dim); font-size: 1em; }
#order-standard_cart .view-cart-items .item-domain { color: var(--c-accent); }
#order-standard_cart .view-cart-items .item-price span { color: var(--c-text); }
#order-standard_cart .view-cart-items .item-price .cycle { color: var(--c-text-dim); }

#order-standard_cart .btn-remove-from-cart { color: var(--c-text-dim); }
#order-standard_cart .btn-remove-from-cart:hover { color: var(--c-danger); }

#order-standard_cart .empty-cart .btn {
  background: var(--c-raised);
  border: 1px solid var(--c-line-soft);
  border-top: 0;
  color: var(--c-text-dim);
}
#order-standard_cart .empty-cart .btn:hover { color: var(--c-danger); }

#order-standard_cart .view-cart-empty { color: var(--c-text-dim); }

#order-standard_cart .view-cart-promotion-code .form-control { max-width: 260px; }

#order-standard_cart .view-cart-tabs .nav-link,
#order-standard_cart .nav-tabs .nav-link {
  color: var(--c-text-dim);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
}
#order-standard_cart .view-cart-tabs .nav-link.active,
#order-standard_cart .nav-tabs .nav-link.active {
  color: var(--c-text);
  background: transparent;
  border-bottom-color: var(--c-accent);
}

/* ---------------------------------------------------------------------------
 * 8. Checkout
 *
 * checkout.tpl is 50 KB of client fields, gateway blocks and TOS handling and
 * is inherited byte for byte. Everything below is surface only.
 * ------------------------------------------------------------------------ */

#order-standard_cart .checkout-security-msg { color: var(--c-text-dim); font-size: .88em; }
#order-standard_cart .gateway-errors,
#order-standard_cart .vat-error { color: var(--c-danger); }

#order-standard_cart .existing-cc-grid,
#order-standard_cart .new-card-container,
#order-standard_cart .account-select-container {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-md);
  padding: 14px;
}
#order-standard_cart .already-registered { color: var(--c-text-dim); }
#order-standard_cart .generate-password { color: var(--c-accent); }

#order-standard_cart .panel,
#order-standard_cart .card {
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-r-md);
  box-shadow: none;
  color: var(--c-text-2);
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: var(--c-raised);
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-text);
}

#order-standard_cart .label-default { background: var(--c-raised); color: var(--c-text-2); }
#order-standard_cart .label-info { background: var(--c-accent); color: var(--c-on-accent); }

/* ---------------------------------------------------------------------------
 * 9. Alerts and tables
 * ------------------------------------------------------------------------ */

#order-standard_cart .alert {
  border-radius: var(--c-r-md);
  border-width: 1px;
  box-shadow: none;
}
#order-standard_cart .alert-info {
  background: var(--cobalt-dim, rgba(0,188,255,.18));
  border-color: var(--c-accent);
  color: var(--c-text);
}
#order-standard_cart .alert-success {
  background: var(--mint-dim, rgba(34,197,94,.14));
  border-color: var(--c-mint);
  color: var(--c-text);
}
#order-standard_cart .alert-warning {
  background: var(--amber-dim, rgba(255,185,0,.16));
  border-color: var(--c-amber);
  color: var(--c-text);
}
#order-standard_cart .alert-danger {
  background: rgba(255,77,109,.14);
  border-color: var(--c-danger);
  color: var(--c-text);
}
#order-standard_cart .alert-link { color: var(--c-accent); }

#order-standard_cart .table { color: var(--c-text-2); }
#order-standard_cart .table th,
#order-standard_cart .table td { border-color: var(--c-line-soft); }
#order-standard_cart .table thead th {
  color: var(--c-text);
  border-bottom-color: var(--c-line);
}

/* ---------------------------------------------------------------------------
 * 10. Order complete
 *
 * complete.tpl carries the empty conversion tracking placeholder. It is
 * inherited untouched and this file does not fill it in.
 * ------------------------------------------------------------------------ */

#order-standard_cart .order-confirmation {
  background: var(--c-card);
  border: 1px solid var(--c-accent);
  border-radius: var(--c-r-md);
  color: var(--c-text);
}
#order-standard_cart .order-confirmation span {
  font-family: var(--c-mono);
  color: var(--c-accent);
}


/* ---------------------------------------------------------------------------
 * Contrast fixes, measured on the live cart
 *
 * All of these were under 3:1. They live here rather than in the theme's
 * custom.css because this stylesheet loads last on cart pages, and because
 * standard_cart scopes its own rules under #order-standard_cart, which
 * outranks anything theme-level at the same class count.
 * --------------------------------------------------------------------------- */

/* Section legend, "CONFIGURABLE OPTIONS" / "AVAILABLE ADDONS".
   Was #f5f5f5 on #f8f9fa, 1.03:1. It sits over a divider rule and has to stay
   opaque to break it, so it takes the page colour rather than transparent. */
#order-standard_cart .primary-bg-color,
.primary-bg-color {
    background-color: var(--c-ground, #050505);
    color: var(--c-text-2, #c9c9c9);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 12px;
}

/* Addon cards. Label was #333 on #0a0a0a (1.57:1), price strip #d4d4d4 on
   #e8e8e8 (1.21:1), and the button Bootstrap 3's #5cb85c (2.48:1). */
#order-standard_cart .panel-addon label,
#order-standard_cart .panel-addon .panel-body label {
    color: var(--c-text);
    font-weight: 600;
}

#order-standard_cart .panel-addon .panel-body {
    color: var(--c-text-2);
}

#order-standard_cart .panel-addon .panel-price {
    background: var(--c-raised);
    border-top: 1px solid var(--c-line-soft);
    color: var(--c-text-2);
}

#order-standard_cart .panel-addon .panel-add {
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 600;
}

#order-standard_cart .panel-addon:hover .panel-add,
#order-standard_cart .panel-addon .panel-add:hover {
    background: color-mix(in srgb, #ffffff 12%, var(--c-accent));
    color: var(--c-on-accent);
}

/* "Apply Promo Code" tab was #f5f5f5 on #fff, 1.09:1. */
#order-standard_cart .nav-tabs .nav-link,
#order-standard_cart .nav-link {
    color: var(--c-text-2);
}

#order-standard_cart .nav-tabs .nav-link.active,
#order-standard_cart .nav-link.active {
    background-color: transparent;
    color: var(--c-text);
    border-color: var(--c-line) var(--c-line) transparent;
}

/* Continue Shopping was #222 on #050505, 1.28:1. */
#order-standard_cart #continueShopping,
#continueShopping.btn-link {
    color: var(--c-text-2);
}

#order-standard_cart #continueShopping:hover,
#continueShopping.btn-link:hover {
    color: var(--c-accent);
}

/* ---------------------------------------------------------------------------
 * Category rail
 *
 * Spaced rows, cobalt on hover and selection with dark ink, small radius.
 * Bootstrap list-group items are flush and share borders, so the borders come
 * off and margin does the separating. The old active state drew an inset left
 * bar, which is redundant now the whole row fills.
 * --------------------------------------------------------------------------- */

#order-standard_cart .cart-sidebar .list-group,
#order-standard_cart .sidebar .list-group {
    padding: 6px;
    border: 0;
}

#order-standard_cart .cart-sidebar .list-group-item,
#order-standard_cart .sidebar .list-group-item {
    background: transparent;
    border: 0;
    border-radius: var(--c-r-ctl, 6px);
    margin-bottom: 4px;
    padding: 9px 12px;
    color: var(--c-text-2);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

#order-standard_cart .cart-sidebar .list-group-item:last-child,
#order-standard_cart .sidebar .list-group-item:last-child {
    margin-bottom: 0;
}

#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .sidebar .list-group-item.active {
    background: var(--c-accent);
    border-color: transparent;
    color: var(--c-on-accent);
    box-shadow: none;
}

/* Icons inside the rail follow the row's ink. */
#order-standard_cart .cart-sidebar .list-group-item:hover i,
#order-standard_cart .sidebar .list-group-item:hover i,
#order-standard_cart .cart-sidebar .list-group-item.active i,
#order-standard_cart .sidebar .list-group-item.active i {
    color: var(--c-on-accent);
}


/* The section legend is painted via `.sub-heading span`, NOT via its own
   `.primary-bg-color` class, which is why the earlier overrides missed. It has
   to stay opaque so it breaks the divider rule behind it. */
body #order-standard_cart .sub-heading span {
    background: var(--c-ground);
    color: var(--c-text-2);
}

body #order-standard_cart .sub-heading {
    border-color: var(--c-line-soft);
}

/* Promo tabs. The winning rule is scoped through .secondary-cart-body
   .view-cart-tabs, so matching only .nav-link.active was never enough. */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs .nav-link,
body #order-standard_cart .view-cart-tabs .nav-tabs a,
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="false"] {
    background-color: transparent;
    color: var(--c-text-2);
    border-color: transparent;
}

body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs .nav-link.active,
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-item.active a {
    background-color: var(--c-raised);
    color: var(--c-text);
    border-color: var(--c-line) var(--c-line) transparent;
}


/* ---------------------------------------------------------------------------
 * Choose Account selector
 *
 * standard_cart gives these a #f6f6f6 card and a #fff active state, so the
 * account name and address were near-invisible once the page went dark.
 * Matched at standard_cart's own specificity; this file loads after it.
 *
 * Stock butts the cards into a flush grid (border-right: 0, border-bottom: 0).
 * Separate rounded cards read better on dark, so those resets are undone.
 * --------------------------------------------------------------------------- */

#order-standard_cart .account-select-container div.account {
    background: var(--c-card);
    border: 1px solid var(--c-line-soft);
    border-right: 1px solid var(--c-line-soft);
    border-radius: var(--c-r-ctl, 6px);
    padding: 12px 14px;
    margin-bottom: 8px;
    color: var(--c-text-2);
    transition: background-color .15s ease, border-color .15s ease;
}

#order-standard_cart .account-select-container div.account:not(.border-bottom) {
    border-bottom: 1px solid var(--c-line-soft);
}

#order-standard_cart .account-select-container div.account:hover {
    border-color: var(--c-line);
}

#order-standard_cart .account-select-container div.account.active {
    background: color-mix(in srgb, var(--c-accent) 10%, var(--c-raised));
    border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
    color: var(--c-text);
}

/* The name sits in <strong>, the address lines are bare text in .address. */
#order-standard_cart .account-select-container .account .address {
    color: var(--c-text-2);
}

#order-standard_cart .account-select-container .account .address strong {
    color: var(--c-text);
    font-weight: 600;
}

#order-standard_cart .account-select-container .account label {
    margin: 0;
    width: 100%;
    cursor: pointer;
}

/* Closed / no-permission accounts are marked with .label-default and should
   read as unavailable rather than just grey-on-grey. */
#order-standard_cart .account-select-container .account .label-default {
    background: var(--c-raised);
    border: 1px solid var(--c-line-soft);
    color: var(--c-text-dim);
}

#order-standard_cart .account-select-container .account .label-info {
    background: color-mix(in srgb, var(--c-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
    color: var(--c-accent);
}

/* The radio itself was invisible against the light card. */
#order-standard_cart .account-select-container .account input.account-select {
    accent-color: var(--c-accent);
}


/* PayPal account chooser.
 *
 * form#frmCheckout.paypal_ppcpv-payment-form > #creditCardInputFields >
 * ul.selected, painted rgb(241,241,241) with rgb(245,245,245) text: white on
 * white. The radio is replaced by iCheck (div.iradio_square-blue), whose
 * sprite is an image and cannot be recoloured here; it renders as a dark disc
 * with a light check, which is fine on a dark row. */
.paypal_ppcpv-payment-form ul.selected,
#creditCardInputFields ul.selected,
#order-standard_cart ul.selected {
    background: var(--c-card, #0a0a0a);
    border: 1px solid var(--c-line-soft, rgba(255,255,255,.08));
    border-radius: var(--c-r-ctl, 6px);
    color: var(--c-text, #f5f5f5);
    list-style: none;
    margin: 0 0 10px;
    padding: 4px;
}

.paypal_ppcpv-payment-form ul.selected li,
#creditCardInputFields ul.selected li {
    list-style: none;
    padding: 8px 10px;
    border-radius: var(--c-r-ctl, 6px);
}

.paypal_ppcpv-payment-form ul.selected label,
#creditCardInputFields ul.selected label {
    color: var(--c-text, #f5f5f5);
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The instruction line above the chooser. */
.paypal_ppcpv-payment-form p,
#creditCardInputFields > p {
    color: var(--c-text-2, #c9c9c9);
}


/* Empty-cart panel. Stock is a white block with grey text, which only appears
   when the cart is empty, so a populated-cart sweep never sees it. */
#order-standard_cart .view-cart-empty,
.view-cart-empty {
    background: var(--c-card, #0a0a0a);
    border: 1px solid var(--c-line-soft, rgba(255,255,255,.08));
    border-radius: var(--c-r-md, 10px);
    color: var(--c-text-2, #c9c9c9);
    padding: 34px 20px;
    text-align: center;
}


/* The winning rule carries .cart-body: (1,3,2). Anything less loses, which is
   why the first attempt only changed the text colour. */
body #order-standard_cart .cart-body .view-cart-empty {
    background-color: var(--c-card, #0a0a0a);
    border: 1px solid var(--c-line-soft, rgba(255,255,255,.08));
    border-radius: var(--c-r-md, 10px);
    color: var(--c-text-2, #c9c9c9);
}


/* "Create a New Account" carries Bootstrap's .border-bottom utility, which is
   `border-bottom: 1px solid #dee2e6 !important` and drew a light line across
   the dark card. A utility with !important can only be answered in kind.
   My earlier separator rule used :not(.border-bottom), which excluded exactly
   this element. */
#order-standard_cart .account-select-container div.account.border-bottom {
    border: 1px solid var(--c-line-soft, rgba(255,255,255,.08)) !important;
    border-radius: var(--c-r-ctl, 6px);
}

#order-standard_cart .account-select-container div.account.border-bottom:hover {
    border-color: var(--c-line, rgba(255,255,255,.14)) !important;
}


/* Cart / store rail, at the specificity that actually wins.
 *
 * `body #order-standard_cart .cart-sidebar .list-group-item.active` sets
 * --bg-lifted (#111) and a :first-child rule zeroes the radius, both of which
 * outranked the earlier rail rules. Matched here and appended last. */
body #order-standard_cart .cart-sidebar .list-group-item,
body #order-standard_cart .sidebar .list-group-item {
    background: transparent;
    border: 0;
    border-radius: var(--c-r-ctl, 6px);
    margin-bottom: 4px;
    padding: 9px 12px;
    color: var(--c-text-2);
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

/* The stock rail squares off the first and last rows to butt them together. */
body #order-standard_cart .cart-sidebar .list-group-item:first-child,
body #order-standard_cart .cart-sidebar .list-group-item:last-child,
body #order-standard_cart .sidebar .list-group-item:first-child,
body #order-standard_cart .sidebar .list-group-item:last-child {
    border-radius: var(--c-r-ctl, 6px);
}

body #order-standard_cart .cart-sidebar .list-group-item:last-child,
body #order-standard_cart .sidebar .list-group-item:last-child {
    margin-bottom: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:hover,
body #order-standard_cart .cart-sidebar .list-group-item.active,
body #order-standard_cart .sidebar .list-group-item:hover,
body #order-standard_cart .sidebar .list-group-item.active {
    background: var(--c-accent);
    background-color: var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: none;
    border-color: transparent;
}

/* Same icon-chip and badge handling as the client-area rails. */
body #order-standard_cart .cart-sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper,
body #order-standard_cart .cart-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    background: transparent;
    border-color: transparent;
}

body #order-standard_cart .cart-sidebar .list-group-item:hover i,
body #order-standard_cart .cart-sidebar .list-group-item.active i,
body #order-standard_cart .sidebar .list-group-item:hover i,
body #order-standard_cart .sidebar .list-group-item.active i {
    color: var(--c-on-accent);
}

body #order-standard_cart .cart-sidebar .list-group-item:hover .badge,
body #order-standard_cart .cart-sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, .34);
    color: var(--c-on-accent);
}