/* ===== 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 button:focus,
#order-nexum button:active,
#order-nexum button:focus-visible,
#order-nexum a:focus,
#order-nexum a:active,
#order-nexum a:focus-visible,
#order-nexum .btn:focus,
#order-nexum .btn:active,
#order-nexum input:focus,
#order-nexum select:focus {
    outline: none;
    box-shadow: none;
}

#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: var(--nx-font-family, 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--nx-text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

#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;
}

/* The summary is a recap, not the main event, so it takes the narrower share
   and hands the extra width to the cart / billing / gateway column beside it.
   A clamp rather than a fixed 300px: it keeps the panel from getting cramped on
   a 992px viewport and from stretching into a second content column on a wide
   one. The gap lives here too — the two columns previously sat flush. */
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 {
    /* Widened (was clamp(268px, 23%, 316px)): the summary's own rows -- a
       configurable option name on the left with its price on the right --
       were wrapping onto two lines at the old width, so the extra room buys
       back single-line rows. Still a clamp, so it stays proportional rather
       than eating the configuration column on a very wide screen.

       No margin-left: the gap to the configuration column comes from the
       row's own spacing, so adding one here only narrowed the usable width. */
    flex: 0 0 clamp(300px, 26%, 360px) !important;
    width: clamp(300px, 26%, 360px) !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;
    }
    
    /* Stock WHMCS ships two separate sidebars for the same categories/actions:
       .cart-sidebar (full cards, desktop) and .sidebar-collapsed (a plain
       <select> dropdown meant to REPLACE it on mobile). This theme stacks the
       full .cart-sidebar above the content on mobile instead of switching to
       the collapsed one -- consistent, richer UI at any width -- but nothing
       was hiding .sidebar-collapsed, so both rendered at once and duplicated
       every category/action row. */
    #order-nexum .sidebar-collapsed,
    .sidebar-collapsed {
        display: none !important;
    }

    #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;
    }
    /* Stacked, so the column gap becomes a row gap.
       !important on every side here: the desktop rule this overrides sets
       margin-left via one of several selectors of equal-or-higher
       specificity (body.nx-theme #order-nexum .secondary-cart-sidebar etc.),
       and without forcing the point some of those kept winning on a phone --
       the card sat inset from the left by that leftover margin while its own
       width:100% still measured against the full row, so it had nowhere to
       give on the right and ran flush against that edge instead, reading as
       off-centre next to every other (properly 0-margin) stacked card on the
       page. margin-right:0 is stated for the same reason, even though
       nothing else was setting it, so this rule is the single source of
       truth for all four sides regardless of what else on the page changes
       later. */
    #order-nexum .secondary-cart-sidebar,
    .secondary-cart-sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: var(--nx-space-5, 20px) !important;
        box-sizing: border-box !important;
    }
    /* #orderSummary carries its own 1px border with no box-sizing rule
       anywhere on the page, so on the default content-box model that border
       always added itself outside the stated width:100% -- a small (2px)
       but real overflow past the card's own right edge, on top of the
       margin issue above. */
    #orderSummary {
        box-sizing: border-box !important;
        max-width: 100%;
    }
    /* 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;
}

/* Shared by the sidebar rows and the nav-tab pills. Colour, padding, background
   and the transition are NOT set here: the sidebar rows get those from the
   Lagom measurements block at the end of this file, and having both set them
   was the reason a change in one place appeared to do nothing. */
#order-nexum .list-group-item,
#order-nexum .nav-tabs > li > a {
    border: none;
    border-radius: var(--nx-radius-md);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* The tab pills still need what was removed above; the sidebar rows do not. */
#order-nexum .nav-tabs > li > a {
    color: var(--nx-muted);
    padding: 10px 16px;
    background: transparent;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}

/* Sidebar row states, exactly as Lagom models them. Its tokens:

       --panel-sidebar-link-padding:          var(--ui-nav-v-link-padding-v) 0;  -> 6px 0
       --panel-sidebar-link-bg:               transparent;
       --ui-nav-v-link-hover-padding-h:       12px;
       --ui-nav-link-hover-bg:                transparent;      <- no tint on hover
       --ui-nav-v-link-active-padding-h:      12px;
       --ui-nav-link-active-bg:               var(--brand-primary-lighter-4);
       --panel-sidebar-link-margin:           1px;
       --transition-base:                     .24s ease;

   So the two states are genuinely different, which is the point:
     resting  flush left, no background
     hover    slides 12px right, still no background
     active   sits 12px in, and takes the tinted pill

   The slide is padding, not transform - the row keeps its hit area and nothing
   overflows the column. Icon and label move together because the padding pushes
   the whole content box.

   Icons and text stay on --nx-primary in every state, as asked. Lagom greys its
   icons (--ui-nav-link-icon-color: --gray-icons); this does not. */
#order-nexum .nav-tabs > li > a:hover {
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.07);
}

/* Hover changes position only — no colour, no background, no underline.
   Colour is deliberately not declared here rather than restated: with nothing
   set, the resting colour simply persists, so the two can never drift apart if
   one of them is edited later. */
#order-nexum .list-group-item:hover:not(.active):not(.domain-suggestion) {
    background: transparent;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
}

#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.07);
}

/* 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: 400;
    color: var(--nx-text);
    height: auto;
    box-shadow: none;
    background: var(--nx-card-bg);
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}

/* 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; }

/* From two digits up the flag block outgrew the reserved padding: this file
   only enumerated iti-sdc-2 and iti-sdc-3, so a four-character dial code
   (+355) fell back to the generic .prepend-icon padding of 44px and the
   typed number ran underneath the flag. Rather than keep adding a width per
   dial-code length -- which is guesswork, since the block width depends on
   the font -- the dropdown variant is laid out as a flex row: the flag keeps
   its natural width in the flow and the input takes whatever is left. Any
   dial code fits, at any font size. The country list stays anchored to the
   flag container, which is still the positioned ancestor. */
#order-nexum .intl-tel-input.allow-dropdown { display: flex; align-items: stretch; }
#order-nexum .intl-tel-input.allow-dropdown .flag-container {
    position: relative;
    right: auto;
    flex: 0 0 auto;
}
#order-nexum .intl-tel-input.allow-dropdown .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 14px;
}

#order-nexum .intl-tel-input.separate-dial-code .selected-flag {
    background-color: var(--nx-bg);
    color: var(--nx-text);
    font-weight: 400;
    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: 400;
    font-size: 14.5px;
    color: #fff;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}

#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;
}

/* The phone country dropdown on the checkout page's domain-contact fields.
   #order-nexum .card above carries overflow:hidden (rounded-corner clipping),
   and the intl-tel-input country list is position:absolute inside one of those
   cards -- so it was sliced off at the card's bottom edge, the same way it was
   on the register page. Scoped with the id because that is what the clipping
   rule uses: body.nx-theme .card:has(...) in nexum.css cannot outrank an id.

   Everything else about the list (width, z-index, row height, the <500px
   wrapping fix) is handled once in nexum.css, which loads on this page too. */
#order-nexum .card:has(.intl-tel-input),
#order-nexum .panel:has(.intl-tel-input) {
    overflow: visible;
}

/* 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: 400;
    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: 600;
    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.
   Padding, radius, font-size, weight, gap and margin moved to the Lagom
   measurements block at the end of this file — they were being set twice, and
   the copy here was the one that lost. Only layout that block does not touch
   stays behind. */
/* Colour, background and transition come from the Lagom measurements block. */
#order-nexum .card-sidebar .list-group-item {
    border: none;
    display: flex;
    align-items: center;
}

/* Icons take the row's own colour. This rule used to force --nx-muted and, at
   (1,3,1), outranked every primary rule written after it — which is why the
   category icons stayed grey while the labels went blue. */
#order-nexum .card-sidebar .list-group-item span.material-symbols-rounded {
    color: inherit;
}

/* Sidebar List-Group Active Item styling (Mockup Light Blue Pill) */
/* Active state is defined once, in the Lagom measurements block at the end of
   this file. Only what that block does not set stays here. */
#order-nexum .card-sidebar .list-group-item.active {
    font-weight: 400;
}

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

/* Lagom's --ui-nav-link-hover-bg is transparent: hover is the slide, not a
   fill. A background here made hover and active look the same. */

/* 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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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: 600;
    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 var(--nx-transition-fast), border-color var(--nx-transition-fast), box-shadow var(--nx-transition-fast);
}

#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 var(--nx-transition-fast);
}

#order-nexum .nx-domain-search-box input {
    border: none;
    box-shadow: none;
    background: transparent;
    font-size: 14.5px;
    font-weight: 400;
    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: #fff;
    border: none;
    border-radius: var(--nx-radius-md);
    padding: 10px 20px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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: 400;
    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: 400;
    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: 400;
    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: 400;
    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 gradient strip. */
#orderSummary h2,
#orderSummary .summary-header {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    color: #fff;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    padding: 16px 18px;
    text-align: left;
    margin: 0;
    border: none;
    letter-spacing: -.2px;
}

/* Body content wrapper gets the padding the card no longer has */
/* 18px rather than 20px: the column is narrower now, so the padding gives the
   figures a little more of it back. */
#orderSummary .summary-container,
#orderSummary .panel-body {
    padding: 18px;
    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 18px 18px;
    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: 400;
    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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    margin: 0;
    font-weight: 400;
}

#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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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: 400;
    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;
    transition: opacity var(--nx-transition);
}
/* 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: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#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: 400;
    padding: 8px 16px;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

#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: 400;
    font-size: 14.5px;
}

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

/* The same total already has its own prominent gradient block in the order
   summary sidebar, so this second copy inside the checkout column was a
   duplicate. The element stays in the DOM (scripts.js's #totalCartPrice writes
   the recalculated number into it on every cart update) — display:none just
   keeps it out of view rather than removing it, so nothing errors out finding
   it.

   This used to be #totalDueToday, the SAME id the order-summary sidebar's own
   live total (viewcart.tpl) uses for its actual displayed amount. A CSS id
   selector matches every element sharing that id, not just the one it was
   meant for, so this rule was hiding the real total in the sidebar along with
   the intended duplicate — the checkout.tpl element was renamed to
   #nxCheckoutTotalBanner to stop the two from colliding. */
#order-nexum #nxCheckoutTotalBanner {
    display: none;
}

/* 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: 400;
    color: var(--nx-primary);
}

#order-nexum .nx-left-spec-key {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    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 var(--nx-transition-slow), box-shadow var(--nx-transition-slow), border-color var(--nx-transition-slow);
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

#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);
    /* Hardcoded: the ribbon fill is always the saturated brand colour, so
       white text is always correct here — --nx-on-primary has resolved dark
       for some schemes and made this unreadable against its own background. */
    color: #fff;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    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: 400;
    letter-spacing: -.4px;
    color: var(--nx-text);
}

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

/* Was defined but never used — products.tpl exploded featuresdesc into chip
   pills instead (see the removed initProductChips() in common.tpl), which
   turned one long admin-written sentence into a single oversized wrapped
   pill rather than readable prose. featuresdesc renders as a plain
   paragraph here now, clamped to 6 lines (rather than 3) so a normal
   product description reads in full instead of cutting off mid-sentence
   with no visible ellipsis to signal the truncation. */
#order-nexum .nx-plp-desc {
    font-size: 13px;
    color: var(--nx-muted);
    margin-top: 8px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -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: 400;
    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: 400;
    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: 400; 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: 400; letter-spacing: -1px; color: var(--nx-text); }

#order-nexum .nx-plp-cycle { font-size: 12.5px; font-weight: 400; 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: 400;
    font-size: 14.5px;
    padding: 13px 0;
    border-radius: var(--nx-radius-md);
    text-decoration: none;
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
    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: #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: 600; letter-spacing: -.5px;
    color: #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, #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: 400; }
#order-nexum .nx-complete-cell .v { font-size: var(--nx-font-size-lg); font-weight: 400; 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: 600; 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: 400; 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: #fff;
    font-weight: 400; 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 var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
}
#order-nexum .nx-complete-btn:hover {
    background: var(--nx-primary-hover); color: #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: 400; 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: 400; 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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    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: 600; 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: 400; color: var(--nx-text);
}
#order-nexum .billing-cycle-card .cycle-setup {
    font-size: var(--nx-font-size-xs); color: var(--nx-muted); font-weight: 400; 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: 400; margin-top: 6px;
}

/* ---- Quantity stepper ---- */
#order-nexum .nx-qty-wrapper {
    display: inline-flex; align-items: center;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    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: 400; 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 var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    margin: 0 0 10px 0; background: var(--nx-card-bg, #fff);
    width: 100%; box-sizing: border-box; font-weight: 400;
}
/* 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: 400; color: var(--nx-text);
}
#order-nexum .nx-option-row .nx-option-price {
    font-size: var(--nx-font-size-md); font-weight: 400; 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.
   ================================================================== */

/* The form used to be one themed card wrapping every section — Choose Account,
   Domain Registrant Info, Payment Method, Additional Notes all inside one grey
   parent box. Each of those already has its own .nx-checkout-head + .nx-pay-card
   pair with its own margins; this rule just kept redrawing a second, bigger box
   around all of them. Plain block now — the sections below space themselves. */
#order-nexum #frmCheckout {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: block;
    width: 100%;
}

/* 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: 600;
    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: 400;
    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: 400; }

/* 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 var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
/* The <label for="..."> only wrapped the radio + address text, sized to that
   content — so clicking the padding around it, or any blank space in the
   card, missed the label entirely and did nothing. Stretching it to fill the
   card lets the browser's own label-click-activates-input behaviour cover the
   whole row, matching every other selectable-card row in the theme
   (.nx-gw-row, .nx-pm-saved-row) where the label IS the padded box itself. */
/* align-items: flex-start, not center — .address grows tall once its
   .nx-acct-detail address expands below the name, and centering pinned the
   radio to the middle of that whole tall box instead of level with the name
   on the first line. flex-start anchors it to the top regardless of how much
   the address below it grows. */
#order-nexum #frmCheckout .account > label.radio-inline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}
/* iCheck wraps the radio in its own sprite div, which becomes the actual flex
   child in the radio's place — the raw <input> ends up nested one level
   deeper inside it, so the margin belongs on the wrapper, not the input. */
#order-nexum #frmCheckout .account > label.radio-inline > input[type="radio"],
#order-nexum #frmCheckout .account > label.radio-inline > .icheckbox_square-blue {
    margin-top: 2px;
    flex-shrink: 0;
}
/* Takes the label's remaining width, so the clickable area (and the expanding
   address beneath it) reaches the card's full right edge instead of stopping
   at the text's own natural width. */
#order-nexum #frmCheckout .account > label.radio-inline > .address {
    flex: 1 1 auto;
    min-width: 0;
}
/* .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);
}

/* Personal Info / Billing Address for a logged-in customer choosing "Create a
   New Account" — nested in the same row/card as that radio (matching how the
   existing accounts above reveal their own address inline) rather than a
   second box underneath it. jQuery's own slideDown/slideUp (scripts.js) drives
   the open/close animation directly on this element; no separate CSS collapse
   here, so the one animation isn't fighting a second one layered on top. */
#order-nexum #frmCheckout .nx-acct-new-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nx-border-soft, var(--nx-border));
}
#order-nexum #frmCheckout .nx-acct-new-fields .sub-heading:first-child {
    margin-top: 0;
}

/* The address only means anything once this is the account actually being
   used, so it stays collapsed until the row is selected — otherwise every
   account on the list looked equally "in effect" regardless of which radio
   was actually checked. grid-template-rows 0fr->1fr animates a height that
   content itself determines, which plain max-height can't do without guessing
   a ceiling; the inner span is what min-height:0 needs to let that row shrink
   past its content's natural height while collapsed. */
#order-nexum #frmCheckout .nx-acct-detail {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--nx-transition-slow), opacity var(--nx-transition-slow);
}
#order-nexum #frmCheckout .nx-acct-detail-inner {
    min-height: 0;
    overflow: hidden;
}
#order-nexum #frmCheckout .nx-acct-detail .small {
    display: block;
    margin-top: 8px;
}
/* Each real field (email, street, city+postcode, state, country) on its own
   line — was one run-on paragraph with commas standing in for line breaks,
   which read as a wall of text once the address was more than two fields. */
#order-nexum #frmCheckout .nx-acct-detail-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#order-nexum #frmCheckout .nx-acct-detail-lines span {
    display: block;
    color: var(--nx-muted);
    font-weight: 400;
}
#order-nexum #frmCheckout .account.active .nx-acct-detail,
#order-nexum #frmCheckout .account:has(input:checked) .nx-acct-detail {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ---- "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: 400;
    color: var(--nx-text);
    cursor: pointer;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    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: 400; 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: 400;
}

/* 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: 600;
    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 var(--nx-transition), border-color var(--nx-transition);
    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 var(--nx-transition);
    background: #fff;
}
#order-nexum input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform var(--nx-transition);
    background: #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: 400; }
#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: 400;
}

/* 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); } }

/* ==================================================================
   Button loading state — ONE mechanism, nothing else. One class for every
   action button on the order form (.nx-btn-loading, added by
   initButtonLoading() in common.tpl).

   Click: the JS freezes the button's measured width/height and adds the
   class. The label goes invisible, one ring is drawn in the middle by
   ::after. Response: the class comes off, the label comes straight back.

   No element is inserted and no wash pseudo-element is used. An earlier
   version had common.tpl insert an <i class="fas fa-spinner"> and styled it
   with a transform to centre it — but that <i> also matched the theme's
   .fa-spinner alias rule, which forces its own rotate animation onto it, and
   an animation beats a plain declaration on the same property. The centring
   transform never applied, so the ring sat off to one side. ::after is
   centred with `inset: 0; margin: auto`, which needs no transform at all and
   therefore cannot be clobbered by the rotation.

   The box stays frozen at its clicked size (JS) so hiding the label cannot
   collapse or shift it.
   ================================================================== */
#order-nexum .nx-btn-loading {
    position: relative;
    box-sizing: border-box;
    pointer-events: none;
    /* Hides an <input>'s label (its value attribute, which has no element to
       target) and any bare text node inside a <button>. */
    color: transparent !important;
    filter: brightness(.9);
    --nx-btn-spinner: #fff;
}
/* Icons, badges and label spans — anything that is an element rather than a
   bare text node. visibility, not display, so the frozen box keeps the exact
   metrics it was measured at. */
#order-nexum .nx-btn-loading > * { visibility: hidden !important; }
/* Any spinner the page supplies itself (WHMCS's .spinner-on-click swaps the
   trailing icon for fa-spinner; a few buttons carry a .loader span) is taken
   out of flow, so a button can never show two. */
#order-nexum .nx-btn-loading i.fa-spinner,
#order-nexum .nx-btn-loading .loader {
    display: none !important;
}
/* The one spinner. */
#order-nexum .nx-btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--nx-btn-spinner) 35%, transparent);
    border-top-color: var(--nx-btn-spinner);
    border-radius: 50%;
    animation: nx-btn-spin .6s linear infinite;
    pointer-events: none;
}
/* Buttons that sit on a light surface need a dark spinner — white on a
   dimmed white button is invisible. */
#order-nexum .nx-btn-loading.nx-btn-outline,
#order-nexum .nx-btn-loading.btn-default,
#order-nexum .nx-btn-loading.nx-modal-cancel,
#order-nexum .nx-btn-loading.nx-pm-btn-outline,
#order-nexum .nx-btn-loading.nx-pm-btn-sm,
#order-nexum .nx-btn-loading.nx-cfg-btn-outline {
    --nx-btn-spinner: var(--nx-primary);
}
/* Prefers-reduced-motion: hold the spinner still rather than removing the
   feedback entirely. */
@media (prefers-reduced-motion: reduce) {
    #order-nexum .nx-btn-loading::after { animation: 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: 400;
    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: 400;
    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-5); }

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) {
    #order-nexum .secondary-cart-sidebar {
        position: sticky;
        position: -webkit-sticky;
        top: var(--nx-cart-sticky-top);
        align-self: flex-start;
        z-index: 1;
    }
    #order-nexum #orderSummary,
    #order-nexum .nx-cfg-panel {
        position: static;
        top: auto;
    }
}
@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: 400;
    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 var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
#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 var(--nx-transition-slow);
}
#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% + 10px) !important;
    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: 400;
    color: var(--nx-text);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    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: 400;
}
#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: 0px;
}
#order-nexum .header-lined h1 {
    font-size: 27px;
    font-weight: 600;
    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;
}

/* Review & checkout heading: title and item count on the left, the way back to
   the catalogue on the right, baseline-aligned so they read as one row. */
#order-nexum .nx-vc-head {
    display: flex;
    align-items: flex-end;
    gap: var(--nx-space-4);
    flex-wrap: wrap;
}
#order-nexum .nx-vc-head-text { min-width: 0; }
#order-nexum .nx-vc-head-meta {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    margin: 7px 0 0;
}
#order-nexum .nx-vc-head-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-primary);
    white-space: nowrap;
}
#order-nexum .nx-vc-head-back:hover { color: var(--nx-primary-hover); }
#order-nexum .nx-vc-head-back .material-symbols-rounded { font-size: 17px; }

/* ---- Generic alerts ---- */
#order-nexum .alert {
    border-radius: var(--nx-radius-card, 14px);
    font-weight: 400;
    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 (Lagom-style) ================= */
/* Panel heading for the cart. It replaced a column-label strip (Options / Qty /
   Price) that no longer described the rows below it. Rendered as the top of the
   same card the rows sit in, so the border is shared, not doubled. */
#order-nexum .nx-vc-cart-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    flex-wrap: wrap;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-bottom: none;
    border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0;
    padding: 15px 20px;
    margin: 0;
}
#order-nexum .nx-vc-cart-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.25px;
    color: var(--nx-text);
}
#order-nexum .nx-vc-cart-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-muted);
    cursor: pointer;
    transition: color var(--nx-transition);
}
#order-nexum .nx-vc-cart-empty:hover { color: var(--nx-danger); }
#order-nexum .nx-vc-cart-empty .material-symbols-rounded { font-size: 17px; }

/* The panel now opens with .nx-vc-cart-head, so the rows below only need the
   remaining three sides. */
#order-nexum .nx-vc-cart-head + .view-cart-items {
    border-top: none;
    border-radius: 0 0 var(--nx-radius-card) var(--nx-radius-card);
}
/* One card holding hairline-separated rows, rather than a stack of individually
   floating cards. Four separate bordered boxes read as four unrelated things;
   a single panel reads as one cart, and it matches every other section on the
   page (billing account, payment method, summary). */
#order-nexum .view-cart-items {
    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 3px rgba(16, 24, 40, .06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
#order-nexum .view-cart-items .item {
    background: var(--nx-card-bg);
    border: none;
    border-bottom: 1px solid var(--nx-border-soft, var(--nx-border));
    border-radius: 0;
    box-shadow: none;
    padding: 16px 20px;
    margin: 0;
    transition: background-color var(--nx-transition-fast);
}
#order-nexum .view-cart-items .item:hover {
    background: color-mix(in srgb, var(--nx-primary) 2%, var(--nx-card-bg));
    border-color: var(--nx-border-soft, var(--nx-border));
    box-shadow: none;
}
/* Last row closes on the panel's own border, not a second one. */
#order-nexum .view-cart-items .item:last-child { border-bottom: none; }
#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 .view-cart-items .item > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}
#order-nexum .view-cart-items .item > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
#order-nexum .view-cart-items .item > .row > [class*="col-sm-7"],
#order-nexum .view-cart-items .item > .row > [class*="col-sm-5"] {
    flex: 1 1 58%;
    max-width: none;
    padding-right: 20px;
}
#order-nexum .view-cart-items .item > .row > .item-qty {
    flex: 0 0 100px;
    max-width: 100px;
    padding-right: 12px;
}
#order-nexum .view-cart-items .item > .row > .item-price {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    margin-left: auto;
    padding-right: 0;
}
/* Edit / Remove sit directly under the item's own text as quiet inline actions.
   The divider they used to sit below made every row look like a closed card,
   which fought the single-panel treatment above. */
#order-nexum .view-cart-items .item > .row > .nx-ci-actions {
    flex: 0 0 100%;
    max-width: 100%;
    order: 10;
    justify-content: flex-start;
    padding-top: 0;
    margin-top: 10px;
    margin-left: 47px;
    border-top: none;
}
#order-nexum .view-cart-items .item.item-addon > .row > .nx-ci-actions {
    margin-left: 47px;
}
/* An addon belongs to the product above it, so it is set back on a faintly
   recessed surface instead of being pushed out of the panel by a margin — the
   rows all share one card now, and a margin would break its left edge. */
#order-nexum .view-cart-items .item.item-addon {
    margin-left: 0;
    border-left: none;
    border-radius: 0;
    background: color-mix(in srgb, var(--nx-border) 22%, var(--nx-card-bg));
    padding-left: 44px;
}
#order-nexum .view-cart-items .item.item-addon:hover {
    background: color-mix(in srgb, var(--nx-border) 30%, var(--nx-card-bg));
}
/* The product name is the row's own heading, so it takes body ink. It was the
   brand colour, which made every row read as a link and left nothing for the
   price — the one figure that should actually stand out — to contrast with. */
#order-nexum .item-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--nx-text);
    line-height: 1.35;
}
#order-nexum .item-title .btn-link {
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--nx-radius-sm);
    background: transparent;
}
#order-nexum .item-title .btn-link:hover {
    color: var(--nx-primary);
    background: transparent;
}
/* The product group is a category label, so it reads as a tag rather than a
   second line of body copy. inline-flex keeps it hugging its text. */
#order-nexum .item-group {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .09);
    border: none;
    border-radius: var(--nx-radius-badge);
    padding: 3px 8px;
    margin: 6px 0 0;
    line-height: 1.4;
}
#order-nexum .item-domain {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-muted);
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 2px;
}
/* Chips rather than a bulleted list: these are short attribute/value pairs, and
   a wrapping row of pills stays compact where a vertical list pushed the price
   column's row height out. */
#order-nexum .nx-ci-config {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#order-nexum .nx-ci-config li {
    position: static;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 400;
    color: var(--nx-text);
    background: color-mix(in srgb, var(--nx-border) 30%, var(--nx-card-bg));
    border: 1px solid var(--nx-border);
    border-radius: 7px;
    line-height: 1.45;
}
#order-nexum .nx-ci-config li::before { content: none; }
#order-nexum .item small { color: var(--nx-muted); display: block; margin-top: 8px; line-height: 1.7; }
#order-nexum .item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    line-height: 1.35;
}
/* Body ink, not brand: the figures sit in a column of their own and read as
   data. tabular-nums keeps the decimal points aligned down the column. */
#order-nexum .item-price > span:first-child {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.4px;
    color: var(--nx-text);
    font-variant-numeric: tabular-nums;
}
#order-nexum .item-price .cycle,
#order-nexum .item-price .renewal,
#order-nexum .item-price .setup-fee {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-muted);
    margin-top: 0;
}
#order-nexum .item-price .dropdown .btn {
    margin-top: 4px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg);
    color: var(--nx-text);
    font-size: 12px;
    font-weight: 400;
    padding: 4px 10px;
}
#order-nexum .item-qty .btn { color: var(--nx-primary); font-weight: 400; }
#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 var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    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: 400;
    color: var(--nx-muted);
}
#order-nexum .view-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}
#order-nexum .view-cart-footer .empty-cart {
    text-align: right;
    margin: 0;
}
#order-nexum .nx-cart-footer-continue,
#order-nexum .nx-cart-footer-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    transition: border-color var(--nx-transition), color var(--nx-transition), background-color var(--nx-transition);
}
#order-nexum .nx-cart-footer-continue .material-symbols-rounded,
#order-nexum .nx-cart-footer-empty .material-symbols-rounded {
    font-size: 18px;
    color: var(--nx-muted);
}
#order-nexum .nx-cart-footer-continue:hover,
#order-nexum .nx-cart-footer-empty:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .04);
    text-decoration: none;
}
#order-nexum .nx-cart-footer-empty:hover .material-symbols-rounded {
    color: var(--nx-danger);
}
#order-nexum .empty-cart .btn { margin: 0; }
#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 — its own card, not the cart's footer. It used to continue
   the cart panel with no top border/radius so the two read as one box, which
   also meant the cart's own bottom corners had to stay square to make room for
   it.

   Now built the same way as the Order Summary card it sits beneath: a
   full-bleed gradient strip carrying the tabs, then a plain card-coloured body
   for the form. The previous version washed the WHOLE panel in a faint primary
   tint (rgba(primary,.10) → .02) over a primary-tinted border, which on a red
   palette read as a pale pink box rather than a deliberate surface — the tint
   was doing the work a header strip should. overflow is hidden rather than
   visible so that strip clips to the card's own corners. */
#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, 0 1px 3px rgba(16, 24, 40, .06));
    overflow: hidden;
    margin-top: var(--nx-space-4, 16px);
}
/* The cart panel now closes on its own bottom corners again. */
#order-nexum .nx-vc-cart-head ~ .view-cart-tabs { margin-top: var(--nx-space-4, 16px); }
#order-nexum .view-cart-items:has(+ .view-cart-tabs),
#order-nexum .nx-vc-cart-head + .view-cart-items:has(+ .view-cart-tabs) {
    border-bottom: 1px solid var(--nx-border-soft, var(--nx-border));
    border-radius: 0 0 var(--nx-radius-card) var(--nx-radius-card);
}
/* .nav-tabs picks up border-radius:var(--nx-radius-card) from the generic
   sidebar/tab-pill rule near the top of this file (meant for a boxed list of
   pills, not this underline style) — the corners never actually got overridden
   for this component, so the whole bar kept that rounded-card shape sitting
   underneath the tabs' own top-rounded corners, and the two together read as a
   fully-rounded pill with the curve landing at the bottom. */
#order-nexum .view-cart-tabs .nav-tabs {
    flex-direction: row;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0 20px;
    gap: 4px;
    /* Same gradient as the Order Summary header (#orderSummary h2), so the two
       cards in this column read as one system. */
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
}
/* The <li> itself must stay transparent. The markup is
   <li class="nav-item active">, and the broad neutralising rule at the top of
   this file (#order-nexum .active — there to stop the base standard_cart CSS
   painting hardcoded #fff in dark mode) matches it and fills it with
   --nx-card-bg. Against the gradient strip that rendered as a solid white
   block with the white tab label invisible inside it. The <a>'s own override
   below never covered this, because the fill was on the parent. */
#order-nexum .view-cart-tabs .nav-tabs > li,
#order-nexum .view-cart-tabs .nav-tabs > li.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Tabs sit ON the gradient strip now, so they are light-on-dark: the resting
   state is a translucent white, the selected one goes solid white with a white
   underline. */
#order-nexum .view-cart-tabs .nav-tabs > li > a {
    border: none;
    /* !important: the same generic rule sets a plain, all-corner radius on
       every .nav-tabs > li > a site-wide: equal specificity to this selector,
       so without !important the winner came down to source order rather than
       which one actually fits an underline-style tab. */
    border-radius: 0 !important;
    padding: 15px 6px;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: -.1px;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    margin: 0 10px -1px 10px;
    border-bottom: 2px solid transparent;
    transition: color var(--nx-transition), border-color var(--nx-transition);
    text-decoration: none;
}
#order-nexum .view-cart-tabs .nav-tabs > li > a:hover {
    color: #fff;
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .35);
}
/* Bootstrap's tab.js only ever updates .active on the <a> itself when a tab
   is clicked — the <li> keeps whatever .active it was given on page load
   forever. The markup starts with class="nav-item active" hardcoded on the
   first <li>, so styling off li.active (as an earlier version of this rule
   did, alongside a stale aria-expanded fallback) kept the first tab looking
   selected even after its own <a> had lost .active and a different tab's
   <a> had gained it. The <a>'s own class is the only thing that reflects
   which tab is actually selected.

   A second, site-wide rule (further up, meant for sidebar list groups)
   reads ".nav-tabs > li.active > a" the same stale way and isn't scoped
   away from this component, so it kept lighting up whichever tab's <li>
   still carried the leftover class — overridden back to the resting style
   here whenever that <a> isn't the one actually active. */
