/* ==========================================================================
   BrackNodes brand skin for the WHMCS order forms / shopping cart
   (bracknodes_cart, copied from standard_cart). CSS-only override via
   WHMCS's own {assetExists file="custom.css"} hook - core template/CSS,
   routes and cart/payment logic are untouched; this file only changes
   layout, spacing and visual styling.

   Layout approach: the underlying markup uses Bootstrap 4's flex .row +
   float-ish column classes (.cart-sidebar/.cart-body/.secondary-cart-body/
   .secondary-cart-sidebar). Rather than fight that, the two structural
   rows are switched to CSS Grid directly:
     #order-standard_cart > .row            -> [sidebar] [cart-body]
     #order-standard_cart .cart-body > .row -> [cart content] [order summary]
   which reads as one flexible 3-column layout end to end.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --bn-bg: #0a0f1a;
    --bn-bg-alt: #0b1220;
    --bn-bg-card: #0f1729;
    --bn-bg-hover: #142036;
    --bn-border: rgba(255, 255, 255, .08);
    --bn-border-strong: rgba(255, 255, 255, .16);
    --bn-text: #ffffff;
    --bn-text-muted: rgba(255, 255, 255, .65);
    --bn-brand-400: #54a5ff;
    --bn-brand-500: #2d8bff;
    --bn-brand-600: #1e6fe6;
    --bn-emerald: #34d399;
    --bn-amber: #fbbf24;
    --bn-rose: #f43f5e;
    --bn-radius-lg: 1rem;
    --bn-radius-md: .75rem;
    --bn-radius-sm: .5rem;
    --bn-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    --bn-gap: 24px;
}

/* ---------- Renew Service page (service-renewals.tpl / service-renewal-item.tpl) ----------
   Core CSS gives this whole list a light-page background (#f8f8f8, even
   rows #f4f4f4) with #ccc borders and #666 text - never themed here, so
   every renewable service showed as a near-white card with barely-visible
   white text on top of it. */
.service-renewals {
    background-color: transparent !important;
    border-top-color: var(--bn-border) !important;
}
.service-renewals .service-renewal {
    border-bottom-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
.service-renewals .service-renewal:nth-child(even) {
    background-color: var(--bn-bg-card) !important;
}
.service-renewals .div-renewal-period-label,
.service-renewals .div-renewal-ineligible,
.service-renewals .div-renewal-ineligible i {
    color: var(--bn-text-muted) !important;
}
.service-renewals-filter {
    background-color: var(--bn-bg-card) !important;
    color: var(--bn-text) !important;
    border: 1px solid var(--bn-border) !important;
}

/* ---------- Global resets ---------- */
:root { color-scheme: dark; }
select,
select option,
.form-control option {
    color-scheme: dark;
    -webkit-text-fill-color: var(--bn-text) !important;
    color: var(--bn-text) !important;
    background-color: var(--bn-bg-alt) !important;
}
.iti-flag { background-blend-mode: normal !important; filter: none !important; }
body {
    background-color: var(--bn-bg) !important;
    color: var(--bn-text) !important;
}
/* Transparent, not its own flat color - the client-area theme's body
   already paints the page background (including its subtle gradient
   glow), so #order-standard_cart just shows that through rather than
   risking a visible seam between two separately-colored layers. */
#order-standard_cart {
    background-color: transparent !important;
    color: var(--bn-text) !important;
}
#order-standard_cart .field,
#order-standard_cart .form-control,
#order-standard_cart textarea {
    background-color: var(--bn-bg-alt) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: var(--bn-radius-sm) !important;
}
/* The "AI keyword domain search" box (#message, configureproductdomain.tpl)
   is a bare <textarea> with no class at all, so it got none of the styling
   above and fell back to the browser's own default rendering - with no
   explicit colours set, Chromium's auto-dark-mode heuristic re-colours
   unstyled form fields itself, which is what produced that muddy
   brown/olive box instead of a real dark input. */
#order-standard_cart textarea::placeholder {
    color: var(--bn-text-muted) !important;
}

/* "Choose a Domain" page (configureproductdomain.tpl) - the three
   Register/Transfer/Use-existing-domain rows had a light-page background
   (#f8f8f8, selected #efefef) with no hover feedback at all, so they read
   as flat, barely-distinguishable text instead of clickable options - and
   nothing made the currently-selected one stand out. */
