/**
 * 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).
 */

/* ── 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 ── */
/* Order Summary stays in view as the user scrolls down through the
   long checkout form. Min-1200px desktop only — on smaller screens
   the existing orderform CSS already moves the sidebar below. */
@media (min-width: 1200px) {
    #order-standard_cart .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;
}

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