#order-nexum .view-cart-tabs .nav-tabs > li > a.active {
    color: #fff !important;
    background: transparent !important;
    border-bottom: 2px solid #fff !important;
    text-decoration: none !important;
}
#order-nexum .view-cart-tabs .nav-tabs > li > a:not(.active) {
    color: rgba(255, 255, 255, .72) !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
}
#order-nexum .view-cart-tabs .tab-content {
    border: none;
    padding: 22px;
    background: var(--nx-card-bg);
}
/* Promo validation feedback — was WHMCS's plain default .alert, centred and
   floating disconnected at the top of the whole cart column, above "Your
   cart", rather than next to the form the customer just submitted. It's an
   icon+text banner now, styled like every other themed notice in the order
   form (.nx-cfg-warnbox, the fraud-protection card), and sits directly inside
   the tab the code was typed into. */
#order-nexum .nx-promo-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--nx-radius-md);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
}
#order-nexum .nx-promo-msg .material-symbols-rounded {
    font-size: 19px;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-promo-msg.is-warning {
    background: rgba(var(--nx-warning-rgb), .08);
    border: 1px solid rgba(var(--nx-warning-rgb), .3);
    color: var(--nx-warning);
}
#order-nexum .nx-promo-msg.is-info {
    background: rgba(var(--nx-primary-rgb), .06);
    border: 1px solid rgba(var(--nx-primary-rgb), .22);
    color: var(--nx-primary);
}
#order-nexum .nx-promo-msg.is-success {
    background: rgba(var(--nx-success-rgb), .08);
    border: 1px solid rgba(var(--nx-success-rgb), .25);
    color: var(--nx-success);
}

#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: 400;
    text-align: center;
    padding: 14px;
    margin-bottom: 14px;
}
#order-nexum .view-cart-tabs .btn-default {
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-btn);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 400;
    padding: 11px 20px;
}
#order-nexum .view-cart-tabs .btn-default:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

/* Promo input — button inside field (Lagom) */
/* Was the dark hero-band gradient, which read as a heavy brown slab dropped
   into an otherwise white cart card. The promo row is an ordinary form field,
   so it is treated like one: no band, and the field itself carries the border. */
#order-nexum .nx-promo-form {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}
/* .nx-promo-input-wrap is the plain flex row holding the field box and the
   button side by side — it draws nothing itself. .nx-promo-field, right below,
   is the actual bordered box wrapping the icon + input; the wrap used to carry
   its own border/focus-ring too, but that fought .nx-promo-field's own focus
   ring for the same visual space (whichever rule ran later in the file won),
   so it's a plain container now. */
#order-nexum .nx-promo-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
}
#order-nexum .nx-promo-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
#order-nexum .nx-promo-field:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-promo-ico {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--nx-muted);
    font-variation-settings: 'FILL' 0;
}
#order-nexum .nx-promo-field:focus-within .nx-promo-ico {
    color: var(--nx-primary);
}
#order-nexum .nx-promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
    outline: none;
    box-shadow: none;
}
/* The field wrapper shows focus; the borderless input inside must not also
   pick up the global keyboard focus ring. */
#order-nexum .nx-promo-input:focus,
#order-nexum .nx-promo-input:focus-visible { outline: none; }
#order-nexum .nx-promo-input::placeholder {
    color: var(--nx-muted);
    font-weight: 400;
}
/* Each of these sits inside a wrapper that already draws the field, so the
   input must add no surface of its own. Enforced over Bootstrap's
   .form-control (which outranks a plain class selector) — otherwise it painted
   a second box, visible in dark mode as an inset panel with its own outline. */
#order-nexum .nx-promo-input,
#order-nexum .nx-cpd-field input,
#order-nexum .nx-cpd-field select,
#order-nexum .nx-dt-field input,
#order-nexum .nx-dfilters-search input {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
}
/* Chrome paints its autofill background with a UA style that ignores
   `background`, so the only way to keep these transparent once autofilled is
   an inset shadow the width of the field. */
#order-nexum .nx-promo-input:-webkit-autofill,
#order-nexum .nx-cpd-field input:-webkit-autofill,
#order-nexum .nx-dt-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--nx-text);
    -webkit-box-shadow: 0 0 0 100px var(--nx-card-bg) inset !important;
    caret-color: var(--nx-text);
}
#order-nexum .nx-promo-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 24px;
    margin: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: -.1px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: background-color var(--nx-transition), box-shadow var(--nx-transition);
}
#order-nexum .nx-promo-btn:hover,
#order-nexum .nx-promo-btn:focus {
    background: color-mix(in srgb, var(--nx-primary) 82%, #000);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--nx-primary-rgb), .28);
    outline: none;
}

/* Estimate taxes tab */
/* Flat, not a slab. This used to carry the dark gradient itself, which made
   sense while the panel around it was near-white — but that gradient is now
   the tab strip directly above, so keeping it here stacked two gradients with
   a white gap between them. The body is a plain card surface in both tabs; the
   promo form next door is treated the same way. */
#order-nexum .nx-tax-form {
    margin: 0;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
#order-nexum .nx-tax-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
/* Label and field colours follow the theme now that they sit on the card
   surface rather than on a dark gradient — the white label and borderless
   white input were only readable against that slab. */
#order-nexum .nx-tax-field label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
    color: var(--nx-muted);
    margin-bottom: 6px;
}
#order-nexum .nx-tax-field .form-control {
    height: 46px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
    padding: 0 14px;
}
#order-nexum .nx-tax-field .form-control:focus {
    border-color: color-mix(in srgb, var(--nx-primary) 45%, var(--nx-border));
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .10);
}
#order-nexum .nx-tax-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 400;
    box-shadow: var(--nx-shadow-btn, none);
    transition: background-color var(--nx-transition), transform var(--nx-transition);
}
#order-nexum .nx-tax-submit:hover,
#order-nexum .nx-tax-submit:focus {
    background: color-mix(in srgb, var(--nx-primary) 82%, #000);
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    #order-nexum .nx-promo-input-wrap {
        flex-wrap: wrap;
        gap: 8px;
    }
    #order-nexum .nx-promo-field {
        flex: 1 1 100%;
        height: 40px;
    }
    #order-nexum .nx-promo-input {
        flex: 1 1 100%;
        height: 40px;
    }
    #order-nexum .nx-promo-btn {
        flex: 1 1 100%;
        width: 100%;
    }
    #order-nexum .nx-tax-fields {
        grid-template-columns: 1fr;
    }
    #order-nexum .nx-tax-submit {
        width: 100%;
    }
}
#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: 400;
    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: 400;
    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: 400;
    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: 400;
    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: 400;
}

#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: 400;
    color: var(--nx-text);
}
#order-nexum .order-summary .subtotal,
#order-nexum .order-summary .recurring-totals {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    padding: 6px 0;
    color: var(--nx-text);
}
#order-nexum .recurring-charges .cost { font-weight: 400; color: var(--nx-text); }
#order-nexum .recurring-charges { font-size: 12.5px; color: var(--nx-muted); text-align: right; }
/* The one figure the customer is looking for, so it carries the brand fill and
   the panel's heading no longer does. Left-aligned to sit on the same reading
   axis as the itemised lines above it. */
#order-nexum .total-due-today,
#orderSummary .total-due-today {
    background: var(--nx-primary);
    border: none;
    border-radius: var(--nx-radius-md);
    text-align: left;
    padding: 15px 17px;
    margin: 16px 0 4px;
    box-shadow: 0 8px 20px rgba(var(--nx-primary-rgb), .22);
}
#order-nexum .total-due-today .amt,
#orderSummary .total-due-today .amt {
    display: block;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: -1.1px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}
/* The label above the figure. It sits on the brand fill, so it takes a tinted
   white rather than the muted body grey it used against the old flat tint. */
#order-nexum .total-due-today span:not(.amt),
#orderSummary .total-due-today span:not(.amt) {
    font-size: 10.5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(255, 255, 255, .82);
}
/* Same panel, other pages (viewcart, renewals): the loader is pinned onto the
   heading row rather than pushing the layout with its own padding. The panel is
   the positioning context (see the #orderSummary block further up). The heading
   is no longer primary-filled, so the spinner takes the brand colour instead of
   the white it needed against that bar. */
/* The heading is a dark gradient fill again, so the spinner pinned on top of
   it needs to be white to stay visible — it was var(--nx-primary) for the
   brief period the heading was plain/light. */
#order-nexum #orderSummary .loader {
    position: absolute;
    top: 0;
    right: 18px;
    height: calc(32px + (var(--nx-font-size-md) * 1.3));
    line-height: calc(32px + (var(--nx-font-size-md) * 1.3));
    padding: 0;
    color: #fff;
    font-size: var(--nx-font-size-md);
    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: 400;
    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: 400;
    font-size: 14.5px;
    padding: 13px 20px;
    margin-top: 14px;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
}
#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: 400;
    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: 400;
    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: 600;
    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: 400;
    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 now wraps each card's five .paymethod-info
   pieces in one .nx-pm-saved-row per card (previously five flat siblings laid
   out via a nth-child(5n) grid hack), so each card reads as its own
   selectable, bordered row — the same pattern .nx-gw-row/.nx-cfg-choice-card
   use elsewhere — instead of a table strip. */
#order-nexum #existingCardsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
/* Same border/radius/padding/active-tint values as #frmCheckout .account
   (the "Choose Account" rows above) — a saved card and a saved billing
   account are the same kind of choice, so they read as one visual language
   instead of two different card styles on the same page.

   .nx-pm-saved-row is the bordered/tinted box; .nx-pm-saved-main is the
   radio+brand+name+expiry flex row inside it. (It used to also carry a
   .nx-pm-saved-detail slot for a CVV prompt shown once a card was selected —
   removed at the client's request along with #existingCardInfo itself,
   selecting a saved card no longer asks for its CVV at all.) */
#order-nexum .nx-pm-saved-row {
    padding: 14px 18px;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    background: var(--nx-card-bg);
    cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
#order-nexum .nx-pm-saved-row:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border));
}
#order-nexum .nx-pm-saved-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .04);
}
#order-nexum .nx-pm-saved-row.is-expired { opacity: .55; cursor: not-allowed; }
#order-nexum .nx-pm-saved-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
#order-nexum .nx-pm-saved-radio { margin: 0; flex: 0 0 17px; }
/* Same iCheck sprite flatten as every other radio this theme restyles. */
#order-nexum .nx-pm-saved-radio input[type="radio"] {
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: none;
    border: none;
    accent-color: var(--nx-primary);
}
#order-nexum .nx-pm-saved-radio .icheckbox_square-blue {
    position: static !important;
    display: inline-flex !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
#order-nexum .nx-pm-saved-radio .iCheck-helper { display: none !important; }
#order-nexum .nx-pm-saved-brand {
    flex: 0 0 40px;
    width: 40px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--nx-bg);
    color: var(--nx-muted);
}
#order-nexum .nx-pm-saved-brand i { font-size: 18px; }
#order-nexum .nx-pm-saved-body { flex: 1 1 auto; min-width: 0; }
#order-nexum .nx-pm-saved-name {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#order-nexum .nx-pm-saved-name .type {
    text-transform: capitalize;
    color: var(--nx-muted);
    font-weight: 400;
    margin-right: 4px;
}
#order-nexum .nx-pm-saved-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-pm-saved-desc:empty { display: none; }
#order-nexum .nx-pm-saved-expiry {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nx-muted);
    text-align: right;
}

/* ================= NEW CARD FIELDS ================= */
/* No outer card here — "Use a new card" is a row of its own, same level as the
   saved-card rows above it, so the two read as one list of choices rather than
   the new-card option living inside a separate box the saved cards sit outside
   of. */
#order-nexum .cc-input-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
/* Stock markup wraps the "enter a new card" radio in a bare <ul>; styled as the
   same selectable-row pattern as the saved cards above, so "Use a new card"
   doesn't read as a lesser option glued on below them. */
#order-nexum .cc-input-container > ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
/* The bordered/tinted box lives on the <li> itself now — #newCardInfo and
   #newCardSaveSettings render as its siblings, right after .radio-inline, so
   the fields they hold need to sit inside the same box the radio's row does.
   .radio-inline goes back to being a plain flex row (radio + label text),
   the same relationship .nx-pm-saved-main has to .nx-pm-saved-row above. */
#order-nexum .cc-input-container > ul > li {
    padding: 14px 18px;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 14px);
    background: var(--nx-card-bg);
    cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
#order-nexum .cc-input-container > ul > li:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border));
}
#order-nexum .cc-input-container > ul > li:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .04);
}
#order-nexum .cc-input-container > ul .radio-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
}
/* Same iCheck flatten again — #new fires the same ifChecked-driven reveal of
   the fields below it. */
#order-nexum .cc-input-container > ul input[type="radio"] {
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: none;
    border: none;
    flex-shrink: 0;
    accent-color: var(--nx-primary);
}
#order-nexum .cc-input-container > ul .icheckbox_square-blue {
    position: static !important;
    display: inline-flex !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0;
}
#order-nexum .cc-input-container > ul .iCheck-helper { display: none !important; }
/* Matches how "Create a New Account" reveals its own fields further up this
   same form (#frmCheckout .nx-acct-new-fields): a plain hairline, not a second
   bordered/tinted box nested inside the row that's already showing its own
   active border and tint. A full box here on top of that doubled the frame —
   the row's own border, then this one immediately inside it — which is what
   read as heavy/boxed-within-boxed rather than the clean single-frame look
   "Choose Account" above it uses. The left margin keeps it reading as this
   row's own revealed content rather than a field group floating on its own. */
#order-nexum #newCardInfo {
    margin: 12px 0 0 18px;
    padding-top: 12px;
    border-top: 1px solid var(--nx-border-soft, var(--nx-border));
}
#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: 400;
    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: 400;
    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;
}
/* Wrapped in its own card so it reads the same whether it lands inside a
   white cfg-card (register/configure steps) or straight on the coloured hero
   band (the transfer page had no wrapper of its own at all, which is what let
   the raw WHMCS captcha markup show through unstyled). One surface, one text
   colour, regardless of what it is sitting on. */
#order-nexum .default-captcha {
    display: inline-block;
    max-width: 360px;
    margin: 0 auto;
    padding: 18px 22px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .08);
    text-align: center;
}
#order-nexum .default-captcha,
#order-nexum .default-captcha p,
#order-nexum .default-captcha small,
#order-nexum .default-captcha label {
    color: var(--nx-muted);
    font-size: 13px;
    line-height: 1.5;
}
#order-nexum .default-captcha p { margin: 0 0 12px; }
#order-nexum .default-captcha > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#order-nexum .default-captcha #inputCaptchaImage { border-radius: var(--nx-radius-sm, 8px); display: block; }
#order-nexum .default-captcha #inputCaptcha {
    width: auto;
    max-width: 130px;
    height: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm, 8px);
    background: var(--nx-bg);
    color: var(--nx-text);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}
#order-nexum .default-captcha #inputCaptcha:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-cpd-captcha-row { margin-top: 16px; text-align: center; }
#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: 400;
    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; position: relative; }
#order-nexum #searchDomainInfo { margin-bottom: 20px; }

/* One horizontal card carries the verdict and the price, so the result reads as
   a single row rather than a stack of centred blocks. The state colour sits on
   the icon; the card itself stays neutral. */
#order-nexum #primaryLookupResult {
    position: relative;
    overflow: hidden;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 50px 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
/* Diagonal corner banner for the AI flow's top pick. Rotated and pushed past
   its own box on both axes so the visible strip lands flush in the corner
   instead of as a small rotated rectangle floating off it. */
#order-nexum .nx-cpd-featured-ribbon {
    position: absolute;
    top: 18px;
    right: -22px;
    width: 100px;
    padding: 3px 0;
    transform: rotate(45deg);
    background: var(--nx-primary, #dc2626);
    color: #fff;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
#order-nexum .nx-cpd-featured-ribbon .material-symbols-rounded {
    font-size: 11px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}
#order-nexum .nx-cpd-featured-ribbon.w-hidden { display: none; }
#order-nexum .nx-cpd-try-again {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 22px;
    border: none;
    border-radius: var(--nx-radius-btn);
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--nx-transition-fast), color var(--nx-transition-fast);
}
#order-nexum .nx-cpd-try-again:hover { background: var(--nx-primary); color: #fff; }
#order-nexum .nx-cpd-try-again .material-symbols-rounded { font-size: 18px; line-height: 1; color: inherit; }
#order-nexum .nx-cpd-try-again.w-hidden { display: none; }
#order-nexum #primaryLookupResult .headline {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--nx-font-size-h3);
    font-weight: 400;
    letter-spacing: -.2px;
    text-align: left;
}
#order-nexum #primaryLookupResult .headline::before {
    font-family: 'Material Symbols Rounded';
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#order-nexum #primaryLookupResult .headline.domain-checker-available::before {
    content: 'check';
    background: color-mix(in srgb, var(--nx-success) 16%, transparent);
    color: var(--nx-success);
}
#order-nexum #primaryLookupResult .headline.domain-checker-unavailable::before {
    content: 'close';
    background: color-mix(in srgb, var(--nx-danger, #dc2626) 14%, transparent);
    color: var(--nx-danger, #dc2626);
}
/* The available-state message and its price sit as two stacked lines next to
   the icon, rather than the price living in its own column across from the
   button — the button is the only thing on the right. */
#order-nexum .nx-cpd-result-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* The verdict itself carries the tone: available reads success-green,
   every unavailable/invalid/error state reads danger. The ::before icon sets
   its own colour, so it is unaffected by these. */
#order-nexum #primaryLookupResult .headline.domain-checker-available .nx-cpd-result-msg { color: var(--nx-success); }
#order-nexum #primaryLookupResult .headline.domain-checker-unavailable { color: var(--nx-danger, #dc2626); }
#order-nexum .nx-cpd-result-msg { color: var(--nx-text); }
#order-nexum .nx-cpd-result-price {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-result-price .price {
    font-weight: 400;
    color: var(--nx-text);
    margin-right: 3px;
}
#order-nexum .nx-cpd-result-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 2px 0;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-result-note .material-symbols-rounded { font-size: 16px; }
#order-nexum .nx-cpd-result-note.w-hidden { display: none; }

/* Below 768px the horizontal icon-left/button-right row above reads as
   cramped and unbalanced on a narrow screen -- centred and stacked instead,
   with a bigger icon and a full-width action, matching how every other
   result-style card in the theme already behaves on mobile. Desktop keeps
   the row layout untouched. */
@media (max-width: 767.98px) {
    #order-nexum #primaryLookupResult {
        flex-direction: column;
        text-align: center;
        padding: 32px 20px;
    }
    #order-nexum #primaryLookupResult .headline {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        flex-basis: auto;
    }
    #order-nexum #primaryLookupResult .headline::before {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        font-size: 34px;
    }
    #order-nexum .nx-cpd-result-body { align-items: center; }
    #order-nexum #primaryLookupResult .domain-price,
    #order-nexum #primaryLookupResult .nx-cpd-atc-group,
    #order-nexum #primaryLookupResult .nx-cpd-atc-group .btn-add-to-cart,
    #order-nexum #primaryLookupResult .nx-cpd-try-again,
    #order-nexum #primaryLookupResult .domain-contact-support {
        width: 100%;
        justify-content: center;
    }
}
#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: 400;
    letter-spacing: -.2px;
    text-align: center;
}
/* 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;
}
/* These three are multi-line blocks (a headline plus explanatory lines), not
   the single-line messages the rest of the card uses. They read best as a
   centred column -- icon stacked above the heading, explanation lines
   centred under it -- at every width, rather than borrowing the icon-left
   row layout the single-line states use. */
#order-nexum #primaryLookupResult .transfer-eligible,
#order-nexum #primaryLookupResult .transfer-not-eligible,
#order-nexum #primaryLookupResult .domain-invalid {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pack the heading and its lines together at the top of the block rather
       than letting the column spread them across whatever height the card
       ends up with. */
    justify-content: flex-start;
    text-align: center;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-md);
    padding: 8px 0;
}
/* Icon above the heading instead of beside it: the shared .headline rule is
   a horizontal flex row, so it is turned into a centred column here. */
#order-nexum #primaryLookupResult .transfer-eligible .headline,
#order-nexum #primaryLookupResult .transfer-not-eligible .headline,
#order-nexum #primaryLookupResult .domain-invalid .headline {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 4px;
    font-weight: 400;
    /* The shared .headline rule sets `flex: 1 1 260px`, which is right for the
       single-line states (it lets the message share the card's row with the
       price/button). Inside this centred COLUMN, though, that flex-grow made
       the heading stretch to fill the leftover height and pushed the
       explanation lines to the bottom of the card -- the large gap. Sized to
       its own content instead. */
    flex: 0 0 auto;
}
#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;
    line-height: 1.6;
}
#order-nexum #primaryLookupResult .transfer-eligible p:not(.headline):last-child,
#order-nexum #primaryLookupResult .transfer-not-eligible p:not(.headline):last-child,
#order-nexum #primaryLookupResult .domain-invalid p:not(.headline):last-child {
    margin-bottom: 0;
}
/* Try Again is dropped for the transfer/invalid states: those already tell
   the visitor exactly what to do next ("perform a search to register this
   domain"), and the search form itself is still sitting right above the
   card, so the button was redundant. It stays available for every other
   dead-end state (unavailable / error), where it is the only way back.

   Hiding it also removes the tall empty band it was creating: the card is a
   flex-wrap row, so the button became its own full-width flex line stretched
   to the row height, pushing the explanation text far below the heading. */
#order-nexum #primaryLookupResult:has(.transfer-not-eligible:not([style*="none"])) .nx-cpd-try-again,
#order-nexum #primaryLookupResult:has(.transfer-eligible:not([style*="none"])) .nx-cpd-try-again,
#order-nexum #primaryLookupResult:has(.domain-invalid:not([style*="none"])) .nx-cpd-try-again {
    display: none !important;
}

/* Where it DOES show, Try Again belongs under the message it responds to.
   The button is authored before these messages in the markup (it has to be,
   so the register page's own layout lands it last), so in this flex row it
   would otherwise render to their left -- which is what put it beside the
   error text instead of beneath it. order:1 moves it to the end visually
   without touching the DOM, and the message claiming the full row is what
   forces the button to wrap onto its own line rather than sharing one. */
#order-nexum #primaryLookupResult .domain-error,
#order-nexum #primaryLookupResult .domain-unavailable,
#order-nexum #primaryLookupResult .domain-tld-unavailable {
    flex: 1 1 100%;
}
#order-nexum #primaryLookupResult .nx-cpd-try-again {
    order: 1;
    flex: 0 0 auto;
    margin: 6px auto 0;
}

/* ---- Transfer result: Continue, not Add to Cart ----
   A transfer is not a cart line the visitor keeps shopping around -- base.js
   already writes the domain into #resultDomain / #resultDomainPricingTerm and
   enables #btnDomainContinue for an eligible one (scripts.js), so the whole
   step is finished by submitting this form. Add to Cart would post to the
   register endpoint instead, which is the wrong action for a transfer, so it
   is hidden here and the form's own Continue is surfaced in its place. */
#order-nexum #primaryLookupResult:has(.transfer-eligible:not([style*="none"])) .domain-price .nx-cpd-atc-group {
    display: none !important;
}
/* Continue rides INSIDE the result card for an eligible transfer -- the JS in
   configureproductdomain.tpl moves the node there and stamps
   .nx-cpd-has-continue on the card. The button ships with .w-hidden in the
   markup and base.js only reveals it with jQuery .show() (an inline style
   that cannot beat that class's own display:none), so it is forced visible
   here while it is in the card. */
#order-nexum #primaryLookupResult.nx-cpd-has-continue > #btnDomainContinue,
#order-nexum #primaryLookupResult.nx-cpd-has-continue > #btnDomainContinue.w-hidden {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
/* The message block gives up its full-width claim so the button can share the
   row with it, the way the reference design has it. */
#order-nexum #primaryLookupResult.nx-cpd-has-continue .transfer-eligible {
    flex: 1 1 auto;
    width: auto;
}
/* With the button moved out, the bar below is an empty card -- hidden
   whenever it does not actually contain the button. */
#order-nexum .nx-cpd-continue-bar:not(:has(#btnDomainContinue)) { display: none !important; }
@media (max-width: 767.98px) {
    /* Stacked on a phone: full-width button under the message, matching every
       other action in this card at that width. */
    #order-nexum #primaryLookupResult.nx-cpd-has-continue > #btnDomainContinue,
    #order-nexum #primaryLookupResult.nx-cpd-has-continue > #btnDomainContinue.w-hidden {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* The eligible-transfer state is a short confirmation, not a multi-line
   explanation, so unlike its not-eligible sibling it reads better as the same
   icon-left row the available/unavailable results use -- heading and its one
   supporting line beside the icon rather than stacked under it. */
#order-nexum #primaryLookupResult .transfer-eligible {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
    flex-wrap: wrap;
}
#order-nexum #primaryLookupResult .transfer-eligible .headline {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 18px;
    margin-bottom: 0;
    width: 100%;
}
/* Supporting line and the price block line up under the heading's text, past
   the icon's own width (54px) plus the row gap. */
#order-nexum #primaryLookupResult .transfer-eligible p:not(.headline) {
    padding-left: 72px;
    text-align: left;
}
/* The price block is a SIBLING of .transfer-eligible, not part of it, so it
   never inherited that indent -- and its base rule makes it a right-aligned
   column (correct for the register result, where it sits across from Add to
   Cart). For a transfer it belongs in the same left-aligned column as the
   message above it, so it takes its own full-width row and the same 72px
   offset past the icon. */
#order-nexum #primaryLookupResult:has(.transfer-eligible:not([style*="none"])) .domain-price {
    flex: 1 1 100%;
    text-align: left;
    padding-left: 72px;
    margin-top: 2px;
}
@media (max-width: 767.98px) {
    /* Back to the centred/stacked treatment the rest of the card already uses
       on a phone, where an icon-left row has no room. */
    #order-nexum #primaryLookupResult .transfer-eligible,
    #order-nexum #primaryLookupResult .transfer-eligible .headline {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    #order-nexum #primaryLookupResult .transfer-eligible p:not(.headline) {
        padding-left: 0;
        text-align: center;
    }
    #order-nexum #primaryLookupResult:has(.transfer-eligible:not([style*="none"])) .domain-price {
        padding-left: 0;
        text-align: center;
    }
}
/* An empty .domain-error is still a .headline, so its ::before circle
   painted as a second, stray red icon under every one of these blocks even
   with no message in it. Only show it once it actually has text. */
#order-nexum #primaryLookupResult .domain-error:empty { display: none !important; }
/* Sits inside #primaryLookupResult, so it is the right-hand column of that row
   rather than its own centred block underneath. */
#order-nexum .domain-price {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    font-weight: 400;
}
/* The primary result's Add to Cart sits directly under its price label in the
   same right-hand column, so it needs a little breathing room from it. Scoped
   to that card only -- the spotlight/suggestion groups have their own
   spacing and are unaffected. */
#order-nexum #primaryLookupResult .domain-price .nx-cpd-atc-group { margin-top: 10px; }
/* "Continue to register this domain for" above the Add to Cart button: the
   card already says "<domain> is available." with the price beside it, so the
   line only repeated what the button itself makes obvious. Hidden rather than
   removed from the markup -- base.js toggles .register-price-label against
   .transfer-price-label when the transfer option renders its own result
   (scripts.js), so deleting the span would break that flow. Scoped to the
   register label only; the transfer one still shows normally. */
#order-nexum #primaryLookupResult .domain-price .register-price-label { display: none; }
#order-nexum .domain-checker-result-headline p { margin: 0 0 10px; }
#order-nexum .domain-price .price {
    display: block;
    font-size: 22px;
    font-weight: 400;
    color: var(--nx-text);
    margin: 2px 0 0;
}
#order-nexum .btn-add-to-cart {
    background: var(--nx-primary);
    color: #fff;
    border: none;
    border-radius: var(--nx-radius-btn);
    font-weight: 400;
    padding: 11px 22px;
    box-shadow: var(--nx-shadow-btn);
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
}
#order-nexum .btn-add-to-cart:hover { background: var(--nx-primary-dark); }
/* The label sits beside a cart glyph, so it needs its own inline-flex row —
   the button itself can't own the alignment because it also holds the
   loading/added/unavailable states, only one of which is ever shown. */
#order-nexum .btn-add-to-cart .to-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* The glyph inside .to-add / .added, forced visible.
   Both resets that run before a search -- base.js:1114 and domainregister's
   own at runSearch() -- clear a button with .find('span').hide(), and that
   selector is blanket: it also catches these nested icon spans and leaves an
   inline display:none on them that nothing puts back. So from the second
   search onward "Added" rendered with no tick beside it. Hiding one of these
   on its own is never meaningful -- the parent state span's own display:none
   already takes the icon with it -- so overriding the inline value here costs
   nothing and survives both resets. */
#order-nexum .btn-add-to-cart .to-add .material-symbols-rounded,
#order-nexum .btn-add-to-cart .added .material-symbols-rounded {
    display: inline-block !important;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}
/* Which ONE of .to-add / .loading / .added / .unavailable is on screen is
   owned entirely by the vendor handler in js/base.js, and it expresses that
   with INLINE styles: it resets a button with .find('span').hide() before
   each search, shows span.loading on click, then shows span.added or
   span.unavailable on the response.

   So these must not carry a `display` default here, and above all not an
   `!important` one. An author !important beats an inline declaration -- that
   is the whole bug: `display: none !important` turned every one of those
   .show() calls into a no-op, so the button went blank the moment it was
   clicked and never reached "Added". It took the trash button and the
   sticky cart count with it, because syncGroup()/isAddedBtn() in
   domainregister.tpl and configureproductdomain.tpl decide "this one is
   added" by testing whether span.added is genuinely visible
   (offsetParent !== null), which against a forced display:none never is.

   The escape hatches paired with it keyed off a .loading / .unavailable
   class ON THE BUTTON, and nothing in the theme or in base.js ever adds
   those -- only .checkout is ever added, and only for non-product-domain
   buttons -- so they never matched anything and are gone.

   The starting state is set in the MARKUP, not here: every one of these three
   spans ships with style="display:none" on it, at all seven places the button
   is authored (the Smarty blocks and the JS-built spotlight tile in both
   domainregister.tpl and configureproductdomain.tpl). That pairing is what
   makes the whole thing work:

     .hide()  -> writes inline display:none          (beats the rule below)
     .show()  -> clears the inline none, and since the rule below is NOT none
                 jQuery stops there -> inline-flex applies, alignment intact

   Giving them `display: none` HERE instead would half-work and look wrong:
   jQuery, finding the element still hidden by a stylesheet after clearing the
   inline value, falls back to the tag's default display and writes
   display:inline -- so the tick and its label would lose the flex row.
   Leaving them with no hidden state at all is worse still: a spotlight tile
   built at runtime has no inline styles of its own, so "Add", the spinner,
   the tick, "Added" and "Taken" all painted at once, on top of each other.

   Only each state's own layout is set here; visibility stays the handler's. */
