/**
 * AEserver custom theme — sits on top of the Twenty-One base.
 * Loaded automatically by includes/head.tpl (assetExists check).
 * Deployed via post-receive hook to /templates/aeservertheme.
 *
 * Goals:
 *   1. Replace Bootstrap blue with AEserver red across all CTAs.
 *   2. Re-skin the homepage domain-search block as a hero card
 *      (eyebrow / big headline / pill search bar / TLD price chips),
 *      mirroring the .aeds-page-hero design used by the standalone
 *      domain-search widget.
 *   3. Polish homepage product cards, action-icon shortcuts,
 *      client-area tiles, header/footer, forms.
 *
 * Selectors here target WHMCS's existing markup verbatim — no
 * .tpl files were modified. Where we override base theme.css we
 * either match its specificity or use !important on the property
 * that fights Bootstrap utility classes (e.g. .bg-white, .p-5).
 */

/* ── Design tokens ──────────────────────────────────────────────── */
: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;
}

/* ── Body / page background ─────────────────────────────────────── */
body.primary-bg-color {
    background: var(--ae-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 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) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Big, modern section titles on the homepage and elsewhere. */
#main-body h2.text-center.m-4 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ae-ink);
    margin: 48px 0 28px !important;
}

/* ── Buttons: red brand ─────────────────────────────────────────── */
.btn-primary,
.btn-primary:focus {
    background-color: var(--ae-primary);
    border-color: var(--ae-primary);
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn-primary:hover {
    background-color: var(--ae-primary-dark);
    border-color: var(--ae-primary-dark);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
    transform: translateY(-1px);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ae-primary-dark);
    border-color: var(--ae-primary-dark);
    transform: translateY(0);
}
.btn-outline-primary {
    color: var(--ae-primary);
    border-color: var(--ae-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ae-primary);
    border-color: var(--ae-primary);
    color: #fff;
}
a, .btn-link { color: var(--ae-primary); }
a:hover, .btn-link:hover { color: var(--ae-primary-dark); }

/* ── New AEserver header (header.tpl) ───────────────────────────── */
/*
 * Two-bar layout:
 *   .ae-topbar  — dark navy, holds logo + WhatsApp + cart + user + currency
 *   .ae-mainnav — white, holds the WHMCS primary/secondary navigation
 *
 * Shape mirrors the marketing site (aeserver.com). Search box from the
 * stock Twenty-One header was dropped per design — domain lookup lives
 * in the homepage hero and on the dedicated domain page.
 */
.ae-header {
    background: #fff;
    /* No position/z-index here on purpose — we want the dropdown
       backdrop to cover the entire viewport including this header.
       The brand badge below anchors to .ae-topbar (which IS positioned)
       so we don't need a positioning context here. */
}
/* Breadcrumb band — theme.css paints both .breadcrumb and .master-breadcrumb
   with a flat #e9ecef wash that's almost invisible. Drop it so the page bg
   shows through, push the strip lower so it doesn't hug the navbar, and
   bump the text into a readable dark gray. */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
}
.master-breadcrumb {
    padding: 0;
}
/* Only reserve vertical room when the breadcrumb actually has items
   — otherwise the empty .breadcrumb still painted a 28px-tall blank
   strip below the header on pages like the homepage. */
.master-breadcrumb:has(.breadcrumb-item) {
    padding: 22px 0 6px;
}
.master-breadcrumb .breadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item.active {
    color: var(--ae-ink-soft) !important;
}
.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--ae-primary) !important;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ae-ink-faded);
}

/* Dark utility bar */
.ae-topbar {
    background: var(--ae-ink);
    color: #fff;
    /* Brand is absolute and taller than this bar — let it spill into the
       white nav below, mirroring the marketing site's overhang effect. */
    overflow: visible;
    position: relative;
}
.ae-topbar-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 14px;
    padding: 10px 0;
    min-height: 64px;
    position: relative;
}

/* Logo: square red badge anchored top-left of the topbar, taller than the
   bar itself so it overhangs into .ae-mainnav below (matches aeserver.com).
   The SVG already carries its own red background + "ae server" text — we
   only size and place it. */
.ae-topbar-brand {
    position: absolute;
    top: 22px;
    left: 0;
    width: auto;
    z-index: 5;
    display: block;
    line-height: 0;
    text-decoration: none !important;
}
.ae-topbar-brand:hover { text-decoration: none !important; }
.ae-topbar-brand img {
    height: 100%;
    width: auto;
    display: block;
    /* If the SVG fails to load (e.g. CORS or 404), at least the alt text
       stays readable instead of showing the broken-image icon huge. */
    max-width: 95px;
    object-fit: contain;
}
.ae-topbar-tools {
    margin-left: 130px;     /* clear the absolutely-positioned brand */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* WhatsApp pill — green WhatsApp brand colour */
.ae-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #25d366;
    color: #fff !important;
    border-radius: 100px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.ae-whatsapp:hover {
    background: #1ebe5a;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
    transform: translateY(-1px);
}
.ae-whatsapp i { font-size: 16px; }

/* Cart icon button (red badge over dark bar) */
.ae-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    text-decoration: none !important;
    transition: background .15s ease, transform .05s ease;
}
.ae-cart:hover {
    background: rgba(255,255,255,.18);
    transform: translateY(-1px);
}
.ae-cart i { font-size: 17px; }
.ae-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ae-primary);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ring matches the topbar background so the badge "punches" through it. */
    box-shadow: 0 0 0 2px var(--ae-ink);
}

/* Notifications / return-to-admin icon button */
.ae-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.08);
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, transform .05s ease;
}
.ae-icon-btn:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
    transform: translateY(-1px);
}
.ae-icon-btn i { font-size: 16px; }
.ae-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ae-primary);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ae-ink);
}

/* User chip (logged-in: client name + icon) */
.ae-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    border-radius: 100px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: background .15s ease;
    max-width: 200px;
}
.ae-user:hover { background: rgba(255,255,255,.18); }
.ae-user i { font-size: 16px; }
.ae-user-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Currency switcher (flag + code + chevron) */
.ae-currency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    border: 0;
    border-radius: 100px;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
    white-space: nowrap;
}
.ae-currency:hover { background: rgba(255,255,255,.18); color: #fff; }
.ae-currency .iti-flag {
    /* The intl-tel-input sprite assumes a 16×11 flag — sized down for the chip. */
    width: 20px;
    height: 15px;
    display: inline-block;
}
.ae-currency .fa-chevron-down {
    font-size: 10px;
    opacity: .8;
}

/* White main-nav band — items shift right on desktop to clear the
   overhanging brand badge. */
.ae-mainnav {
    background: #fff;
    padding: 0 !important;
    box-shadow: 0 1px 0 var(--ae-border);
}

/* ── Hidden menu items ──────────────────────────────────────────────────
   Partial-attribute match because WHMCS's internal menuItemName for
   the "Website & Security" tab varies by version / addon ("Website
   Security", "Website & Security", sometimes "MarketConnect"). The
   "Website" substring is unique to this dropdown in the stock nav. */
.ae-mainnav li[menuItemName*="Website"] {
    display: none !important;
}
.ae-mainnav .container {
    padding-top: 4px;
    padding-bottom: 4px;
}
@media (min-width: 1200px) {
    .ae-mainnav #mainNavbar { padding-left: 130px; }
}
.ae-mainnav .container { min-height: 80px; }
.ae-mainnav .navbar-collapse { min-height: 80px; align-items: center; }
.ae-mainnav .navbar-nav .nav-item > a,
.ae-mainnav .navbar-nav > li > a {
    padding: 30px 22px;
    font-weight: 600;
    color: var(--ae-ink) !important;
    font-size: 16px;
    line-height: 20px;
    transition: color .15s ease;
    position: relative; /* room for the hover-bridge ::before below */
}
/* Invisible hover-bridge between the trigger and the dropdown card so
   the dropdown stays open while the cursor moves down through the
   gap. Without it the gap kills the :hover and the menu would flicker
   shut. */
.ae-mainnav .navbar-nav .dropdown > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
}
.ae-mainnav .navbar-nav .nav-item > a:hover,
.ae-mainnav .navbar-nav > li > a:hover {
    color: var(--ae-primary) !important;
}
.ae-mainnav .navbar-toggler {
    border: 1px solid var(--ae-border);
    color: var(--ae-ink);
    border-radius: 8px;
    padding: 8px 14px;
    margin-right: 20px;
    margin: 8px 0;
}
.ae-mainnav .navbar-toggler:focus { outline: 0; box-shadow: 0 0 0 3px rgba(200,16,46,.15); }

/* ── Main-nav dropdowns: AEserver-style card + page dim ─────────
   Re-skins Bootstrap's <ul class="dropdown-menu"> so it reads as a
   floating white card with a tail, mirroring the marketing site.
   Open trigger goes red, chevron rotates, page behind dims.

   Markup quirk to be aware of: includes/navbar.tpl puts BOTH
   .dropdown-item on the <li> AND on the inner <a> (with px-2 py-0
   utilities). The double padding rules below normalise that. */

/* Replace Bootstrap's ::after CSS-border triangle with the AEserver
   menu-arrow SVG (production WordPress assets). If you self-host the
   SVG elsewhere, swap the URL. */
.ae-mainnav .navbar-nav .dropdown-toggle::after {
    content: '';
    border: 0;
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 8px;
    margin-left: 8px;
    background: url('https://aeserver.com/wp-content/themes/ae-server/assets/dist/img/menu-arrow.svg') center / contain no-repeat;
    transition: transform .15s ease, opacity .15s ease;
    opacity: .7;
}
/* Open OR hovered trigger: chevron flips and grows in opacity */
.ae-mainnav .navbar-nav .dropdown.show .dropdown-toggle::after,
.ae-mainnav .navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* Open OR hovered trigger turns brand red */
.ae-mainnav .navbar-nav .dropdown.show > a,
.ae-mainnav .navbar-nav .dropdown.show > .dropdown-toggle,
.ae-mainnav .navbar-nav .dropdown:hover > a,
.ae-mainnav .navbar-nav .dropdown:hover > .dropdown-toggle {
    color: var(--ae-primary) !important;
}

/* Hover-to-open: force the dropdown card visible while hovering the
   trigger or the card itself. Bootstrap's click-toggle still works
   too — both states co-exist without conflict. */
/* Hover-open behaviour is desktop-only. On touch devices :hover
   persists after a tap, which kept the submenu visible even after
   Bootstrap removed .show on the second tap of the toggle. Restrict
   to xl+ where there's a real mouse pointer. */
@media (min-width: 1200px) {
    .ae-mainnav .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Floating card */
.ae-mainnav .dropdown-menu {
    border: 0;
    border-radius: 18px;
    padding: 10px 0;
    margin-top: 8px;
    min-width: 240px;
    box-shadow:
        0 18px 48px -10px rgba(15, 26, 46, .25),
        0 6px 16px -6px rgba(15, 26, 46, .1);
    z-index: 1050;
    overflow: visible;
}

/* Tail pointing up to the trigger */
.ae-mainnav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 28px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}
/* Right-aligned dropdowns (e.g. Account) — anchor the tail to the right */
.ae-mainnav .dropdown-menu.dropdown-menu-right::before {
    left: auto;
    right: 28px;
}

/* Items — neutralise the double .dropdown-item + px-2 py-0 from the
   navbar partial, then apply our own roomy spec. */
.ae-mainnav .dropdown-menu li.dropdown-item {
    padding: 0 !important;
    background: transparent !important;
}
.ae-mainnav .dropdown-menu li.dropdown-item > a.dropdown-item {
    padding: 12px 22px !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--ae-ink) !important;
    transition: background .12s ease, color .12s ease;
}
.ae-mainnav .dropdown-menu li.dropdown-item > a.dropdown-item:hover,
.ae-mainnav .dropdown-menu li.dropdown-item > a.dropdown-item:focus {
    background: var(--ae-primary-tint) !important;
    color: var(--ae-primary) !important;
}

/* "More" overflow dropdown: JS clones top-level <a class="pr-4">
   into here, NOT <a class="dropdown-item">, so the rules above
   don't catch the inner anchor. Match it by tag, not by class. */
.ae-mainnav .collapsable-dropdown-menu li.dropdown-item > a {
    display: block;
    padding: 12px 22px !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--ae-ink) !important;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.ae-mainnav .collapsable-dropdown-menu li.dropdown-item > a:hover,
.ae-mainnav .collapsable-dropdown-menu li.dropdown-item > a:focus {
    background: var(--ae-primary-tint) !important;
    color: var(--ae-primary) !important;
}

/* ── Page dim when a main-nav dropdown is open ───────────────────
   Pure CSS via :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
   Backdrop sits at z-index 1040 so it covers EVERYTHING — the
   topbar, the menu band, the brand badge, the breadcrumb. The
   dropdown card itself is bumped to 1050 so it punches through
   the tint and stays crisp.
   pointer-events:none lets clicks pass through, so Bootstrap's
   "click outside to close" still fires on the page below. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 46, .45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
body:has(.ae-mainnav .dropdown.show)::before,
body:has(.ae-mainnav .dropdown-menu.show)::before,
body:has(.ae-mainnav .dropdown:hover)::before {
    opacity: 1;
}
.ae-mainnav .dropdown-menu { z-index: 1050; }

/* Below 992px: drop the desktop logo overhang. Logo + tools are
   reset by the unified-light-strip rebuild below — leaving only the
   text-trimming rules here (hide WhatsApp/user/currency labels so
   their icon-only buttons fit on tablet). */
