/**
 * SkylineServers — order form brand overrides (standard_cart base)
 *
 * Loaded via the {assetExists file="custom.css"} hook in common.tpl, which runs
 * AFTER all.min.css — so equal-specificity rules here win without !important.
 * Kept as a self-contained override layer: WHMCS core updates only touch the
 * standard_cart/ directory, this file survives them, and every brand decision
 * lives in one auditable place instead of forked across .tpl files.
 *
 * Fonts follow (whmcs-template): Chakra Petch display, Inter body —
 * loaded by the skylineservers theme that wraps this form; stacks fall back to
 * system fonts if the theme fonts are not yet deployed.
 *
 * Scope rules:
 *  - Brand chrome (buttons, CTAs, accents) -> blue identity.
 *  - Status semantics preserved: available/new = palette green, sale/pending =
 *    palette amber, hot/error/unavailable = palette red.
 *  - MarketConnect vendor cards (.mc-promo.weebly/.nordvpn/...) keep their
 *    per-vendor brand colors; only the generic accents are rebranded.
 */

:root {
    --ss-primary: #406abf;       /* brand blue — buttons, links, active (DESIGN.md 2026-10-05) */
    --ss-primary-hover: #3b5da8; /* hover/active — AA with --ss-on-primary label              */
    --ss-on-primary: #ffffff;    /* WHITE label on brand blue (white PASSES 5.21:1, dark fails) */
    --ss-secondary: #5b6472;     /* NEUTRAL role — quiet actions / accents (re-purposed gray)  */
    --ss-success: #15803d;       /* status green — availability, "new"         */
    --ss-warning: #b45309;       /* status amber — sale badges                 */
    --ss-danger: #dc2626;        /* status red — hot badges                    */
    --ss-gray-dark: #3a4250;     /* darker neutral — DESIGN.md light block (2026-10-07) */
    --ss-text: #1f1f1f;          /* primary text                               */
    --ss-surface: #ffffff;       /* cards, panels, elevated surfaces           */
    --ss-bg: #fdfdfd;            /* page background                            */
    --ss-border: #e3e6ea;        /* hairlines / input borders                  */
    --ss-font-display: 'Chakra Petch', -apple-system, 'Segoe UI', sans-serif;
    --ss-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---- typography ------------------------------------------------------- */
#order-standard_cart {
    font-family: var(--ss-font-body);
    color: var(--ss-text);
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart .font-size-36,
#order-standard_cart .font-size-30 {
    font-family: var(--ss-font-display);
    color: var(--ss-text);
}

/* ---- primary CTAs -----------------------------------------------------
 * standard_cart templates use btn-success for "Order Now", "Proceed to
 * Checkout" and "Add to Cart" — brand actions, so map onto brand blue. */
#order-standard_cart .btn-success,
.product-recommendations .product-recommendation .btn-add {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-success:focus,
#order-standard_cart .btn-success:active,
#order-standard_cart .btn-success.active {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
}

/* Neutralize Bootstrap's stock GREEN focus/active glow on the brand CTAs and
   replace it with an on-palette BLUE ring. Without this, clicking "Add to Cart"
   (.btn-success) shows a green rgba(40,167,69,.5) box-shadow around the blue
   button. The ring is kept (not removed) so keyboard focus stays visible per
   WCAG 2.2 — it just now matches the brand color instead of clashing with it. */
#order-standard_cart .btn-success:focus,
#order-standard_cart .btn-success:active,
#order-standard_cart .btn-success.active {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(64, 106, 191, .4);   /* brand blue (#406abf) */
}

/* Domain transfer CTA (was neutral dark) */
.btn-transfer {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

/* Addon "Add" panels (was #5cb85c) */
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--ss-primary);
    color: var(--ss-on-primary);
}

/* ---- domain checker --------------------------------------------------- */
/* Container banner: yellow-orange gradient -> brand blue identity */
.domain-checker-container {
    background-color: var(--ss-primary);
    background: linear-gradient(to bottom, var(--ss-secondary), var(--ss-primary));
}

/* Availability text: status green, palette-mutated (was #5cb85c) */
#order-standard_cart .domain-checker-available {
    color: var(--ss-success);
}

/* TLD pricing header accent (was #97b5d2) */
.domain-pricing .tld-pricing-header .col-sm-4 {
    border-bottom-color: var(--ss-secondary);
}

/* ---- TLD / suggested domain badges ----------------------------------- */
.spotlight-tld-new {
    background-color: var(--ss-success);
}

