/**
 * AEserver Cart — orderform-level overrides.
 * Loaded automatically by common.tpl via {assetExists file="custom.css"},
 * AFTER all.min.css, so it wins by cascade order.
 *
 * Theme-level custom.css (theme/css/custom.css) handles the broader
 * site styling. THIS file only patches the cart-specific layout that
 * theme CSS can't reach (because the orderform CSS loads later in the
 * page than theme CSS).
 *
 * Brand tokens are duplicated here because the orderform renders in a
 * separate template scope from the theme: theme's :root does not cascade
 * down into the cart. Keep this block in sync with the matching one in
 * aeserver_theme/css/custom.css.
 */

:root {
    --ae-primary:        #c8102e;
    --ae-primary-dark:   #a40d24;
    --ae-primary-tint:   rgba(200, 16, 46, .06);
    --ae-ink:            #0F1A2E;
    --ae-ink-soft:       #4A5568;
    --ae-ink-faded:      #8E97A8;
    --ae-border:         #E8E4DE;
    --ae-border-strong:  #D4CDC4;
    --ae-page-bg:        #f7f6f3;

    --ae-radius-lg: 20px;
    --ae-radius-md: 14px;
    --ae-radius-sm: 10px;

    --ae-shadow-card:  0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
    --ae-shadow-hover: 0 12px 32px -10px rgba(15, 26, 46, .16);

    /* Bootstrap variable override (used by some BS components). */
    --primary: #c8102e;
}

/* iOS Safari zooms in when an input has font-size < 16px. Force every
   form control to 16px on small screens so tapping a field no longer
   triggers an auto-zoom. */
@media (max-width: 768px) {
    #order-standard_cart input[type="text"],
    #order-standard_cart input[type="email"],
    #order-standard_cart input[type="password"],
    #order-standard_cart input[type="tel"],
    #order-standard_cart input[type="number"],
    #order-standard_cart input[type="search"],
    #order-standard_cart input[type="url"],
    #order-standard_cart input[type="date"],
    #order-standard_cart select,
    #order-standard_cart textarea {
        font-size: 16px !important;
    }
}

/* ── Outer cart-sidebar visibility ───────────────────────────────
   Hidden on cart/checkout pages (their .cart-sidebar has no extra
   class), but RE-SHOWN on the products page where products.tpl
   renders <div class="cart-sidebar sidebar"> — that's where the
   category list (Categories / Actions) actually belongs. */
#order-standard_cart .cart-sidebar:not(.sidebar) {
    display: none !important;
}
#order-standard_cart .cart-sidebar:not(.sidebar) ~ .cart-body,
#order-standard_cart > .row > .cart-body:only-child {
    width: 100% !important;
    float: none !important;
}
/* Products page: keep the original 25/75 floated split */
#order-standard_cart .cart-sidebar.sidebar {
    display: block !important;
    float: left;
    width: 25%;
    padding: 0 15px;
}
#order-standard_cart .cart-sidebar.sidebar + .cart-body {
    width: 75% !important;
    float: right !important;
    padding: 0 15px;
}
@media (max-width: 991px) {
    #order-standard_cart .cart-sidebar.sidebar {
        width: 100%;
        float: none;
    }
    #order-standard_cart .cart-sidebar.sidebar + .cart-body {
        width: 100% !important;
        float: none !important;
    }
}

/* The mobile-collapsed sidebar (selector dropdown) — also hide */
#order-standard_cart .sidebar-collapsed {
    display: none !important;
}

/* ── "In cart" toggle on Add-to-Cart buttons ─────────────────────
   When a domain is already in the cart the orderform JS adds class
   .checkout to its .btn-add-to-cart and shows the .added span. We
   re-skin that state as a green confirm button — clicking it again
   triggers cart-bar.js to remove the domain (capture-phase listener,
   takes precedence over the orderform's redirect handler). */
.btn-add-to-cart.checkout {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .25);
}
.btn-add-to-cart.checkout:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, .35);
}
.btn-add-to-cart.checkout .added {
    color: #fff;
}
.btn-add-to-cart.checkout .added i {
    margin-right: 4px;
}
/* While the remove request is in flight the host code disables the
   button — make the disabled green stay readable. */
.btn-add-to-cart.checkout:disabled {
    opacity: .75;
    cursor: progress;
}

/* ── Domain register page hero ───────────────────────────────────
   /cart.php?a=add&domain=register

   Stock orderform paints .domain-checker-container with a yellow
   gradient + a /img/globe.png in the background. Replace with the
   AEserver hero pattern: light card on the page bg, big rounded
   pill search, brand-red CTA — mirrors the .aeds-page-hero style
   used on the marketing site. */

#order-standard_cart .domain-checker-container {
    background: transparent !important;
    background-image: none !important;
    margin: 0 0 28px;
    padding: 0;
    border-radius: 0;
}
#order-standard_cart .domain-checker-bg {
    margin: 0;
    padding: 36px 28px;
    background: #fff;
    background-image: none !important;
    border: 1px solid var(--ae-border, #E8E4DE);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 12px 32px -10px rgba(15, 26, 46, .12);
}
@media (max-width: 992px) {
    #order-standard_cart .domain-checker-bg {
        padding: 24px 18px;
    }
}

/* The page intro paragraph — bigger and centred, like the hero
   subtitle on the main site. */
#order-standard_cart > .row > .cart-body > p:first-of-type {
    text-align: center;
    color: var(--ae-ink-soft, #4A5568);
    font-size: 16px;
    line-height: 1.55;
    max-width: 680px;
    margin: 0 auto 24px;
}
/* The page H1 — match the AEserver hero scale */
#order-standard_cart .header-lined h1.font-size-36 {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ae-ink, #0F1A2E);
    margin: 0 auto 16px;
    line-height: 1.1;
    max-width: 820px;
    border-bottom: 0;
    padding-bottom: 0;
}
@media (max-width: 640px) {
    #order-standard_cart .header-lined h1.font-size-36 {
        font-size: 32px;
        letter-spacing: -1px;
    }
}

/* Search pill — replace the chunky white box with a clean, large
   rounded pill that matches the marketing hero. */
#order-standard_cart .domain-checker-container .input-group-box {
    background: #fff;
    border: 1px solid var(--ae-border-strong, #D4CDC4);
    border-radius: 16px;
    padding: 7px;
    max-width: 720px;
    margin: 0 auto;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 12px 32px -10px rgba(15, 26, 46, .12);
    display: flex;
    align-items: stretch;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#order-standard_cart .domain-checker-container .input-group-box:focus-within {
    border-color: var(--ae-ink, #0F1A2E);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 18px 40px -12px rgba(15, 26, 46, .22);
}
#order-standard_cart .domain-checker-container .input-group-box .form-control {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 14px 18px !important;
    font-size: 17px !important;
    font-weight: 500;
    height: auto;
    flex: 1 1 auto;
    min-width: 0;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn,
#order-standard_cart .domain-checker-container .input-group-box .input-group-append {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
#order-standard_cart .domain-checker-container .input-group-box .btn-primary {
    background: var(--ae-primary, #c8102e) !important;
    border-color: var(--ae-primary, #c8102e) !important;
    color: #fff !important;
    border-radius: 11px !important;
    padding: 0 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    height: auto !important;
    width: auto !important;
    min-width: 100px;
    margin: 0 !important;
}
#order-standard_cart .domain-checker-container .input-group-box .btn-primary:hover {
    background: var(--ae-primary-dark, #a40d24) !important;
    border-color: var(--ae-primary-dark, #a40d24) !important;
}

/* Mobile-only CTA row under the search pill: Search (red) + Transfer
   (dark) side-by-side, mirroring the homepage hero pattern. The inline
   Search inside the pill is hidden on mobile via Bootstrap's d-sm-flex
   so the input fills the pill, and this row sits below as a 50/50 pair. */
@media (max-width: 575.98px) {
    .ae-domain-mobile-cta {
        display: flex !important;
        gap: 8px;
        margin: 12px 0 0 !important;
    }
    .ae-domain-mobile-cta > .col-6 {
        flex: 1 1 0 !important;
        max-width: 50% !important;
        padding: 0 !important;
    }
    .ae-domain-mobile-cta .btn,
    .ae-domain-mobile-cta .btn-block {
        width: 100%;
        height: 48px;
        padding: 0 12px;
        line-height: 48px;
        border-radius: 11px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .3px;
        margin: 0;
    }
    /* Dark Transfer button — same dark-ink chrome the homepage hero uses. */
    .ae-domain-mobile-cta .ae-btn-transfer {
        background: var(--ae-ink, #0F1A2E);
        border: 1px solid var(--ae-ink, #0F1A2E);
        color: #fff;
    }
    .ae-domain-mobile-cta .ae-btn-transfer:hover,
    .ae-domain-mobile-cta .ae-btn-transfer:focus,
    .ae-domain-mobile-cta .ae-btn-transfer:active {
        background: #000;
        border-color: #000;
        color: #fff;
        text-decoration: none;
    }
}

/* Result line ("…is available", "$15.00 USD  Add to Cart") */
#order-standard_cart .domain-checker-result-headline {
    margin: 32px auto 24px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--ae-ink, #0F1A2E);
}
#order-standard_cart .domain-checker-available {
    color: #16a34a;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    line-height: 1.2;
}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: var(--ae-primary, #c8102e);
    font-weight: 700;
}
#order-standard_cart .domain-checker-result-headline .domain-price {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ae-ink, #0F1A2E);
}
#order-standard_cart .domain-checker-result-headline .domain-price .price {
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink, #0F1A2E);
    letter-spacing: -.01em;
}
#order-standard_cart .domain-checker-result-headline .btn-add-to-cart {
    border-radius: 10px;
    padding: 11px 22px;
    font-weight: 700;
    font-size: 14px;
}