@media (max-width: 991px) {
    .ae-whatsapp-text { display: none; }
    .ae-whatsapp { padding: 9px 12px; }
    .ae-user-text { display: none; }
    .ae-user { padding: 8px 10px; }
    .ae-currency-text { display: none; }
    .ae-currency { padding: 8px 12px; }
}
/* ── Mobile-and-tablet header rebuild ────────────────────────────
   Below xl (1200px) Bootstrap collapses the inline nav into a
   hamburger. The hamburger now lives inside .ae-topbar-tools (see
   header.tpl), so .ae-mainnav becomes a wrapper that's only there
   to hold the collapsible #mainNavbar. Make the wrapper invisible
   when collapsed and a clean white card-band when expanded.
   Below md (768px) we also flip the entire .ae-topbar from the dark
   navy band to a single light strip so logo + cart + user + menu
   share one row visually. */

@media (max-width: 1199.98px) {
    .ae-mainnav {
        background: transparent;
        border: 0;
        padding: 0;
        min-height: 0;
        box-shadow: none;
    }
    /* The desktop rules above set .ae-mainnav .container and
       .navbar-collapse to min-height:80px so the white nav band has a
       fixed height. On mobile that 80px stays painted as an empty
       strip — zero it out. */
    .ae-mainnav .container,
    .ae-mainnav > .container {
        padding: 0 !important;
        min-height: 0 !important;
    }
    .ae-mainnav .navbar-collapse {
        min-height: 0 !important;
    }
    /* WHMCS Twenty-One theme.min.css forces .navbar-collapse to
       display:flex !important (overriding Bootstrap's collapse
       behaviour), so the entire nav was rendering inline as a tall
       white strip below the topbar even with the hamburger closed.
       Force display:none when the collapse plugin hasn't added
       .show / .collapsing — and restore display when it does so the
       menu still opens on tap. */
    .ae-mainnav .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
    .ae-mainnav .navbar-collapse.show,
    .ae-mainnav .navbar-collapse.collapsing {
        display: block !important;
        position: fixed;
        top: 0;                     /* cover the full viewport */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: #fff;
        overflow-y: auto;
        /* padding-top reserves space for the topbar visually
           "above" the menu — topbar gets z-index 1041 below so it
           floats over the menu's top region. This way even if body
           scrolls (despite overflow:hidden) the menu always covers
           the full viewport — no gray gap between header and menu. */
        padding: 72px 0 40px;
        border: 0;
        box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .15);
        animation: ae-mobile-menu-fadein .2s ease;
    }
    /* Float the topbar above the menu overlay so the X close button
       stays tappable and the logo remains visible. */
    body:has(.ae-mainnav .navbar-collapse.show) .ae-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1041;
        background: #fff;
    }
    @keyframes ae-mobile-menu-fadein {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Lock body scroll while menu is open + flip the hamburger to an X */
    body:has(.ae-mainnav .navbar-collapse.show) {
        overflow: hidden;
    }
    body:has(.ae-mainnav .navbar-collapse.show) .ae-mobile-toggle .fa-bars::before {
        content: '\f00d';   /* fa-times */
    }

    /* ── Top-level nav items: iOS-Settings-style cells ─────────────── */
    .ae-mainnav .navbar-collapse .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        flex-direction: column;
        width: 100%;
    }
    .ae-mainnav .navbar-collapse .navbar-nav > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        width: 100%;
    }
    .ae-mainnav .navbar-collapse .navbar-nav > li > a,
    .ae-mainnav .navbar-collapse .navbar-nav > li.dropdown > .dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        color: var(--ae-ink) !important;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        line-height: 1.3 !important;
        position: relative;
        transition: background .15s ease, color .15s ease;
    }
    .ae-mainnav .navbar-collapse .navbar-nav > li > a:hover,
    .ae-mainnav .navbar-collapse .navbar-nav > li > a:focus,
    .ae-mainnav .navbar-collapse .navbar-nav > li > a:active {
        background: rgba(15, 26, 46, .04) !important;
        color: var(--ae-primary) !important;
    }
    /* iOS hairline divider — inset 24px from left edge, full to right.
       Also kills Bootstrap's .dropdown-toggle::after triangle caret
       (border:0 / margin:0 / width:auto override its triangle styles)
       so our hairline can use the same ::after slot on dropdown items. */
    .ae-mainnav .navbar-collapse .navbar-nav > li:not(:last-child) > a::after,
    .ae-mainnav .navbar-collapse .navbar-nav > li:not(:last-child) > .dropdown-toggle::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 24px;
        right: 0;
        height: 1px;
        background: rgba(0, 0, 0, .08);
        border: 0 !important;
        margin: 0 !important;
        width: auto !important;
        vertical-align: baseline !important;
    }
    /* Last dropdown item still needs its Bootstrap caret killed even
       though it has no divider — collapse the ::after to nothing. */
    .ae-mainnav .navbar-collapse .navbar-nav > li:last-child.dropdown > .dropdown-toggle::after {
        display: none !important;
    }

    /* Reserve space on the right for the chevron so the link text
       never collides with it. */
    .ae-mainnav .navbar-collapse .navbar-nav > li.dropdown > a.dropdown-toggle {
        padding-right: 50px !important;
    }
    /* Dropdown indicator: pure-CSS chevron-right (no FontAwesome
       dependency) made from rotated top+right borders. Absolutely
       positioned at right:22px and vertically centred via top:50% +
       margin-top compensation. Rotates 135° to point down when open. */
    .ae-mainnav .navbar-collapse .navbar-nav > li.dropdown > a.dropdown-toggle::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        left: auto;             /* reset the desktop rule's left:0 — */
                                /* otherwise left+right+width fight and left wins */
        margin-top: -6px;       /* half of (height + border) to centre */
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--ae-ink-faded);
        border-right: 2px solid var(--ae-ink-faded);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .ae-mainnav .navbar-collapse .navbar-nav > li.dropdown.show > a.dropdown-toggle::before {
        transform: rotate(135deg);
        margin-top: -8px;       /* visual centre shifts when rotated 135° */
    }

    /* ── Submenu (.dropdown-menu): inline accordion with subtle bg ─── */
    .ae-mainnav .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        background: rgba(15, 26, 46, .03) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
    }
    .ae-mainnav .navbar-collapse .dropdown-menu > li,
    .ae-mainnav .navbar-collapse .dropdown-menu .dropdown-item {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        background: transparent !important;
    }
    .ae-mainnav .navbar-collapse .dropdown-menu > li > a,
    .ae-mainnav .navbar-collapse .dropdown-menu .dropdown-item > a {
        display: block !important;
        padding: 14px 24px 14px 44px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--ae-ink-soft) !important;
        background: transparent !important;
        text-decoration: none !important;
        position: relative;
        transition: background .15s ease, color .15s ease;
    }
    .ae-mainnav .navbar-collapse .dropdown-menu > li > a:hover,
    .ae-mainnav .navbar-collapse .dropdown-menu .dropdown-item > a:hover {
        background: rgba(15, 26, 46, .05) !important;
        color: var(--ae-primary) !important;
    }
    /* Sub-cell hairline — inset 44px from left to align with text */
    .ae-mainnav .navbar-collapse .dropdown-menu > li:not(:last-child) > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 44px;
        right: 0;
        height: 1px;
        background: rgba(0, 0, 0, .06);
    }
    /* Bootstrap's <div class="dropdown-divider"> — hide, our ::after handles it */
    .ae-mainnav .navbar-collapse .dropdown-divider {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* Topbar -> single light strip */
    .ae-topbar {
        background: #fff;
        border-bottom: 1px solid var(--ae-border);
        padding: 8px 0;
    }
    .ae-topbar-row {
        min-height: 56px;
        gap: 8px;
    }

    /* Logo: simple left placement, no overhang */
    .ae-topbar-brand {
        position: static;
        margin: 0;
        height: 40px;
        flex: 0 0 auto;
    }
    .ae-topbar-brand img {
        max-width: 130px;
        max-height: 40px;
        width: auto;
    }

    /* Tools row: dark icons on light, sit on the right.
       The desktop ae-cart / ae-user rules use color:#fff !important
       (correct for the navy bar) — we have to !important back here. */
    .ae-topbar-tools {
        margin-left: auto;
        gap: 6px;
        flex: 0 1 auto;
    }
    .ae-cart,
    .ae-icon-btn,
    .ae-mobile-toggle {
        color: var(--ae-ink) !important;
        background: rgba(15, 26, 46, .04) !important;
        border: 0;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .ae-cart:hover,
    .ae-icon-btn:hover,
    .ae-mobile-toggle:hover {
        color: var(--ae-primary) !important;
        background: rgba(200, 16, 46, .08) !important;
    }
    .ae-mobile-toggle {
        margin: 0 0 0 4px;
    }
    .ae-mobile-toggle:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(200, 16, 46, .15);
    }
    .ae-user {
        color: var(--ae-ink) !important;
        background: rgba(15, 26, 46, .04) !important;
        border: 0;
        border-radius: 8px;
        padding: 0 10px;
        height: 38px;
        gap: 6px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
    }
    .ae-user-text {
        display: none;
    }

    /* Notification popover content stays brand-light */
    .ae-cart-badge,
    .ae-notif-badge {
        /* badges already brand-coloured — nothing to override here */
    }
}

@media (max-width: 575px) {
    .ae-topbar-brand { height: 36px; }
    .ae-topbar-brand img { max-width: 110px; max-height: 36px; }
    .ae-topbar-row { min-height: 52px; gap: 6px; }
    .ae-cart, .ae-icon-btn, .ae-mobile-toggle { width: 36px; height: 36px; }
    .ae-user { padding: 0 8px; height: 36px; }
}

/* ── Hero domain search (homepage) ──────────────────────────────── */
/*
 * Existing markup (includes/domain-search.tpl):
 *   .home-domain-search.bg-white  ← outer band
 *     > .container
 *       > .clearfix.p-5            ← becomes our white hero card
 *         > h2 + .input-group-wrapper + .row + ul.tld-logos + a.btn-link
 */
.home-domain-search.bg-white {
    background: var(--ae-page-bg) !important;
    padding: 24px 0;
}
.home-domain-search .container { max-width: 1100px; }
.home-domain-search .clearfix.p-5 {
    background: #fff;
    border-radius: var(--ae-radius-lg);
    padding: 56px 40px !important;
    box-shadow: var(--ae-shadow-card);
    position: relative;
}
.home-domain-search h2 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    color: var(--ae-ink);
    text-align: center;
    margin: 0 auto 32px;
    max-width: 820px;
}

/* Pill-style search bar.
   theme.css gives .input-group-wrapper its own border + padding + bg
   (a second frame around our pill). Strip all of that — only our
   .input-group should carry the visible chrome. */