#order-nexum .btn-add-to-cart .loading,
#order-nexum .btn-add-to-cart .added,
#order-nexum .btn-add-to-cart .unavailable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 6px;
}
/* The states swap by hiding one span and showing another, so a button that
   sizes to its content collapsed to the width of a bare spinner the moment
   "Add to Cart" was replaced by it -- the button visibly shrank mid-click.
   Giving the spinner state a floor keeps the button close to its resting
   width instead. A min-width rather than a fixed one, so a button that is
   already wider (a full-width spotlight tile, say) is unaffected. */
#order-nexum .btn-add-to-cart .loading {
    min-width: 76px;
}
#order-nexum .btn-add-to-cart .loading .fa-spinner {
    margin: 0;
}
/* Bootstrap's own .btn-primary (present on the primary card's button) ships
   its own blue, and it was winning over our theme colour once the button
   flips into the "Added" / checkout state. Forced here rather than relying
   on selector order since we don't control when that vendor rule loads. */
#order-nexum .btn-add-to-cart.checkout {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
#order-nexum .btn-add-to-cart.checkout:hover { background: var(--nx-primary-dark) !important; }
/* Same filled-primary "Added" look for THIS page's buttons. base.js only adds
   the .checkout class above when the button is NOT a .product-domain one
   (see its `if (!isProductDomain)` guard) -- and every Add button on
   configureproductdomain.tpl carries exactly that class, so the rule above
   could never reach them and they stayed in their pale resting style after
   being added. Keyed off the "Added" label actually being visible instead,
   which is the same signal syncGroup()/isAddedBtn() already use to decide a
   button is in the added state, so the two can't disagree. Vendor JS is left
   untouched -- this is purely the missing visual half. */
#order-nexum .btn-add-to-cart.product-domain:has(.added:not([style*="none"])) {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
#order-nexum .btn-add-to-cart.product-domain:has(.added:not([style*="none"])):hover {
    background: var(--nx-primary-dark) !important;
}
#order-nexum .domain-lookup-loader { color: var(--nx-muted); font-weight: 400; }

/* Spotlight TLDs */
#order-nexum .nx-cpd-sec-title {
    font-size: var(--nx-font-size-h3, 20px);
    font-weight: 600;
    color: var(--nx-text);
    letter-spacing: -.3px;
    margin: 26px 0 12px;
}
#order-nexum .spotlight-tlds { background: transparent; margin-bottom: 20px; }
#order-nexum .spotlight-tlds-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}
#order-nexum .spotlight-tlds-container.nx-cpd-hide-while-loading {
    display: none !important;
}
#order-nexum .spotlight-tld-container {
    width: auto;
    float: none;
    padding: 0;
    flex: 0 0 calc((100% - 4 * 12px) / 5);
    max-width: calc((100% - 4 * 12px) / 5);
    box-sizing: border-box;
}
@media (max-width: 991.98px) {
    #order-nexum .spotlight-tld-container {
        flex: 0 0 calc((100% - 2 * 12px) / 3);
        max-width: calc((100% - 2 * 12px) / 3);
    }
}
@media (max-width: 767.98px) {
    #order-nexum .spotlight-tlds-container.nx-mobile-carousel,
    #order-nexum .nx-mobile-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        overflow-anchor: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 12px !important;
        /* No side padding: a 100%-wide slide has to span the full viewport, and
           2px either side would leave the next card peeking in and stop the
           snap landing cleanly. The 12px gap still separates them mid-swipe. */
        padding: 4px 0 14px !important;
        margin: 0 !important;
        touch-action: pan-x pan-y;
    }
    #order-nexum .nx-mobile-carousel::-webkit-scrollbar { display: none; }
    /* ONE card per swipe, edge to edge — for EVERY track, not just the
       spotlight. This is a direct-child rule on purpose: each of these tracks
       sizes its cards differently in its normal (non-carousel) layout, and all
       three ways of doing it broke once flex-wrap:nowrap above put them on a
       single line.

         .spotlight-tld-container   flex: 0 0 calc(...)  — fine, but 2-up
         .featured-tld              flex: 0 1 220px      — SHRINKS
         .nx-dt-price               grid item, no basis  — SHRINKS

       flex-shrink is the real culprit. With nine or more cards forced onto one
       line and shrinking allowed, the browser squeezed every one of them down
       to a ~40px sliver that still had to hold a TLD logo and a price — and
       because nothing then overflowed, the track had almost no scroll range, so
       the pagination collapsed to two dots and there was nothing to swipe.

       flex: 0 0 100% pins the basis AND forbids the shrink, so one card fills
       the viewport and the rest genuinely overflow, which is what makes the
       swipe and the dots work. */
    #order-nexum .nx-mobile-carousel > * {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center !important;
        box-sizing: border-box;
    }
    /* The dots host is now a fixed-width MASK; .nx-dot-rail inside it holds
       every dot and slides under that mask. With one full-width card per swipe
       the page count equals the card count — 39 featured TLDs would be 39 dots,
       ~540px of them on a 375px phone. initCarousels() caps the mask at 7 dots
       and translates the rail to keep the active one in view.

       gap moves to the rail; the host keeps none, or the mask width (7 * 14px,
       matching DOT_STEP in common.tpl) would not line up with the dots. */
    #order-nexum .nx-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin-top: 6px;
        margin-bottom: 18px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }
    #order-nexum .nx-carousel-dots .nx-dot-rail {
        display: flex;
        align-items: center;
        gap: 6px;
        transition: transform .22s ease;
        will-change: transform;
    }
    #order-nexum .nx-carousel-dots .nx-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: var(--nx-muted);
        opacity: .35;
        cursor: pointer;
        transition: background-color var(--nx-transition), opacity var(--nx-transition), transform var(--nx-transition);
        flex-shrink: 0;
    }
    /* The dot at either end of the mask, when the rail is longer than it —
       shrunk so the row reads as "there is more this way" instead of looking
       chopped. Never applied to the active dot, which must stay legible. */
    #order-nexum .nx-carousel-dots .nx-dot.is-edge:not(.is-active) {
        transform: scale(.55);
        opacity: .25;
    }
    #order-nexum .nx-carousel-dots .nx-dot.is-active {
        background: var(--nx-primary);
        opacity: 1;
        transform: scale(1.25);
    }
}
/* The old <=380px rule that pinned each card to a fixed 142px is gone: it
   contradicted the 100%-width slide above (and, being later in the file at
   equal specificity, would have won on the narrowest phones — the exact
   devices the full-width swipe is for). One card per view is now the rule at
   every mobile width. */
@media (min-width: 768px) {
    /* !important because initCarousels() writes an inline display:flex on the
       dots host whenever it decides a track overflows. That is a mobile-only
       decision, but the inline value would otherwise outrank this rule and
       print a row of dots under the desktop grid. */
    #order-nexum .nx-carousel-dots { display: none !important; }
}

@keyframes nx-cpd-spin { to { transform: rotate(360deg); } }
@keyframes nx-cpd-shimmer { 0% { opacity: .45; } 50% { opacity: 1; } 100% { opacity: .45; } }

#order-nexum .nx-cpd-skeleton-block.w-hidden { display: none; }
#order-nexum .nx-cpd-skel-line {
    border-radius: 6px;
    background: var(--nx-border-soft);
}
#order-nexum .nx-cpd-skeleton-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 4px;
    font-size: 13px;
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-spin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--nx-border);
    border-top-color: var(--nx-primary);
    animation: nx-cpd-spin .8s linear infinite;
}

/* DESKTOP SKELETON — the multi-column grid, unchanged: five cards, dropping
   to three on tablets. This is what a desktop visitor sees while Most Popular
   loads, and it deliberately mirrors the real grid that replaces it. */
#order-nexum .nx-cpd-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 991px) {
    #order-nexum .nx-cpd-skeleton-grid { grid-template-columns: repeat(3, 1fr); }
}
/* MOBILE SKELETON — a different shape for a different layout. What loads in
   underneath is a one-card-per-swipe carousel, so a skeleton of two half-width
   cards was previewing a layout that no longer exists at this width: the cards
   visibly changed size and count the moment the real ones arrived.

   One card, full width, matching the slide it stands in for. The remaining
   four are dropped from the flow rather than parked off-canvas behind
   overflow:hidden — they were invisible either way, but each was still running
   its own shimmer animation on a phone for the whole request. The markup stays
   shared between the two; only which of it applies changes. */
@media (max-width: 767.98px) {
    #order-nexum .nx-cpd-skeleton-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0;
        padding: 4px 0 14px;
    }
    #order-nexum .nx-cpd-skeleton-grid .nx-cpd-skel-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    #order-nexum .nx-cpd-skeleton-grid .nx-cpd-skel-card:not(:first-child) {
        display: none;
    }
}
#order-nexum .nx-cpd-skel-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: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: nx-cpd-shimmer 1.4s ease-in-out infinite;
}
#order-nexum .nx-cpd-skel-ext { width: 74px; height: 26px; }
#order-nexum .nx-cpd-skel-price { width: 56px; height: 14px; }
#order-nexum .nx-cpd-skel-btn { align-self: stretch; height: 38px; margin-top: 4px; }

#order-nexum .nx-cpd-skeleton-rows { padding: 10px; }
#order-nexum .nx-cpd-skel-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    animation: nx-cpd-shimmer 1.4s ease-in-out infinite;
}
#order-nexum .nx-cpd-skel-domain { width: 45%; height: 16px; }
#order-nexum .nx-cpd-skel-row-price { width: 60px; height: 16px; margin-left: auto; }
#order-nexum .nx-cpd-skel-row-btn { width: 120px; height: 38px; }

#order-nexum .spotlight-tld {
    position: relative;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: 16px;
    box-shadow: var(--nx-shadow-card);
    padding: 18px 12px 14px;
    text-align: center;
    color: var(--nx-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
    overflow: visible;
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
}
#order-nexum .spotlight-tld:hover { border-color: var(--nx-primary); transform: translateY(-2px); }
#order-nexum .spotlight-tld span { padding: 0; }
#order-nexum .spotlight-tld .nx-cpd-spot-ext,
#order-nexum .spotlight-tld > .nx-cpd-spot-ext,
#order-nexum .spotlight-tld > .nx-cpd-spot-ext-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 8px 12px 10px;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
    color: var(--nx-text);
    line-height: 1.1;
}
#order-nexum .nx-cpd-spot-ext-img img {
    max-height: 26px;
    max-width: 84px;
    width: auto;
}
/* Lagom's own dark mode does exactly this — flattens every TLD wordmark to
   plain white on the dark card — and it reads perfectly fine there because
   the shape alone still says ".com"/".store"/".net"; left in their native
   colors they came out muddy and low-contrast against the dark background
   instead (net's near-black text nearly disappeared). Matching that here. */
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img,
html.nx-dark #order-nexum .nx-cpd-featured-ext-img img {
    filter: brightness(0) invert(1);
}
/* The invert above only reads correctly on a wordmark that floats directly
   on a transparent background (com, net, store, app, dev, ca, news) —
   brightness(0) crushes foreground AND background to black identically
   before invert flips both to white, so any logo built as a solid badge/
   ribbon/circle shape with the text cut INTO that shape (not floating free)
   comes out as a blank white block once both colors collapse together.
   Checked every added logo's actual pixels to sort them into that group:
   biz, cloud, co, eu, in, info, me, online, pk, studio, us are all built
   this way, so instead of inverting they keep their real colors on a
   permanent light chip in both modes. */
#order-nexum .nx-cpd-spot-ext-img img[alt=".biz"], #order-nexum .nx-cpd-featured-ext-img img[alt=".biz"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".cloud"], #order-nexum .nx-cpd-featured-ext-img img[alt=".cloud"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".co"], #order-nexum .nx-cpd-featured-ext-img img[alt=".co"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".eu"], #order-nexum .nx-cpd-featured-ext-img img[alt=".eu"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".in"], #order-nexum .nx-cpd-featured-ext-img img[alt=".in"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".info"], #order-nexum .nx-cpd-featured-ext-img img[alt=".info"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".me"], #order-nexum .nx-cpd-featured-ext-img img[alt=".me"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".online"], #order-nexum .nx-cpd-featured-ext-img img[alt=".online"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".pk"], #order-nexum .nx-cpd-featured-ext-img img[alt=".pk"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".studio"], #order-nexum .nx-cpd-featured-ext-img img[alt=".studio"],
#order-nexum .nx-cpd-spot-ext-img img[alt=".us"], #order-nexum .nx-cpd-featured-ext-img img[alt=".us"] {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}
/* In dark mode the white chip is dropped for all of them (dark card shows
   through instead) and each gets whatever filter its own baked-in colors
   actually support:
   - biz/eu/info already have a solid black/navy fill baked in with white
     (or near-white) content on top — nothing to do, they already read as
     "dark bg, light mark" without any filter.
   - online is genuinely black already but its wordmark is a mid-grey, not
     white — brightness() only pushes non-black pixels lighter and leaves
     true black untouched (unlike brightness()+invert, which would crush
     everything together), so the grey text and dot lift toward white while
     the background stays exactly as black as it already was.
   - co/cloud/pk/studio are opaque WHITE-background badges — invert(1) (not
     the brightness+invert combo, which would blank them) flips that white
     to black cleanly. Whatever color the mark itself was does NOT become
     pure white this way (that's not something CSS can target selectively
     without an alpha channel to lean on) — pk's black dot happens to invert
     to white, which is why that one specifically comes out as asked; co's
     orange and studio's cyan invert to a different color instead, not
     white, and that's a hard limit of filtering a flat image, not a
     setting I can tune further.
   - in/me/us keep their real colors (ring badge, red circle, navy ribbon)
     with no filter — inverting would just flip their white text to black
     instead of the fill, which is the wrong direction for all three. */
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".biz"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".biz"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".co"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".co"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".cloud"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".cloud"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".eu"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".eu"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".in"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".in"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".info"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".info"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".me"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".me"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".online"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".online"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".pk"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".pk"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".studio"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".studio"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".us"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".us"] {
    /* Only the white chip goes -- the padding STAYS. Under border-box (which
       Bootstrap sets globally) the max-height/max-width above include the
       padding, so dropping it here let the artwork itself grow into the space
       the chip used to occupy: the same logo rendered visibly larger in dark
       mode than in light. Keeping the identical padding in both modes is what
       makes the two render at exactly the same size. */
    background: transparent;
}
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".biz"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".biz"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".eu"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".eu"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".info"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".info"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".in"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".in"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".me"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".me"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".us"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".us"] {
    filter: none;
}
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".online"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".online"] {
    filter: brightness(2.2);
}
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".co"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".co"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".cloud"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".cloud"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".pk"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".pk"],
html.nx-dark #order-nexum .nx-cpd-spot-ext-img img[alt=".studio"], html.nx-dark #order-nexum .nx-cpd-featured-ext-img img[alt=".studio"] {
    filter: invert(1);
}
#order-nexum .spotlight-tld .domain-lookup-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 16px;
    border-top: 1px solid var(--nx-border);
    margin-top: auto;
    box-sizing: border-box;
    gap: 10px;
    background: transparent;
}
#order-nexum .spotlight-tld .domain-lookup-result > .available.price { order: 1; }
#order-nexum .spotlight-tld .domain-lookup-result > .btn.unavailable,
#order-nexum .spotlight-tld .domain-lookup-result > .btn.invalid,
#order-nexum .spotlight-tld .domain-lookup-result > .nx-cpd-atc-group,
#order-nexum .spotlight-tld .domain-lookup-result > .domain-contact-support {
    order: 2;
}
#order-nexum .spotlight-tld.nx-avail { border-color: rgba(var(--nx-primary-rgb), .35); }
#order-nexum .spotlight-tld .available.price {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .spotlight-tld .available.price .nx-cpd-featured-term {
    display: none;
}
#order-nexum .nx-cpd-atc-group {
    display: flex;
    width: 100%;
    margin-top: 8px;
    border-radius: var(--nx-radius-md);
    overflow: hidden;
    box-shadow: none;
}
#order-nexum .nx-cpd-atc-group .btn-add-to-cart {
    flex: 1 1 auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
#order-nexum .nx-cpd-btn-remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--nx-primary);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--nx-transition), opacity var(--nx-transition);
}
#order-nexum .nx-cpd-btn-remove .fa-trash { font-size: 14px; color: inherit; }
#order-nexum .nx-cpd-btn-remove:hover { background: color-mix(in srgb, var(--nx-primary) 65%, #000); }
#order-nexum .nx-cpd-btn-remove.nx-cpd-btn-remove-busy { opacity: .6; pointer-events: none; }
#order-nexum .nx-cpd-btn-remove.w-hidden { display: none; }

#order-nexum .spotlight-tld .btn-add-to-cart {
    width: 100%;
    margin-top: 6px;
    padding: 11px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 400;
    box-shadow: none;
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
}
#order-nexum .spotlight-tld .btn-add-to-cart:hover {
    background: var(--nx-primary);
    color: #fff;
}
#order-nexum .spotlight-tld .nx-cpd-atc-group .btn-add-to-cart {
    margin-top: 0;
    border-radius: 0;
}
#order-nexum .spotlight-tld .btn.unavailable,
#order-nexum .spotlight-tld .btn.invalid {
    width: 100%;
    margin: 6px 0 0;
    padding: 11px;
    background: var(--nx-bg);
    border: none;
    color: var(--nx-muted);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 400;
}
/* 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: 400;
    font-size: var(--nx-font-size-h3, 20px);
    letter-spacing: -.3px;
    color: var(--nx-text);
    background: transparent;
    border-bottom: 1px solid var(--nx-border-soft);
    padding: 18px 22px 14px;
}
#order-nexum .suggested-domains .list-group {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    gap: 0;
}
/* A single divider between rows, not a bordered box per row — the boxed-card
   look doubled up with the list's own outer card and read as a card full of
   smaller cards instead of one clean list. */
#order-nexum .domain-suggestion.list-group-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
    border-top: 1px solid var(--nx-border-soft);
    border-radius: 0;
    padding: 16px 22px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-text);
    background: transparent;
}
#order-nexum .domain-suggestion.list-group-item:first-child { border-top: none; }
/* An ID-scoped display:flex beats the plain .w-hidden class no matter which
   rule comes later in the file, so the blank template row (and anything past
   the visible-10 cap) stayed on screen instead of hiding. */
#order-nexum .domain-suggestion.list-group-item.w-hidden { display: none; }

/* Reference badge: a small pastel-tinted tag inset from the corner, not a
   solid flush-edge ribbon. */
#order-nexum .spotlight-tld-new,
#order-nexum .spotlight-tld-sale,
#order-nexum .spotlight-tld-hot {
    width: auto;
    position: absolute;
    top: -9px;
    left: 14px;
    right: auto;
    letter-spacing: .6px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 6px;
    transform: none;
}
/* One consistent brand-colored badge regardless of type (new/sale/hot), dark-mode
   safe via color-mix instead of three unrelated hardcoded hues. */
#order-nexum .spotlight-tld-new,
#order-nexum .spotlight-tld-sale,
#order-nexum .spotlight-tld-hot {
    background-color: color-mix(in srgb, var(--nx-primary) 14%, var(--nx-card-bg));
    color: var(--nx-primary);
}
#order-nexum .domain-suggestion .extension { color: var(--nx-primary); font-weight: 400; }
#order-nexum .domain-suggestion .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
#order-nexum .domain-suggestion .actions .price { font-weight: 400; color: var(--nx-text); white-space: nowrap; }
#order-nexum .domain-suggestion .btn-add-to-cart {
    padding: 8px 16px;
    font-size: 12.5px;
    box-shadow: none;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
}
#order-nexum .domain-suggestion .btn-add-to-cart:hover {
    background: var(--nx-primary);
    color: #fff;
}
/* Same tie as the spotlight tiles: the row's own radius above is declared after
   the group's border-radius:0 at equal specificity, so it rounded the Add
   button's inner edge and broke the flush join with the remove button. */
#order-nexum .domain-suggestion .nx-cpd-atc-group .btn-add-to-cart {
    border-radius: 0;
}
/* JS adds the sale-group name (hot/new/sale) to .promo itself, which matches
   style.css's own unscoped ".suggested-domains .promo.hot" etc — a solid
   block badge that isn't ours to edit. Neutralised here so only the inner
   .sales-group-* span (styled below) shows as the actual badge. */
#order-nexum .domain-suggestion .promo,
#order-nexum .domain-suggestion .promo.hot,
#order-nexum .domain-suggestion .promo.new,
#order-nexum .domain-suggestion .promo.sale {
    background: transparent;
    padding: 0;
    text-transform: none;
    color: inherit;
}
#order-nexum .domain-suggestion .promo span {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: var(--nx-radius-badge);
    padding: 3px 10px;
}
#order-nexum .domain-suggestion .promo .sales-group-sale {
    background: rgba(var(--nx-warning-rgb, 247, 169, 53), .15);
    color: var(--nx-warning, #b7791f);
}
#order-nexum .domain-suggestion .promo .sales-group-new {
    background: rgba(var(--nx-success-rgb, 18, 183, 106), .12);
    color: var(--nx-success, #12b76a);
}
#order-nexum .domain-suggestion .promo .sales-group-hot {
    background: rgba(var(--nx-danger-rgb, 220, 38, 38), .1);
    color: var(--nx-danger, #dc2626);
}
#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: 400; text-decoration: none; }
#order-nexum .domain-suggestions-warning { padding: 0 22px 16px; text-align: left; }
#order-nexum .domain-suggestions-warning p { color: var(--nx-muted); font-size: var(--nx-font-size-sm); margin: 0; }

/* Continue sits in its own bar so the step ends on a defined edge instead of a
   button floating on the page background. */
#order-nexum .nx-cpd-continue-bar {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-card);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 22px;
}
#order-nexum .nx-cpd-continue-bar #btnDomainContinue {
    padding: 11px 26px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    border-radius: var(--nx-radius-btn);
}
#order-nexum .nx-cpd-continue-bar #btnDomainContinue.w-hidden { display: none; }
/* The bar draws its own card background/border, so while its only child (the
   Continue button) is still hidden -- i.e. before any search has produced an
   available domain -- it rendered as an empty white strip under the results.
   Hidden along with the button, shown again the moment the button is. */
#order-nexum .nx-cpd-continue-bar:has(#btnDomainContinue.w-hidden) { display: none; }

/* Plain flex row instead of Bootstrap's .row/.col-* grid — no column padding
   or gutter math to fight, the gap below controls spacing directly and the
   cards size themselves via flex-basis. */
/* Four to a row, filling the container.

   This was a centred flex-wrap of cards capped at 220px, so a row only ever
   grew to five of those and justify-content: center split the leftover width
   into equal margins down each side -- the gap beside the block. A grid
   divides the whole width between four columns instead, so each card is wider
   and the row ends flush with the container on both sides.

   Below 767.98px the .nx-mobile-carousel rule takes over with
   `display: flex !important` and turns this into a swipeable row, which is
   why the steps below stop above that breakpoint. */
#order-nexum .featured-tlds-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 1199.98px) {
    #order-nexum .featured-tlds-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 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: 26px 18px 0;
    overflow: hidden;
    /* The 220px cap and flex-basis are what kept these narrow while the row
       had width to spare. In the grid above the column decides the width, so
       the card simply fills the cell it is given; both are still needed for
       the mobile carousel, which puts this back into a flex row. */
    width: 100%;
    max-width: none;
    min-height: 210px;
    display: flex;
    flex-direction: column;
}
#order-nexum .nx-cpd-featured-head {
    text-align: center;
    padding-bottom: 14px;
}
#order-nexum .nx-cpd-featured-ext {
    display: block;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--nx-text);
}
/* Alternates the same primary/secondary split the reference uses across its
   tiles, so the extension name itself carries the accent instead of a
   full-width colour band. */
/* Both variants asked to read as plain theme text (black in light mode,
   white in dark) instead of an accent colour, matching the spotlight grid's
   .nx-cpd-spot-ext -- this is the second, separate place that still had a
   primary/secondary colour left on it. */
#order-nexum .featured-tld:not(.nx-cpd-featured-tld-alt) .nx-cpd-featured-ext { color: var(--nx-text); }
#order-nexum .featured-tld.nx-cpd-featured-tld-alt .nx-cpd-featured-ext { color: var(--nx-text); }
#order-nexum .nx-cpd-featured-ext-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}
/* Same reason as .nx-cpd-spot-ext-img img above — cap width too so a
   wide-aspect wordmark (store) doesn't render visibly larger than a
   narrower one (com, net) just because both share the same max-height. */
#order-nexum .nx-cpd-featured-ext-img img {
    max-height: 40px;
    max-width: 130px;
    width: auto;
}
/* Per-TLD size normalization, v2 — v1 matched each logo's ink HEIGHT to
   .com's, which was correct for wide wordmarks but still left compact/
   near-square badges (biz, info, us, me, in, studio, ca...) looking much
   smaller overall, because at equal height a narrow badge simply covers
   far less width/area than a wide wordmark like .com. Re-solved by AREA
   instead: for every logo, height*width of its own ink box is set so its
   rendered ink AREA matches .com's ink area, not just its height — so a
   squarish badge grows taller (and a bit wider) to cover the same visual
   footprint a wordmark covers by being wide. Some (us, in, me, studio, ca)
   end up noticeably taller than .com as a result — expected, since their
   native shape is much narrower, and area parity is what was asked for. */
#order-nexum .nx-cpd-spot-ext-img img[alt=".name"] { max-height: 25.1px; max-width: 88px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".news"] { max-height: 17.1px; max-width: 89.4px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".online"] { max-height: 31.2px; max-width: 95.3px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".us"] { max-height: 51.1px; max-width: 45.1px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".co"] { max-height: 24.9px; max-width: 61.5px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".shop"] { max-height: 25.8px; max-width: 70.3px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".live"] { max-height: 22.4px; max-width: 69.4px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".me"] { max-height: 44.9px; max-width: 49.2px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".info"] { max-height: 36.5px; max-width: 78.7px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".cloud"] { max-height: 55.3px; max-width: 102.8px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".net"] { max-height: 32px; max-width: 68.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".com"] { max-height: 26px; max-width: 84px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".couk"] { max-height: 41.9px; max-width: 72.7px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".pk"] { max-height: 34.3px; max-width: 46.3px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".blog"] { max-height: 31.4px; max-width: 70.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".host"] { max-height: 30.7px; max-width: 73.8px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".tech"] { max-height: 22px; max-width: 69.9px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".app"] { max-height: 25.9px; max-width: 69.2px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".eu"] { max-height: 34.2px; max-width: 63.3px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".website"] { max-height: 24.8px; max-width: 120.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".social"] { max-height: 25.3px; max-width: 85.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".dev"] { max-height: 27.3px; max-width: 67.8px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".store"] { max-height: 20.4px; max-width: 76.8px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".studio"] { max-height: 56.2px; max-width: 97.1px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".in"] { max-height: 45px; max-width: 49px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".tv"] { max-height: 36.5px; max-width: 60.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".biz"] { max-height: 35.4px; max-width: 61.2px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".club"] { max-height: 20.9px; max-width: 75.1px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".ca"] { max-height: 37px; max-width: 58.6px; }
#order-nexum .nx-cpd-spot-ext-img img[alt=".rocks"] { max-height: 17.8px; max-width: 86.5px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".name"] { max-height: 38.6px; max-width: 133.2px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".news"] { max-height: 26.3px; max-width: 135.7px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".online"] { max-height: 47.9px; max-width: 144.1px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".us"] { max-height: 78.6px; max-width: 67.2px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".co"] { max-height: 38.5px; max-width: 92.8px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".shop"] { max-height: 39.7px; max-width: 106.2px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".live"] { max-height: 34.4px; max-width: 105px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".me"] { max-height: 69px; max-width: 73.5px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".info"] { max-height: 56.2px; max-width: 118.9px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".cloud"] { max-height: 85.2px; max-width: 155.5px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".net"] { max-height: 49.2px; max-width: 103.4px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".com"] { max-height: 40px; max-width: 127.1px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".couk"] { max-height: 64.4px; max-width: 109.3px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".pk"] { max-height: 52.8px; max-width: 71.1px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".blog"] { max-height: 48.3px; max-width: 106.4px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".host"] { max-height: 47.3px; max-width: 111.3px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".tech"] { max-height: 33.9px; max-width: 105.7px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".app"] { max-height: 39.8px; max-width: 104.7px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".eu"] { max-height: 52.6px; max-width: 95.2px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".website"] { max-height: 38.1px; max-width: 182.9px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".social"] { max-height: 38.9px; max-width: 129.6px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".dev"] { max-height: 41.9px; max-width: 102.6px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".store"] { max-height: 31.4px; max-width: 116.4px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".studio"] { max-height: 86.4px; max-width: 146.9px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".in"] { max-height: 69.3px; max-width: 73.3px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".tv"] { max-height: 56.2px; max-width: 91.1px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".biz"] { max-height: 54.5px; max-width: 92px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".club"] { max-height: 32.1px; max-width: 113.7px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".ca"] { max-height: 56.9px; max-width: 88.4px; }
#order-nexum .nx-cpd-featured-ext-img img[alt=".rocks"] { max-height: 27.5px; max-width: 131.3px; }
/* Same official multi-color logos as above — no flattening filter, for the
   same reason (see .nx-cpd-spot-ext-img note). */
#order-nexum .nx-cpd-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--nx-border-soft);
    margin-top: auto;
}
#order-nexum .nx-cpd-featured-price {
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-cpd-featured-term {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-featured-unavailable { color: var(--nx-muted); font-weight: 400; }
#order-nexum .nx-cpd-featured-foot .nx-cpd-tbl-register {
    padding: 9px 18px;
    font-size: 13px;
}
/* ---------- Browse extensions: toolbar, category multiselect, pagination ---------- */
#order-nexum .nx-cpd-tbl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
#order-nexum .nx-cpd-tbl-toolbar .nx-cpd-sec-title { margin: 0; }
#order-nexum .nx-cpd-tbl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    min-width: 220px;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
#order-nexum .nx-cpd-tbl-search:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-cpd-tbl-search:focus-within .material-symbols-rounded { color: var(--nx-primary); }
#order-nexum .nx-cpd-tbl-search .material-symbols-rounded { font-size: 18px; color: var(--nx-muted); }
#order-nexum .nx-cpd-tbl-search input {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: 14px;
    color: var(--nx-text);
    width: 100%;
}
#order-nexum .nx-cpd-tbl-search input::placeholder { color: var(--nx-muted); }

/* The toolbar's search + category picker on a phone.
   .nx-cpd-tbl-toolbar is a wrapping flex row with justify-content:space-between,
   so once the title takes its own line the search box sat at its min-width of
   220px with the rest of the row empty beside it. On a narrow screen both
   controls should simply take the full width, one under the other. */
