/* ===== Order Form Design Tokens (scoped to #order-nexum) =====
   Colours, the primary shade and radii are INHERITED from the Nexum addon's
   :root block, which is generated from the admin-area settings — exactly like
   the client-side theme. The cart therefore follows the admin colour/branding
   automatically. Only cart-specific extras are defined here, each mapped to an
   admin token with a design fallback for when the addon is inactive. */
#order-nexum {
    --nx-primary-dark: var(--nx-primary-hover, #1e40af);
    /* --nx-secondary resolves to the palette's brand shade, which is blue in
       dark mode, so body copy inherited a link colour. --nx-muted is the
       readable secondary text tone in both modes. */
    --nx-text-body: var(--nx-muted, #475467);
    --nx-border-soft: var(--nx-border, #eef1f6);
    --nx-input-border: var(--nx-border, #e2e8f0);
    /* Were hardcoded greens with no dark variant, so they stayed dark-on-dark.
       Both now follow the admin success colour like every other token here. */
    --nx-success-dark: var(--nx-success, #059669);
    --nx-success-text: var(--nx-success, #0c7d54);
    /* Destructive actions (remove-from-cart, empty-cart, unavailable domains)
       repeated a literal red that ignored the admin danger colour. */
    --nx-danger-text: var(--nx-danger, #dc2626);
    --nx-danger-soft: rgba(var(--nx-danger-rgb, 220, 38, 38), .09);
    --nx-radius-btn: var(--nx-radius-button, 12px);
    --nx-shadow-card: var(--nx-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
    --nx-shadow-elevated: 0 8px 24px rgba(16, 24, 40, .06);
    --nx-shadow-btn: 0 8px 20px rgba(var(--nx-primary-rgb, 37, 99, 235), .28);
}

/* Neutralise leaking light literals from the base standard_cart all.min.css.
   That base file has UNSCOPED rules (e.g. .form-control, .item, .active,
   .mc-promo, .product) hardcoding background:#fff, which paint light on the
   #order-nexum cart in dark mode. Re-point them at the themeable token so
   they follow light/dark. (The base rules are otherwise dead weight.) */
#order-nexum .form-control,
#order-nexum .item,
#order-nexum .active,
#order-nexum .product,
#order-nexum .product-info,
#order-nexum .mc-promo,
#order-nexum .product-recommendation,
#order-nexum .input-group-box,
#order-nexum .view-cart-promotion-code,
#order-nexum .spotlight-tld,
#order-nexum .spotlight-tlds,
#order-nexum .option,
#order-nexum .unavailable,
#order-nexum .tab-content,
#order-nexum .summary-container,
#order-nexum .apply-credit-container,
#order-nexum .service-renewals,
#order-nexum .domain-lookup-suggestions-loader {
    background: var(--nx-card-bg);
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    border-color: var(--nx-border);
}
/* Generic content text inside the cart should follow the theme text colour
   (base all.min.css pins several to dark-grey literals that vanish on dark). */
#order-nexum,
#order-nexum p,
#order-nexum td,
#order-nexum th,
#order-nexum li,
#order-nexum label,
#order-nexum span:not([class]) {
    color: var(--nx-text);
}

/* Header and footer width is owned by the theme (nexum.css), which aligns them
   with the page content via --nx-container-width. Overriding it here made the
   header wider than the content beneath it, so the cart no longer does. */

/* Base resets for standard cart container */
#order-nexum {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--nx-text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

/* Layout columns flex overrides to prevent compression and wrapping bugs */
/* align-items stays at the flex default (stretch) so a sticky summary panel
   has the full row height to travel down; flex-start collapsed the column to
   its own content and the panel came unstuck immediately. */
#order-nexum .row-flex,
.row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

#order-nexum .cart-sidebar,
.cart-sidebar {
    flex: 0 0 250px;
    width: 250px;
}

/* Category sidebar is optional (cart_sidebar setting). It is kept on the product
   listing, where it is the only way to switch group, and dropped once the client
   is inside the order flow. products.tpl marks itself with .nx-cart-catalog. */
body.nx-cart-no-sidebar #order-nexum:not(.nx-cart-catalog) .cart-sidebar,
body.nx-cart-no-sidebar #order-nexum:not(.nx-cart-catalog) .sidebar-collapsed,
body.nx-cart-no-sidebar #order-standard_cart .cart-sidebar {
    display: none !important;
}
body.nx-cart-no-sidebar #order-nexum:not(.nx-cart-catalog) .cart-body,
body.nx-cart-no-sidebar #order-standard_cart .cart-body {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* High specificity overrides for cart-body and secondary-cart-body */
body.nx-theme #order-nexum .cart-body,
body #order-nexum .cart-body,
html body #order-nexum .cart-body,
#order-nexum .cart-body {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}

/* flex-basis must stay 0 here. The parent .row-flex wraps, so a 100% basis
   made this claim the whole row and pushed the 300px summary sidebar onto its
   own line, leaving the empty middle column. */
body.nx-theme #order-nexum .secondary-cart-body,
body #order-nexum .secondary-cart-body,
html body #order-nexum .secondary-cart-body,
#order-nexum .secondary-cart-body,
.secondary-cart-body {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}

body.nx-theme #order-nexum .secondary-cart-sidebar,
body #order-nexum .secondary-cart-sidebar,
html body #order-nexum .secondary-cart-sidebar,
#order-nexum .secondary-cart-sidebar,
.secondary-cart-sidebar {
    flex: 0 0 300px !important;
    width: 300px !important;
}

/* The form wraps a single .row.row-flex that owns the body/sidebar split, so
   the form itself is a plain block. Making it a flex row added a second,
   redundant flex context around that one child. */
body.nx-theme #frmConfigureProduct,
body #frmConfigureProduct,
html body #frmConfigureProduct,
#frmConfigureProduct {
    display: block;
    width: 100%;
}

/* This row is the body/summary split, not a content grid. It must never wrap —
   wrapping dropped the 300px summary sidebar below the configuration column
   instead of keeping it top-right.

   align-items is deliberately left at the flex default of `stretch`: it used to
   be flex-start, which collapsed the summary column to its own content height,
   and a sticky panel can only travel as far as its parent's box. */
body.nx-theme #frmConfigureProduct > .row,
body #frmConfigureProduct > .row,
html body #frmConfigureProduct > .row,
#frmConfigureProduct > .row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Mobile responsive overrides */
@media (max-width: 991.98px) {
    #order-nexum .row-flex, 
    .row-flex {
        flex-direction: column;
    }
    
    #order-nexum .cart-sidebar,
    .cart-sidebar,
    body.nx-theme #order-nexum .cart-body,
    body #order-nexum .cart-body,
    html body #order-nexum .cart-body,
    #order-nexum .cart-body,
    body.nx-theme #frmConfigureProduct > .row,
    body #frmConfigureProduct > .row,
    html body #frmConfigureProduct > .row,
    #frmConfigureProduct > .row,
    body.nx-theme #order-nexum .secondary-cart-body,
    body #order-nexum .secondary-cart-body,
    html body #order-nexum .secondary-cart-body,
    #order-nexum .secondary-cart-body,
    .secondary-cart-body,
    body.nx-theme #order-nexum .secondary-cart-sidebar,
    body #order-nexum .secondary-cart-sidebar,
    html body #order-nexum .secondary-cart-sidebar,
    #order-nexum .secondary-cart-sidebar,
    .secondary-cart-sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    /* flex-direction: column above handles the stacking, so nowrap is safe. */
    body.nx-theme #frmConfigureProduct > .row,
    body #frmConfigureProduct > .row,
    html body #frmConfigureProduct > .row,
    #frmConfigureProduct > .row {
        flex-direction: column;
    }
}

/* Sidebar Categories & Actions menu */
#order-nexum .list-group,
#order-nexum .nav-tabs {
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    background: var(--nx-card-bg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

#order-nexum .list-group-item,
#order-nexum .nav-tabs > li > a {
    border: none;
    border-radius: var(--nx-radius-md);
    color: var(--nx-muted);
    font-weight: 600;
    font-size: var(--nx-font-size-md);
    padding: 10px 16px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background: transparent;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#order-nexum .list-group-item:hover,
#order-nexum .nav-tabs > li > a:hover {
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}

#order-nexum .list-group-item.active,
#order-nexum .list-group-item.active:hover,
#order-nexum .nav-tabs > li.active > a,
#order-nexum .nav-tabs > li.active > a:hover {
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.08);
    font-weight: 700;
}

/* Form Controls (Inputs, Textareas, Selects) */
#order-nexum .form-control {
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    padding: 10px 16px;
    font-size: var(--nx-font-size);
    font-weight: 500;
    color: var(--nx-text);
    height: auto;
    box-shadow: none;
    background: var(--nx-card-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Phone number field (intl-tel-input, used on checkout).
   The widget reserves room for the flag with a left padding on the input; the
   shorthand above overwrites it, so the placeholder ran underneath the flag.
   The reserved space is restored per width class, and the flag block is given
   the field's own corner radius so it reads as part of the control rather than
   a grey square floating beside it. */
#order-nexum .intl-tel-input { width: 100%; display: block; }
#order-nexum .intl-tel-input .form-control { padding-left: 52px; }
#order-nexum .intl-tel-input.iti-sdc-2 .form-control { padding-left: 66px; }
#order-nexum .intl-tel-input.iti-sdc-3 .form-control { padding-left: 74px; }
#order-nexum .intl-tel-input.allow-dropdown.iti-sdc-2 .form-control { padding-left: 76px; }
#order-nexum .intl-tel-input.allow-dropdown.iti-sdc-3 .form-control { padding-left: 84px; }

#order-nexum .intl-tel-input.separate-dial-code .selected-flag {
    background-color: var(--nx-bg);
    color: var(--nx-text);
    font-weight: 600;
    border-top-left-radius: var(--nx-radius-md);
    border-bottom-left-radius: var(--nx-radius-md);
    border-right: 1px solid var(--nx-border);
}
#order-nexum .intl-tel-input.separate-dial-code .selected-dial-code { color: var(--nx-text); }
#order-nexum .intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--nx-muted); }
#order-nexum .intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--nx-muted); }
#order-nexum .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background-color: rgba(var(--nx-primary-rgb), .08);
}
#order-nexum .intl-tel-input:focus-within .selected-flag { border-right-color: var(--nx-primary); }

#order-nexum .intl-tel-input .country-list {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: var(--nx-shadow-elevated);
    color: var(--nx-text);
}
#order-nexum .intl-tel-input .country-list .divider { border-bottom-color: var(--nx-border); }
#order-nexum .intl-tel-input .country-list .country { color: var(--nx-text); }
#order-nexum .intl-tel-input .country-list .country .dial-code { color: var(--nx-muted); }
#order-nexum .intl-tel-input .country-list .country.highlight,
#order-nexum .intl-tel-input .country-list .country:hover {
    background-color: rgba(var(--nx-primary-rgb), .08);
}

#order-nexum .form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.12);
}

/* Checkout field icons: base style.css scopes these to #order-standard_cart,
   so for #order-nexum they were unstyled (rendering red / mis-placed).
   Re-implement as the design's muted, left-aligned input icon. */
#order-nexum .prepend-icon { position: relative; }
#order-nexum .prepend-icon .field-icon {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 42px;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    z-index: 3;
    pointer-events: none;
}
#order-nexum .field-icon i,
#order-nexum .prepend-icon .field-icon i {
    color: var(--nx-muted);
    font-size: var(--nx-font-size-lg);
}
#order-nexum .prepend-icon .field,
#order-nexum .prepend-icon .form-control,
#order-nexum .prepend-icon select.form-control {
    padding-left: 44px;
}

/* Primary and Action Buttons */
#order-nexum .btn-primary,
#order-nexum .btn-checkout {
    background: var(--nx-primary);
    border: none;
    border-radius: var(--nx-radius-btn);
    padding: 13px 26px;
    font-weight: 700;
    font-size: 14.5px;
    color: #fff;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#order-nexum .btn-primary:hover,
#order-nexum .btn-checkout:hover {
    background: var(--nx-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--nx-primary-rgb), .34);
}

/* Panel / Card Overrides */
#order-nexum .panel,
#order-nexum .card {
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    box-shadow: var(--nx-shadow-card);
    background: var(--nx-card-bg);
    margin-bottom: 24px;
    overflow: hidden;
}

/* Design: cards are white with a dark title + hairline divider
   (the only dark-gradient header in the mock is the Order Summary). */
#order-nexum .panel-heading,
#order-nexum .card-header {
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 800;
    font-size: var(--nx-font-size-xl);
    letter-spacing: -0.3px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--nx-border-soft);
    text-transform: none;
}

#order-nexum .panel-body,
#order-nexum .card-body {
    padding: 24px;
}

/* Sidebar panel specific overrides to ensure they match mockup design */
#order-nexum .card-sidebar {
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    overflow: hidden;
    background: var(--nx-card-bg);
}

/* Strip borders, backgrounds, and shadows from nested inner sidebar containers */
#order-nexum .card-sidebar .collapsable-card-body,
#order-nexum .card-sidebar .list-group,
#order-nexum .card-sidebar .card-body,
#order-nexum .card-sidebar .panel-body {
    border: none;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 8px;
}

#order-nexum .card-sidebar .card-header,
#order-nexum .card-sidebar .panel-heading {
    background: transparent;
    color: var(--nx-text);
    border-bottom: 1px solid var(--nx-border);
    padding: 16px 20px;
}

#order-nexum .card-sidebar .panel-title,
#order-nexum .card-sidebar .card-header h3 {
    color: var(--nx-text);
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#order-nexum .card-sidebar .panel-title span.material-symbols-rounded,
#order-nexum .card-sidebar .card-header h3 span.material-symbols-rounded {
    color: var(--nx-primary);
}

/* Sidebar List-Group Item styling */
#order-nexum .card-sidebar .list-group-item {
    border: none;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background: transparent;
    color: var(--nx-text);
}

#order-nexum .card-sidebar .list-group-item span.material-symbols-rounded {
    color: var(--nx-muted);
}

/* Sidebar List-Group Active Item styling (Mockup Light Blue Pill) */
#order-nexum .card-sidebar .list-group-item.active {
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary);
    font-weight: 700;
}

#order-nexum .card-sidebar .list-group-item.active span.material-symbols-rounded {
    color: var(--nx-primary);
}

#order-nexum .card-sidebar .list-group-item:hover:not(.active) {
    background: var(--nx-bg);
    color: var(--nx-text);
}

/* Domain Selection Card widgets styled like mockup design */
#order-nexum .nx-domain-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

#order-nexum .nx-domain-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 24px;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

#order-nexum .nx-domain-card.active {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.08);
}

#order-nexum .nx-domain-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    cursor: pointer;
    width: 100%;
}

/* Custom Radio Dot */
#order-nexum .nx-domain-radio-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* The visible control is .nx-domain-radio-dot, so the input stays invisible and
   only acts as the hit area. iCheck also wraps this input in its own sprite
   div; that wrapper is flattened here so it does not paint a second control on
   top of the dot. */
#order-nexum .nx-domain-radio-wrapper input[type="radio"],
#order-nexum .nx-domain-radio-wrapper .iradio_square-blue {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    z-index: 2;
}
#order-nexum .nx-domain-radio-wrapper input[type="radio"]::before {
    content: none;
}

#order-nexum .nx-domain-radio-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--nx-border);
    background: var(--nx-card-bg);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#order-nexum .nx-domain-card.active .nx-domain-radio-dot {
    border-color: var(--nx-primary);
}

#order-nexum .nx-domain-radio-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nx-primary);
    display: none;
}

#order-nexum .nx-domain-card.active .nx-domain-radio-dot::after {
    display: block;
}