.spotlight-tld-sale,
.suggested-domains .promo.sale {
    background-color: var(--ss-warning);
}

.suggested-domains .promo.hot {
    background-color: var(--ss-danger);
}

.suggested-domains .promo.new {
    background-color: var(--ss-success);
}

/* ---- Browse-extensions category chips (.tld-filters) -------------------
   Owner fix 2026-10-09 (hard to read in both themes; follow-up: white labels
   in BOTH themes). Chips are <a class="badge">, excluded from the blanket link
   rule (see its comment), so their label+fill pairs are owned here — no
   !important needed against anything left in the cascade. Fills come from the
   DESIGN.md neutrals; active = brand blue, same button language as sidebar. */
#order-standard_cart .tld-filters .badge {
    color: #fff;                      /* white on --ss-secondary #5b6472 = 5.98:1 */
    background-color: var(--ss-secondary);
    border-color: var(--ss-secondary);
}
#order-standard_cart .tld-filters .badge:hover,
#order-standard_cart .tld-filters .badge:focus {
    color: #fff;
    background-color: var(--ss-primary-hover);  /* #3b5da8 — 6.33:1 on white */
    border-color: var(--ss-primary-hover);
}
#order-standard_cart .tld-filters .badge-success,          /* active filter ("Popular") */
#order-standard_cart .tld-filters a.badge.active {
    color: #fff;
    background-color: var(--ss-primary);  /* brand blue — white on it = 5.21:1 AA   */
    border-color: var(--ss-primary);
}
[data-theme="dark"] #order-standard_cart .tld-filters .badge:not(.badge-success):not(.active) {
    /* Owner 2026-10-09: WHITE labels in BOTH themes. White needs a dark fill to
       pass AA (it fails at 2.48:1 on --ss-d-secondary #9aa6b2), so the dark chip
       sits on --ss-gray-dark — DESIGN.md's darker neutral, which takes white.

       The active states are EXCLUDED here via :not() — this selector (attr + ID
       + class = 1-2-1) outranks the brand-blue active rule (1-1-1), so without
       the exclusion it would repaint badge-success/.active to slate in dark,
       making active indistinguishable from inactive (2026-10-09 screenshot).
       Excluded elements fall through to the light-theme blue rule below, which
       applies unchanged in both themes. */
    color: #fff;                        /* white on #3a4250 = 10.12:1 */
    background-color: var(--ss-gray-dark);  /* #3a4250 (dark-mode chip fill)      */
    border-color: var(--ss-gray-dark);
}
[data-theme="dark"] #order-standard_cart .tld-filters .badge:not(.badge-success):not(.active):hover,
[data-theme="dark"] #order-standard_cart .tld-filters .badge:not(.badge-success):not(.active):focus {
    color: #fff;
    background-color: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
}
/* active keeps brand fill + white in dark too — identical to light (single blue) */

/* ---- all action buttons (unified brand blue) --------------------------
 * DESIGN.md: --primary = "buttons, links, active states".
 * Every CTA in the orderform (add-to-cart, validate, transfer, renewal,
 * contact-support) uses the same blue. No gray/white secondary tier. */
.spotlight-tld .btn:not(.domain-contact-support),
.suggested-domains .btn:not(.domain-contact-support),
#order-standard_cart .btn-add-renewal-to-cart,
#order-standard_cart .btn-primary {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.spotlight-tld .btn:not(.domain-contact-support):hover,
.suggested-domains .btn:not(.domain-contact-support):hover,
#order-standard_cart .btn-add-renewal-to-cart:hover,
#order-standard_cart .btn-primary:hover {
    background-color: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
}

/* ---- prices & accents -------------------------------------------------- */
#order-standard_cart .mc-promo .price,
.product-recommendations .product-recommendation .price,
.product-recommendations .product-recommendation .arrow,
.product-recommendations .product-recommendation .expander {
    color: var(--ss-gray-dark);   /* blue must NOT be text on light (2.70:1 fail) — gray emphasis */
}

/* MarketConnect generic accents (was #9abb3a/#99bc3a) — vendor-specific
 * card colors in all.css stay untouched by design */
#order-standard_cart .mc-promo {
    border-bottom-color: var(--ss-secondary);
}

#order-standard_cart .mc-promo .btn-add,
#order-standard_cart .mc-promo .arrow,
#order-standard_cart .mc-promo .expander {
    background-color: var(--ss-primary);
    color: var(--ss-on-primary);
}

#order-standard_cart .mc-promo .body i {
    color: var(--ss-gray-dark);   /* accent icon — gray emphasis (blue fails as light-surface text) */
}