@media (max-width: 767.98px) {
    #order-nexum .nx-cpd-tbl-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #order-nexum .nx-cpd-tbl-search,
    #order-nexum .nx-cpd-catselect {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
    /* Now that these two run the full width of the card, 40px reads as a thin
       strip rather than a field -- a full-width control needs the height to
       match, and it also gives a comfortable tap target. Desktop keeps 40px,
       where the search sits inline beside the title and a taller box would
       throw that row out of line.

       min-height, not height: .nx-cpd-tbl-toolbar switches to
       flex-direction:column right above, making height the flex CONTAINER's
       main axis -- and .nx-cpd-tbl-search also carries `flex: 1 1 100%` (the
       shared rule just above, split across two selectors). A percentage
       flex-basis on the main axis overrides a plain `height` outright, so
       this was being sized by flex-basis math instead and came out shorter
       than even the 40px desktop height, not taller. min-height sits outside
       that fight -- same fix already used one rule below for
       .nx-cpd-catselect-trigger, which never had this problem. */
    #order-nexum .nx-cpd-tbl-search {
        height: auto;
        min-height: 46px;
    }
    #order-nexum .nx-cpd-tbl-search input {
        font-size: 15px;
    }
    #order-nexum .nx-cpd-catselect-trigger {
        min-height: 46px;
    }
    /* Breathing room above the featured-TLD carousel. The shared
       .nx-mobile-carousel rule sets `margin: 0 !important` (it has to, so a
       track cannot inherit stray side margins and break the 100%-wide slide
       maths), and that zeroed the top margin too -- leaving this card flush
       against the search band directly above it. Restored here, for the top
       edge only, with the weight needed to beat that !important. */
    #order-nexum .featured-tlds-container.nx-mobile-carousel {
        margin-top: 18px !important;
    }
}

#order-nexum .nx-cpd-catselect { position: relative; margin-bottom: 18px; }
#order-nexum .nx-cpd-catselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 8px 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    cursor: pointer;
}
#order-nexum .nx-cpd-catselect.is-open .nx-cpd-catselect-trigger {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-cpd-cat-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#order-nexum .nx-cpd-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary);
    font-size: 13px;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: var(--nx-radius-badge);
}
#order-nexum .nx-cpd-cat-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-primary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
#order-nexum .nx-cpd-cat-chip-remove:hover { background: rgba(var(--nx-primary-rgb), .18); }
#order-nexum .nx-cpd-catselect-arrow {
    font-size: 20px;
    color: var(--nx-muted);
    transition: transform var(--nx-transition);
}
#order-nexum .nx-cpd-catselect.is-open .nx-cpd-catselect-arrow { transform: rotate(180deg); }
#order-nexum .nx-cpd-catselect-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-elevated);
    padding: 8px;
    max-height: 280px;
    overflow-y: auto;
}
#order-nexum .nx-cpd-catselect-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--nx-radius-md);
    font-size: 14px;
    color: var(--nx-text);
    cursor: pointer;
    margin: 0;
}
#order-nexum .nx-cpd-catselect-option:hover { background: rgba(var(--nx-primary-rgb), .06); }
#order-nexum .nx-cpd-catselect-option[data-nx-cat="__all__"] { border-bottom: 1px solid var(--nx-border); border-radius: 0; margin-bottom: 4px; padding-bottom: 12px; font-weight: 400; }

#order-nexum .nx-cpd-tbl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
#order-nexum .nx-cpd-tbl-pagesize {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-tbl-pagesize select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: 13.5px;
}
#order-nexum .nx-cpd-tbl-pages { display: flex; align-items: center; gap: 6px; }
#order-nexum .nx-cpd-tbl-pages button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
}
#order-nexum .nx-cpd-tbl-pages button:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
#order-nexum .nx-cpd-tbl-pages button.is-active {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
#order-nexum .nx-cpd-tbl-pages button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 767.98px) {
    /* nx-cpd-tbl-pagination is justify-content:space-between so "Show N
       entries" sits left and the page-number buttons sit right on desktop --
       once flex-wrap drops them onto two separate lines on a phone, each
       line keeps that same flex-start position on its own, which is why both
       read as pinned to the left edge instead of centred under the table. */
    #order-nexum .nx-cpd-tbl-pagination {
        justify-content: center;
        text-align: center;
    }
    #order-nexum .nx-cpd-tbl-pagesize,
    #order-nexum .nx-cpd-tbl-pages {
        justify-content: center;
        width: 100%;
    }
}
#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: transparent;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    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: 400;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    transition: background var(--nx-transition);
}
#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: var(--nx-card-bg) !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 strong { font-weight: 400; 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,
#order-nexum .domain-pricing .tld-row .col-3 {
    color: var(--nx-text);
    font-weight: 400;
}
#order-nexum .tld-row .col-md-4 {
    border-right: 1px solid var(--nx-border-soft);
}
#order-nexum .nx-cpd-tbl-register {
    height: 32px;
    padding: 0 16px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    background: rgba(var(--nx-primary-rgb), .12);
    border-color: transparent;
    color: var(--nx-primary);
}
#order-nexum .nx-cpd-tbl-register:hover {
    background: var(--nx-primary);
    color: #fff;
}
/* domainregister.tpl marks the price/register cells .col-3 with no
   responsive prefix, so on a phone they never stack -- Register/Transfer/
   Renew price and the Register button all stayed jammed into four rigid
   25%-wide quarters of an already-mobile-full-width row. The button, being
   the last of the four, is what actually ran out of room and pushed past the
   card's own edge on a narrow enough screen. The three prices stay
   three-across at a third each (their text is short enough to read fine
   there); only the button wraps onto its own full-width line underneath,
   which is what gives it room instead of squeezing it out. */
@media (max-width: 767.98px) {
    #order-nexum .domain-pricing .tld-row .col-md-8 > .row.no-gutters {
        flex-wrap: wrap;
    }
    #order-nexum .domain-pricing .tld-row .col-md-8 > .row.no-gutters > .col-3:nth-child(-n+3) {
        flex: 1 1 33.333%;
        max-width: 33.333%;
    }
    #order-nexum .domain-pricing .tld-row .col-md-8 > .row.no-gutters > .col-3:last-child {
        flex: 1 1 100%;
        max-width: 100%;
        margin-top: 10px;
        /* .no-gutters on the parent row strips every column's own padding,
           so a button stretched to width:100% of this now edge-to-edge
           column ran flush against the card's own left/right border instead
           of sitting inset from it like everything else on the row. */
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    #order-nexum .domain-pricing .tld-row .col-md-8 > .row.no-gutters > .col-3:last-child .nx-cpd-tbl-register {
        width: 100%;
    }
}
/* Same button, transfer page's Featured TLDs strip -- was falling back to
   plain .nx-btn-outline (white/bordered) because only .nx-cpd-tbl-register
   itself carried this tint+colour treatment, not the shared
   .nx-cpd-featured-foot / .nx-btn-outline classes underneath it. */
#order-nexum .nx-cpd-featured-foot .nx-dt-featured-transfer {
    height: 32px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 400;
    background: rgba(var(--nx-primary-rgb), .12);
    border-color: transparent;
    color: var(--nx-primary);
}
#order-nexum .nx-cpd-featured-foot .nx-dt-featured-transfer:hover {
    background: var(--nx-primary);
    color: #fff;
}

/* "N domain(s) selected — Continue" bar, fixed to the true bottom of the
   viewport (not just sticky within its own scroll container) so it spans
   edge-to-edge and floats over whatever content is scrolled underneath it --
   a frosted-glass strip rather than a rounded card sitting in the page flow.
   color-mix keeps it on the theme's own --nx-card-bg token (works in both
   light and dark) instead of a hardcoded rgba() that would only look right
   in one mode; backdrop-filter is what actually blurs the page content
   showing through. Layout (count left, Continue right) is untouched --
   only the container's own position/width/background changed. */
#order-nexum .nx-cpd-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    /* Above the footer's language/currency switcher (.nx-langsw in the client
       theme's nexum.css), which also sits at 1050. On an exact z-index tie the
       later element in the DOM wins, and the footer comes after this bar --
       so the switcher painted straight through the fixed Continue bar. This
       bar is a viewport-level overlay pinned over the page, so it belongs
       above page content rather than tying with it. */
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0;
    /* The bar's SURFACE spans the viewport (it is the page's bottom edge), but
       its CONTENTS have to line up with the page container above it -- on a
       wide screen the count was pinned to the far left of the window and
       Continue to the far right, both well outside the content column.
       Side padding does that alignment without needing an inner wrapper in the
       markup: it grows to whatever gutter the container leaves, and max()
       floors it at 22px once the viewport is narrower than the container, so
       mobile keeps exactly the padding it had. Same expression
       .nx-cart-steps-container already uses for the same reason. */
    padding: 16px max(calc((100vw - var(--nx-container-width, 1280px)) / 2), 22px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(calc((100vw - var(--nx-container-width, 1280px)) / 2), 22px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--nx-card-bg) 72%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: none;
    border-top: 1px solid var(--nx-border);
    border-radius: 0;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, .10);
}
/* Browsers with neither backdrop-filter (older Firefox/Safari) fall back to
   a solid bar instead of a half-transparent one nothing is blurring --
   see-through-but-not-blurred would read as broken, not glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #order-nexum .nx-cpd-sticky-bar {
        background: var(--nx-card-bg);
    }
}
/* The bar is position:fixed, so it is out of the document flow and sits on
   top of whatever the page ends with -- the footer (and its language /
   currency switcher) was permanently buried underneath it with no way to
   scroll past. Reserving the bar's own height at the bottom of the page lets
   the last of the content clear it. Applied only while the bar is actually
   on screen (it ships hidden until a domain is selected), so a page with no
   selection keeps its normal spacing. */
body:has(#order-nexum .nx-cpd-sticky-bar:not([hidden])) {
    padding-bottom: 88px;
}
#order-nexum .nx-cpd-sticky-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--nx-font-size-md);
    color: var(--nx-text);
    font-weight: 400;
}
#order-nexum .nx-cpd-sticky-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 50%;
    background: var(--nx-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
}
#order-nexum .nx-cpd-sticky-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    height: 42px;
}
#order-nexum .nx-cpd-sticky-continue .material-symbols-rounded { font-size: 18px; }
/* The arrow icon's own width + its 8px gap ate into a button that already
   has less room on a phone, and #order-nexum .btn's min-width elsewhere
   fights it right back to a size where the icon nearly touches the label --
   dropping the icon (text-only) on mobile is what actually keeps the button
   a consistent, correctly-sized pill instead of visibly cramped. */
@media (max-width: 767.98px) {
    #order-nexum .nx-cpd-sticky-continue {
        gap: 0;
    }
    #order-nexum .nx-cpd-sticky-continue .material-symbols-rounded {
        display: none;
    }
}
/* 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: 400;
    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 red/green/amber split used by the Most Popular tiles, so a sale group
   reads the same way everywhere it appears instead of the table flattening
   every group to the primary tint. */
#order-nexum .tld-sale-group-hot { background: rgba(249, 97, 90, .12); color: var(--nx-danger, #f9615a); }
#order-nexum .tld-sale-group-new { background: rgba(42, 213, 136, .12); color: var(--nx-success, #2ad588); }
#order-nexum .tld-sale-group-sale { background: rgba(247, 169, 53, .16); color: #b5790a; }
/* 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: 600;
    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: 400;
    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: 400; 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: 400;
}
#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: 400;
    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); }

/* ---- View Cart: the per-domain billing-period dropdown ----
   Alignment is NOT handled here. Popper (bundled in scripts.min.js) positions
   this menu with an inline `left:0` plus a transform, so a stylesheet
   right/left pair can never win -- and setting `right` anyway while Popper's
   `left:0` still applied pinned BOTH edges, squeezing the menu narrower than
   its own text and cutting the prices off. The opening direction is set with
   Bootstrap's own .dropdown-menu-right class on the markup instead (see
   viewcart.tpl), which its dropdown JS reads and passes to Popper.

   Left here is only what Popper does not control: the menu must be able to
   size to its longest row, and must not be trimmed by the card around it. */
#order-nexum .view-cart-items .dropdown-menu {
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
}
#order-nexum .view-cart-items .dropdown-menu li a {
    white-space: nowrap;
}
/* 2) .view-cart-items is overflow:hidden so its rounded corners can clip the
      hairline-separated rows inside it -- but that clipped this menu too, so
      it was cut off INSIDE the card instead of floating above it. Relaxed
      only while a menu is actually open (Bootstrap adds .show), so the rest
      of the time the card keeps the clipping its corners depend on. */
#order-nexum .view-cart-items:has(.dropdown-menu.show) {
    overflow: visible;
}

/* ================= CONFIGURE DOMAINS ================= */
#order-nexum .nx-hosting-yes { color: var(--nx-success, #12b76a); font-weight: 400; }
#order-nexum .nx-hosting-no { color: var(--nx-danger-text); font-weight: 400; 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: 400;
    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: 400;
    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: 600;
    letter-spacing: -.3px;
    color: var(--nx-text);
    margin: 0 0 4px;
}
#order-nexum .service-renewal h4 { font-size: var(--nx-font-size); font-weight: 600; 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: 400;
    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: 400;
    padding: 9px 18px;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
#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: 400; }
#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: 400 !important;
}

/* ================= ADDONS page (cart.php?gid=addons) ================= */

/* Header row: title + subtitle on the left, search + View Cart on the right. */
#order-nexum .nx-addons-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-space-4, 16px);
    flex-wrap: wrap;
}
#order-nexum .nx-addons-head-text { min-width: 0; }
#order-nexum .nx-addons-head-sub {
    margin: 7px 0 0;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addons-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#order-nexum .nx-addons-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 210px;
    padding: 0 12px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
}
#order-nexum .nx-addons-search .material-symbols-rounded { font-size: 18px; color: var(--nx-muted); }
#order-nexum .nx-addons-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 11px 0;
    font-size: 13px;
    color: var(--nx-text);
}
#order-nexum .nx-addons-search input:focus-visible { outline: none; }
#order-nexum .nx-addons-search:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-addons-viewcart {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 12.5px;
    white-space: nowrap;
    transition: border-color var(--nx-transition), color var(--nx-transition);
}
#order-nexum .nx-addons-viewcart:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
    text-decoration: none;
}
#order-nexum .nx-addons-viewcart .material-symbols-rounded { font-size: 17px; }

/* "Adding to" service picker — one choice that syncs into every card below via
   initAddonsTarget (common.tpl) instead of each addon carrying its own
   separate, repetitive dropdown. */
#order-nexum .nx-addons-target {
    position: relative;
    z-index: 40;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: var(--nx-space-5, 20px);
    padding: 16px 20px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-sm);
}
#order-nexum .nx-addons-target-ico {
    font-size: 20px;
    color: var(--nx-primary);
}
#order-nexum .nx-addons-target-text { min-width: 0; }
#order-nexum .nx-addons-target-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nx-text);
}
#order-nexum .nx-addons-target-hint {
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addons-target-select {
    margin-left: auto;
    min-width: 240px;
    padding: 10px 12px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}
#order-nexum .nx-addons-target-select:focus-visible {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* initAddonsTarget() (common.tpl) skins this select into a
   .nx-custom-select-wrapper once it's populated -- that wrapper's own
   default width:100% (styled generically for a full-width field elsewhere)
   fought .nx-addons-target's flex row, so the picker stopped sitting as the
   fixed-width, right-aligned control the rules above were written for. */
#order-nexum .nx-addons-target .nx-custom-select-wrapper {
    margin-left: auto;
    width: auto;
    min-width: 240px;
    flex-shrink: 0;
}
#order-nexum .nx-addons-target .nx-custom-select-wrapper {
    flex: 1 1 240px;
    min-width: 240px;
    z-index: 20;
}
#order-nexum .nx-addons-target .nx-custom-select-wrapper.open {
    z-index: 50;
}
#order-nexum .nx-addons-target .nx-custom-select-options {
    z-index: 30;
    max-height: 220px;
}
#order-nexum .nx-addons-target .nx-custom-select-option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Result count + sort toolbar. */
#order-nexum .nx-addons-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--nx-space-4, 16px);
    margin-bottom: var(--nx-space-3, 12px);
}
#order-nexum .nx-addons-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addons-sort {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
}
#order-nexum .nx-addons-sort button {
    padding: 7px 13px;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
#order-nexum .nx-addons-sort button.is-active {
    background: var(--nx-primary);
    color: #fff;
}
#order-nexum .nx-addons-empty-filtered {
    text-align: center;
    padding: var(--nx-space-6, 24px) 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
}

/* Addon card. */
#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: 0;
    overflow: hidden;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
#order-nexum .products .product:not(.nx-plp-card):hover {
    border-color: color-mix(in srgb, var(--nx-primary) 25%, var(--nx-border));
    box-shadow: var(--nx-shadow-elevated, var(--nx-shadow-card));
}
#order-nexum .nx-addon-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 0;
}
#order-nexum .nx-addon-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nx-radius-button);
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
    overflow: hidden;
}
/* If the icon font genuinely fails to load (blocked request, ad-blocker) --
   not just a brief load delay the nx-icons-loading guard already covers --
   the ligature falls back to its raw glyph name as plain text, which has no
   width limit of its own and spilled out of this 38px box into the addon
   name sitting right next to it. Clipped and forced onto one line so a
   failed font state stays contained instead of visually colliding. */
#order-nexum .nx-addon-ico .material-symbols-rounded {
    display: none;
}
#order-nexum .nx-addon-ico::before {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}
#order-nexum .nx-addon-ico-add_box::before { content: '+'; }
#order-nexum .nx-addon-ico-extension::before { content: '[]'; font-size: 18px; }
#order-nexum .nx-addon-ico-stars::before { content: '*'; }
#order-nexum .nx-addon-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#order-nexum .nx-addon-name {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: -.25px;
    color: var(--nx-text);
}
#order-nexum .nx-addon-desc {
    margin: 11px 0 0;
    padding: 0 22px;
    color: var(--nx-muted);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    width: 100%;
}
/* Rendered only when the admin's own description had more than one line —
   the lines past the first become this checklist instead of running on in
   one paragraph. Empty (single-line description) collapses to zero height,
   so it never shows as a stray gap. */
#order-nexum .nx-addon-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0 22px;
    width: 100%;
}
#order-nexum .nx-addon-features:empty { margin: 0; }
#order-nexum .nx-addon-feature {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-text-body, var(--nx-text));
    line-height: 1.5;
}
#order-nexum .nx-addon-feature-ico {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 15px;
    color: var(--nx-success, #12b76a);
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-addon-select-wrap {
    padding: 14px 22px 0;
    margin: 0;
    width: 100%;
}
/* The "Adding to" service picker's dropdown list is position:absolute, but
   the addon cards sit in a tight grid where the next row starts right below
   -- without a lift above the surrounding cards it painted underneath the
   next card's own background instead of over it, reading as clipped by the
   card edge. .panel-addon/.product get overflow:visible defensively too,
   in case a rounded-corner card treatment elsewhere in the cascade clips it. */
#order-nexum .panel-addon,
#order-nexum .nx-addon-col > .product {
    overflow: visible;
}
#order-nexum .nx-addon-select-wrap .nx-custom-select-wrapper.open {
    position: relative;
    z-index: 50;
}
#order-nexum .nx-addon-select-wrap .nx-custom-select-options {
    z-index: 30;
}
#order-nexum .nx-addon-unavailable {
    margin: 10px 22px 0;
    padding: 9px 12px;
    border: 1px solid rgba(var(--nx-warning-rgb), .25);
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-warning-rgb), .06);
    color: var(--nx-warning, var(--nx-text));
    font-size: 11.5px;
    font-weight: 400;
}
/* The card fades and its submit disables rather than disappearing entirely —
   it stays visible so the customer knows this addon exists, just not for the
   service currently picked above. */
#order-nexum .nx-addon-col.is-unavailable .product { opacity: .55; }
#order-nexum .nx-addon-col.is-unavailable .nx-addon-select-wrap { display: none; }
#order-nexum .nx-addon-foot {
    margin-top: auto;
    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 .nx-addon-price { text-align: left; }
#order-nexum .nx-addon-price-amt {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.3px;
    color: var(--nx-primary);
    font-variant-numeric: tabular-nums;
}
#order-nexum .nx-addon-price-cycle {
    margin-left: 4px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addon-setup {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addon-btn,
#order-nexum .products .product:not(.nx-plp-card) .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--nx-primary);
    border: none;
    color: #fff;
    border-radius: var(--nx-radius-btn);
    font-weight: 400;
    font-size: 12.5px;
    padding: 11px 18px;
    box-shadow: var(--nx-shadow-btn, none);
    cursor: pointer;
    transition: background-color var(--nx-transition), transform var(--nx-transition);
}
#order-nexum .nx-addon-btn:hover { background: var(--nx-primary-hover); }
#order-nexum .nx-addon-btn .material-symbols-rounded { font-size: 16px; }
#order-nexum .nx-addon-btn:disabled {
    background: var(--nx-border);
    color: var(--nx-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* "Not sure which addon fits?" help card. */
#order-nexum .nx-addons-help {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: var(--nx-space-4, 16px);
    padding: 16px 20px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-sm);
    flex-wrap: wrap;
}
#order-nexum .nx-addons-help > .material-symbols-rounded {
    font-size: 20px;
    color: var(--nx-muted);
}
#order-nexum .nx-addons-help-text { min-width: 0; }
#order-nexum .nx-addons-help-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--nx-text);
}
#order-nexum .nx-addons-help-sub {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-addons-help-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 10px 15px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 12.5px;
    white-space: nowrap;
    transition: border-color var(--nx-transition), color var(--nx-transition);
}
#order-nexum .nx-addons-help-cta:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
    text-decoration: none;
}
#order-nexum .nx-addons-help-cta .material-symbols-rounded { font-size: 17px; }

@media (max-width: 767.98px) {
    #order-nexum .nx-addons-target-select { margin-left: 0; width: 100%; }
    #order-nexum .nx-addons-target .nx-custom-select-wrapper { margin-left: 0; width: 100%; min-width: 0; }
    #order-nexum .nx-addons-toolbar { flex-direction: column; align-items: flex-start; }
    #order-nexum .nx-addons-help-cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* ================= 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: 600;
    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: 400;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
/* 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 var(--nx-transition), color var(--nx-transition);
}
.nx-cart-modal .close:hover {
    background: var(--nx-bg);
    color: var(--nx-text);
}

.nx-cart-modal .modal-title {
    font-weight: 600;
    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: 400;
    font-size: var(--nx-font-size-md);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition);
}
.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. */
#order-nexum .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);
}
#order-nexum .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: #fff;
    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: 600;
    color: #fff;
}
#order-nexum .nx-cart-modal .modal-header .close,
.nx-cart-modal .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 0;
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
}
#order-nexum .nx-cart-modal .modal-header .close:hover,
.nx-cart-modal .modal-header .close:hover {
    color: #fff;
    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: 600;
    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 .item { padding: 14px 16px; }
    #order-nexum .view-cart-items .item.item-addon { margin-left: 0; border-left: 0; padding-left: 16px; }
    /* No room to indent under the icon on a phone, so the actions go flush. */
    #order-nexum .view-cart-items .item > .row > .nx-ci-actions,
    #order-nexum .view-cart-items .item.item-addon > .row > .nx-ci-actions { display: none !important; }
    #order-nexum .view-cart-items .item > .row > .nx-ci-actions,
    #order-nexum .view-cart-items .item.item-addon > .row > .nx-ci-actions { margin-left: 0; }
    #order-nexum .view-cart-items .item > .row > [class*="col-sm-7"],
    #order-nexum .view-cart-items .item > .row > [class*="col-sm-5"] {
        flex: 0 0 100%;
        padding-right: 0;
    }
    #order-nexum .item-price {
        text-align: left;
        align-items: flex-start;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--nx-border);
        flex: 0 0 100% !important;
        margin-left: 0;
    }
    #order-nexum .view-cart-footer {
        flex-direction: column;
        align-items: stretch;
    }
    #order-nexum .view-cart-footer .empty-cart { text-align: center; }
    #order-nexum .nx-cart-footer-continue,
    #order-nexum .nx-cart-footer-empty { width: 100%; justify-content: center; }
    #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 #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: 600;
    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: 400;
    color: var(--nx-text);
}
#order-nexum .addon-promo-container a {
    color: var(--nx-primary);
    font-weight: 400;
    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: 400; color: var(--nx-text); }
#order-nexum .mc-promo .tagline { font-size: var(--nx-font-size-sm); font-weight: 400; 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 var(--nx-transition-fast); }
#order-nexum .mc-promo .expander .rotate.down { transform: rotate(90deg); }

#order-nexum .mc-promo .price {
    color: var(--nx-primary);
    font-weight: 400;
    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: 400;
    font-size: var(--nx-font-size-sm);
    white-space: nowrap;
    overflow: visible;
    transition: background-color var(--nx-transition-fast), box-shadow var(--nx-transition-fast);
}
#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: 600;
    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: 400;
}
#order-nexum .panel-addon .panel-price {
    color: var(--nx-primary);
    font-weight: 400;
}

/* ---- 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-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);
}
/* Quantity keeps its own, much softer treatment on focus -- the shared 3px
   solid ring above reads exactly like the outline it was asked to remove.
   Same shadow it always has, just a touch stronger while focused. */
#order-nexum .nx-qty-wrapper:focus-within {
    box-shadow: 0 1px 6px rgba(15, 23, 42, .14);
}
#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: 600;
    color: var(--nx-text);
    margin-bottom: 6px;
}
#order-nexum .nx-cpd-bare-input {
    border: none;
    width: 100%;
    font-size: 14.5px;
    font-weight: 400;
    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: 400;
    color: var(--nx-muted);
    padding: 0 var(--nx-space-1);
}
#order-nexum .nx-cpd-prefix {
    font-size: var(--nx-font-size);
    font-weight: 400;
    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 var(--nx-success-alt).
   ================================================================== */
/* 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. */
/* Reads as a band welded to the underside of the site header rather than a card
   floating over the page: it breaks out of .nx-content-container's max-width to
   span the viewport, carries the header's own surface colour, and closes with a
   hairline so the two read as one unit.

   The 50vw/-50vw pair is the standard full-bleed escape — it re-centres the
   element on the viewport regardless of how much padding the container adds.
   Inner padding then re-aligns the steps to the content column, so the track
   still lines up with the cart below it.

   100vw always includes the vertical scrollbar's own width, so on any page
   that has one the band ends up wider than the visible viewport and forces a
   horizontal scrollbar for the whole page. This wrapper (present only around
   the steps-indicator include in viewcart/checkout/configureproduct.tpl)
   clips just that overshoot. It deliberately does NOT live on #order-nexum or
   any shared ancestor: those also contain the sticky Order Summary sidebar
   further down the same page, and any overflow value other than visible on a
   sticky element's ancestor chain disables its stickiness — which is exactly
   what happened when this was first fixed at that level instead. */
/* Full-bleed band, done by cancelling the content wrapper's own side padding
   rather than by breaking out to 100vw.

   The old "left:50%; margin-left:-50vw; width:100vw" trick only lands flush
   against the window when its parent is CENTRED in the viewport. With a
   sidebar the content column is not: it starts one sidebar-width in, so the
   band came out shifted right by half the sidebar and then ran that same
   distance PAST the right edge -- which is what pushed "Secure ... checkout"
   off screen, and why a wider (expanded) sidebar made it worse.

   Negative margins equal to the wrapper's padding give the same edge-to-edge
   look with no viewport maths at all: the band starts exactly where the
   content column starts (right at the sidebar's edge, where it becomes
   visible anyway) and ends at the window's right edge, at every width and in
   every sidebar mode. */
#order-nexum .nx-steps-clip {
    position: relative;
    margin-left: calc(var(--nx-content-padding, 32px) * -1);
    margin-right: calc(var(--nx-content-padding, 32px) * -1);
    width: auto;
    max-width: none;
    overflow-x: hidden;
}
/* The wrapper's padding is itself mode/breakpoint dependent (nexum.css), so
   the cancelling margin has to follow it exactly or the band would sit a few
   pixels inside or outside the true edge. */
body.nx-sidebar-mode-icons #order-nexum .nx-steps-clip {
    margin-left: calc(var(--nx-content-padding, 32px) * -0.6);
    margin-right: calc(var(--nx-content-padding, 32px) * -0.6);
}
@media (max-width: 991px) {
    #order-nexum .nx-steps-clip {
        margin-left: -16px;
        margin-right: -16px;
    }
}
#order-nexum .nx-cart-steps-container {
    position: relative;
    margin-top: 0;
    margin-bottom: var(--nx-space-6);
    width: 100%;
    max-width: 100%;
    /* Percentage, not 100vw: .nx-steps-clip above is now sized to the real
       content area (it cancels the wrapper padding instead of breaking out to
       the whole window), so 100% here already IS the usable width -- the part
       of the page the sidebar does not cover. No sidebar width to subtract
       and no viewport maths to get wrong; the gutter simply centres the
       1200px column in whatever room the band actually has, in every sidebar
       mode and at every screen size. The max(..., 24px) floor is unchanged. */
    padding: 14px max(calc((100% - var(--nx-container-width, 1200px)) / 2), 24px);
    background: var(--nx-card-bg);
    border: none;
    border-bottom: 1px solid var(--nx-border);
    border-radius: 0;
    box-shadow: none;
    /* Bootstrap's .justify-content-center utility is on the markup and carries
       !important, so matching it here is what moves the track left. */
    justify-content: flex-start !important;
    /* 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. Desktop: the track and the secure badge stay side by side
       on this one row, same as before -- the mobile override below is what
       actually splits them apart. */
    flex-wrap: nowrap !important;
    overflow: visible;
}
/* Holds just the numbered steps + dividers -- the scrollable, never-wraps
   row that .nx-cart-steps-container itself used to be directly, before
   nx-steps-secure needed to be free to drop onto its own line below it on a
   phone instead of squeezing into the same one (see steps-indicator.tpl and
   the mobile rules further down). */
#order-nexum .nx-cart-steps-track {
    padding: 5px;
    gap: var(--nx-space-2);
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
/* The band is flush against the header, so the page's own top padding would
   otherwise leave a strip of page background above it — the padding lives on
   .nx-content-wrapper (the <main> the order form sits in, admin-configurable
   via the Branding "Content padding" setting), not on #order-nexum itself, so
   zeroing #order-nexum alone left that strip untouched.

   Scoped to :has(.nx-steps-clip) rather than :has(#order-nexum) — every order-
   form page carries #order-nexum, but only checkout.tpl/configureproduct.tpl/
   viewcart.tpl actually render this full-bleed band. The wider #order-nexum
   selector was zeroing the same padding on pages with no band to justify it
   (products.tpl, addons.tpl, …), leaving their own page heading flush against
   the site header with none of the breathing room a normal page like
   viewinvoice.tpl keeps. */
body.nx-theme .nx-content-wrapper:has(.nx-steps-clip) { padding-top: 0; }
/* overflow-x:hidden on .nx-steps-clip itself only clips its OWN children —
   it can't trim the element's own declared width. 100vw always measures wider
   than the visible viewport by the vertical scrollbar's width, so on any page
   with one, .nx-steps-clip's own box still sits a few pixels past the right
   edge and the page itself gained a horizontal scrollbar to reach it — the
   overflow-x on the band never had anywhere of its own to hide.
   html is what actually needs the clip, not .nx-content-wrapper: that's a
   nearer ancestor of the sticky Order Summary sidebar further down the same
   page, and giving THAT element a restrictive overflow is what disabled its
   stickiness the last time this was tried at that level (see the note above).
   html sits outside that ancestor chain, so normal page scroll and the
   sidebar's sticky behaviour are both unaffected — only the stray horizontal
   scrollbar this band caused is. :has() keeps it off every other page. */
html:has(#order-nexum .nx-steps-clip) { overflow-x: hidden; }
/* Sits at the right end of the track, opposite the steps. */
#order-nexum .nx-steps-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-left: var(--nx-space-4);
    flex: 0 0 auto;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    color: var(--nx-muted);
    white-space: nowrap;
}
#order-nexum .nx-steps-secure .material-symbols-rounded {
    font-size: 16px;
    color: var(--nx-success);
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-cart-step {
    gap: 9px;
    flex-shrink: 0;
    min-width: 0;
}
#order-nexum .nx-step-label {
    white-space: nowrap;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    letter-spacing: -0.1px;
    transition: color var(--nx-transition-fast);
}