/* Icon Pill Box */
#order-nexum .nx-domain-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#order-nexum .nx-domain-icon-wrapper.existing-icon {
    background: rgba(var(--nx-success-rgb), .10);
    color: var(--nx-success);
}

#order-nexum .nx-domain-icon-wrapper span {
    font-size: 20px;
}

/* Text */
#order-nexum .nx-domain-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#order-nexum .nx-domain-title {
    font-size: var(--nx-font-size-lg);
    font-weight: 700;
    color: var(--nx-text);
}

#order-nexum .nx-domain-desc {
    font-size: 12.5px;
    color: var(--nx-muted);
    margin-top: 2px;
}

/* Input Group */
#order-nexum .nx-domain-input-group {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed var(--nx-border);
    display: none; /* Hide by default */
}

/* Show only when the card is active */
#order-nexum .nx-domain-card.active .nx-domain-input-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sits on --nx-bg rather than --nx-card-bg so the field reads as an inset
   surface against the card it lives in. Both tokens flip with the theme, so
   the contrast holds in light and dark. */
#order-nexum .nx-domain-search-box {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--nx-border);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    background: var(--nx-bg);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#order-nexum .nx-domain-search-box:hover {
    border-color: rgba(var(--nx-primary-rgb), 0.35);
}

#order-nexum .nx-domain-search-box:focus-within {
    border-color: var(--nx-primary);
    background: var(--nx-card-bg);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.10);
}
#order-nexum .nx-domain-search-box:focus-within .search-icon {
    color: var(--nx-primary);
}

#order-nexum .nx-domain-search-box .search-icon {
    color: var(--nx-muted);
    font-size: 20px;
    transition: color .18s ease;
}

#order-nexum .nx-domain-search-box input {
    border: none;
    box-shadow: none;
    background: transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--nx-text);
    padding: 0;
    width: 100%;
    outline: none;
    height: auto;
}

#order-nexum .nx-domain-search-box input::placeholder {
    color: var(--nx-muted);
}

/* Custom Search/Check Button */
#order-nexum .nx-domain-btn {
    background: var(--nx-primary);
    color: var(--nx-on-primary, #fff);
    border: none;
    border-radius: var(--nx-radius-md);
    padding: 10px 20px;
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    height: 38px;
    white-space: nowrap;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}

#order-nexum .nx-domain-btn:hover {
    background: var(--nx-primary-hover);
    box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.25);
}
#order-nexum .nx-domain-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

#order-nexum .nx-domain-btn .material-symbols-rounded {
    font-size: var(--nx-font-size-xl);
}

/* Filters row */
#order-nexum .nx-domain-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#order-nexum .nx-filter-select-wrapper {
    position: relative;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 8px 32px 8px 16px;
    background: var(--nx-card-bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

#order-nexum .nx-filter-select-wrapper.decorative {
    cursor: not-allowed;
    background: var(--nx-bg);
}

#order-nexum .nx-filter-select-wrapper select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    box-shadow: none;
}

#order-nexum .nx-filter-select-wrapper.decorative select {
    color: var(--nx-muted);
    cursor: not-allowed;
}

#order-nexum .nx-filter-select-wrapper .dropdown-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--nx-font-size-xl);
    color: var(--nx-muted);
    pointer-events: none;
}
/* initSelectSkin() replaces the native select with a trigger button that draws
   its own chevron, so this template-level arrow would be the second one. */
#order-nexum .nx-filter-select-wrapper:has(.nx-custom-select-wrapper) .dropdown-icon {
    display: none;
}
#order-nexum .nx-filter-select-wrapper .nx-custom-select-wrapper { width: 100%; }
#order-nexum .nx-filter-select-wrapper .nx-custom-select-trigger {
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-text);
    gap: 8px;
}
#order-nexum .nx-filter-select-wrapper.decorative .nx-custom-select-trigger {
    color: var(--nx-muted);
    cursor: not-allowed;
}

/* Custom Checkbox */
#order-nexum .nx-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
    margin: 0;
}

/* .checkbox-box is the visible control. iCheck wraps the input in a sprite div,
   so the wrapper is hidden along with the input itself. */
#order-nexum .nx-filter-checkbox input[type="checkbox"],
#order-nexum .nx-filter-checkbox .icheckbox_square-blue {
    display: none !important;
}

/* Decorative only: the input is checked + disabled, so this is a static "on"
   state rather than something the user can toggle. */
#order-nexum .nx-filter-checkbox .checkbox-box {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#order-nexum .nx-filter-checkbox .checkbox-box::after {
    content: '\e5ca'; /* check icon */
    font-family: 'Material Symbols Rounded';
    font-size: var(--nx-font-size);
    color: var(--nx-primary);
    font-weight: bold;
    display: block;
}

/* Order Summary Column Styling (design: dark gradient header + white body) */
#orderSummary {
    position: relative;
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-elevated);
    overflow: hidden;
    width: 100%;
    padding: 0;
}

/* The renew/cart pages wrap the summary in .order-summary, so a direct-child
   selector missed the heading and the base grey came through. */
#orderSummary .order-summary {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

/* Header bar — the summary title (h2) becomes a full-bleed strip.
   Takes the brand colour rather than the body ink; --nx-text as a surface gave
   the same dark navy bar on every palette. */
#orderSummary h2,
#orderSummary .summary-header {
    background: var(--nx-primary);
    color: var(--nx-on-primary, #fff);
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    padding: 16px 20px;
    text-align: left;
    margin: 0;
    border: none;
}

/* Body content wrapper gets the padding the card no longer has */
#orderSummary .summary-container,
#orderSummary .panel-body {
    padding: 20px;
    background: var(--nx-card-bg);
    color: var(--nx-text);
}

/* The View Cart button sits outside .summary-container, so it needs its own
   padding or it touches the card edges. */
#orderSummary > .text-center {
    padding: 0 20px 20px;
    background: var(--nx-card-bg);
}

#orderSummary .btn-primary {
    background: var(--nx-primary);
    border-radius: var(--nx-radius-btn);
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 700;
    width: 100%;
    margin-top: 18px;
}

/* Billing Cycle Choice Radio Grid */
#order-nexum .billing-cycle-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

#order-nexum .billing-cycle-options label {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    background: var(--nx-card-bg, #fff);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin: 0;
    font-weight: 600;
}

#order-nexum .billing-cycle-options label:has(input:checked),
#order-nexum .billing-cycle-card.active {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.08);
}

/* Available Addons Grid & Card style.
   configuredomains.tpl still emits Bootstrap columns inside this container
   (col-sm-4 / col-sm-6, sized by a Smarty {math} division). Those carry their
   own percentage width, so as grid items they were constrained twice and
   collapsed into narrow strips that broke the text one word per line. The
   column widths are neutralised and the grid owns the layout. */
#order-nexum .addons-list,
#order-nexum .addon-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
#order-nexum .addons-list > [class*="col-"],
#order-nexum .addon-products > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
}

#order-nexum .panel-addon {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin: 0;
}
/* The checkbox and its title come through as a bare label with the two
   touching; this gives them a row of their own above the description. */
#order-nexum .panel-addon .panel-body > label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: var(--nx-font-size-lg);
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
}
#order-nexum .panel-addon .panel-body {
    padding: 0;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    line-height: 1.55;
}
#order-nexum .panel-addon .panel-body > br { display: none; }

/* Addon grid. row-eq-height carried no styling, so cards in the same row ended
   at different heights and the last row left an empty column. */
#order-nexum .products .row-eq-height {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
#order-nexum .nx-addon-col {
    padding: 0 10px;
    margin-bottom: 20px;
}
/* The addon form carries Bootstrap's .form-inline, which sets
   flex-flow: row wrap. Forcing a flex column on it collapsed the description,
   the product select and the footer, so the card rendered as a title only.
   The card stretches through width/height instead. */
#order-nexum .nx-addon-col > .product {
    width: 100%;
    height: 100%;
}
#order-nexum .nx-addon-col > .product > form.form-inline {
    display: block;
    width: 100%;
}
#order-nexum .nx-addon-col .product header,
#order-nexum .nx-addon-col .product .product-desc,
#order-nexum .nx-addon-col .product footer {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: none;
}

#order-nexum .panel-addon:has(input:checked) {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.08);
}

#order-nexum .panel-addon .btn-add-to-cart {
    background: var(--nx-card-bg);
    border: 1.5px solid var(--nx-primary);
    color: var(--nx-primary);
    border-radius: var(--nx-radius-md);
    font-weight: 700;
    padding: 8px 16px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#order-nexum .panel-addon .btn-add-to-cart:hover {
    background: var(--nx-primary);
    color: #fff;
}

/* Custom Config Option Rows */
#order-nexum .config-option-row {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 14px 20px;
    margin-bottom: 8px;
    background: var(--nx-card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#order-nexum .config-option-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}

/* "Total Due Today" success alert (checkout / viewcart) — design: compact green pill */
#order-nexum .alert-success {
    background: rgba(var(--nx-success-rgb), 0.08);
    border: 1px solid rgba(var(--nx-success-rgb), 0.25);
    border-radius: var(--nx-radius-md);
    color: var(--nx-success);
    padding: 14px 18px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: none;
    font-weight: 700;
    font-size: 14.5px;
}

#order-nexum .alert-success h3 {
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    margin: 0;
    color: var(--nx-success-text);
}

/* Product Specs Grid Styling */
#order-nexum .nx-product-card {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 24px;
    background: var(--nx-card-bg);
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
}

#order-nexum .nx-left-specs {
    border-top: 1px solid var(--nx-border);
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    width: 100%;
}

#order-nexum .nx-left-spec-row {
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

#order-nexum .nx-left-spec-val {
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    color: var(--nx-primary);
}

#order-nexum .nx-left-spec-key {
    font-size: var(--nx-font-size-xs);
    font-weight: 700;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Billing Cycle active border and box-shadow override */
#order-nexum .billing-cycle-card.active {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.08);
}

/* Option Row (Config options / MarketConnect) active states */
.nx-option-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}

/* =====================================================================
   Product Listing (group page) — Claude Design "Product Listing" mock
   ===================================================================== */
#order-nexum .nx-plp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
    margin: 0 0 24px;
}

#order-nexum .nx-plp-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

#order-nexum .nx-plp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(16, 24, 40, .12);
    border-color: var(--nx-border);
}

#order-nexum .nx-plp-card.featured {
    border-color: var(--nx-primary);
    box-shadow: 0 22px 46px rgba(var(--nx-primary-rgb), .14);
}

/* diagonal "Popular" ribbon */
#order-nexum .nx-plp-ribbon {
    position: absolute;
    top: 18px;
    right: -34px;
    transform: rotate(45deg);
    background: var(--nx-primary);
    color: var(--nx-on-primary);
    font-size: var(--nx-font-size-xs);
    font-weight: 800;
    letter-spacing: .6px;
    padding: 5px 44px;
    text-transform: uppercase;
    z-index: 2;
}

#order-nexum .nx-plp-head {
    padding: 24px 26px 18px;
    border-bottom: 1px solid var(--nx-border-soft);
}

#order-nexum .nx-plp-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.10);
    color: var(--nx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

#order-nexum .nx-plp-icon .material-symbols-rounded { font-size: 25px; }

#order-nexum .nx-plp-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--nx-text);
}

#order-nexum .nx-plp-stock {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nx-success);
    margin-top: 4px;
}

#order-nexum .nx-plp-desc {
    font-size: 13px;
    color: var(--nx-muted);
    margin-top: 6px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#order-nexum .nx-plp-body {
    padding: 22px 26px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#order-nexum .nx-plp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

#order-nexum .nx-plp-chips:empty { display: none; margin: 0; }
#order-nexum .nx-plp-chip-source { display: none; }

/* --nx-primary-light is a light pastel in both modes, so the chip stayed pale
   on a dark card. A translucent primary fill tints whatever it sits on. */
#order-nexum .nx-plp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--nx-primary-rgb), 0.10);
    border: 1px solid rgba(var(--nx-primary-rgb), 0.18);
    color: var(--nx-primary);
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: var(--nx-radius-badge);
}

#order-nexum .nx-plp-chip .material-symbols-rounded { font-size: var(--nx-font-size-lg); color: var(--nx-primary); }

#order-nexum .nx-plp-feat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#order-nexum .nx-plp-feat-row {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: var(--nx-font-size-md);
    color: var(--nx-text-body);
    margin: 0;
}

/* The base cart stylesheet colours generic links inside .product, which turned
   these labels blue. They are plain text, not links. */
#order-nexum .nx-plp-feat-row .lbl {
    flex: 1 1 auto;
    color: var(--nx-text-body);
}

#order-nexum .nx-plp-feat-row .tick {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: rgba(var(--nx-primary-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

#order-nexum .nx-plp-feat-row .tick .material-symbols-rounded { font-size: var(--nx-font-size); color: var(--nx-primary); }

#order-nexum .nx-plp-feat-row b {
    color: var(--nx-text);
    font-weight: 700;
    margin-left: auto;
    padding-left: 14px;
}

#order-nexum .nx-plp-foot { padding: 0 26px 26px; }

#order-nexum .nx-plp-price-label { font-size: var(--nx-font-size-sm); font-weight: 600; color: var(--nx-muted); }

#order-nexum .nx-plp-price { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }

#order-nexum .nx-plp-price .amt { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--nx-text); }

#order-nexum .nx-plp-cycle { font-size: 12.5px; font-weight: 600; color: var(--nx-muted); margin-top: 1px; }

#order-nexum .nx-plp-setup { font-size: 11.5px; color: var(--nx-muted); margin-top: 4px; }

#order-nexum .nx-plp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    background: var(--nx-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 0;
    border-radius: var(--nx-radius-md);
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    box-shadow: 0 10px 22px rgba(var(--nx-primary-rgb), .26);
}

#order-nexum .nx-plp-cta:hover {
    background: var(--nx-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(var(--nx-primary-rgb), .32);
}

#order-nexum .nx-plp-cta .material-symbols-rounded { font-size: 19px; }

/* =====================================================================
   Order Complete page — Claude Design "Order Flow" complete step
   ===================================================================== */
/* Full width. The 760px cap left the confirmation floating in the left half of
   the cart body while every other cart page fills it. */
/* All three panels share one width — 8 of 12 columns — and the block is centred
   in the container, so the hero, the details strip and the next-steps card line
   up as a single column instead of spanning the full page. */
#order-nexum .nx-complete {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 66.6667%;
    margin-inline: auto;
}
@media (max-width: 991.98px) {
    #order-nexum .nx-complete {
        max-width: 100%;
    }
}

#order-nexum .nx-complete-hero {
    position: relative;
    background: linear-gradient(150deg, var(--nx-success), var(--nx-success-dark));
    border-radius: var(--nx-radius-card);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--nx-success) 28%, transparent);
    padding: 34px;
    text-align: center;
    color: var(--nx-on-primary, #fff);
    overflow: hidden;
}
#order-nexum .nx-complete-decor {
    position: absolute; right: -40px; top: -40px;
    width: 170px; height: 170px; border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
#order-nexum .nx-complete-check {
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 40px; margin-bottom: 14px;
    font-variation-settings: 'FILL' 1; position: relative; z-index: 1;
}
#order-nexum .nx-complete-hero h1 {
    margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.5px;
    color: var(--nx-on-primary, #fff); border: none;
}
/* Sits on the success fill, so it is that same ink at reduced strength rather
   than a fixed pale green. */