/* Promo boxes ("Add Web Hosting", "Transfer your domain to us")
   Grid layout matches the reference: icon on the left, title +
   subtitle stacked beside it across the top row; description on
   the left and CTA button on the right of a second row. Colors
   stay strictly brand-red. */
#order-standard_cart .domain-promo-box {
    background: #fff;
    border: 1px solid var(--ae-border, #E8E4DE);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 20px;
    align-items: center;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#order-standard_cart .domain-promo-box:hover {
    transform: translateY(-2px);
    border-color: var(--ae-border-strong, #D4CDC4);
    box-shadow: 0 12px 32px -10px rgba(15, 26, 46, .16);
}

/* Top row — full width — contains icon + title-block as a nested grid */
#order-standard_cart .domain-promo-box > .clearfix {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 4px;
    align-items: center;
}
#order-standard_cart .domain-promo-box > .clearfix > i.fas {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 36px !important;
    color: var(--ae-primary, #c8102e);
    width: auto;
    height: auto;
}
#order-standard_cart .domain-promo-box > .clearfix > h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink, #0F1A2E);
    letter-spacing: -.005em;
    line-height: 1.2;
    white-space: normal;
}
#order-standard_cart .domain-promo-box > .clearfix > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: var(--ae-ink-soft, #4A5568);
    font-size: 14px;
    line-height: 1.5;
}
#order-standard_cart .domain-promo-box > .clearfix > p.font-bold {
    color: var(--ae-primary, #c8102e) !important;
    font-weight: 600;
}

/* Bottom row — description on the left + button on the right.
   Both items pinned to grid-row: 2 because grid auto-placement
   doesn't backfill: when source order is btn → p (Transfer card),
   the btn lands at row2 col2 and p auto-flows to row3 col1
   instead of returning to row2 col1. Explicit row:2 fixes that. */
#order-standard_cart .domain-promo-box > p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: var(--ae-ink-soft, #4A5568);
    font-size: 14px;
    line-height: 1.55;
    align-self: center;
}
#order-standard_cart .domain-promo-box > p.small {
    font-size: 12px;
    color: var(--ae-ink-faded, #8E97A8);
}
#order-standard_cart .domain-promo-box > .btn,
#order-standard_cart .domain-promo-box > a.btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    background: var(--ae-primary, #c8102e) !important;
    border-color: var(--ae-primary, #c8102e) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    white-space: nowrap;
}
#order-standard_cart .domain-promo-box > .btn:hover,
#order-standard_cart .domain-promo-box > a.btn:hover {
    background: var(--ae-primary-dark, #a40d24) !important;
    border-color: var(--ae-primary-dark, #a40d24) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* Mobile — stack into one column */
@media (max-width: 575px) {
    #order-standard_cart .domain-promo-box {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
    }
    #order-standard_cart .domain-promo-box > .btn,
    #order-standard_cart .domain-promo-box > a.btn {
        grid-column: 1;
        justify-self: stretch;
        text-align: center;
    }
}

/* "Powered by" branding link at the bottom of cart pages — hide
   alongside the theme-level rule (the orderform wraps it differently
   here). */
#order-standard_cart ~ p[style*="text-align"]:has(a[href*="whmcs"]),
.cart-body > p[style*="text-align"]:has(a[href*="whmcs"]) {
    display: none !important;
}

/* ── Products page (cart.php?gid=N) — product cards ──────────────
   Matches the AEserver hero/card style: white card with brand border,
   bold title, muted description, brand-red Order Now button,
   hover lift. Replaces the dim Bootstrap card with green
   .btn-success default. */

#order-standard_cart .header-lined h1.font-size-36 + p,
#order-standard_cart .header-lined > p {
    color: var(--ae-ink-soft);
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 720px;
}

#order-standard_cart .products .row.row-eq-height {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
#order-standard_cart .products .row.row-eq-height > [class*="col-"] {
    padding: 0 10px;
    margin-bottom: 20px;
    display: flex;
}

#order-standard_cart .products .product {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-top: 4px solid var(--ae-primary);
    border-radius: var(--ae-radius-md);
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#order-standard_cart .products .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -12px rgba(15, 26, 46, .2);
    border-color: var(--ae-border-strong);
    border-top-color: var(--ae-primary);
}

/* Header band — title only, brand-aligned */
#order-standard_cart .products .product > header {
    background: linear-gradient(to bottom, #fff 0%, #fafaf8 100%);
    border-bottom: 1px solid var(--ae-border);
    padding: 22px 24px 18px;
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#order-standard_cart .products .product > header .qty {
    font-size: 12px;
    font-weight: 600;
    color: var(--ae-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--ae-primary-tint);
    color: var(--ae-primary);
    padding: 4px 10px;
    border-radius: 100px;
    flex-shrink: 0;
}

/* Body — description + features.
   Override the orderform vendor's all.min.css rule that sets
   width:60% + float:left + font-size:.8em on div.product-desc, which
   squeezed our text into 60% of the card and forced premature wraps
   ("Free SSL (https" / "Security)" on its own line, etc.).
   The vendor's selector is `div.product-desc` (specificity 1,3,1) so
   we must include `div` here too — bare `.product-desc` (1,3,0) loses. */
#order-standard_cart .products .product div.product-desc {
    width: 100%;
    float: none;
    padding: 22px;
    flex: 1 1 auto;
    color: var(--ae-ink-soft);
    font-size: 14px;
    line-height: 1.55;
}
/* Description block (.featuresdesc) — comes from the WHMCS admin's
   "Product Description" HTML field. Renders as <p> with
   <strong>VALUE</strong> LABEL pairs separated by <br>. Each
   <strong> gets a clean red-stroke checkmark and brand-red colour,
   mirroring the .product-info pattern in the configurator. */
#order-standard_cart .products .product .product-desc p {
    margin: 0;
    color: var(--ae-ink);
    font-size: 15px;
    line-height: 2;
}
#order-standard_cart .products .product .product-desc p strong {
    color: var(--ae-primary);
    font-weight: 800;
    margin-right: 4px;
}
#order-standard_cart .products .product .product-desc p strong::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23c8102e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
#order-standard_cart .products .product .product-desc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#order-standard_cart .products .product .product-desc ul li {
    position: relative;
    padding: 9px 0 9px 24px;
    font-size: 15px;
    color: var(--ae-ink);
    line-height: 1.6;
    border-radius: 6px;
    transition: background .15s ease, transform .15s ease, padding .15s ease;
}
#order-standard_cart .products .product .product-desc ul li:hover {
    background: rgba(200, 16, 46, .045);
    transform: translateX(2px);
}
#order-standard_cart .products .product .product-desc ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23c8102e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    border-radius: 0;
}
#order-standard_cart .products .product .product-desc ul li .feature-value {
    font-weight: 800;
    color: var(--ae-primary);
    margin-right: 4px;
}

/* Footer — pricing + Order Now */
#order-standard_cart .products .product > footer {
    border-top: 1px solid #f0ece5;
    padding: 22px 24px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
#order-standard_cart .products .product .product-pricing {
    text-align: left;
    color: var(--ae-ink-soft);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}
#order-standard_cart .products .product .product-pricing .price {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    margin: 6px 0 4px;
}
#order-standard_cart .products .product .product-pricing small {
    font-size: 11px;
    color: var(--ae-ink-faded);
}

/* Order Now button — brand red, replaces green .btn-success */
#order-standard_cart .products .btn-order-now,
#order-standard_cart .products .btn.btn-success.btn-order-now {
    background: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
    color: #fff !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