/* ---- neutral text scale (was #666) ------------------------------------- */
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3 {
    color: var(--ss-gray-dark);
}

/* =============================================================
   5b. Cart accent surfaces (light mode)
       Standard cart ships a gray Order Summary box and white/gray
       secondary buttons; rebrand both onto the blue identity while
       keeping status badges in their semantic colors.
      ============================================================= */

/* Order Summary box: gray #666 header -> brand blue band, clean white body */
#order-standard_cart .order-summary {
    background-color: var(--ss-primary);
    border-bottom-color: var(--ss-primary-hover);
}
/* h2 is white in base (#fff) — correct per DESIGN.md 2026-10-05: every
   primary-blue fill carries a WHITE label (white on #406abf = 5.21:1, AA). */
#order-standard_cart .order-summary h2 {
    color: var(--ss-on-primary);
}
/* Summary body: white surface */
#order-standard_cart .order-summary .summary-container {
    background-color: var(--ss-surface);
}

/* Secondary action buttons: promo-code Validate, Update totals, misc.
   btn-default renders white/gray by default -> brand blue (user request). */
#order-standard_cart .btn-default,
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-default:focus,
#order-standard_cart .btn-default:active {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

/* Section headers (Categories / Actions / Choose Currency): neutralize the
   stock green accent to a subtle brand-blue underline. */
#order-standard_cart .panel-heading.card-header,
#order-standard_cart .card-header.panel-heading {
    border-bottom: 2px solid var(--ss-secondary);
}

/* View cart "Product/Options | Price/Cycle" table header: stock #058 teal ->
   brand blue band, matching the Order Summary header. */
#order-standard_cart .view-cart-items-header {
    background-color: var(--ss-primary);
    border-bottom-color: var(--ss-primary-hover);
}
/* The item list's 2px base line under the header was #058 too. */
#order-standard_cart .view-cart-items {
    border-bottom-color: var(--ss-primary);
}

/* Checkout page action buttons — light mode (both themes, both modes).
   "Already Registered?" ships as Bootstrap btn-info = off-palette teal
   (#0284c7/#5bc0de) that clashes with every other CTA on the form; align it to
   brand blue so the checkout reads as one system. Scoped to the button id, not
   .btn-info globally, so real informational badges elsewhere keep their colour. */
#order-standard_cart #btnAlreadyRegistered {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary-hover);
}
/* Empty Cart — destructive action but brand-blue fill per owner 2026-10-05 (see DESIGN.md). */
#order-standard_cart .empty-cart .btn {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

/* Create New Account (#btnNewUserSignup, class btn-warning = stock Bootstrap amber) — align to brand blue. */
#order-standard_cart #btnNewUserSignup {
    color: var(--ss-on-primary);
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

/* =============================================================
   7. Dark mode
      Reuses the same [data-theme="dark"] attribute the skylineservers theme
      sets on <html> (see whmcs-template/includes/head.tpl) — no separate
      toggle, no prefers-color-scheme fallback. The orderform has no own
      document shell, so it inherits that attribute.
      Palette: DESIGN.md DARK block (slate surfaces; brand blue identical to
      light mode — DESIGN.md 2026-10-05, no lifted blue). Every value is a token
      on the container, so flipping "inputs stay white" or tuning a surface is a
      one-line change below.
      ============================================================= */
[data-theme="dark"] #order-standard_cart {
    --ss-d-bg: #0f141b;        /* page background          */
    --ss-d-card: #161e28;      /* elevated surfaces (boxes)*/
    --ss-d-surface: #1b2430;   /* inputs / form controls   */
    --ss-d-text: #e6eaee;      /* primary text             */
    --ss-d-muted: #9aa6b2;     /* muted text               */
    --ss-d-border: #2a3441;    /* hairlines / input borders*/
    --ss-d-primary: #406abf;    /* single brand blue — identical to light (DESIGN.md 2026-10-05) */
    --ss-d-primary-hover: #3b5da8; /* hover/active (same as light token)                 */
    --ss-d-secondary: #9aa6b2; /* NEUTRAL role — quiet links/borders, per DESIGN.md dark --secondary (no second blue) */
    --ss-d-danger: #f87171;   /* status red — DESIGN.md dark block (declared for parity; no dark rule uses it yet) */

    color: var(--ss-d-text);
    background-color: var(--ss-d-bg);
}