.domain-selection-options .option {
    background-color: var(--bn-bg-alt) !important;
    border: 1px solid var(--bn-border) !important;
    padding: 14px 20px !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.domain-selection-options .option:hover {
    background-color: var(--bn-bg-card) !important;
    border-color: var(--bn-border-strong) !important;
}
.domain-selection-options .option-selected {
    background-color: rgba(45, 139, 255, .1) !important;
    border-color: var(--bn-brand-500) !important;
}
.domain-selection-options .option-selected label {
    color: var(--bn-brand-400) !important;
}
.domain-selection-options .option label {
    margin: 0;
    width: 100%;
    cursor: pointer;
}
#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(--bn-bg) !important;
}
#order-standard_cart a { color: var(--bn-brand-400); }
#order-standard_cart a:hover { color: var(--bn-brand-400); }
#order-standard_cart *:focus-visible {
    outline: 2px solid var(--bn-brand-400);
    outline-offset: 2px;
}

/* ==========================================================================
   PAGE FRAME - centered max-width, no dead margins, no stray row gutters
   ========================================================================== */
#order-standard_cart {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 24px 48px;
}
/* Neutralise Bootstrap's flex .row negative gutter margins everywhere in
   this page - spacing is controlled explicitly via gap/padding below, so
   the auto-gutter trick (which was pushing content past card edges) isn't
   needed. */
#order-standard_cart .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Outer structural row: [ sidebar | cart body ] */
#order-standard_cart > .row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--bn-gap);
    align-items: start;
}
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

/* ==========================================================================
   SIDEBAR (Categories / Actions) - one compact card, sections not boxes
   ========================================================================== */
#order-standard_cart .cart-sidebar {
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow) !important;
    overflow: hidden;
    align-self: start;
}
#order-standard_cart .cart-sidebar .card.card-sidebar {
    background-color: var(--bn-bg-card) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
#order-standard_cart .cart-sidebar .card.card-sidebar + .card.card-sidebar {
    border-top: 1px solid var(--bn-border) !important;
}
#order-standard_cart .cart-sidebar .card-header {
    border-bottom: 1px solid var(--bn-border) !important;
    padding: 12px 16px !important;
}
#order-standard_cart .cart-sidebar .card-title {
    color: var(--bn-text-muted) !important;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
}
#order-standard_cart .cart-sidebar .list-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--bn-border) !important;
    color: var(--bn-text-muted) !important;
    padding: 10px 16px;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
}
#order-standard_cart .cart-sidebar .list-group-item i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
#order-standard_cart .cart-sidebar .list-group-item:first-child { border-top: none !important; }
#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item.active {
    background-color: var(--bn-bg-hover) !important;
    color: var(--bn-brand-400) !important;
}
#order-standard_cart .sidebar-categories {
    background-color: var(--bn-bg-card) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
@media (max-width: 991px) {
    #order-standard_cart > .row { grid-template-columns: 1fr; }
    #order-standard_cart .cart-sidebar { display: none !important; }
}

/* ==========================================================================
   BREADCRUMB + PAGE TITLE ("Shopping Cart" / "Review & Checkout")
   ========================================================================== */
#order-standard_cart .header-lined {
    border-bottom: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    padding-bottom: 12px;
    margin-bottom: 16px;
}
#order-standard_cart .header-lined h1 {
    color: var(--bn-text) !important;
    font-weight: 800;
    font-size: 28px !important;
    margin: 0;
}

/* ==========================================================================
   CART BODY - inner grid: [ cart content | order summary ]
   ========================================================================== */
#order-standard_cart .cart-body > .row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--bn-gap);
    align-items: start;
}
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}
@media (max-width: 991px) {
    #order-standard_cart .cart-body > .row { grid-template-columns: 1fr; }
}

/* Cart content card */
#order-standard_cart .secondary-cart-body {
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow) !important;
    padding: 20px 24px !important;
}
#order-standard_cart .view-cart-items-header {
    color: var(--bn-text-muted) !important;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--bn-border) !important;
    padding-bottom: 12px;
    margin-bottom: 4px;
}
#order-standard_cart .view-cart-items .item {
    border-bottom: 1px solid var(--bn-border) !important;
    padding: 16px 0 !important;
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: none !important; }
#order-standard_cart .item-title { color: var(--bn-text) !important; font-weight: 600; }