.home-domain-search .input-group-wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.home-domain-search .input-group {
    background: #fff;
    border: 1px solid var(--ae-border-strong);
    border-radius: 16px;
    padding: 7px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 12px 32px -10px rgba(15, 26, 46, .16),
        0 2px 6px -2px rgba(15, 26, 46, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    /* Vertically center the input + buttons inside the pill so the
       placeholder text doesn't drift to the top. */
    align-items: center;
}
.home-domain-search .input-group:focus-within {
    border-color: var(--ae-ink);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 18px 40px -12px rgba(15, 26, 46, .22);
}
.home-domain-search .input-group .form-control {
    border: 0;
    box-shadow: none !important;
    /* Fixed height + zero vertical padding so the input matches the
       buttons' height exactly and the placeholder sits dead-centre. */
    height: 50px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    background: transparent;
}
.home-domain-search .input-group .form-control:focus {
    box-shadow: none !important;
    border: 0;
}
.home-domain-search .input-group-append .btn,
.home-domain-search .row .btn {
    /* Same fixed height as the input so the pill is uniform and the
       button labels are vertically centred via line-height. */
    height: 50px;
    padding: 0 28px;
    line-height: 50px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
}
.home-domain-search .input-group-append .btn + .btn,
.home-domain-search .input-group-append .btn ~ .btn {
    margin-left: 4px;
}
/* Search button stays red (btn-primary already overridden above). */
/* Transfer button: dark ink instead of green for hero harmony. */
.home-domain-search .btn-success {
    background: var(--ae-ink);
    border-color: var(--ae-ink);
    box-shadow: none;
}
.home-domain-search .btn-success:hover,
.home-domain-search .btn-success:focus,
.home-domain-search .btn-success:not(:disabled):not(.disabled):active {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* TLD logos → price-chip row */
.home-domain-search ul.tld-logos {
    list-style: none;
    margin: 28px auto 0 !important;
    padding: 0;
    max-width: 720px;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.home-domain-search ul.tld-logos li {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ae-border-strong);
    padding: 9px 16px;
    border-radius: 100px;
    font-size: 13px;
    color: var(--ae-ink);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    width: auto !important;
    height: auto !important;
    float: none !important;
}
.home-domain-search ul.tld-logos li:hover {
    border-color: var(--ae-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(15, 26, 46, .18);
}
.home-domain-search ul.tld-logos img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin: 0 !important;
}
.home-domain-search .btn-link.btn-sm {
    color: var(--ae-ink-soft);
    font-weight: 600;
    margin: 24px auto 0 !important;
    display: block;
    width: fit-content;
    float: none !important;
}
.home-domain-search .btn-link.btn-sm:hover { color: var(--ae-ink); }

@media (max-width: 880px) {
    .home-domain-search .clearfix.p-5 { padding: 36px 28px !important; }
    .home-domain-search h2 { font-size: 36px; letter-spacing: -1px; }
}
@media (max-width: 640px) {
    .home-domain-search .clearfix.p-5 { padding: 24px 18px !important; }
    .home-domain-search h2 { font-size: 28px; margin-bottom: 24px; }
    .home-domain-search .input-group { padding: 5px; border-radius: 14px; }
    .home-domain-search .input-group .form-control { height: 48px; padding: 0 16px; font-size: 16px; }
    .home-domain-search .input-group-append .btn { height: 48px; padding: 0 18px; line-height: 48px; font-size: 13px; border-radius: 9px; }
}

/* Below sm (576px) Bootstrap's d-sm-block hides the inline buttons and
   d-sm-none shows the fallback row. Skin that row to look like the
   pill above: two equal-width brand buttons with the same height /
   radius, Search red and Transfer dark (handled by the .btn-success
   override earlier). */
@media (max-width: 575.98px) {
    .home-domain-search .row.d-sm-none {
        display: flex !important;
        gap: 8px;
        margin: 12px 0 0 !important;
    }
    .home-domain-search .row.d-sm-none > .col-6 {
        flex: 1 1 0 !important;
        max-width: 50% !important;
        padding: 0 !important;
    }
    .home-domain-search .row.d-sm-none .btn,
    .home-domain-search .row.d-sm-none .btn-block {
        width: 100%;
        height: 48px;
        padding: 0 12px;
        line-height: 48px;
        border-radius: 11px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .3px;
    }
}

/* ── Homepage product-group cards ───────────────────────────────── */
/*
 * Bootstrap's .card-columns uses CSS multi-column (masonry) layout, which
 * makes every card hug its content height. Switch to a grid track so all
 * cards in a row share the tallest one's height, and turn each card into
 * a flex column so the CTA button can push to the bottom — keeps short
 * descriptions visually aligned with longer ones.
 */
.card-columns.home {
    column-count: unset !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Match the .action-icon-btns spacing below: 6px col padding × 2 = 12px.
       Use long-hand row-gap + column-gap with !important to beat the
       `column-gap: 1.25rem` Bootstrap rule on .card-columns from theme.css. */
    row-gap: 12px !important;
    column-gap: 12px !important;
}
.card-columns.home .card {
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md) !important;
    box-shadow: var(--ae-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-columns.home .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Push the CTA to the bottom of the card. */
.card-columns.home .card-body .btn-block {
    margin-top: auto;
}
.card-columns.home .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ae-shadow-hover);
    border-color: var(--ae-border-strong);
}
.card-columns.home .card-body {
    padding: 36px 24px !important;
}
.card-columns.home .pricing-card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    margin-bottom: 12px;
}
.card-columns.home .card p {
    color: var(--ae-ink-soft);
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
}
.card-columns.home .btn-block {
    border-radius: var(--ae-radius-sm);
    padding: 12px 18px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* ── Homepage action-icon shortcuts ─────────────────────────────── */
.action-icon-btns > [class*="col-"] { padding: 6px; }
.action-icon-btns a[class*="card-accent-"] {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    padding: 24px 16px;
    text-align: center;
    color: var(--ae-ink) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .15s ease;
    box-shadow: var(--ae-shadow-card);
    height: 100%;
}
.action-icon-btns a[class*="card-accent-"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--ae-shadow-hover);
    border-color: var(--ae-primary);
    color: var(--ae-primary) !important;
}
.action-icon-btns .ico-container {
    margin: 0 auto 14px !important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ae-primary-tint);
    color: var(--ae-primary);
    font-size: 24px;
    transition: background .15s ease, color .15s ease;
}
.action-icon-btns a[class*="card-accent-"]:hover .ico-container {
    background: var(--ae-primary);
    color: #fff;
}

/* ── Client-area dashboard tiles ────────────────────────────────── */
.tiles { padding: 4px; }
.tiles .tile {
    border-radius: var(--ae-radius-md);
    background: #fff;
    box-shadow: var(--ae-shadow-card);
    border: 1px solid var(--ae-border);
    transition: transform .2s ease, box-shadow .2s ease;
    margin: 4px;
    padding: 24px 20px;
}
.tiles .tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ae-shadow-hover);
}
.tiles .tile .stat { font-weight: 800; letter-spacing: -.02em; }

/* ── Generic card polish (sidebar, panels) ──────────────────────── */
.card { border-radius: var(--ae-radius-md); }

/* ── Sidebar cards — unified across cart, client area, etc.
   Markup (from includes/sidebar.tpl):
     <div class="card card-sidebar mb-3">
       <div class="card-header">
         <h3 class="card-title">Section Name</h3>
       </div>
       <div class="collapsable-card-body">
         <div class="list-group list-group-flush">
           <a class="list-group-item list-group-item-action [active]">…</a>
         </div>
       </div>
     </div>
   The cart, /clientarea.php?action=domains, account details, etc.
   all reuse this partial — so styling .card-sidebar generically
   gives one rhythm across the whole client-facing surface. */
.card-sidebar {
    border-radius: var(--ae-radius-md) !important;
    border: 1px solid var(--ae-border) !important;
    box-shadow: var(--ae-shadow-card);
    overflow: hidden;
    background: #fff;
}
.card-sidebar > .card-header,
.card-sidebar .panel-heading.card-header {
    background: #fafaf8 !important;
    border-bottom: 1px solid var(--ae-border) !important;
    border-radius: 0 !important; /* outer card carries the radius now */
    padding: 14px 18px !important;
}
.card-sidebar .card-header .card-title,
.card-sidebar .card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ae-ink);
    letter-spacing: -.005em;
    text-transform: none;
}
.card-sidebar .card-header .card-title i,
.card-sidebar .card-header h3 i {
    color: var(--ae-ink-soft);
    margin-right: 6px;
}
.card-sidebar .card-header .card-minimise,
.card-sidebar .card-header .panel-minimise {
    color: var(--ae-ink-faded);
    font-size: 12px;
}
.card-sidebar .list-group { border: 0; }
.card-sidebar .list-group-item,
.card-sidebar .list-group-item-action {
    padding: 12px 18px !important;
    color: var(--ae-ink) !important;
    font-weight: 500;
    border-color: var(--ae-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff;
    transition: background .12s ease, color .12s ease;
}
.card-sidebar .list-group-item:first-child,
.card-sidebar .list-group-item-action:first-child {
    border-top: 0 !important;
}
.card-sidebar .list-group-item:last-child,
.card-sidebar .list-group-item-action:last-child {
    border-bottom: 0 !important;
}
.card-sidebar .list-group-item-action:hover:not(.active) {
    background: var(--ae-primary-tint) !important;
    color: var(--ae-primary) !important;
}
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item-action.active {
    background: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--ae-primary-dark);
}
.card-sidebar .list-group-item-action.active i,
.card-sidebar .list-group-item.active i {
    color: #fff !important;
}
.card-sidebar .list-group-item-action:not(.active) i {
    color: var(--ae-ink-soft);
}

/* Sidebar item label: stock .sidebar-menu-item-wrapper is display:flex
   without flex-wrap, so a long label (e.g. "#581294 - [URGENT] Account
   Migration ...") overflows its flex parent and gets clipped by the
   card boundary. min-width:0 lets the flex child shrink below its
   intrinsic min-content size; word-break wraps inside it. */
.card-sidebar .sidebar-menu-item-label {
    min-width: 0;
    word-break: break-word;
    white-space: normal;
}

/* ── Forms / inputs ─────────────────────────────────────────────── */
.form-control {
    border-radius: var(--ae-radius-sm);
    border-color: var(--ae-border-strong);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

/* ── Footer (matches aeserver.com main site) ────────────────────── */
.footer.ae-footer {
    background: var(--ae-page-bg);
    border-top: 1px solid var(--ae-border);
    margin-top: 64px;
    padding: 56px 0 28px;
    color: var(--ae-ink);
}

.ae-footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.6fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.ae-footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.ae-footer-col--right {
    align-items: flex-end;
}

/* Contacts column */
.ae-footer-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--ae-ink);
    font-size: 14px;
    line-height: 1.45;
}
.ae-footer-row > i {
    color: var(--ae-ink-soft);
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.ae-footer-row-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ae-footer-link {
    color: var(--ae-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
    word-break: break-word;
}
.ae-footer-link:hover {
    color: var(--ae-primary-dark);
    text-decoration: underline;
}

/* Section titles */
.ae-footer-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ae-ink);
    margin: 0 0 12px;
    letter-spacing: -.005em;
    text-transform: none;
}

/* Social icon row — red brand circles */
.ae-footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ae-footer-social {
    width: 38px;
    height: 38px;
    background: var(--ae-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 15px;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ae-footer-social:hover {
    background: var(--ae-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(200, 16, 46, .35);
}
/* Inline-SVG fallbacks for icons missing from FA 5.10.1 (X, TikTok). */
.ae-footer-social svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Payment logos row */
.ae-footer-payments {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.ae-footer-payments img {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

/* Network Status outline button */
.ae-footer-status-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border: 2px solid var(--ae-primary);
    border-radius: 8px;
    color: var(--ae-primary) !important;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    background: #fff;
    transition: background .15s ease, color .15s ease, transform .05s ease;
    white-space: nowrap;
}
.ae-footer-status-btn:hover {
    background: var(--ae-primary);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Bottom band: copyright + small actions */
.ae-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ae-border);
    flex-wrap: wrap;
}
.ae-footer-copyright {
    margin: 0;
    color: var(--ae-ink-soft);
    font-size: 12.5px;
    line-height: 1.6;
    flex: 1 1 480px;
    min-width: 0;
}
.ae-footer-bottom-actions {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.ae-footer-bottom-link {
    color: var(--ae-ink-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color .15s ease;
}
.ae-footer-bottom-link:hover {
    color: var(--ae-primary);
}

/* Language / currency switcher pill */
.ae-footer-lang-btn {
    background: #fff;
    border: 1px solid var(--ae-border-strong);
    border-radius: 100px;
    padding: 8px 14px;
    color: var(--ae-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s ease, color .15s ease;
    font-family: inherit;
}
.ae-footer-lang-btn:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
}
.ae-footer-lang-btn .iti-flag {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
}
.ae-footer-lang-btn .fa-chevron-down {
    font-size: 10px;
    opacity: .6;
}

/* Tablet — stack columns 2-up then 1-up */
@media (max-width: 991px) {
    .ae-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .ae-footer-col--right {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
}
@media (max-width: 640px) {
    .footer.ae-footer {
        padding: 40px 0 24px;
        margin-top: 40px;
    }
    .ae-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .ae-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    /* In flex-direction:column the desktop `flex: 1 1 480px` would
       make the copyright 480px TALL (basis = height). Reset to auto. */
    .ae-footer-copyright {
        flex: 0 0 auto;
    }
    .ae-footer-bottom-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Hide the WHMCS "Powered by WHMCompleteSolution" branding link.
   It's injected into $footeroutput by the WHMCS PHP layer, not into
   any .tpl, so CSS is the only place to suppress it without a paid
   Branding Removal add-on. */
a[href*="whmcs.com"],
a[href*="WHMCompleteSolution"],
a[href*="whmcompletesolution"] {
    display: none !important;
}

/* ── Brand-aligned alerts ───────────────────────────────────────── */
.alert-info {
    background: var(--ae-primary-tint);
    border-color: rgba(200, 16, 46, .15);
    color: var(--ae-ink);
}

/* ── Shopping cart / checkout (cart.php / standard_cart orderform)
   These selectors are derived from the actual HTML pulled live from
   /cart.php?a=view, NOT guessed at — the standard_cart orderform
   uses custom class names (.view-cart-items-header, .order-summary,
   .summary-container, .total-due-today, #totalDueToday.amt,
   #checkout.btn-checkout, #continueShopping.btn-continue-shopping)
   that don't follow Bootstrap's .bg-primary / .card-header naming. */

/* "Review & Checkout" page heading */
.viewcart h1,
[id*="cart"] h1.cart-page-title,
.cart-content > h1,
.shopping-cart h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ae-ink);
    margin-bottom: 24px;
}

/* Sidebar "View Cart" / category active state — red, not blue */
.card-sidebar .list-group-item.active,
.list-group-item.active,
.list-group-item-action.active {
    background-color: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--ae-primary-dark);
}

/* "Review & Checkout" page heading inside the cart */
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined .font-size-36 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ae-ink);
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 0;
}
#order-standard_cart .header-lined { border-bottom: 0; }

/* ── Center area: Product/Options blue bar ──────────────────────
   Custom class .view-cart-items-header — flip from blue to dark
   ink, give it a rounded top, uppercase tracking. */
#order-standard_cart .view-cart-items-header {
    background: var(--ae-ink) !important;
    background-color: var(--ae-ink) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 16px 22px !important;
    border: 0 !important;
    border-radius: var(--ae-radius-md) var(--ae-radius-md) 0 0 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
}

/* The cart-items container under the blue bar — make it look like
   one continuous card with the header above */
#order-standard_cart .view-cart-items {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-top: 0;
    border-radius: 0 0 var(--ae-radius-md) var(--ae-radius-md);
    box-shadow: var(--ae-shadow-card);
    padding: 0;
    margin-bottom: 16px;
}

/* "Your Shopping Cart is Empty" message — softer styling */
#order-standard_cart .view-cart-empty {
    padding: 48px 20px !important;
    text-align: center;
    color: var(--ae-ink-soft);
    font-size: 16px;
    font-weight: 500;
    background: transparent;
    border: 0;
}