/* Global native-control chrome: tells the UA to render <select> popups,
   scrollbars and other browser-painted surfaces in a dark palette.
   Must be unscoped (not inside #order-standard_cart) so it reaches controls
   that live outside the container — e.g. .sidebar-collapsed > select. */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Links — DESIGN.md 2026-10-05: brand blue in BOTH themes (no theme-dependent
   link color). The base theme ships legacy "a { color:#336699 }" (hover #204060),
   outside the approved palette; !important beats it regardless of load order.
   EXCLUDED here: .list-group-item — those are sidebar menu rows, not content
   links, and their labels stay neutral on purpose (base theme + wrapping
   whmcs-template §11/§11b own them: light text on the dark card, white label on
   the solid brand-blue active row). A blanket link color clobbered both — blue
   menu labels, and an unreadable blue-on-blue active row (2026-10-08 report).
   ALSO EXCLUDED: .badge — filter chips / status pills are filled controls with
   their own label+fill pairs (base theme `a.badge` + the .tld-filters block),
   and a blanket text color would clobber them too — blue-on-gray, and worse
   blue-on-blue on the brand-filled active chip (2026-10-09 report). */
#order-standard_cart a:not(.btn):not(.list-group-item):not(.badge) {
    color: var(--ss-primary) !important; /* #406abf — 5.21:1 AA on white */
}
#order-standard_cart a:not(.btn):not(.list-group-item):not(.badge):hover,
#order-standard_cart a:not(.btn):not(.list-group-item):not(.badge):focus {
    color: var(--ss-primary-hover) !important; /* #3b5da8 — 6.47:1 on white */
}
[data-theme="dark"] #order-standard_cart a:not(.btn):not(.list-group-item):not(.badge),
[data-theme="dark"] #order-standard_cart a:not(.btn):not(.list-group-item):not(.badge):hover,
[data-theme="dark"] #order-standard_cart a:not(.btn):not(.list-group-item):not(.badge):focus {
    /* single blue in both states (DESIGN.md dark block) — ~4.9:1 AA on #0f141b/#1a232e */
    color: var(--ss-d-primary) !important;
}

/* Text + headings */
[data-theme="dark"] #order-standard_cart h1,
[data-theme="dark"] #order-standard_cart h2,
[data-theme="dark"] #order-standard_cart h3,
[data-theme="dark"] #order-standard_cart .font-size-36,
[data-theme="dark"] #order-standard_cart .font-size-30 {
    color: var(--ss-d-text);
}

/* Inputs, selects, dropdowns — the surface you were unsure about.
   Recommendation: dark, not white (a white box on a slate page reads as a
   flash and breaks the "dark mode" read). To revert, set --ss-d-surface to
   #fff and --ss-d-text inside inputs back to #1f1f1f. */
[data-theme="dark"] #order-standard_cart .form-control,
[data-theme="dark"] #order-standard_cart select,
[data-theme="dark"] #order-standard_cart textarea {
    color: var(--ss-d-text);
    background-color: var(--ss-d-surface);
    border-color: var(--ss-d-border);
}
[data-theme="dark"] #order-standard_cart .form-control:focus,
[data-theme="dark"] #order-standard_cart select:focus {
    border-color: var(--ss-d-primary);
}
[data-theme="dark"] #order-standard_cart .form-control[disabled],
[data-theme="dark"] #order-standard_cart .form-control[readonly] {
    background-color: var(--ss-d-card);
    color: var(--ss-d-muted);
}

/* Domain search box (Register a New Domain page). all.min.css paints the
   .input-group-box white for both palettes — fine on light, but in dark it is
   the visible "white frame" around the field. That rule is 0-3-0; this ID-scoped
   override is 1-2-0 and loads later, so it wins without !important. The box now
   sits exactly on the input's own surface (--ss-d-surface), making field + button
   one seamless control instead of a white border ring around dark parts. */
[data-theme="dark"] #order-standard_cart .domain-checker-bg .input-group-box {
    background-color: var(--ss-d-surface);
}

/* Expanded <select> option list — Firefox (and modern Chromium) honor these;
   the native popup is otherwise drawn by the OS in light regardless of
   color-scheme. Targets both the cart-page selects and any that render
   inside .sidebar-collapsed outside the main container. */