#order-nexum .nx-step-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    background: var(--nx-bg);
    border: 1.5px solid var(--nx-border);
    color: var(--nx-muted);
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast);
}
/* 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: #fff;
}
/* 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: 400;
}
#order-nexum .nx-cart-step.is-done .nx-step-label { color: var(--nx-text); }

/* Fixed connectors, not fillers. They used to be flex:1 and shared the whole
   row width, which is what spread the four steps edge-to-edge; a left-aligned
   track wants the steps grouped instead. */
#order-nexum .nx-step-divider {
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    height: 2px;
    margin: 0 var(--nx-space-3, 12px);
    border-radius: var(--nx-radius-badge);
    background: var(--nx-border);
    transition: background-color var(--nx-transition-fast);
}
#order-nexum .nx-step-divider.is-done { background: var(--nx-primary); }

/* Two breakpoints here, deliberately, because two different things are being
   solved and they do NOT happen at the same width.

   1249.98px -- matches the HEADER's own mobile breakpoint (nexum.css moved the
   header to 1250px so its nav collapses into the hamburger there, not at 768).
   This band is where the page as a whole reads as "mobile", so the secure
   badge stops sharing a line with the numbered steps and drops below them
   here too. Left at 768 it stayed jammed on the same row as the steps for the
   whole 768-1250 band -- the exact collision reported, and visually
   inconsistent with a header that had already gone mobile.

   767.98px -- genuine narrow-screen space pressure: the step LABELS and the
   divider widths only need to shrink once the row physically cannot hold
   them. Hiding "Domain"/"Configure"/"Complete" on a 1200px-wide screen would
   be a downgrade, not a fix, so those stay where they were. */
@media (max-width: 1249.98px) {
    #order-nexum .nx-cart-steps-container {
        /* Wrapping here (not on the track) is what actually moves
           nx-steps-secure onto its own line below the numbered steps instead
           of squeezing in beside them -- the track keeps its own nowrap +
           horizontal scroll internally, unaffected by this. */
        flex-wrap: wrap !important;
        row-gap: var(--nx-space-2, 8px);
    }
    #order-nexum .nx-cart-steps-track {
        padding: 10px;
        flex: 1 1 100%;
        width: 100%;
        /* Centre the numbered track on its own row. The container above is
           deliberately justify-content:flex-start (that is what pulls the
           track left on desktop, where it shares a line with the secure
           badge), but once the track becomes a full-width row of its own the
           container's alignment no longer has any say -- the numbers were
           left-aligned simply because the track itself had no
           justify-content and fell back to flex-start.

           `safe center` is declared after the plain value on purpose: the
           track is overflow-x:auto, and a centred flex line that overflows
           gets clipped at the START, where no scrolling can reach it. `safe`
           drops back to flex-start exactly in that case. Browsers that do not
           know the keyword ignore the second declaration and keep the first,
           which is the correct fallback -- at the narrow end of this band the
           labels are hidden and the row is only a few small circles. */
        justify-content: center;
        justify-content: safe center;
    }
    #order-nexum .nx-steps-secure {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        justify-content: center;
    }
}

/* 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 {
        /* Left/right padding was 0 here -- with overflow-x:auto on the track
           and the current step's glow ring (box-shadow: 0 0 0 4px, extends
           past the circle's own box), step 1 sitting flush against that
           scroll edge had its ring sliced clean off, reading as a
           broken/cut-off circle rather than a rounded badge. */
        padding: 0 var(--nx-space-4, 16px) var(--nx-space-4);
    }
    #order-nexum .nx-cart-steps-track {
        gap: var(--nx-space-1);
    }
    #order-nexum .nx-cart-step:not(.is-current) .nx-step-label { display: none; }
    #order-nexum .nx-step-divider {
        width: 24px;
        min-width: 24px;
        margin: 0 var(--nx-space-2, 8px);
    }
}
@media (max-width: 479.98px) {
    #order-nexum .nx-step-label { display: none; }
    #order-nexum .nx-step-number { width: 24px; height: 24px; }
    #order-nexum .nx-step-divider {
        width: 16px;
        min-width: 16px;
        margin: 0 6px;
    }
}

/* ==================================================================
   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: 600;
    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: 400;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-1);
}
#order-nexum .nx-cfg-h3 {
    font-size: var(--nx-font-size-lg);
    font-weight: 400;
    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: 400;
    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: 400;
    margin-bottom: var(--nx-space-5);
}
#order-nexum .nx-cfg-note {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 400;
    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 var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
    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: 600;
    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: 400;
    color: var(--nx-text);
    margin-bottom: var(--nx-space-2);
}
#order-nexum .nx-cfg-label-bold { font-weight: 400; }
#order-nexum .nx-cfg-select {
    border-radius: var(--nx-radius-md);
    font-weight: 400;
    font-size: var(--nx-font-size);
    height: 42px;
}
#order-nexum .nx-cfg-input {
    border-radius: var(--nx-radius-sm);
    font-weight: 400;
}
#order-nexum .nx-cfg-input-qty {
    border-radius: var(--nx-radius-sm);
    font-weight: 400;
    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: 400;
    color: var(--nx-text);
    cursor: pointer;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), box-shadow var(--nx-transition);
}
#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: 400;
    color: var(--nx-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#order-nexum .nx-cfg-metric-value {
    font-weight: 400;
    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: #fff;
}
#order-nexum .nx-cfg-promo-title {
    font-size: var(--nx-font-size-xl);
    font-weight: 600;
    color: var(--nx-primary);
    margin: 0 0 6px;
}
#order-nexum .nx-cfg-promo-text {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 400;
    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: 400;
    margin: 0;
    line-height: 1.4;
}
#order-nexum .nx-cfg-promo-link {
    font-size: 13px;
    color: var(--nx-primary);
    font-weight: 400;
    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 var(--nx-transition), background var(--nx-transition);
    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: 400;
    color: var(--nx-text);
}
#order-nexum .nx-cfg-option-price {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-primary);
}

/* Submit button */
#order-nexum .nx-cfg-submit {
    width: 100%;
    background: var(--nx-primary);
    border: none;
    color: #fff;
    padding: 14px var(--nx-space-5);
    border-radius: var(--nx-radius-button);
    font-weight: 400;
    font-size: var(--nx-font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    transition: background var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
    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: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    color: #fff;
    font-size: var(--nx-font-size-xl);
    font-weight: 400;
    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 var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
    cursor: pointer;
    border: 1px solid var(--nx-border);
    margin: 0;
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow-sm);
}
#order-nexum .nx-cfg-choice-card:hover:not(:has(input:checked)) {
    border-color: rgba(var(--nx-primary-rgb), 0.4);
}
#order-nexum .nx-cfg-choice-card:has(input:checked) {
    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);
}
#order-nexum .nx-cfg-check-lg {
    accent-color: var(--nx-primary);
    cursor: pointer;
}
/* The addon row's <label> takes over the card's padding so the whole card
   surface is inside the click target — with the padding left on the card, the
   band around the content stayed dead and the row felt fiddly to hit. margin:0
   because a bare <label> inherits a bottom margin from the base form styles,
   which would otherwise show up as a gap under every addon. */
#order-nexum .nx-cfg-choice-card:has(> .nx-cfg-addon-label) { padding: 0; }
#order-nexum .nx-cfg-addon-label {
    padding: var(--nx-space-6);
    margin: 0;
    cursor: pointer;
    font-weight: inherit;
}

/* 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: 400;
    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 var(--nx-transition-fast), box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast);
}
#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: 600;
    color: var(--nx-text);
    display: block;
    margin-bottom: var(--nx-space-1);
}
#order-nexum .nx-cfg-item-price {
    font-size: 15.5px;
    font-weight: 400;
    color: var(--nx-primary);
    display: block;
}
#order-nexum .nx-cfg-h4 {
    font-size: var(--nx-font-size-xl);
    font-weight: 400;
    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: 400;
    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: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--nx-space-4);
}
#order-nexum .nx-cfg-link {
    color: var(--nx-primary);
    font-weight: 400;
    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: 18px; line-height: 1; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* Small utilities */
#order-nexum .nx-cfg-strong-primary { font-weight: 400; 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: 400; color: var(--nx-muted); }
#order-nexum .nx-cfg-text-sm { font-size: var(--nx-font-size-md); color: var(--nx-text); font-weight: 400; }
#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: 400;
    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: 400;
    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: 400;
    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: 400;
    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 var(--nx-transition-fast); }
#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; }
}

/* ==========================================================================
   Checkout section - now inline under the cart on one page
   viewcart.tpl and checkout.tpl used to be two page loads. checkout.tpl is a
   partial now, so it needs a separator from the cart above it rather than the
   page chrome it used to carry.
   ========================================================================== */
/* The billing form is a continuation of the same column as the cart above it,
   so it is spaced like the next section — not fenced off with a full-width rule
   and 32px of padding, which read as the start of a new page when this block
   still sat in a band of its own below the summary. */
#order-nexum .nx-checkout-section {
    margin-top: var(--nx-space-5);
    padding-top: 0;
    border-top: none;
}
#order-nexum .nx-checkout-head {
    margin-bottom: var(--nx-space-3);
}
#order-nexum .nx-checkout-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.25px;
    color: var(--nx-text);
}
/* Buttons carry no drop shadow here either - same rule as the client area. */
#order-nexum .btn,
#order-nexum .btn-checkout,
#order-nexum .btn-primary {
    box-shadow: var(--nx-btn-shadow, none);
}


/* ==========================================================================
   Sidebar - Lagom standard
   Lagom's sidebar panel is not a card. From its own token file
   (core/styles/default/assets/css/vars/elements.css):

       --panel-sidebar-bg:              transparent;
       --panel-sidebar-border:          none;
       --panel-sidebar-box-shadow:      none;
       --panel-sidebar-heading-bg:      transparent;
       --panel-sidebar-heading-padding: 0 0 var(--ui-block-padding-sm);
       --panel-sidebar-title-size:      var(--font-size-h6);

   Only its .panel-client-details variant gets a background and a border. Here
   every sidebar block was a bordered, shadowed card with a ruled header, which
   is what made this sidebar look boxed next to Lagom's.

   The list items keep the pill treatment - that part already matched.
   Selectors stay one level deep off the block class; no div chasing.
   ========================================================================== */

/* ---------- the block itself ---------- */
#order-nexum .card-sidebar,
#order-nexum .panel-sidebar {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 28px;
}

/* ---------- heading: plain text, no rule under it ---------- */
#order-nexum .card-sidebar .card-header,
#order-nexum .card-sidebar .panel-heading {
    background: transparent;
    border: 0;
    border-bottom: 0;
    padding: 0 0 10px;
}
/* Heading type is set once, further down under "matching Lagom's actual
   measurements". Two rules for the same heading is exactly the stacking this
   pass is meant to remove, so this one only keeps what that block does not set. */

/* Lagom's sidebar does not offer a collapse control, so the chevron and the
   pointer cursor that came with it go too. */
#order-nexum .card-sidebar .card-minimise,
#order-nexum .card-sidebar .panel-minimise {
    display: none;
}
#order-nexum .card-sidebar .card-header,
#order-nexum .card-sidebar .panel-heading {
    cursor: default;
}

/* ---------- list: no card, no padding of its own ---------- */
#order-nexum .card-sidebar .list-group,
#order-nexum .card-sidebar .collapsable-card-body,
#order-nexum .card-sidebar .card-body,
#order-nexum .card-sidebar .panel-body {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

/* The generic .list-group inside the order form was itself drawn as a card -
   that is the rule that boxed Categories, Actions and Choose Currency alike. */
#order-nexum .list-group {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: 2px;
}

/* Row padding, radius and icon colour are all set once further down, in the
   block that carries Lagom's measurements. What used to be here was a second,
   dead copy of the same three properties. */




/* ==========================================================================
   Sidebar - matching Lagom's actual measurements
   Values taken from Lagom's own token files, not guessed:

     --panel-sidebar-title-size:      var(--font-size-h6)        -> 18px
     --font-weight-h6:                var(--font-weight-medium)  -> 500
     --panel-sidebar-heading-padding: 0 0 var(--ui-block-padding-sm) -> 0 0 16px
     --font-size-base:                14px      (list rows)
     --list-group-item-icon-color:    var(--text-primary-color)  -> brand blue
     --ui-block-link-active-bg:       var(--brand-primary-lighter-4) -> #F0F5FF
     --spacing-1x:                    8px

   Three things were making this column read as plain text next to Lagom's:
     1. the heading was 700 weight with an icon; Lagom's is 500 and icon-free
     2. the rows were body-grey; Lagom's are the link colour, i.e. brand blue
     3. the rows had no icons at all (fixed in sidebar-categories.tpl)
   ========================================================================== */

/* ---------- heading ---------- */
#order-nexum .card-sidebar .panel-title,
#order-nexum .card-sidebar .card-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--nx-text);
    display: flex;
    align-items: center;
}
#order-nexum .card-sidebar .card-header,
#order-nexum .card-sidebar .panel-heading {
    padding: 0 0 14px;
}
/* Lagom hides the heading's own icon the same way - .panel-sidebar .panel-title
   > i is collapsed to zero width there. The section label carries the meaning;
   an icon beside it only competes with the icons on the rows below. */
#order-nexum .card-sidebar .panel-title > i,
#order-nexum .card-sidebar .card-title > i {
    display: none;
}

/* ---------- rows ---------- */
/* Resting row: flush left, no background - the 12px only appears on hover and
   on the active row, which is what makes those two states readable at a glance.
   The transition covers padding so the slide is a movement, not a jump. */
/* Measured from Lagom's live demo (demo.rsstudio.net) rather than read off a
   screenshot, so these are its real computed values:
     padding  6px 0 resting, 6px 12px active/hover
     margin   1px            radius 4px
     font     14px / 400     row height 36px
     gap      8px            icon 12px, same colour as the label

   Two of those were the reason the pill looked cramped around the icon here:
   the icon was 18px inside a 12px-padded pill, and the radius was twice
   Lagom's, so the fill crowded the glyph on every side.

   Icon is 14px, not Lagom's 12px: its icon font is a different design, and the
   subsetting pass pinned Material Symbols' opsz axis to 24, so glyphs below
   ~14px render noticeably lighter than Lagom's do. 14px keeps the proportion
   without going thin. */
#order-nexum .card-sidebar .list-group-item,
#order-nexum .list-group-item {
    padding: 6px 0;
    margin: 1px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--nx-primary);
    background: transparent;
    gap: 8px;
    border-radius: 4px;
    transition: padding .24s ease, background-color .24s ease;
}

/* Icons sit at the row's own colour, as Lagom's --list-group-item-icon-color
   resolves to the brand colour too. */
#order-nexum .list-group-item .nx-side-ico,
#order-nexum .list-group-item .material-symbols-rounded,
#order-nexum .list-group-item i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--nx-primary);
}

/* Child rows one level deeper, like Lagom's SSL Certificates under Dedicated. */
#order-nexum .list-group-item.child,
#order-nexum .list-group-item.sub-item {
    padding-left: 34px;
}

/* ---------- currency box ---------- */
/* The select was a full-width bordered field, twice the height of a row. Lagom
   keeps the currency switcher at row scale. */
#order-nexum .card-sidebar .nx-custom-select-trigger,
#order-nexum .card-sidebar select {
    height: 38px;
    font-size: 14px;
    font-weight: 400;
}



/* ==========================================================================
   Domain choice page (configureproductdomain.tpl)
   Options as a compact list in one card, then a single search band below that
   swaps with the selection. Proportions match the home page domain band so the
   two read as the same control.
   ========================================================================== */

#order-nexum .nx-cpd-choices {
    padding: 8px;
    margin-bottom: 16px;
}

#order-nexum .nx-cpd-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The whole row is the label, so the click target is the row and not just the
   12px radio - that was the "clicks" problem: only the dot and the text were
   hitting, and the gap between them did nothing. */
#order-nexum .nx-cpd-option {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-md);
    cursor: pointer;
    transition: background-color var(--nx-transition-fast), border-color var(--nx-transition-fast);
}
#order-nexum .nx-cpd-option:hover {
    background: rgba(var(--nx-primary-rgb), .04);
}

/* :has() keeps the selected state on the real radio rather than a class the JS
   would have to remember to sync. The .is-active fallback below covers the
   first paint, when Smarty has already marked which one is checked. */
/* Selected state reads the real radio. The .is-active class this used to also
   match was rendered by Smarty once and never updated, so after a click the
   originally-selected row stayed highlighted alongside the new one. */
#order-nexum .nx-cpd-option:has(input:checked) {
    background: rgba(var(--nx-primary-rgb), .06);
    border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border));
}

#order-nexum .nx-cpd-option input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
}

#order-nexum .nx-cpd-option-ico {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--nx-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary);
}
#order-nexum .nx-cpd-option-ico .material-symbols-rounded { font-size: 20px; }

#order-nexum .nx-cpd-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#order-nexum .nx-cpd-option-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--nx-text);
    line-height: 1.35;
}
#order-nexum .nx-cpd-option-desc {
    font-size: 12.5px;
    color: var(--nx-muted);
    margin-top: 2px;
}

#order-nexum .nx-cpd-band {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    border: 0;
    border-radius: var(--nx-radius-card);
    padding: 30px 32px;
    /* .nx-cpd-band is the very next sibling of .nx-cpd-options (the
       register/transfer/owndomain/subdomain radio cards above it) with no
       margin of its own, so the selected option and this band sat flush
       against each other with zero gap. */
    margin-top: 20px;
}
#order-nexum .nx-cpd-band > * {
    max-width: 840px;
    margin-inline: auto;
}

#order-nexum .nx-cpd-band .nx-cpd-field,
#order-nexum .nx-cpd-band .nx-cpd-field.is-ai {
    background: var(--nx-card-bg);
    border-color: transparent;
}
#order-nexum .nx-cpd-band .nx-cpd-field:focus-within,
#order-nexum .nx-cpd-band .nx-cpd-field.is-ai:focus-within {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
#order-nexum .nx-cpd-band .nx-cpd-modes-label { color: #fff; }
/* Inside a gradient band the captcha matches the homepage domain section: one
   translucent card on the gradient, not the solid white panel the rest of the
   cart uses. Same layout, hint above the image + input on one row. */
#order-nexum .nx-cpd-band .default-captcha,
#order-nexum .nx-dt-hero .default-captcha {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 420px;
    margin: 18px auto 0;
    padding: 16px 18px;
    border-radius: 14px;
    box-shadow: none;
    text-align: center;
}
/* The register band is a dark gradient, so its card is a translucent white
   wash with light text; the transfer hero is a light tint of the brand, so
   the same treatment there would be invisible — it gets a solid card. */
#order-nexum .nx-cpd-band .default-captcha {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
}
#order-nexum .nx-cpd-band .default-captcha p {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}
#order-nexum .nx-dt-hero .default-captcha {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
}
#order-nexum .nx-dt-hero .default-captcha p {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nx-muted);
}
#order-nexum .nx-cpd-band .default-captcha > div,
#order-nexum .nx-dt-hero .default-captcha > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#order-nexum .nx-cpd-band .default-captcha #inputCaptchaImage,
#order-nexum .nx-dt-hero .default-captcha #inputCaptchaImage {
    height: 42px;
    width: auto;
    max-width: 100%;
    /* max-width:100% alone doesn't stop a flex item from overflowing --
       inside a flex row a replaced element's (img) automatic minimum width
       is still its own natural/intrinsic size unless min-width overrides
       that default, so on a narrow screen it kept pushing past the card
       exactly as before this line was added. Same fix as the client-area
       captcha (.nx-reg-captcha / .nx-dband in templates/nexum/css). */
    min-width: 0;
    border-radius: 9px;
    display: block;
}
#order-nexum .nx-cpd-band .default-captcha #inputCaptcha,
#order-nexum .nx-dt-hero .default-captcha #inputCaptcha {
    width: 130px;
    max-width: 130px;
    min-width: 0;
    height: 42px;
    border-radius: 9px;
    color: var(--nx-text);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: none;
}
#order-nexum .nx-cpd-band .default-captcha #inputCaptcha {
    border: 1px solid rgba(255, 255, 255, .3);
    background: #fff;
}
#order-nexum .nx-cpd-band .default-captcha #inputCaptcha:focus {
    outline: none;
    border-color: #fff;
    box-shadow: none;
}
#order-nexum .nx-dt-hero .default-captcha #inputCaptcha {
    border: 1px solid var(--nx-border);
    background: var(--nx-bg);
}
#order-nexum .nx-dt-hero .default-captcha #inputCaptcha:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
#order-nexum .nx-cpd-band .default-captcha #inputCaptcha::placeholder,
#order-nexum .nx-dt-hero .default-captcha #inputCaptcha::placeholder {
    letter-spacing: 0;
    font-weight: 400;
}
#order-nexum .nx-cpd-band .recaptcha-container,
#order-nexum .nx-dt-hero .recaptcha-container {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
#order-nexum .nx-cpd-band .nx-cpd-modes-inner {
    background: rgba(255, 255, 255, .13);
    border-color: transparent;
}
#order-nexum .nx-cpd-band .nx-cpd-mode,
#order-nexum .nx-cpd-band .nx-cpd-mode .material-symbols-rounded { color: #fff; }
#order-nexum .nx-cpd-band .nx-cpd-mode:not(.is-active):hover {
    background: rgba(255, 255, 255, .10);
}
#order-nexum .nx-cpd-band .nx-cpd-mode.is-active {
    background: var(--nx-card-bg);
    color: var(--nx-primary);
}
/* The band forces every pill's icon to #fff above, which also caught the
   active one — so its icon stayed white on the white pill and vanished.

   This used to paint a gradient through background-clip: text with
   -webkit-text-fill-color: transparent. That technique needs the glyph to
   act as a text mask, and a Material Symbols glyph does not do that
   reliably: where the clip does not take, the fill stays transparent and
   the icon disappears completely rather than falling back to a colour --
   which is exactly what the active pill showed. A plain colour has no such
   failure mode, and the label beside it is a flat primary anyway, so the
   two now match instead of one being a gradient. */
#order-nexum .nx-cpd-band .nx-cpd-mode.is-active .material-symbols-rounded {
    color: var(--nx-primary);
    -webkit-text-fill-color: var(--nx-primary);
}
#order-nexum .nx-cpd-band .nx-cpd-tld {
    background: var(--nx-card-bg);
    border-color: transparent;
}
#order-nexum .nx-cpd-band .nx-cpd-aside {
    border-left: 0;
    padding-left: 0;
}
/* Filters keeps its resting look on hover/focus/active/open within this
   blue AI hero band -- the generic .nx-dfilters-toggle hover/is-open states
   (color-mix tint toward var(--nx-primary), i.e. blue) are meant for a
   plain card background; on this gradient band the same blue tint reads as
   an unwanted highlight rather than a subtle hover cue, so it's dropped
   here specifically rather than changed globally.
   !important throughout: the generic hover rule this overrides is
   #order-nexum .nx-cpd-filters .nx-dfilters-toggle:hover inside an
   @media(hover:hover) block further down this file -- EQUAL specificity to
   this rule (both ID + 2 classes + a pseudo-class), so without !important
   the tie goes to whichever is declared LATER in the file, which was that
   one, not this one. */
#order-nexum .nx-cpd-band .nx-dfilters-toggle,
#order-nexum .nx-cpd-band .nx-dfilters-toggle:hover,
#order-nexum .nx-cpd-band .nx-dfilters-toggle:focus,
#order-nexum .nx-cpd-band .nx-dfilters-toggle:focus-visible,
#order-nexum .nx-cpd-band .nx-dfilters-toggle:active,
#order-nexum .nx-cpd-band .nx-cpd-filters.is-open .nx-dfilters-toggle {
    background: var(--nx-bg) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-text) !important;
    box-shadow: none !important;
}
#order-nexum .nx-cpd-band .nx-cpd-btn,
#order-nexum .nx-cpd-band .nx-cpd-btn span,
#order-nexum .nx-cpd-band .nx-cpd-btn:hover,
#order-nexum .nx-cpd-band .nx-cpd-btn:hover span,
#order-nexum .nx-cpd-band .nx-cpd-btn:focus,
#order-nexum .nx-cpd-band .nx-cpd-btn:focus span,
#order-nexum .nx-cpd-band .nx-cpd-btn:active,
#order-nexum .nx-cpd-band .nx-cpd-btn:active span {
    color: #fff;
}
#order-nexum .nx-cpd-band .nx-cpd-btn {
    background: var(--nx-primary);
    border: 0;
    box-shadow: none;
    outline: none;
    transition: background var(--nx-transition);
}
#order-nexum .nx-cpd-band .nx-cpd-btn:hover,
#order-nexum .nx-cpd-band .nx-cpd-btn:focus,
#order-nexum .nx-cpd-band .nx-cpd-btn:focus-visible,
#order-nexum .nx-cpd-band .nx-cpd-btn:active {
    background: color-mix(in srgb, var(--nx-primary) 78%, #000);
    border: 0;
    box-shadow: none;
    outline: none;
}

#order-nexum .nx-cpd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#order-nexum .nx-cpd-field {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 52px;
    padding: 0 10px 0 18px;
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    background: var(--nx-bg);
}
#order-nexum .nx-cpd-field:not(:has(.nx-cpd-aside)),
#order-nexum .nx-cpd-field:has(.nx-cpd-filters[hidden]) { padding-right: 18px; }
#order-nexum .nx-cpd-field:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* The wrapper above already shows focus. Left on its own, the global keyboard
   focus ring in nexum.css also outlined the borderless <input> inside it,
   giving a doubled rounded rect within the field. */
#order-nexum .nx-cpd-field input:focus,
#order-nexum .nx-cpd-field input:focus-visible,
#order-nexum .nx-dt-field input:focus,
#order-nexum .nx-dt-field input:focus-visible,
#order-nexum .nx-cpd-tbl-search input:focus,
#order-nexum .nx-cpd-tbl-search input:focus-visible {
    outline: none;
}
#order-nexum .nx-dt-field:focus-within {
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07), 0 0 0 3px rgba(var(--nx-primary-rgb), .18);
}

#order-nexum .nx-cpd-aside {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
#order-nexum .nx-cpd-field input,
#order-nexum .nx-cpd-field select {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--nx-font-family);
    font-size: 16px;
    color: var(--nx-text);
}
#order-nexum .nx-cpd-field-ico { font-size: 21px; color: var(--nx-primary); flex-shrink: 0; }
#order-nexum .nx-cpd-field-tld { flex: 0 1 150px; }
#order-nexum .nx-cpd-prefix { font-size: 15px; color: var(--nx-muted); flex-shrink: 0; }
#order-nexum .nx-cpd-dot { font-size: 20px; color: var(--nx-muted); flex-shrink: 0; }

#order-nexum .nx-cpd-tld {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 52px;
    padding: 0 6px;
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    background: var(--nx-bg);
}
#order-nexum .nx-cpd-tld select {
    border: 0;
    background: transparent;
    box-shadow: none;
    height: 40px;
    padding: 0 10px;
    font-family: var(--nx-font-family);
    font-size: 15px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
}

#order-nexum .nx-cpd-bare-select {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
#order-nexum .nx-cpd-bare-select .nx-custom-select-wrapper { width: 100%; }
#order-nexum .nx-cpd-tld .nx-custom-select-wrapper { width: auto; }
#order-nexum .nx-cpd-tld .nx-custom-select-trigger,
#order-nexum .nx-cpd-bare-select .nx-custom-select-trigger {
    height: 40px;
    min-width: 74px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    color: var(--nx-text);
    gap: 10px;
    outline: none;
    box-shadow: none;
}
#order-nexum .nx-cpd-tld .nx-custom-select-trigger:hover,
#order-nexum .nx-cpd-bare-select .nx-custom-select-trigger:hover {
    background: color-mix(in srgb, var(--nx-text) 6%, transparent);
    border-color: transparent;
    box-shadow: none;
}
#order-nexum .nx-cpd-tld .nx-custom-select-trigger:focus-visible,
#order-nexum .nx-cpd-bare-select .nx-custom-select-trigger:focus-visible {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .18);
}
#order-nexum .nx-cpd-tld .nx-custom-select-wrapper.open .nx-custom-select-trigger,
#order-nexum .nx-cpd-bare-select .nx-custom-select-wrapper.open .nx-custom-select-trigger {
    background: color-mix(in srgb, var(--nx-primary) 10%, transparent);
    border-color: transparent;
    color: var(--nx-primary);
    box-shadow: none;
}
#order-nexum .nx-cpd-tld .nx-custom-select-trigger i,
#order-nexum .nx-cpd-bare-select .nx-custom-select-trigger i {
    font-size: 11px;
    color: var(--nx-muted);
}

#order-nexum .nx-cpd-btn {
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    #order-nexum .nx-cpd-band { padding: 20px; }
    #order-nexum .nx-cpd-row { gap: 10px; }
    #order-nexum .nx-cpd-field,
    #order-nexum .nx-cpd-tld { flex: 1 1 100%; }
    #order-nexum .nx-cpd-btn { width: 100%; }
    #order-nexum .nx-cpd-option { padding: 12px; gap: 10px; }
    #order-nexum .nx-cpd-option-ico { flex-basis: 34px; width: 34px; height: 34px; }
}
@media (max-width: 899.98px) {
    /* Classic Search's TLD select (configureproductdomain.tpl's #registertld,
       ".pk" etc.) -- .nx-cpd-tld itself already stretches full width once
       stacked (the 700px rule above), but the custom-select skin's own
       wrapper/trigger inside it are hardcoded to width:auto elsewhere in
       this file (".nx-cpd-tld .nx-custom-select-wrapper { width: auto; }"),
       which is what actually renders as the visible bordered box -- so it
       stayed shrink-to-fit narrow regardless of its now-full-width parent.
       Own breakpoint (899.98px) so this reaches tablet widths too, matching
       the other domain-search stacking fixes on this page. */
    #order-nexum .nx-cpd-tld { flex: 1 1 100%; width: 100%; }
    #order-nexum .nx-cpd-tld .nx-custom-select-wrapper,
    #order-nexum .nx-cpd-tld .nx-custom-select-trigger { width: 100%; }
    /* The options panel that opens below it was still right-aligned with a
       fixed 240px min-width from its desktop rule (".nx-cpd-tld
       .nx-custom-select-options { left:auto; right:0; min-width:240px }"),
       so it floated as a narrow box off to one side instead of matching the
       trigger it now spans full-width underneath. */
    #order-nexum .nx-cpd-tld .nx-custom-select-options {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0;
    }
}

/* .nx-cpd-aside (which wraps .nx-cpd-filters) lives INSIDE .nx-cpd-field --
   an "aside" appended after the <input>, in the same flex row/pill as the
   icon and the text box -- so on narrow screens Filters stayed crammed
   beside the input no matter how narrow the field itself got. Rather than
   move it out of the DOM (it's positioned relative to this exact wrapper),
   letting .nx-cpd-field wrap and giving the aside a 100% flex-basis drops it
   onto its own full-width row below the input with a pure CSS reflow. */
/* Reference (Lagom) puts the Advanced/Classic pills BELOW the search card,
   not above it -- already true on the homepage widget (.nx-dband-modes is a
   later sibling of .nx-dband-row there), but this order form has them first
   in the markup. Reordering the DOM would risk the desktop layout (built
   and tested with modes-first); flex `order` on the form gets the same
   visual result at mobile only, with nothing moved. */