/* Empty cart state - compact, centered, no huge dead area below it */
#order-standard_cart .view-cart-items {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#order-standard_cart .view-cart-empty {
    text-align: center;
    padding: 24px 16px !important;
    color: var(--bn-text-muted) !important;
}
#order-standard_cart .view-cart-empty .bn-empty-cart-icon {
    display: block;
    font-size: 2.5rem;
    color: var(--bn-text-muted);
    opacity: .35;
    margin: 0 auto 16px;
}
#order-standard_cart .view-cart-empty .bn-empty-title {
    color: var(--bn-text);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 6px;
}
#order-standard_cart .view-cart-empty .bn-empty-sub {
    font-size: .88rem;
    margin: 0 0 20px;
}
#order-standard_cart .view-cart-empty .bn-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600));
    color: #fff !important;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--bn-radius-sm);
    text-decoration: none !important;
    font-size: .9rem;
}
#order-standard_cart .view-cart-empty .bn-empty-cta:hover {
    filter: brightness(1.08);
}

/* Promo code - one compact horizontal row on desktop */
#order-standard_cart .view-cart-tabs { margin-top: 16px; }
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--bn-border) !important;
    margin-bottom: 12px;
}
#order-standard_cart .view-cart-tabs .nav-tabs a {
    color: var(--bn-text-muted) !important;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border: none !important;
    background: transparent !important;
    padding: 6px 2px 10px;
    margin-right: 20px;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    color: var(--bn-brand-400) !important;
    border-bottom: 2px solid var(--bn-brand-400) !important;
}
#order-standard_cart .view-cart-promotion-code {
    background-color: transparent !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-sm) !important;
    color: var(--bn-text) !important;
    padding: 10px 14px;
}
#order-standard_cart #applyPromo form {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px;
    flex-wrap: wrap;
}
#order-standard_cart #applyPromo .form-group {
    flex: 1 1 auto !important;
    min-width: 200px;
    margin-bottom: 0 !important;
    position: relative;
    display: flex !important;
    align-items: center;
}
#order-standard_cart #applyPromo .form-group .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--bn-text-muted) !important;
    pointer-events: none;
    font-size: .85rem;
    line-height: 1;
    display: inline-flex !important;
    margin: 0 !important;
}
#order-standard_cart #applyPromo input.field {
    width: 100% !important;
    padding: 10px 14px 10px 38px !important;
    height: auto;
}
#order-standard_cart #applyPromo button[type="submit"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 10px 22px !important;
    background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--bn-radius-sm) !important;
    font-weight: 600;
    margin: 0 !important;
}
@media (max-width: 575px) {
    #order-standard_cart #applyPromo form { flex-direction: column !important; }
    #order-standard_cart #applyPromo button[type="submit"] { width: 100% !important; }
}
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: transparent !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
#order-standard_cart .empty-cart {
    text-align: right;
    margin-top: 10px;
}

/* ==========================================================================
   ORDER SUMMARY - compact card, clear rows, strong total
   ========================================================================== */
#order-standard_cart .secondary-cart-sidebar .order-summary {
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow) !important;
    padding: 22px 24px !important;
    position: sticky;
    top: 88px;
}
#order-standard_cart .order-summary h2 {
    color: var(--bn-text) !important;
    font-size: 1rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bn-border);
}
#order-standard_cart .summary-container > div {
    color: var(--bn-text-muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--bn-border);
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    font-size: .88rem;
}
#order-standard_cart .summary-container span { color: var(--bn-text) !important; font-weight: 600; }
#order-standard_cart .recurring-totals { border-bottom: 1px solid var(--bn-border) !important; }
#order-standard_cart .total-due-today {
    border-bottom: none !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    background: var(--bn-bg-hover);
    border-radius: var(--bn-radius-sm);
    padding: 14px 16px !important;
    margin-top: 14px;
}
#order-standard_cart .total-due-today .amt {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bn-text) !important;
    line-height: 1.1;
}
#order-standard_cart .total-due-today > span:last-child {
    color: var(--bn-text-muted) !important;
    font-size: .74rem;
}
#order-standard_cart .express-checkout-buttons:empty { display: none !important; }