[data-theme="dark"] #order-standard_cart select option,
[data-theme="dark"] .sidebar-collapsed select option {
    background-color: var(--ss-d-surface);
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart select option:checked,
[data-theme="dark"] .sidebar-collapsed select option:checked {
    background-color: var(--ss-d-primary);
    color: var(--ss-on-primary);
}

/* Toggle switches (bootstrapSwitch) — the "store credit card" and "join mailing
   list" checkboxes are rendered as .bootstrapSwitch widgets by the wrapping
   theme's JS (.toggle-switch-success). Base CSS gives them a white track + grey
   handles, which on the slate dark-card surface is nearly invisible: you can't
   tell where to click or what state it's in. Re-bind track and both handle
   states onto existing --ss-d-* tokens so they read as a distinct control. */
[data-theme="dark"] #order-standard_cart .bootstrap-switch {
    background-color: var(--ss-d-surface);
    border-color: var(--ss-d-border);
}
/* OFF handle — base is white-bg / dark-text (#333). We want light text on the
   surface, not a white block floating in the track. */
[data-theme="dark"] #order-standard_cart .bootstrap-switch-handle-off.bootstrap-switch-default {
    color: var(--ss-d-text);
    background-color: transparent;
}
/* ON handle — brand blue keeps every active state in the form consistent,
   white label per DESIGN.md 2026-10-05. */
[data-theme="dark"] #order-standard_cart .bootstrap-switch-handle-on.bootstrap-switch-success {
    color: var(--ss-on-primary);
    background-color: var(--ss-d-primary);
}

/* Order Summary box in dark: blue band stays (brand), body goes to card */
[data-theme="dark"] #order-standard_cart .order-summary {
    background-color: var(--ss-d-primary);
    border-bottom-color: var(--ss-d-primary-hover);
}
[data-theme="dark"] #order-standard_cart .order-summary .summary-container {
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart .order-summary .subtotal,
[data-theme="dark"] #order-standard_cart .order-summary .bordered-totals,
[data-theme="dark"] #order-standard_cart .order-summary .summary-totals {
    border-top-color: var(--ss-d-border);
    border-bottom-color: var(--ss-d-border);
}
[data-theme="dark"] #order-standard_cart .order-summary .recurring-charges {
    color: var(--ss-d-muted);
}
[data-theme="dark"] #order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--ss-d-secondary);
}

/* ── Domain register — pricing table (base is light-only; flip to dark tokens) ──
   The wrapper <div class="bg-white"> carries Bootstrap's `background:#fff !important`,
   which nothing in the theme rebinds. Combined with [data-theme="dark"] #order-standard_cart
   flipping text to light (#e6eaee), that yields the washed-out / near-invisible rows in the
   screenshot. Re-bind container, hairlines, header band and accent onto --ss-d-* tokens. */
[data-theme="dark"] #order-standard_cart .domain-pricing .bg-white {
    background: var(--ss-d-card) !important; /* #161e28 — the box IS an elevated surface (card). Same specificity as Bootstrap .bg-white, later in cascade wins */
}
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row {
    border-bottom-color: var(--ss-d-border); /* was #f5f5f5 hairline (invisible on dark) */
}
/* Column-header strip + highlighted/hover rows sit one step LIGHTER than the box body so a hovered row reads as raised, not recessed. Was light grays (#efefef / #f3f9fd). */
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row.highlighted {
    background: var(--ss-d-surface); /* #1b2430 — hover/selected lift over the #161e28 body */
}
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-sm-4,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: var(--ss-d-surface); /* was #efefef / #f5f5f5 header band */
}
/* Blue accent under the column headers (was #97b5d2). */
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4,
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header .col-sm-4 {
    border-bottom-color: var(--ss-d-primary); /* #406abf */
}
/* TLD-column divider (was #c7d7e6). */
[data-theme="dark"] #order-standard_cart .domain-pricing .two-row-center {
    border-right-color: var(--ss-d-border);
}
/* Per-year labels under each price — Bootstrap <small> gray, sub-AA on dark. */
[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row small {
    color: var(--ss-d-muted); /* #9aa6b2 */
}

/* ── Domain register — "Add Web Hosting" / "Transfer your domain" promo boxes ──
   Base (.domain-promo-box) hardcodes background:#f9f9f9, border:#ddd, color:#333 with no
   dark rule, so in dark mode they render as bright light islands on the slate page. Bind
   them onto --ss-d-* like every other card on this page. */
[data-theme="dark"] #order-standard_cart .domain-promo-box {
    background-color: var(--ss-d-card); /* was #f9f9f9 — box body (elevated surface) */
    border-color: var(--ss-d-border);   /* was #ddd hairline border                  */
    color: var(--ss-d-text);            /* was #333; headings inherit this            */
}
[data-theme="dark"] #order-standard_cart .domain-promo-box .small {
    color: var(--ss-d-muted);           /* was #999 footnote, sub-AA on dark          */
}