#order-nexum .nx-complete-hero p {
    margin: 8px 0 0; font-size: var(--nx-font-size);
    color: color-mix(in srgb, var(--nx-on-primary, #fff) 82%, transparent);
}

#order-nexum .nx-complete-details {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px; background: var(--nx-border-soft);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); overflow: hidden;
}
#order-nexum .nx-complete-cell { background: var(--nx-card-bg); padding: 18px 22px; }
#order-nexum .nx-complete-cell .k { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 700; }
#order-nexum .nx-complete-cell .v { font-size: var(--nx-font-size-lg); font-weight: 800; color: var(--nx-text); margin-top: 3px; }
#order-nexum .nx-complete-cell .v.mono { font-family: ui-monospace, Menlo, monospace; }
#order-nexum .nx-complete-cell .v.nx-paid { color: var(--nx-success); }
#order-nexum .nx-complete-cell .v.nx-pending { color: var(--nx-warning); }

#order-nexum .nx-complete-next {
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow-card); padding: 24px;
}
#order-nexum .nx-complete-next-title {
    font-size: var(--nx-font-size-sm); font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--nx-muted); margin-bottom: 16px;
}
/* Three short items read better side by side once the card spans the full
   width; they stack again as soon as the column narrows. */
#order-nexum .nx-complete-next-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
#order-nexum .nx-next-row { display: flex; gap: 13px; margin-bottom: 16px; align-items: flex-start; }
#order-nexum .nx-complete-next-rows .nx-next-row { margin-bottom: 0; }
#order-nexum .nx-next-ic {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--nx-radius-md);
    display: flex; align-items: center; justify-content: center;
}
#order-nexum .nx-next-ic .material-symbols-rounded { font-size: 19px; font-variation-settings: 'FILL' 1; }
#order-nexum .nx-next-ic.blue { background: rgba(var(--nx-primary-rgb), 0.10); color: var(--nx-primary); }
#order-nexum .nx-next-ic.amber { background: rgba(var(--nx-warning-rgb, 245, 158, 11), 0.10); color: var(--nx-warning); }
#order-nexum .nx-next-ic.green { background: rgba(var(--nx-success-rgb, 18, 183, 106), 0.10); color: var(--nx-success); }
#order-nexum .nx-next-row .t { font-size: var(--nx-font-size); font-weight: 700; color: var(--nx-text); }
#order-nexum .nx-next-row .d { font-size: 12.5px; color: var(--nx-muted); margin-top: 1px; }

#order-nexum .nx-complete-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
#order-nexum .nx-complete-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--nx-primary); color: var(--nx-on-primary, #fff);
    font-weight: 700; font-size: var(--nx-font-size);
    padding: 12px 24px; border-radius: var(--nx-radius-button); text-decoration: none;
    box-shadow: 0 8px 18px rgba(var(--nx-primary-rgb), .28); transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-nexum .nx-complete-btn:hover {
    background: var(--nx-primary-hover); color: var(--nx-on-primary, #fff);
    transform: translateY(-1px);
}
#order-nexum .nx-complete-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--nx-input-border); color: var(--nx-text); font-weight: 700; font-size: var(--nx-font-size);
    padding: 12px 24px; border-radius: var(--nx-radius-button); text-decoration: none; background: var(--nx-card-bg);
}
#order-nexum .nx-complete-btn-ghost:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
#order-nexum .nx-complete-btn-plain { display: inline-flex; align-items: center; color: var(--nx-muted); font-weight: 700; font-size: var(--nx-font-size); padding: 12px 16px; text-decoration: none; }
#order-nexum .nx-complete-btn .material-symbols-rounded,
#order-nexum .nx-complete-btn-ghost .material-symbols-rounded { font-size: var(--nx-font-size-h3); }

/* Whatever an addon prints after the order is arbitrary HTML, so it gets the
   same card shell as the sections around it instead of sitting bare. */
#order-nexum .order-confirmation-addon-output {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 24px;
    color: var(--nx-text);
}
#order-nexum .order-confirmation-addon-output:empty { display: none; }

/* ==================================================================
   Nexum Order Form — Runtime widget styling (moved out of common.tpl JS)
   The JS now only builds the DOM + sets classes; all styling lives here so
   it is consistent, themeable via --nx-* tokens, and maintainable.
   ================================================================== */

/* ---- Billing cycle cards ---- */
#order-nexum .billing-cycle-card {
    position: relative;
    width: 100%;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    padding: 20px;
    background: var(--nx-card-bg, #fff);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    box-sizing: border-box;
}
#order-nexum .billing-cycle-card:hover { border-color: var(--nx-primary); }
/* The real radio is never shown — .cycle-select-dot is the visible control and
   the whole card is the hit area. It stays in the DOM so the value still
   submits and change handlers still fire. */
/* iCheck also wraps this input in its own sprite div, which rendered as a
   second radio above the label. Hiding the input alone left that wrapper
   behind, so the wrapper goes too. */
#order-nexum .billing-cycle-card .nx-cycle-input,
#order-nexum .billing-cycle-card .iradio_square-blue,
#order-nexum .billing-cycle-card .icheckbox_square-blue,
#order-nexum .billing-cycle-card .iCheck-helper,
#order-nexum .billing-cycle-card input[type="radio"] { display: none !important; }
#order-nexum .billing-cycle-card .cycle-select-dot {
    position: absolute;
    top: 12px; right: 12px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--nx-border);
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--nx-card-bg, #fff);
}
#order-nexum .billing-cycle-card .cycle-select-dot > span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--nx-primary); display: none;
}
#order-nexum .billing-cycle-card.active .cycle-select-dot { border-color: var(--nx-primary); }
#order-nexum .billing-cycle-card.active .cycle-select-dot > span { display: block; }
/* NOTE: .billing-cycle-card.active bg/border already defined earlier in custom.css */
#order-nexum .billing-cycle-card .cycle-title {
    font-size: 11.5px; font-weight: 800; color: var(--nx-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
#order-nexum .billing-cycle-card .cycle-price {
    font-size: var(--nx-font-size-h3); font-weight: 800; color: var(--nx-text);
}
#order-nexum .billing-cycle-card .cycle-setup {
    font-size: var(--nx-font-size-xs); color: var(--nx-muted); font-weight: 600; margin-top: 4px;
}
#order-nexum .billing-cycle-card .cycle-savings {
    font-size: 10px;
    background: var(--nx-pill-active-bg, #ecfdf3);
    color: var(--nx-pill-active-text, #0c7d54);
    padding: 2px 8px; border-radius: 6px; font-weight: 800; margin-top: 6px;
}

/* ---- Quantity stepper ---- */
#order-nexum .nx-qty-wrapper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-button, 12px);
    background: var(--nx-card-bg, #fff);
    overflow: hidden; max-width: 140px;
}
#order-nexum .nx-qty-wrapper button {
    border: none; background: transparent; padding: 10px 14px;
    cursor: pointer; color: var(--nx-muted);
    display: flex; align-items: center; justify-content: center; outline: none;
}
#order-nexum .nx-qty-wrapper button:hover { color: var(--nx-primary); }
#order-nexum .nx-qty-wrapper input[type="number"] {
    width: 45px; border: none; padding: 0; height: auto; box-shadow: none;
    font-size: var(--nx-font-size-lg); font-weight: 700; outline: none; text-align: center;
    -moz-appearance: textfield; appearance: textfield; background: transparent; color: var(--nx-text);
}

/* ---- Decorated option / addon rows ---- */
#order-nexum .nx-option-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-radius: var(--nx-radius-button, 12px);
    border: 1.5px solid var(--nx-border);
    cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    margin: 0 0 10px 0; background: var(--nx-card-bg, #fff);
    width: 100%; box-sizing: border-box; font-weight: 600;
}
/* Driven only by :checked. A leftover .active class kept a previously selected
   row lit when another option was picked, so the class is no longer styled. */
#order-nexum .nx-option-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb, 37,99,235), 0.04);
}
#order-nexum .nx-option-row .nx-option-left { display: flex; align-items: center; gap: 12px; }
/* Sizing and colour come from the shared input[type="radio"] rules. */
#order-nexum .nx-option-row .nx-option-radio { margin: 0; }
#order-nexum .nx-option-row .nx-option-name {
    font-size: var(--nx-font-size-md); font-weight: 700; color: var(--nx-text);
}
#order-nexum .nx-option-row .nx-option-price {
    font-size: var(--nx-font-size-md); font-weight: 800; color: var(--nx-primary);
}
#order-nexum .nx-option-row:hover:not(:has(input:checked)) {
    border-color: rgba(var(--nx-primary-rgb), 0.4);
    background: rgba(var(--nx-primary-rgb), 0.02);
}

/* ==================================================================
   CHECKOUT account form (checkout.tpl) — modern SaaS look
   The base form is bare Bootstrap organised by .sub-heading section
   dividers. We turn the whole form into a themed card stack and each
   .sub-heading into a proper section header, without touching markup.
   ================================================================== */

/* Wrap the checkout body in a themed card via the form itself */
#order-nexum #frmCheckout {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px);
    box-shadow: var(--nx-shadow-card);
    padding: 8px 28px 28px;
}

/* Section headers (personal info, billing address, security, payment…) */
#order-nexum .sub-heading {
    margin: 28px 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--nx-border-soft);
}
#order-nexum .sub-heading > span,
#order-nexum .sub-heading .primary-bg-color {
    background: none;
    color: var(--nx-text);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    padding: 0;
    display: block;
}
#order-nexum .sub-heading small,
#order-nexum .sub-heading i { color: var(--nx-muted); font-weight: 500; }

/* Consistent field spacing */
#order-nexum #frmCheckout .form-group { margin-bottom: 16px; }
#order-nexum #frmCheckout label:not(.field-icon):not(.radio-inline):not(.checkbox-inline):not(.radio) {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nx-text);
    margin-bottom: 6px;
}
#order-nexum .field-help-text {
    font-size: var(--nx-font-size-sm); color: var(--nx-muted);
    display: block; margin-top: 4px;
}

/* The "already registered / create account" bar */
#order-nexum .already-registered {
    background: rgba(var(--nx-primary-rgb), 0.04);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    padding: 16px 20px;
    margin-bottom: 20px;
}
#order-nexum .already-registered p { margin: 0; color: var(--nx-muted); font-weight: 600; }

/* Account picker rows (existing customer with multiple accounts) */
#order-nexum #frmCheckout .account {
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    background: var(--nx-card-bg);
    padding: 14px 18px;
    margin-bottom: 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* .active is set by scripts.js; :has() covers first paint before it runs. */
#order-nexum #frmCheckout .account.active,
#order-nexum #frmCheckout .account:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}

/* ---- "From where you hear" / payment method radio list as pills ---- */
/* Payment gateways container: turn the inline radio list into a segmented
   grid of selectable pills. Keeps native inputs + all data-* intact. */
#order-nexum #paymentGatewaysContainer .text-center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    text-align: left;
}
#order-nexum #paymentGatewaysContainer .radio-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px 12px 16px;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-button, 12px);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    min-width: 150px;
}
#order-nexum #paymentGatewaysContainer .radio-inline:hover {
    border-color: rgba(var(--nx-primary-rgb), 0.5);
}
#order-nexum #paymentGatewaysContainer .radio-inline input[type="radio"] {
    position: static;
    margin: 0;
}
#order-nexum #paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.08);
}
#order-nexum #paymentGatewaysContainer > p.small {
    font-weight: 700; color: var(--nx-text);
    font-size: 13px; margin-bottom: 12px;
}

/* Credit-card input panel — subtle inset card */
#order-nexum #creditCardInputFields {
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    padding: 20px;
    margin-top: 16px;
}
#order-nexum #creditCardInputFields ul { list-style: none; padding: 0; margin: 4px 0; }

/* Apply-credit + "enter new card" radios */
#order-nexum #applyCreditContainer .radio,
#order-nexum #creditCardInputFields .radio-inline {
    display: flex; align-items: center; gap: 8px;
    color: var(--nx-text); font-weight: 600;
}

/* Additional notes textarea already picks up .form-control rules */

/* ---- Mailing list opt-in as a Yes/No pill card ---- */
#order-nexum .marketing-email-optin {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    padding: 20px 22px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#order-nexum .marketing-email-optin h4 {
    font-size: var(--nx-font-size-lg); font-weight: 800;
    color: var(--nx-text); margin: 0;
}
#order-nexum .marketing-email-optin p { color: var(--nx-muted); margin: 0; font-size: 13px; }

/* ==================================================================
   iCheck controls — the plugin wraps every radio/checkbox in a div that
   paints a fixed-blue sprite (css/blue.png) and hides the real input with
   opacity:0. The sprite ignores the admin palette and stays light in dark
   mode, so the wrapper is stripped back to a plain box and the real input is
   restored — it is then drawn by the shared rules below.
   ================================================================== */
#order-nexum .icheckbox_square-blue,
#order-nexum .icheckbox_square-green,
#order-nexum .iradio_square-blue {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    position: static !important;
}
/* iCheck inlines these on the input; the wrapper no longer overlays it. */
#order-nexum .icheckbox_square-blue > input,
#order-nexum .icheckbox_square-green > input,
#order-nexum .iradio_square-blue > input {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    display: inline-grid !important;
    place-content: center;
}
/* The helper is the plugin's click target and sits on top of the input. */
#order-nexum .icheckbox_square-blue > ins.iCheck-helper,
#order-nexum .icheckbox_square-green > ins.iCheck-helper,
#order-nexum .iradio_square-blue > ins.iCheck-helper {
    display: none !important;
}

/* accent-color only recolours the checked fill — the unchecked box keeps the
   browser's white background, which reads as a bright dot on dark. Drawing the
   control from scratch puts its background on the theme token instead. */
#order-nexum input[type="radio"],
#order-nexum input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0;
    background: var(--nx-card-bg) !important;
    border: 1.5px solid var(--nx-border) !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    display: inline-grid;
    place-content: center;
}
#order-nexum input[type="radio"] { border-radius: 50%; }
#order-nexum input[type="checkbox"] { border-radius: 5px; }

#order-nexum input[type="radio"]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .15s ease;
    background: var(--nx-on-primary, #fff);
}
#order-nexum input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform .15s ease;
    background: var(--nx-on-primary, #fff);
    clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 80% 0%, 39% 62%);
}
#order-nexum input[type="radio"]:checked,
#order-nexum input[type="checkbox"]:checked {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
}
#order-nexum input[type="radio"]:checked::before,
#order-nexum input[type="checkbox"]:checked::before {
    transform: scale(1);
}
#order-nexum input[type="radio"]:hover:not(:checked),
#order-nexum input[type="checkbox"]:hover:not(:checked) {
    border-color: rgba(var(--nx-primary-rgb), .5) !important;
}
#order-nexum input[type="radio"]:focus-visible,
#order-nexum input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}
#order-nexum input[type="radio"]:disabled,
#order-nexum input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: default;
}

/* TOS + complete order area */
#order-nexum #frmCheckout .checkbox-inline { color: var(--nx-text); font-weight: 600; }
#order-nexum #frmCheckout > .text-center:last-of-type { margin-top: 24px; }

/* Password strength meter */
#order-nexum .password-strength-meter .progress {
    border-radius: var(--nx-radius-badge); height: 8px;
    background: var(--nx-bg); overflow: hidden;
}

/* Security / SSL confirmation strip */
#order-nexum .checkout-security-msg {
    background: rgba(var(--nx-primary-rgb), 0.04);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    color: var(--nx-muted);
    margin-top: 20px;
    font-weight: 600;
}

/* Error feedback */
/* --nx-danger is a hex, so it cannot go inside rgba(); the alpha fills need the
   -rgb triplet. The old rgba(var(--nx-danger), …) form produced no background
   or border at all. */
#order-nexum .alert-danger {
    background: rgba(var(--nx-danger-rgb), 0.06);
    border: 1px solid rgba(var(--nx-danger-rgb), 0.25);
    color: var(--nx-danger);
    border-radius: var(--nx-radius-card);
}

@keyframes nx-btn-spin { to { transform: rotate(360deg); } }