/* Promo code tabs container */
#order-standard_cart .view-cart-tabs {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    box-shadow: var(--ae-shadow-card);
    padding: 8px 20px 20px;
    margin-top: 8px;
}
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--ae-border);
    margin-bottom: 18px;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    color: var(--ae-ink-soft);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 4px;
    margin-right: 18px;
    background: transparent;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    color: var(--ae-primary);
    background: transparent;
    border-bottom-color: var(--ae-primary);
}
#order-standard_cart .view-cart-tabs .form-control {
    border-radius: var(--ae-radius-sm);
}
/* Promo form: input + button on one row.
   The orderform's <button class="btn-block"> would normally be 100%
   wide and break to its own line — flex layout + width:auto !important
   pulls them onto the same row. */
#order-standard_cart .view-cart-tabs #applyPromo > form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
#order-standard_cart .view-cart-tabs #applyPromo > form > .form-group {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}
#order-standard_cart .view-cart-tabs .btn-default {
    background: var(--ae-primary) !important;
    color: #fff !important;
    border-color: var(--ae-primary) !important;
    border-radius: var(--ae-radius-sm);
    font-weight: 700;
    padding: 12px 22px !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
    /* Override Bootstrap's .btn-block (display:block; width:100%) so
       the button sits inline with the input. */
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
#order-standard_cart .view-cart-tabs .btn-default:hover {
    background: var(--ae-primary-dark) !important;
    border-color: var(--ae-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
    transform: translateY(-1px);
}

/* Mobile — let it stack so the input doesn't shrink to nothing */
@media (max-width: 480px) {
    #order-standard_cart .view-cart-tabs #applyPromo > form {
        flex-direction: column;
        gap: 10px;
    }
    #order-standard_cart .view-cart-tabs .btn-default {
        width: 100% !important;
    }
}

/* ── Order Summary (right column) ──────────────────────────────
   Real markup:
     <div class="order-summary" id="orderSummary">
       <h2 class="font-size-30">Order Summary</h2>
       <div class="summary-container">
         <div class="subtotal clearfix">…</div>
         <div class="recurring-totals clearfix">…</div>
         <div class="total-due-today total-due-today-padded">
           <span id="totalDueToday" class="amt">$0.00 USD</span>
           <span>Total Due Today</span>
         </div>
         <div class="text-right">
           <a id="checkout" class="btn btn-success btn-lg btn-checkout">Checkout</a>
           <a id="continueShopping" class="btn btn-link btn-continue-shopping">Continue Shopping</a>
         </div>
       </div>
     </div>
   .order-summary is the OUTER wrapper (was painting gray); the h2
   sits at the top; .summary-container is the inner content. We
   make .order-summary the rounded card, paint only the H2 dark,
   and let .summary-container be the flat white body. */

#order-standard_cart .order-summary {
    background: #fff !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-md) !important;
    box-shadow: var(--ae-shadow-card);
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
}
/* The H2 inside .order-summary IS the dark header band */
#order-standard_cart .order-summary > h2,
#order-standard_cart .order-summary > h2.font-size-30 {
    background: var(--ae-ink) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
    line-height: 1.4 !important;
    text-align: left !important;
    border: 0 !important;
}
/* The body */
#order-standard_cart .summary-container {
    background: #fff !important;
    padding: 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
/* Subtotal + Totals rows — clean spacing */
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .recurring-totals {
    padding: 12px 0;
    border-bottom: 1px solid var(--ae-border);
    font-size: 14px;
    color: var(--ae-ink);
}
#order-standard_cart .summary-container .subtotal .float-left,
#order-standard_cart .summary-container .recurring-totals .float-left {
    color: var(--ae-ink-soft);
    font-weight: 600;
}
#order-standard_cart .summary-container .subtotal .float-right,
#order-standard_cart .summary-container .recurring-totals .float-right {
    color: var(--ae-ink);
    font-weight: 700;
}

/* Total Due Today block — the BIG price, but readable */
#order-standard_cart .total-due-today,
#order-standard_cart .total-due-today.total-due-today-padded {
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--ae-border);
    margin-bottom: 18px;
    display: block;
}
/* The actual amount — the user flagged it as "огромная цена".
   Cap it to a tasteful 28px instead of the orderform's default. */
#order-standard_cart #totalDueToday,
#order-standard_cart #totalDueToday.amt,
#order-standard_cart .total-due-today .amt {
    display: block;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--ae-ink) !important;
    letter-spacing: -.015em !important;
    line-height: 1.1 !important;
    margin: 0 0 6px !important;
    text-align: center !important;
}
/* "Total Due Today" caption right below */
#order-standard_cart .total-due-today > span:not(.amt) {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ae-ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}

/* Checkout button — brand red, full-width, big */
#order-standard_cart #checkout,
#order-standard_cart .btn-checkout,
#order-standard_cart .summary-container .btn-success.btn-checkout {
    background: var(--ae-primary) !important;
    background-color: var(--ae-primary) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 22px !important;
    border-radius: var(--ae-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25) !important;
    text-shadow: none !important;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
#order-standard_cart #checkout:hover:not(.disabled),
#order-standard_cart .btn-checkout:hover:not(.disabled) {
    background: var(--ae-primary-dark) !important;
    background-color: var(--ae-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35) !important;
    transform: translateY(-1px);
}
#order-standard_cart #checkout.disabled,
#order-standard_cart .btn-checkout.disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none;
}

/* "Continue Shopping" — soft link, centered below */
#order-standard_cart #continueShopping,
#order-standard_cart .btn-continue-shopping {
    display: block;
    text-align: center;
    color: var(--ae-ink-soft) !important;
    font-weight: 600;
    text-decoration: none !important;
    padding: 12px 0 0;
    font-size: 13px;
}
#order-standard_cart #continueShopping:hover,
#order-standard_cart .btn-continue-shopping:hover {
    color: var(--ae-primary) !important;
    text-decoration: underline !important;
}

/* Hide the <br/> after Checkout — flex layout handles spacing */
#order-standard_cart .text-right > br { display: none; }
#order-standard_cart .text-right { text-align: center !important; }

/* Cart sidebar uses the generic .card-sidebar rules above — no
   cart-specific overrides needed. */

/* ── Domains Configuration step (cart.php?a=confdomains) ─────────
   Markup snippet from the live page:
     <div class="sub-heading">
       <span class="primary-bg-color">sdfasdfa.ae</span>
     </div>
     <div class="row">
       <div class="col-sm-6"><label>Registration Period</label> 1 Year/s</div>
       <div class="col-sm-6"><label>Hosting</label> [No Hosting!...]</div>
     </div>
     <div class="row addon-products">
       <div class="col-sm-6"><div class="panel panel-addon">
         <div class="panel-body">…label + description…</div>
         <div class="panel-price">FREE! / 1 Year/s</div>
         <div class="panel-add"><i class="fas fa-plus"></i> Add to Cart</div>
       </div></div>
     </div>
*/

/* Section divider — "horizontal line with pill above it" pattern.
   The pill sits 20px above the line (top: -20px) so the divider
   reads as a header rather than a strikethrough. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
    text-align: center;
    position: relative;
    margin: 30px 0 32px;
    padding: 0;
    border: 0;
}
#order-standard_cart .sub-heading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ae-border-strong);
    z-index: 1;
}
#order-standard_cart .sub-heading > span,
#order-standard_cart .sub-heading-borderless > span {
    position: relative;
    z-index: 2;
    top: -20px;
    background: var(--ae-page-bg) !important;
    background-color: var(--ae-page-bg) !important;
    padding: 8px 22px !important;
    color: var(--ae-ink) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.005em;
    border-radius: 100px;
    display: inline-block;
    border: 1px solid var(--ae-border-strong);
}

/* Form labels / value rows on this step */
#order-standard_cart .cart-body .form-group label {
    color: var(--ae-ink-soft);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
#order-standard_cart .cart-body .form-group {
    margin-bottom: 18px;
}
#order-standard_cart .cart-body .form-control {
    border-radius: var(--ae-radius-sm);
    border-color: var(--ae-border-strong);
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart .cart-body .form-control:focus {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
    outline: 0;
}

/* Inline "[No Hosting! Click to Add]" link — orderform sets a hard
   inline color on it; soften and align with brand red. */
#order-standard_cart .cart-body a[style*="color"] {
    color: var(--ae-primary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
#order-standard_cart .cart-body a[style*="color"]:hover {
    color: var(--ae-primary-dark) !important;
    text-decoration: underline;
}

/* Addon cards (DNS Management, Email Forwarding, etc.)
   .panel-addon is a 3-section card: body / price / add-CTA.
   Make them feel like proper hover-able product cards. */
#order-standard_cart .panel-addon {
    background: #fff;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-md) !important;
    box-shadow: var(--ae-shadow-card) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
#order-standard_cart .panel-addon:hover {
    transform: translateY(-2px);
    box-shadow: var(--ae-shadow-hover) !important;
    border-color: var(--ae-border-strong) !important;
}

#order-standard_cart .panel-addon > .panel-body {
    padding: 20px !important;
    background: transparent !important;
    border: 0 !important;
    flex: 1 1 auto;
    color: var(--ae-ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
}
#order-standard_cart .panel-addon > .panel-body > label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ae-ink);
    margin-bottom: 10px;
    cursor: pointer;
}
#order-standard_cart .panel-addon > .panel-body > label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ae-primary);
    cursor: pointer;
}
/* Hide the orderform's auto-injected <br> after the label so the
   description sits flush */
#order-standard_cart .panel-addon > .panel-body > br { display: none; }

#order-standard_cart .panel-addon .panel-price {
    background: #fafaf8 !important;
    border-top: 1px solid var(--ae-border) !important;
    padding: 12px 16px !important;
    text-align: center;
    color: var(--ae-ink-soft);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
}

/* "+ Add to Cart" CTA — was bright green, now brand red */
#order-standard_cart .panel-addon .panel-add {
    background: var(--ae-primary) !important;
    background-color: var(--ae-primary) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 14px 18px !important;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    border: 0 !important;
    transition: background .15s ease, transform .05s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#order-standard_cart .panel-addon .panel-add:hover {
    background: var(--ae-primary-dark) !important;
    background-color: var(--ae-primary-dark) !important;
    transform: translateY(-1px);
}
#order-standard_cart .panel-addon .panel-add i { margin: 0; }

/* When an addon is already added — flip the CTA to a confirmed-green
   pill (Bootstrap had .panel-add-checked or similar; covering both). */
#order-standard_cart .panel-addon.checked .panel-add,
#order-standard_cart .panel-addon .panel-add.checked,
#order-standard_cart .panel-addon-checked .panel-add {
    background: #1f8a4f !important;
    background-color: #1f8a4f !important;
}

/* "Continue" / "Complete Order" big primary button at the bottom */
#order-standard_cart .text-center .btn-primary.btn-lg,
#order-standard_cart #btnCompleteOrder {
    padding: 14px 36px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--ae-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
#order-standard_cart .text-center .btn-primary.btn-lg:hover,
#order-standard_cart #btnCompleteOrder:hover {
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
    transform: translateY(-1px);
}

/* ── Checkout step (cart.php?a=checkout) ──────────────────────────
   Sections from the live HTML:
     - .already-registered  → "Please enter your personal..." intro
     - #containerExistingAccountSelect.account-select-container
         > .account [.active]  → selectable account card
     - .form-group.prepend-icon  → input with leading icon label
     - .alert-success#totalDueToday.large-text  → big total band
     - #paymentGatewaysContainer  → payment method radios
     - #frmCheckout > .text-center > #btnCompleteOrder
*/

/* Intro paragraph spacing */
#order-standard_cart .already-registered {
    margin: 0 0 18px;
}
#order-standard_cart .already-registered p {
    color: var(--ae-ink-soft);
    font-size: 14px;
    margin: 8px 0 0;
}

/* ── Account selector cards ───────────────────────────────────── */
#order-standard_cart .account-select-container {
    margin: 0 0 28px;
}
#order-standard_cart .account-select-container > [class*="col-"] {
    padding: 0 8px;
    margin-bottom: 8px;
}
#order-standard_cart .account {
    background: #fff;
    border: 2px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    padding: 18px 20px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    cursor: pointer;
    margin: 0;
}
#order-standard_cart .account:hover {
    border-color: var(--ae-border-strong);
    box-shadow: var(--ae-shadow-card);
}
#order-standard_cart .account.active,
#order-standard_cart .account:has(input[type="radio"]:checked) {
    border-color: var(--ae-primary) !important;
    background: var(--ae-primary-tint);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .08), var(--ae-shadow-card);
}
/* Conversely, when an account is NOT checked, force-strip .active
   so the visual stays in sync if orderform JS forgot to remove the
   class (e.g. on mobile where its 'change' handler can lag/skip). */