/* View cart table header in dark: lifted brand blue, same as Order Summary */
[data-theme="dark"] #order-standard_cart .view-cart-items-header {
    background-color: var(--ss-d-primary);
    border-bottom-color: var(--ss-d-primary-hover);
}
[data-theme="dark"] #order-standard_cart .view-cart-items {
    border-bottom-color: var(--ss-d-primary);
}

/* View cart item rows (the product/options body). Base CSS paints them white
   (#fff / zebra #eee) with dark text — on the slate page this is a white box
   with near-invisible light inherited text. Re-bind to card tokens; zebra uses
   the slightly-differing --ss-d-surface so rows still alternate visually. */
[data-theme="dark"] #order-standard_cart .view-cart-items .item {
    background-color: var(--ss-d-card);
}
[data-theme="dark"] #order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--ss-d-surface);
}
/* Item text: base CSS inherits --ss-d-text (#e6eaee) on white, which is the
   unreadable state. On a dark card the same #e6eaee reads fine, but ensure
   no leftover light-specific rule (e.g. .item-group or small option lines that
   base style.css sets to specific grey) drops below AA. */
[data-theme="dark"] #order-standard_cart .view-cart-items .item-title {
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart .view-cart-items .item-group {
    color: var(--ss-d-muted);
}
[data-theme="dark"] #order-standard_cart .view-cart-items .item-domain,
[data-theme="dark"] #order-standard_cart .view-cart-items small {
    color: var(--ss-d-muted);
}
/* Edit link inside the item row (.btn-link) — already covered by the global
   btn-link dark rule above (secondary blue), no need to re-assert. */


/* Buttons in dark: single brand blue — identical fill to light mode
   (DESIGN.md: one blue, both themes), white label per 2026-10-05.
   Covers every CTA class — unified, no gray/white tier. */
[data-theme="dark"] #order-standard_cart .btn-success,
[data-theme="dark"] #order-standard_cart .btn-default,
[data-theme="dark"] #order-standard_cart .btn-transfer,
[data-theme="dark"] #order-standard_cart .btn-primary,
[data-theme="dark"] #order-standard_cart .btn-add-renewal-to-cart,
[data-theme="dark"] #order-standard_cart .mc-promo .btn-add,
[data-theme="dark"] #order-standard_cart .mc-promo .arrow,
[data-theme="dark"] #order-standard_cart .mc-promo .expander {
    color: var(--ss-on-primary);
    background-color: var(--ss-d-primary);
    border-color: var(--ss-d-primary);
}
[data-theme="dark"] .spotlight-tld .btn:not(.domain-contact-support),
[data-theme="dark"] .suggested-domains .btn:not(.domain-contact-support) {
    color: var(--ss-on-primary);
    background-color: var(--ss-d-primary);
    border-color: var(--ss-d-primary);
}
[data-theme="dark"] #order-standard_cart .btn-link {
    color: var(--ss-d-secondary);
}

/* Already Registered? — dark mode: brand blue fill + white label (DESIGN.md 2026-10-05). */
[data-theme="dark"] #order-standard_cart #btnAlreadyRegistered {
    color: var(--ss-on-primary);
    background-color: var(--ss-d-primary);
    border-color: var(--ss-d-primary-hover);
}
/* Empty Cart — brand-blue fill + dark label (matches light mode, DESIGN.md). */
[data-theme="dark"] #order-standard_cart .empty-cart .btn {
    color: var(--ss-on-primary);
    background-color: var(--ss-d-primary);
    border-color: var(--ss-d-primary);
}

/* Section headers in dark */
[data-theme="dark"] #order-standard_cart .panel-heading.card-header,
[data-theme="dark"] #order-standard_cart .card-header.panel-heading {
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
    border-bottom: 2px solid var(--ss-d-secondary);
}

/* Sidebar menu items (Categories / Actions panels) — Bootstrap's .list-group-item
   sets explicit background:#fff which blocks the dark text-inheritance, leaving
   light-on-light. Override with card tokens; HOVER = button-like in both themes
   (brand blue fill + white label); active stays solid brand blue. */
[data-theme="dark"] #order-standard_cart .cart-sidebar .card,
[data-theme="dark"] #order-standard_cart .cart-sidebar .panel {
    background-color: var(--ss-d-card);
    border-color: var(--ss-d-border);
}
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item,
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item-action {
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
    border-color: var(--ss-d-border);
}
/* Hover — button-like in BOTH themes: brand blue fill + white label (5.21:1 AA).
   :focus mirrors hover so keyboard navigation gets the same visible state
   (WCAG 2.2 AA focus visibility; rows are tabbable links). Specificity beats
   the base theme's .list-group-item-action:hover (#f8f9fa lift, gray label);
   the .active rule below carries equal specificity and sits later in the file,
   so an already-active row keeps its own fill on hover (identical look now). */