#order-standard_cart .btn-order-now,
#order-standard_cart .btn-success,
#order-standard_cart .btn-checkout {
    background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--bn-radius-sm) !important;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-checkout:not(.disabled):hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(45, 139, 255, .35) !important;
}
#order-standard_cart .btn-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100% !important;
    padding: 13px !important;
    font-size: .95rem;
    margin-top: 18px !important;
    box-shadow: 0 6px 16px rgba(45, 139, 255, .25) !important;
}
#order-standard_cart .btn-checkout.disabled {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-text-muted) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1 !important;
}
#order-standard_cart .btn-continue-shopping {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center;
    margin-top: 10px !important;
    padding: 12px !important;
    background: transparent !important;
    border: 1px solid var(--bn-border-strong) !important;
    border-radius: var(--bn-radius-sm) !important;
    color: var(--bn-text) !important;
    font-weight: 600;
    text-decoration: none !important;
    font-size: .9rem;
}
#order-standard_cart .btn-continue-shopping:hover {
    background: var(--bn-bg-hover) !important;
}
@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-sidebar .order-summary {
        position: static;
    }
}

/* ==========================================================================
   TRUST STRIP - Secure Payments / Instant Delivery / 24/7 Support
   integrated with the page (same max-width, subtle bar, equal columns)
   ========================================================================== */
.bn-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1450px;
    margin: var(--bn-gap) auto 0;
    padding: 0 24px;
    background: var(--bn-bg-card);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    overflow: hidden;
}
.bn-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-right: 1px solid var(--bn-border);
}
.bn-trust-item:last-child { border-right: none; }
.bn-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(45, 139, 255, .15);
    color: var(--bn-brand-400);
    font-size: .95rem;
    flex-shrink: 0;
}
.bn-trust-title { color: var(--bn-text); font-weight: 700; margin: 0; font-size: .86rem; }
.bn-trust-text { color: var(--bn-text-muted); margin: 0; font-size: .74rem; }
@media (max-width: 767px) {
    .bn-trust-row { grid-template-columns: 1fr; }
    .bn-trust-item {
        border-right: none;
        border-bottom: 1px solid var(--bn-border);
    }
    .bn-trust-item:last-child { border-bottom: none; }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
#order-standard_cart .alert-danger { background-color: rgba(244,63,94,.10) !important; border-color: rgba(244,63,94,.3) !important; color: var(--bn-rose) !important; }
#order-standard_cart .alert-info { background-color: rgba(45,139,255,.10) !important; border-color: rgba(45,139,255,.3) !important; color: var(--bn-brand-400) !important; }
#order-standard_cart .alert-warning { background-color: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.3) !important; color: var(--bn-amber) !important; }
#order-standard_cart .alert-success { background-color: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.3) !important; color: var(--bn-emerald) !important; }

/* ==========================================================================
   PRODUCT-BROWSING GRID (category / store pages, not just checkout)
   .row / .col-md-6 / .row-eq-height / .clearfix are all completely absent
   from this theme's compiled all.min.css (checked directly - same "purged
   precompiled CSS" issue found on the marketing site's tailwind.css). The
   markup in products.tpl still uses those class names, so without real
   CSS behind them the 2-column card grid simply doesn't lay out at all -
   this predates today's edits, they just made it more visually obvious.
   Grid's default row-stretch behaviour also replaces what row-eq-height
   was for, so no separate height-equalising rule is needed either. */
#order-standard_cart .products .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0 0 1.5rem;
}
#order-standard_cart .products .row > .col-md-6 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}
#order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#order-standard_cart .products .product .product-desc {
    flex: 1;
}
@media (max-width: 767px) {
    #order-standard_cart .products .row {
        grid-template-columns: 1fr;
    }
}