#order-nexum .nx-btn-loading {
    pointer-events: none;
    opacity: 0.8;
}
#order-nexum .nx-btn-loading::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
    animation: nx-btn-spin .6s linear infinite;
}
/* WHMCS has its own indicator on some buttons: .spinner-on-click swaps the
   trailing icon for fa-spinner, and a few carry a .loader span. Hidden only
   while loading, so the button's normal icon is untouched and no button ever
   shows two spinners. */
#order-nexum .nx-btn-loading i.fa-spinner,
#order-nexum .nx-btn-loading .loader {
    display: none;
}

#order-nexum #containerProductValidationErrors {
    padding: var(--nx-space-5) var(--nx-space-6);
    margin-bottom: var(--nx-space-6);
    border-left: 4px solid var(--nx-danger);
    box-shadow: var(--nx-shadow-sm);
    color: var(--nx-text);
}
#order-nexum #containerProductValidationErrors > p {
    margin: 0 0 var(--nx-space-2);
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-danger);
}
#order-nexum #containerProductValidationErrorsList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
#order-nexum #containerProductValidationErrorsList li {
    position: relative;
    padding-left: 14px;
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
}
#order-nexum #containerProductValidationErrorsList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-danger);
}

/* ==================================================================
   CONFIGURE page — spec chips row + option rows tidy-up
   ================================================================== */
/* The PROCESSOR / MEMORY / SSD spec chips: make them neat even cards
   (the inline styles set columns; here we refine typography + alignment
   so the key/value pair reads cleanly and never looks cramped). */
#order-nexum .nx-left-spec-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    padding: 12px 14px;
    min-height: 52px;
}
#order-nexum .nx-left-spec-row .nx-left-spec-val {
    font-size: var(--nx-font-size);
    order: 2;
    margin-left: auto;
    white-space: nowrap;
}
#order-nexum .nx-left-spec-row .nx-left-spec-key {
    order: 1;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    color: var(--nx-muted);
}
#order-nexum .nx-left-spec-row .material-symbols-rounded { order: 0; }

/* ==================================================================
   ORDER SUMMARY sidebar — sticky positioning (issue 3)
   configureproduct.tpl inline <style> pins #orderSummary to static;
   override here so on the wide (>=1200px) layout it sticks below the
   topbar, and stacks full-width on narrow screens.
   ================================================================== */
/* scripts.js animates margin-top on both of these to fake a sticky sidebar on
   the legacy float layout. Sticky is handled in CSS here, so the inline margin
   it writes must never take effect — it pushed the whole content column down. */
#order-nexum #orderSummary,
#order-nexum #frmConfigureProduct .secondary-cart-body {
    margin-top: 0 !important;
}

/* The offset has to clear the sticky header or the summary slides underneath
   it. --nx-header-offset is measured at runtime by js/nexum.js; the fallbacks
   below cover the case where that has not run yet, so the panel is never left
   sitting at top:0 under the header.

   The header renders as one band (compact top bar) or two (expanded: utility
   row + nav row), so the fallback is picked per layout rather than always
   adding both heights. */
#order-nexum { --nx-cart-sticky-top: var(--nx-space-4); }

body.nx-header-sticky #order-nexum {
    --nx-cart-sticky-top: calc(
        var(--nx-header-offset, var(--nx-header-height, 64px)) + var(--nx-space-4)
    );
}
/* Expanded top-bar layout stacks two bands (utility row + nav row), so the
   fallback has to account for both. In the sidebar layout the navigation lives
   in the rail and the header is a single band, which the one-band fallback
   above already covers. --nx-header-offset (measured by js/nexum.js) is used
   whenever it is available and is correct for either layout. */
body.nx-menu-top.nx-header-sticky:has(.nx-topbar-expanded) #order-nexum {
    --nx-cart-sticky-top: calc(
        var(--nx-header-offset,
            calc(var(--nx-header-height, 64px) + var(--nx-topbar-utility-height, 48px))
        ) + var(--nx-space-4)
    );
}

@media (min-width: 992px) {
    /* The panel itself sticks, not the column around it — the same approach the
       one-step order form uses. Sticking the column meant everything under the
       summary (the SSL note, the help box) was dragged along with it and the
       column could never scroll past its own height. This way the summary
       follows the page and the rest of the sidebar behaves normally.

       The column keeps the row's full height (its parents no longer set
       align-items: flex-start) — that is what gives the panel something to
       travel down.

       No max-height / overflow: capping the height gave the panel its own
       scrollbar, which is not how the stock cart behaves. It simply stops
       sticking once the column runs out, so nothing ends up unreachable. */
    #order-nexum #orderSummary,
    #order-nexum .nx-cfg-panel {
        position: sticky;
        top: var(--nx-cart-sticky-top);
        /* Below the sticky header (1030) so it passes behind it rather than
           over it if the offset is ever short. */
        z-index: 1;
    }
}
@media (max-width: 991.98px) {
    /* Stacked layout: the summary sits under the configuration column, so
       sticking it would park it over the content the user is scrolling. */
    #order-nexum .secondary-cart-sidebar {
        position: static !important;
        top: auto !important;
        width: 100% !important;
    }
    #order-nexum #orderSummary,
    #order-nexum .nx-cfg-panel {
        position: static;
        top: auto;
        width: 100%;
    }
}

/* ===== Custom <select> skin (mirrors client-area .nx-custom-select-*) =====
   Applied by initSelectSkin() in common.tpl. Scoped to #order-nexum so it is
   themeable via the order form's --nx-* tokens. */
#order-nexum .nx-custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
#order-nexum .nx-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#order-nexum .nx-custom-select-trigger:hover,
#order-nexum .nx-custom-select-wrapper.open .nx-custom-select-trigger {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.1);
}
#order-nexum .nx-custom-select-trigger i {
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
    transition: transform 0.2s ease;
}
#order-nexum .nx-custom-select-wrapper.open .nx-custom-select-trigger i {
    transform: rotate(180deg);
}

/* Inside a .prepend-icon group the leading icon overlays the first 42px of the
   control. The native select had padding-left for that; the skinned trigger
   that replaces it did not, so the country name sat under the globe. */
#order-nexum .prepend-icon .nx-custom-select-trigger { padding-left: 44px; }
/* The wrapper is inserted after the select, so it — not the hidden original —
   is what the icon has to line up against. */
#order-nexum .prepend-icon .nx-custom-select-wrapper { display: block; }
#order-nexum .nx-custom-select-trigger .nx-cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
}
#order-nexum .nx-custom-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: none;
    list-style: none;
    padding: 6px;
    margin: 0;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
}
#order-nexum .nx-custom-select-option {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nx-text);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    margin: 0;
    list-style: none;
}
#order-nexum .nx-custom-select-option:hover {
    background: rgba(var(--nx-primary-rgb), 0.05);
    color: var(--nx-primary);
}
#order-nexum .nx-custom-select-option.selected {
    background: var(--nx-primary);
    color: #ffffff;
    font-weight: 600;
}
#order-nexum .nx-custom-select-option.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Neutralise leaked base all.min.css TEXT colors (hardcoded greys/near-white
   that are low-contrast on the themed surfaces). Semantic status greens/reds
   (.domain-checker-available/-unavailable, .transfer-eligible) are left alone. */
#order-nexum .div-renewal-period-label,
#order-nexum .qty,
#order-nexum .panel-price,
#order-nexum .transfer-not-eligible,
#order-nexum .option,
#order-nexum .option-selected,
#order-nexum .product-info,
#order-nexum .order-summary {
    color: var(--nx-text);
}

/* =====================================================================
   v1.3.1 revamp — remaining stock-looking pages restyled to the Nexum
   design language. All rules are scoped to #order-nexum, use --nx-*
   tokens (dark-mode safe) and only style EXISTING stock hooks so every
   WHMCS JS binding keeps working untouched.
   ===================================================================== */

/* ---- Page headline ---- */
#order-nexum .header-lined {
    border: none;
    padding: 0;
    margin: 0 0 22px;
}
#order-nexum .header-lined h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.6px;
    color: var(--nx-text);
    border: none;
    padding: 0;
    margin: 0;
}
#order-nexum .header-lined p {
    color: var(--nx-muted);
    font-size: var(--nx-font-size);
    margin: 6px 0 0;
}

/* ---- Generic alerts ---- */
#order-nexum .alert {
    border-radius: var(--nx-radius-card, 14px);
    font-weight: 600;
    box-shadow: none;
}
#order-nexum .alert-info {
    background: rgba(var(--nx-primary-rgb), .06);
    border: 1px solid rgba(var(--nx-primary-rgb), .22);
    color: var(--nx-primary);
}
#order-nexum .alert-warning {
    background: rgba(var(--nx-warning-rgb), .08);
    border: 1px solid rgba(var(--nx-warning-rgb), .3);
    color: var(--nx-warning);
}

/* ================= VIEW CART ================= */
#order-nexum .view-cart-items-header {
    background: transparent;
    border: none;
    padding: 0 18px 10px;
    margin: 0;
    font-size: var(--nx-font-size-xs);
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--nx-muted);
}
#order-nexum .view-cart-items { border: none; background: transparent; }
#order-nexum .view-cart-items .item {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 20px 22px;
    margin: 0 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-nexum .view-cart-items .item:hover {
    border-color: rgba(var(--nx-primary-rgb), .35);
    box-shadow: var(--nx-shadow-elevated);
}
#order-nexum .view-cart-items .item:nth-child(odd),
#order-nexum .view-cart-items .item:nth-child(even) {
    background: var(--nx-card-bg);
}
#order-nexum .item-title {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--nx-text);
}
#order-nexum .item-title .btn-link {
    color: var(--nx-primary);
    font-size: var(--nx-font-size-sm);
    font-weight: 700;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--nx-radius-sm);
    background: rgba(var(--nx-primary-rgb), .06);
}
/* Product group / "Addon" tag. Was a muted outline chip that read as disabled
   next to the item title; it is a filled brand badge now. The label is white
   because it sits on the primary fill in both modes. */
#order-nexum .item-group {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: var(--nx-primary);
    border: none;
    border-radius: var(--nx-radius-badge);
    padding: 4px 12px;
    margin: 6px 6px 0 0;
    line-height: 1.4;
}
#order-nexum .item-domain {
    display: inline-block;
    font-size: var(--nx-font-size-sm);
    font-weight: 700;
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.10);
    border-radius: var(--nx-radius-badge);
    padding: 3px 10px;
    margin-top: 6px;
}
#order-nexum .item small { color: var(--nx-muted); display: block; margin-top: 8px; line-height: 1.7; }
/* The column holds a recurring price, its cycle, and sometimes a setup fee and
   a pro-rata note. Only the first is the headline — the setup fee is a bare
   text node in the stock markup with no class to hook, so it used to inherit
   the 17px/800 and outweigh the price above it. The block therefore defaults
   to the supporting size and the first span is promoted back up. */
#order-nexum .item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    font-size: var(--nx-font-size-sm);
    font-weight: 600;
    color: var(--nx-muted);
    line-height: 1.35;
}
#order-nexum .item-price > span:first-child {
    font-size: 17px;
    font-weight: 800;
    color: var(--nx-text);
}
#order-nexum .item-price .cycle,
#order-nexum .item-price .renewal {
    display: block;
    font-size: var(--nx-font-size-sm);
    font-weight: 600;
    color: var(--nx-muted);
    margin-top: 0;
}
#order-nexum .item-qty .btn { color: var(--nx-primary); font-weight: 700; }
/* A square hit area rather than a loose glyph, so it reads as a control and
   lines up with the top of the price column beside it. */
#order-nexum .btn-remove-from-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--nx-muted);
    background: transparent;
    border: none;
    border-radius: var(--nx-radius-md);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    text-decoration: none;
}
#order-nexum .btn-remove-from-cart:hover {
    color: var(--nx-danger-text);
    background: var(--nx-danger-soft);
}
#order-nexum .view-cart-empty {
    background: var(--nx-card-bg);
    border: 1.5px dashed var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 48px 24px;
    text-align: center;
    font-size: var(--nx-font-size-lg);
    font-weight: 700;
    color: var(--nx-muted);
}
#order-nexum .empty-cart { text-align: right; margin: 4px 0 18px; }
#order-nexum .empty-cart .btn {
    color: var(--nx-muted);
    font-weight: 700;
    text-decoration: none;
}
#order-nexum .empty-cart .btn:hover { color: var(--nx-danger-text); }
#order-nexum .row-upgrade-credit {
    border-top: 1px dashed var(--nx-border);
    margin-top: 14px;
    padding-top: 12px;
}
#order-nexum .upgrade-calc-msg { color: var(--nx-muted); font-size: 12.5px; }

/* Promo / tax tabs */
#order-nexum .view-cart-tabs {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    overflow: hidden;
    margin-top: 8px;
}
#order-nexum .view-cart-tabs .nav-tabs {
    flex-direction: row;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--nx-border-soft);
    box-shadow: none;
    margin-bottom: 0;
    padding: 8px 8px 0;
    gap: 4px;
    background: transparent;
}
#order-nexum .view-cart-tabs .nav-tabs > li > a {
    border-radius: var(--nx-radius-md) var(--nx-radius-md) 0 0;
    padding: 12px 18px;
}
#order-nexum .view-cart-tabs .tab-content {
    border: none;
    padding: 22px;
    background: transparent;
}
#order-nexum .view-cart-promotion-code {
    border: 1.5px dashed var(--nx-primary);
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), .05);
    color: var(--nx-primary);
    font-weight: 800;
    text-align: center;
    padding: 14px;
    margin-bottom: 14px;
}
#order-nexum .view-cart-tabs .btn-default {
    border: 1.5px solid var(--nx-input-border);
    border-radius: var(--nx-radius-btn);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 700;
    padding: 11px 20px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#order-nexum .view-cart-tabs .btn-default:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}
#order-nexum .view-cart-gateway-checkout {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 18px;
    margin-bottom: 16px;
    text-align: center;
}

/* ================= ORDER SUMMARY (shared partial + sidebars) ================= */
#order-nexum .order-summary .product-name,
#order-nexum #producttotal .product-name {
    display: block;
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--nx-text);
    margin-bottom: 2px;
}
#order-nexum .order-summary .product-group,
#order-nexum #producttotal .product-group {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nx-muted);
    margin-bottom: 12px;
}
/* Each line is a label/amount pair. WHMCS floats the two halves, so a long
   label pushed the amount onto its own line and the column stopped reading as
   a list of rows. Flex keeps them on one line, label left, amount right. */
#order-nexum .order-summary .clearfix,
#order-nexum #producttotal .clearfix {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nx-text-body);
    padding: 6px 0;
}
#order-nexum .order-summary .clearfix .float-left,
#order-nexum #producttotal .clearfix .float-left {
    float: none;
    min-width: 0;
    /* Grows but never shrinks: in a 300px column a long amount would otherwise
       squeeze the label until it broke after every word. */
    flex: 1 0 auto;
    max-width: 60%;
}
#order-nexum .order-summary .clearfix .float-right,
#order-nexum #producttotal .clearfix .float-right {
    float: none;
    /* Wraps rather than forcing the row wider — "$9.38 USD + $4.69 USD Setup
       Fee" does not fit on one line here and should break cleanly. */
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    font-weight: 700;
    color: var(--nx-text);
}
/* Configurable options come through as "&nbsp;» Label" inside the same row
   markup. Trading the leading space for a real indent makes them read as
   children of the product line above. */
#order-nexum #producttotal > .clearfix .float-left {
    color: var(--nx-muted);
}
#order-nexum #producttotal > .clearfix:first-of-type .float-left {
    color: var(--nx-text);
    font-weight: 700;
}