#order-standard_cart .products .btn-order-now:hover {
    background: var(--ae-primary-dark) !important;
    border-color: var(--ae-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* Mobile — products stack */
@media (max-width: 767px) {
    #order-standard_cart .products .row.row-eq-height > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Configure product domain step (Choose a Domain…) ────────────
   cart.php?a=add&pid=N → configureproductdomain.tpl. Three radio
   options (Register / Transfer / Use existing) each wrapped in an
   .option box with a hidden form that expands when its radio is
   checked. Stock orderform paints these with a flat #f8f8f8 fill
   and uses iCheck sprite-blue radios — re-skin to brand cards
   with custom red radios. */

#order-standard_cart .domain-selection-options {
    margin: 8px 0 18px;
}

#order-standard_cart .domain-selection-options .option {
    background: #fff !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-md) !important;
    margin: 0 0 10px !important;
    padding: 0 22px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#order-standard_cart .domain-selection-options .option:hover {
    border-color: var(--ae-border-strong) !important;
}
#order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked),
#order-standard_cart .domain-selection-options .option-selected {
    border-color: var(--ae-primary) !important;
    background: var(--ae-primary-tint) !important;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .06);
}

/* Hide iCheck plugin's sprite wrapper — we'll use a custom-drawn
   native radio that's brand-coloured. */
#order-standard_cart .domain-selection-options .iradio_square-blue,
#order-standard_cart .domain-selection-options .iradio_square-green,
#order-standard_cart .domain-selection-options [class*="iradio_"] {
    display: none !important;
}

#order-standard_cart .domain-selection-options .option > label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0 !important;
    padding: 16px 28px 16px 0 !important; /* room for the chevron on right */
    font-weight: 600;
    color: var(--ae-ink);
    font-size: 15px;
    width: 100%;
    position: relative;
}
/* Chevron at the end of the label — flips when expanded so it's
   clear the row is a collapsible toggle. */
#order-standard_cart .domain-selection-options .option > label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238E97A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        center / contain no-repeat;
    transition: transform .2s ease, opacity .2s ease;
    opacity: .7;
}
#order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked) > label::after,
#order-standard_cart .domain-selection-options .option-selected > label::after {
    transform: rotate(180deg);
    opacity: 1;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23c8102e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#order-standard_cart .domain-selection-options .option-selected > label {
    font-weight: 700;
}
#order-standard_cart .domain-selection-options .option > label input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    border: 2px solid var(--ae-border-strong);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s ease, background .15s ease;
}
#order-standard_cart .domain-selection-options .option > label input[type="radio"]:checked {
    border-color: var(--ae-primary);
    background: var(--ae-primary);
}
#order-standard_cart .domain-selection-options .option > label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

/* Hidden form inside each option — indent under the label */
#order-standard_cart .domain-input-group {
    padding: 0 0 18px 34px;
    margin: 0 !important;
}

/* Flatten Bootstrap col-* nest into a single flex row so
     [www. + input] [.ae] [Check]
   sits on one line. Outer row: main column (flex:1) + button
   column (fixed 140px). Inner row: input (flex:1) + TLD (130px). */
#order-standard_cart .domain-input-group > .row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
}
#order-standard_cart .domain-input-group > .row > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    flex-basis: auto;
    min-width: 0;
}
#order-standard_cart .domain-input-group > .row > .col-sm-8 {
    flex: 1 1 auto;
}
#order-standard_cart .domain-input-group > .row > .col-sm-2 {
    flex: 0 0 140px;
}

#order-standard_cart .domain-input-group .domains-row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
}
#order-standard_cart .domain-input-group .domains-row > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    flex-basis: auto;
    min-width: 0;
}
#order-standard_cart .domain-input-group .domains-row > .col-xs-9,
#order-standard_cart .domain-input-group .domains-row > .col-9 {
    flex: 1 1 auto;
}
#order-standard_cart .domain-input-group .domains-row > .col-xs-3,
#order-standard_cart .domain-input-group .domains-row > .col-3 {
    flex: 0 0 130px;
}

/* The .input-group inside the input column needs full width to
   fill its flex column. */
#order-standard_cart .domain-input-group .col-xs-9 > .input-group,
#order-standard_cart .domain-input-group .col-9 > .input-group {
    width: 100%;
    display: flex;
    align-items: stretch;
}
#order-standard_cart .domain-input-group .col-xs-9 > .input-group > .form-control,
#order-standard_cart .domain-input-group .col-9 > .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%; /* lets it shrink properly inside flex */
    min-width: 0;
}
#order-standard_cart .domain-input-group .col-xs-9 > .input-group > .input-group-prepend,
#order-standard_cart .domain-input-group .col-xs-9 > .input-group > .input-group-addon,
#order-standard_cart .domain-input-group .col-9 > .input-group > .input-group-prepend,
#order-standard_cart .domain-input-group .col-9 > .input-group > .input-group-addon {
    flex: 0 0 auto;
}

/* Button takes full height of its column, full width of the 140px slot. */
#order-standard_cart .domain-input-group .col-sm-2 > .btn,
#order-standard_cart .domain-input-group .col-sm-2 > .btn.btn-block {
    width: 100% !important;
    height: 100%;
    min-height: 44px;
    margin: 0 !important;
}
#order-standard_cart .domain-input-group .input-group {
    background: #fff;
    border: 1px solid var(--ae-border-strong);
    border-radius: var(--ae-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart .domain-input-group .input-group:focus-within {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend {
    background: #fafaf8 !important;
    border: 0 !important;
    color: var(--ae-ink-soft);
    display: flex;
    align-items: center;
    padding: 0;
}
#order-standard_cart .domain-input-group .input-group-text {
    background: transparent !important;
    border: 0 !important;
    color: var(--ae-ink-soft);
    font-weight: 500;
    padding: 0 16px;
    font-size: 14px;
}
#order-standard_cart .domain-input-group .input-group .form-control {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 12px 14px !important;
    font-size: 15px;
    height: auto;
}

/* TLD select + own-domain TLD input */
#order-standard_cart .domain-input-group select.form-control,
#order-standard_cart .domain-input-group input.form-control:not(.input-group .form-control) {
    border: 1px solid var(--ae-border-strong) !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 12px 14px !important;
    font-size: 15px;
    background-color: #fff !important;
    height: auto;
}

/* Check / Transfer / Use buttons */
#order-standard_cart .domain-input-group .btn-primary,
#order-standard_cart .domain-input-group .btn.btn-block {
    background: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
    color: #fff !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: 100%;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    white-space: nowrap;
}
#order-standard_cart .domain-input-group .btn-primary:hover {
    background: var(--ae-primary-dark) !important;
    border-color: var(--ae-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* "* Free Domain Registration applies to…" footnote */
#order-standard_cart #frmProductDomain > p {
    font-size: 12.5px;
    color: var(--ae-ink-soft);
    margin: 16px 0 0;
}
#order-standard_cart #frmProductDomain > p em {
    font-style: normal;
    color: var(--ae-ink);
    font-weight: 600;
}

/* ── Spotlight TLD cards (under the search on Choose Domain) ─────
   Three-up grid of suggested TLDs (.com / .qa / .ae etc.) with a
   price + Add button. Re-skinned to match the AEserver card style:
   white card + brand border + hover lift + brand-red Add toggle. */
#order-standard_cart .spotlight-tlds {
    margin: 18px 0;
}
#order-standard_cart .spotlight-tlds-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}
#order-standard_cart .spotlight-tld-container {
    padding: 0;
    flex: 1 1 calc((100% - 24px) / 3);
    min-width: 200px;
}
#order-standard_cart .spotlight-tld-container.spotlight-tld-container-1 { flex-basis: 100%; }
#order-standard_cart .spotlight-tld-container.spotlight-tld-container-2 { flex-basis: calc((100% - 12px) / 2); }
#order-standard_cart .spotlight-tld-container.spotlight-tld-container-4 { flex-basis: calc((100% - 36px) / 4); }

#order-standard_cart .spotlight-tld {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
    padding: 18px 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--ae-primary);
    letter-spacing: -.005em;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    height: 100%;
    min-height: 130px;
}
#order-standard_cart .spotlight-tld:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgba(15, 26, 46, .16);
    border-color: var(--ae-border-strong);
}

/* Optional sales-group label (HOT/NEW/SALE) above the TLD */
#order-standard_cart .spotlight-tld [class*="spotlight-tld-"] {
    background: var(--ae-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    align-self: center;
    margin-bottom: 4px;
}

/* Price */
#order-standard_cart .spotlight-tld .available.price,
#order-standard_cart .spotlight-tld .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--ae-ink);
    letter-spacing: -.005em;
    margin: 4px 0;
}

/* Add to cart button — brand red in default state. The .checkout
   ("In cart") state inherits the green pill from the global
   .btn-add-to-cart.checkout rule above; we just need to keep this
   spotlight-only override out of its way via :not(.checkout). */