#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item-action:hover,
#order-standard_cart .cart-sidebar .list-group-item:focus,
#order-standard_cart .cart-sidebar .list-group-item-action:focus {
    background-color: var(--ss-primary);  /* #406abf */
    color: var(--ss-on-primary);          /* white — AA on the fill */
    border-color: var(--ss-primary);
}
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item:hover,
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item-action:hover,
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item:focus,
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item-action:focus {
    background-color: var(--ss-d-primary); /* #406abf — same fill both themes */
    color: var(--ss-on-primary);           /* white — AA on the fill */
    border-color: var(--ss-d-primary);
}
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active,
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item-action.active {
    background-color: var(--ss-d-primary);
    color: var(--ss-on-primary);
    border-color: var(--ss-d-primary);
}

/* Cart item / product rows so the list reads dark, not white-on-dark */
[data-theme="dark"] #order-standard_cart .cart-items .item,
[data-theme="dark"] #order-standard_cart .product-recommendation,
[data-theme="dark"] #order-standard_cart .mc-promo {
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
    border-color: var(--ss-d-border);
}

/* Store / category product cards (products.tpl) — base style.css paints them
   #fff with a #f8f8f8 header band and #333/#888 text, so they render as bright
   boxes on the slate page in dark mode. Map onto the same card tokens. */
[data-theme="dark"] #order-standard_cart .products .product {
    background-color: var(--ss-d-card);
    border-color: var(--ss-d-border);
    color: var(--ss-d-text);
}
/* Title band: lifted surface so it reads as a header, not a flash of white. */
[data-theme="dark"] #order-standard_cart .products .product header {
    background-color: var(--ss-d-surface);
    border-radius: 3px 3px 0 0;
}
/* Product name (#333) and stock qty (#888) inherit the light text scale. */
[data-theme="dark"] #order-standard_cart .products .product header span {
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart .products .product header .qty {
    color: var(--ss-d-muted);
}

/* View cart tabs + promo-code box — base style.css uses #f8f8f8 tab panels and
   a #fff dashed promo box; both read white on the dark page. (Promo box was the
   earlier "apply promo code in dark" ask left unapplied.) */
[data-theme="dark"] #order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--ss-d-card);
}
[data-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
[data-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    border-color: var(--ss-d-border) var(--ss-d-border) var(--ss-d-card);
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart .view-cart-promotion-code {
    background-color: var(--ss-d-surface);
    border-color: var(--ss-d-border);
    color: var(--ss-d-text);
}

/* =============================================================
   7y. Configure product page (configureproduct.tpl) — dark mode
      The base style.css paints this page light-only and its labels /
      help text in dim grays, none of which the rules above re-theme, so
      on the slate page they read out-of-sync: a light #f8f8f8 product-info
      box + white addon cards, and hard-to-read field labels. Bind every one
      onto the existing --ss-d-* tokens (defined at the top of this block).
   ============================================================= */

/* Section dividers around these groups (Choose Billing Cycle / Configure
   Your Server / Addons / Location …): base 1px #DDD is a bright hairline on
   slate, so drop it onto the dark border token. */
[data-theme="dark"] #order-standard_cart .sub-heading {
    border-top-color: var(--ss-d-border);
}

/* Field labels + option names (Choose Billing Cycle, Hostname, Root Password,
   NS1/NS2 Prefix, Additional IPv4, OS Selection, Management Options, Location,
   custom-field names). Base label #666 is too dim on slate. Use pure white:
   form field labels are the primary reading text and base CSS sets them at
   font-weight 300 / 13px where DESIGN.md's general text token (#e6eaee) reads
   faint against the slate background — white gives maximum perceived contrast. */
[data-theme="dark"] #order-standard_cart label {
    color: #fff;
}

/* Help / description text under fields (base #888) -> muted scale. */
[data-theme="dark"] #order-standard_cart .field-help-text {
    color: var(--ss-d-muted);
}

/* Product info box at the top of .secondary-cart-body (base #f8f8f8 band). */
[data-theme="dark"] #order-standard_cart .product-info {
    background-color: var(--ss-d-card);
    border-top-color: var(--ss-d-border);
    border-bottom-color: var(--ss-d-border);
    color: var(--ss-d-text);
}
[data-theme="dark"] #order-standard_cart .product-info .product-title {
    color: var(--ss-d-text);
}