@media (max-width: 767.98px) {
    #order-nexum #frmDomainChecker { display: flex; flex-direction: column; }
    #order-nexum #frmDomainChecker .nx-cpd-modes { order: 2; margin-top: 16px; margin-bottom: 0; }
    #order-nexum #frmDomainChecker .nx-cpd-row { order: 1; }
    #order-nexum #frmDomainChecker .nx-cpd-captcha-row { order: 3; }
}

/* Advanced Search / Classic Search pill row: both pills are sized for desktop
   (16px horizontal padding, 13px text, nowrap) with no width constraint of
   their own -- .nx-cpd-modes-inner just sizes to whatever its two children
   need. On a ~375px phone that total ran wider than the card, so "Classic
   Search" spilled past the card's right edge with its text clipped instead
   of ever being contained. Smaller pills bring it back under the card width
   at normal phone sizes; flex-wrap is the safety net for the narrowest
   phones (~320px) where even the smaller pills don't both fit on one line --
   the second pill drops to its own line inside the same rounded pill-group
   background instead of overflowing it.

   !important throughout: the base (desktop) .nx-cpd-mode / .nx-cpd-modes-inner
   rules further down this file have equal specificity and no !important of
   their own, so without it they'd win the cascade on plain source order --
   this media query sits earlier in the file than they do. */
@media (max-width: 767.98px) {
    #order-nexum .nx-cpd-modes-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }
    #order-nexum .nx-cpd-mode {
        padding: 8px 11px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
    }
    #order-nexum .nx-cpd-mode .material-symbols-rounded { font-size: 15px !important; }
}

/* Confirmed definitively from the clearest reference screenshot yet: input
   alone on its own line, then Filters + Generate/Search share ONE row
   directly under it, flush against each other. .nx-cpd-aside can't share a
   flex row with .nx-cpd-btn while it stays nested inside .nx-cpd-field (that
   nesting is also what makes the desktop pill look seamless -- moving it in
   the server-rendered markup would risk that). initMobileFiltersRelocate()
   in domainregister.tpl moves it to sit in .nx-cpd-row, right before the
   button, ONLY while the viewport matches this same breakpoint, and moves it
   straight back the moment the viewport grows past it -- so desktop's DOM
   and CSS here are never touched. */
@media (max-width: 899.98px) {
    /* Was 767.98px (phone-only) -- the stacked single-column Advanced
       Search/Filters layout this block builds is needed just as much on
       tablet widths, not only phones, so the threshold now covers tablet
       down through phone in one range instead of leaving a gap between
       767.98px and wherever the desktop side-by-side layout kicks in. */
    /* !important throughout this block: an older rule at the 700px breakpoint
       above (same #order-nexum .nx-cpd-btn / .nx-cpd-field selectors, equal
       specificity) sets width:100% -- normally later-in-file wins the tie,
       but pinning it here removes any doubt rather than relying on source
       order between two same-specificity rules. */
    #order-nexum .nx-cpd-field { flex: 1 1 100% !important; }
    /* The two properties that make the whole stacked layout below actually
       possible. .nx-cpd-field is the pill that holds the icon, the input AND
       .nx-cpd-aside (the Filters control) -- and at desktop it is a fixed
       52px flex row with the default flex-wrap:nowrap.

       So even though .nx-cpd-aside is given `flex: 1 1 100%` just below, it
       could never actually take its own line: nowrap kept it squeezed onto
       the same 52px row as the input. And once the menu and panel were made
       position:static (further down) they had to lay out INSIDE that fixed
       52px box, which has no room for them -- so they spilled out of it and
       read as floating, clipped boxes rather than stacking. That is the bug,
       not the selectors.

       wrap lets Filters drop onto its own full-width line; height:auto lets
       the open menu and panel grow the box instead of overflowing it. */
    #order-nexum .nx-cpd-field {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 52px;
        row-gap: 10px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    #order-nexum .nx-cpd-row { flex-wrap: wrap !important; gap: 10px; }
    /* Full width, matching the input above and the Generate/Search button
       below it -- no longer sharing a row (or a seamless pill) with the
       button, so nothing here needs to reserve room beside anything else. */
    #order-nexum .nx-cpd-row .nx-cpd-aside {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    #order-nexum .nx-cpd-row .nx-cpd-aside .nx-cpd-filters {
        /* min-height, not height: the toggle keeps its 52px, but once the
           menu and panel below become part of this box's flow they have to
           be able to grow it. A fixed height clipped them. */
        min-height: 52px;
        width: 100% !important;
        /* The shared component this is built on (body.nx-theme .nx-dfilters
           in templates/nexum/css/nexum.css) is display:flex with the default
           row direction -- fine there, where the menu/panel stay
           position:absolute and never join the flex flow. Here they're
           forced to position:static instead (see below) so they stack in
           the document below the toggle, but nothing was telling this
           container to lay its children out as a COLUMN: they were still
           flex siblings in one nowrap ROW, so the toggle, menu and panel
           each got squeezed down to a fraction of the width and sat side by
           side instead of stacked -- the exact "floating narrow boxes
           drifting right" look in the reported screenshot. */
        flex-direction: column !important;
        align-items: stretch !important;
        /* .nx-dfilters-menu is position:absolute and nothing here was ever
           declared position:relative -- it was anchoring to whichever
           ancestor further up actually had one, which is what let it drift
           off toward the left edge of the page instead of sitting under its
           own trigger. */
        position: relative;
    }
    /* Was width:max-content -- that sized the menu to its own content, which
       is narrower than Filters now that Filters is full-width, so the menu
       looked like a stray floating box instead of a dropdown that belongs to
       the control above it. Matches Filters' own full width instead, ending
       exactly where the parent trigger ends.

       Also position:static, not absolute: .nx-dfilters-panel (below) is a
       SIBLING of this menu, not its child, and both were position:absolute
       against the same .nx-cpd-filters ancestor -- so "top: 100% + 8px" on
       the panel measured from the TOGGLE BUTton's own height, with no way to
       account for the menu sitting open above it, and rendered the panel
       overlapping/covering the still-open menu instead of appearing below
       it. Static lets them stack in plain DOM order instead -- toggle, then
       the open menu, then the open panel -- each pushing the next down, the
       same "stacked cards" look the homepage widget's reference already
       has. */
    #order-nexum .nx-cpd-row .nx-cpd-aside .nx-dfilters-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none;
        margin-top: 8px;
    }
    /* The TLD / Max Length flyout panel used to fly out sideways
       (left: calc(100% + 8px), or the mirrored right: at <=1100px) -- on a
       phone-width menu there is no room on either side, so it rendered
       partly off-screen. Below this it drops full-width under the menu in
       normal document flow instead (see the comment above), same pattern
       already used for the client-area's own filter menu
       (nx-domain-band.tpl). */
    #order-nexum .nx-cpd-row .nx-cpd-aside .nx-dfilters-panel {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        top: auto !important;
        margin-top: 8px;
    }
    #order-nexum .nx-cpd-row .nx-cpd-aside .nx-dfilters-toggle {
        width: 100% !important;
        /* Fixed, not 100%: the container is min-height now and grows with the
           open menu below, and a percentage height would stretch the toggle
           itself along with it. */
        height: 52px;
        justify-content: flex-start;
        background: var(--nx-bg);
        border: 1px solid var(--nx-border);
        border-radius: 8px;
    }
    /* Generate/Search gets its own full-width row below Filters instead of
       sharing one seamless pill with it -- Filters keeps the exact spot and
       sizing it already had above. */
    #order-nexum .nx-cpd-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0;
        margin-top: 10px;
        border-radius: 8px;
    }
}


/* iCheck wraps each radio in its own div and hides the real input. The theme
   draws its own radio, so the wrapper is neutralised here — otherwise the row
   shows two controls, and the wrapper swallows part of the click area. */
#order-nexum .nx-cpd-option .icheckbox_square-blue,
#order-nexum .nx-cpd-option .iradio_square-blue,
#order-nexum .nx-cpd-option div[class^="icheckbox"],
#order-nexum .nx-cpd-option div[class^="iradio"] {
    background: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    pointer-events: none;
}
/* inline-grid + place-content is what centres the ::before dot on every other
   radio in the form. Forcing inline-block here to undo iCheck's positioning
   also dropped the grid, so the dot fell out of the middle of the circle and
   the control stopped matching the rest of the theme. */
#order-nexum .nx-cpd-option input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    display: inline-grid !important;
    place-content: center;
    pointer-events: none;
}
#order-nexum .nx-cpd-modes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}
/* domainregister.tpl has no radio choice above the band, so the pills stand
   alone and read better centred than pinned to the left edge. */
#order-nexum .nx-cpd-modes-center { justify-content: center; margin-bottom: 20px; }
#order-nexum .nx-cpd-modes-label {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--nx-text);
}
#order-nexum .nx-cpd-modes-inner {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--nx-radius-badge);
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
}
#order-nexum .nx-cpd-mode {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--nx-radius-badge);
    background: transparent;
    font-family: var(--nx-font-family);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--nx-muted);
    cursor: pointer;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
#order-nexum .nx-cpd-mode .material-symbols-rounded { font-size: 17px; }
#order-nexum .nx-cpd-mode.is-active {
    background: var(--nx-card-bg);
    color: var(--nx-primary);
}

#order-nexum .nx-cpd-mode-ai .material-symbols-rounded {
    color: var(--nx-muted);
    transition: color var(--nx-transition);
}
/* Both pills, not just the AI one — Classic's magnifier was left on the
   inherited colour, so its icon stayed flat while its label went primary. */
#order-nexum .nx-cpd-mode.is-active .material-symbols-rounded {
    color: var(--nx-primary);
    -webkit-text-fill-color: var(--nx-primary);
}

#order-nexum .nx-cpd-field-ico {
    transition: color var(--nx-transition);
}
#order-nexum .nx-cpd-field.is-ai .nx-cpd-field-ico {
    color: var(--nx-primary);
    -webkit-text-fill-color: var(--nx-primary);
}
#order-nexum .nx-cpd-field.is-ai {
    border-color: rgba(var(--nx-primary-rgb), .35);
    background:
        linear-gradient(135deg, rgba(var(--nx-primary-rgb), .06) 0%, rgba(124, 92, 255, .06) 100%),
        var(--nx-bg);
}
#order-nexum .nx-cpd-field.is-ai:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .14);
}

.nx-custom-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: -6px -6px 6px;
    background: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
}
.nx-custom-select-search .material-symbols-rounded {
    font-size: 18px;
    color: var(--nx-muted);
    flex-shrink: 0;
}
.nx-custom-select-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    color: var(--nx-text);
}
/* #order-nexum-scoped + !important on every state (plain, :focus AND
   :focus-visible) and every box-decoration property that could possibly
   paint a ring around this field, so nothing else on the page -- any
   browser's own mobile-autofill/tap styling included -- can still be
   drawing what earlier passes at this only removed a subset of. */
#order-nexum .nx-custom-select-search,
#order-nexum .nx-custom-select-search input {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
#order-nexum .nx-custom-select-search:focus-within {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
#order-nexum .nx-custom-select-search input:focus,
#order-nexum .nx-custom-select-search input:focus-visible,
#order-nexum .nx-custom-select-search input:active {
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
.nx-custom-select-noresult {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nx-muted);
}

#order-nexum .nx-cpd-tld .nx-custom-select-options {
    left: auto;
    right: 0;
}
#order-nexum .nx-cpd-tld .nx-custom-select-options,
#order-nexum .nx-cpd-bare-select .nx-custom-select-options {
    z-index: 60;
    min-width: 240px;
    max-height: 320px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}
#order-nexum .nx-cpd-tld .nx-custom-select-option,
#order-nexum .nx-cpd-bare-select .nx-custom-select-option {
    border-radius: 9px;
    font-weight: 400;
}
#order-nexum .nx-cpd-row { position: relative; z-index: 5; }

.nx-custom-select-group {
    padding: 10px 12px 6px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nx-muted);
    list-style: none;
    cursor: default;
}
.nx-custom-select-group + .nx-custom-select-option { margin-top: 0; }

#order-nexum .nx-cpd-filters[hidden] { display: none; }
#order-nexum .nx-cpd-filters .nx-dfilters-toggle {
    height: 40px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-text);
    outline: none;
    box-shadow: none;
}
#order-nexum .nx-cpd-filters .nx-dfilters-toggle .material-symbols-rounded {
    font-size: 20px;
    color: var(--nx-muted);
}
/* (hover: hover) excludes touchscreens -- without it, tapping the toggle on
   mobile leaves it visually "stuck" highlighted (a tap fires :hover with
   nothing to un-hover it, unlike a real pointer moving away) until the user
   taps something else. Desktop's real mouse-hover behaviour is unaffected. */
@media (hover: hover) {
    #order-nexum .nx-cpd-filters .nx-dfilters-toggle:hover {
        background: color-mix(in srgb, var(--nx-text) 6%, transparent);
        border-color: transparent;
        color: var(--nx-text);
    }
}
#order-nexum .nx-cpd-filters .nx-dfilters-toggle:focus-visible {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .18);
}
#order-nexum .nx-cpd-filters.is-open .nx-dfilters-toggle {
    background: color-mix(in srgb, var(--nx-primary) 10%, transparent);
    border-color: transparent;
    color: var(--nx-primary);
}
#order-nexum .nx-cpd-filters.has-filters .nx-dfilters-toggle::after { display: none; }
/* The sole remaining checked TLD -- unticking it would leave the search with
   no scope at all, so domainregister.tpl's JS blocks the click; this is just
   the visual half of that (cursor + a lighter tick) so it reads as locked
   rather than randomly unresponsive. */
#order-nexum .nx-dfilters-tld.is-locked {
    cursor: not-allowed;
    opacity: .7;
}
#order-nexum .nx-dfilters-tld.is-locked:hover { background: transparent; }

#order-nexum .nx-cpd-filters .nx-dfilters-menu {
    left: auto;
    right: 0;
    top: calc(100% + 14px);
    z-index: 60;
    text-align: left;
}
#order-nexum .nx-cpd-filters .nx-dfilters-panel {
    left: calc(100% + 8px);
    right: auto;
    top: calc(100% + 14px);
    z-index: 61;
    text-align: left;
}
#order-nexum .nx-cpd-filters .nx-dfilters-list {
    max-height: 240px;
    overflow-y: auto;
}
@media (max-width: 1100px) {
    #order-nexum .nx-cpd-filters .nx-dfilters-panel {
        left: auto;
        right: calc(100% + 8px);
    }
}

/* This box now opts out of iCheck entirely (class="no-icheck" in
   domainregister.tpl, see that file's comment) rather than fighting its
   wrapper/click layer with CSS -- so there is no .icheckbox_square-blue
   sprite here to flatten any more. Drawing the check mark ourselves via
   appearance:none instead of leaving the bare native control unstyled: an
   unstyled checkbox picks up whatever size/shape the browser's own current
   form-control theme uses (several recent Chromium/Android versions render
   a noticeably large, pill-shaped, high-contrast box for a plain unstyled
   checkbox), which is what made this read as an oversized blue toggle
   instead of a small tick box once iCheck's own fixed-size sprite was no
   longer there to override it. */
/* Every property !important, including ones that look redundant (border,
   background, accent-color, min-width/max-width, flex-basis): the first
   attempt at this already had appearance:none + width/height:17px and still
   rendered as an oversized pill, which only happens if a same-page generic
   rule (#order-nexum input[type="checkbox"] a few thousand lines up, which
   sets accent-color instead of drawing the box by hand) is winning some of
   these properties despite this selector being more specific on paper --
   so nothing here is left able to fall through to that rule or to the
   browser's own native control rendering on any property. */
#order-nexum .nx-dfilters-check input[type="checkbox"],
#order-nexum .nx-dfilters-check input[type="checkbox"].nx-dfilters-check,
body.nx-theme #order-nexum .nx-dfilters-check input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    accent-color: initial !important;
    position: static !important;
    display: inline-block !important;
    flex: 0 0 17px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--nx-border) !important;
    border-radius: 4px !important;
    background-color: var(--nx-card-bg) !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
#order-nexum .nx-dfilters-check input[type="checkbox"]:checked,
body.nx-theme #order-nexum .nx-dfilters-check input[type="checkbox"]:checked {
    background-color: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
    /* Box turning blue but with no tick showing (background-color applied,
       background-image didn't) means something upstream is setting the
       `background` SHORTHAND, not just background-color -- the shorthand
       resets image/position/repeat/size to their defaults even where it
       gives no value for them, and unlike a plain background-color that
       only clobbers colour, it wins over these four regardless of which
       order the two rules load in. Every background-* sub-property
       individually !important closes that off. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px !important;
}

/* ========================= sidebar: card panels ========================= */
#order-nexum .card-sidebar,
#order-nexum .panel-sidebar {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-sm);
    padding: 14px;
    margin-bottom: 16px;
    overflow: visible;
}

#order-nexum .card-sidebar .card-header,
#order-nexum .card-sidebar .panel-heading {
    background: transparent;
    border: 0;
    padding: 4px 8px 12px;
    cursor: default;
}
#order-nexum .card-sidebar .panel-title,
#order-nexum .card-sidebar .card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: var(--nx-text);
}
#order-nexum .card-sidebar .panel-title > i,
#order-nexum .card-sidebar .card-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 15px;
    color: var(--nx-primary);
}
#order-nexum .card-sidebar .panel-title > span.material-symbols-rounded,
#order-nexum .card-sidebar .card-title > span.material-symbols-rounded {
    font-size: 19px;
    color: var(--nx-primary);
}
#order-nexum .card-sidebar .card-minimise,
#order-nexum .card-sidebar .panel-minimise {
    display: none;
}

#order-nexum .card-sidebar .list-group,
#order-nexum .card-sidebar .collapsable-card-body,
#order-nexum .card-sidebar .card-body,
#order-nexum .card-sidebar .panel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

#order-nexum .card-sidebar .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--nx-text);
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
#order-nexum .card-sidebar .list-group-item .nx-side-ico,
#order-nexum .card-sidebar .list-group-item .material-symbols-rounded,
#order-nexum .card-sidebar .list-group-item i {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--nx-primary);
}
#order-nexum .card-sidebar .list-group-item:hover {
    background: color-mix(in srgb, var(--nx-primary) 7%, transparent);
    color: var(--nx-primary);
}
#order-nexum .card-sidebar .list-group-item.active,
#order-nexum .card-sidebar .list-group-item.active:hover {
    background: color-mix(in srgb, var(--nx-primary) 10%, transparent);
    color: var(--nx-primary);
    font-weight: 400;
}
#order-nexum .card-sidebar .list-group-item.child,
#order-nexum .card-sidebar .list-group-item.sub-item {
    padding-left: 40px;
}

#order-nexum .card-sidebar .nx-custom-select-trigger,
#order-nexum .card-sidebar select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
}

#order-nexum .btn,
#order-nexum .btn:hover,
#order-nexum .btn:active,
#order-nexum .btn:focus,
#order-nexum .nx-btn,
#order-nexum .nx-btn:hover,
#order-nexum .nx-btn:active,
#order-nexum .nx-btn:focus,
#order-nexum button,
#order-nexum button:hover,
#order-nexum button:active,
#order-nexum button:focus,
#order-nexum input[type="submit"],
#order-nexum input[type="submit"]:hover,
#order-nexum input[type="submit"]:focus {
    box-shadow: none;
}
#order-nexum .btn:focus-visible,
#order-nexum .nx-btn:focus-visible,
#order-nexum button:focus-visible,
#order-nexum input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-primary) 25%, transparent);
}

#order-nexum .nx-ci-col {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}
/* 34px keeps the tile in proportion to the 14.5px title beside it; at 44px it
   was the heaviest thing in the row. */
#order-nexum .nx-ci-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
}
#order-nexum .nx-ci-ico .material-symbols-rounded {
    font-size: 19px;
    font-variation-settings: 'FILL' 1;
}
#order-nexum .nx-ci-body {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

#order-nexum .nx-ci-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}
/* Labelled text actions rather than bare icon squares. The icons alone relied
   on a title attribute to say what they did; "Edit" and "Remove" beside them
   need no hover to be understood, and they are quiet enough at 12px not to
   compete with the row's own content. */
#order-nexum .nx-ci-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-muted);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--nx-transition);
}
#order-nexum .nx-ci-act .material-symbols-rounded {
    font-size: 16px;
}
#order-nexum .nx-ci-act-edit:hover,
#order-nexum .nx-ci-act-edit:focus {
    background: transparent;
    color: var(--nx-primary);
    text-decoration: none;
}
#order-nexum .nx-ci-act-del:hover,
#order-nexum .nx-ci-act-del:focus {
    background: transparent;
    color: var(--nx-danger);
}

#order-nexum .view-cart-items .item .nx-ci-actions {
    flex: 0 0 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    padding-left: 0;
    padding-right: 0;
    gap: 14px;
}
/* Bootstrap's .d-sm-block on the markup wins over the .nx-ci-actions flex
   display, which would stack each label under its icon. Restated from the sm
   breakpoint up only, so .d-none still hides the row on phones — there the
   item's own inline Remove link is used instead. */
@media (min-width: 576px) {
    #order-nexum .view-cart-items .item .nx-ci-actions {
        display: flex !important;
    }
}
#order-nexum .view-cart-items .item .item-price {
    flex: 0 0 auto;
    max-width: none;
}
/* The actions carry their labels now, so they size to their text instead of
   being pinned to a 34px icon square. */
#order-nexum .nx-ci-act {
    width: auto;
    height: auto;
    flex: 0 0 auto;
}

/* This whole block used to duplicate .view-cart-tabs .nav-tabs / .tab-content
   (already defined once, correctly, near the top of this file) with different
   values that fought the primary rules for padding/border-radius depending on
   source order — plus a #applyPromo form/.form-group/.form-control/.btn set
   targeting Bootstrap classes the promo form doesn't use any more (it's built
   from .nx-promo-input-wrap/.nx-promo-field/.nx-promo-input/.nx-promo-btn),
   so it never matched anything. Removed rather than merged. */

#order-nexum .nx-cart-modal.modal-remove-item .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--nx-card-bg);
    border: 0;
    border-bottom: 1px solid var(--nx-border);
}
#order-nexum .nx-cart-modal.modal-remove-item .nx-modal-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nx-danger);
    color: #fff;
}
#order-nexum .nx-cart-modal.modal-remove-item .nx-modal-ico .material-symbols-rounded {
    font-size: 18px;
    font-variation-settings: 'wght' 700;
}
#order-nexum .nx-cart-modal.modal-remove-item .modal-title {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: var(--nx-text);
}
#order-nexum .nx-cart-modal.modal-remove-item .close {
    position: static;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    opacity: 1;
    color: var(--nx-muted);
    text-shadow: none;
}
#order-nexum .nx-cart-modal.modal-remove-item .close:hover {
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary);
}
#order-nexum .nx-cart-modal.modal-remove-item .close .material-symbols-rounded { font-size: 20px; }

#order-nexum .nx-cart-modal.modal-remove-item .modal-body {
    padding: 22px 24px 4px;
    text-align: left;
    font-size: 14.5px;
    color: var(--nx-muted);
}

#order-nexum .nx-cart-modal.modal-remove-item .modal-footer {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 24px 24px;
    background: var(--nx-card-bg);
    border: 0;
}
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-confirm,
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-cancel {
    height: 42px;
    min-width: 96px;
    padding: 0 20px;
    border-radius: var(--nx-radius-md);
    font-size: 14px;
    font-weight: 400;
}
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-confirm {
    background: var(--nx-danger);
    border: 0;
    color: #fff;
}
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-confirm:hover,
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-confirm:focus {
    background: color-mix(in srgb, var(--nx-danger) 82%, #000);
    color: #fff;
}
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-cancel {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-cancel:hover,
#order-nexum .nx-cart-modal.modal-remove-item .btn.nx-modal-cancel:focus {
    background: var(--nx-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

#order-nexum .nx-btn-arrow,
#order-nexum .nx-cfg-submit .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

#order-nexum .checkout-error-feedback {
    padding: 20px 24px;
    text-align: left;
    color: var(--nx-text);
}
#order-nexum .checkout-error-feedback > p {
    margin: 0 0 12px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-text);
    text-align: left;
}
#order-nexum .checkout-error-feedback ul {
    margin: 0;
    padding-left: 22px;
    list-style: disc;
    text-align: left;
}
#order-nexum .checkout-error-feedback li {
    margin: 0 0 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nx-text);
    text-align: left;
    list-style: disc;
}
#order-nexum .checkout-error-feedback li::marker {
    color: var(--nx-danger);
}
#order-nexum .checkout-error-feedback li:last-child { margin-bottom: 0; }

#order-nexum .nx-btn-arrow,
#order-nexum .nx-cfg-bold-18 {
    color: inherit;
}

#order-nexum .nx-checkout-submit-row {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#order-nexum .nx-checkout-tos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 2px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nx-muted);
    cursor: pointer;
}
#order-nexum .nx-checkout-tos input[type="checkbox"] {
    flex: 0 0 17px;
    margin: 2px 0 0;
}
#order-nexum .nx-checkout-tos a {
    color: var(--nx-primary);
    font-weight: 400;
}
/* Shown by checkout.tpl's own validation when the box is left unticked.
   [hidden] needs stating because the flex/box display below would otherwise
   override the attribute's own display:none. */
#order-nexum .nx-tos-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 2px 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nx-danger, #f04438);
}
#order-nexum .nx-tos-error[hidden] { display: none; }
/* The box itself picks up the same danger outline the message uses, so the
   two read as one state rather than an unexplained line of red text. */
#order-nexum .nx-checkout-tos input[type="checkbox"].is-invalid {
    outline: 2px solid var(--nx-danger, #f04438);
    outline-offset: 1px;
    border-radius: 3px;
}

#order-nexum .nx-cfg-submit,
#order-nexum .btn-checkout {
    flex-direction: row;
}
#order-nexum .nx-cfg-submit .material-symbols-rounded,
#order-nexum .btn-checkout .nx-btn-arrow {
    order: 2;
}

#order-nexum #producttotal .product-name {
    display: flex;
    align-items: center;
    gap: 9px;
}
#order-nexum .nx-sum-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 15px;
    font-variation-settings: 'FILL' 1;
}

#order-nexum .nx-optin-toggle {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 0;
    cursor: pointer;
}
#order-nexum .nx-optin-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
#order-nexum .nx-optin-track {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
    border-radius: var(--nx-radius-badge);
    background: var(--nx-border);
    transition: background-color var(--nx-transition-fast);
}
#order-nexum .nx-optin-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nx-card-bg);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
    transition: transform var(--nx-transition-fast);
}
#order-nexum .nx-optin-toggle input:checked + .nx-optin-track {
    background: var(--nx-primary);
}
#order-nexum .nx-optin-toggle input:checked + .nx-optin-track::after {
    transform: translateX(20px);
}
#order-nexum .nx-optin-toggle input:focus-visible + .nx-optin-track {
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .25);
}

#order-nexum .btn .nx-btn-arrow,
#order-nexum .btn-checkout .nx-btn-arrow,
#order-nexum #orderSummary .btn-checkout .nx-btn-arrow,
#order-nexum .nx-cfg-submit .material-symbols-rounded,
#order-nexum .nx-cfg-bold-18 {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor;
    background: none;
    font-size: 19px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* Section titles inside the checkout column are peers of "Your cart" and
   "Order summary", so they match those panel headings rather than shouting at
   22px — at that size each one read as a new page rather than a new card. */
#order-nexum .nx-checkout-head .nx-checkout-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.25px;
    color: var(--nx-text);
    margin: 0;
}
#order-nexum .nx-checkout-head {
    margin-bottom: var(--nx-space-3);
}
/* Matches .nx-pay-card's margin-bottom so a section heading is spaced the same
   whether the thing above it is a card or something else; the two collapse
   together rather than adding up. */
#order-nexum .nx-pay-head { margin-top: 34px; }

/* Additional Notes: a clickable header row (icon, title, "Optional" tag,
   chevron) that folds its textarea shut — same collapse affordance as the
   language switcher and icon-picker filters elsewhere in the theme.

   The head and the textarea now share one .nx-pay-card (.nx-notes-card) rather
   than the head sitting as its own .header-lined title above a separate card:
   one bordered box for the whole control, matching every other section here,
   instead of a floating label над an unrelated-looking panel. */
#order-nexum .nx-notes-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
#order-nexum .nx-notes-body { margin-top: var(--nx-space-4, 16px); }
#order-nexum .nx-notes-head-ico {
    font-size: 19px;
    color: var(--nx-muted);
}
#order-nexum .nx-notes-head .nx-checkout-title { margin: 0; }
#order-nexum .nx-notes-head-optional {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-notes-head-chevron {
    margin-left: auto;
    font-size: 20px;
    color: var(--nx-muted);
    transition: transform var(--nx-transition);
}
#order-nexum .nx-notes-group { margin-bottom: 0; }

#order-nexum .nx-pay-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-sm);
    padding: 22px;
}

/* Domain Registrant Information's title sits inside its own card, unlike the
   other checkout sections whose header-lined title sits above the card — so it
   needs its own top spacing. The card's bottom spacing used to be set here too
   at a smaller value, which left this one section tighter than its neighbours;
   the shared .nx-pay-card margin-bottom further down covers it now. */
#order-nexum .nx-doms-registrant-title {
    margin: 0 0 6px;
}

#order-nexum .nx-acct-wrap { display: block; }

/* One card holding both account options. The two panels used to be separate
   .nx-pay-card boxes inside a flex wrap with a gap, so an either/or choice read
   as two unrelated sections — and the gap widened further once .nx-pay-card
   gained a bottom margin. The box lives here now; the panels are rows within
   it, divided by a hairline, and whichever is picked expands in place.
   overflow:hidden so the active row's tint clips to the card's own corners. */
#order-nexum .nx-acct-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-sm);
    overflow: hidden;
    margin-bottom: 34px;
}

/* Any card on the order form that holds a dropdown has to stop clipping.

   Two kinds of dropdown open out of a card here and both are
   position:absolute, so a card with overflow:hidden slices them off at its
   own edge:

     .nx-custom-select-options   the skinned <select> (initSelectSkin, common.tpl)
     .country-list               intl-tel-input's country picker

   .nx-acct-card is the one that actually bites: it carries overflow:hidden for
   its rounded corners, and it wraps the whole "new client" registration panel
   at the end of checkout -- password, password strength, and the security
   question <select>. That select's list opens downward near the bottom of the
   card, so it was being cut in half.

   Named per card rather than dropping overflow:hidden globally: the corner
   clipping is wanted on cards with full-bleed children, and only these three
   contain a dropdown. :has() means a card that never holds one keeps clipping
   exactly as before.

   (#order-nexum .card:has(.intl-tel-input) is handled separately further up --
   the id-scoped clipping rule there needs an id-scoped answer.) */
#order-nexum .nx-acct-card:has(.nx-custom-select-wrapper),
#order-nexum .nx-acct-card:has(.intl-tel-input),
#order-nexum .nx-pay-card:has(.nx-custom-select-wrapper),
#order-nexum .nx-doms-registrant-card:has(.nx-custom-select-wrapper) {
    overflow: visible;
}
#order-nexum .nx-acct-panel {
    border: 0;
    border-radius: 0;
    padding: 22px;
    transition: background-color var(--nx-transition);
}
/* Separates the two rows in place of the old gap. */
#order-nexum .nx-acct-panel + .nx-acct-panel {
    border-top: 1px solid var(--nx-border-soft, var(--nx-border));
}
/* The plain (logged-in) variant has no clickable header to hover for — there's
   nothing to pick, the fields are already showing or not per the switcher
   radio above — so darkening its border on hover would suggest an interaction
   that isn't there. */