#order-standard_cart .spotlight-tld .btn-add-to-cart:not(.checkout) {
    background: var(--ae-primary) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: 100%;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
    margin-top: auto;
}
#order-standard_cart .spotlight-tld .btn-add-to-cart.checkout {
    /* Match the layout of the default rule above (width / radius /
       padding) but keep the green colours from the global checkout rule. */
    border: 0 !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: 100%;
    margin-top: auto;
}
#order-standard_cart .spotlight-tld .btn-add-to-cart:hover:not(.checkout) {
    background: var(--ae-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* Unavailable / invalid pills */
#order-standard_cart .spotlight-tld .btn.unavailable,
#order-standard_cart .spotlight-tld .btn.invalid {
    background: #f3f4f6 !important;
    color: var(--ae-ink-faded) !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 10px 16px !important;
    width: 100%;
    cursor: not-allowed;
    margin-top: auto;
}

/* Contact Support button — dark ink */
#order-standard_cart .spotlight-tld .btn.domain-contact-support {
    background: var(--ae-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    width: 100%;
    margin-top: auto;
}

/* Loading spinner row spacing */
#order-standard_cart .spotlight-tld .domain-lookup-spotlight-loader {
    color: var(--ae-ink-faded);
    font-size: 14px;
}

/* Mobile — 2-up then 1-up */
@media (max-width: 768px) {
    #order-standard_cart .spotlight-tld-container,
    #order-standard_cart .spotlight-tld-container.spotlight-tld-container-3,
    #order-standard_cart .spotlight-tld-container.spotlight-tld-container-4 {
        flex-basis: calc((100% - 12px) / 2);
    }
}

/* ── Configurable Options as cards ───────────────────────────────
   .product-configurable-options has a list of <label> radio rows
   ("Dubai $40.00 USD" etc.). Re-skinned to match the brand card
   pattern: each option is a card, active state is brand-red border
   + tint, custom radio dot replaces the iCheck sprite. */

/* Override Bootstrap's col-sm-6 split: each form-group takes the
   full content width on its own row, options inside flow as a
   horizontal grid of equal-width cards. */
#order-standard_cart .product-configurable-options > .row {
    margin: 0;
}
#order-standard_cart .product-configurable-options > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 16px;
}

#order-standard_cart .product-configurable-options .form-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    #order-standard_cart .product-configurable-options .form-group {
        grid-template-columns: 1fr;
    }
}

/* Title label (the field name e.g. "Server Location") spans the row */
#order-standard_cart .product-configurable-options .form-group > label[for] {
    grid-column: 1 / -1;
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ae-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 4px;
    padding: 0;
}

/* The orderform interleaves <br> tags between options — they break
   our grid, hide them. */
#order-standard_cart .product-configurable-options .form-group > br {
    display: none;
}

/* Option label as a card (any <label> without `for=`) */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    padding: 14px 16px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--ae-ink);
    font-size: 14px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#order-standard_cart .product-configurable-options .form-group > label:not([for]):hover {
    border-color: var(--ae-border-strong);
}
#order-standard_cart .product-configurable-options .form-group > label:not([for]):has(input[type="radio"]:checked) {
    border-color: var(--ae-primary);
    background: var(--ae-primary-tint);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .06);
}

/* iCheck sprite wrapper: display:contents drops it from layout but
   keeps the <input> as a flex child of the <label>. Hide the
   <ins class="iCheck-helper"> overlay separately. */
#order-standard_cart .product-configurable-options [class*="iradio_"] {
    display: contents !important;
}
#order-standard_cart .product-configurable-options .iCheck-helper {
    display: none !important;
}

/* Native radio styled to brand. Inline styles from iCheck (position:
   absolute; top:-20%; opacity:0; …) need !important to defeat. */
#order-standard_cart .product-configurable-options input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 2px solid var(--ae-border-strong) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    transition: border-color .15s ease, background .15s ease;
}
#order-standard_cart .product-configurable-options input[type="radio"]:checked {
    border-color: var(--ae-primary) !important;
    background: var(--ae-primary) !important;
}
#order-standard_cart .product-configurable-options input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

/* Select dropdown variant (e.g. "Test Only") — keep flat full-width
   below its title, with brand chrome. */
#order-standard_cart .product-configurable-options .form-group:has(> select) {
    grid-template-columns: 1fr;
}
#order-standard_cart .product-configurable-options .form-group > select.form-control {
    border: 1px solid var(--ae-border-strong) !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 12px 16px !important;
    background-color: #fff !important;
    font-size: 14px;
    height: auto;
}

/* ── Billing cycle radio cards (configureproduct.tpl) ────────────
   Replaced the stock <select> with a grid of radio cards. The
   original <select id="inputBillingcycle"> is kept hidden so
   orderform JS / form submission still see the value; clicks on
   the cards mirror the value into it. */
#order-standard_cart .billing-cycle-field .form-group > label[for="inputBillingcycle"] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ae-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
}
#order-standard_cart .billing-cycle-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
#order-standard_cart .billing-cycle-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 14px 16px 14px 50px; /* left padding reserves the radio dot */
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#order-standard_cart .billing-cycle-option:hover {
    border-color: var(--ae-border-strong);
}
#order-standard_cart .billing-cycle-option:has(input[type="radio"]:checked) {
    border-color: var(--ae-primary);
    background: var(--ae-primary-tint);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .06);
}

/* iCheck plugin auto-wraps every <input type=radio> on page load
   into <div class="iradio_square-blue"> with a sprite overlay.
   display:contents drops the wrapper from layout so our absolutely-
   positioned native input shows through. .iCheck-helper overlay is
   hidden separately. Same pattern as .product-configurable-options. */
#order-standard_cart .billing-cycle-options [class*="iradio_"] {
    display: contents !important;
}
#order-standard_cart .billing-cycle-options .iCheck-helper {
    display: none !important;
}

/* Custom radio dot — absolutely positioned on the left of the card.
   !important on every layout property because iCheck slaps inline
   styles (position:absolute, top:-20%, opacity:0, etc.) on the
   <input> when wrapping. */
#order-standard_cart .billing-cycle-option input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--ae-border-strong) !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: border-color .15s ease, background .15s ease;
}
#order-standard_cart .billing-cycle-option input[type="radio"]:checked {
    border-color: var(--ae-primary) !important;
    background: var(--ae-primary) !important;
}
#order-standard_cart .billing-cycle-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

/* Card text */
#order-standard_cart .billing-cycle-option .billing-cycle-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ae-ink);
    letter-spacing: -.005em;
    line-height: 1.3;
}
#order-standard_cart .billing-cycle-option .billing-cycle-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--ae-ink-soft);
    line-height: 1.3;
}

@media (max-width: 480px) {
    #order-standard_cart .billing-cycle-options {
        grid-template-columns: 1fr;
    }
}

/* ── Product info card on configureproduct.tpl ───────────────────
   <div class="product-info">
     <p class="product-title">Standard WP Plan</p>
     <p>
       <strong>3 Websites</strong> <br>
       <strong>Free Domain</strong> for 1 year on annual or longer plans<br>
       …
     </p>
   </div>
   Each feature line starts with <strong>VALUE</strong>; description
   text follows up to the next <br>. Renders as a clean feature card
   with brand-red highlights. */

#order-standard_cart .product-info {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    box-shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 4px 16px rgba(15, 17, 21, .04);
    padding: 24px 28px;
    margin: 0 0 24px;
}

#order-standard_cart .product-info .product-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    margin: 0 0 14px;
    line-height: 1.2;
}

#order-standard_cart .product-info > p:not(.product-title) {
    margin: 0;
    font-size: 14.5px;
    color: var(--ae-ink-soft);
    line-height: 2.1;            /* generous gap between lines */
}
/* Brand-red checkmark before each <strong> highlight.
   inline-block with vertical-align:middle keeps it centred on the
   text x-height; the strong itself stays default inline so its
   baseline matches the surrounding description text. */
#order-standard_cart .product-info > p:not(.product-title) strong {
    color: var(--ae-primary);
    font-weight: 800;
    margin-right: 4px;
}
#order-standard_cart .product-info > p:not(.product-title) strong::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--ae-primary)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        center / 11px 11px no-repeat;
    border-radius: 50%;
}
@media (max-width: 480px) {
    #order-standard_cart .spotlight-tld-container,
    #order-standard_cart .spotlight-tld-container.spotlight-tld-container-3,
    #order-standard_cart .spotlight-tld-container.spotlight-tld-container-4 {
        flex-basis: 100%;
    }
}