#order-nexum .summary-totals,
#order-nexum .bordered-totals,
#orderSummary .summary-totals,
#orderSummary .bordered-totals {
    border-top: 1px dashed var(--nx-border);
    border-bottom: 1px dashed var(--nx-border);
    margin: 14px 0;
    padding: 12px 0;
    background: transparent;
    color: var(--nx-text);
}
/* Totals read as the summary's conclusion, so they sit a step above the
   itemised lines. */
#order-nexum .summary-totals .clearfix,
#orderSummary .summary-totals .clearfix {
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-text);
}
#order-nexum .order-summary .subtotal,
#order-nexum .order-summary .recurring-totals {
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    padding: 6px 0;
    color: var(--nx-text);
}
#order-nexum .recurring-charges .cost { font-weight: 800; color: var(--nx-text); }
#order-nexum .recurring-charges { font-size: 12.5px; color: var(--nx-muted); text-align: right; }
#order-nexum .total-due-today,
#orderSummary .total-due-today {
    background: rgba(var(--nx-primary-rgb), .06);
    border: 1px solid rgba(var(--nx-primary-rgb), .18);
    border-radius: var(--nx-radius-md);
    text-align: center;
    padding: 16px 14px;
    margin: 16px 0 4px;
}
#order-nexum .total-due-today .amt,
#orderSummary .total-due-today .amt {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--nx-primary);
}
#order-nexum .total-due-today span:not(.amt),
#orderSummary .total-due-today span:not(.amt) {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--nx-muted);
}
/* Same panel, other pages (viewcart, renewals): the loader sits just above the
   primary-filled heading, so it is pinned onto that bar in white rather than
   pushing the layout with its own padding. The panel is the positioning
   context (see the #orderSummary block further up). */
#order-nexum #orderSummary .loader {
    position: absolute;
    top: 0;
    right: 20px;
    height: calc(32px + (var(--nx-font-size-lg) * 1.3));
    line-height: calc(32px + (var(--nx-font-size-lg) * 1.3));
    padding: 0;
    color: #fff;
    font-size: var(--nx-font-size-lg);
    z-index: 10;
}
#order-nexum #orderSummary .loader i { vertical-align: middle; }
#order-nexum .express-checkout-buttons .separator {
    text-align: center;
    font-size: var(--nx-font-size-xs);
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--nx-muted);
    margin: 10px 0;
}
#order-nexum #orderSummary .btn-checkout,
#order-nexum #orderSummary .btn-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--nx-primary);
    border: none;
    border-radius: var(--nx-radius-btn);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 20px;
    margin-top: 14px;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-nexum #orderSummary .btn-checkout:hover { background: var(--nx-primary-dark); transform: translateY(-1px); }
#order-nexum #orderSummary .btn-checkout.disabled { opacity: .5; pointer-events: none; }
#order-nexum .btn-continue-shopping {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--nx-muted);
    font-weight: 700;
    font-size: 13px;
    margin-top: 8px;
    text-decoration: none;
}
#order-nexum .btn-continue-shopping:hover { color: var(--nx-primary); }
#order-nexum #btnGoToCart { width: 100%; margin-top: 14px; }

/* ================= CHECKOUT extras ================= */
#order-nexum .already-registered .btn {
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 18px;
    border: 1.5px solid var(--nx-primary);
    background: transparent;
    color: var(--nx-primary);
    box-shadow: none;
}
#order-nexum .already-registered .btn:hover { background: var(--nx-primary); color: #fff; }
#order-nexum .sub-heading-borderless { text-align: center; margin: 20px 0 8px; }
#order-nexum .sub-heading-borderless > span {
    background: none;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0;
}
#order-nexum #btnCompleteOrder {
    width: 100%;
    max-width: 420px;
    padding: 15px 28px;
    font-size: 15.5px;
    border-radius: var(--nx-radius-btn);
}
#order-nexum .generate-password {
    border: 1.5px solid var(--nx-input-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 700;
    font-size: 12.5px;
}
#order-nexum .generate-password:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
#order-nexum .social-signin-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
/* ================= SAVED PAYMENT METHODS =================
   includes/existing-paymethods.tpl emits five sibling .paymethod-info divs per
   card with no wrapper, so the pieces stacked as loose lines. A grid keyed on
   data-paymethod-id is not possible in CSS, so the container lays the cells out
   in fixed columns and each card's five cells land on one row. */
#order-nexum #existingCardsContainer {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 0 12px;
    margin-bottom: 16px;
}
#order-nexum #existingCardsContainer .paymethod-info {
    padding: 14px 0;
    border-bottom: 1px solid var(--nx-border);
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* First and last cell in each row carry the row's side padding. */
#order-nexum #existingCardsContainer .paymethod-info:nth-child(5n + 1) { padding-left: 14px; }
#order-nexum #existingCardsContainer .paymethod-info:nth-child(5n) {
    padding-right: 14px;
    text-align: right;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
}
/* Card brand icon */
#order-nexum #existingCardsContainer .paymethod-info:nth-child(5n + 2) i {
    font-size: 22px;
    color: var(--nx-muted);
}
/* Description column reads as secondary next to the card number. */
#order-nexum #existingCardsContainer .paymethod-info:nth-child(5n + 4) {
    color: var(--nx-muted);
    font-weight: 500;
    font-size: var(--nx-font-size-sm);
}
#order-nexum #existingCardsContainer .radio-inline {
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 14px;
}

/* The CVV prompt only applies to a saved card, so it is indented under them. */
#order-nexum #existingCardInfo {
    margin: 14px 0 0;
    padding-left: 14px;
}
#order-nexum #existingCardInfo .form-group { margin-bottom: 0; }

/* ================= NEW CARD FIELDS ================= */
#order-nexum .cc-input-container {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    padding: 20px;
    margin-top: 16px;
}
/* Stock markup wraps the "enter a new card" radio in a bare <ul>. */
#order-nexum .cc-input-container > ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
#order-nexum .cc-input-container > ul .radio-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
}
#order-nexum #newCardInfo {
    margin-top: 16px;
}
#order-nexum #newCardInfo .form-group { margin-bottom: 14px; }
#order-nexum #newCardInfo label:not(.field-icon) {
    display: block;
    font-size: var(--nx-font-size-sm);
    font-weight: 700;
    color: var(--nx-muted);
    margin-bottom: 6px;
}

/* ================= DOMAIN SEARCH (register / results) ================= */
#order-nexum .domain-checker-container { margin-bottom: 26px; }
/* Deliberately a fixed dark hero in both modes: the search field sits on it as
   a light card and the contrast is part of the design. Tinted with the admin
   primary so it still tracks branding. */
#order-nexum .domain-checker-bg {
    background:
        linear-gradient(140deg, rgba(var(--nx-primary-rgb, 37, 99, 235), .18), rgba(var(--nx-primary-rgb, 37, 99, 235), 0)),
        linear-gradient(140deg, #1e293b, #0c1526);
    border-radius: var(--nx-radius-card);
    padding: 34px 26px;
    box-shadow: var(--nx-shadow-elevated);
}
#order-nexum .domain-checker-bg .input-group-box {
    background: var(--nx-card-bg);
    border: none;
    border-radius: var(--nx-radius-card);
    padding: 6px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 12px 30px rgba(2, 8, 20, .35);
}
/* The field sits on --nx-card-bg, so its text and placeholder must follow the
   theme; they were pinned to slate literals and vanished in dark mode. */
#order-nexum .domain-checker-bg .input-group-box .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: var(--nx-text);
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
}
#order-nexum .domain-checker-bg .input-group-box .form-control::placeholder { color: var(--nx-muted); }
/* The markup carries both the BS3 (.input-group-btn) and BS4
   (.input-group-append) class. Bootstrap 4 gives .input-group-append no width
   rule, so the button wrapped onto its own line under the field. Pin both to a
   non-growing flex item on the same row. */
#order-nexum .domain-checker-bg .input-group-btn,
#order-nexum .domain-checker-bg .input-group-append {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    width: auto;
    position: static;
    margin: 0;
}
#order-nexum .domain-checker-bg .btn-primary {
    border-radius: calc(var(--nx-radius-card) - 6px);
    padding: 12px 26px;
    box-shadow: none;
    white-space: nowrap;
}
#order-nexum .default-captcha p { color: var(--nx-muted); }
#order-nexum .domain-checker-result-headline {
    border-radius: var(--nx-radius-card);
    padding: 20px 24px;
    text-align: center;
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    letter-spacing: -.2px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    margin-bottom: 20px;
}
#order-nexum .domain-checker-available {
    color: var(--nx-success, #12b76a);
}
#order-nexum p.domain-checker-available,
#order-nexum div.domain-checker-result-headline.domain-checker-available {
    background: rgba(var(--nx-success-rgb, 18, 183, 106), .07);
    border-color: rgba(var(--nx-success-rgb, 18, 183, 106), .3);
}
#order-nexum .domain-checker-unavailable { color: var(--nx-danger-text); }
#order-nexum div.domain-checker-result-headline.domain-checker-unavailable {
    background: rgba(var(--nx-danger-rgb, 220, 38, 38), .06);
    border-color: rgba(var(--nx-danger-rgb, 220, 38, 38), .28);
}

/* ---- Lookup results ----
   The result rows carry .headline, not .domain-checker-result-headline, so
   the panel styling above never reached them and the verdict rendered as a
   bare red line under the option cards. */
#order-nexum #DomainSearchResults { margin-top: 24px; }
#order-nexum #searchDomainInfo { margin-bottom: 20px; }

#order-nexum #primaryLookupResult .headline,
#order-nexum #primaryLookupSearching {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 18px 24px;
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    letter-spacing: -.2px;
    text-align: center;
}
#order-nexum #primaryLookupResult .headline.domain-checker-available {
    background: color-mix(in srgb, var(--nx-success) 8%, var(--nx-card-bg));
    border-color: color-mix(in srgb, var(--nx-success) 32%, var(--nx-border));
}
#order-nexum #primaryLookupResult .headline.domain-checker-unavailable {
    background: color-mix(in srgb, var(--nx-danger, #dc2626) 8%, var(--nx-card-bg));
    border-color: color-mix(in srgb, var(--nx-danger, #dc2626) 30%, var(--nx-border));
}
/* The CTA is a .btn that also carries .headline, so the panel rules above
   would otherwise turn it into a full-width block. */
#order-nexum #primaryLookupResult .btn.headline {
    display: inline-flex;
    width: auto;
    margin: 0 auto 16px;
    padding: 11px 24px;
    font-size: var(--nx-font-size-md);
    border-radius: var(--nx-radius-btn);
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
#order-nexum #primaryLookupResult .transfer-eligible,
#order-nexum #primaryLookupResult .transfer-not-eligible,
#order-nexum #primaryLookupResult .domain-invalid {
    text-align: center;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-md);
}
#order-nexum #primaryLookupResult .transfer-eligible p:not(.headline),
#order-nexum #primaryLookupResult .transfer-not-eligible p:not(.headline),
#order-nexum #primaryLookupResult .domain-invalid p:not(.headline) {
    margin: 0 0 6px;
}
#order-nexum .domain-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 600;
}
#order-nexum .domain-price .price {
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    color: var(--nx-primary);
}
#order-nexum .domain-checker-result-headline p { margin: 0 0 10px; }
#order-nexum .domain-price .price {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: 10px;
}
#order-nexum .btn-add-to-cart {
    background: var(--nx-primary);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    padding: 11px 22px;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-nexum .btn-add-to-cart:hover { background: var(--nx-primary-dark); }
#order-nexum .domain-lookup-loader { color: var(--nx-muted); font-weight: 700; }

/* Spotlight TLDs */
#order-nexum .spotlight-tlds { background: transparent; margin-bottom: 20px; }
#order-nexum .spotlight-tlds-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
#order-nexum .spotlight-tld-container { width: auto; float: none; padding: 0; }
/* Laid out as a centred column rather than a plain block: the card inherits
   overflow: hidden from the card treatment above, so anything the flow pushed
   past the padding box — the Add button in particular — was cut off at the card
   edge instead of sitting inside it. A column with its own gap keeps the tld,
   price and button stacked and fully inside the card at any card width. */
#order-nexum .spotlight-tld {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 18px 14px;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--nx-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    height: 100%;
    overflow: visible;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-nexum .spotlight-tld .domain-lookup-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#order-nexum .spotlight-tld:hover { border-color: var(--nx-primary); transform: translateY(-2px); }
#order-nexum .spotlight-tld .available.price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-success, #12b76a);
    margin-top: 6px;
}
#order-nexum .spotlight-tld .btn-add-to-cart {
    margin-top: 8px;
    padding: 7px 16px;
    font-size: 12.5px;
    box-shadow: none;
}
#order-nexum .spotlight-tld .btn.unavailable,
#order-nexum .spotlight-tld .btn.invalid {
    margin-top: 8px;
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-muted);
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-sm);
    font-weight: 700;
}
#order-nexum .spotlight-tld [class^="spotlight-tld-"] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #fff;
    background: var(--nx-primary);
    border-radius: var(--nx-radius-badge);
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 6px;
}

/* Suggested domains list */
#order-nexum .suggested-domains {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    overflow: hidden;
    margin-bottom: 22px;
}
#order-nexum .suggested-domains .card-header {
    font-weight: 800;
    font-size: var(--nx-font-size-lg);
    color: var(--nx-text);
    background: transparent;
    border-bottom: 1px solid var(--nx-border-soft);
    padding: 16px 22px;
}
#order-nexum .suggested-domains .list-group {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px;
    margin: 0;
    gap: 6px;
}
#order-nexum .domain-suggestion.list-group-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--nx-border-soft);
    border-radius: var(--nx-radius-md);
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    transition: border-color .15s ease;
}
#order-nexum .domain-suggestion.list-group-item:hover { border-color: rgba(var(--nx-primary-rgb), .4); }
#order-nexum .domain-suggestion .extension { color: var(--nx-primary); font-weight: 800; }
#order-nexum .domain-suggestion .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
#order-nexum .domain-suggestion .actions .price { font-weight: 800; color: var(--nx-text); }
#order-nexum .domain-suggestion .btn-add-to-cart { padding: 8px 16px; font-size: 12.5px; box-shadow: none; }
#order-nexum .domain-suggestion .promo span {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--nx-radius-badge);
    padding: 2px 9px;
    background: rgba(var(--nx-primary-rgb), .1);
    color: var(--nx-primary);
}
#order-nexum .suggested-domains .card-footer {
    background: transparent;
    border-top: 1px solid var(--nx-border-soft);
    padding: 14px;
}
#order-nexum .suggested-domains .card-footer a { color: var(--nx-primary); font-weight: 700; text-decoration: none; }
#order-nexum .domain-suggestions-warning { padding: 0 18px 14px; }
#order-nexum .domain-suggestions-warning p { color: var(--nx-muted); font-size: var(--nx-font-size-sm); }

/* Featured TLDs + pricing table */
#order-nexum .featured-tld {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 18px;
    text-align: center;
    margin-bottom: 18px;
}
#order-nexum .featured-tld .price { font-weight: 800; color: var(--nx-text); font-size: var(--nx-font-size-lg); margin-top: 8px; }
#order-nexum .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
#order-nexum .tld-filters a.badge {
    background: var(--nx-card-bg);
    border: 1.5px solid var(--nx-border);
    color: var(--nx-muted);
    border-radius: var(--nx-radius-badge);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#order-nexum .tld-filters a.badge:hover,
#order-nexum .tld-filters a.badge.active {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .06);
    color: var(--nx-primary);
}
#order-nexum .domain-pricing .bg-white {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    overflow: hidden;
}
#order-nexum .tld-pricing-header {
    background: var(--nx-bg);
    color: var(--nx-muted);
    font-size: var(--nx-font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--nx-border-soft);
}
/* all.min.css paints the header columns directly — #efefef on the col-*
   classes, a #f5f5f5 stripe on :nth-child(odd) and a #97b5d2 underline. Those
   carry the same weight as a plain override, so the greys kept showing through.
   !important settles it; the header's background comes from the row instead.
   The vendor bundle is regenerated on upgrade, so it is never edited. */