#order-standard_cart .products .product {
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow) !important;
    transition: transform .2s ease, border-color .2s ease;
}
#order-standard_cart .products .product:hover { border-color: var(--bn-border-strong) !important; transform: translateY(-2px); }
#order-standard_cart .products .product header {
    background-color: var(--bn-bg-alt) !important;
    border-radius: var(--bn-radius-lg) var(--bn-radius-lg) 0 0 !important;
    border: none !important;
}
#order-standard_cart .products .product header span { color: var(--bn-text) !important; font-weight: 700; }
#order-standard_cart .products .product div.product-desc { color: var(--bn-text-muted) !important; }
#order-standard_cart .products .product div.product-pricing span.price { color: var(--bn-text) !important; font-weight: 800; }

/* Per-plan feature checklist on the category browse page (products.tpl) -
   built client-side (see the script at the bottom of that file) from the
   plain-text description, replacing WHMCS's own auto-parsed feature list
   which mis-splits on any colon inside HTML (like a style="color: ..."
   attribute) and otherwise renders a plain unstyled bullet dump. */
#order-standard_cart .bn-plain-features-list {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
#order-standard_cart .bn-plain-features-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--bn-text-muted);
}
#order-standard_cart .bn-plain-features-list li.bn-feature-off {
    opacity: .5;
}
#order-standard_cart .bn-plain-features-list .bn-check {
    color: var(--bn-success, #34d399);
    display: inline-flex;
    flex-shrink: 0;
}
#order-standard_cart .bn-plain-features-list .bn-dash {
    color: var(--bn-text-muted);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

/* ==========================================================================
   Domain search / configure product / summary boxes elsewhere in the flow
   ========================================================================== */
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .product-info,
#order-standard_cart .cc-input-container,
.domain-checker-container .input-group-box,
.domain-pricing .tld-row.highlighted,
.domain-pricing .tld-pricing-header div:nth-child(odd),
.spotlight-tlds,
.spotlight-tld,
.suggested-domains .domain-lookup-suggestions-message,
.suggested-domains .domain-lookup-suggestions-loader,
#order-standard_cart .transfer-not-eligible {
    background-color: var(--bn-bg-card) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}

/* ==========================================================================
   Configure-product feature checklist - the plain "Label: Value" paragraph
   is reformatted into this by a small script in configureproduct.tpl.
   ========================================================================== */
#order-standard_cart .bn-config-features {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 24px;
}
#order-standard_cart .bn-config-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bn-text);
}
#order-standard_cart .bn-config-features li.bn-config-feature-off {
    color: rgba(255, 255, 255, .35);
}
#order-standard_cart .bn-config-features .bn-config-check {
    color: #34d399;
    display: inline-flex;
    flex-shrink: 0;
}
#order-standard_cart .bn-config-features .bn-config-dash {
    color: rgba(255, 255, 255, .3);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
#order-standard_cart .bn-config-features .bn-config-feature-label {
    color: rgba(255, 255, 255, .6);
}
#order-standard_cart .bn-config-features .bn-config-feature-value {
    font-weight: 600;
    color: var(--bn-text);
}

/* ==========================================================================
   Small screens - single column, full-bleed cards, full-width controls
   ========================================================================== */
@media (max-width: 575px) {
    #order-standard_cart { padding: 0 12px 32px; }
    #order-standard_cart .header-lined h1 { font-size: 22px !important; }
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar .order-summary {
        padding: 16px !important;
    }
    .bn-trust-row { margin-top: 16px; padding: 0 12px; }
}

/* ==========================================================================
   FIX: populated cart item rows had a hardcoded white background baked
   into the compiled theme (.item{background-color:#fff}), making the
   product name/text invisible (white text on white background).
   ========================================================================== */
#order-standard_cart .view-cart-items .item {
    background-color: transparent !important;
}
#order-standard_cart .item-title {
    color: var(--bn-text) !important;
}
#order-standard_cart .item-group {
    color: var(--bn-text-muted) !important;
    font-size: .78rem;
}
#order-standard_cart .item-group a {
    color: inherit !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color .15s ease, text-decoration-color .15s ease;
}
#order-standard_cart .item-group a:hover {
    color: var(--bn-brand-400) !important;
    text-decoration-color: currentColor;
}
#order-standard_cart .item-price span {
    color: var(--bn-text) !important;
}
#order-standard_cart .item-price .cycle {
    color: var(--bn-text-muted) !important;
    font-size: .78rem;
}