/* Mobile — stack the input + tld + button vertically */
@media (max-width: 575px) {
    #order-standard_cart .domain-input-group {
        padding-left: 0;
    }
    #order-standard_cart .domain-input-group > .row {
        flex-wrap: wrap;
    }
    #order-standard_cart .domain-input-group > .row > .col-sm-2 {
        flex: 0 0 100%;
    }
    #order-standard_cart .domain-input-group .domains-row {
        flex-wrap: wrap;
    }
    #order-standard_cart .domain-input-group .domains-row > .col-xs-9,
    #order-standard_cart .domain-input-group .domains-row > .col-9 {
        flex: 1 1 100%;
    }
    #order-standard_cart .domain-input-group .domains-row > .col-xs-3,
    #order-standard_cart .domain-input-group .domains-row > .col-3 {
        flex: 0 0 100%;
    }
}

/* ── Merged page: cart-items + form on left, sticky Order Summary on right ── */
/* Stock all.css uses float:left + float:right on the two columns, which
   prevents position:sticky from working on the sidebar (sticky needs
   the container to provide a scrolling context — floated children
   don't share one). Switch the row to flexbox at >=992px, kill the
   floats, then sticky the sidebar at the top of the viewport. */
@media (min-width: 992px) {
    #order-standard_cart .ae-checkout-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #order-standard_cart .ae-checkout-row > .secondary-cart-body,
    #order-standard_cart .ae-checkout-row > .secondary-cart-sidebar {
        float: none !important;
    }
    #order-standard_cart .ae-checkout-row > .secondary-cart-sidebar {
        position: sticky;
        top: 24px;
        align-self: flex-start;
    }
}

/* On the merged page the Checkout button inside the Order Summary
   duplicates the Complete Order button that's now in the main form
   — hide it. Also drop the &laquo;Continue Shopping&raquo; arrow,
   it now lives below as a plain link. */
#order-standard_cart .order-summary .btn-checkout {
    display: none !important;
}
/* The <br> after the (now hidden) Checkout button leaves a stray
   blank line — collapse it. */
#order-standard_cart .order-summary .text-right > br {
    display: none;
}

/* "Empty Cart" button on the merged checkout page (cart-items.tpl).
   Style it to match the drawer's empty-cart button — subtle ghost
   pill that flips brand-red on hover. */
#order-standard_cart .empty-cart {
    text-align: right;
    margin: 8px 0 24px;
}
#order-standard_cart .empty-cart .btn[id="btnEmptyCart"],
#order-standard_cart .secondary-cart-body .btn[id="btnEmptyCart"] {
    background: transparent !important;
    border: 1px solid var(--ae-border) !important;
    color: var(--ae-ink-faded) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: var(--ae-radius-sm) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s, border-color .15s, background .15s;
}
#order-standard_cart .empty-cart .btn[id="btnEmptyCart"]:hover,
#order-standard_cart .secondary-cart-body .btn[id="btnEmptyCart"]:hover {
    background: rgba(200, 16, 46, .08) !important;
    border-color: var(--ae-primary) !important;
    color: var(--ae-primary) !important;
}
#order-standard_cart .empty-cart .btn[id="btnEmptyCart"] i {
    font-size: 12px;
}

/* ── Domains Configuration step (cart.php?a=confdomains, Path B) ──
   Stock confdomains is a flat list of right-aligned labels and bare
   inputs. Brand version: each domain that needs registry input is a
   card with a globe-icon header and clean form rows underneath.
   See configuredomains.tpl for markup. */
.ae-confdomains {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 0 48px;
}

.ae-confdomains-head {
    text-align: center;
    margin-bottom: 32px;
}

.ae-confdomains-head h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    margin: 0 0 12px;
}

.ae-confdomains-head p {
    font-size: 15px;
    color: var(--ae-ink-faded);
    line-height: 1.55;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Per-domain card — same visual language as the product-listing cards
   on cart.php?gid=N: 4px brand-red strip across the top, white card
   chrome with a soft shadow, light-gradient header band, and a big
   bold domain name so each card reads as a deliberate product
   showcase rather than a generic form. */
.ae-confdomains-card {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-top: 4px solid var(--ae-primary);
    border-radius: var(--ae-radius-md);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 4px 16px rgba(15,17,21,.04);
}

.ae-confdomains-card-head {
    background: linear-gradient(to bottom, #fff 0%, #fafaf8 100%);
    color: var(--ae-ink);
    padding: 22px 24px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    border-bottom: 1px solid var(--ae-border);
}

.ae-confdomains-card-head i {
    color: var(--ae-primary);
    font-size: 20px;
}

.ae-confdomains-domain-name {
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
}

.ae-confdomains-card-body {
    padding: 24px 28px;
}

/* Form row: label on top, field below — clean and predictable */
.ae-confdomains-row {
    margin-bottom: 22px;
}

.ae-confdomains-row:last-child {
    margin-bottom: 0;
}

.ae-confdomains-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ae-ink-faded);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ae-confdomains-field .form-control,
.ae-confdomains-field input[type="text"]:not([type="checkbox"]):not([type="radio"]),
.ae-confdomains-field select {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-sm);
    font-size: 14px;
    color: var(--ae-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.ae-confdomains-field .form-control:focus,
.ae-confdomains-field input:focus,
.ae-confdomains-field select:focus {
    outline: none;
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

/* WHMCS wraps every checkbox/radio in an iCheck plugin
   <div class="icheckbox_square-blue"> with a faded blue PNG sprite.
   We skin the WRAPPER itself (not the input) — pseudo-elements like
   ::after don't work on replaced <input> elements, so the wrapper
   div is what carries the visible 22px checkbox + the white check.
   iCheck's JS toggles a .checked class on the wrapper when the user
   taps it (via the .iCheck-helper overlay), giving us a reliable
   hook for the checked state. The native input stays hidden by
   iCheck's own inline styles — we just don't override them. */
.ae-confdomains-field [class*="icheckbox_"],
.ae-confdomains-field [class*="iradio_"] {
    /* Override iCheck's blue sprite background and force a clean
       22px rounded square. !important everywhere because iCheck
       writes inline styles on this wrapper. */
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--ae-ink-soft) !important;
    border-radius: 5px !important;
    background: #fff none !important;
    position: relative !important;
    cursor: pointer;
    vertical-align: middle !important;
    flex-shrink: 0;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ae-confdomains-field [class*="icheckbox_"]:hover {
    border-color: var(--ae-primary) !important;
}
/* iCheck adds .checked to the wrapper when the box is on */
.ae-confdomains-field [class*="icheckbox_"].checked {
    border-color: var(--ae-primary) !important;
    background: var(--ae-primary) none !important;
}
.ae-confdomains-field [class*="icheckbox_"].checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 11px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(45deg);
}
/* The .iCheck-helper overlay is iCheck's invisible click target —
   keep it on so taps actually toggle the box. */
.ae-confdomains-field .iCheck-helper {
    display: block !important;
}

.ae-confdomains-field {
    font-size: 14px;
    color: var(--ae-ink);
    line-height: 1.6;
}

/* Agreement callout — when a field contains a checkbox confirmation
   (CRA Qatar Agreement, registry T&Cs etc.) wrap the whole thing in
   an amber alert-style box so users actually notice it before tapping
   Continue. The dense legal prose is scaled down to 12.5px so it
   doesn't dominate the page; the checkbox + immediate label stay at
   13.5px so the call-to-action remains readable.
   Flex column (natural order) keeps WHMCS's paragraph blocks reading
   top-to-bottom; the CTA pill is given an explicit order:99 so it
   sits at the very bottom regardless of how many <p> blocks WHMCS
   emits. The iCheck wrapper sits as an absolute child so it can
   float over the CTA's left padding. */
.ae-confdomains-field:has(input[type="checkbox"]) {
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-left: 4px solid #f9a825;
    border-radius: var(--ae-radius-sm);
    padding: 16px 18px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ae-ink-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;     /* anchor for the absolutely-placed checkbox below */
}
/* The "Tick to confirm…" sentence right after the checkbox stays
   bold-ish on full ink so it reads as the primary call-to-action. */
.ae-confdomains-field:has(input[type="checkbox"]) > label,
.ae-confdomains-field:has(input[type="checkbox"]) input[type="checkbox"] + label {
    color: var(--ae-ink);
    font-weight: 600;
    font-size: 13.5px;
}
/* Any link inside the agreement (e.g. the CRA registry policy URL)
   gets the brand-red emphasis. */
.ae-confdomains-field:has(input[type="checkbox"]) a {
    color: var(--ae-primary);
    word-break: break-all;
}

/* Accept CTA — rendered in every field, only revealed in checkbox
   fields. With flex column-reverse on the parent the CTA (first in
   source) ends up VISUALLY LAST. The checkbox is positioned
   absolutely on top of its left padding so the two read as one
   integrated "[ ☐ ] I have read and accept the agreement above" pill. */
.ae-confdomains-accept-cta {
    display: none;
}
.ae-confdomains-field:has(input[type="checkbox"]) .ae-confdomains-accept-cta {
    display: block;
    order: 99;                         /* push to the bottom of the column */
    padding: 14px 14px 14px 52px;     /* left padding reserves room for the checkbox */
    background: #fff;
    border: 1px dashed #f9a825;
    border-radius: var(--ae-radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: #7c4d00;
    text-align: left;
    letter-spacing: .01em;
}
/* Lift the iCheck wrapper out of the flex flow and park it inside
   the CTA's left padding area — vertically centred against the CTA
   pill at the bottom of the callout. */
.ae-confdomains-field:has(input[type="checkbox"]) > [class*="icheckbox_"] {
    position: absolute !important;
    bottom: 27px;       /* aligns visual centre with the CTA's vertical centre */
    left: 30px;         /* inside the CTA's 52px left padding */
    z-index: 2;
}

.ae-confdomains-help {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ae-ink-faded);
    line-height: 1.5;
}

/* Optional paid addons row (DNS Management / Email Forwarding /
   ID Protection). Each is a clickable card-row with checkbox on the
   left, the addon name in the middle, the price tag on the right. */
.ae-confdomains-addons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.ae-confdomains-addons:last-child {
    margin-bottom: 0;
}

.ae-confdomains-addon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    margin: 0;
    font-weight: 500;
    color: var(--ae-ink);
}
.ae-confdomains-addon:hover {
    border-color: var(--ae-border-strong);
    background: #faf8f5;
}
.ae-confdomains-addon input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ae-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.ae-confdomains-addon:has(input[type="checkbox"]:checked) {
    border-color: var(--ae-primary);
    background: var(--ae-primary-tint);
    box-shadow: 0 0 0 1px var(--ae-primary) inset;
}
.ae-confdomains-addon-name {
    flex: 1;
    font-size: 14px;
}
.ae-confdomains-addon-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ae-primary);
    white-space: nowrap;
}