#order-standard_cart .account.active:not(:has(input[type="radio"]:checked)) {
    border-color: var(--ae-border) !important;
    background: #fff !important;
    box-shadow: none !important;
}
/* The radio inside — hide the native, draw our own */
#order-standard_cart .account .radio-inline {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    cursor: pointer;
}
#order-standard_cart .account input[type="radio"].account-select {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    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 .account input[type="radio"].account-select:checked {
    border-color: var(--ae-primary);
    background: var(--ae-primary);
}
#order-standard_cart .account input[type="radio"].account-select:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}
/* Account label content */
#order-standard_cart .account .address {
    flex: 1;
    color: var(--ae-ink);
    font-size: 14px;
    line-height: 1.5;
}
#order-standard_cart .account .address strong {
    font-weight: 700;
    color: var(--ae-ink);
    font-size: 15px;
}
#order-standard_cart .account .address .small {
    color: var(--ae-ink-soft);
    font-size: 13px;
    display: block;
    margin-top: 4px;
}
/* USD badge (Bootstrap .label-info → brand) */
#order-standard_cart .account .label,
#order-standard_cart .account .label-info,
#order-standard_cart .label.label-info {
    background: var(--ae-primary-tint) !important;
    color: var(--ae-primary) !important;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 100px;
    display: inline-block;
    margin-left: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* "Create a New Account" line — when not active, looks like a slim
   text row with a plain radio */
#order-standard_cart .account.border-bottom {
    border: 2px solid var(--ae-border);
    padding: 14px 20px;
}
#order-standard_cart .account.border-bottom .radio-inline {
    align-items: center;
    color: var(--ae-ink);
    font-weight: 600;
    font-size: 14px;
}

/* ── Inputs with leading icon (.form-group.prepend-icon) ─────────
   The orderform's all.min.css (loaded AFTER our custom.css) sets:
     .prepend-icon .field-icon { top:0; width:42px; height:36px;
                                  line-height:36px; position:absolute }
     .prepend-icon .field      { padding-left: 36px }
   When our input is taller than 36px the icon sticks to the top
   instead of centering. Use !important + height:100% + line-height
   matching the input min-height so the icon stays vertically
   centered no matter how tall the field grows. */
#order-standard_cart .form-group.prepend-icon {
    position: relative;
    margin-bottom: 14px;
}
#order-standard_cart .form-group.prepend-icon .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 44px !important;
    height: 100% !important;
    min-height: 44px;
    line-height: 44px !important;
    text-align: center;
    color: var(--ae-ink-faded) !important;
    margin: 0 !important;
    pointer-events: none;
    z-index: 2;
    transform: none !important;
}
#order-standard_cart .form-group.prepend-icon .field-icon i {
    color: var(--ae-ink-faded);
    font-size: 14px;
    line-height: 44px;
    vertical-align: middle;
    position: relative;
}
/* Apply padding-left to NON-tel inputs only. tel inputs are owned
   by intl-tel-input which sets its own padding inline based on
   the dial-code width; if we !important over it, iti's text gets
   crushed against its own flag dropdown. */
#order-standard_cart .form-group.prepend-icon .form-control:not([type="tel"]),
#order-standard_cart .form-group.prepend-icon .field:not([type="tel"]) {
    padding-left: 44px !important;
    height: auto;
    min-height: 44px;
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-border-strong);
    font-size: 14px;
    background-color: #fff !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* tel inputs: only chrome (no padding override) */
#order-standard_cart .form-group.prepend-icon input[type="tel"] {
    height: auto;
    min-height: 44px;
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-border-strong);
    font-size: 14px;
    background-color: #fff !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart .form-group.prepend-icon .form-control:focus,
#order-standard_cart .form-group.prepend-icon .field:focus {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
    outline: 0;
}
#order-standard_cart .form-group.prepend-icon .form-control:focus ~ .field-icon i,
#order-standard_cart .form-group.prepend-icon .field:focus ~ .field-icon i {
    color: var(--ae-primary);
}
/* Select inside prepend-icon */
#order-standard_cart .form-group.prepend-icon select.form-control {
    appearance: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%238E97A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 14px center / 12px no-repeat;
    padding-right: 36px !important;
}

/* Phone field with intl-tel-input.
   iti wraps the input in <div class="iti"> and inserts a country-
   selector (flag + dial code) that needs left padding of its own
   inside the input. Our prepend-icon overlay collides with iti's
   flag dropdown. Hide our icon, let iti own the left side, and
   give the wrapper full width so the input doesn't get squeezed. */
#order-standard_cart .form-group.prepend-icon .iti,
#order-standard_cart .form-group.prepend-icon .iti--allow-dropdown {
    display: block !important;
    width: 100%;
}
#order-standard_cart .form-group.prepend-icon:has(.iti) > .field-icon,
#order-standard_cart .form-group.prepend-icon:has(input[type="tel"]) > .field-icon {
    display: none !important;
}
/* Phone input: explicit 95px padding-left clears the iti flag +
   dial-code (~80px) on mobile + a small breathing gap so the
   user's digits never crash into the +971 prefix. */
#order-standard_cart .form-group.prepend-icon input[type="tel"] {
    padding-left: 95px !important;
}
#order-standard_cart .iti__flag-container,
#order-standard_cart .iti__country-list {
    z-index: 5;
}
#order-standard_cart .iti__selected-flag {
    border-radius: var(--ae-radius-sm) 0 0 var(--ae-radius-sm);
    padding: 0 8px 0 12px;
}

/* Standalone select like Domain Registrant dropdown */
#order-standard_cart select.form-control {
    appearance: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%238E97A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 14px center / 12px no-repeat;
    padding-right: 36px;
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-border-strong);
    min-height: 44px;
    font-size: 14px;
}

/* ── Total Due Today big band ──────────────────────────────────── */
#order-standard_cart #totalDueToday.alert-success,
#order-standard_cart .alert-success.large-text {
    background: linear-gradient(180deg, #fff 0%, var(--ae-primary-tint) 100%) !important;
    border: 1px solid rgba(200, 16, 46, .2) !important;
    border-left: 4px solid var(--ae-primary) !important;
    color: var(--ae-ink) !important;
    border-radius: var(--ae-radius-md) !important;
    padding: 22px 24px !important;
    margin: 28px 0 22px !important;
    font-size: 18px !important;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--ae-shadow-card);
}
#order-standard_cart #totalDueToday strong,
#order-standard_cart #totalCartPrice {
    color: var(--ae-primary) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-left: 6px;
    letter-spacing: -.005em;
}

/* ── Payment method radios ─────────────────────────────────────── */
#order-standard_cart #paymentGatewaysContainer {
    margin: 0 0 24px;
}
#order-standard_cart #paymentGatewaysContainer > p.small {
    color: var(--ae-ink-soft);
    font-size: 13px;
    margin: 0 0 12px;
    text-align: center;
}
#order-standard_cart #paymentGatewaysContainer .text-center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline {
    margin: 0;
    padding: 12px 22px;
    background: #fff;
    border: 2px solid var(--ae-border);
    border-radius: 100px;
    font-weight: 600;
    color: var(--ae-ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
}
#order-standard_cart #paymentGatewaysContainer input[type="radio"].payment-methods {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ae-border-strong);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s ease, background .15s ease;
}
#order-standard_cart #paymentGatewaysContainer input[type="radio"].payment-methods:checked {
    border-color: var(--ae-primary);
    background: var(--ae-primary);
}
#order-standard_cart #paymentGatewaysContainer input[type="radio"].payment-methods:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
/* Whole pill goes red-tint when its radio is checked (CSS :has) */
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input.payment-methods:checked) {
    border-color: var(--ae-primary);
    background: var(--ae-primary-tint);
    color: var(--ae-primary);
}

/* ── Notes textarea ────────────────────────────────────────────── */
#order-standard_cart textarea.form-control,
#order-standard_cart textarea.field {
    border-radius: var(--ae-radius-sm);
    border: 1px solid var(--ae-border-strong);
    padding: 14px 16px;
    font-size: 14px;
    min-height: 110px;
    transition: border-color .15s ease, box-shadow .15s ease;
    resize: vertical;
}
#order-standard_cart textarea.form-control:focus,
#order-standard_cart textarea.field:focus {
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
    outline: 0;
}

/* "Description" / paragraphs in form sections */
#order-standard_cart .small.text-muted,
#order-standard_cart p.small {
    color: var(--ae-ink-soft) !important;
    font-size: 13px;
    line-height: 1.55;
}

/* ── Security notice at the bottom ───────────────────────────────
   The alert markup mixes raw text nodes with <strong> and <i>
   children. Using display:flex turned each text run into its own
   flex item, splitting the message into 3 columns. Use absolute
   positioning for the icon instead — body text flows as a single
   continuous block beside it. */