/* ==========================================================================
   CHECKOUT PAGE (checkout.tpl) - section headers, account picker, and
   every "prepend-icon" input field (name/email/phone/address/etc). These
   share #order-standard_cart with the cart view but use their own classes
   that hadn't been styled yet.
   ========================================================================== */
#order-standard_cart .sub-heading {
    margin: 20px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bn-border);
}
#order-standard_cart .sub-heading .primary-bg-color {
    background: transparent !important;
    color: var(--bn-text) !important;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0 !important;
}

#order-standard_cart .account {
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-md) !important;
    padding: 14px 16px;
    margin-bottom: 12px;
    color: var(--bn-text-muted);
}
#order-standard_cart .account.active {
    border-color: var(--bn-brand-500) !important;
    background-color: var(--bn-bg-hover) !important;
}
#order-standard_cart .account .address strong { color: var(--bn-text) !important; }
#order-standard_cart .account .small { color: var(--bn-text-muted) !important; }
#order-standard_cart .account.border-bottom { border: 1px solid var(--bn-border) !important; }

/* Every text/email/tel/etc field with a leading icon, across the whole
   order-forms theme (registration, billing address, promo code, ...) -
   sized and positioned explicitly so the icon never overlaps the text. */
#order-standard_cart .form-group.prepend-icon {
    position: relative;
    display: block !important;
    margin-bottom: 14px;
}
#order-standard_cart .form-group.prepend-icon .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--bn-text-muted) !important;
    pointer-events: none;
    font-size: .85rem;
    line-height: 1;
    margin: 0 !important;
    z-index: 2;
}
#order-standard_cart .form-group.prepend-icon .field.form-control,
#order-standard_cart .form-group.prepend-icon input.field,
#order-standard_cart .form-group.prepend-icon select.field {
    width: 100% !important;
    padding: 10px 14px 10px 38px !important;
    height: auto;
}
#order-standard_cart .form-group.prepend-icon .iti {
    width: 100%;
}
#order-standard_cart .form-group.prepend-icon .iti input {
    padding-left: 38px !important;
}
#order-standard_cart .alert-success#totalDueToday,
#order-standard_cart #totalDueToday {
    background-color: rgba(52,211,153,.10) !important;
    border-color: rgba(52,211,153,.3) !important;
    color: var(--bn-emerald) !important;
}
#order-standard_cart label.radio-inline,
#order-standard_cart label.radio {
    color: var(--bn-text) !important;
}

/* ==========================================================================
   REGISTER SECTION (Personal Information / Billing Address / Account
   Security inside checkout.tpl) - match the login page's clean look.
   Chrome/Edge force a white/yellow background on autofilled fields via an
   internal inset box-shadow that ignores normal background-color, which is
   why Company Name / Address 2 / Password / Confirm Password were flashing
   white while the other fields stayed dark. This neutralises it.
   ========================================================================== */
#order-standard_cart input:-webkit-autofill,
#order-standard_cart input:-webkit-autofill:hover,
#order-standard_cart input:-webkit-autofill:focus,
#order-standard_cart input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--bn-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bn-bg-card) inset !important;
    box-shadow: 0 0 0px 1000px var(--bn-bg-card) inset !important;
    caret-color: var(--bn-text) !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Consistent field look/focus glow, matching the login card's inputs */
#order-standard_cart .field.form-control,
#order-standard_cart select.field {
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: var(--bn-radius-sm) !important;
}
#order-standard_cart .field.form-control:focus,
#order-standard_cart select.field:focus {
    border-color: var(--bn-brand-500) !important;
    box-shadow: 0 0 0 .2rem rgba(45, 139, 255, .25) !important;
    outline: none;
}
#order-standard_cart .field.form-control::placeholder {
    color: var(--bn-text-muted) !important;
    opacity: 1;
}

/* ==========================================================================
   PHONE FIELD - WHMCS wraps input[name*=phone] with intl-tel-input, which
   shows its own flag + dial-code selector on the left. Our generic
   prepend-icon phone icon was rendering in the exact same spot, and the
   plugin's own JS-side ".hide()" for it wasn't reliably beating our CSS -
   hide it explicitly here, and make sure both the old (.intl-tel-input /
   .flag-dropdown / .country-list) and new (.iti__*) versions of the plugin
   get enough left padding + dark-theme styling instead of overlapping.
   ========================================================================== */