/* Continue button row */
.ae-confdomains-actions {
    text-align: center;
    margin-top: 32px;
}

/* Redirect screen shown when configuredomains.tpl auto-submits
   (no ID Protection / EPP / registry fields to ask about). */
.ae-confdomains-redirecting {
    text-align: center;
    padding: 80px 16px;
}
.ae-confdomains-redirecting-inner {
    display: inline-block;
    max-width: 480px;
}
.ae-confdomains-redirecting-inner > i.fa-spin {
    font-size: 36px;
    color: var(--ae-primary, #c8102e);
    margin-bottom: 18px;
}
.ae-confdomains-redirecting-inner h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    margin: 0 0 8px;
}
.ae-confdomains-redirecting-inner p {
    color: var(--ae-ink-soft, #4A5568);
    margin: 0 0 24px;
}
.ae-confdomains-redirecting-inner .btn {
    min-width: 220px;
    height: 48px;
    padding: 0 28px;
    background: var(--ae-primary, #c8102e) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ae-confdomains-redirecting-inner .btn:hover {
    background: var(--ae-primary-dark, #a40d24) !important;
}

.ae-confdomains-actions .btn {
    min-width: 220px;
    height: 52px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--ae-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ae-confdomains-actions .btn i {
    font-size: 18px;
}

@media (max-width: 600px) {
    .ae-confdomains {
        padding: 8px 12px 32px;
    }
    .ae-confdomains-head h1 {
        font-size: 26px;
    }
    .ae-confdomains-card-body {
        padding: 18px 16px;
    }
}

/* ── Checkout · "I agree to Terms of Service" checkbox ────────────
   Sits right under #creditCardInputFields with no breathing room and
   in a washed-out font. Give it air above, brighten the text and
   colour the link in brand red. */

.text-center > p:has(#accepttos) {
    margin-top: 28px;
    margin-bottom: 22px;
    padding-top: 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ae-ink, #0F1A2E);
}

label.checkbox-inline:has(#accepttos) {
    font-weight: 500;
    color: var(--ae-ink, #0F1A2E);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#accepttos {
    width: 18px;
    height: 18px;
    accent-color: var(--ae-primary, #c8102e);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

label.checkbox-inline:has(#accepttos) a {
    color: var(--ae-primary, #c8102e);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
label.checkbox-inline:has(#accepttos) a:hover {
    color: var(--ae-primary-dark, #a40d24);
}

/* ── Checkout · Stripe Elements layout ─────────────────────────────
   Make the WHMCS-generated Stripe block look like a proper aligned
   form (Card Number wide / Expiry / CVV in one row, G Pay centred
   above). Plain CSS only — overrides Bootstrap col widths on the
   outer wrappers and skins each .StripeElement as an input. */

/* Stretch the outer offset columns so the inner fields aren't
   squeezed into the middle third of the form. */
#stripeElements > .row > .col-md-4.col-md-offset-4,
#stripeElements > .row > .col-md-4.offset-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: center;
    margin-bottom: 16px;
    /* Match the cards row inset: .stripe-cards-inputs.col-md-8 is a
       stand-alone col so its 15px padding doesn't get cancelled by a
       row's negative margin and the cards sit 15px inset from the form
       edge. Add 15px on top of Bootstrap's default 15 so G Pay lines
       up with Card / Expiry / CVV below. */
    padding-left: 30px;
    padding-right: 30px;
}
#stripeElements #paymentRequestButton {
    max-width: 480px;
    margin: 0 auto;
}
/* Strip .StripeElement chrome only from the Pay Request Button so the
   dark wallet button (G Pay / Link) sits flush — no white frame. */
#stripeElements #paymentRequestButton.StripeElement {
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

#stripeElements > .stripe-cards-inputs.col-md-8.col-md-offset-2,
#stripeElements > .stripe-cards-inputs.col-md-8.offset-md-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* Each .StripeElement is a div Stripe injects an iframe into.
   Style it as a regular text input so all three boxes match. */
#stripeElements .StripeElement,
#stripeElements .form-control.StripeElement {
    height: 46px;
    padding: 13px 14px;
    border: 1px solid var(--ae-border-strong, #D4CDC4);
    border-radius: var(--ae-radius-sm, 10px);
    background: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#stripeElements .StripeElement--focus {
    border-color: var(--ae-primary, #c8102e);
    box-shadow: 0 0 0 3px var(--ae-primary-tint, rgba(200,16,46,.10));
}
#stripeElements .StripeElement--invalid {
    border-color: #c8102e;
}
#stripeElements .StripeElement--complete {
    border-color: #16a34a;
}

/* Clean compact labels above each cell — keep them on one line so
   "Expiry Date" doesn't wrap when the column is narrow. */
#stripeElements .stripe-cards-inputs label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ae-ink-soft, #4A5568);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card brand badge (#stripeCardType) sits below the card-number
   field — give it a fixed height so it doesn't shift the row. */
#stripeCardType {
    margin-top: 4px;
    min-height: 18px;
}
/* Hide the empty card-brand badge slot so it doesn't reserve 18px+4px
   below Card Number and inflate the gap before Expiry on mobile.
   When a brand <img> appears, :empty stops matching and min-height returns. */
#stripeCardType:empty {
    min-height: 0;
    margin-top: 0;
}
#stripeCardType img {
    height: 18px;
    width: auto;
}

/* Tighten the inner row gutter so cells sit at proper distance */
#stripeElements .stripe-cards-inputs > .row {
    margin-left: -8px;
    margin-right: -8px;
}
#stripeElements .stripe-cards-inputs > .row > [class^="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Mobile: Card Number on its own row, Expiry + CVV side-by-side below */
@media (max-width: 767px) {
    #stripeElements .stripe-cards-inputs > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }
    #stripeElements .stripe-cards-inputs > .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0;
    }
}

/* ── Name-for-card field (#inputDescription) ────────────────────
   Lives in #newCardSaveSettings, OUTSIDE #stripeElements, so the
   Stripe rules above don't reach it. WHMCS JS adds offset-md-3 to
   inputDescriptionContainer when the no-store toggle is hidden —
   override to full-width and skin the input + label so they match
   Card Number / Expiry / CVV cells (46px height, same border/radius,
   same compact label style). */
#newCardSaveSettings #inputDescriptionContainer {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    /* Match the cards row inset (extra 15px on top of Bootstrap's 15)
       so the name field aligns with Card / Expiry / CVV above. */
    padding-left: 30px !important;
    padding-right: 30px !important;
}
#newCardSaveSettings #inputDescriptionContainer .prepend-icon label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ae-ink-soft, #4A5568);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Pencil icon was removed from the template — reset the 44px left
   reserve and skin the input to match .StripeElement cells. */
#newCardSaveSettings #inputDescriptionContainer .prepend-icon .form-control,
#newCardSaveSettings #inputDescriptionContainer .prepend-icon .field {
    height: 46px !important;
    min-height: 46px;
    padding: 13px 14px !important;
    border: 1px solid var(--ae-border-strong, #D4CDC4) !important;
    border-radius: var(--ae-radius-sm, 10px) !important;
    background: #fff !important;
    box-shadow: none !important;
}
#newCardSaveSettings #inputDescriptionContainer .prepend-icon .form-control:focus,
#newCardSaveSettings #inputDescriptionContainer .prepend-icon .field:focus {
    border-color: var(--ae-primary, #c8102e) !important;
    box-shadow: 0 0 0 3px var(--ae-primary-tint, rgba(200,16,46,.10)) !important;
    outline: 0 !important;
}

/* ── Checkout: section cards ─────────────────────────────────────
   checkout.tpl wraps Personal Info / Billing / Custom Fields /
   Domain Registrant / Account Security / Payment / Notes in
   .ae-checkout-section. Each one renders as a white card with
   subtle border + shadow, left-aligned bold heading at the top,
   and inputs inside. */
#order-standard_cart .ae-checkout-section {
    background: #ebeae4;
    border: 0;
    border-radius: var(--ae-radius-md, 14px);
    box-shadow: none;
    padding: 10px 20px;
    margin-bottom: 14px;
}