/* Addon cards (base .card white body, name label #333, price strip #e8e8e8).
   Card + body -> elevated surface; name -> primary text; description -> muted. */
[data-theme="dark"] #order-standard_cart .panel-addon,
[data-theme="dark"] #order-standard_cart .panel-addon .card-body {
    background-color: var(--ss-d-card);
    border-color: var(--ss-d-border);
}
[data-theme="dark"] #order-standard_cart .panel-addon .card-body label {
    color: var(--ss-d-text);
}
/* Addon price strip: subtle lifted surface with muted text (price is secondary). */
[data-theme="dark"] #order-standard_cart .panel-addon .panel-price {
    background-color: var(--ss-d-surface);
    color: var(--ss-d-muted);
}
/* "Selected" addon outline (base #bbb) so the checked state still reads. */
[data-theme="dark"] #order-standard_cart .panel-addon-selected {
    border-color: var(--ss-d-primary);
}

/* --------------------------------------------------------------------------
   MARKETCONNECT VENDOR STORE PANELS (SpamExperts, SiteLock, NordVPN…) — dark
   Root is <div class="landing-page bg-white mail-services"> with Bootstrap 3
   .bg-white{#fff}; store.css hardcodes color:#333 on .hero. On the slate page
   this renders as a stark white box with near-invisible #333-on-light text
   that inherits to white. Re-bind surfaces + text to --ss-d-* tokens here in
   the ORDERFORM's custom.css (this is the stylesheet loaded on cart.php pages).
   Specificity: [data-theme="dark"] .landing-page (0-2-1) > store.css (0-1-1);
   loads after store.css so it wins a tie too.
   -------------------------------------------------------------------------- */

/* Root white panel → dark card surface. Also covers child .bg-white divs. */
[data-theme="dark"] .landing-page.bg-white,
[data-theme="dark"] .landing-page .bg-white {
    background-color: var(--ss-d-card);
}

/* Hero section: store.css sets color:#333; flip to primary text on dark bg. */
[data-theme="dark"] .landing-page .hero,
[data-theme="dark"] .landing-page .hero h2,
[data-theme="dark"] .landing-page .hero h3 {
    color: var(--ss-d-text);
}

/* Navbar inside the panel (Bootstrap navbar-light bg-light = white + rgba(0,0,0,.5) text). */
[data-theme="dark"] .landing-page .navbar-light.bg-light {
    background-color: var(--ss-d-surface);
    border-bottom: 1px solid var(--ss-d-border);
}
[data-theme="dark"] .landing-page .navbar-light .nav-link,
[data-theme="dark"] .landing-page .navbar-light .navbar-brand {
    color: var(--ss-d-text);
}

/* Product-option section text (store.css sets h4/span/p to inherit; on white
   that was dark-on-white — now need light-on-dark). */
[data-theme="dark"] .landing-page .product-options h2,
[data-theme="dark"] .landing-page .product-options h3,
[data-theme="dark"] .landing-page .product-options h4,
[data-theme="dark"] .landing-page .product-options span,
[data-theme="dark"] .landing-page .product-options p {
    color: var(--ss-d-text);
}

/* The mail-services product-options band is #00acd4 (teal) with white text in
   store.css — that's a brand-colored CTA section, keep it as-is. But the
   non-mail-services variant of .product-options may inherit the dark card bg
   above; ensure its text still reads. */
[data-theme="dark"] .landing-page:not(.mail-services) .product-options {
    background-color: var(--ss-d-card);
}

/* FAQ / pricing sub-sections: white backgrounds that store.css sets on child divs. */
[data-theme="dark"] .landing-page .faq,
[data-theme="dark"] .landing-page .pricing,
[data-theme="dark"] .landing-page .how-it-works {
    background-color: var(--ss-d-card);
    color: var(--ss-d-text);
}
[data-theme="dark"] .landing-page h1,
[data-theme="dark"] .landing-page h2,
[data-theme="dark"] .landing-page h3,
[data-theme="dark"] .landing-page h4,
[data-theme="dark"] .landing-page p,
[data-theme="dark"] .landing-page span:not(.navbar-brand) {
    color: var(--ss-d-text);
}

/* CTA buttons inside the panel (btn-buy / btn-learn-more from store.css). */
[data-theme="dark"] .landing-page .btn-buy,
[data-theme="dark"] .landing-page .btn-primary {
    color: #fff;
}
[data-theme="dark"] .landing-page .btn-learn-more {
    color: var(--ss-d-text);
    border-color: var(--ss-d-border);
}