#order-nexum .domain-pricing .tld-pricing-header [class*="col-"],
#order-nexum .domain-pricing .tld-pricing-header div:nth-child(odd),
#order-nexum .domain-pricing .tld-pricing-header div,
#order-nexum .domain-pricing .tld-pricing-header .tld-column {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
}
#order-nexum .tld-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--nx-border-soft);
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    transition: background .15s ease;
}
#order-nexum .tld-row:last-child { border-bottom: none; }
/* The base stylesheet paints alternating rows with an unscoped
   .tld-row.highlighted{background:#f3f9fd}, and Bootstrap's .bg-white pins the
   table wrapper with !important, so both stayed light in dark mode. */
#order-nexum .domain-pricing .tld-row.highlighted {
    background: rgba(var(--nx-primary-rgb), .04) !important;
}
/* The row's own cells inherit from the row; nothing inside should paint its
   own surface or the striping shows through in patches. */
#order-nexum .domain-pricing .tld-row > [class*="col-"],
#order-nexum .domain-pricing .tld-row .row {
    background: transparent;
}
#order-nexum .domain-pricing .bg-white,
#order-nexum .bg-white {
    background: var(--nx-card-bg) !important;
    background-color: var(--nx-card-bg) !important;
}
#order-nexum .tld-row:hover { background: rgba(var(--nx-primary-rgb), .06); }
#order-nexum .tld-row strong { font-weight: 800; color: var(--nx-primary); font-size: var(--nx-font-size-lg); }
#order-nexum .tld-row small { color: var(--nx-muted); }
/* Price cells hold bare text nodes, so they were only ever coloured by the
   inherited body rule and rendered washed out against the card. */
#order-nexum .domain-pricing .tld-row .col-4 {
    color: var(--nx-text);
    font-weight: 700;
}
/* all.css divides the name column with a fixed #c7d7e6 rule that reads as a
   pale blue bar on dark. It is also unconditional there, so it showed on
   mobile where the columns stack. */
#order-nexum .domain-pricing .two-row-center {
    border-right: none;
    color: var(--nx-text);
}
@media (min-width: 768px) {
    #order-nexum .domain-pricing .two-row-center {
        border-right: 1px solid var(--nx-border-soft);
    }
}
#order-nexum .tld-sale-group {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--nx-radius-badge);
    padding: 2px 9px;
    margin-left: 6px;
    background: rgba(var(--nx-primary-rgb), .1);
    color: var(--nx-primary);
}
/* Same grid pattern as the addon cards: the row is a flex wrap with a negative
   margin gutter, the cells carry the padding, and the card fills the cell so
   both columns end at the same height. */
#order-nexum .domain-promo-box-row {
    display: flex;
    flex-wrap: wrap;
    margin: 22px -10px 0;
}
#order-nexum .domain-promo-box-col {
    padding: 0 10px;
    margin-bottom: 20px;
}
#order-nexum .domain-promo-box-col > .domain-promo-box {
    width: 100%;
    height: 100%;
}

#order-nexum .domain-promo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 26px;
    margin: 22px 0 0;
    text-align: center;
    color: var(--nx-text);
}
#order-nexum .domain-promo-box-col > .domain-promo-box { margin: 0; }
#order-nexum .domain-promo-box > .clearfix {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
#order-nexum .domain-promo-box i.fas,
#order-nexum .domain-promo-box i.far {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.10);
    border-radius: var(--nx-radius-card);
    font-size: 26px;
    margin-bottom: 14px;
}
#order-nexum .domain-promo-box h3 {
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--nx-text);
    margin: 0 0 6px;
}
#order-nexum .domain-promo-box p { margin: 0 0 10px; }
/* Free space collects before the CTA so both cards line their buttons up even
   when one has more copy. The transfer card's footnote follows the button and
   stays attached to it. */
#order-nexum .domain-promo-box .btn-warning,
#order-nexum .domain-promo-box .btn-primary {
    margin-top: auto;
    align-self: center;
    background: var(--nx-primary);
    border: none;
    color: #fff;
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    padding: 11px 24px;
    box-shadow: var(--nx-shadow-btn);
}
#order-nexum .domain-promo-box .text-warning { color: var(--nx-primary); }
#order-nexum .domain-promo-box .small { color: var(--nx-muted); margin: 12px 0 0; }

/* Domain transfer card + domain options */
#order-nexum #frmDomainTransfer .panel .card-footer,
#order-nexum .panel-footer {
    background: transparent;
    border-top: 1px solid var(--nx-border-soft);
    padding: 16px 24px;
}
#order-nexum .btn-transfer { border-radius: var(--nx-radius-btn); }
#order-nexum .domain-suggestions label { font-weight: 700; color: var(--nx-text); }
#order-nexum .domain-suggestions > div[class*="col-"] {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 12px 16px;
    margin: 0 0 10px;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
#order-nexum .domain-suggestions .btn-default,
#order-nexum .btn-group .btn-default,
#order-nexum .dropdown .btn-default {
    border: 1.5px solid var(--nx-input-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    border-radius: var(--nx-radius-md);
    font-weight: 700;
}
#order-nexum .dropdown-menu {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: var(--nx-shadow-elevated);
    padding: 6px;
}
#order-nexum .dropdown-menu li a,
#order-nexum .dropdown-menu .dropdown-item a {
    color: var(--nx-text);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--nx-radius-sm);
    padding: 8px 12px;
    display: block;
    text-decoration: none;
}
#order-nexum .dropdown-menu li a:hover { background: rgba(var(--nx-primary-rgb), .06); color: var(--nx-primary); }

/* ================= CONFIGURE DOMAINS ================= */
#order-nexum .nx-hosting-yes { color: var(--nx-success, #12b76a); font-weight: 700; }
#order-nexum .nx-hosting-no { color: var(--nx-danger-text); font-weight: 700; text-decoration: none; }
#order-nexum .panel-addon .panel-price {
    background: var(--nx-bg);
    border-top: 1px dashed var(--nx-border);
    color: var(--nx-primary);
    font-weight: 800;
    padding: 12px 16px;
    text-align: center;
    margin-top: 12px;
    border-radius: var(--nx-radius-md);
}
#order-nexum .panel-addon .panel-add {
    text-align: center;
    color: var(--nx-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 0 0;
    cursor: pointer;
}
#order-nexum .panel-addon.panel-addon-selected {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), .08);
}

/* ================= RENEWALS (domains + services) ================= */
#order-nexum .domain-renewal,
#order-nexum .service-renewal {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 22px 24px;
    margin-bottom: 16px;
}
#order-nexum .domain-renewal h3,
#order-nexum .service-renewal h3 {
    font-size: var(--nx-font-size-h3);
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--nx-text);
    margin: 0 0 4px;
}
#order-nexum .service-renewal h4 { font-size: var(--nx-font-size); font-weight: 700; color: var(--nx-primary); margin: 0 0 8px; }
#order-nexum .domain-renewal p,
#order-nexum .service-renewal p { color: var(--nx-muted); font-size: 13px; }
#order-nexum .label {
    border-radius: var(--nx-radius-badge);
    font-size: var(--nx-font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 5px 12px;
    display: inline-block;
}
#order-nexum .label-success { background: rgba(var(--nx-success-rgb, 18, 183, 106), .12); color: var(--nx-success-text); }
#order-nexum .label-warning { background: rgba(var(--nx-warning-rgb, 245, 158, 11), .14); color: var(--nx-warning); }
#order-nexum .label-danger { background: var(--nx-danger-soft); color: var(--nx-danger-text); }
#order-nexum .label-info,
#order-nexum .label-default,
#order-nexum .label-grey { background: var(--nx-bg); color: var(--nx-muted); border: 1px solid var(--nx-border); }
#order-nexum .btn-add-renewal-to-cart {
    background: var(--nx-card-bg);
    border: 1.5px solid var(--nx-primary);
    color: var(--nx-primary);
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    padding: 9px 18px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#order-nexum .btn-add-renewal-to-cart:hover { background: var(--nx-primary); color: #fff; }
#order-nexum .div-renewal-ineligible { color: var(--nx-muted); font-weight: 600; }
#order-nexum .div-renewal-ineligible i { margin-right: 6px; color: var(--nx-primary); }
#order-nexum .addon-renewals {
    border-top: 1px dashed var(--nx-border);
    margin-top: 16px;
    padding-top: 14px;
}
#order-nexum .addon-renewals .service-renewal { box-shadow: none; background: var(--nx-bg); }
#order-nexum .service-renewals-filter,
#order-nexum .domain-renewals-filter { max-width: 260px !important; display: inline-block !important; }
#order-nexum .service-renewals-quick-filter {
    border: 1.5px solid var(--nx-input-border) !important;
    border-radius: var(--nx-radius-md) !important;
    background: var(--nx-card-bg) !important;
    color: var(--nx-text) !important;
    font-weight: 700 !important;
}

/* ================= ADDONS page ================= */
#order-nexum .products .product:not(.nx-plp-card) {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}
#order-nexum .products .product:not(.nx-plp-card) header {
    background: transparent;
    border-bottom: 1px solid var(--nx-border-soft);
    padding: 18px 22px;
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--nx-text);
}
#order-nexum .products .product:not(.nx-plp-card) .product-desc {
    padding: 18px 22px 6px;
    color: var(--nx-text-body);
    font-size: var(--nx-font-size-md);
    width: 100%;
}
#order-nexum .products .product:not(.nx-plp-card) footer {
    background: var(--nx-bg);
    border-top: 1px solid var(--nx-border-soft);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
#order-nexum .products .product:not(.nx-plp-card) .product-pricing { text-align: left; }
#order-nexum .products .product:not(.nx-plp-card) .product-pricing .price {
    font-size: 17px;
    font-weight: 800;
    color: var(--nx-primary);
}
#order-nexum .products .product:not(.nx-plp-card) .btn-success {
    background: var(--nx-primary);
    border: none;
    color: #fff;
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    padding: 11px 20px;
    box-shadow: var(--nx-shadow-btn);
}

/* ================= ERROR / FRAUD ================= */
#order-nexum .error-heading {
    background: rgba(var(--nx-danger-rgb, 220, 38, 38), .06);
    border: 1px solid rgba(var(--nx-danger-rgb, 220, 38, 38), .25);
    color: var(--nx-danger-text);
    border-radius: var(--nx-radius-card);
    text-align: center;
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    padding: 22px;
}
#order-nexum .error-heading i { display: block; font-size: 30px; margin-bottom: 8px; }
#order-nexum .btn-default:not(.dropdown-toggle) {
    border: 1.5px solid var(--nx-input-border);
    border-radius: var(--nx-radius-btn);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Matches body.nx-theme .btn-default:hover in nexum.css so a secondary button
   behaves the same in the cart as it does in the client area. */
#order-nexum .btn-default:not(.dropdown-toggle):hover {
    background: rgba(var(--nx-primary-rgb), 0.06);
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

/* ==================================================================
   MODALS
   Bootstrap reparents an opening modal to the end of <body>, so #order-nexum
   no longer contains it and the cart-scoped rules stopped matching — the
   dialog fell back to stock Bootstrap (white panel, oversized red glyph,
   plain buttons).

   The cart's own dialogs therefore carry .nx-cart-modal and everything below
   hangs off that. It survives the reparenting and keeps this file off the
   client area's modals, which nexum.css already styles — both sheets load on
   cart pages, so a bare `body.nx-theme .modal-*` here would win or lose purely
   on load order.
   ================================================================== */
body.nx-theme .modal-backdrop.show { opacity: .55; }

.nx-cart-modal:not(#recommendationsModal) .modal-dialog { max-width: 440px; }

.nx-cart-modal .modal-content {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    color: var(--nx-text);
    overflow: hidden;
}

.nx-cart-modal .modal-body {
    position: relative;
    padding: 28px 28px 20px;
    text-align: center;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    line-height: 1.55;
}

/* The stock markup floats the dismiss button; pinning it to the corner keeps
   it out of the centred heading's flow. */
.nx-cart-modal .modal-body > .float-right {
    float: none !important;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}
.nx-cart-modal .close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-muted);
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
.nx-cart-modal .close:hover {
    background: var(--nx-bg);
    color: var(--nx-text);
}

.nx-cart-modal .modal-title {
    font-weight: 800;
    font-size: var(--nx-font-size-xl);
    color: var(--nx-text);
    margin: 0 0 8px;
}
/* fa-3x rendered the icon as a bare oversized glyph. It becomes a tinted
   circle sized from the token palette instead. */
/* fa-3x also sets line-height:.08em, which pushed the glyph to the top of the
   circle — resetting it is what actually centres the icon. */