/* Now that the panels are rows inside one card rather than bordered boxes,
   hover and selected are expressed as a background tint instead of a border
   colour — a per-row border would redraw the card's own edges. */
#order-nexum .nx-acct-panel:not(.is-active):not(.nx-acct-panel-plain):hover {
    background: rgba(var(--nx-primary-rgb), .03);
}
#order-nexum .nx-acct-panel.is-active {
    background: rgba(var(--nx-primary-rgb), .04);
}
#order-nexum .nx-acct-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: -22px -22px 0;
    padding: 18px 22px;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    font-family: var(--nx-font-family);
    font-size: 15px;
    font-weight: 400;
    color: var(--nx-text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#order-nexum .nx-acct-head:focus,
#order-nexum .nx-acct-head:focus-visible {
    outline: none;
    box-shadow: none;
}
#order-nexum .nx-acct-panel:not(.is-active) .nx-acct-head { margin-bottom: -22px; }
#order-nexum .nx-acct-panel.is-active .nx-acct-head { margin-bottom: 18px; }
#order-nexum .nx-acct-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--nx-border);
    background: var(--nx-card-bg);
    position: relative;
    transition: border-color var(--nx-transition);
}
#order-nexum .nx-acct-panel.is-active .nx-acct-dot {
    border-color: var(--nx-primary);
}
#order-nexum .nx-acct-panel.is-active .nx-acct-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--nx-primary);
}
#order-nexum .nx-acct-panel .sub-heading { display: none; }

/* Logged-in customer choosing "Create a New Account" from the switcher above:
   there's no accordion header to click any more (selection already happened
   on that radio), so the .sub-heading labels ("Personal Information",
   "Billing Address") that the rule above hides for the accordion flow are what
   this variant relies on to label the fields at all — switched back on and
   given the same look as every other section heading in the theme. The card
   itself (border/padding) stays: every other section on this page gets its own
   .nx-pay-card, including the account switcher immediately above this one. */
#order-nexum .nx-acct-panel-plain .sub-heading {
    display: block;
    margin: var(--nx-space-5, 20px) 0 var(--nx-space-3, 12px);
    padding: 0 0 var(--nx-space-2, 8px);
    border-bottom: 1px solid var(--nx-border-soft, var(--nx-border));
}
#order-nexum .nx-acct-panel-plain .sub-heading:first-child { margin-top: 0; }
#order-nexum .nx-acct-panel-plain .sub-heading > span,
#order-nexum .nx-acct-panel-plain .sub-heading .primary-bg-color {
    background: none;
    color: var(--nx-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.25px;
    padding: 0;
    display: block;
}

#order-nexum .nx-gw-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
#order-nexum .nx-gw-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
#order-nexum .nx-gw-row:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border));
}
#order-nexum .nx-gw-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .05);
    color: var(--nx-primary);
    font-weight: 400;
}
/* iCheck sets these inline (position/opacity) to hide the real input behind
   its own sprite; !important is what wins back the native control as the
   visible one, same pattern as every other flattened radio in this theme. */
#order-nexum .nx-gw-row input[type="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;
    flex-shrink: 0;
    accent-color: var(--nx-primary);
}
/* iCheck wraps this radio in a sprite div and hides the real input behind it,
   same as every other radio/checkbox this theme flattens. Left unaddressed
   here it left the row with no visible selection control at all. */
#order-nexum .nx-gw-row .icheckbox_square-blue {
    position: static !important;
    display: inline-flex !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0;
}
#order-nexum .nx-gw-row .iCheck-helper { display: none !important; }

/* Breathing room between one finished section and whatever follows it.
   Deliberately a margin on the card itself rather than an adjacency rule: the
   checkout puts non-visual siblings between these cards (the duplicate total
   banner, which custom.css hides, and #applyCreditContainer, which carries
   w-hidden unless the client has credit). A `.nx-pay-card + .nx-pay-card` or
   `+ .nx-pay-head` selector therefore never matched — display:none elements are
   still DOM siblings — which is why Account Security sat almost flush against
   Payment Method. A plain margin-bottom is immune to what sits between, and
   collapses with the next heading's margin-top rather than stacking. */
#order-nexum .nx-pay-card { margin-bottom: 34px; }
/* Payment Details used to be its own heading and its own card below this one.
   Now it continues inside the same .nx-pay-card as the gateway tiles/rows, so
   this is just a hairline separating "choose a method" from "enter its
   details" within that one card, not a card boundary of its own. */
#order-nexum .nx-pay-details {
    border-top: 1px solid var(--nx-border-soft, var(--nx-border));
    margin-top: var(--nx-space-5, 20px);
    padding-top: var(--nx-space-5, 20px);
}
#order-nexum .nx-pay-details .cc-input-container,
#order-nexum .nx-pay-details #paymentGatewayInput { margin: 0; }
#order-nexum .nx-pay-details .form-group:last-child { margin-bottom: 0; }

/* Labels the saved-card / new-card fields once a card gateway is selected.
   Lives inside #creditCardInputFields itself so it hides and shows with that
   container automatically, including when the customer switches to a
   non-card gateway after already picking a card one. */
/* Plain text label, not a bordered grey bar — the sample's "Card details"
   sits directly on the card's own white surface as a section label, the same
   weight as "Cards & Wallets"/"Bank & Other" above it, not a second boxed
   panel drawn on top of the one it's already inside. */
#order-nexum .nx-cc-details-head {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.1px;
    color: var(--nx-text);
    background: transparent;
    padding: 0;
    margin: 0 0 12px;
    border: none;
}

#order-nexum #paymentGatewaysContainer { margin-bottom: 0; }
#order-nexum #paymentGatewaysContainer > .small.text-muted { display: none; }

#order-nexum .nx-gw-row {
    justify-content: flex-start;
    position: relative;
}
#order-nexum .nx-gw-row .nx-gw-logo {
    margin-left: auto;
    max-height: 22px;
    width: auto;
}

/* Payment-method card head: title + WHMCS's own instruction line on the left,
   a live filter on the right — same head-row pattern as "Your cart". */
#order-nexum .nx-gw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nx-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--nx-space-4);
}
#order-nexum .nx-gw-head-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.25px;
    color: var(--nx-text);
}
#order-nexum .nx-gw-head-count {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-muted);
    max-width: 320px;
}
#order-nexum .nx-gw-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 190px;
    padding: 0 12px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
}
#order-nexum .nx-gw-search .material-symbols-rounded { font-size: 17px; color: var(--nx-muted); }
#order-nexum .nx-gw-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 9px 0;
    font-size: 12.5px;
    color: var(--nx-text);
    outline: none !important;
    box-shadow: none !important;
}
#order-nexum .nx-gw-search input:focus,
#order-nexum .nx-gw-search input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
#order-nexum .nx-gw-search:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* flex: 0 0 auto + min-width: 190px keeps this a compact, title-adjacent
   control on desktop, where .nx-gw-head has room to sit the title and the
   search box side by side. .nx-gw-head's own flex-wrap already drops the
   search onto its own line below the title on a phone, but it kept that
   same narrow, content-sized box there instead of matching the full-width
   gateway tiles/rows (.nx-gw-tiles, .nx-gw-row) sitting directly under it --
   reading as a stray, oddly-narrow control rather than part of the same
   list. */
@media (max-width: 767.98px) {
    #order-nexum .nx-gw-search {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

/* Group label — same eyebrow treatment used for the addon-picker groups. */
#order-nexum .nx-gw-group-head {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--nx-muted);
    margin: var(--nx-space-4) 0 var(--nx-space-2);
}
#order-nexum .nx-gw-group-head:first-of-type { margin-top: 0; }
#order-nexum .nx-gw-empty {
    text-align: center;
    padding: var(--nx-space-5) 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
}

/* Cards & Wallets tile grid. auto-fit, not auto-fill — auto-fill reserves
   empty invisible tracks to fill the row even when there's only one gateway,
   which is what kept a lone Stripe tile pinned to a narrow 140px column
   instead of expanding; auto-fit collapses those empty tracks so the real
   tile(s) take the freed width. */
/* Was a grid of narrow, centred, icon-over-name cards -- fine for two or
   three gateways filling a row, but a single Cards & Wallets option (Stripe
   alone, say) rendered as one small square box sitting oddly beside the
   full-width Bank & Other rows below it. Matches .nx-gw-list/.nx-gw-row now:
   one full-width row per gateway in both groups, icon-and-name inline. */
#order-nexum .nx-gw-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#order-nexum .nx-gw-tile {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    max-width: none;
    border: 1.5px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
#order-nexum .nx-gw-tile:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border));
}
#order-nexum .nx-gw-tile:has(input:checked) {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .05);
}
/* This radio needs to keep getting iCheck-wrapped — scripts.js's gateway
   selection logic (revealing the card-number fields, WHMCS.payment.event.*)
   fires on iCheck's own ifChecked event, not the native change event, so a
   no-icheck escape here would silently stop gateway selection from doing
   anything at all.

   Unlike .nx-gw-row below, a tile shows no dot at rest — only a small check
   badge once it's the selected one, so both the native input and iCheck's own
   sprite stay in the DOM (still clickable, still the thing iCheck's ifChecked
   fires on) but fully transparent; the visible mark is a plain CSS badge on
   :has(input:checked), not either of iCheck's own drawings. Showing the raw
   native radio there as well — as an earlier version of this rule did — meant
   two different circles (native + iCheck) could both paint themselves in that
   same corner depending on the browser, which is what read as a stray glyph
   sitting over the card instead of one deliberate mark. */
#order-nexum .nx-gw-tile input[type="radio"] {
    position: absolute !important;
    top: 10px !important;
    left: auto !important;
    right: 10px;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    background: none;
    border: none;
}
#order-nexum .nx-gw-tile .icheckbox_square-blue {
    position: absolute !important;
    top: 10px;
    right: 10px;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    opacity: 0 !important;
}
#order-nexum .nx-gw-tile .iCheck-helper { display: none !important; }
/* The one visible selection mark. font: '' clears the placeholder text nodes
   (icheckbox_square-blue leaves an empty <ins>) from being mistaken for
   content; the glyph itself comes from this pseudo-element alone. */
#order-nexum .nx-gw-tile:has(input:checked)::after {
    content: 'check_circle';
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 18px;
    line-height: 1;
    color: var(--nx-primary);
    background: var(--nx-card-bg);
    border-radius: 50%;
}
#order-nexum .nx-gw-tile-ico {
    font-size: 22px;
    color: var(--nx-muted);
}
#order-nexum .nx-gw-tile:has(input:checked) .nx-gw-tile-ico { color: var(--nx-primary); }
#order-nexum .nx-gw-tile-name {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
}

#order-nexum .nx-acct-legacy-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#order-nexum .nx-acct-panel,
#order-nexum .nx-acct-panel *,
#order-nexum .nx-acct-panel *:focus,
#order-nexum .nx-acct-panel *:focus-visible {
    outline: none;
}

/* These two used to force the panel border colour (resting vs selected) past a
   stray browser outline. The panels carry no border of their own any more — the
   surrounding .nx-acct-card draws the box, and selection is a background tint —
   so only the outline suppression is still wanted. Leaving the border-color
   declarations in would have had nothing to colour, and any border added here
   would double up against the card's own edge. */
#order-nexum .nx-acct-panel[data-nx-acct="existing"],
#order-nexum .nx-acct-panel[data-nx-acct="new"],
#order-nexum .nx-acct-panel[data-nx-acct="existing"].is-active,
#order-nexum .nx-acct-panel[data-nx-acct="new"].is-active {
    outline: none !important;
}
#order-nexum .nx-acct-panel[data-nx-acct="existing"] *,
#order-nexum .nx-acct-panel[data-nx-acct="new"] * {
    outline: none !important;
}

#order-nexum .nx-acct-panel .btn-primary,
#order-nexum .nx-acct-panel .btn-primary span {
    color: #fff !important;
}

/* No longer scoped to .prepend-icon specifically — the CVV field's own icon
   was removed (Card Number is the only field that still gets one), so this
   .input-group ("?" popover button beside the CVV input) needs to keep its
   styling whether or not the field it's sitting in still carries that class. */
#order-nexum .form-group .input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
/* Defensive !important: the CVV "?" popover button kept dropping onto its own
   line below the field despite the plain rule above — something with higher
   priority than a class selector (a stray inline style, or a rule this
   couldn't be tracked down against) was winning on display/flex-wrap. This
   forces the row layout regardless of whatever that turns out to be. */
#order-nexum .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
#order-nexum .input-group > .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
#order-nexum .input-group > .input-group-btn,
#order-nexum .input-group > .input-group-append {
    flex: 0 0 auto !important;
    display: flex !important;
    width: auto !important;
}
#order-nexum .form-group .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
#order-nexum .form-group .input-group .input-group-btn,
#order-nexum .form-group .input-group .input-group-append {
    flex: 0 0 auto;
    display: flex;
    width: auto;
    margin-left: 8px;
}
#order-nexum .form-group .input-group .input-group-btn .btn,
#order-nexum .form-group .input-group .input-group-append .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 13px;
}
#order-nexum .form-group .input-group .input-group-btn .btn:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

/* ==========================================================================
   Domains Configuration (cart.php?a=confdomains)
   ========================================================================== */
#order-nexum .nx-dc-head {
    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 30px;
    margin-bottom: 20px;
}
#order-nexum .nx-dc-title {
    margin: 0;
    font-size: var(--nx-font-size-h1, 25px);
    font-weight: 600;
    letter-spacing: -.4px;
    color: var(--nx-text);
}
#order-nexum .nx-dc-sub { margin: 8px 0 0; font-size: var(--nx-font-size-lg); color: var(--nx-muted); }

#order-nexum .nx-dc-alert {
    display: flex;
    gap: 12px;
    background: rgba(var(--nx-danger-rgb, 240, 68, 56), .07);
    border: 1px solid rgba(var(--nx-danger-rgb, 240, 68, 56), .25);
    border-radius: var(--nx-radius-card);
    padding: 16px 20px;
    margin-bottom: 20px;
    color: var(--nx-danger, #f04438);
}
#order-nexum .nx-dc-alert p { margin: 0 0 4px; font-weight: 400; }
#order-nexum .nx-dc-alert ul { margin: 0; padding-left: 20px; font-size: var(--nx-font-size-md); }

#order-nexum .nx-dc-list { display: flex; flex-direction: column; gap: 14px; }
#order-nexum .nx-dc-card {
    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 .nx-dc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 26px;
    flex-wrap: wrap;
}
#order-nexum .nx-dc-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
#order-nexum .nx-dc-id { min-width: 0; }
#order-nexum .nx-dc-name {
    font-size: 17.5px;
    font-weight: 400;
    letter-spacing: -.2px;
    color: var(--nx-text);
    word-break: break-all;
}
#order-nexum .nx-dc-tags { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#order-nexum .nx-dc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 400;
    text-decoration: none;
}
#order-nexum .nx-dc-tag .material-symbols-rounded { font-size: 15px; color: inherit; }
#order-nexum .nx-dc-tag-ok { background: rgba(var(--nx-success-rgb, 18, 183, 106), .12); color: var(--nx-success, #12b76a); }
#order-nexum .nx-dc-tag-warn { background: rgba(var(--nx-danger-rgb, 240, 68, 56), .10); color: var(--nx-danger, #f04438); }
#order-nexum .nx-dc-tag-warn:hover { background: rgba(var(--nx-danger-rgb, 240, 68, 56), .18); color: var(--nx-danger, #f04438); }
#order-nexum .nx-dc-tag-info { background: var(--nx-bg); color: var(--nx-muted); }

#order-nexum .nx-dc-meta { margin-left: auto; display: flex; align-items: center; gap: 22px; }
#order-nexum .nx-dc-period { text-align: right; }
#order-nexum .nx-dc-period-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--nx-muted);
    font-weight: 400;
}
#order-nexum .nx-dc-period-val {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--nx-border);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-dc-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(var(--nx-danger-rgb, 240, 68, 56), .25);
    background: var(--nx-card-bg);
    color: var(--nx-danger, #f04438);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color var(--nx-transition);
}
#order-nexum .nx-dc-remove:hover { background: rgba(var(--nx-danger-rgb, 240, 68, 56), .10); }
#order-nexum .nx-dc-remove .material-symbols-rounded { font-size: 18px; color: inherit; }

#order-nexum .nx-dc-epp {
    border-top: 1px solid var(--nx-border-soft);
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
#order-nexum .nx-dc-epp label { font-size: 12.5px; font-weight: 400; color: var(--nx-muted); margin: 0; }
#order-nexum .nx-dc-epp input {
    height: 46px;
    border: 1px solid var(--nx-border);
    border-radius: 10px;
    background: var(--nx-card-bg);
    color: var(--nx-text);
    padding: 0 15px;
    font-size: 14px;
    max-width: 420px;
}
#order-nexum .nx-dc-epp-help { font-size: 12.3px; color: var(--nx-muted); }

#order-nexum .nx-dc-addons {
    border-top: 1px solid var(--nx-border-soft);
    padding: 18px 26px 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 991px) { #order-nexum .nx-dc-addons { grid-template-columns: 1fr; } }
#order-nexum .nx-dc-addon {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0 11px;
    border: 1px solid var(--nx-border-soft);
    background: var(--nx-card-bg);
    border-radius: 13px;
    padding: 16px 18px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
/* The theme already neutralises iCheck's sprite wrapper and draws the real
   input as the themed control, so this reuses that checkbox rather than
   hiding it behind a bespoke one — the plugin owns the click target, and a
   second box fought it for both styling and state. */
#order-nexum .nx-dc-addon > input[type="checkbox"],
#order-nexum .nx-dc-addon > .icheckbox_square-blue,
#order-nexum .nx-dc-addon > .icheckbox_square-green {
    margin-top: 1px;
    align-self: start;
}
#order-nexum .nx-dc-addon-title { display: block; font-size: 14px; font-weight: 600; color: var(--nx-text); }
#order-nexum .nx-dc-addon-desc { display: block; margin-top: 5px; font-size: 12.3px; line-height: 1.55; color: var(--nx-muted); }
#order-nexum .nx-dc-addon-info { font-size: 17px; color: var(--nx-border); }
#order-nexum .nx-dc-addon-foot {
    grid-column: 1 / -1;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#order-nexum .nx-dc-addon-price { font-size: 13.5px; font-weight: 400; color: var(--nx-text); }
#order-nexum .nx-dc-addon-term { font-size: 11.5px; color: var(--nx-muted); }
#order-nexum .nx-dc-addon-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 400;
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
    white-space: nowrap;
}
#order-nexum .nx-dc-addon-btn .material-symbols-rounded { font-size: 16px; color: inherit; }
#order-nexum .nx-dc-btn-ico-added,
#order-nexum .nx-dc-btn-added { display: none; }

#order-nexum .nx-dc-addon.is-selected {
    border-color: rgba(var(--nx-primary-rgb), .35);
    background: rgba(var(--nx-primary-rgb), .04);
}
#order-nexum .nx-dc-addon.is-selected .nx-dc-addon-price { color: var(--nx-primary); }
#order-nexum .nx-dc-addon.is-selected .nx-dc-addon-btn { background: var(--nx-primary); color: #fff; }
#order-nexum .nx-dc-addon.is-selected .nx-dc-btn-ico-add,
#order-nexum .nx-dc-addon.is-selected .nx-dc-btn-add { display: none; }
#order-nexum .nx-dc-addon.is-selected .nx-dc-btn-ico-added,
#order-nexum .nx-dc-addon.is-selected .nx-dc-btn-added { display: inline; }

#order-nexum .nx-dc-extra {
    border-top: 1px solid var(--nx-border-soft);
    background: var(--nx-bg);
    padding: 22px 26px;
}
#order-nexum .nx-dc-extra-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .2px;
    color: var(--nx-warning, #b54708);
}
#order-nexum .nx-dc-extra-head .material-symbols-rounded { font-size: 18px; color: inherit; }
#order-nexum .nx-dc-extra-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px 22px;
    align-items: center;
}
@media (max-width: 767px) { #order-nexum .nx-dc-extra-grid { grid-template-columns: 1fr; gap: 6px 0; } }
#order-nexum .nx-dc-extra-label { font-size: 13.5px; color: var(--nx-muted); }
#order-nexum .nx-dc-extra-field input[type="text"],
#order-nexum .nx-dc-extra-field select {
    width: 100%;
    height: 44px;
    border: 1px solid var(--nx-border);
    border-radius: 10px;
    background: var(--nx-card-bg);
    color: var(--nx-text);
    padding: 0 15px;
    font-size: 13.5px;
}
#order-nexum .nx-dc-extra-field label { font-size: 13.5px; color: var(--nx-text); font-weight: 400; margin: 0; }

#order-nexum .nx-dc-ns {
    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 30px;
    margin-top: 20px;
}
#order-nexum .nx-dc-ns-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--nx-text); }
#order-nexum .nx-dc-ns-sub { margin: 8px 0 22px; font-size: 13.5px; color: var(--nx-muted); }
#order-nexum .nx-dc-ns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; }
@media (max-width: 767px) { #order-nexum .nx-dc-ns-grid { grid-template-columns: 1fr; } }
#order-nexum .nx-dc-ns-item label { display: block; font-size: 12.5px; font-weight: 400; color: var(--nx-muted); margin-bottom: 7px; }
#order-nexum .nx-dc-ns-item input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--nx-border);
    border-radius: 10px;
    background: var(--nx-card-bg);
    color: var(--nx-text);
    padding: 0 15px;
    font-size: 14px;
}

/* Pinned above the page footer, matching the domain search's own selected-count
   bar — the list can run long enough that Continue would otherwise sit far
   below the fold. */
#order-nexum .nx-dc-footer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-elevated);
    padding: 20px 26px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* The number is the only part worth scanning for, so it carries the brand
   colour while the label stays muted. */
#order-nexum .nx-dc-count { font-size: 13.5px; color: var(--nx-muted); }
#order-nexum .nx-dc-count strong {
    color: var(--nx-primary);
    font-weight: 400;
    font-size: var(--nx-font-size-lg);
    margin-right: 2px;
}
#order-nexum .nx-dc-footer .nx-cd-continue { margin-left: auto; }

/* Same baseline as the client-area sheet: the browser's default focus ring is
   a hard dark box that ignores the palette and fires on plain mouse clicks,
   which is what drew the stray outlines around cart buttons, mode pills and
   skinned selects. Keyboard focus keeps a palette-coloured ring. */
#order-nexum button:focus,
#order-nexum [role="button"]:focus,
#order-nexum .btn:focus,
#order-nexum a:focus,
#order-nexum summary:focus,
#order-nexum select:focus,
#order-nexum input:focus,
#order-nexum textarea:focus {
    outline: none;
}
#order-nexum button:focus-visible,
#order-nexum [role="button"]:focus-visible,
#order-nexum .btn:focus-visible,
#order-nexum a:focus-visible,
#order-nexum summary:focus-visible,
#order-nexum select:focus-visible,
#order-nexum input:focus-visible,
#order-nexum textarea:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}
/* .form-control already gets its own ring via box-shadow above; the generic
   rule just above stacked a second outline ring on top of it (MAC Address /
   any plain custom-field input). Same story for iCheck-wrapped checkboxes
   left un-flattened: the outline landed on the hidden native input while the
   sprite wrapper sat on top, reading as two rings. */
#order-nexum .form-control:focus-visible {
    outline: none;
}

/* ---------------- Domain transfer (domaintransfer.tpl) ----------------
   Reuses the register page's band/field/button classes so both domain steps
   stay one design; everything below is the transfer-only chrome. All colour
   comes from the palette tokens, so it follows the admin's primary. */
/* ---- Domain transfer hero ------------------------------------------------
   A light wash of the brand colour rather than the solid band the register
   step uses: this page leads with a checklist and a cart, so the hero stays
   quiet and the cards below carry the weight. Every tint is mixed from
   --nx-primary, so it follows the palette. */
#order-nexum .nx-dt-hero {
    text-align: center;
    padding: 40px 32px 34px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--nx-primary) 8%, var(--nx-card-bg)) 0%,
        color-mix(in srgb, var(--nx-primary) 20%, var(--nx-card-bg)) 100%);
}
#order-nexum .nx-dt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: var(--nx-radius-badge, 999px);
    background: var(--nx-card-bg);
    color: var(--nx-primary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
#order-nexum .nx-dt-eyebrow .material-symbols-rounded { font-size: 15px; }
#order-nexum .nx-dt-hero-title {
    margin: 18px 0 0;
    font-size: 32px;
    font-weight: var(--nx-weight-heading, 700);
    letter-spacing: -.7px;
    color: var(--nx-text);
}
#order-nexum .nx-dt-hero-sub {
    margin: 10px auto 24px;
    max-width: 520px;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
}

#order-nexum .nx-dt-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 660px;
    margin: 0 auto;
}
#order-nexum .nx-dt-field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 56px;
    padding: 0 18px;
    border-radius: var(--nx-radius-input, 12px);
    background: var(--nx-card-bg);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
}
#order-nexum .nx-dt-field-ico { font-size: 21px; color: var(--nx-primary); }
#order-nexum .nx-dt-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size-lg);
    color: var(--nx-text);
}
#order-nexum .nx-dt-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--nx-radius-btn, 12px);
    background: var(--nx-primary);
    color: #fff;
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--nx-primary-rgb), .28);
    transition: background-color var(--nx-transition);
}
#order-nexum .nx-dt-submit:hover:not([disabled]) { background: var(--nx-primary-hover); }
#order-nexum .nx-dt-submit[disabled] { opacity: .7; cursor: default; }
#order-nexum .nx-dt-submit-label { display: inline-flex; align-items: center; gap: 8px; }
#order-nexum .nx-dt-submit-label .material-symbols-rounded { font-size: 18px; }

/* Auth-code modal (asked for before the transfer is added to the cart). */
#order-nexum .nx-dt-auth-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
#order-nexum .nx-dt-auth-input:focus,
#order-nexum .nx-dt-auth-input:focus-visible {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* Bootstrap moves an opening modal to the end of <body>, so #order-nexum no
   longer contains it — the modal's own rules have to be unscoped and hang off
   .nx-dt-auth-modal instead. */
.nx-dt-auth-modal .nx-dt-auth-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
.nx-dt-auth-modal .nx-dt-auth-input:focus,
.nx-dt-auth-modal .nx-dt-auth-input:focus-visible {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
.nx-dt-auth-modal .nx-dt-modal-desc {
    margin: 0 0 18px;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    line-height: 1.6;
}
.nx-dt-auth-modal .nx-dt-modal-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-dt-auth-modal .nx-dt-modal-err {
    display: block;
    margin-top: 8px;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    color: var(--nx-danger, #dc2626);
}
.nx-dt-auth-modal .nx-dt-modal-err[hidden] { display: none; }

/* This dialog reads as one continuous white sheet under its primary header:
   the shared .nx-cart-modal footer is a grey strip with a divider above it,
   which cut the form in half between the field and its Confirm button. */
.nx-dt-auth-modal .modal-body {
    text-align: left;
    padding: 26px 28px 8px;
    color: var(--nx-text);
}
.nx-dt-auth-modal .modal-footer {
    justify-content: flex-start;
    border-top: none !important;
    background: var(--nx-card-bg);
    padding: 18px 28px 26px;
}
.nx-dt-auth-modal .modal-footer .btn.nx-modal-confirm {
    background: var(--nx-primary);
    border: 1px solid var(--nx-primary);
    color: #fff;
}
.nx-dt-auth-modal .modal-footer .btn.nx-modal-confirm:hover,
.nx-dt-auth-modal .modal-footer .btn.nx-modal-confirm:focus {
    background: var(--nx-primary-hover, var(--nx-primary));
    border-color: var(--nx-primary-hover, var(--nx-primary));
    color: #fff;
}
.nx-dt-auth-modal .modal-footer .btn.nx-modal-cancel {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
.nx-dt-auth-modal .modal-footer .btn.nx-modal-cancel:hover,
.nx-dt-auth-modal .modal-footer .btn.nx-modal-cancel:focus {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

/* "Cannot transfer a domain that isn't registered" and friends. Bootstrap's
   own alert-warning yellow ignores the palette, so tint it from the token. */
#order-nexum #transferUnavailable {
    margin: 18px auto 0;
    max-width: 720px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--nx-radius-md, 12px);
    background: color-mix(in srgb, var(--nx-warning, #f59e0b) 14%, var(--nx-card-bg));
    color: color-mix(in srgb, var(--nx-warning, #f59e0b) 78%, #000);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    text-align: left;
}
#order-nexum #transferUnavailable.w-hidden { display: none; }

#order-nexum .nx-dt-perks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 20px;
}
#order-nexum .nx-dt-perk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-dt-perk .material-symbols-rounded { font-size: 16px; color: var(--nx-success); }
/* The row itself carries .nx-content-row so nexum.css leaves its gutters alone
   — see the note in the template. Nothing to override here. */
/* The transfer page's cards used to sit in a fixed .row of col-lg-7 + col-lg-5,
   which hardcoded both the order and which card went in which column. They are
   now one ordered list driven by the addon's Domain Transfer panel, so the
   layout is a two-track grid instead: a section is either half width (pairs up
   beside its neighbour) or full width (spans the row). The search hero is
   always full width. Below 992px everything is a single track, so the admin's
   width choice only applies where there is room for two. */
#order-nexum .nx-dt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-top: 22px;
}
#order-nexum .nx-dt-sec { min-width: 0; }
#order-nexum .nx-dt-sec.is-full { grid-column: 1 / -1; }
#order-nexum .nx-dt-sec.is-half { grid-column: span 1; }
/* Cards already carry their own bottom margin from the old stacked layout;
   the grid gap replaces it, so it would double up. */
#order-nexum .nx-dt-sec > .nx-dt-card:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
    #order-nexum .nx-dt-grid { grid-template-columns: minmax(0, 1fr); }
    #order-nexum .nx-dt-sec.is-half,
    #order-nexum .nx-dt-sec.is-full { grid-column: 1 / -1; }
}
#order-nexum .nx-dt-card { margin-bottom: 20px; }
#order-nexum .nx-dt-card-head { margin-bottom: 18px; }
#order-nexum .nx-dt-card-title {
    margin: 0;
    font-size: var(--nx-font-size-xl);
    font-weight: var(--nx-weight-heading, 700);
    color: var(--nx-text);
}
#order-nexum .nx-dt-card-sub {
    margin: 5px 0 0;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
}

#order-nexum .nx-dt-reqs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
#order-nexum .nx-dt-req { display: flex; align-items: flex-start; gap: 12px; }
#order-nexum .nx-dt-req-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--nx-radius-sm, 8px);
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#order-nexum .nx-dt-req-ico .material-symbols-rounded { font-size: 18px; }
#order-nexum .nx-dt-req-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#order-nexum .nx-dt-req-text strong {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-dt-req-text small {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    line-height: 1.5;
}

#order-nexum .nx-dt-prices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
#order-nexum .nx-dt-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    text-align: left;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md, 12px);
    background: var(--nx-card-bg);
    cursor: pointer;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
#order-nexum .nx-dt-price:hover {
    border-color: var(--nx-primary);
    box-shadow: 0 6px 18px rgba(var(--nx-primary-rgb), .10);
    transform: translateY(-2px);
}
#order-nexum .nx-dt-price-tld {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nx-font-size-xl);
    font-weight: var(--nx-weight-heading, 700);
    color: var(--nx-text);
}
#order-nexum .nx-dt-price-group {
    padding: 2px 8px;
    border-radius: var(--nx-radius-badge, 999px);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: rgba(var(--nx-primary-rgb), .12);
    color: var(--nx-primary);
}
#order-nexum .nx-dt-price-amount {
    font-size: var(--nx-font-size-lg);
    font-weight: 400;
    color: var(--nx-primary);
}
#order-nexum .nx-dt-price-amount small {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}
#order-nexum .nx-dt-price-note {
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
}