/* Additional Information's custom-fields render without the
   .prepend-icon wrapper that Billing Address inputs have, so its
   inputs/selects come out shorter than the Billing controls and
   the card looks visually mismatched. Force the same 42px height
   to align them with Billing. Scoped to .field-container so this
   leaves textareas (Notes) and other blocks untouched. */
#order-standard_cart .ae-checkout-section .field-container .form-control,
#order-standard_cart .ae-checkout-section .field-container .custom-select,
#order-standard_cart .ae-checkout-section .field-container select.form-control {
    height: 42px;
    box-sizing: border-box;
}
/* Stock rule sets .field-container { margin: 0 0 30px 0 } which
   adds dead space below the custom-fields block inside the card. */
#order-standard_cart .ae-checkout-section .field-container {
    margin: 0 !important;
}

/* Promo block: collapsed by default, expanded by clicking the
   "Have a coupon code?" link (see cart-promo.tpl for the JS toggle).
   Stays expanded automatically when a promo is already applied. */
#order-standard_cart .ae-promo-toggle-wrap {
    padding: 10px 0;
}
#order-standard_cart .ae-promo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ae-primary, #c8102e);
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}
#order-standard_cart .ae-promo-toggle:hover,
#order-standard_cart .ae-promo-toggle:focus {
    color: var(--ae-primary-dark, #a40d24);
    text-decoration: underline;
}
#order-standard_cart .ae-promo-toggle i {
    font-size: 13px;
}
#order-standard_cart .view-cart-tabs.ae-promo-collapsible {
    display: none;
}
#order-standard_cart .view-cart-tabs.ae-promo-collapsible.is-open {
    display: block;
}

/* JS in cart-promo.tpl pulls the toggle into the same parent as
   the "Empty Cart" button and wraps both in this row container. */
#order-standard_cart .ae-promo-emptycart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 8px 0;
}
#order-standard_cart .ae-promo-emptycart-row .ae-promo-toggle-wrap {
    padding: 0;
}

/* ── Account switch card ───────────────────────────────────────
   "Create New Account" / "Have an Account? Log In" toggle. Stock
   WHMCS shows whichever button matches the current state (one is
   .w-hidden). Inside the card we want it to read like a section:
   prompt on the left, mode-switch button on the right. */
/* Segmented control. Both buttons are always rendered. The active
   mode is marked with .is-active by Smarty initially, then by a
   small JS patch in checkout.tpl after each click (because stock
   WHMCS fades one button out — we override that). */
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ae-border, #E8E4DE);
}
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn {
    flex: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    background: transparent;
    color: var(--ae-ink-soft, #4A5568);
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn:hover,
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn:focus {
    color: var(--ae-ink, #0F1A2E);
    background: rgba(15, 26, 46, .04);
    outline: 0;
}
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn.is-active {
    background: var(--ae-primary, #c8102e);
    color: #fff;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25);
    cursor: default;
}
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn.is-active:hover,
#order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn.is-active:focus {
    background: var(--ae-primary, #c8102e);
    color: #fff;
}

/* Existing customer login card: round Login button into a wide pill
   in our brand style, with a comfortable top margin under the fields. */
#order-standard_cart .ae-checkout-existing-signin .text-center {
    margin-top: 6px;
}
#order-standard_cart .ae-checkout-existing-signin #btnExistingLogin {
    min-width: 220px;
    height: 48px;
    padding: 0 36px;
    background: var(--ae-primary, #c8102e) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s, box-shadow .15s, transform .05s;
}
#order-standard_cart .ae-checkout-existing-signin #btnExistingLogin:hover,
#order-standard_cart .ae-checkout-existing-signin #btnExistingLogin:focus {
    background: var(--ae-primary-dark, #a40d24) !important;
    box-shadow: 0 4px 12px rgba(200, 16, 46, .35);
    outline: 0;
}
#order-standard_cart .ae-checkout-existing-signin #btnExistingLogin:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(200, 16, 46, .25);
}
@media (max-width: 575px) {
    #order-standard_cart .ae-checkout-existing-signin #btnExistingLogin {
        width: 100%;
        min-width: 0;
    }
}

/* ── Social sign-up card ────────────────────────────────────────
   linkedaccounts.tpl with linkContext="checkout-new" outputs a
   sub-heading + a small description + the provider buttons. The
   card wrapper styles handle the bg/padding; just center the
   provider buttons and tighten the description spacing. */
#order-standard_cart .ae-checkout-social-signup .sub-heading {
    margin-bottom: 6px !important;
}
#order-standard_cart .ae-checkout-social-signup p {
    text-align: left;
    font-size: 13px;
    color: var(--ae-ink-soft, #4A5568);
    margin: 0 0 12px 0;
}
#order-standard_cart .ae-checkout-social-signup .social-signin-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 575px) {
    #order-standard_cart .ae-checkout-account-switch .ae-account-toggle-btn {
        font-size: 13px;
        padding: 0 12px;
    }
}
/* margin-left: auto pins Empty Cart to the right edge even after
   the toggle wrap is hidden (justify-content: space-between only
   pushes items apart when there are at least two of them). */
#order-standard_cart .ae-promo-emptycart-row .empty-cart {
    margin: 0 0 0 auto;
}

/* Override the stock pill-style sub-heading INSIDE a card.
   Theme custom.css (lines 1936-1969 and 2872-2879) paints a
   pill on a horizontal line using !important on top/padding/
   background/margin-top, so every counter-property here also
   needs !important to win regardless of cascade order. */
#order-standard_cart .ae-checkout-section .sub-heading {
    height: auto !important;
    border-top: 0 !important;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
/* Kill the horizontal ::before line that the stock rule draws
   behind the pill. */
#order-standard_cart .ae-checkout-section .sub-heading::before {
    display: none !important;
}
#order-standard_cart .ae-checkout-section .sub-heading > span {
    display: block !important;
    position: static !important;
    top: auto !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: auto !important;
    letter-spacing: normal !important;
}
/* Some lang strings render an <i><small> hint inside the heading
   (e.g. "(required fields are marked with *)"). Keep it light. */
#order-standard_cart .ae-checkout-section .sub-heading > span small,
#order-standard_cart .ae-checkout-section .sub-heading > span i {
    color: var(--ae-ink-soft, #4A5568);
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
}

/* Mobile: tighter padding, smaller heading, less inter-card gap. */
@media (max-width: 575px) {
    #order-standard_cart .ae-checkout-section {
        padding: 16px 14px;
        margin-bottom: 10px;
        border-radius: var(--ae-radius-sm, 10px);
    }
    #order-standard_cart .ae-checkout-section .sub-heading {
        margin-bottom: 8px;
    }
    #order-standard_cart .ae-checkout-section .sub-heading > span {
        font-size: 16px;
    }
    /* When cols stack vertically, columns whose content is NOT a
       .form-group lose the row rhythm (.form-group brings its own
       margin-bottom). Hit them with the same gap. The Security
       Question select is the main offender. */
    #order-standard_cart .ae-checkout-section .row > [class*="col-"]:not(:has(> .form-group)):not(:last-child) {
        margin-bottom: 14px;
    }
}

/* ── Stripe Payment Request Button gate ─────────────────────────
   Inline JS at the bottom of checkout.tpl drops a click-catcher
   over each Stripe PRB iframe's parent. While the form is missing
   required values the overlay is visible (cursor: not-allowed,
   intercepts the click and runs validation). Once everything's
   filled the overlay flips to display:none and the click passes
   straight through to Apple Pay / Google Pay / Link. */