.nx-cart-modal .modal-title i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    font-size: 24px !important;
    line-height: 1 !important;
    vertical-align: middle;
    color: var(--nx-danger, #dc2626);
    background: color-mix(in srgb, var(--nx-danger, #dc2626) 12%, var(--nx-card-bg));
}
.nx-cart-modal .modal-title span { display: block; }

.nx-cart-modal .modal-footer {
    border-top: 1px solid var(--nx-border) !important;
    background: var(--nx-bg);
    padding: 16px 28px;
    gap: 10px;
}
.nx-cart-modal .modal-footer > * { margin: 0; }

.nx-cart-modal .modal-footer .btn {
    min-width: 104px;
    padding: 10px 22px;
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    font-size: var(--nx-font-size-md);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nx-cart-modal .modal-footer .btn-default.btn-default {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
.nx-cart-modal .modal-footer .btn-default.btn-default:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}
.nx-cart-modal .modal-footer .btn-primary.btn-primary {
    background: var(--nx-primary);
    border: 1px solid var(--nx-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), .25);
}
.nx-cart-modal .modal-footer .btn-primary.btn-primary:hover {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}

/* A confirmation that destroys something leads with the danger colour.
   The class chain is repeated to outweigh `#order-nexum .btn-primary`, which
   carries an id and would otherwise keep the button on the brand colour while
   the modal is still inside the cart markup. */
.nx-cart-modal.modal-remove-item .modal-footer .btn-primary.btn-primary.btn-primary {
    background: var(--nx-danger, #dc2626);
    border-color: var(--nx-danger, #dc2626);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--nx-danger, #dc2626) 28%, transparent);
}
.nx-cart-modal.modal-remove-item .modal-footer .btn-primary.btn-primary.btn-primary:hover {
    background: color-mix(in srgb, var(--nx-danger, #dc2626) 85%, #000);
    border-color: color-mix(in srgb, var(--nx-danger, #dc2626) 85%, #000);
    color: #fff;
}

/* Every cart dialog carries the same header: title on the left, dismiss on the
   right, filled with the admin primary. The oversized fa-3x glyph and the
   centred stack are gone, so these read the same as the client-area modals. */
#order-nexum .nx-cart-modal .modal-header,
.nx-cart-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 20px;
    border-bottom: none;
    background: var(--nx-primary);
    color: var(--nx-on-primary);
    border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0;
}
#order-nexum .nx-cart-modal .modal-header .modal-title,
.nx-cart-modal .modal-header .modal-title {
    margin: 0;
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    color: var(--nx-on-primary);
}
#order-nexum .nx-cart-modal .modal-header .close,
.nx-cart-modal .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 0;
    color: var(--nx-on-primary);
    opacity: 0.85;
    text-shadow: none;
}
#order-nexum .nx-cart-modal .modal-header .close:hover,
.nx-cart-modal .modal-header .close:hover {
    color: var(--nx-on-primary);
    opacity: 1;
}
.nx-cart-modal .modal-body { padding-top: 20px; }

/* The recommendations modal carries a grid of product cards, so it needs the
   room a confirmation dialog does not. */
#recommendationsModal .modal-dialog { max-width: 720px; }
#recommendationsModal .modal-body {
    text-align: left;
    color: var(--nx-text);
    max-height: 70vh;
    overflow-y: auto;
}
#recommendationsModal .modal-header h4 {
    margin: 0;
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    color: var(--nx-text);
}
body.nx-theme #recommendationsModal .modal-footer { justify-content: flex-end; }

@media (max-width: 575.98px) {
    body.nx-theme .modal-body { padding: 24px 20px 16px; }
    body.nx-theme .modal-footer { padding: 14px 20px; flex-direction: column-reverse; }
    body.nx-theme .modal-footer .btn { width: 100%; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 767.98px) {
    #order-nexum .view-cart-items-header { display: none; }
    #order-nexum .view-cart-items .item { padding: 16px; }
    #order-nexum .item-price {
        text-align: left;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--nx-border);
    }
    #order-nexum .domain-checker-bg { padding: 22px 16px; }
    #order-nexum .domain-checker-bg .input-group-box { flex-direction: column; gap: 8px; }
    #order-nexum .domain-checker-bg .btn-primary { width: 100%; }
    #order-nexum .domain-suggestion .actions { width: 100%; justify-content: space-between; }
    #order-nexum #frmCheckout { padding: 4px 16px 20px; }
    #order-nexum #paymentGatewaysContainer .radio-inline { width: 100%; min-width: 0; }
    #order-nexum #btnCompleteOrder { max-width: 100%; }
    #order-nexum .already-registered { display: flex; flex-direction: column-reverse; gap: 10px; }
    #order-nexum .already-registered .float-right { float: none; }
    #order-nexum .products .product:not(.nx-plp-card) footer { flex-direction: column; align-items: stretch; text-align: center; }
    #order-nexum .tld-pricing-header .tld-column { display: none; }
    #order-nexum .header-lined h1 { font-size: var(--nx-font-size-h2); }
}

/* =====================================================================
   v1.3.1 — WHMCS-generated promo / upsell markup (addonsPromoOutput,
   MarketConnect) renders with stock classes scoped to #order-standard_cart,
   so under #order-nexum it is unstyled. Re-skin those hooks to match the
   Nexum card/button language. Dark-mode safe via body.nx-dark.
   ===================================================================== */

/* ---- Addon promo container (addonsPromoOutput) ---- */
#order-nexum .addon-promo-container {
    margin: 0 0 16px;
    padding: 22px 24px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-card, 0 1px 2px rgba(16,24,40,.04));
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    overflow: hidden;
}
#order-nexum .addon-promo-container h3 {
    margin: 0 0 8px;
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    color: var(--nx-text);
}
#order-nexum .addon-promo-container .logo {
    float: right;
    margin: 0 0 12px 20px;
    text-align: right;
    line-height: normal;
}
#order-nexum .addon-promo-container img { max-width: 120px; height: auto; }
#order-nexum .addon-promo-container .description {
    margin: 10px 0;
    color: var(--nx-muted);
    line-height: 1.5;
}
#order-nexum .addon-promo-container label {
    margin-top: 4px;
    width: auto;
    font-weight: 600;
    color: var(--nx-text);
}
#order-nexum .addon-promo-container a {
    color: var(--nx-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* ---- MarketConnect promos (.mc-promos / .mc-promo) ----
   Stock markup scoped to #order-standard_cart, so under #order-nexum the
   header had no layout: the logo rendered at its natural size and the price,
   CTA and expander stacked above it. Laid out as a row here, matching the
   product recommendation cards. */
#order-nexum .mc-promos { margin: 0 0 24px; max-width: 100%; }
#order-nexum .mc-promo {
    margin: 0 0 14px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card, 0 1px 2px rgba(16,24,40,.04));
    overflow: hidden;
    color: var(--nx-text);
}
#order-nexum .mc-promo:last-child { margin-bottom: 0; }

#order-nexum .mc-promo .header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "icon content cta expander";
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 18px 20px;
}
#order-nexum .mc-promo .icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-bg);
    padding: 8px;
}
/* Without a cap the logo drove the card's height. */
#order-nexum .mc-promo .icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
#order-nexum .mc-promo .content { grid-area: content; min-width: 0; }
#order-nexum .mc-promo .cta {
    grid-area: cta;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
#order-nexum .mc-promo .expander {
    grid-area: expander;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

#order-nexum .mc-promo .headline { font-size: var(--nx-font-size-lg); font-weight: 800; color: var(--nx-text); }
#order-nexum .mc-promo .tagline { font-size: var(--nx-font-size-sm); font-weight: 500; color: var(--nx-muted); margin-top: 2px; }
#order-nexum .mc-promo .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#order-nexum .mc-promo .body {
    padding: 16px 20px;
    border-top: 1px solid var(--nx-border);
    background: var(--nx-bg);
    font-size: var(--nx-font-size-sm);
    color: var(--nx-text);
}
#order-nexum .mc-promo .body ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The .left / .right classes are the stock two-column float; the grid above
   replaces them. */
#order-nexum .mc-promo .body li {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nx-muted);
}
#order-nexum .mc-promo .body i,
#order-nexum .mc-promo .body .fa-check,
#order-nexum .mc-promo .expander { color: var(--nx-primary); }
#order-nexum .mc-promo .expander .rotate { transition: transform .18s ease; }
#order-nexum .mc-promo .expander .rotate.down { transform: rotate(90deg); }

#order-nexum .mc-promo .price {
    color: var(--nx-primary);
    font-weight: 800;
    font-size: var(--nx-font-size-md);
    white-space: nowrap;
}
#order-nexum .mc-promo .btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nx-primary);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-btn);
    padding: 9px 16px;
    font-weight: 700;
    font-size: var(--nx-font-size-sm);
    white-space: nowrap;
    overflow: visible;
    transition: background-color .18s ease, box-shadow .18s ease;
}
#order-nexum .mc-promo .btn-add:hover {
    background: var(--nx-primary-hover);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), .25);
}
#order-nexum .mc-promo .btn-add .arrow {
    background: none;
    padding: 0;
    font-size: var(--nx-font-size-xs);
    display: inline-flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    #order-nexum .mc-promo .header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon content expander"
            "cta  cta     cta";
        gap: 12px;
        padding: 16px;
    }
    #order-nexum .mc-promo .cta { justify-content: space-between; width: 100%; }
}

/* ---- Stock sub-heading panels (metrics / server config / addons) ---- */
#order-nexum .sub-heading {
    border: none;
    margin: 0 0 14px;
    padding: 0;
}
#order-nexum .sub-heading span,
#order-nexum .sub-heading .primary-bg-color {
    background: transparent;
    color: var(--nx-text);
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    padding: 0;
}
#order-nexum .sub-heading .primary-bg-color small,
#order-nexum .sub-heading .primary-bg-color i { color: var(--nx-muted); font-weight: 500; }

/* ---- Stock addon panels (.panel-add / .panel-price) ---- */
#order-nexum .panel-addon .panel-add {
    color: var(--nx-primary);
    font-weight: 700;
}
#order-nexum .panel-addon .panel-price {
    color: var(--nx-primary);
    font-weight: 800;
}

/* ---- Field container / clearfix wrappers ---- */
#order-nexum .field-container {
    background: transparent;
    border: none;
    padding: 0;
}

/* ---- Shared cart utilities ---- */
#order-nexum .nx-w-100 { width: 100%; }
#order-nexum .nx-lh-32 { line-height: 32px; }

/* Respect the OS "reduce motion" setting, matching nexum.css. */
@media (prefers-reduced-motion: reduce) {
    #order-nexum *,
    #order-nexum *::before,
    #order-nexum *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* Focus rings for the bare controls that set outline:none. These sit inside a
   styled wrapper, so the ring goes on the wrapper where there is one. */
#order-nexum .nx-qty-wrapper:focus-within,
#order-nexum .nx-filter-select-wrapper:focus-within,
#order-nexum .input-group-box:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.15);
}
#order-nexum .nx-qty-wrapper button:focus-visible,
#order-nexum .nx-cpd-bare-input:focus-visible,
#order-nexum .nx-filter-select-wrapper select:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 1px;
}

/* Icon baseline, matching nexum.css. No font-size: components set their own. */
#order-nexum .material-symbols-rounded {
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}
#order-nexum .fas,
#order-nexum .far,
#order-nexum .fab {
    line-height: 1;
    vertical-align: middle;
}

/* ==================================================================
   CONFIGURE PRODUCT DOMAIN (configureproductdomain.tpl)
   The five style="{if ...}display:none{/if}" attributes on
   .domain-input-group are left in place on purpose: WHMCS's own JS
   calls jQuery('.domain-input-group').hide()/.show() on them, so that
   is runtime state, not styling.
   ================================================================== */
/* Header card above the domain options. The gradient runs from a tint of the
   admin primary into the card surface, so it picks up the brand colour while
   the far end always matches the current theme — white-ish in light mode, dark
   in dark mode — without hardcoding either. */
#order-nexum .nx-cpd-hero {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nx-primary) 12%, var(--nx-card-bg)) 0%,
        var(--nx-card-bg) 60%
    );
    border-color: color-mix(in srgb, var(--nx-primary) 22%, var(--nx-border));
    position: relative;
    overflow: hidden;
}
/* Browsers without color-mix keep the plain card surface rather than falling
   back to an unstyled block. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    #order-nexum .nx-cpd-hero {
        background: var(--nx-card-bg);
        border-color: var(--nx-border);
    }
}

#order-nexum .nx-cpd-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: 6px;
}
#order-nexum .nx-cpd-bare-input {
    border: none;
    width: 100%;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--nx-text);
    background: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
#order-nexum .nx-cpd-tld-select {
    border: none;
    border-left: 1px solid var(--nx-border);
    border-radius: 0;
    padding: 0 var(--nx-space-3) 0 0;
    margin-right: var(--nx-space-2);
}
#order-nexum .nx-cpd-sep {
    font-size: var(--nx-font-size-xl);
    font-weight: 700;
    color: var(--nx-muted);
    padding: 0 var(--nx-space-1);
}
#order-nexum .nx-cpd-prefix {
    font-size: var(--nx-font-size);
    font-weight: 700;
    color: var(--nx-muted);
    padding-left: var(--nx-space-1);
}
#order-nexum .nx-cpd-w80 { width: 80px; flex-grow: 0; }
#order-nexum .nx-cpd-grow { flex-grow: 1; }
#order-nexum .nx-cpd-pr-24 { padding-right: var(--nx-space-6); }
#order-nexum .nx-cpd-right-0 { right: 0; }
#order-nexum .nx-cpd-disabled { cursor: not-allowed; }

/* ==================================================================
   CART STEPS INDICATOR (steps-indicator.tpl)
   State lives in is-current / is-done classes rather than Smarty
   conditionals inside style="", so the completed colour follows
   --nx-success instead of a hardcoded #12b76a.
   ================================================================== */
/* The track sits on its own surface so it reads as a distinct band above the
   cart in both modes, rather than floating on the page background. */
#order-nexum .nx-cart-steps-container {
    gap: var(--nx-space-3);
    margin: 0 auto var(--nx-space-7);
    width: 100%;
    max-width: 860px;
    padding: 16px 26px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    /* Bootstrap's .flex-wrap utility is on the markup and carries !important,
       so matching it here is what keeps "Complete" from dropping to a
       second line. */
    flex-wrap: nowrap !important;
    overflow: hidden;
}
#order-nexum .nx-cart-step {
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}
#order-nexum .nx-step-label {
    white-space: nowrap;
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-muted);
    letter-spacing: -0.1px;
    transition: color .18s ease;
}

#order-nexum .nx-step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-sm);
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    background: var(--nx-bg);
    border: 1.5px solid var(--nx-border);
    color: var(--nx-muted);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Completed steps are the filled ones; the step you are on is outlined instead,
   so the track reads as progress made rather than two competing fills. The ring
   carries the emphasis without a drop shadow, which all but disappears against
   a dark background. */
#order-nexum .nx-cart-step.is-current .nx-step-number {
    background: var(--nx-card-bg);
    border-color: var(--nx-primary);
    color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), 0.16);
}
#order-nexum .nx-cart-step.is-done .nx-step-number {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: var(--nx-on-primary, #fff);
}
/* Material tick instead of the ✓ entity, which fell back to whatever glyph the
   system font had and sat off-centre. */
#order-nexum .nx-step-tick {
    font-size: 18px;
    font-variation-settings: 'wght' 700;
}
/* The step you are on is the loudest label; completed ones settle back to body
   text so the eye lands on the current stage. */
#order-nexum .nx-cart-step.is-current .nx-step-label {
    color: var(--nx-primary);
    font-weight: 800;
}
#order-nexum .nx-cart-step.is-done .nx-step-label { color: var(--nx-text); }

/* flex-basis 0 makes every divider share the leftover width equally, so the
   steps stay evenly spaced whatever the label lengths are. */
#order-nexum .nx-step-divider {
    flex: 1 1 0;
    min-width: 20px;
    height: 2px;
    border-radius: var(--nx-radius-badge);
    background: var(--nx-border);
    transition: background-color .18s ease;
}
#order-nexum .nx-step-divider.is-done { background: var(--nx-primary); }

/* Labels are the first thing to go when the row runs out of room, keeping the
   numbered track on one line instead of wrapping. */
@media (max-width: 767.98px) {
    #order-nexum .nx-cart-steps-container {
        gap: var(--nx-space-2);
        padding: 14px 18px;
    }
    #order-nexum .nx-step-label { font-size: var(--nx-font-size-sm); }
    #order-nexum .nx-cart-step:not(.is-current) .nx-step-label { display: none; }
}
@media (max-width: 479.98px) {
    #order-nexum .nx-cart-steps-container { padding: 12px 14px; }
    #order-nexum .nx-step-label { display: none; }
    #order-nexum .nx-step-number { width: 26px; height: 26px; }
    #order-nexum .nx-step-divider { min-width: 12px; }
}

/* ==================================================================
   CONFIGURE PRODUCT (configureproduct.tpl)
   Replaces the 122 inline style="" attributes that page carried. The
   inline values hardcoded 18px/24px radii and spacing, so the admin's
   radius and spacing settings did not reach this page. Everything here
   resolves to a token instead.
   ================================================================== */

/* Page header */
#order-nexum .nx-cfg-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-1);
}
#order-nexum .nx-cfg-subtitle {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 500;
    margin: 0;
}

/* Section card - the repeated white panel */
#order-nexum .nx-cfg-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: var(--nx-space-6);
    box-shadow: var(--nx-shadow-sm);
    margin-bottom: var(--nx-space-6);
}
#order-nexum .nx-cfg-card-flush {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    overflow: hidden;
    box-shadow: var(--nx-shadow-sm);
    margin-bottom: var(--nx-space-6);
}

/* Section headings */
#order-nexum .nx-cfg-h2 {
    font-size: var(--nx-font-size-h3);
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-1);
}
#order-nexum .nx-cfg-h3 {
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-4);
}
#order-nexum .nx-cfg-h3-tight {
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-3);
}
#order-nexum .nx-cfg-lead {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 500;
    margin-bottom: var(--nx-space-5);
}
#order-nexum .nx-cfg-note {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 500;
    margin-bottom: var(--nx-space-4);
}

/* Product package card */
#order-nexum .nx-product-card {
    border: 1px solid var(--nx-border);
    border-radius: calc(var(--nx-radius-card) + 2px);
    padding: var(--nx-space-6);
    background: var(--nx-bg);
    margin-bottom: var(--nx-space-6);
    box-shadow: var(--nx-shadow-sm);
    transition: border-color .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