#order-nexum .nx-dt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
#order-nexum .nx-dt-step {
    position: relative;
    padding: 0 0 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#order-nexum .nx-dt-step:last-child { padding-bottom: 0; }
#order-nexum .nx-dt-step::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--nx-border);
    background: var(--nx-card-bg);
}
#order-nexum .nx-dt-step.is-current::before {
    border-color: var(--nx-primary);
    box-shadow: inset 0 0 0 2.5px var(--nx-primary);
}
#order-nexum .nx-dt-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 6px;
    bottom: 2px;
    width: 1px;
    background: var(--nx-border);
}
#order-nexum .nx-dt-step strong {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-dt-step small {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    line-height: 1.5;
}

#order-nexum .nx-dt-help { display: flex; align-items: flex-start; gap: 14px; }
#order-nexum .nx-dt-help > .material-symbols-rounded {
    font-size: 26px;
    color: var(--nx-primary);
    flex-shrink: 0;
}
#order-nexum .nx-dt-help > div { display: flex; flex-direction: column; gap: 4px; }
#order-nexum .nx-dt-help strong {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-dt-help small {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
}
#order-nexum .nx-dt-help a {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-primary);
    text-decoration: none;
}

#order-nexum .nx-dt-footnote {
    margin-top: 4px;
    text-align: center;
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
}


/* ---- Transfer eligibility -------------------------------------------------
   One row per domain the visitor actually checked. The tone follows the real
   verdict from /domain/check: registered elsewhere = success, not registered =
   neutral/primary (there is nothing to transfer, but it can be registered),
   unsupported TLD or a failed lookup = danger. */
#order-nexum .nx-dt-card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#order-nexum .nx-dt-card-title-sm {
    font-size: var(--nx-font-size-sm);
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--nx-muted);
}
/* ---- Live cart panel ---------------------------------------------------- */
#order-nexum .nx-dt-cart .nx-dt-card-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#order-nexum .nx-dt-cart .nx-dt-card-title .material-symbols-rounded { font-size: 19px; color: var(--nx-primary); }
#order-nexum .nx-dt-cart-count {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--nx-radius-badge, 999px);
    background: rgba(var(--nx-primary-rgb), .12);
    color: var(--nx-primary);
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#order-nexum .nx-dt-cart-items { display: flex; flex-direction: column; }
#order-nexum .nx-dt-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--nx-border);
}
#order-nexum .nx-dt-cart-item:last-child { border-bottom: none; }
#order-nexum .nx-dt-cart-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--nx-radius-sm, 8px);
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#order-nexum .nx-dt-cart-ico .material-symbols-rounded { font-size: 17px; }
#order-nexum .nx-dt-cart-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#order-nexum .nx-dt-cart-body strong {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    word-break: break-all;
}
#order-nexum .nx-dt-cart-body small { font-size: var(--nx-font-size-xs); color: var(--nx-muted); }
#order-nexum .nx-dt-cart-price {
    flex: 0 0 auto;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    white-space: nowrap;
}
#order-nexum .nx-dt-cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nx-border);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-dt-cart-total strong {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -.5px;
    color: var(--nx-primary);
}
#order-nexum .nx-dt-cart-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 50px;
    margin-top: 18px;
    border-radius: var(--nx-radius-btn, 12px);
    background: var(--nx-primary);
    color: #fff;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(var(--nx-primary-rgb), .28);
    transition: background-color var(--nx-transition);
}
#order-nexum .nx-dt-cart-checkout:hover {
    background: var(--nx-primary-hover);
    color: #fff;
    text-decoration: none;
}
#order-nexum .nx-dt-cart-checkout .material-symbols-rounded { font-size: 18px; }
#order-nexum .nx-dt-cart-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
}
#order-nexum .nx-dt-cart-note .material-symbols-rounded { font-size: 15px; color: var(--nx-success); }

@media (max-width: 600px) {
    #order-nexum .nx-dt-hero { padding: 28px 16px 26px; }
}
@media (max-width: 600px) {
    #order-nexum .nx-dt-hero-title { font-size: 25px; }
    #order-nexum .nx-dt-row { flex-direction: column; align-items: stretch; }
    #order-nexum .nx-dt-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Steps band: actually edge-to-edge on desktop
   ==========================================================================
   The band was still stopping short of both window edges. Cancelling
   .nx-content-wrapper's padding (the rule further up) was only half the job:
   the band also sits inside .nx-content-container, which is
   "max-width: var(--nx-container-width); margin: 0 auto" -- so on any window
   wider than that container the band was left centred with the container's
   own auto margin showing on each side. The header looks flush because it is
   NOT inside that container; it carries its own copy of it further in.

   Rather than break the band out with viewport maths -- which is what put the
   secure badge off screen the last two times, because 50vw/100vw assume the
   content column is centred in the window and a sidebar makes it not -- the
   container simply stops boxing anything on these pages, and the boxing moves
   down onto the band's SIBLINGS as padding. Then:

     - the band is a normal full-width block: no margins, no vw, nothing to
       get wrong in any sidebar mode;
     - every other child keeps the exact column it had, because a percentage
       padding resolves against #order-nexum's width, which is now the same
       width .nx-content-wrapper had before;
     - and the band's own inner padding uses the identical expression, so the
       steps still line up with the cart underneath them.

   >=992px only. Below that the band already spans the narrow layout correctly
   via the -16px rule above, and that view was not the one that was wrong. */
@media (min-width: 992px) {
    /* The floor tracks whatever side padding .nx-content-wrapper would have
       applied, so the content column never moves -- including the 0.6x that
       nexum.css uses in the compact/icons sidebar modes. */
    body.nx-theme .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) {
        --nx-of-pad: var(--nx-content-padding, 32px);
        padding-left: 0;
        padding-right: 0;
    }
    body.nx-theme.nx-sidebar-mode-compact .nx-content-wrapper:has(#order-nexum > .nx-steps-clip),
    body.nx-theme.nx-sidebar-mode-icons .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) {
        --nx-of-pad: calc(var(--nx-content-padding, 32px) * 0.6);
    }
    body.nx-theme .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) > .nx-content-container {
        max-width: none;
    }
    /* :not(.modal) because the cart's confirm dialogs are direct children of
       #order-nexum too, and they are position:fixed overlays -- padding on one
       would inset the overlay itself, not its dialog. */
    body.nx-theme .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) > .nx-content-container > #order-nexum > *:not(.nx-steps-clip):not(.modal) {
        padding-left: max(calc((100% - var(--nx-container-width, 1280px)) / 2), var(--nx-of-pad, 32px));
        padding-right: max(calc((100% - var(--nx-container-width, 1280px)) / 2), var(--nx-of-pad, 32px));
    }
    /* Nothing left to break out of. Beats the two margin rules above on
       specificity as well as order, including the sidebar-mode one. */
    body.nx-theme .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) > .nx-content-container > #order-nexum > .nx-steps-clip {
        margin-left: 0;
        margin-right: 0;
    }
    /* Same expression as the siblings above, so the steps and the secure badge
       sit on exactly the same column edges as the cart below them. The band's
       base rule floors this at 24px, which would leave an 8px step against a
       32px content padding on a narrow desktop. */
    body.nx-theme .nx-content-wrapper:has(#order-nexum > .nx-steps-clip) #order-nexum .nx-cart-steps-container {
        padding-left: max(calc((100% - var(--nx-container-width, 1280px)) / 2), var(--nx-of-pad, 32px));
        padding-right: max(calc((100% - var(--nx-container-width, 1280px)) / 2), var(--nx-of-pad, 32px));
    }
}

/* ==========================================================================
   Checkout: the "Create a New Account" provider button
   ==========================================================================
   new-account-fields.tpl renders linkedaccounts.tpl with
   linkContext="checkout-new", so the Google button lands inside the accordion
   panel above the Personal Information fields. The only rule it had was
   ".social-signin-btns { display:flex; justify-content:center }" further up,
   and that centres the WRAPPER -- but the wrapper is full width and Google's
   button is a block inside it, so the button itself stayed at the left edge
   while everything under it started at the panel's own gutter.

   The wrapper gets a real block of its own here, and the button is centred
   within it the same way the client area's login and register pages do it.
   Google draws its button in a cross-origin GSI frame, so its own 1px border
   stays -- nothing on this page can reach inside that frame. */
#order-nexum .nx-acct-panel .social-signin-btns,
#order-nexum #containerNewUserSignup .social-signin-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 4px 0 18px;
}
#order-nexum .social-signin-btns .g_id_signin,
#order-nexum .social-signin-btns .g_id_signin div {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* The button element WHMCS wraps around it carries Bootstrap's .btn, which
   would otherwise put its own border and padding around Google's. */
#order-nexum .social-signin-btns .btn,
#order-nexum .social-signin-btns a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* The lead-in line above it, and the "Sign up"/"or" rule, centred with it. */
#order-nexum #containerNewUserSignup > div > .providerPreLinking + .providerLinkingFeedback:empty { display: none; }
#order-nexum #containerNewUserSignup .sub-heading + p.text-center,
#order-nexum #containerNewUserSignup > div > p.small.text-center {
    margin: 0 0 14px;
    color: var(--nx-muted);
}

/* ---- responsive ----
   Below the two-column breakpoint the panel's own padding is what decides how
   much room the fields get; the provider button and the lead-in line follow
   the same gutter so the whole panel reads as one column. */
@media (max-width: 575.98px) {
    #order-nexum .nx-acct-panel .social-signin-btns,
    #order-nexum #containerNewUserSignup .social-signin-btns {
        margin: 4px 0 14px;
    }
    #order-nexum #containerNewUserSignup > div > p.small.text-center {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    /* Stacked fields want the full width rather than a half-column that has
       nothing beside it. */
    #order-nexum #containerNewUserSignup .row > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- "Create a New Account": tighten the provider block ----
   The run from the radio label down to the first field was carrying three
   separate stacked gaps: .sub-heading's own "margin: 28px 0 18px" (the shared
   section-header rule, sized for the Personal Information / Billing Address
   headers further down, not for a one-line lead-in), the lead-in paragraph's
   own margin, and the button row's. Pulled in here for this block only, so
   the section headers elsewhere on the checkout keep their spacing. */
#order-nexum #containerNewUserSignup > div:first-child .sub-heading {
    margin: 12px 0 10px;
    padding-bottom: 8px;
}
#order-nexum #containerNewUserSignup > div:first-child > p.small.text-center,
#order-nexum #containerNewUserSignup .providerPreLinking ~ p.small.text-center {
    margin: 0 0 10px;
}
#order-nexum .nx-acct-panel .social-signin-btns,
#order-nexum #containerNewUserSignup .social-signin-btns {
    margin: 0 0 12px;
}
/* The section header that follows it starts the fields, so it does not need
   the full 28px it would use after a block of inputs. */
#order-nexum #containerNewUserSignup > div:first-child + .sub-heading {
    margin-top: 14px;
}

/* ---- "Existing Customer Login": tighten the same run ----
   Same stack of gaps as the Create-a-New-Account panel, from different rules:
   the Login button's own centred wrapper, .sub-heading-borderless's
   "margin: 20px 0 8px" for the OR, the lead-in paragraph, and the button row.
   Scoped to this panel so the OR rule keeps its spacing anywhere else it is
   used on the checkout. */
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .sub-heading-borderless {
    margin: 10px 0 6px;
}
#order-nexum .nx-acct-panel[data-nx-acct="existing"] p.small.text-center {
    margin: 0 0 10px;
}
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .social-signin-btns {
    margin: 0 0 6px;
}
/* The Login button sits in a bare .text-center wrapper with the field row's
   own bottom margin still above it. */
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .text-center:has(#btnExistingLogin) {
    margin-top: 2px;
}
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .row:has(#inputEmail),
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .row:has(#inputPassword) {
    margin-bottom: 0;
}
#order-nexum .nx-acct-panel[data-nx-acct="existing"] .form-group {
    margin-bottom: 10px;
}

/* theme.min.css's `.primary-bg-color { background-color: #f1f1f1 }` again --
   see the note in the client-area stylesheet. The order form has its own
   copies of that class on the section headings; the ones inside .sub-heading
   were already handled, this catches any that are not. */
#order-nexum .primary-bg-color {
    background-color: transparent;
}

/* ==========================================================================
   View Cart on a phone: one Remove control, not a word glued to the title

   WHMCS ships two remove controls per cart row: a styled one in its own
   column (.nx-ci-actions, .d-none .d-sm-block) and a plain text link tucked
   INSIDE .item-title for narrow screens (.visible-xs-inline / .d-sm-none).
   Until now the phone layout hid the styled column and let the inline link
   through -- which is why the card read "testsddonsRemove", the word running
   straight on from the product name with no gap and no icon.

   Flipped here: the inline link is hidden and the proper actions row is shown
   instead, full width under the price, so the phone card matches the desktop
   one.

   The show rule runs to 767.98px, not 575.98px, because checking the band in
   between turned up a second problem: there, BOTH controls were hidden and a
   cart item could not be removed at all. Bootstrap's .d-sm-none takes the
   inline link away from 576px up, while the phone rule further up this file
   ("> .row > .nx-ci-actions", a more specific selector than the min-width:576
   rule that tries to bring it back) kept the styled row hidden all the way to
   768px. One range covering everything below 768 closes both cases.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Beats both Bootstrap's .d-none and the phone rule further up that hid
       this row: same specificity, later in the file. */
    #order-nexum .view-cart-items .item > .row > .nx-ci-actions,
    #order-nexum .view-cart-items .item.item-addon > .row > .nx-ci-actions {
        display: flex !important;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 12px;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 575.98px) {
    #order-nexum .view-cart-items .item .item-title .d-sm-none,
    #order-nexum .view-cart-items .item .item-title .visible-xs-inline {
        display: none !important;
    }
}

/* ==========================================================================
   PHONE FIELD -- match the register page exactly
   The checkout phone field is the same intl-tel-input widget the register
   page uses, but it came out wrong here for two reasons that page had already
   solved (nexum.css, "Phone field (intl-tel-input) on this page"):

   1. The field sits in a .prepend-icon wrapper with a .field-icon phone
      glyph, and the widget then lays its flag block over exactly that space.
      #order-nexum .prepend-icon .form-control { padding-left: 44px } is
      declared LATER in this file than the .intl-tel-input padding rules, so
      it won and the placeholder started underneath the flag.
   2. The flag block sits inside the field's rounded border as an opaque
      panel; with no radius of its own its square corner filled the field's
      rounded one, so the control read as un-rounded on the left.

   The flag panel gets the register page's width, colours and left radius so
   the two pages read the same. The input padding differs by necessity -- see
   the note on the padding rule below.
   ========================================================================== */
#order-nexum .prepend-icon:has(.intl-tel-input) .field-icon {
    display: none;
}
/* The input keeps the flex layout this file sets further up
   (.allow-dropdown is display:flex here, with the flag as a real flex item --
   the register page instead keeps the vendor's absolute-positioned flag and
   reserves room for it with padding). In a flex row that padding is dead
   space: it pushed the placeholder into the middle of the field. The flag has
   its own width as a sibling, so the input needs only ordinary text padding,
   and !important to beat the .prepend-icon rule declared later in this file. */
#order-nexum .prepend-icon .intl-tel-input .field,
#order-nexum .prepend-icon .intl-tel-input .form-control,
#order-nexum .intl-tel-input.allow-dropdown .form-control,
#order-nexum .intl-tel-input.allow-dropdown input.field {
    padding-left: 16px !important;
}
#order-nexum .intl-tel-input .selected-flag {
    width: 84px;
    padding-left: 12px;
    background-color: var(--nx-bg);
    border-right: 1px solid var(--nx-border);
    border-top-left-radius: var(--nx-radius-input, 11px);
    border-bottom-left-radius: var(--nx-radius-input, 11px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* The divider and the field's border must agree on focus, or the prefix panel
   keeps a grey edge against a primary-coloured field. */
#order-nexum .intl-tel-input:focus-within .selected-flag {
    border-right-color: var(--nx-primary);
}
/* The country list: sized so a row cannot wrap mid-country, and lifted above
   the cards below it. Both were already done for the register page. */
#order-nexum .intl-tel-input .country-list {
    z-index: 1000;
    min-width: 260px;
    max-height: 240px;
    overflow-y: auto;
}
#order-nexum .intl-tel-input .country-list .country {
    padding: 9px 12px;
    line-height: 1.3;
}
@media (max-width: 500px) {
    /* min-width would push a 260px list off a 320px screen once the flag
       button's own left offset is added. */
    #order-nexum .intl-tel-input .country-list {
        min-width: 0;
        width: max-content;
        max-width: min(86vw, 320px);
        max-height: 210px;
    }
    #order-nexum .intl-tel-input .country-list .country { white-space: nowrap; }
}

/* ==========================================================================
   COUNTRY SEARCH ROW -- same component as the register page
   nx-country-search.tpl injects a filter row at the top of the phone widget's
   country list, and nexum.css styles it (.nx-itl-search / .nx-itl-empty).
   That stylesheet loads on this page too, but every rule here is #order-nexum
   scoped and this file loads AFTER it -- so the list's own padding, line
   height and colours applied to the injected <li> as if it were a country,
   and the search row came out looking like a mis-sized list item.

   The same rules restated under the id. No box around the input: the row
   carries a bottom divider and the input is borderless and transparent, so an
   already-outlined panel does not draw a second outline inside itself --
   matching the language switcher and the custom select, which is what this
   row is a sibling of.
   ========================================================================== */
#order-nexum .nx-itl-search {
    list-style: none;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    line-height: normal;
    background: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
}
#order-nexum .nx-itl-search .material-symbols-rounded {
    font-size: 18px;
    color: var(--nx-muted);
    flex-shrink: 0;
}
#order-nexum .nx-itl-search input,
#order-nexum .nx-itl-search input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
}
#order-nexum .nx-itl-search input::placeholder { color: var(--nx-muted); }
#order-nexum .nx-itl-search input:focus,
#order-nexum .nx-itl-search input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}
/* Focus shows on the row, not as a ring around the input. */
#order-nexum .nx-itl-search:focus-within { border-bottom-color: var(--nx-primary); }
#order-nexum .nx-itl-search:focus-within .material-symbols-rounded { color: var(--nx-primary); }

#order-nexum .nx-itl-empty {
    list-style: none;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nx-muted);
}

/* ==========================================================================
   PHONE FIELD -- flag and input as ONE control, not two
   The register page keeps the vendor's absolute-positioned flag, so it sits
   inside the input's own border and the two read as a single field. Here the
   widget is laid out as a flex row (see .allow-dropdown further up), which
   makes the flag a real sibling -- so the input kept its own full border and
   radius and a visible seam ran between the two.

   The wrapper now carries the border, the radius and the focus ring, and the
   two children give theirs up: the flag keeps only its right-hand divider,
   and the input goes fully borderless. One outline around the pair.
   ========================================================================== */
#order-nexum .intl-tel-input.allow-dropdown {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    overflow: hidden;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
/* The focus ring belongs to the pair now, not to the input alone. */
#order-nexum .intl-tel-input.allow-dropdown:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* The input sits inside that border -- no second one, and no radius of its
   own to show through the wrapper's corner. */
#order-nexum .intl-tel-input.allow-dropdown .form-control,
#order-nexum .intl-tel-input.allow-dropdown input.field {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* The flag panel carries its OWN left corners rather than relying on the
   wrapper to clip them. The wrapper drops overflow:hidden the moment the
   control takes focus (the country list is position:absolute inside it and
   would otherwise be cut off), and with nothing clipping it a square-cornered
   flag pushed past the wrapper's rounded corner -- the notch in the report.
   Its right corners stay square so it still meets the input flush. */
#order-nexum .intl-tel-input.allow-dropdown .selected-flag {
    border-top-left-radius: var(--nx-radius-md);
    border-bottom-left-radius: var(--nx-radius-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--nx-border);
}
/* The country list is position:absolute inside the wrapper, so the clipping
   that keeps the corners tidy has to be released while the list is open. The
   flag's own radius above is what keeps the corner correct meanwhile. */
#order-nexum .intl-tel-input.allow-dropdown:focus-within,
#order-nexum .intl-tel-input.allow-dropdown:has(.country-list:not(.hide)) {
    overflow: visible;
}

/* Generate Password / strength meter: room between them once stacked.
   The two sit in separate .col-sm-6 columns, so below the sm breakpoint they
   stack -- and neither carries a bottom margin, which left the green bar
   touching the button's lower edge. Only the button is given the gap, and
   only where the columns actually stack; side by side on wider screens they
   are already apart and nothing changes. */
@media (max-width: 575.98px) {
    #order-nexum .generate-password {
        margin-bottom: 14px;
    }
}

/* ==========================================================================
   CHECKOUT CAPTCHA -- same layout as the domain checker's
   The domain page builds its own .default-captcha wrapper and this file
   styles it properly (image and input centred on one flex row). Checkout
   instead pulls the theme's shared includes/captcha.tpl, which emits a
   different structure entirely: #default-captcha-domainchecker with the image
   and the input in two Bootstrap .col-6 halves. None of the .default-captcha
   rules could reach it, so it fell through to raw Bootstrap -- a 50/50 split
   that put the image hard against the left column edge and the input against
   the right, with the hint text stretched across the full card above them.

   The shared include is used by the homepage, register and domain checker as
   well, so it is not changed. These rules re-lay-out the same markup, scoped
   to the checkout card, into the row the domain page already has.
   ========================================================================== */
#order-nexum .nx-pay-card #default-captcha-domainchecker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Undoes the .row negative side margins and the .pb-3 the include sets. */
    margin: 0;
    padding-bottom: 0;
}
/* The hint takes its own full-width line above the pair. */
#order-nexum .nx-pay-card #default-captcha-domainchecker .nx-form-hint {
    flex: 0 0 100%;
    margin: 0 0 4px;
    text-align: center;
    color: var(--nx-muted);
    font-size: 13px;
    line-height: 1.5;
}
/* The two halves stop being halves: each takes only the width it needs, so
   the image and the box sit together in the middle rather than at opposite
   edges of the card. */
#order-nexum .nx-pay-card #default-captcha-domainchecker > .col-6 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
#order-nexum .nx-pay-card #default-captcha-domainchecker #inputCaptchaImage {
    display: block;
    border-radius: var(--nx-radius-sm, 8px);
}
/* Matches the domain checker's input exactly. */
#order-nexum .nx-pay-card #default-captcha-domainchecker #inputCaptcha {
    width: auto;
    max-width: 130px;
    height: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm, 8px);
    background: var(--nx-bg);
    color: var(--nx-text);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    float: none;
}
#order-nexum .nx-pay-card #default-captcha-domainchecker #inputCaptcha:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* On a narrow phone the image and a 130px box no longer fit side by side; the
   box drops under the image rather than either one being squeezed. */
@media (max-width: 400px) {
    #order-nexum .nx-pay-card #default-captcha-domainchecker > .col-6 { flex: 0 0 100%; }
    #order-nexum .nx-pay-card #default-captcha-domainchecker #inputCaptcha {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   ACCOUNT PANELS + ACCOUNT SECURITY CARD
   1. The active account panel ("Create a new account" / "Existing customer")
      carried a tinted background. The dot, the heading weight and the open
      body already say which one is selected, so the wash was a fourth signal
      for the same thing -- and it made the panel read as a different surface
      from the cards around it.
   2. The Account Security heading used to sit outside its card, in a
      .nx-pay-head strip. It is now inside the card (checkout.tpl), so it
      needs the spacing that strip used to give it.
   ========================================================================== */
#order-nexum .nx-acct-panel.is-active {
    background: transparent;
}

/* The heading inside the security card: same size and weight as the section
   headings it replaces, with a rule under it so the fields below read as its
   contents rather than as a second block. */
#order-nexum .nx-sec-card-head {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--nx-border);
}
#order-nexum .nx-sec-card-head .nx-checkout-title {
    margin: 0;
}

/* ==========================================================================
   Modal buttons: radius that actually resolves
   The order form's custom properties are declared on #order-nexum, but
   Bootstrap moves a .modal to be a direct child of <body> when it opens --
   outside that element, so none of those variables inherit into it. Every
   rule in here that styles a modal with var(--nx-radius-btn) therefore fell
   back to nothing and the buttons rendered square, which is what the
   recommendations modal's Continue button was showing.

   The alias is re-declared on the modal itself (and on :root as a safety net
   for any other detached overlay), so the same rules resolve wherever the
   markup ends up. --nx-radius-button is the theme's own token and follows the
   admin's Button radius setting.
   ========================================================================== */
:root,
.modal,
.nx-cart-modal {
    --nx-radius-btn: var(--nx-radius-button, 11px);
    --nx-shadow-card: var(--nx-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
}
/* Belt and braces for this one button: it is the modal's primary action and
   the report was specifically about its corners. */
.nx-cart-modal .modal-footer .btn,
.nx-cart-modal .modal-footer #btnContinueRecommendationsModal {
    border-radius: var(--nx-radius-button, 11px);
}

/* ==========================================================================
   ADD TO CART / ADDED -- the joined button pair

   Two things went wrong once the remove button appeared beside "Added".

   1. The add button also carries .btn-primary, whose hover lifts it by
      translateY(-1px). On its own that reads as a normal button press, but
      here it lifts only half of a joined pair -- the bin button beside it
      stays put -- so the block looked like it changed height on hover. The
      lift and its shadow are dropped for a button inside the group; the
      colour change is left as the hover cue, the same one the bin uses.

   2. The label sits in the add button, which takes all the width the bin does
      not, so "Added" centred itself in that remainder rather than in the pair.
      Reserving the bin's width on the other side puts the label back in the
      middle of the block as a whole.
   ========================================================================== */
#order-nexum .nx-cpd-atc-group {
    align-items: stretch;
}
#order-nexum .nx-cpd-atc-group .btn-add-to-cart:hover,
#order-nexum .nx-cpd-atc-group .btn-add-to-cart:focus,
#order-nexum .nx-cpd-atc-group .btn-add-to-cart:focus-visible {
    transform: none;
    box-shadow: none;
}

/* The button is not a flex container of its own: .added is an inline-flex box
   that sizes to "tick + Added" and then sits inside the button as a line of
   text, left-aligned like any other. Its own justify-content only centres the
   tick against the word beside it, which is why the pair still sat off to one
   side of the button.

   Making the button the flex container is what actually centres them. Doing it
   with padding was the wrong tool -- several rules here set `padding` as a
   shorthand (.spotlight-tld and .domain-suggestion both do), and a shorthand
   overwrites the side values whatever order they arrive in.

   The width is capped so the label centres within the button, and the button
   is the pair minus the bin -- so what the eye reads as centred is the block
   as a whole. */
#order-nexum .nx-cpd-atc-group .btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#order-nexum .nx-cpd-atc-group .btn-add-to-cart > span {
    justify-content: center;
}

/* Both halves the same height, whatever each one's content is. */
#order-nexum .nx-cpd-atc-group .btn-add-to-cart,
#order-nexum .nx-cpd-atc-group .nx-cpd-btn-remove {
    align-self: stretch;
}

/* The Add pair, full width like the Unavailable button beside it.

   .domain-lookup-result is a column flexbox with align-items: center, which
   sizes each child to its own content unless the child says otherwise. The
   Unavailable state is a <button> carrying width: 100% and so spans the tile;
   the Add pair is a <span> whose width: 100% is measured against a container
   that has already shrunk it to fit. The two ended up different widths in the
   same tile -- Add sitting short of both edges, Unavailable reaching them.

   align-self is what a flex child uses to opt out of the parent's alignment,
   so it is the one that actually applies here. */
#order-nexum .domain-lookup-result > .nx-cpd-atc-group {
    align-self: stretch;
    width: 100%;
}
/* On an unavailable domain the JS hides the two buttons but leaves the <span>
   that holds them in the DOM with no class of its own. As a flex item it still
   took a row and the container's 10px gap, so an Unavailable tile stood 16px
   taller than an Add tile beside it and its button sat higher in the card.
   With both children hidden the wrapper has nothing to show, so it is taken
   out of the layout too.

   Matched on both the class and the inline style: syncGroup() sets .w-hidden
   and the JS elsewhere writes display:none directly, and a state carrying
   only one of the two would otherwise slip through. */
#order-nexum .domain-lookup-result > .nx-cpd-atc-group:not(:has(.btn:not(.w-hidden):not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* ==========================================================================
   REMOVE BUTTON -- telling it apart from the button it is joined to

   The bin and the "Added" button beside it were both var(--nx-primary), so
   the bin read as blank space at the end of one long button rather than as
   its own control. Only hovering it revealed there was anything there.

   Darkened against the primary rather than given a colour of its own, so it
   still belongs to the pair and still follows whatever palette is active, and
   given a hairline divider so the join is visible even where the two tones
   are close. Hover goes darker still, keeping the existing direction of
   travel.
   ========================================================================== */
#order-nexum .nx-cpd-btn-remove {
    background: color-mix(in srgb, var(--nx-primary) 82%, #000);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22);
}
#order-nexum .nx-cpd-btn-remove:hover,
#order-nexum .nx-cpd-btn-remove:focus-visible {
    background: color-mix(in srgb, var(--nx-primary) 62%, #000);
}
/* The glyph was the same white as the label next to it and, on a now-darker
   ground, read heavier than it should for a secondary action. */
#order-nexum .nx-cpd-btn-remove i {
    color: rgba(255, 255, 255, .88);
}
#order-nexum .nx-cpd-btn-remove:hover i,
#order-nexum .nx-cpd-btn-remove:focus-visible i {
    color: #fff;
}

/* ==========================================================================
   ADD TO CART -- the loading spinner

   The spinner had neither a size nor a colour of its own: both were inherited
   from whichever button it happened to be in. On the tinted buttons
   (.domain-suggestion at 12.5px, .spotlight-tld at 13.5px) that left a small,
   low-contrast mark on a pale ground -- next to nothing to look at, which is
   why the button read as simply going blank while the request was in flight.

   Sized and coloured here instead, so it looks the same wherever it appears.
   currentColor keeps it on the button's own text colour -- white on a solid
   primary button, primary on a tinted one -- so no context needs its own rule.
   ========================================================================== */
#order-nexum .btn-add-to-cart .loading .fa-spinner {
    margin: 0;
    font-size: 16px;
    line-height: 1;
    color: currentColor;
}

/* The 76px min-width exists so a button that sizes to its content does not
   collapse to the width of a bare spinner the moment the label is swapped
   out.

   Only .spotlight-tld sets width: 100% on its button, so only that one can
   afford to drop the floor. .domain-suggestion sizes to its label -- taking
   the floor away there shrank "Add to Cart" down to a circle around the
   spinner on click, which is what this rule is for in the first place. */
#order-nexum .spotlight-tld .btn-add-to-cart .loading {
    min-width: 0;
}
/* This button sizes to its label, and the shared 76px floor is narrower than
   that label -- so on click it still halved in width before the spinner
   appeared in the middle of what was left.

   The floor is raised to cover the label instead. In ch rather than px
   because the text is {$LANG.addtocart} and a longer translation would walk
   straight past a pixel value; ch tracks the font, and the glyph and padding
   are added on top. Still a floor, so a button that is wider for any other
   reason keeps its own width. */
#order-nexum .domain-suggestion .btn-add-to-cart .loading {
    min-width: calc(11ch + 18px + 7px);
}