#order-standard_cart .form-group.prepend-icon label[for="inputPhone"].field-icon,
#order-standard_cart .form-group.prepend-icon label[for="inputDCPhone"].field-icon {
    display: none !important;
}
/* Same fix as the client-area theme's custom.css: every icon + field
   input-group was wrapping onto two lines instead of sitting inline -
   Bootstrap's .input-group is flex-wrap:wrap by default. Kept here too in
   case a future change ever decouples these two stylesheets. */
#order-standard_cart .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
#order-standard_cart .input-group-prepend {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}
#order-standard_cart .input-group > input,
#order-standard_cart .input-group > select {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
}
#order-standard_cart .iti,
#order-standard_cart .intl-tel-input {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}
#order-standard_cart .iti input,
#order-standard_cart .intl-tel-input input {
    width: 100% !important;
    padding-left: 100px !important;
}
#order-standard_cart .iti__flag-container,
#order-standard_cart .flag-dropdown {
    z-index: 3;
}
/* TelephoneCountryCodeDropdown.js now opens this dropdown with intl-tel-input's
   dropdownContainer: document.body option (see that file), specifically so it
   escapes the rounded .card it lives in - cards use overflow:hidden so their
   own corners clip cleanly, which was also silently clipping this dropdown to
   just a couple of visible rows. That means the list is no longer a
   descendant of #order-standard_cart, so these rules can't be scoped to it
   any more, and position/top/left are left alone entirely - the plugin
   calculates and inline-styles those itself now to line back up under
   whichever field opened it. */
.iti__country-list,
.country-list {
    box-sizing: border-box !important;
    width: 300px !important;
    max-width: 90vw;
    max-height: 260px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
    list-style: none !important;
    padding: 4px 0 !important;
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border-strong) !important;
    border-radius: var(--bn-radius-sm) !important;
    color: var(--bn-text) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
.iti__country,
.country-list .country {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--bn-text) !important;
    padding: 8px 12px !important;
    line-height: 1.3 !important;
    cursor: pointer;
}
.iti__country:hover,
.country-list .country:hover,
.iti__country.iti__highlight,
.country-list .country.highlight {
    background-color: var(--bn-bg-hover) !important;
}
/* The name is the one part that's allowed to be long (some countries add a
   native-script name in brackets) - let it shrink and truncate with an
   ellipsis instead of pushing the dial code off the edge of the list. */
.iti__country-name,
.country-list .country .country-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iti__dial-code,
.country-list .country .dial-code {
    flex-shrink: 0;
    color: var(--bn-text-muted) !important;
    margin-left: auto;
}
.iti__flag-box,
.country-list .country .flag-box {
    flex-shrink: 0;
}
/* Unlike the list above, the always-visible selected flag/code stays put
   inside the field, so this one keeps its original scoping. */
#order-standard_cart .iti__selected-dial-code {
    color: var(--bn-text) !important;
}
.iti__divider,
.country-list .divider {
    border-bottom: 1px solid var(--bn-border) !important;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/* ==========================================================================
   "Already Registered? / Create a New Account" toggle buttons at the top of
   checkout - Bootstrap's default btn-warning (orange) clashed hard against
   the rest of the dark/blue theme, since only btn-info had been reskinned.
   Give both buttons one consistent on-brand treatment.
   ========================================================================== */
#order-standard_cart .already-registered .btn-info,
#order-standard_cart .already-registered .btn-warning {
    background-color: var(--bn-brand-500) !important;
    border-color: var(--bn-brand-500) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: none !important;
}
#order-standard_cart .already-registered .btn-info:hover,
#order-standard_cart .already-registered .btn-warning:hover {
    background-color: var(--bn-brand-600) !important;
    border-color: var(--bn-brand-600) !important;
}

/* Base .bn-toggle rules live in the client-area theme's custom.css (loads
   sitewide, including here) - just the inline layout tweak used for the
   credit-card "store this card?" toggle needs adding. */
#order-standard_cart .bn-toggle-inline {
    margin-top: .25rem;
}