#order-nexum .nx-card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--nx-space-4);
}
#order-nexum .nx-product-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-2);
    text-align: left;
}
#order-nexum .nx-product-description {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    line-height: 1.5;
    margin: 0 0 var(--nx-space-5);
    max-width: 100%;
    text-align: left;
}
#order-nexum .nx-left-specs {
    border-top: 1px solid var(--nx-border);
    padding-top: var(--nx-space-4);
    width: 100%;
}
#order-nexum .nx-cfg-spec-ico {
    font-size: 20px;
    color: var(--nx-primary);
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-cfg-icon-24 {
    font-size: 24px;
    font-variation-settings: 'FILL' 1;
}

/* Form fields */
#order-nexum .nx-cfg-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-2);
}
#order-nexum .nx-cfg-label-bold { font-weight: 700; }
#order-nexum .nx-cfg-select {
    border-radius: var(--nx-radius-md);
    font-weight: 600;
    font-size: var(--nx-font-size);
    height: 42px;
}
#order-nexum .nx-cfg-input {
    border-radius: var(--nx-radius-sm);
    font-weight: 600;
}
#order-nexum .nx-cfg-input-qty {
    border-radius: var(--nx-radius-sm);
    font-weight: 600;
    width: 100px;
}
/* Size and colour come from the shared input[type="checkbox"] rules. */
#order-nexum .nx-cfg-check-lg {
    width: 18px !important;
    height: 18px !important;
    margin-top: 3px;
}
/* Configurable-option rows. Same selectable-card treatment as .nx-option-row so
   config options and addon options read identically. */
#order-nexum .nx-cfg-check-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 20px;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-button, 12px);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#order-nexum .nx-cfg-check-label:hover:not(:has(input:checked)) {
    border-color: rgba(var(--nx-primary-rgb), 0.4);
    background: rgba(var(--nx-primary-rgb), 0.02);
}
#order-nexum .nx-cfg-check-label:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}
#order-nexum .nx-cfg-check-label > span { min-width: 0; }

/* iCheck wraps the input in a sprite div and hides the input behind it. The
   wrapper is flattened so the themed native control is what shows. Both option
   row flavours get this: .nx-option-row is built by decorateOptionsAndAddons()
   in common.tpl, .nx-cfg-check-label comes from the template. */
#order-nexum .nx-cfg-check-label .iradio_square-blue,
#order-nexum .nx-cfg-check-label .icheckbox_square-blue,
#order-nexum .nx-option-row .iradio_square-blue,
#order-nexum .nx-option-row .icheckbox_square-blue {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0;
}
#order-nexum .nx-cfg-check-label .iCheck-helper,
#order-nexum .nx-option-row .iCheck-helper { display: none !important; }

#order-nexum .nx-cfg-check-label input.nx-cfg-check,
#order-nexum .nx-option-row input.nx-option-radio {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: none;
    border: none;
}

/* Metrics list */
#order-nexum .nx-cfg-metric-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
}
#order-nexum .nx-cfg-metric-item {
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-space-3);
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#order-nexum .nx-cfg-metric-value {
    font-weight: 700;
    color: var(--nx-primary);
}

/* Promo / upsell banner */
#order-nexum .nx-cfg-promo-row {
    display: flex;
    min-height: 120px;
    border-bottom: 1px solid var(--nx-border);
}
#order-nexum .nx-cfg-promo-body {
    flex: 1;
    padding: var(--nx-space-6);
    text-align: left;
}
#order-nexum .nx-cfg-promo-art {
    width: 140px;
    background: rgb(var(--nx-primary-rgb));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#order-nexum .nx-cfg-promo-art-ico {
    font-size: 48px;
    color: var(--nx-on-primary);
}
#order-nexum .nx-cfg-promo-title {
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    color: var(--nx-primary);
    margin: 0 0 6px;
}
#order-nexum .nx-cfg-promo-text {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 500;
    margin: 0 0 var(--nx-space-1);
    line-height: 1.4;
}
#order-nexum .nx-cfg-promo-text-last {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}
#order-nexum .nx-cfg-promo-link {
    font-size: 13px;
    color: var(--nx-primary);
    font-weight: 700;
    text-decoration: underline;
}
#order-nexum .nx-cfg-promo-foot {
    padding: var(--nx-space-4) var(--nx-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    background: var(--nx-card-bg);
}

/* Option rows */
#order-nexum .nx-cfg-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin: 0;
}
#order-nexum .nx-cfg-option:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}
#order-nexum .nx-cfg-option-left {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
}
#order-nexum .nx-cfg-option-name {
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
}
#order-nexum .nx-cfg-option-price {
    font-size: var(--nx-font-size-md);
    font-weight: 700;
    color: var(--nx-primary);
}

/* Submit button */
#order-nexum .nx-cfg-submit {
    width: 100%;
    background: var(--nx-primary);
    border: none;
    color: var(--nx-on-primary);
    padding: 14px var(--nx-space-5);
    border-radius: var(--nx-radius-button);
    font-weight: 700;
    font-size: var(--nx-font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    transition: background .2s ease, box-shadow .2s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.15);
}
#order-nexum .nx-cfg-submit:hover { background: var(--nx-primary-hover); }
/* The domain-configuration page uses the same button standing on its own
   rather than filling a sidebar panel, so it sizes to its label. */
#order-nexum .nx-cd-continue {
    width: auto;
    display: inline-flex;
    min-width: 200px;
    padding-left: var(--nx-space-7);
    padding-right: var(--nx-space-7);
}

/* Addon / upsell panel */
#order-nexum .nx-cfg-panel {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: calc(var(--nx-radius-card) + 2px);
    overflow: hidden;
    box-shadow: var(--nx-shadow-sm);
    width: 100%;
    margin-bottom: var(--nx-space-4);
}
/* Was background:#111827 + color:#fff, which ignored the theme in both modes. */
/* Was background:var(--nx-text) / color:var(--nx-card-bg) — the body ink used
   as a surface. That produced the same dark navy bar whatever the admin picked,
   and inverted awkwardly in dark mode. It is a panel heading, so it takes the
   brand colour like every other filled header in the theme. */
#order-nexum .nx-cfg-panel-head {
    background: var(--nx-primary);
    color: var(--nx-on-primary, #fff);
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    text-transform: none;
    padding: 18px var(--nx-space-6);
    margin: 0;
    border: none;
    text-align: left;
    border-top-left-radius: calc(var(--nx-radius-card) + 2px);
    border-top-right-radius: calc(var(--nx-radius-card) + 2px);
}
#order-nexum .nx-cfg-panel-body {
    border-top: none;
    padding: var(--nx-space-6) var(--nx-space-6) 10px;
}
/* The spinner sits on the panel's filled heading, so it takes the ink that
   goes with that fill. It was --nx-card-bg, which made it invisible whenever
   the heading was light. */
/* Sits on the panel's primary-filled heading, so the spinner is white.
   The heading is 18px of padding above and below a single line, so matching
   that band and centring the icon inside it puts the spinner on the title's
   line rather than at a guessed top offset. `display` is left alone —
   jQuery's fadeIn/fadeOut writes it inline. */
#order-nexum .nx-cfg-panel-badge {
    display: none;
    position: absolute;
    top: 0;
    right: var(--nx-space-6);
    height: calc(36px + (var(--nx-font-size-xl) * 1.3));
    line-height: calc(36px + (var(--nx-font-size-xl) * 1.3));
    color: #fff;
    font-size: var(--nx-font-size-lg);
    z-index: 10;
}
#order-nexum .nx-cfg-panel-badge i { vertical-align: middle; }
#order-nexum .nx-cfg-choice-card {
    border-radius: var(--nx-radius-card);
    padding: var(--nx-space-6);
    transition: border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
    border: 1px solid var(--nx-border);
    margin: 0;
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-sm);
}

/* Was a hardcoded amber tint; now follows --nx-warning. */
#order-nexum .nx-cfg-warnbox {
    background: rgba(var(--nx-warning-rgb), 0.04);
    border: 1px solid rgba(var(--nx-warning-rgb), 0.15);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-space-4);
    margin-top: var(--nx-space-4);
    display: flex;
    align-items: center;
    gap: 10px;
}
#order-nexum .nx-cfg-warnbox .nx-cfg-ico-warning { flex-shrink: 0; }
/* Centred rather than right-aligned: it is the page's primary action, not a
   form footer control tucked into a corner. */
#order-nexum .nx-cfg-addtocart-row {
    display: flex;
    justify-content: center;
    margin-top: var(--nx-space-6);
}

/* Reads as the primary action, so it takes the brand colour. The label stays
   white because it sits on that fill in both light and dark. */
#order-nexum .nx-cfg-btn-success {
    background: var(--nx-primary);
    border: none;
    color: #fff;
    padding: var(--nx-space-3) var(--nx-space-8, 32px);
    border-radius: var(--nx-radius-btn);
    font-weight: 700;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-width: 200px;
    box-shadow: 0 8px 18px rgba(var(--nx-primary-rgb), .25);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-nexum .nx-cfg-btn-success:hover {
    background: var(--nx-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(var(--nx-primary-rgb), .32);
}
#order-nexum .nx-cfg-btn-success:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(var(--nx-primary-rgb), .22);
}
#order-nexum .nx-cfg-ico-success {
    color: var(--nx-success);
    font-size: var(--nx-font-size-h3);
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-cfg-ico-warning {
    color: var(--nx-warning);
    font-size: 20px;
}
#order-nexum .nx-cfg-ico-18 { font-size: var(--nx-font-size-h3); font-variation-settings: 'wght' 700; }

/* Item rows */
#order-nexum .nx-cfg-item-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--nx-text);
    display: block;
    margin-bottom: var(--nx-space-1);
}
#order-nexum .nx-cfg-item-price {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--nx-primary);
    display: block;
}
#order-nexum .nx-cfg-h4 {
    font-size: var(--nx-font-size-xl);
    font-weight: 800;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-4);
    text-align: left;
}
#order-nexum .nx-cfg-eyebrow {
    font-size: var(--nx-font-size-xs);
    font-weight: 600;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 2px;
}
#order-nexum .nx-cfg-hint {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    display: block;
    margin-top: var(--nx-space-1);
}
#order-nexum .nx-cfg-meta-center {
    font-size: 12.5px;
    color: var(--nx-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#order-nexum .nx-cfg-link {
    color: var(--nx-primary);
    font-weight: 700;
    text-decoration: underline;
}
#order-nexum .nx-cfg-link:hover,
#order-nexum .nx-cfg-promo-link:hover {
    color: var(--nx-primary-hover);
}

/* Layout helpers */
#order-nexum .nx-cfg-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nx-space-4);
    width: 100%;
}
#order-nexum .nx-cfg-stack-16 {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-4);
    margin: 0 0 var(--nx-space-6);
}
/* Holds the selectable option cards, so the gap matches the spacing between
   .nx-option-row cards elsewhere in the cart. */
#order-nexum .nx-cfg-stack-6 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
#order-nexum .nx-cfg-row-12 {
    display: flex;
    gap: var(--nx-space-3);
    align-items: flex-start;
}
#order-nexum .nx-cfg-hidden { display: none; }
#order-nexum .nx-cfg-bold-18 { font-size: var(--nx-font-size-h3); font-weight: 700; }

/* Small utilities */
#order-nexum .nx-cfg-strong-primary { font-weight: 700; color: var(--nx-primary); }
#order-nexum .nx-cfg-text-15 { font-size: var(--nx-font-size-lg); }
#order-nexum .nx-cfg-muted-sm { font-size: var(--nx-font-size-md); font-weight: 600; color: var(--nx-muted); }
#order-nexum .nx-cfg-text-sm { font-size: var(--nx-font-size-md); color: var(--nx-text); font-weight: 600; }
#order-nexum .nx-cfg-pad-body { padding: 0 var(--nx-space-6) var(--nx-space-6); }
#order-nexum .nx-cfg-relative { position: relative; }
#order-nexum .nx-cfg-right { text-align: right; flex-shrink: 0; }
#order-nexum .nx-cfg-left { text-align: left; }
#order-nexum .nx-cfg-m-0 { margin: 0; }
#order-nexum .nx-cfg-mt-6 { margin-top: 6px; }
#order-nexum .nx-cfg-gap-8 { gap: var(--nx-space-2); }

/* ==================================================================
   PRODUCT RECOMMENDATIONS ("Last Chance" upsell)
   includes/product-recommendations.tpl is stock markup scoped to
   #order-standard_cart, so under #order-nexum it rendered unstyled: the
   logo filled the column and the price/CTA stacked above it. Laid out as
   cards here. The inline style="" colours WHMCS writes per product are
   left in place — they are the product's own accent.
   ================================================================== */
#order-nexum .product-recommendations-container { margin-bottom: 8px; }
#order-nexum .product-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
#order-nexum .product-recommendations > p {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-md);
}

/* --nx-rec-accent is the product's own colour, published once on the card by
   product-recommendations.tpl. It falls back to the brand colour so a product
   with no accent set still looks intentional. */
#order-nexum .product-recommendation {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-border);
    border-left: 3px solid var(--nx-rec-accent, var(--nx-primary));
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-card);
    overflow: hidden;
    margin: 0;
}
#order-nexum .product-recommendation .header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "content expander"
        "cta     cta";
    gap: 4px 10px;
    padding: 16px 18px;
    align-items: start;
}
#order-nexum .product-recommendation .content { grid-area: content; min-width: 0; }
#order-nexum .product-recommendation .expander { grid-area: expander; }
#order-nexum .product-recommendation .cta {
    grid-area: cta;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
#order-nexum .product-recommendation .headline {
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    color: var(--nx-text);
}
#order-nexum .product-recommendation .tagline {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    margin-top: 2px;
}
#order-nexum .product-recommendation .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#order-nexum .product-recommendation .price {
    font-size: var(--nx-font-size-lg);
    font-weight: 800;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    color: var(--nx-rec-accent, var(--nx-primary));
}
#order-nexum .product-recommendation .price .setup-fee {
    font-size: var(--nx-font-size-xs);
    font-weight: 600;
    color: var(--nx-muted);
}
#order-nexum .product-recommendation .btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: var(--nx-radius-btn);
    padding: 9px 16px;
    font-weight: 700;
    font-size: var(--nx-font-size-sm);
    background: var(--nx-rec-accent, var(--nx-primary));
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}
#order-nexum .product-recommendation .btn-add:hover { filter: brightness(1.08); }
#order-nexum .product-recommendation .btn-add .text { color: inherit; }
#order-nexum .product-recommendation .btn-add .arrow {
    display: inline-flex;
    align-items: center;
    background: none;
    color: inherit;
    font-size: var(--nx-font-size-xs);
}
#order-nexum .product-recommendation .expander {
    cursor: pointer;
    font-size: var(--nx-font-size-md);
    line-height: 1;
    padding-top: 4px;
    color: var(--nx-rec-accent, var(--nx-primary));
}
#order-nexum .product-recommendation .expander .rotate { transition: transform .18s ease; }
#order-nexum .product-recommendation.open .expander .rotate { transform: rotate(90deg); }

#order-nexum .product-recommendation .body {
    border-top: 1px solid var(--nx-border);
    background: var(--nx-bg);
    padding: 14px 18px;
}
#order-nexum .product-recommendation .body p {
    margin: 0;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    line-height: 1.55;
}
/* Product artwork sat at its natural size and pushed the card open. */
#order-nexum .product-recommendation img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    #order-nexum .product-recommendations { grid-template-columns: 1fr; }
    #order-nexum .product-recommendation .cta { flex-direction: column; align-items: stretch; }
    #order-nexum .product-recommendation .btn-add { justify-content: center; }
}