.ae-prb-blocker {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: not-allowed;
    background: transparent;
}

/* Field that failed the pre-payment gate. Strong red border + glow
   + soft red tint, with a one-shot pulse the moment the class is
   added so the eye is pulled to it. */
.ae-field-invalid {
    border-color: var(--ae-primary, #c8102e) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(200, 16, 46, .28) !important;
    background-color: rgba(200, 16, 46, .04) !important;
    outline: 0 !important;
    animation: aeFieldFlash .55s ease-out;
}
@keyframes aeFieldFlash {
    0%   { box-shadow: 0 0 0 0   rgba(200, 16, 46, .55); }
    60%  { box-shadow: 0 0 0 10px rgba(200, 16, 46, .12); }
    100% { box-shadow: 0 0 0 4px rgba(200, 16, 46, .28); }
}

/* TOS checkbox flag.
   The native <input type="checkbox"> is tiny and themes often
   override its rendering, so an outline on the input alone is
   easy to miss. Outline the WHOLE label (checkbox + agreement
   text + ToS link) as a red-bordered chip with a tint, plus
   bump the checkbox itself with a halo + brand accent. */
input[type="checkbox"].ae-field-invalid {
    accent-color: var(--ae-primary, #c8102e) !important;
    box-shadow: 0 0 0 2px var(--ae-primary, #c8102e),
                0 0 0 5px rgba(200, 16, 46, .25) !important;
    outline: 0 !important;
    background-color: transparent !important;
    border-width: 0 !important;
    animation: aeFieldFlash .55s ease-out;
}
label:has(> input[type="checkbox"].ae-field-invalid),
label.checkbox-inline:has(input[type="checkbox"].ae-field-invalid) {
    color: var(--ae-primary, #c8102e) !important;
    font-weight: 600 !important;
    background: rgba(200, 16, 46, .06);
    border: 2px solid var(--ae-primary, #c8102e);
    border-radius: 8px;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    animation: aeFieldFlash .55s ease-out;
}

/* ── Domain renewals (/cart/domain/renew) ──────────────────────────
   Each .domain-renewal becomes a brand-coloured card. Two-column
   grid on desktop: domain+expiry on the left, period select +
   Add-to-Cart button stacked on the right. Badge stays absolute
   top-right of the card. */
#order-standard_cart .domain-renewals {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
#order-standard_cart .domain-renewal {
    position: relative;
    display: grid;
    column-gap: 24px;
    row-gap: 4px;
    align-items: center;
    padding: 38px 22px 18px;
    background: #ebeae4;
    border: 0;
    border-radius: var(--ae-radius-md, 14px);
    margin: 0 !important;
}
#order-standard_cart .domain-renewal > .pull-right.float-right {
    position: absolute;
    top: 14px;
    right: 16px;
    float: none !important;
    margin: 0;
}
#order-standard_cart .domain-renewal h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    margin: 0;
    line-height: 1.2;
}
#order-standard_cart .domain-renewal > p {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
    color: var(--ae-ink-soft, #4A5568);
    font-size: 13px;
}
#order-standard_cart .domain-renewal .domain-renewal-desc {
    grid-column: 1;
    grid-row: 3;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ae-ink-soft, #4A5568);
}
#order-standard_cart .domain-renewal form.form-horizontal {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
}
#order-standard_cart .domain-renewal form.form-horizontal .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#order-standard_cart .domain-renewal form.form-horizontal .form-group > label {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ae-ink-soft, #4A5568);
    font-weight: 600;
}
#order-standard_cart .domain-renewal form.form-horizontal .form-group > div {
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 0 !important;
}
#order-standard_cart .domain-renewal .select-renewal-pricing {
    width: 100%;
    min-width: 260px;
    height: 42px;
    background: #fff;
    border-radius: var(--ae-radius-sm, 8px) !important;
}
#order-standard_cart .domain-renewal > .text-right {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: right !important;
    margin: 8px 0 0;
}
#order-standard_cart .domain-renewal .btn-add-renewal-to-cart {
    min-width: 140px;
    height: 42px;
    background: var(--ae-primary, #c8102e) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 0 24px;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25);
}
#order-standard_cart .domain-renewal .btn-add-renewal-to-cart:hover {
    background: var(--ae-primary-dark, #a40d24) !important;
}
@media (max-width: 767px) {
    #order-standard_cart .domain-renewal {
        grid-template-columns: 1fr;
        padding: 50px 18px 18px;
        row-gap: 10px;
    }
    #order-standard_cart .domain-renewal h3,
    #order-standard_cart .domain-renewal > p,
    #order-standard_cart .domain-renewal .domain-renewal-desc,
    #order-standard_cart .domain-renewal form.form-horizontal,
    #order-standard_cart .domain-renewal > .text-right {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }
    #order-standard_cart .domain-renewal > .text-right {
        text-align: center !important;
        margin-top: 4px;
    }
    #order-standard_cart .domain-renewal .btn-add-renewal-to-cart {
        width: 100%;
    }
}

/* ── Mobile: cart inner row should NOT be flex ────────────────────
   Stock Bootstrap .row is display:flex + flex-wrap with -15px
   margins. Combined with stock all.css floats on .secondary-cart-*
   columns, on phones the two columns try to share a row instead
   of stacking — content gets crammed into the left half while
   the right shows empty space. Drop the inner cart row to block
   on <=991px so width:100% from all.css makes columns stack. */
@media (max-width: 991px) {
    #order-standard_cart .cart-body > .row {
        display: block !important;
    }
    /* Domain Renewals: the "Enter Domain to Find" search input
       sits in <div class="pull-right float-right"> next to the
       <h1>. On mobile float:right pushes it under the h1 with no
       gap. Drop the float, take the parent to full viewport width
       (otherwise the input shrinks to its intrinsic size), give
       the input rounded brand corners. */
    .header-lined h1 .pull-right.float-right {
        float: none !important;
        margin-top: 10px;
        display: block !important;
        width: 100% !important;
    }
    /* Use the ID so specificity beats any .input-inline-100 / .form-control
       width override no matter where it sits in the cascade. */
    #domainRenewalFilter.domain-renewals-filter,
    #domainRenewalFilter {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 8px !important;
    }
}

/* Stock theme paints a 1px #ccc line above the renewal lists.
   Drop it — the brand cards already provide enough separation. */
.domain-renewals,
.service-renewals {
    border-top: 0 !important;
}

/* ── Accepted-payment-methods strip ──────────────────────────────
   Sits at the bottom of the new-card input block on checkout.
   Shows Visa / Mastercard / Apple Pay / Google Pay brand glyphs
   in their official colours. */
#order-standard_cart .ae-card-accepted {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ae-border, #E8E4DE);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
#order-standard_cart .ae-card-accepted-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
#order-standard_cart .ae-card-accepted-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ae-ink-soft, #4A5568);
    font-weight: 600;
}
#order-standard_cart .ae-card-accepted-icons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
#order-standard_cart .ae-card-accepted-icons i {
    font-size: 30px;
    line-height: 1;
    transition: transform .12s ease, filter .12s ease;
}
#order-standard_cart .ae-card-accepted-icons i:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 6px rgba(15, 26, 46, .15));
}
#order-standard_cart .ae-card-accepted-icons .fa-cc-visa {
    color: #1A1F71;
}
#order-standard_cart .ae-card-accepted-icons .fa-cc-mastercard {
    color: #EB001B;
}
#order-standard_cart .ae-card-accepted-icons .fa-cc-apple-pay {
    color: #000;
}
#order-standard_cart .ae-card-accepted-icons .fa-google-pay {
    color: #4285F4;
}
/* Google Pay — FA 5.10 doesn't ship fa-google-pay reliably; mimic
   the GPay button with the Google G + "Pay" text. */
#order-standard_cart .ae-card-accepted-icons .ae-pm-google-pay {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 30px;
    padding: 0 6px 0 0;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 6px;
    font-family: "Google Sans", "Roboto", Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #3c4043;
}
#order-standard_cart .ae-card-accepted-icons .ae-pm-google-pay i {
    font-size: 18px;
    color: #4285F4;
}

/* 3-D Secure trust badge — pinned to the right of the strip. */
#order-standard_cart .ae-card-3ds {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    height: 30px;
    padding: 0 9px 0 0;
    margin-left: auto;
    background: rgba(15, 26, 46, .04);
    border: 1px solid var(--ae-border, #E8E4DE);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ae-ink-soft, #4A5568);
    flex-shrink: 0;
}
#order-standard_cart .ae-card-3ds i {
    font-size: 14px;
    color: #15803d;
}