#order-standard_cart .checkout-security-msg.alert-warning {
    position: relative;
    background: #fafaf8;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink-soft);
    font-size: 13px;
    line-height: 1.55;
    padding: 16px 20px 16px 56px;
    margin-top: 28px;
    text-align: left;
}
#order-standard_cart .checkout-security-msg.alert-warning > i,
#order-standard_cart .checkout-security-msg.alert-warning .fa-lock {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    /* orderform's all.min.css sets `.checkout-security-msg i {
       float:left; margin-left:-48px; font-size:2.8em }` which
       drags the icon outside the box. Reset all three. */
    margin: 0 !important;
    float: none !important;
    color: var(--ae-primary);
    font-size: 22px !important;
    line-height: 1;
}
#order-standard_cart .checkout-security-msg.alert-warning strong {
    color: var(--ae-ink);
    font-weight: 700;
}
/* The orderform appends a trailing <div class="clearfix"> — hide it. */
#order-standard_cart .checkout-security-msg.alert-warning .clearfix {
    display: none;
}

/* ── List pages (My Domains, My Services, Invoices, Tickets…) ────
   These pages share a common layout in WHMCS: a row of action
   buttons on top, then a DataTables-powered listing with a search
   box, sortable headers, "X to Y of Z" info, length selector and
   pagination. Same selectors style every such page consistently. */

/* Page heading */
.primary-content > h1,
.primary-content > .page-header h1,
.primary-content > .page-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ae-ink);
    margin: 0 0 20px;
    letter-spacing: -.02em;
}

/* Action toolbar (Manage Nameservers / Edit Contact / Renew / More…) */
.primary-content .btn-toolbar {
    margin: 0 0 18px;
    gap: 8px;
    flex-wrap: wrap;
}
.primary-content .btn-toolbar .btn-group { gap: 8px; }
.primary-content .btn-toolbar .btn,
.primary-content > .btn-group > .btn,
.primary-content .btn-default {
    background: #fff;
    border: 1px solid var(--ae-border);
    color: var(--ae-ink);
    border-radius: var(--ae-radius-sm);
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(15, 17, 21, .04);
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .05s ease;
}
.primary-content .btn-toolbar .btn i,
.primary-content > .btn-group > .btn i,
.primary-content .btn-default i {
    color: var(--ae-ink-soft);
    margin-right: 6px;
}
.primary-content .btn-toolbar .btn:hover,
.primary-content > .btn-group > .btn:hover,
.primary-content .btn-default:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
    background: var(--ae-primary-tint);
    transform: translateY(-1px);
}
.primary-content .btn-toolbar .btn:hover i,
.primary-content .btn-default:hover i {
    color: var(--ae-primary);
}

/* DataTables wrapper — turn it into a single rounded card */
.primary-content .dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-radius-md);
    box-shadow: var(--ae-shadow-card);
    padding: 18px 22px 20px;
    margin: 0 0 24px;
}

/* Top row: "Showing X to Y" + search */
.primary-content .dataTables_info {
    color: var(--ae-ink-soft);
    font-size: 13px;
    padding-top: 10px;
}
.primary-content .dataTables_filter {
    text-align: right;
    margin-bottom: 8px;
}
.primary-content .dataTables_filter label {
    margin: 0;
    width: 100%;
    max-width: 320px;
}
.primary-content .dataTables_filter input,
.primary-content .dataTables_filter input[type="search"] {
    width: 100%;
    border: 1px solid var(--ae-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 10px 14px 10px 36px;
    font-size: 14px;
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238E97A8' stroke-width='2' stroke-linecap='round'><circle cx='7' cy='7' r='5'/><path d='M14 14l-3-3'/></svg>")
        no-repeat 12px center / 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.primary-content .dataTables_filter input:focus {
    outline: 0;
    border-color: var(--ae-primary);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

/* The table itself */
.primary-content .dataTables_wrapper table.dataTable,
.primary-content .table {
    margin: 12px 0 14px !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
    /* DataTables computes column widths during init, but on pages
       where the table is rendered inside .w-hidden it can't measure
       hidden cells and writes inline style="width: 0px" on every <th>
       except the fixed checkbox col. Force table-layout:auto + auto
       widths to override those zero-width inline styles. */
    table-layout: auto !important;
}
.primary-content .dataTables_wrapper table.dataTable thead th,
.primary-content .dataTables_wrapper table.dataTable tbody td {
    width: auto !important;
}
.primary-content .dataTables_wrapper table.dataTable thead th.width-fixed-20 {
    width: 32px !important;
}
.primary-content .dataTables_wrapper table.dataTable thead th,
.primary-content .table thead th {
    background: #fafaf8 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ae-border) !important;
    padding: 12px 14px !important;
    font-weight: 700;
    font-size: 12px;
    color: var(--ae-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    text-align: left !important;
}
/* Sort arrow positioned at the right side of each sortable header */
.primary-content .dataTables_wrapper table.dataTable thead th.sorting,
.primary-content .dataTables_wrapper table.dataTable thead th.sorting_asc,
.primary-content .dataTables_wrapper table.dataTable thead th.sorting_desc {
    position: relative;
    padding-right: 28px !important;
}
.primary-content .dataTables_wrapper table.dataTable thead th.sorting::after,
.primary-content .dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.primary-content .dataTables_wrapper table.dataTable thead th.sorting_desc::after {
    right: 8px !important;
}
/* Kill the legacy ::before sort glyph the WHMCS Twenty-One theme paints
   on the left of header text — keep only the ::after arrow on the right. */
.primary-content .dataTables_wrapper table.dataTable thead th::before {
    display: none !important;
    content: none !important;
}
.primary-content .dataTables_wrapper table.dataTable thead th:first-child,
.primary-content .table thead th:first-child {
    border-top-left-radius: var(--ae-radius-sm);
}
.primary-content .dataTables_wrapper table.dataTable thead th:last-child,
.primary-content .table thead th:last-child {
    border-top-right-radius: var(--ae-radius-sm);
}
.primary-content .dataTables_wrapper table.dataTable tbody td,
.primary-content .table tbody td {
    padding: 16px !important;
    border-top: 1px solid var(--ae-border);
    vertical-align: middle;
    color: var(--ae-ink);
    font-size: 14px;
}
.primary-content .dataTables_wrapper table.dataTable tbody tr:hover,
.primary-content .table tbody tr:hover {
    background: var(--ae-primary-tint) !important;
}

/* Hide the now-empty SSL column on the domains list. The <td>/<th>
   are kept in the DOM so DataTables' zero-based column indices in
   clientareadomains.tpl (tablelist.tpl include + table.order calls)
   remain valid. Removing the cells in markup shifts every index and
   breaks the table init. */
#tableDomainsList thead th:nth-child(2),
#tableDomainsList tbody td:nth-child(2) {
    display: none;
}

/* Empty state row */
.primary-content .dataTables_empty {
    text-align: center !important;
    color: var(--ae-ink-soft) !important;
    padding: 48px 16px !important;
    font-size: 15px;
    font-weight: 500;
}

/* DataTables sort arrows — replace the default with subtle chevrons */
.primary-content table.dataTable thead .sorting,
.primary-content table.dataTable thead .sorting_asc,
.primary-content table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 28px !important;
    background-image: none !important;
}
.primary-content table.dataTable thead .sorting::after,
.primary-content table.dataTable thead .sorting_asc::after,
.primary-content table.dataTable thead .sorting_desc::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 6px;
    margin-top: -3px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%238E97A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    opacity: .6;
    transition: transform .15s ease, opacity .15s ease;
}
.primary-content table.dataTable thead .sorting_asc::after {
    transform: rotate(180deg);
    opacity: 1;
}
.primary-content table.dataTable thead .sorting_desc::after {
    opacity: 1;
}

/* Bottom row: length select + pagination */
.primary-content .dataTables_length {
    color: var(--ae-ink-soft);
    font-size: 13px;
    padding-top: 12px;
}
.primary-content .dataTables_length select,
.primary-content .dataTables_length .custom-select {
    border: 1px solid var(--ae-border-strong);
    border-radius: var(--ae-radius-sm);
    padding: 6px 28px 6px 12px;
    background-color: #fff;
    font-size: 13px;
    color: var(--ae-ink);
    margin: 0 6px;
    cursor: pointer;
}

/* Pagination — pill buttons that turn red on current/hover.

   DataTables Bootstrap integration puts class="paginate_button" on the
   <li> wrapper, not on the inner <a>. Styling .paginate_button + its
   inner .page-link would draw two stacked borders. We style only the
   <a class="page-link"> and strip any border that lands on the <li>. */

.primary-content .dataTables_paginate {
    padding-top: 8px;
}
.primary-content .dataTables_paginate .pagination .page-item {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 2px !important;
}
.primary-content .dataTables_paginate .pagination .page-item .page-link {
    border: 1px solid var(--ae-border) !important;
    background: #fff !important;
    color: var(--ae-ink) !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}
.primary-content .dataTables_paginate .pagination .page-item .page-link:hover {
    background: var(--ae-primary-tint) !important;
    color: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
}
.primary-content .dataTables_paginate .pagination .page-item.active .page-link {
    background: var(--ae-primary) !important;
    color: #fff !important;
    border-color: var(--ae-primary) !important;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25);
}
.primary-content .dataTables_paginate .pagination .page-item.disabled .page-link {
    opacity: .5 !important;
    cursor: not-allowed !important;
    background: #fafaf8 !important;
    color: var(--ae-ink-faded) !important;
}

/* Dropdown menu inside the toolbar (the "More..." button) — re-skin to
   match the main-nav dropdown style we already built */
.primary-content .btn-toolbar .dropdown-menu,
.primary-content > .btn-group .dropdown-menu {
    border: 0;
    border-radius: 14px;
    padding: 8px 0;
    margin-top: 6px;
    min-width: 220px;
    box-shadow:
        0 18px 48px -10px rgba(15, 26, 46, .25),
        0 6px 16px -6px rgba(15, 26, 46, .1);
}
.primary-content .btn-toolbar .dropdown-menu .dropdown-item,
.primary-content > .btn-group .dropdown-menu .dropdown-item {
    padding: 10px 18px;
    font-weight: 500;
    color: var(--ae-ink);
    font-size: 14px;
    transition: background .12s ease, color .12s ease;
}
.primary-content .btn-toolbar .dropdown-menu .dropdown-item:hover,
.primary-content > .btn-group .dropdown-menu .dropdown-item:hover {
    background: var(--ae-primary-tint);
    color: var(--ae-primary);
}

/* Catch any "Powered by" text-only branding the WHMCS PHP injects
   (the link-only selector earlier missed plain-text variants). */
small:has(> a[href*="whmcs"]),
.text-center:has(> a[href*="whmcs"]),
.copyright-text,
.powered-by {
    display: none !important;
}

/* Dev License banner — softer */
.alert-warning:first-of-type {
    border-radius: var(--ae-radius-sm);
    margin: 10px 0 24px;
    border-color: rgba(0, 0, 0, .06);
}

/* ── Final overrides: load-order winners ────────────────────────
   These rules sit at the bottom of the file so they always win
   against the orderform's all.min.css that loads after our file.
   Per explicit user request — keep these here. */

#order-standard_cart .sub-heading {
    margin-top: 30px !important;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    top: -20px !important;
    position: relative !important;
}

/* All form inputs / selects / textareas in cart get white bg */
#order-standard_cart .form-control,
#order-standard_cart select.form-control,
#order-standard_cart textarea.form-control,
#order-standard_cart .field,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="number"],
#order-standard_cart input[type="search"],
#order-standard_cart select,
#order-standard_cart textarea {
    background-color: #fff !important;
}

/* ── Sticky cart bar + slide-out drawer ─────────────────────────
   Mirrors the .aeds-cart-bar / .aeds-cart-drawer pattern from the
   main aeserver.com domain-search widget so visitors see the same
   on-site cart UX in WHMCS. Markup lives in includes/cart-bar.tpl
   (rendered when $cartitemcount > 0); JS in js/cart-bar.js fetches
   items via AJAX from /cart.php?a=checkout. Prefix is `ae-cart-`
   (not `aeds-`) to avoid collisions if the widget loads on the
   same page. */

/* Bar */
.ae-cart-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(1100px, calc(100% - 32px));
    background: #fff;
    border: 1px solid var(--ae-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 26, 46, .14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    /* Above any theme/footer/header surface. Using a 6-digit value to
       sit above Bootstrap modals (1050), tooltips (1070), and any
       legacy z-index in theme.css. isolation:isolate gives the bar
       its own stacking context independent of ancestors. */
    z-index: 999990 !important;
    isolation: isolate;
    gap: 16px;
    font-family: inherit;
    animation: aeCartBarIn .25s ease;
}
/* Author CSS above sets display:flex which would defeat the UA
   default for [hidden]. Explicit rule reinstates the hide. */
.ae-cart-bar[hidden] { display: none !important; }

/* Hide the sticky cart bar + drawer on the "Choose a Domain" step
   (configureproductdomain.tpl). That page has its own Continue
   button; the bar's Checkout competed for attention and users were
   skipping the domain step. URL-based detection isn't reliable here
   (SEO-friendly URLs don't carry ?a=). Match the page by the unique
   form ID rendered only on that step. */
body:has(#frmProductDomain) .ae-cart-bar,
body:has(#frmProductDomain) .ae-cart-drawer {
    display: none !important;
}

/* Empty-Cart confirm modal needs to sit ABOVE the drawer (z 999999)
   and the bar (z 999990). Bootstrap's defaults are 1050 / 1040 which
   put it underneath the drawer's overlay. JS adds the
   .ae-empty-cart-open class to <body> while this specific modal is
   visible so we can bump the backdrop too without affecting other
   modals on the page. */
#aeCartEmptyConfirm { z-index: 1000010 !important; }
body.ae-empty-cart-open .modal-backdrop { z-index: 1000005 !important; }

/* Drawer "Empty Cart" row — sits between the items list and the
   subtotal/checkout footer. Subtle ghost button, brand-red on hover. */
.ae-cart-drawer-empty {
    border-top: 1px solid var(--ae-border, #e8e8e6);
    padding: 12px 20px;
    background: #fafafa;
    text-align: center;
}
.ae-cart-empty-btn {
    background: transparent;
    border: 0;
    color: var(--ae-ink-faded, #6b7280);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 14px;
    border-radius: var(--ae-radius-sm, 8px);
    cursor: pointer;
    transition: color .15s, background .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ae-cart-empty-btn:hover {
    color: var(--ae-primary, #c8102e);
    background: rgba(200, 16, 46, .08);
}
.ae-cart-empty-btn:disabled {
    opacity: .6;
    cursor: progress;
}
.ae-cart-empty-btn i { font-size: 12px; }

/* ── Cart confirm modals (Remove item / Empty Cart) ──────────────
   Bootstrap default leaves the dialog at the top-left and the
   <i class="fa-3x"> icon takes ~48px which dwarfs the title. Centre
   the dialog vertically and shrink the icon to a clean inline scale. */
.modal.modal-remove-item .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    max-width: 440px;
    margin: 0.5rem auto;
}
.modal.modal-remove-item .modal-content {
    border: 0;
    border-radius: var(--ae-radius-md);
    box-shadow: 0 24px 60px -12px rgba(15, 26, 46, .35);
    overflow: hidden;
}
.modal.modal-remove-item .modal-body {
    padding: 24px 24px 18px;
}
.modal.modal-remove-item .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px !important;
    font-size: 18px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.005em;
}
.modal.modal-remove-item .modal-title .fas,
.modal.modal-remove-item .modal-title .fa-3x {
    font-size: 22px !important;
    color: var(--ae-primary);
    width: 36px;
    height: 36px;
    background: var(--ae-primary-tint);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal.modal-remove-item .modal-body > div:not(.modal-title):not(.float-right) {
    color: var(--ae-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}
.modal.modal-remove-item .modal-body {
    color: var(--ae-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}
.modal.modal-remove-item .modal-body > .float-right {
    margin: -8px -8px 0 0;
}
.modal.modal-remove-item .modal-body .close {
    color: var(--ae-ink-faded);
    opacity: 1;
    font-size: 22px;
    transition: color .15s ease;
}
.modal.modal-remove-item .modal-body .close:hover {
    color: var(--ae-ink);
}

/* Footer — brand-aligned No/Yes buttons */
.modal.modal-remove-item .modal-footer {
    border-top: 1px solid var(--ae-border);
    padding: 14px 24px;
    gap: 8px;
}
.modal.modal-remove-item .modal-footer .btn-default {
    background: #fff;
    border: 1px solid var(--ae-border-strong);
    color: var(--ae-ink);
    border-radius: var(--ae-radius-sm);
    padding: 9px 22px;
    font-weight: 600;
}
.modal.modal-remove-item .modal-footer .btn-default:hover {
    border-color: var(--ae-ink);
    background: #fff;
}
.modal.modal-remove-item .modal-footer .btn-primary {
    background: var(--ae-primary);
    border-color: var(--ae-primary);
    color: #fff;
    border-radius: var(--ae-radius-sm);
    padding: 9px 24px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
}
.modal.modal-remove-item .modal-footer .btn-primary:hover {
    background: var(--ae-primary-dark);
    border-color: var(--ae-primary-dark);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* ── TLD pricing table (.domain-pricing) ─────────────────────────
   Used on /domain-pricing.php (theme/domain-pricing.tpl) and on the
   domain-register search page (orderforms/aeserver_cart/domainregister
   .tpl). Same markup in both, so one rule set covers both pages. */

.domain-pricing {
    margin: 28px auto;
    max-width: 1100px;
}
.domain-pricing > h4,
.domain-pricing > .font-size-18 {
    font-size: 22px !important;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
    margin: 0 0 16px;
}

/* Category filter pills */
.domain-pricing .tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.domain-pricing .tld-filters .badge,
.domain-pricing .tld-filters .badge-secondary {
    background: #fff !important;
    border: 1px solid var(--ae-border-strong) !important;
    color: var(--ae-ink) !important;
    border-radius: 100px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .05s ease;
    letter-spacing: 0;
    text-transform: none;
}
.domain-pricing .tld-filters .badge:hover {
    border-color: var(--ae-ink) !important;
    color: var(--ae-ink) !important;
    transform: translateY(-1px);
}
/* Active state — orderform JS toggles .badge-success */
.domain-pricing .tld-filters .badge.badge-success {
    background: var(--ae-primary) !important;
    border-color: var(--ae-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
}
.domain-pricing .tld-filters .badge.badge-success:hover {
    background: var(--ae-primary-dark) !important;
    border-color: var(--ae-primary-dark) !important;
    color: #fff !important;
}

/* Table card */
.domain-pricing .bg-white {
    background: #fff !important;
    border: 1px solid var(--ae-border) !important;
    border-radius: var(--ae-radius-md);
    box-shadow: var(--ae-shadow-card);
    overflow: hidden;
}

/* Header band — dark ink like the cart's Product/Options bar.
   theme.css [12713-12736] paints the inner price-column cells
   (.col-xs-4 / .col-sm-4) with #efefef background + 6px #97b5d2
   border-bottom + alternating #f5f5f5 on odd cells. Force-clear
   ALL of those on every descendant of the header so the navy
   band stays solid. */
.domain-pricing .tld-pricing-header {
    background: var(--ae-ink) !important;
    color: #fff !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    min-height: 0;
}
/* Reset every DESCENDANT (note: no parent selector here — earlier
   version included the parent and zeroed its own padding too,
   which made the band squashed flat). */
.domain-pricing .tld-pricing-header * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Rows */
.domain-pricing .tld-row {
    border-top: 1px solid var(--ae-border);
    padding: 16px 0;
    margin: 0 !important;
    transition: background .12s ease;
    align-items: center;
}
.domain-pricing .tld-row:hover {
    background: var(--ae-primary-tint);
}
.domain-pricing .tld-row .two-row-center {
    display: flex;
    align-items: center;
    padding: 0 22px !important;
}
.domain-pricing .tld-row .two-row-center strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--ae-primary);
    letter-spacing: -.005em;
}

/* Price cells */
.domain-pricing .tld-row .col-md-8 .row {
    margin: 0;
    align-items: center;
}
.domain-pricing .tld-row .col-md-8 .row > [class*="col-"] {
    padding: 0 8px;
    color: var(--ae-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}
.domain-pricing .tld-row .col-md-8 .row > [class*="col-"] small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ae-ink-soft);
    letter-spacing: 0;
}

/* "Please choose a category from above" empty state */
.domain-pricing .no-tlds {
    border-top: 1px solid var(--ae-border);
    padding: 36px 20px !important;
    color: var(--ae-ink-soft);
    font-size: 15px;
    text-align: center;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .domain-pricing .tld-pricing-header .col-md-8 > .row {
        display: none;  /* hide column subtitles on mobile, just show "Domain" */
    }
    .domain-pricing .tld-row {
        padding: 14px 0;
    }
    .domain-pricing .tld-row .two-row-center {
        margin-bottom: 8px;
    }
}
@keyframes aeCartBarIn {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.ae-cart-bar-summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--ae-ink);
    font-family: inherit;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.ae-cart-bar-summary > i {
    font-size: 18px;
    color: var(--ae-primary);
    flex-shrink: 0;
}
.ae-cart-bar-summary-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.ae-cart-bar-count {
    font-size: 13px;
    color: var(--ae-ink-soft);
    font-weight: 500;
}
.ae-cart-bar-total {
    font-size: 18px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.005em;
    min-height: 22px;
}
.ae-cart-bar-total:empty::before {
    content: '';
    display: inline-block;
    width: 70px;
    height: 16px;
    background: linear-gradient(90deg, #eee 0%, #f6f6f6 50%, #eee 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: aeCartShimmer 1.2s infinite;
}
@keyframes aeCartShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ae-cart-bar-actions {
    display: inline-flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Buttons */
.ae-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    white-space: nowrap;
}
.ae-cart-btn--primary {
    background: var(--ae-primary);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
}
.ae-cart-btn--primary:hover {
    background: var(--ae-primary-dark);
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
    transform: translateY(-1px);
}
.ae-cart-btn--ghost {
    background: #fff;
    color: var(--ae-ink) !important;
    border: 1px solid var(--ae-border-strong);
}
.ae-cart-btn--ghost:hover {
    background: var(--ae-primary-tint);
    color: var(--ae-primary) !important;
    border-color: var(--ae-primary);
}
.ae-cart-btn--full {
    width: 100%;
    justify-content: center;
}

/* Drawer */
.ae-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 999999 !important;
    isolation: isolate;
}
.ae-cart-drawer[hidden] { display: none; }
.ae-cart-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 26, 46, .45);
    animation: aeCartFade .2s ease;
}
.ae-cart-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    background: #fff;
    box-shadow: -8px 0 32px rgba(15, 26, 46, .18);
    display: flex;
    flex-direction: column;
    animation: aeCartSlide .25s ease;
    font-family: inherit;
}
@keyframes aeCartFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aeCartSlide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.ae-cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ae-border);
}
.ae-cart-drawer-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
}
.ae-cart-close-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: var(--ae-ink-soft);
    transition: background .15s ease, color .15s ease;
}
.ae-cart-close-btn:hover {
    background: var(--ae-page-bg);
    color: var(--ae-ink);
}

.ae-cart-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ae-cart-drawer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--ae-ink-faded);
    font-size: 18px;
}
.ae-cart-empty {
    text-align: center;
    color: var(--ae-ink-faded);
    padding: 40px 20px;
    font-size: 14px;
}
.ae-cart-error {
    color: #b3261e;
    font-size: 13px;
    padding: 12px 16px;
    background: rgba(200, 16, 46, .06);
    border-radius: 8px;
}
.ae-cart-error a { color: var(--ae-primary); }

.ae-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--ae-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ae-cart-item:hover {
    border-color: var(--ae-border-strong);
    box-shadow: 0 2px 8px rgba(15, 17, 21, .04);
}
.ae-cart-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ae-cart-item-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ae-primary);
    letter-spacing: -.005em;
    word-break: break-all;
}
.ae-cart-item-cycle {
    font-size: 12px;
    color: var(--ae-ink-soft);
    font-weight: 500;
}
.ae-cart-item-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--ae-ink);
    white-space: nowrap;
    letter-spacing: -.005em;
}
/* Edit + Remove actions per item */
.ae-cart-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ae-cart-item-edit,
.ae-cart-item-remove {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ae-border);
    background: #fff;
    border-radius: 8px;
    color: var(--ae-ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none !important;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
    padding: 0;
}
.ae-cart-item-edit:hover,
.ae-cart-item-remove:hover {
    border-color: var(--ae-primary);
    color: var(--ae-primary);
    background: var(--ae-primary-tint);
}
.ae-cart-item-remove:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ae-cart-drawer-foot {
    border-top: 1px solid var(--ae-border);
    padding: 18px 22px 22px;
    background: #fff;
}
.ae-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.ae-cart-subtotal span {
    font-size: 14px;
    color: var(--ae-ink-soft);
    font-weight: 600;
}
.ae-cart-subtotal strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--ae-ink);
    letter-spacing: -.01em;
}

/* Mobile */
@media (max-width: 600px) {
    .ae-cart-bar {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
        bottom: 8px;
        width: calc(100% - 16px);
    }
    .ae-cart-bar-actions {
        width: 100%;
        justify-content: space-between;
    }
    .ae-cart-bar-actions .ae-cart-btn {
        flex: 1;
        justify-content: center;
    }
    .ae-cart-bar-summary { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   CLIENT AREA HOME — modern restyle
   File: theme/clientareahome.tpl
   ════════════════════════════════════════════════════════════════ */

/* Hide stock tile/card chrome we replace below — keeps WHMCS hooks
   that target .tiles or .card-accent-* working but the visual
   weight is ours. */
.ae-clienthome-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.ae-clienthome-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid var(--ae-border, #e8e8e6);
    border-radius: var(--ae-radius-md, 12px);
    text-decoration: none !important;
    color: var(--ae-ink, #0F1A2E) !important;
    position: relative;
    overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ae-clienthome-tile:hover {
    transform: translateY(-2px);
    border-color: var(--ae-border-strong, #d4d4d2);
    box-shadow: 0 6px 20px -8px rgba(15, 26, 46, .12);
}
.ae-clienthome-tile-icon {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 26px;
    color: var(--ae-border-strong, #d4d4d2);
    transition: color .15s;
}
.ae-clienthome-tile:hover .ae-clienthome-tile-icon {
    color: var(--ae-primary, #c8102e);
}
.ae-clienthome-tile-stat {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ae-primary, #c8102e);
    letter-spacing: -.02em;
}
.ae-clienthome-tile-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ae-ink-faded, #6b7280);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Recommended-for-you carousel addon HTML wrapper */
.ae-clienthome-addon { margin-bottom: 24px; }

/* Two-column main grid */
.ae-clienthome-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
.ae-clienthome-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0; /* allow text truncation inside */
}
.ae-clienthome-row-full { margin-bottom: 16px; }

@media (max-width: 991.98px) {
    .ae-clienthome-grid { grid-template-columns: 1fr; }
}

/* ── Hide the "Search for" panel from the client home grid ──
   Each panel inherits its WHMCS menu name via the menuItemName
   attribute (set by outputHomePanels in clientareahome.tpl).
   Match by substring so the rule still hits if the name varies
   between WHMCS versions / addons. If a different "Search…" panel
   gets caught too, tighten this to the exact name. */
.ae-clienthome [menuItemName="Search" i],
.ae-clienthome-col [menuItemName="Search" i],
.ae-clienthome-col [menuItemName*="Search Form" i],
.ae-clienthome-col [menuItemName*="Site Search" i] {
    display: none !important;
}

/* ── Hide the "Search for" panel from the client home grid ──
   ClientManager addon renders it with menuItemName=
   'ws_clientmanager_search' on both the outer card and the inner
   list-item. Match by attribute + ID prefix as a defensive
   fallback. */
[menuitemname="ws_clientmanager_search"],
[id^="ClientAreaHomePagePanels-ws_clientmanager_search"],
.ae-clienthome-card:has([id^="ClientAreaHomePagePanels-ws_clientmanager_search"]) {
    display: none !important;
}

/* ── Generic panel card restyle (replaces card-accent-* rainbow) ─── */
.ae-clienthome-card {
    border: 1px solid var(--ae-border, #e8e8e6) !important;
    border-radius: var(--ae-radius-md, 12px) !important;
    background: #fff;
    box-shadow: none;
    /* overflow stays visible so service-row dropdowns (Log in to
       WHM / cPanel / Webmail) can extend outside the card. The
       inner children all use the same white bg so the rounded
       corners stay clean without clipping. */
    overflow: visible !important;
    margin: 0 !important;
    transition: border-color .15s, box-shadow .15s;
}
.ae-clienthome-card .dropdown-menu {
    z-index: 1050;
}
.ae-clienthome-card:hover {
    border-color: var(--ae-border-strong, #d4d4d2) !important;
}
.ae-clienthome-card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--ae-border, #e8e8e6);
    padding: 14px 20px;
}
.ae-clienthome-card .card-title {
    font-size: 15px !important;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    letter-spacing: -.005em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ae-clienthome-card .card-title > i:first-child {
    color: var(--ae-primary, #c8102e);
    font-size: 14px;
}
.ae-clienthome-card .card-body {
    padding: 18px 20px;
    color: var(--ae-ink-soft, #4a5160);
    font-size: 14px;
    line-height: 1.55;
}
.ae-clienthome-card .card-body p { margin: 0; }
.ae-clienthome-card .card-footer {
    background: #fafafa;
    border-top: 1px solid var(--ae-border, #e8e8e6);
    padding: 10px 20px;
}
.ae-clienthome-card .card-footer:empty { display: none; }
.ae-clienthome-card .list-group-flush > .list-group-item:first-child { border-top: 0; }
.ae-clienthome-card .list-group-item {
    border-color: var(--ae-border, #e8e8e6);
    padding: 12px 20px;
    font-size: 14px;
    color: var(--ae-ink, #0F1A2E);
}
.ae-clienthome-card .list-group-item:hover {
    background: #fafafa;
}
.ae-clienthome-card .list-group-item small,
.ae-clienthome-card .list-group-item .text-last-updated {
    display: block;
    color: var(--ae-ink-faded, #6b7280);
    font-size: 12px;
    margin-top: 2px;
}

/* The CTA button is rendered FIRST in the source as a <div class=
   "float-right"> wrapper, but .card-title is a flex container so
   `float: right` is ignored. Push the wrapper visually to the END
   of the flex via order:99 + margin-left:auto so the icon + title
   stay on the left and the button hugs the right edge. */
.ae-clienthome-card .card-title > .float-right {
    order: 99;
    margin-left: auto;
}

/* Header CTA button (My Services / Pay Now / Renew Now…)
   Stock used .bg-color-* to fill the button — neutralise with a
   ghost-style brand-red button. */
.ae-clienthome-card-cta.btn {
    background: transparent !important;
    border: 1px solid var(--ae-primary, #c8102e) !important;
    color: var(--ae-primary, #c8102e) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: var(--ae-radius-sm, 8px) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.ae-clienthome-card-cta.btn:hover {
    background: var(--ae-primary, #c8102e) !important;
    color: #fff !important;
}
.ae-clienthome-card-cta i { margin-right: 4px; }

/* Drop the colored-top border accents — they read as 2010 */
.ae-clienthome-card.card-accent-gold,
.ae-clienthome-card.card-accent-red,
.ae-clienthome-card.card-accent-blue,
.ae-clienthome-card.card-accent-green,
.ae-clienthome-card.card-accent-emerald,
.ae-clienthome-card.card-accent-teal,
.ae-clienthome-card.card-accent-asbestos,
.ae-clienthome-card.card-accent-midnight-blue,
.ae-clienthome-card.card-accent-pomegranate,
.ae-clienthome-card.card-accent-sun-flower {
    border-top: 1px solid var(--ae-border, #e8e8e6) !important;
}

/* ── Right column: Register a New Domain "hero" ──────────────────
   Pinned to top of the side column, given more vertical presence
   and a soft brand tint so it reads as the primary CTA on the page. */
.ae-clienthome-domain-hero .ae-clienthome-card {
    border: 1px solid rgba(200, 16, 46, .25) !important;
    background: linear-gradient(180deg, rgba(200, 16, 46, .04) 0%, #fff 65%);
    box-shadow: 0 4px 18px -8px rgba(200, 16, 46, .15);
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 22px 22px 4px;
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-title {
    font-size: 18px !important;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-title > i:first-child {
    font-size: 18px;
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-body {
    padding: 14px 22px 22px;
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-body::before {
    content: 'Find your perfect domain. .com / .ae / .qa and 50+ TLDs available.';
    display: block;
    font-size: 13px;
    color: var(--ae-ink-faded, #6b7280);
    margin-bottom: 14px;
    line-height: 1.5;
}
/* Override Bootstrap's horizontal input-group → vertical stack: input
   on top full-width, two buttons in a tight row below. */
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .form-control {
    display: block;
    width: 100% !important;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ae-ink, #0F1A2E);
    background: #fff;
    border: 1px solid var(--ae-border, #e8e8e6) !important;
    border-radius: var(--ae-radius-sm, 8px) !important;
    box-shadow: 0 2px 8px -4px rgba(15, 26, 46, .08);
    transition: border-color .15s, box-shadow .15s;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .form-control:focus {
    border-color: var(--ae-primary, #c8102e) !important;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
    outline: none;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group-btn,
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group-append {
    display: flex !important;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .btn {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    border-radius: var(--ae-radius-sm, 8px) !important;
    border: 1px solid transparent !important;
    transition: background .15s, color .15s, border-color .15s;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .btn-success {
    background: var(--ae-primary, #c8102e) !important;
    color: #fff !important;
    border-color: var(--ae-primary, #c8102e) !important;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .btn-success:hover {
    background: var(--ae-primary-dark, #a00b25) !important;
    border-color: var(--ae-primary-dark, #a00b25) !important;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .btn-default {
    background: #fff !important;
    color: var(--ae-ink, #0F1A2E) !important;
    border-color: var(--ae-border, #e8e8e6) !important;
}
.ae-clienthome-domain-hero .ae-clienthome-card form .input-group .btn-default:hover {
    background: #fafafa !important;
    border-color: var(--ae-border-strong, #d4d4d2) !important;
}
.ae-clienthome-domain-hero .ae-clienthome-card .card-footer { display: none; }

/* Hosting hero panel — same hero treatment as the Register-domain
   panel above it. Static markup in clientareahome.tpl provides the
   real <p> body text, so no ::before injection here. */
.ae-clienthome-hosting-hero .ae-clienthome-card {
    border: 1px solid rgba(200, 16, 46, .25) !important;
    background: linear-gradient(180deg, rgba(200, 16, 46, .04) 0%, #fff 65%);
    box-shadow: 0 4px 18px -8px rgba(200, 16, 46, .15);
}
.ae-clienthome-hosting-hero .ae-clienthome-card .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 22px 22px 4px;
}
.ae-clienthome-hosting-hero .ae-clienthome-card .card-title {
    font-size: 18px !important;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ae-clienthome-hosting-hero .ae-clienthome-card .card-title > i:first-child {
    font-size: 18px;
}
.ae-clienthome-hosting-hero .ae-clienthome-card .card-body {
    padding: 14px 22px 22px;
}
.ae-clienthome-hosting-hero .ae-clienthome-card .card-body p {
    font-size: 13px;
    color: var(--ae-ink-faded, #6b7280);
    line-height: 1.5;
    margin: 0;
}

/* Override the stock .client-home-cards .list-group .list-group-item
   padding so client-home rows sit taller. */
.client-home-cards .list-group .list-group-item {
    padding: 15px 10px !important;
}

/* Stock theme caps client-home list-groups at 170px (max-height) which
   makes Recent Tickets / Recent News scroll after just a couple of
   entries. Lift both min and max to 250 so the panel always shows
   ~more rows before scrolling kicks in. */
.client-home-cards .list-group {
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Active services list styling tweak — make .div-service-item rows
   cleaner */
.ae-clienthome-card .div-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.ae-clienthome-card .div-service-name { flex: 1; min-width: 0; }
.ae-clienthome-card .div-service-name .font-weight-bold { font-weight: 700; color: var(--ae-ink); }
.ae-clienthome-card .div-service-name .text-domain {
    display: block;
    font-size: 12px;
    color: var(--ae-ink-faded, #6b7280);
    margin-top: 2px;
}
.ae-clienthome-card .div-service-status .label-success {
    background: rgba(22, 163, 74, .12) !important;
    color: #15803d !important;
    border-radius: var(--ae-radius-sm, 8px);
    padding: 4px 10px;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Recommended-for-you (carousel/promo) frame matches the rest */
.promo-container {
    border: 1px solid var(--ae-border, #e8e8e6);
    border-radius: var(--ae-radius-md, 12px);
    background: #fff;
    overflow: hidden;
}
.promo-container > .header {
    background: #fff;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ae-border, #e8e8e6);
}
.promo-container > .header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    margin: 0;
}
.promo-container .promotions-slider-control a {
    color: var(--ae-ink, #0F1A2E);
    margin-left: 6px;
}

/* ── Unify button corner radius across the theme ──────────────────
   Many cards/CTAs/forms set their own border-radius (round, pill,
   custom medium etc.). Force every .btn — Bootstrap's button base
   plus our own variants — to the same small radius so the panels
   stop looking visually inconsistent. */
.btn,
button.btn,
a.btn,
input.btn,
.btn.btn-default,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-info,
.btn.btn-warning,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-link,
.btn.btn-lg,
.btn.btn-sm,
.btn.btn-xs,
.btn.btn-block,
.btn.btn-outline-primary {
    border-radius: var(--ae-radius-sm, 8px) !important;
}

/* ── ClientManager Activity page (?m=clientmanager&page=activity) ──
   DataTables sizes the table by content; IPv6 addresses are long
   single tokens that don't wrap by default, so the table ends up
   wider than its container and drags the wrapper into horizontal
   scroll (Search input ends up off-screen too). Force the table
   to fit its container and let long tokens break. */
#tableActivity_wrapper { overflow-x: hidden; }
#tableActivity {
    width: 100% !important;
    table-layout: fixed;
}
#tableActivity th,
#tableActivity td {
    word-break: break-all;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}
/* Pull the Search filter to the left so it doesn't sit at the
   far-right edge of the card. */
#tableActivity_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
}
#tableActivity_wrapper .dataTables_filter label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Affiliates page stat tiles ────────────────────────────────────
   Stock theme renders affiliate-stat with a 4em floated icon and a
   raw bootstrap alert background. Redo as clean brand cards: small
   icon chip on the left, big number, label below; same bg / border /
   radius as the rest of our cards. */
.affiliate-stat {
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px !important;
    padding: 18px 22px !important;
    background: #fff !important;
    border: 1px solid var(--ae-border, #e8e8e6) !important;
    border-radius: var(--ae-radius-md, 12px) !important;
    box-shadow: none !important;
    color: var(--ae-ink, #0F1A2E) !important;
    font-size: 14px !important;
    text-align: left !important;
    line-height: 1.3;
}
.affiliate-stat i {
    flex: 0 0 auto;
    float: none !important;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    font-size: 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ae-radius-sm, 8px);
    background: var(--ae-primary-tint, rgba(200,16,46,.08));
    color: var(--ae-primary, #c8102e);
}
.affiliate-stat span {
    display: block !important;
    font-size: 26px !important;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    line-height: 1.1;
}

/* ── Announcements page ────────────────────────────────────────────
   Stock template renders each post's title in <h1> which defaults
   to 2.5em / primary-coloured — way out of brand. Trim down to a
   normal section-heading size and tighten the inter-post margin. */
.announcements .announcement {
    margin-bottom: 1.75rem !important;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ae-border, #e8e8e6);
}
.announcements .announcement:last-child {
    border-bottom: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
.announcements .announcement h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ae-ink, #0F1A2E);
    line-height: 1.3;
    margin: 0 0 8px;
    letter-spacing: -.005em;
}
.announcements .announcement h1 a {
    color: var(--ae-ink, #0F1A2E);
    text-decoration: none;
}
.announcements .announcement h1 a:hover,
.announcements .announcement h1 a:focus {
    color: var(--ae-primary, #c8102e);
    text-decoration: none;
}
.announcements .announcement .list-inline {
    margin: 0 0 12px;
    font-size: 13px;
}
.announcements .announcement article {
    padding: 14px 16px !important;
    border-left-color: var(--ae-border-strong, #d4d4d2) !important;
    border-radius: 0 var(--ae-radius-sm, 8px) var(--ae-radius-sm, 8px) 0;
    color: var(--ae-ink-soft, #4A5568);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Mobile: scroll ONLY the table horizontally, not its wrapper.
   The wrapper holds filter / info / pagination — those must keep
   viewport width. Make the <table> itself display:block so it
   owns the horizontal scroll. */
@media (max-width: 767px) {
    /* wrappers stay at viewport width */
    .table-container,
    .table-responsive,
    .dataTables_wrapper,
    .dataTables_wrapper .listtable,
    .dataTables_wrapper .row > [class*="col-"]:has(> table) {
        overflow-x: visible !important;
        max-width: 100%;
    }
    /* table gets its own horizontal scroll */
    .table-container table.table,
    .table-container table.table-list,
    .table-container table.dataTable,
    .dataTables_wrapper table.dataTable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .table-container table::-webkit-scrollbar,
    .dataTables_wrapper table::-webkit-scrollbar {
        height: 6px;
    }
    .table-container table::-webkit-scrollbar-thumb,
    .dataTables_wrapper table::-webkit-scrollbar-thumb {
        background: var(--ae-border-strong, #d4d4d2);
        border-radius: 3px;
    }
}

/* ── Domains list (?action=domains) extras ────────────────────────
   • Two action icons (copy + open) next to each domain name.
   • Bigger checkbox in the first column.
   • Toast bubble that confirms a copy. */
#tableDomainsList .ae-domain-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#tableDomainsList .ae-domain-name {
    color: var(--ae-primary, #c8102e);
    font-weight: 600;
}
#tableDomainsList .ae-domain-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: var(--ae-ink-soft, #4A5568);
    border: 1px solid var(--ae-border, #E8E4DE);
    border-radius: var(--ae-radius-sm, 8px);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: color .12s, border-color .12s, background .12s;
    text-decoration: none !important;
}
#tableDomainsList .ae-domain-icon-btn:hover,
#tableDomainsList .ae-domain-icon-btn:focus {
    color: var(--ae-primary, #c8102e);
    border-color: var(--ae-primary, #c8102e);
    background: var(--ae-primary-tint, rgba(200,16,46,.06));
    outline: 0;
}
#tableDomainsList .ae-domain-icon-btn i {
    margin: 0;
    font-size: 13px;
}
/* "Manage" is a text-button, not an icon-only square. Re-state every
   property with !important so stock `.table tbody td a` rules can't
   strip the border / re-set display:inline and squash it on top of
   the visit icon. */
#tableDomainsList a.ae-domain-manage,
#tableDomainsList .ae-domain-manage {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 26px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    margin-left: 2px;
    background: transparent !important;
    color: var(--ae-ink-soft, #4A5568) !important;
    border: 1px solid var(--ae-border, #E8E4DE) !important;
    border-radius: var(--ae-radius-sm, 8px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none !important;
    vertical-align: middle;
}
#tableDomainsList a.ae-domain-manage:hover,
#tableDomainsList a.ae-domain-manage:focus,
#tableDomainsList .ae-domain-manage:hover,
#tableDomainsList .ae-domain-manage:focus {
    color: var(--ae-primary, #c8102e) !important;
    border-color: var(--ae-primary, #c8102e) !important;
    background: var(--ae-primary-tint, rgba(200,16,46,.06)) !important;
    outline: 0;
}
#tableDomainsList .ae-domain-manage i {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#tableDomainsList .ae-domain-manage span {
    line-height: 1;
}
/* Make sure the row of icons / Manage button never collapses gap
   between siblings — some stock styles reset white-space inside cells. */
#tableDomainsList .ae-domain-cell {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Date columns: enforce a minimum width so they don't get squashed
   below what fits a date string. */
#tableDomainsList thead th:nth-child(4),
#tableDomainsList thead th:nth-child(5),
#tableDomainsList tbody td:nth-child(4),
#tableDomainsList tbody td:nth-child(5) {
    min-width: 77px !important;
}

/* Bigger checkbox in the leftmost column of the domains table —
   applies both to the master select-all in the header and the
   per-row checkboxes in the body. */
#tableDomainsList input.domids[type="checkbox"],
#tableDomainsList input#selectAllDomains[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ae-primary, #c8102e);
    vertical-align: middle;
}

/* Toast — small dark bubble bottom-center, fades in/out.
   Uses opacity+visibility rather than the [hidden] attribute so
   nothing else in the stack can accidentally re-hide it. */
.ae-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: 28px !important;
    top: auto !important;
    right: auto !important;
    transform: translate(-50%, 8px);
    background: var(--ae-ink, #0F1A2E) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--ae-radius-sm, 8px);
    box-shadow: 0 6px 24px rgba(15, 26, 46, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    z-index: 2147483647;
    max-width: 90vw;
    display: inline-block;
}
.ae-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
}