/* Veil overrides for the standard_cart order-form theme. Reads the client-area
   theme's --fused-* tokens, which already carry both light and dark values
   (set on :root and swapped by html[data-fused-theme="light"] in Veil's
   css/custom.css), so this file follows
   whichever theme is active with no light/dark branching of its own.
   Loaded via common.tpl's `{assetExists file="custom.css"}` check, after
   style.css/all.css, so these rules win by cascade order without needing
   higher specificity. The fallbacks use Veil's dark palette so a standalone
   order-form preview remains visually coherent.

   Scope: the renewal cart flow, the storefront product listing, checkout,
   product/domain configuration, the domain search + TLD pricing UI
   (domainregister.tpl / domaintransfer.tpl / configuredomains.tpl and the
   shared checker widget), and linkedaccounts.tpl — all covered below.
   addons.tpl, complete.tpl, fraudcheck.tpl, and error.tpl needed no fixes:
   they only use components already covered elsewhere in this file or by
   the client-area theme's own global custom.css. */

#order-standard_cart {
    color: var(--fused-text, #edeef4);
    font-family: var(--fused-font-body, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5,
#order-standard_cart h6 {
    color: var(--fused-text, #edeef4);
    font-family: var(--fused-font-display, "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif);
}

#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .products .product,
#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-promo-box {
    border-radius: var(--fused-radius, 14px);
}

#order-standard_cart .btn,
#order-standard_cart .form-control,
#order-standard_cart .field,
#order-standard_cart .custom-select {
    border-radius: var(--fused-radius-sm, 9px);
}

#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
#order-standard_cart .service-renewals .div-renewal-period-label {
    color: var(--fused-muted, #969ab0);
    font-weight: 500;
}

#order-standard_cart .cart-sidebar .card,
#order-standard_cart .sidebar-collapsed .card {
    overflow: hidden;
    border: 1px solid var(--fused-border, #2a2c3b);
    border-radius: var(--fused-radius, 14px);
    background: var(--fused-surface, #14151f);
    box-shadow: var(--fused-shadow, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55));
}

#order-standard_cart .cart-sidebar .list-group-item {
    border-color: var(--fused-border, #2a2c3b);
    background: transparent;
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item:focus,
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: rgba(var(--fused-cyan-rgb, 0, 215, 215), 0.12);
    color: var(--fused-cyan-ink, #4fe6e6);
}

.service-renewals,
.domain-renewals {
    background-color: transparent;
    border-top-color: var(--fused-border, #2a2c3b);
}

.service-renewals .service-renewal,
.domain-renewals .domain-renewal,
.addon-renewals .service-renewal {
    margin-bottom: 0.7rem;
    border: 1px solid var(--fused-border, #2a2c3b);
    border-bottom: 1px solid var(--fused-border, #2a2c3b);
    border-radius: var(--fused-radius, 14px);
    background-color: var(--fused-surface, #14151f);
    box-shadow: var(--fused-shadow, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55));
}

.service-renewals .service-renewal:nth-child(even),
.domain-renewals .domain-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: var(--fused-surface, #14151f);
}

.addon-renewals > div {
    border-color: var(--fused-border, #2a2c3b);
}

.service-renewals .div-renewal-period-label,
.service-renewals .div-renewal-ineligible {
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .order-summary {
    background-color: var(--fused-surface-soft, #1b1d29);
    border: 1px solid var(--fused-border, #2a2c3b);
    border-bottom: 1px solid var(--fused-border, #2a2c3b);
    box-shadow: var(--fused-shadow, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55));
}

#order-standard_cart .order-summary h2 {
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .summary-container {
    background-color: var(--fused-surface, #14151f);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .summary-totals {
    border-color: var(--fused-border, #2a2c3b);
}

#order-standard_cart .order-summary .recurring-charges {
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--fused-text, #edeef4);
}

/* Storefront (products.tpl): vendor markup lays out each plan with floats
   (a light-gray header band, a 60/40 description/pricing split) built for
   a light page, with no color set on the card itself — same white-box-on-
   dark-theme pattern as the renewal cards above. Flexing the card into a
   column instead of clearing floats keeps every element (and its id, which
   the recommendations-modal/cart JS targets) exactly where the template
   puts it — only the layout direction and colors change. */
#order-standard_cart .header-lined {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fused-border, #2a2c3b);
}

#order-standard_cart .header-lined h1 {
    margin: 0 0 0.4rem;
    color: var(--fused-text, #edeef4);
    letter-spacing: -0.02em;
}

#order-standard_cart .header-lined p {
    margin: 0;
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background: var(--fused-surface, #14151f);
    border: 1px solid var(--fused-border, #2a2c3b);
    border-radius: var(--fused-radius, 14px);
    box-shadow: var(--fused-shadow, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55));
}

#order-standard_cart .products .product header {
    margin: 0;
    padding: 1.1rem 1.35rem;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--fused-border, #2a2c3b);
}

#order-standard_cart .products .product header span {
    color: var(--fused-text, #edeef4);
    font-size: 1.15rem;
    font-weight: 700;
}

#order-standard_cart .products .product header .qty {
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .products .product div.product-desc,
#order-standard_cart .products .product div.product-desc-full-width {
    float: none;
    flex: 1;
    width: auto;
    padding: 1rem 1.35rem 0;
    font-size: 0.85rem;
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .products .product div.product-desc ul {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#order-standard_cart .products .product div.product-desc li {
    position: relative;
    padding-left: 1.3rem;
    color: var(--fused-text, #edeef4);
    font-size: 0.85rem;
}

#order-standard_cart .products .product div.product-desc li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: rgba(var(--fused-cyan-rgb, 0, 215, 215), 0.55);
}

#order-standard_cart .products .product span.feature-value {
    color: var(--fused-text, #edeef4);
    font-weight: 700;
}

#order-standard_cart .products .product div.product-pricing {
    margin: 0;
    padding: 1.1rem 1.35rem 0;
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .products .product div.product-pricing span.price {
    font-size: 1.9rem;
    font-weight: 700;
}

#order-standard_cart .products .product footer {
    float: none;
    width: auto;
    margin: 1.1rem 1.35rem 1.35rem;
    text-align: left;
    font-size: 0.85rem;
}

#order-standard_cart .products .product footer .btn-order-now {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    font-weight: 700;
}

/* Checkout form (checkout.tpl): every input carries WHMCS's own `.field`
   class alongside `.form-control`, and `#order-standard_cart .field,
   #order-standard_cart .form-control { background:#fff; color:#626262; }` is ID
   + class — higher specificity than the client-area theme's
   `body.fused-whmcs .form-control` (two classes), so it wins regardless of
   load order. Matching that same #order-standard_cart-scoped specificity here
   (and relying on this file loading after style.css) is what lets the
   override actually stick. */
#order-standard_cart .field,
#order-standard_cart .form-control {
    background-color: var(--fused-surface, #14151f);
    border-color: var(--fused-border-strong, #3c3e50);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .form-control:focus {
    border-color: rgba(var(--fused-purple-rgb, 178, 61, 255), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--fused-purple-rgb, 178, 61, 255), 0.1);
}

#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
    background-color: var(--fused-surface-soft, #1b1d29);
}

#order-standard_cart .field-icon i {
    color: var(--fused-muted, #969ab0);
}

/* "Switch Account" step: existing-account cards were plain light grays with
   no dark-theme counterpart. */
#order-standard_cart .account-select-container {
    border-right-color: var(--fused-border, #2a2c3b);
}

#order-standard_cart .account-select-container div.account {
    background: var(--fused-surface-soft, #1b1d29);
    border-color: var(--fused-border, #2a2c3b);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .account-select-container div.account.active {
    background: var(--fused-surface, #14151f);
}

#order-standard_cart .cc-input-container .existing-cc-grid {
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .sub-heading {
    border-top-color: var(--fused-border, #2a2c3b);
}

/* Configure Product page: the "you're configuring X" strip and the addon
   cards' price sub-box are plain divs (not .card), so they don't pick up
   the client-area theme's dark .card theming and keep vendor's hardcoded
   light grays regardless of theme. The addon card itself IS a .card and
   does get dark-themed globally, but its label text color is set here
   specifically to #333, which still renders as dark-on-dark. */
#order-standard_cart .product-info {
    background-color: var(--fused-surface-soft, #1b1d29);
    border-color: var(--fused-border, #2a2c3b);
}

#order-standard_cart .panel-addon .panel-body label {
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .panel-addon .panel-price {
    background-color: var(--fused-surface-soft, #1b1d29);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .panel-addon-selected {
    border-color: var(--fused-border-strong, #3c3e50);
}

/* Choose-a-domain radio picker (configureproductdomain.tpl): each option row
   and its "selected" state are plain light-gray fills with no dark-theme
   counterpart. Scoped narrowly to .domain-selection-options — this file
   intentionally does not touch the shared domain-search widget (spotlight
   TLDs, suggestion list, availability-checker states) that also lives under
   configureproductdomain.tpl/domainregister.tpl/domaintransfer.tpl. */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--fused-surface-soft, #1b1d29);
}

#order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--fused-surface, #14151f);
    box-shadow: inset 0 0 0 1px var(--fused-border-strong, #3c3e50);
}

/* "Sign up" / "Or" divider labels above the social-sign-in buttons
   (linkedaccounts.tpl) are a hardcoded dark navy (#058), illegible on this
   theme's near-black background. Same light/dark-safe purple-then-cyan
   split already used for links and accents throughout the fused-whmcs
   client-area theme, since a single color can't stay legible on both a
   white and a near-black page background. */
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: var(--fused-cyan-ink, #4fe6e6);
}

html[data-fused-theme="light"] #order-standard_cart .sub-heading span,
html[data-fused-theme="light"] #order-standard_cart .sub-heading-borderless span {
    color: var(--fused-purple-ink, #8b17d6);
}

/* Domain search UI (domainregister.tpl / domaintransfer.tpl /
   configuredomains.tpl and the shared checker widget they all pull in).
   The whole TLD pricing table sits inside Bootstrap's `.bg-white` utility
   class, which is `!important` and would otherwise force a solid white
   panel into the middle of the page regardless of theme — the single
   biggest mismatch on these pages. The search bar's own white pill
   (.input-group-box), the spotlight TLD tiles, the domain promo boxes, and
   the suggestions loader are the same "vendor light card on our dark page"
   pattern fixed everywhere else in this theme. The new/sale/hot ribbon
   badges retain their distinct semantic colors. */
#order-standard_cart .bg-white {
    background-color: var(--fused-surface, #14151f) !important;
}

#order-standard_cart .domain-checker-container {
    overflow: hidden;
    border: 1px solid var(--fused-border-strong, #3c3e50);
    background: linear-gradient(
        135deg,
        rgba(var(--fused-purple-rgb, 178, 61, 255), 0.22),
        rgba(var(--fused-cyan-rgb, 0, 215, 215), 0.14)
    );
    box-shadow: var(--fused-shadow, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55));
}

#order-standard_cart .domain-checker-container .input-group-box {
    background-color: var(--fused-surface, #14151f);
}

#order-standard_cart .domain-pricing .tld-row {
    border-bottom-color: var(--fused-border, #2a2c3b);
}

#order-standard_cart .domain-pricing .tld-row.highlighted {
    background: rgba(var(--fused-purple-rgb, 178, 61, 255), 0.08);
}

#order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4,
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-4,
#order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: var(--fused-surface-soft, #1b1d29);
    border-bottom-color: var(--fused-purple, #b23dff);
}

#order-standard_cart .domain-pricing .two-row-center {
    border-right-color: var(--fused-border, #2a2c3b);
}

#order-standard_cart .spotlight-tlds {
    background-color: var(--fused-surface-soft, #1b1d29);
}

#order-standard_cart .spotlight-tld-container,
#order-standard_cart .spotlight-tld {
    background-color: var(--fused-surface, #14151f);
    border-color: var(--fused-border, #2a2c3b);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .spotlight-tld-container {
    border-radius: var(--fused-radius-sm, 9px);
}

#order-standard_cart .spotlight-tld .unavailable,
#order-standard_cart .spotlight-tld .invalid {
    background-color: var(--fused-surface-soft, #1b1d29);
    border-color: var(--fused-border, #2a2c3b);
    color: var(--fused-muted, #969ab0);
}

#order-standard_cart .suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--fused-surface-soft, #1b1d29);
}

#order-standard_cart .suggested-domains .list-group-item {
    border-color: var(--fused-border, #2a2c3b);
    background-color: var(--fused-surface, #14151f);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .domain-promo-box {
    background-color: var(--fused-surface-soft, #1b1d29);
    border-color: var(--fused-border, #2a2c3b);
    color: var(--fused-text, #edeef4);
}

#order-standard_cart .domain-promo-box .small {
    color: var(--fused-muted, #969ab0);
}