/* ============================================================================
   WebClub Aurora — complete brand skin for the `webclub` WHMCS theme
   ============================================================================
   Injected via /includes/hooks/webclub_theme_hooks.php (ClientAreaHeadOutput)
   with a cache-busting version param. Templates are 100% stock Twenty-One.
   Tokens mirror webclub.ca (webclub-v5 "Aurora" theme) exactly.
   ============================================================================ */

/* ---------- 1. Tokens (verbatim from webclub.ca) ---------- */
:root {
    --wc-brand: #5b3df5;
    --wc-brand-2: #2f6bff;
    --wc-violet: #7c3aed;
    --wc-cyan: #22d3ee;
    --wc-pink: #ec4899;
    --wc-emerald: #10b981;
    --wc-amber: #f59e0b;

    --wc-ink: #16122e;
    --wc-ink-2: #2b2748;
    --wc-body: #4c495f;
    --wc-muted: #615e7a;

    --wc-bg-soft: #f6f5fd;
    --wc-bg-tint: #efeaff;
    --wc-line: #e9e6f5;
    --wc-footer: #100c26;

    --wc-grad: linear-gradient(120deg, var(--wc-violet) 0%, var(--wc-brand) 45%, var(--wc-brand-2) 100%);
    --wc-grad-soft: linear-gradient(120deg, var(--wc-brand), var(--wc-brand-2));

    --wc-radius: 18px;
    --wc-radius-sm: 12px;
    --wc-radius-lg: 26px;
    --wc-pill: 999px;

    --wc-shadow-sm: 0 2px 8px rgba(24, 16, 64, .06);
    --wc-shadow: 0 14px 36px -14px rgba(40, 24, 110, .22);
    --wc-shadow-lg: 0 30px 70px -24px rgba(40, 24, 110, .34);
    --wc-shadow-brand: 0 18px 44px -16px rgba(91, 61, 245, .6);

    --wc-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --wc-font-sans: 'Inter', system-ui, sans-serif;
    --wc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
body,
body.primary-bg-color {
    font-family: var(--wc-font-sans) !important;
    background-color: var(--wc-bg-soft) !important;
    color: var(--wc-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wc-font-display);
    font-weight: 800;
    color: var(--wc-ink);
    letter-spacing: -.02em;
}
a { color: var(--wc-brand); }
a:hover { color: var(--wc-violet); text-decoration: none; }
::selection { background: rgba(91, 61, 245, .2); color: var(--wc-ink); }
.text-primary { color: var(--wc-brand) !important; }
.bg-primary { background-color: var(--wc-brand) !important; }

/* ---------- 3. Header — white frost, matching main site ---------- */
#header { background: #fff; box-shadow: 0 1px 0 var(--wc-line); }

#header .topbar { background: var(--wc-bg-tint); border-bottom: 1px solid #e3dcfb; }
#header .topbar .btn { color: var(--wc-ink-2); font-weight: 600; font-size: .875rem; }
#header .topbar .btn:hover { color: var(--wc-brand); }
#header .topbar .input-group-text { background: transparent; border: 0; color: var(--wc-muted); font-weight: 600; }
#header .topbar .btn-active-client { color: var(--wc-brand); font-weight: 700; }

#header .navbar-light { background: #fff; padding-top: .8rem; padding-bottom: .8rem; }
#header .navbar-brand .logo-img { max-height: 44px; width: auto; }

/* one seamless pill: the group carries the border, children are borderless */
#header .search {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-pill);
    overflow: hidden;
    flex-wrap: nowrap;
    transition: border-color .15s, box-shadow .15s;
}
#header .search:focus-within {
    border-color: #b7a8fb;
    box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .12);
}
#header .search .btn-default,
#header .search .input-group-prepend .btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--wc-muted);
    padding-left: 16px;
}
#header .search .appended-form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .92rem;
    padding-left: 4px;
}
#header .search .appended-form-control:focus { box-shadow: none !important; }
#header .cart-btn { color: var(--wc-ink); }
#header .cart-btn .badge-info { background: var(--wc-brand); }

/* Primary navigation — white bar with dark links (original twenty-one layout),
   premium hover states. NOTE: twenty-one's primary links are plain <a class="pr-4">
   — NO .nav-link class, and bootstrap utilities (pr-4, py-0) carry !important. */
#header .main-navbar-wrapper {
    background: #fff;
    padding: 0;
    border-top: 1px solid var(--wc-line);
    border-bottom: 1px solid var(--wc-line);
}
/* compact rounded-pill links, exactly like webclub.ca's .nav-links */
#header .main-navbar-wrapper .navbar-nav > li > a {
    display: inline-block;
    color: var(--wc-ink-2) !important;
    font-weight: 600; font-size: .95rem;
    padding: 9px 15px !important;
    margin: 10px 3px;
    border-radius: 10px;
    transition: color .15s, background .15s var(--wc-ease);
}
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li.show > a {
    color: var(--wc-brand) !important; background: var(--wc-bg-tint);
}
#header .main-navbar-wrapper .dropdown-menu {
    border: 0; border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow-lg); margin-top: 6px; padding: .5rem;
}
#header .main-navbar-wrapper .dropdown-item {
    border-radius: 8px; font-weight: 550; padding: .55rem .9rem; color: var(--wc-ink-2);
}
#header .main-navbar-wrapper .dropdown-item:hover { background: var(--wc-bg-tint); color: var(--wc-brand); }
#header .main-navbar-wrapper .dropdown-divider { border-color: var(--wc-line); }

/* Breadcrumb strip */
.breadcrumb-bar, #main-body .breadcrumb { background: transparent; }
.breadcrumb { background: transparent; padding-left: 0; font-size: .875rem; }
.breadcrumb-item a { color: var(--wc-muted); }
.breadcrumb-item a:hover { color: var(--wc-brand); }
.breadcrumb-item.active { color: var(--wc-ink); font-weight: 600; }

/* ---------- 4. Buttons — pill shape, exactly like webclub.ca ---------- */
.btn {
    border-radius: var(--wc-pill);
    font-weight: 650;
    transition: transform .22s var(--wc-ease), box-shadow .22s var(--wc-ease), background .2s, color .2s, border-color .2s;
}
.btn:not(.btn-sm):not(.btn-link) { padding-left: 20px; padding-right: 20px; }

.btn-primary, a.btn.btn-primary {
    background: var(--wc-grad-soft); border: 0; color: #fff;
    box-shadow: 0 10px 26px -10px rgba(91, 61, 245, .55);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(120deg, #4d30e8, #2459e6);
    border: 0; color: #fff; transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px rgba(91, 61, 245, .65);
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .3); }

.btn-default, .btn-secondary {
    background: #fff; border: 1px solid var(--wc-line); color: var(--wc-ink);
}
.btn-default:hover, .btn-secondary:hover {
    border-color: var(--wc-brand); color: var(--wc-brand); background: var(--wc-bg-tint);
}
.btn-success { background: var(--wc-emerald); border-color: var(--wc-emerald); }
.btn-success:hover { background: #0d9e70; border-color: #0d9e70; transform: translateY(-1px); }
.btn-outline-primary { color: var(--wc-brand); border-color: #cfc6fb; }
.btn-outline-primary:hover { background: var(--wc-grad-soft); border-color: transparent; color: #fff; }
.btn-link { color: var(--wc-brand); }
.btn-info { background: var(--wc-brand-2); border-color: var(--wc-brand-2); }

/* ---------- 5. Cards & panels ---------- */
.card {
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm);
}
.card .card-header {
    background: #fbfaff; border-bottom: 1px solid var(--wc-line);
    border-radius: var(--wc-radius) var(--wc-radius) 0 0 !important;
    font-weight: 700; color: var(--wc-ink); font-family: var(--wc-font-display);
}
.list-group-item.active { background: var(--wc-grad-soft); border-color: transparent; }

.header-lined h1 { font-weight: 800; letter-spacing: -.03em; }
.header-lined { border-bottom: 1px solid var(--wc-line); }

/* ---------- 6. PORTAL HOME — hero domain search ---------- */
section#home-banner, .home-domain-search-container { background: transparent; }

.home-domain-search.bg-white {
    background: var(--wc-grad) !important;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.home-domain-search.bg-white::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(600px 300px at 15% -10%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(700px 340px at 90% 115%, rgba(34, 211, 238, .18), transparent 60%);
}
.home-domain-search h2 {
    color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800; letter-spacing: -.03em; margin-bottom: 1.5rem;
    position: relative;
}
/* the outer wrapper IS the white search card (stock gives it a thin border) */
.home-domain-search .input-group-wrapper {
    position: relative;
    background: #fff; border: 0 !important; border-radius: var(--wc-radius) !important;
    box-shadow: var(--wc-shadow-lg); padding: 16px;
}
.home-domain-search .input-group.advanced-input {
    background: #fff; border: 0; box-shadow: none; padding: 4px;
}
/* stock: .input-group-wrapper .btn{border-radius:.25rem!important} — outgun it */
.home-domain-search .input-group-wrapper .btn {
    border-radius: var(--wc-pill) !important;
    padding: 11px 24px !important;
    font-weight: 650;
}
.home-domain-search .input-group-wrapper .advanced-input .btn-success,
.home-domain-search .input-group-wrapper .btn-success {
    background: var(--wc-emerald) !important;
    border-color: var(--wc-emerald) !important;
}
.home-domain-search .input-group-wrapper .btn-success:hover { background: #0d9e70 !important; }
.home-domain-search textarea#message {
    border: 0; outline: none; box-shadow: none; resize: none;
    font-size: 1.02rem; color: var(--wc-ink); min-height: 84px;
    font-family: var(--wc-font-sans);
}
.home-domain-search textarea#message::placeholder { color: #9a97b0; }
.home-domain-search input[name=query].form-control {
    border: 0; box-shadow: none; font-size: 1.05rem; height: auto; padding: 12px 8px;
}
/* filter chips row (Include TLDs / Max Length / Safe Search) */
.home-domain-search .multiselect.btn,
.home-domain-search .btn-group .multiselect {
    background: rgba(255, 255, 255, .14); color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--wc-pill);
    font-size: .85rem; padding: 7px 16px;
}
.home-domain-search .multiselect.btn:hover { background: rgba(255, 255, 255, .24); }
.home-domain-search label { color: #fff; font-weight: 600; font-size: .9rem; }
.home-domain-search .input-group-append .btn,
.home-domain-search .row .btn { margin-left: 8px; }
.home-domain-search .btn-primary { box-shadow: 0 8px 20px -8px rgba(16, 12, 38, .5); }
.home-domain-search .tld-logos { filter: brightness(0) invert(1); opacity: .9; }
.home-domain-search .tld-logos li { color: #fff; }
.home-domain-search .btn-link {
    color: rgba(255, 255, 255, .9); font-weight: 600; text-decoration: underline;
    text-underline-offset: 3px; position: relative;
}
.home-domain-search .btn-link:hover { color: #fff; }
/* captcha centered below the search card */
.home-domain-search .g-recaptcha > div,
.home-domain-search #google-recaptcha-domainchecker { margin: 14px auto 0; }
.home-domain-search .captcha-description { color: rgba(255, 255, 255, .85); }

/* dropdown panels of the TLD/length multiselects (light on gradient) */
.home-domain-search .multiselect-container {
    border: 0; border-radius: var(--wc-radius-sm); box-shadow: var(--wc-shadow-lg);
}

/* ---------- 7. PORTAL HOME — product & help cards ---------- */
h2.text-center.m-4 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 3.5rem !important;
}
.card-columns.home .card {
    border-radius: var(--wc-radius); border: 1px solid var(--wc-line);
    box-shadow: var(--wc-shadow-sm);
    transition: transform .25s var(--wc-ease), box-shadow .25s var(--wc-ease);
}
.card-columns.home .card:hover { transform: translateY(-4px); box-shadow: var(--wc-shadow); }
.card-columns.home .pricing-card-title {
    font-size: 1.3rem; font-weight: 800; color: var(--wc-ink);
}
.card-columns.home .card p { color: var(--wc-muted); }

/* help tiles: kill the stock rainbow accents, use Aurora hues */
.action-icon-btns a {
    display: block; background: #fff; border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius); box-shadow: var(--wc-shadow-sm);
    border-top: 3px solid var(--wc-brand);
    color: var(--wc-ink); font-weight: 650; text-align: center;
    padding: 26px 12px 22px;
    transition: transform .25s var(--wc-ease), box-shadow .25s var(--wc-ease), border-color .2s;
}
.action-icon-btns a:hover { transform: translateY(-4px); box-shadow: var(--wc-shadow); color: var(--wc-brand); }
.action-icon-btns .ico-container {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--wc-bg-tint); display: flex; align-items: center; justify-content: center;
}
.action-icon-btns .ico-container i { font-size: 24px; color: var(--wc-brand); }
/* Aurora accent mapping (replaces flat-UI colors) */
.action-icon-btns a.card-accent-teal { border-top-color: var(--wc-cyan); }
.action-icon-btns a.card-accent-teal .ico-container i { color: #0891b2; }
.action-icon-btns a.card-accent-pomegranate { border-top-color: var(--wc-pink); }
.action-icon-btns a.card-accent-pomegranate .ico-container i { color: var(--wc-pink); }
.action-icon-btns a.card-accent-sun-flower { border-top-color: var(--wc-amber); }
.action-icon-btns a.card-accent-sun-flower .ico-container i { color: #d97706; }
.action-icon-btns a.card-accent-asbestos { border-top-color: var(--wc-violet); }
.action-icon-btns a.card-accent-asbestos .ico-container i { color: var(--wc-violet); }
.action-icon-btns a.card-accent-green { border-top-color: var(--wc-emerald); }
.action-icon-btns a.card-accent-green .ico-container i { color: var(--wc-emerald); }
.action-icon-btns a.card-accent-midnight-blue { border-top-color: var(--wc-brand); }
.action-icon-btns a.card-accent-midnight-blue .ico-container i { color: var(--wc-brand); }
/* stock theme paints backgrounds per accent — neutralise them */
.action-icon-btns a[class*="card-accent-"] { background: #fff !important; }
.action-icon-btns a[class*="card-accent-"]:hover { background: #fff !important; }

/* ---------- 8. Dashboard tiles ---------- */
.tiles .tile {
    background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm); margin: 6px;
    transition: transform .22s var(--wc-ease), box-shadow .22s var(--wc-ease);
}
.tiles .tile:hover { transform: translateY(-3px); box-shadow: var(--wc-shadow); text-decoration: none; }
.tiles .tile i { color: var(--wc-brand); opacity: .92; }
.tiles .tile .stat { color: var(--wc-ink); font-weight: 800; font-family: var(--wc-font-display); }
.tiles .tile .title { color: var(--wc-muted); font-weight: 600; }
.tiles .tile .highlight { border-radius: 0 0 var(--wc-radius) var(--wc-radius); }
.tiles .tile .highlight.bg-color-blue { background: var(--wc-brand) !important; }
.tiles .tile .highlight.bg-color-green { background: var(--wc-brand-2) !important; }
.tiles .tile .highlight.bg-color-red { background: var(--wc-violet) !important; }
.tiles .tile .highlight.bg-color-gold { background: var(--wc-pink) !important; }
.tiles .tile .highlight.bg-color-orange { background: var(--wc-cyan) !important; }

/* ---------- 9. Sidebar ---------- */
.sidebar .card { border-radius: var(--wc-radius); overflow: hidden; }
.sidebar .card .card-header {
    background: var(--wc-grad-soft); color: #fff; border: 0;
    font-weight: 700; letter-spacing: .01em;
}
/* the global heading-color rule must not darken gradient headers:
   title, icon and collapse chevron are all white here */
.sidebar .card .card-header,
.sidebar .card .card-header .card-title,
.sidebar .card .card-header h1, .sidebar .card .card-header h2,
.sidebar .card .card-header h3, .sidebar .card .card-header h4,
.sidebar .card .card-header h5, .sidebar .card .card-header h6,
.sidebar .card .card-header i,
.sidebar .card .card-header a,
.sidebar .card .card-header .btn,
.sidebar .card .card-header [data-toggle="collapse"] {
    color: #fff !important;
}
.sidebar .list-group-item { border-color: #f1effa; font-weight: 500; color: var(--wc-ink-2); }
/* every interactive state stays light — stock ships a dark charcoal hover/active */
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus,
.sidebar .list-group-item:active,
.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus,
.sidebar .list-group-item-action:active {
    background: #f5f2ff !important;
    color: var(--wc-brand) !important;
}
.sidebar .list-group-item:hover i,
.sidebar .list-group-item:active i { color: var(--wc-brand) !important; }
.sidebar .list-group-item.active {
    background: var(--wc-bg-tint) !important; color: var(--wc-brand) !important;
    border-left: 0 !important;
    border-color: #e6e0fb !important; /* stock paints these navy — keep them light */
    box-shadow: inset 3px 0 0 var(--wc-brand);
    border-radius: 0 !important;
    font-weight: 700;
}
.sidebar .list-group-item .badge { background: var(--wc-brand); color: #fff; }

/* ---------- 10. Forms ---------- */
.form-control { border-radius: var(--wc-radius-sm); border-color: #ddd9f0; color: var(--wc-ink); }
.form-control:focus { border-color: #b7a8fb; box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .14); }
label { font-weight: 600; color: var(--wc-ink-2); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--wc-brand); border-color: var(--wc-brand);
}
.custom-select:focus { border-color: #b7a8fb; box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .14); }
.input-group-text { border-color: #ddd9f0; background: #fbfaff; }

/* ---------- 11. Tables & DataTables ---------- */
.table thead th {
    background: #fbfaff; color: var(--wc-muted); text-transform: uppercase;
    font-size: .72rem; letter-spacing: .07em; border-bottom: 1px solid var(--wc-line);
    font-weight: 700;
}
.table td { border-color: #f1effa; }
.table-hover tbody tr:hover { background-color: #faf9ff; }
/* action buttons inside table cells never touch each other */
.table td .btn { margin: 3px 6px 3px 0; }
.table td .btn:last-child { margin-right: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--wc-brand); border-color: var(--wc-brand);
    color: #fff !important; border-radius: 8px;
}
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: var(--wc-radius-sm); border: 1px solid #ddd9f0;
}

/* ---------- 12. Misc components ---------- */
.page-item.active .page-link { background: var(--wc-brand); border-color: var(--wc-brand); }
.page-link { color: var(--wc-brand); }
.badge-primary { background: var(--wc-brand); }
.badge-info { background: var(--wc-brand-2); }
.alert { border-radius: var(--wc-radius-sm); }
/* validation error lists: left-aligned rows with soft dot markers —
   never centered text with orphaned bullets at the far edge */
.alert ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.alert ul li {
    position: relative;
    padding: 5px 0 5px 24px;
    font-weight: 550;
}
.alert ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}
.alert-danger { color: #b91c1c; background: #fdecec; border-color: #f6caca; }
.modal-content { border-radius: var(--wc-radius); border: 0; box-shadow: var(--wc-shadow-lg); overflow: hidden; }
/* every modal header: gradient band with WHITE title + close (the global
   heading colour must never paint dark text onto the violet band) */
.modal-content .modal-header {
    background: var(--wc-grad-soft);
    border-bottom: 0;
}
.modal-content .modal-header .modal-title,
.modal-content .modal-header h1, .modal-content .modal-header h2,
.modal-content .modal-header h3, .modal-content .modal-header h4,
.modal-content .modal-header h5, .modal-content .modal-header h6 {
    color: #fff !important;
    font-weight: 750;
}
.modal-content .modal-header .close,
.modal-content .modal-header .close span {
    color: #fff !important;
    opacity: .85;
    text-shadow: none;
}
.modal-content .modal-header .close:hover { opacity: 1; }
/* focus ring only for keyboard users — no leftover halo after mouse clicks */
.btn-primary:focus:not(:focus-visible) {
    box-shadow: 0 10px 26px -10px rgba(91, 61, 245, .55);
}
.popover { border-radius: var(--wc-radius-sm); border: 1px solid var(--wc-line); box-shadow: var(--wc-shadow-lg); }
.nav-tabs .nav-link.active { color: var(--wc-brand); border-bottom: 2px solid var(--wc-brand); }
.nav-pills .nav-link.active { background: var(--wc-brand); }
.dropdown-item.active, .dropdown-item:active { background: var(--wc-brand); }
#scrollTop { background: var(--wc-brand); }
#fullpage-overlay { background: rgba(22, 18, 46, .8); }

/* ---------- 13. Login / register / password reset ---------- */
.login-or-register-container .card, .logincontainer .card {
    border-radius: var(--wc-radius-lg); box-shadow: var(--wc-shadow);
    border: 1px solid var(--wc-line);
}
.login-or-register-container .card .card-body { padding: 2rem; }

/* ---------- 14. Cart / order form (aurora_cart) ----------
   NOTE: cart css loads AFTER this sheet — contested rules need !important */
#order-standard_cart .card, .view-cart-items .item {
    border-radius: var(--wc-radius) !important; border: 1px solid var(--wc-line) !important;
    box-shadow: var(--wc-shadow-sm) !important;
}
#order-standard_cart .btn-checkout,
#order-standard_cart .btn.btn-primary {
    background: var(--wc-grad-soft) !important; border: 0 !important;
    border-radius: var(--wc-pill) !important; font-weight: 650 !important;
}
#order-standard_cart .header-lined h1, #order-standard_cart .sub-heading span {
    font-family: var(--wc-font-display); color: var(--wc-ink);
}
#order-standard_cart .sub-heading span { background: var(--wc-bg-soft); }
#order-standard_cart .view-cart-tables .total-due-today-amount { color: var(--wc-brand); }
#order-standard_cart .summary-container .summary { border-radius: var(--wc-radius); }
#order-standard_cart .order-summary {
    background: var(--wc-grad) !important; border-radius: var(--wc-radius) !important;
}

/* ---------- 14b. Store product listing (store css loads after us) ---------- */
.product, .products .product {
    border-radius: var(--wc-radius) !important;
    border: 1px solid var(--wc-line) !important;
    box-shadow: var(--wc-shadow-sm);
    background: #fff;
}
.product header, .product h3 { font-family: var(--wc-font-display); }
.btn-order-now {
    background: var(--wc-grad-soft) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--wc-pill) !important;
    padding: 9px 22px !important;
    font-weight: 650 !important;
    box-shadow: 0 8px 20px -8px rgba(91, 61, 245, .5);
}
.btn-order-now:hover { transform: translateY(-1px); color: #fff !important; }

/* ---------- 15. Footer — dark Aurora band ---------- */
#footer, footer.footer {
    background: var(--wc-footer); color: rgba(255, 255, 255, .72);
    border-top: 0; padding-top: 2.6rem; padding-bottom: 2.6rem;
}
#footer a, #footer .nav-link { color: rgba(255, 255, 255, .82); font-weight: 500; }
#footer a:hover, #footer .nav-link:hover { color: #fff; }
#footer .btn { color: rgba(255, 255, 255, .82); }
#footer .copyright { color: rgba(255, 255, 255, .45); font-size: .875rem; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 767.98px) {
    #header .navbar-brand .logo-img { max-height: 36px; }
    .tiles .tile { margin: 4px; }
    .home-domain-search .input-group.advanced-input { padding: 12px; }
    .action-icon-btns a { padding: 18px 8px 16px; }
    .action-icon-btns .ico-container { width: 48px; height: 48px; }
}

/* ============================================================
   18. PREMIUM PASS v14 — colour & polish to match webclub.ca
   ============================================================ */

/* -- 18a. Hero filter chips: were white-on-white inside the search card -- */
.home-domain-search .input-group-wrapper .btn.multiselect,
.home-domain-search .input-group-wrapper .multiselect.btn {
    background: var(--wc-bg-tint) !important;
    color: var(--wc-brand) !important;
    border: 1px solid #ddd2fc !important;
    font-size: .84rem !important;
    font-weight: 650 !important;
    padding: 7px 16px !important;
    box-shadow: none;
}
.home-domain-search .input-group-wrapper .btn.multiselect:hover {
    background: #e4dcfd !important;
}
.home-domain-search .input-group-wrapper label {
    color: var(--wc-ink-2); font-weight: 600; font-size: .88rem;
}

/* -- 18b. reCAPTCHA presented on a white card, centred -- */
.home-domain-search .g-recaptcha,
.home-domain-search [id^="google-recaptcha"] {
    display: flex; justify-content: center; margin-top: 18px; position: relative;
}
.home-domain-search .g-recaptcha > div,
.home-domain-search [id^="google-recaptcha"] > div {
    background: #fff; padding: 10px 14px; border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow); height: auto !important;
}

/* -- 18c. "View all pricing" as a ghost pill on the gradient -- */
.home-domain-search .btn-link.btn-sm {
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--wc-pill);
    padding: 8px 18px; font-weight: 600; position: relative;
    transition: background .2s, border-color .2s;
}
.home-domain-search .btn-link.btn-sm:hover {
    background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff;
}

/* -- 18d. Breadcrumb ribbon: floating pill trail instead of the grey strip -- */
.master-breadcrumb { background: transparent !important; border: 0; padding: 12px 0 0; }
.master-breadcrumb .breadcrumb {
    display: inline-flex; background: #fff; border: 1px solid var(--wc-line);
    border-radius: var(--wc-pill); padding: 7px 18px; margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(24, 16, 64, .05); font-size: .84rem;
}
/* portal home: hero follows immediately — hide the lone "Portal Home" pill there */
body:has(.home-domain-search) .master-breadcrumb { display: none; }

/* -- 18e. Section headings: gradient underline accent (main-site style) -- */
h2.text-center.m-4 { position: relative; padding-bottom: 16px; }
h2.text-center.m-4::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 64px; height: 4px; border-radius: 4px; background: var(--wc-grad-soft);
}

/* -- 18f. Home product cards: gradient top strip + hover ring -- */
.card-columns.home .card { overflow: hidden; position: relative; }
.card-columns.home .card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--wc-grad-soft); opacity: .85;
}
.card-columns.home .card:hover { border-color: #cfc6fb; }
.card-columns.home .card .btn-outline-primary { margin-top: 6px; }

/* -- 18g. Dashboard tiles: colourful icon chips (cycling Aurora hues) -- */
.tiles .tile { text-align: inherit; }
.tiles .tile i {
    width: 52px; height: 52px; line-height: 52px; text-align: center;
    border-radius: 14px; background: var(--wc-bg-tint); font-size: 22px;
}
.tiles .row > div:nth-child(1) .tile i { color: var(--wc-brand); background: #efeaff; }
.tiles .row > div:nth-child(2) .tile i { color: #0891b2; background: #e0f7fd; }
.tiles .row > div:nth-child(3) .tile i { color: var(--wc-pink); background: #fde8f3; }
.tiles .row > div:nth-child(4) .tile i { color: var(--wc-brand-2); background: #e6eeff; }

/* -- 18h. Hero entrance: staggered fade-up (above the fold, CSS-only) -- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes wcRise {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: none; }
    }
    .wc-eyebrow { animation: wcRise .6s var(--wc-ease) backwards; }
    .home-domain-search h2 { animation: wcRise .6s .08s var(--wc-ease) backwards; }
    .wc-hero-lead { animation: wcRise .6s .16s var(--wc-ease) backwards; }
    .home-domain-search .input-group-wrapper { animation: wcRise .7s .26s var(--wc-ease) backwards; }
    .wc-hero-trust { animation: wcRise .6s .38s var(--wc-ease) backwards; }
    .home-domain-search .btn-link.btn-sm { animation: wcRise .6s .46s var(--wc-ease) backwards; }
}

/* -- 18i. Login/register cards: gradient top strip for brand colour -- */
.login-or-register-container .card { overflow: hidden; position: relative; }
.login-or-register-container .card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--wc-grad-soft);
}

/* -- 18j. Help-tile icon chips get their accent tint backgrounds -- */
.action-icon-btns a.card-accent-teal .ico-container { background: #e0f7fd; }
.action-icon-btns a.card-accent-pomegranate .ico-container { background: #fde8f3; }
.action-icon-btns a.card-accent-sun-flower .ico-container { background: #fdf1dd; }
.action-icon-btns a.card-accent-asbestos .ico-container { background: #f1e8fd; }
.action-icon-btns a.card-accent-green .ico-container { background: #e2f8f0; }
.action-icon-btns a.card-accent-midnight-blue .ico-container { background: var(--wc-bg-tint); }

/* ============================================================
   19. PREMIUM PASS v15 — hero composition + footer + layout
   ============================================================ */

/* -- 19a. Hero: proper hierarchy, tighter composition -- */
.home-domain-search .p-5 {
    padding: 3.4rem 1.5rem 3.6rem !important;
    max-width: 900px;
    margin: 0 auto;
}
.wc-eyebrow {
    display: table; margin: 0 auto 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: .76rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 16px; border-radius: var(--wc-pill);
    backdrop-filter: blur(6px); position: relative;
}
.home-domain-search h2 {
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    margin-bottom: .7rem;
}
.wc-hero-lead {
    color: rgba(255, 255, 255, .85); text-align: center;
    max-width: 620px; margin: 0 auto 30px; font-size: 1.04rem; line-height: 1.65;
    position: relative;
}
.wc-hero-trust {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 30px;
    margin-top: 24px; position: relative;
}
.wc-hero-trust span { color: rgba(255, 255, 255, .9); font-size: .9rem; font-weight: 550; }
.wc-hero-trust i { color: #7ef0c8; margin-right: 6px; }

/* pink glow orb top-right for depth */
.home-domain-search.bg-white::after {
    content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, .28), transparent 68%);
    top: -180px; right: -120px; pointer-events: none;
}
/* frosted ring around the search card */
.home-domain-search .input-group-wrapper {
    box-shadow: var(--wc-shadow-lg), 0 0 0 8px rgba(255, 255, 255, .12);
}
/* captcha + pricing link: centred, close to the card */
.home-domain-search .g-recaptcha,
.home-domain-search [id^="google-recaptcha"] { margin-top: 14px; }
.home-domain-search .btn-link.btn-sm {
    float: none !important; display: table; margin: 24px auto 0;
}

/* -- 19b. Premium footer grid -- */
.wc-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 8px;
}
.wc-footer-logo { height: 32px; width: auto; margin-bottom: 16px; }
.wc-footer-brand p {
    color: rgba(255, 255, 255, .6); font-size: .92rem; line-height: 1.65;
    max-width: 300px; margin-bottom: 16px;
}
.wc-footer-maple {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 600;
    padding: 6px 14px; border-radius: var(--wc-pill);
}
.wc-footer-col h4 {
    color: #fff; font-size: .92rem; font-weight: 700;
    letter-spacing: .04em; margin-bottom: 16px;
}
.wc-footer-col a {
    display: block; color: rgba(255, 255, 255, .62); font-size: .92rem;
    padding: 5px 0; font-weight: 450; transition: color .15s, transform .15s var(--wc-ease);
}
.wc-footer-col a:hover { color: #fff; transform: translateX(3px); }
.wc-footer-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 34px; padding-top: 22px;
}
.wc-footer-meta { display: flex; align-items: center; gap: 6px; }
.wc-footer-meta a, .wc-footer-meta .btn { color: rgba(255, 255, 255, .62); font-size: .88rem; }
.wc-footer-meta a:hover, .wc-footer-meta .btn:hover { color: #fff; }

@media (max-width: 991.98px) {
    .wc-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .wc-footer-bar { justify-content: center; text-align: center; }
}
@media (max-width: 575.98px) {
    .wc-footer-grid { grid-template-columns: 1fr; }
}

/* -- 19c. Layout rhythm -- */
#main-body { padding-top: 10px; padding-bottom: 40px; }
.card-columns.home .card .card-body { padding: 2.4rem 1.8rem !important; }
.card-columns.home .card p { min-height: 48px; }

/* ============================================================
   20. FIX PASS v16 — nav contrast + search card layout
   ============================================================ */

/* -- 20a. Nav links MUST be white on the gradient (was rendering dark) -- */
#header .main-navbar-wrapper .navbar-nav .nav-link,
#header .main-navbar-wrapper .navbar-nav a,
#header .main-navbar-wrapper .nav-item > a,
#header .main-navbar-wrapper .dropdown-toggle {
    color: rgba(255, 255, 255, .95) !important;
}
#header .main-navbar-wrapper .navbar-nav .nav-link:hover,
#header .main-navbar-wrapper .navbar-nav a:hover { color: #fff !important; }
/* dropdown panels stay dark-on-white */
#header .main-navbar-wrapper .dropdown-menu a,
#header .main-navbar-wrapper .dropdown-menu .dropdown-item {
    color: var(--wc-ink-2) !important;
}
#header .main-navbar-wrapper .dropdown-menu a:hover,
#header .main-navbar-wrapper .dropdown-menu .dropdown-item:hover { color: var(--wc-brand) !important; }

/* -- 20b. Search card: textarea full-width row, controls in one bottom row -- */
.home-domain-search .input-group.advanced-input {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px;
}
.home-domain-search .advanced-input textarea#message {
    flex: 1 1 100%;
    width: 100%;
    min-height: 76px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--wc-line) !important;
    border-radius: 0;
    margin-bottom: 4px;
}
/* hidden originals of the multiselects must not take space */
.home-domain-search .advanced-input select.multiselect { display: none !important; }
/* chips + safe-search left, buttons pushed right on the same row */
.home-domain-search .advanced-input .btn-group { flex: 0 0 auto; }
.home-domain-search .advanced-input label {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
}
/* stock pins it: .input-group-wrapper .advanced-input .input-group-append
   {position:absolute;right:20px;top:74px} — put it back in the flex flow */
.home-domain-search .input-group-wrapper .advanced-input .input-group-append,
.home-domain-search .advanced-input .input-group-append {
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-left: auto !important;
    display: flex; gap: 8px; align-items: center;
}
/* mobile buttons row spacing */
.home-domain-search .row.d-sm-none { margin-top: 14px; }

/* -- 20c. Simple-mode input (when AI search is off) -- */
.home-domain-search .advanced-input input[name=query],
.home-domain-search .input-group input[name=query] { flex: 1 1 auto; }

/* -- 20d. Hero rhythm after captcha removal -- */
.wc-hero-trust { margin-top: 30px; }
.home-domain-search .btn-link.btn-sm { margin-top: 26px; }
.home-domain-search .p-5 { padding-bottom: 4rem !important; }

/* ============================================================
   21. PREMIUM MOTION LAYER v18 — site-wide, like webclub.ca
   ============================================================ */

/* -- 21a. Page atmosphere: soft aurora glow at the top of every page -- */
body.primary-bg-color {
    background:
        radial-gradient(1000px 420px at 50% -160px, rgba(91, 61, 245, .07), transparent 70%),
        var(--wc-bg-soft) !important;
}

/* -- 21b. Living hero: slow gradient pan + floating glow orb -- */
@media (prefers-reduced-motion: no-preference) {
    .home-domain-search.bg-white {
        background-size: 170% 170% !important;
        animation: wcPan 24s ease-in-out infinite;
    }
    @keyframes wcPan {
        0%, 100% { background-position: 0% 30%; }
        50% { background-position: 100% 70%; }
    }
    .home-domain-search.bg-white::after { animation: wcFloat 13s ease-in-out infinite alternate; }
    @keyframes wcFloat {
        from { transform: translate(0, 0); }
        to { transform: translate(-50px, 46px); }
    }
}

/* -- 21c. (retired) sliding underline removed — the rounded pill hover
   matches webclub.ca's nav and doesn't fight the dropdown carets -- */

/* -- 21d. Primary buttons: sheen sweep on hover -- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
    content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-20deg); transition: left .5s var(--wc-ease); pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }

/* -- 21e. Tiles & help cards: premium gradient-border hover.
      True gradient border via the two-layer background technique
      (padding-box + border-box) — it IS the element's border, so the
      geometry is pixel-perfect at any radius/DPI. Plus: icon chip goes
      gradient with a white glyph, deeper lift, violet glow. -- */
.tiles .tile, .action-icon-btns a { position: relative; }
.tiles .tile::after, .action-icon-btns a::after { content: none !important; }

.tiles .tile:hover,
.action-icon-btns a:hover,
.action-icon-btns a[class*="card-accent-"]:hover {
    transform: translateY(-5px);
    border-color: transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--wc-grad-soft) border-box !important;
    box-shadow: 0 20px 46px -18px rgba(91, 61, 245, .42) !important;
}

/* icon chip lights up: gradient fill, white glyph, gentle pop */
.action-icon-btns a .ico-container,
.action-icon-btns a .ico-container i,
.tiles .tile i {
    transition: transform .25s var(--wc-ease), background .2s, color .2s;
}
.action-icon-btns a:hover .ico-container {
    background: var(--wc-grad-soft) !important;
    transform: translateY(-2px) scale(1.07);
}
.action-icon-btns a:hover .ico-container i { color: #fff !important; }
.tiles .tile:hover i {
    background: var(--wc-grad-soft) !important;
    color: #fff !important;
}
/* icon lift on tile hover */
.action-icon-btns a .ico-container { transition: transform .25s var(--wc-ease); }
.action-icon-btns a:hover .ico-container { transform: translateY(-3px) scale(1.06); }

/* -- 21f. Reveal-on-scroll (classes applied by js/aurora.js) -- */
.wc-reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s var(--wc-ease), transform .6s var(--wc-ease);
}
.wc-reveal.wc-in { opacity: 1; transform: none; }

/* -- 21g. Dropdowns & modals: pop-in -- */
@media (prefers-reduced-motion: no-preference) {
    .dropdown-menu.show { animation: wcPop .18s var(--wc-ease); }
    .modal.fade.show .modal-content { animation: wcPop .22s var(--wc-ease); }
    @keyframes wcPop {
        from { opacity: 0; transform: translateY(6px) scale(.985); }
        to { opacity: 1; transform: none; }
    }
}

/* -- 21h. Content card headers: gradient underline accent -- */
#main-body .card > .card-header { position: relative; overflow: hidden; }
#main-body .card > .card-header::after {
    content: ""; position: absolute; left: 1.25rem; bottom: 0;
    width: 56px; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--wc-grad-soft);
}
/* must out-specify the ID-scoped creator rule above */
#main-body .sidebar .card > .card-header::after,
.sidebar .card > .card-header::after { display: none !important; }

/* -- 21i. Tables: brand accent bar on row hover -- */
.table-hover tbody tr td:first-child { transition: box-shadow .15s; }
.table-hover tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--wc-brand); }

/* -- 21j. Safety net: no stray dynamic captcha may render on the homepage -- */
body:has(#frmDomainHomepage) [id*="divDynamicRecaptcha"] { display: none !important; }

/* ============================================================
   22. MENUS PREMIUM v20 — dropdowns, topbar, mobile, sidebar
   ============================================================ */

/* -- 22a. Desktop dropdown panels (Store, Domains, Account…) -- */
@media (min-width: 1200px) {
    #header .main-navbar-wrapper .dropdown-menu {
        min-width: 230px;
        border: 1px solid var(--wc-line);
        border-radius: 14px;
        box-shadow: var(--wc-shadow-lg);
        margin-top: 10px;
        padding: 8px;
    }
    /* the <li> also carries .dropdown-item — neutralise it, style the inner <a> */
    #header .main-navbar-wrapper .dropdown-menu > li.dropdown-item {
        padding: 0 !important; background: transparent !important; border: 0;
    }
    #header .main-navbar-wrapper .dropdown-menu .dropdown-item a,
    #header .main-navbar-wrapper .dropdown-menu a.dropdown-item {
        display: block;
        padding: 10px 14px !important;
        border-radius: 10px;
        font-weight: 550; font-size: .92rem;
        color: var(--wc-ink-2) !important;
        transition: background .15s, color .15s, padding-left .2s var(--wc-ease);
    }
    #header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
    #header .main-navbar-wrapper .dropdown-menu .dropdown-item a:hover {
        background: var(--wc-bg-tint);
        color: var(--wc-brand) !important;
        padding-left: 20px !important;
    }
    #header .main-navbar-wrapper .dropdown-menu .dropdown-divider {
        margin: 6px 8px; border-color: var(--wc-line);
    }
}

/* -- 22b. Mobile / tablet collapsed menu: dark links on the white bar -- */
@media (max-width: 1199.98px) {
    #header .main-navbar-wrapper .navbar-collapse { padding: 10px 4px 18px; }
    #header .main-navbar-wrapper .navbar-nav > li > a {
        display: block;
        border-radius: 10px;
        padding: .8rem 1rem !important;
    }
    #header .main-navbar-wrapper .navbar-nav > li > a::after { display: none; }
    #header .main-navbar-wrapper .dropdown-menu {
        background: var(--wc-bg-soft);
        border: 0; box-shadow: none; border-radius: 10px;
        margin: 2px 8px 8px; padding: 6px;
    }
    #header .main-navbar-wrapper .dropdown-menu > li.dropdown-item {
        padding: 0 !important; background: transparent !important;
    }
    #header .main-navbar-wrapper .dropdown-menu a.dropdown-item,
    #header .main-navbar-wrapper .dropdown-menu .dropdown-item a {
        display: block;
        color: var(--wc-ink-2) !important;
        padding: 9px 14px !important;
        border-radius: 8px; font-weight: 500;
    }
    #header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
    #header .main-navbar-wrapper .dropdown-menu .dropdown-item a:hover {
        background: var(--wc-bg-tint);
        color: var(--wc-brand) !important;
    }
    #header .main-navbar-wrapper .dropdown-menu .dropdown-divider { border-color: var(--wc-line); }
}

/* -- 22c. Logged-in topbar: frosted pill controls -- */
#header .topbar .btn,
#header .topbar .btn-group .btn {
    background: #fff;
    border: 1px solid #e3dcfb;
    border-radius: var(--wc-pill) !important;
    padding: 6px 14px;
    font-size: .84rem;
    box-shadow: 0 1px 2px rgba(24, 16, 64, .05);
    transition: border-color .15s, color .15s, background .15s;
}
#header .topbar .btn:hover { border-color: var(--wc-brand); color: var(--wc-brand); background: #fff; }
#header .topbar .btn .badge { background: var(--wc-brand); color: #fff; }
#header .topbar .input-group.active-client .btn { margin-left: 6px; }
#header .topbar { padding-top: 8px; padding-bottom: 8px; }

/* -- 22d. Sidebar menu: hover indent + icon tint -- */
.sidebar .list-group-item {
    transition: background .15s, color .15s, padding-left .2s var(--wc-ease);
}
.sidebar .list-group-item:hover { padding-left: 1.6rem; }
.sidebar .list-group-item i { color: var(--wc-brand); opacity: .8; margin-right: 4px; }
.sidebar .list-group-item.active i { opacity: 1; }

/* -- 22e. Header knowledgebase search: a touch more presence -- */
#header .search .appended-form-control { height: 42px; }
#header .search .btn-default { height: 42px; }

/* -- 22f. Hero search button: primary CTA sizing -- */
.home-domain-search .input-group-wrapper #btnDomainSearch { padding: 12px 28px !important; }

/* ============================================================
   23. FLAT PREMIUM NAV v21 — no submenus, CTA pill
   ============================================================ */

/* Sign Up: white CTA pill on the gradient (like the main site header CTA) */
#header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-signup"] > a {
    background: #fff !important;
    color: var(--wc-brand) !important;
    border-radius: var(--wc-pill);
    padding: .55rem 1.35rem !important;
    margin: .5rem 0 .5rem .6rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(16, 12, 38, .2);
    transition: transform .2s var(--wc-ease), box-shadow .2s var(--wc-ease);
}
#header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-signup"] > a:hover {
    background: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(16, 12, 38, .28);
}
#header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-signup"] > a::after { display: none; }

/* Logout keeps a subtle separation */
#header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-logout"] > a { opacity: .92; }

@media (max-width: 1199.98px) {
    #header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-signup"] > a {
        display: inline-block; margin: .6rem 1rem;
    }
}

/* ============================================================
   24. NO DROPDOWNS, EVER v22 — kill the "More" overflow menu
   ============================================================ */

/* The "More" li is twenty-one's responsive overflow dropdown. Never show it. */
#header .main-navbar-wrapper .collapsable-dropdown { display: none !important; }

/* Keep the nav on ONE line so the overflow JS never triggers
   (it fires on wrap-induced height growth) … */
@media (min-width: 1200px) {
    #header .main-navbar-wrapper .navbar-nav { flex-wrap: nowrap; }
}
/* … and make sure all items actually FIT on narrower desktops */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    #header .main-navbar-wrapper .navbar-nav > li > a {
        padding: 8px 11px !important;
        margin: 11px 2px;
        font-size: .89rem;
    }
    #header .main-navbar-wrapper .navbar-nav > li[menuitemname="wc-signup"] > a {
        padding: .5rem 1.1rem !important;
        margin-left: .4rem;
    }
}

/* ============================================================
   25. DEEP POLISH v26 — tickets, invoices, KB, announcements,
       status pills, auth pages, empty states
   ============================================================ */

/* -- 25a. Status pills (services, invoices, tickets, domains) -- */
.label, .status, .badge.status {
    display: inline-block;
    border-radius: var(--wc-pill);
    padding: 4px 12px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: capitalize;
}
.status-active, .label-success, .status-paid, .status-open, .status-completed {
    background: #e2f8f0 !important; color: #067a56 !important;
}
.status-pending, .label-warning, .status-pendingtransfer, .status-unpaid,
.status-customer-reply, .status-payment-pending {
    background: #fdf1dd !important; color: #b45309 !important;
}
.status-suspended, .label-danger, .status-overdue, .status-expired, .status-terminated {
    background: #fde8e8 !important; color: #b91c1c !important;
}
.status-cancelled, .label-default, .status-closed, .status-fraud, .status-inactive {
    background: #eeedf5 !important; color: var(--wc-muted) !important;
}
.status-answered, .label-info, .status-in-progress, .status-refunded {
    background: var(--wc-bg-tint) !important; color: var(--wc-brand) !important;
}

/* -- 25b. Ticket conversation -- */
.card.view-ticket {
    border-radius: var(--wc-radius);
    border: 1px solid var(--wc-line);
    box-shadow: var(--wc-shadow-sm);
    overflow: hidden;
}
.card.view-ticket .card-title {
    font-size: 1rem;
    padding-bottom: .65rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--wc-line);
}
.card.view-ticket .card-body { padding: 1.4rem 1.5rem; line-height: 1.7; }
.attachment-list a {
    display: inline-block;
    background: var(--wc-bg-soft);
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-pill);
    padding: 5px 14px;
    font-size: .84rem;
    margin: 3px 4px 3px 0;
}
.attachment-list a:hover { border-color: var(--wc-brand); }
.markdown-editor { border-radius: var(--wc-radius-sm); }

/* -- 25c. Invoice view -- */
.invoice-container {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm);
    padding: 2rem !important;
}
.invoice-container .card { box-shadow: none; }
.invoice-container .card-header.bg-success {
    border-radius: var(--wc-radius-sm) !important;
    font-weight: 700;
}
.invoice-container .table thead th { background: var(--wc-bg-soft); }
.invoice-container .total-row td, .invoice-container .amount { font-weight: 700; color: var(--wc-ink); }

/* -- 25d. Knowledgebase -- */
.input-group-lg.kb-search .form-control {
    border-radius: var(--wc-pill) 0 0 var(--wc-pill);
    border-color: var(--wc-line);
    padding-left: 1.4rem;
}
.input-group-lg.kb-search .btn {
    border-radius: 0 var(--wc-pill) var(--wc-pill) 0 !important;
}
.kb-article-item {
    border-color: #f1effa;
    transition: background .15s, padding-left .2s var(--wc-ease);
}
.kb-article-item:hover { background: #faf9ff; padding-left: 1.6rem; }
.kb-article-item .badge-info,
.badge.badge-info.float-right {
    background: var(--wc-bg-tint); color: var(--wc-brand);
    border-radius: var(--wc-pill); font-weight: 700;
}

/* -- 25e. Announcements -- */
.announcements .announcement .card-title,
.announcement .card-title { font-size: 1.25rem; font-weight: 800; }
.announcement .card-title a { color: var(--wc-ink); }
.announcement .card-title a:hover { color: var(--wc-brand); }
.announcement .list-inline { color: var(--wc-muted); font-size: .86rem; }
.announcement .btn-default.btn-sm { border-radius: var(--wc-pill); }

/* -- 25f. Auth pages: brand ambience + card entrance -- */
body:has(.login-or-register-container) {
    background:
        radial-gradient(900px 480px at 18% -120px, rgba(124, 58, 237, .12), transparent 65%),
        radial-gradient(900px 480px at 85% -140px, rgba(47, 107, 255, .1), transparent 65%),
        var(--wc-bg-soft) !important;
}
@media (prefers-reduced-motion: no-preference) {
    .login-or-register-container .card { animation: wcRise .6s var(--wc-ease) backwards; }
}
.login-or-register-container .providerLinkingFeedback { border-radius: var(--wc-radius-sm); }

/* -- 25g. Empty states -- */
.dataTables_empty {
    padding: 3rem 1rem !important;
    color: var(--wc-muted);
    font-size: .95rem;
}

/* -- 25h. Subtle branded scrollbar (WebKit) -- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #d5d2e8;
    border-radius: 8px;
    border: 3px solid var(--wc-bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: #b3aed6; }
/* panel bodies: slim, quiet scrollbar — a fat violet bar inside a card reads as a defect */
.sidebar .collapsable-card-body::-webkit-scrollbar,
.sidebar .list-group::-webkit-scrollbar { width: 6px; }
.sidebar .collapsable-card-body::-webkit-scrollbar-thumb,
.sidebar .list-group::-webkit-scrollbar-thumb {
    background: #ddd9ef; border: 0; border-radius: 6px;
}
.sidebar .collapsable-card-body::-webkit-scrollbar-thumb:hover,
.sidebar .list-group::-webkit-scrollbar-thumb:hover { background: #c5c0e2; }

/* -- 25i. Print safety (invoices etc.) -- */
@media print {
    body, body.primary-bg-color { background: #fff !important; }
    .wc-reveal { opacity: 1 !important; transform: none !important; }
    #header, #footer, .master-breadcrumb { display: none !important; }
    .invoice-container { border: 0; box-shadow: none; padding: 0 !important; }
}

/* ============================================================
   26. DASHBOARD REDESIGN v28 — tiles, panels, footers
   ============================================================ */

/* -- 26a. Stat tiles: icon chip left, stat over label right (grid) -- */
.tiles .tile {
    display: grid !important;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    align-content: center;
    padding: 20px 22px !important;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    text-align: left;
}
.tiles .tile i,
.tiles .tile:hover i {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: static !important;
    width: 52px !important; height: 52px !important;
    line-height: 52px !important;
    font-size: 22px !important;
    text-align: center;
    border-radius: 14px;
    transform: none !important;
    opacity: 1 !important;
}
.tiles .tile .stat {
    grid-column: 2; grid-row: 1;
    align-self: end;
    font-size: 1.9rem !important;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 !important;
}
.tiles .tile .title {
    grid-column: 2; grid-row: 2;
    align-self: start;
    font-size: .72rem !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wc-muted);
    margin: 0 !important;
}
.tiles .tile .highlight {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 3px !important;
    border-radius: 0 !important;
    opacity: .9;
}

/* -- 26b. Home panel cards: clean headers + proper footers -- */
#main-body .card > .card-header .card-title {
    font-size: 1.02rem;
    font-weight: 750;
}
#main-body .card > .card-header { padding: 1rem 1.35rem; }
#main-body .card > .card-body { padding: 1.35rem; }
#main-body .card > .card-footer {
    background: #fbfaff;
    border-top: 1px solid var(--wc-line);
    border-radius: 0 0 var(--wc-radius) var(--wc-radius) !important;
    padding: .7rem 1.35rem;
    font-size: .86rem;
}
#main-body .card > .card-footer a { font-weight: 600; }
#main-body .card > .card-footer .btn {
    padding: 6px 16px;
    font-size: .84rem;
}

/* -- 26c. "Register a New Domain" panel: proper input + button pair -- */
#registerDomainPanel .card-body { padding: 1.35rem; }
#registerDomainPanel input[type="text"] {
    border: 1px solid #ddd9f0;
    border-radius: var(--wc-radius-sm);
    padding: 11px 16px;
    width: 100%;
    margin-bottom: 12px;
    font-size: .95rem;
}
#registerDomainPanel input[type="text"]:focus {
    outline: none;
    border-color: #b7a8fb;
    box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .14);
}
#registerDomainPanel input[type="submit"] {
    border-radius: var(--wc-pill) !important;
    font-weight: 650;
    padding: 9px 22px;
    border: 1px solid transparent;
    margin-right: 8px;
    transition: transform .2s var(--wc-ease), box-shadow .2s var(--wc-ease);
}
#registerDomainPanel input[type="submit"]:hover { transform: translateY(-1px); }
#registerDomainPanel input.btn-success[type="submit"] {
    background: var(--wc-emerald);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .5);
}
#registerDomainPanel input[type="submit"]:not(.btn-success) {
    background: #fff;
    border-color: var(--wc-line);
    color: var(--wc-ink);
}
#registerDomainPanel input[type="submit"]:not(.btn-success):hover {
    border-color: var(--wc-brand);
    color: var(--wc-brand);
}

/* -- 26d. Panel empty states + news items -- */
#main-body .card-body p:only-child { color: var(--wc-body); margin: 0; }
#main-body .card ul { margin-bottom: 0; }

/* -- 26e. Sidebar panel polish -- */
.sidebar .card .card-header .btn i { color: #fff; }
.sidebar .card-footer {
    background: transparent;
    border-top: 1px solid #f1effa;
}
.sidebar .card-footer .btn { width: 100%; }

/* -- 26f. Row rhythm -- */
.tiles { margin-bottom: 1.4rem !important; }
#main-body .card { margin-bottom: 1.4rem; }

/* ============================================================
   27. FORM CONTROLS v33 — toggles, checkboxes, phone input
   ============================================================ */

/* -- 27a. Brand-coloured native checkboxes & radios everywhere -- */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--wc-brand);
    width: 1.05rem; height: 1.05rem;
}
.form-check-input { margin-top: .22rem; }

/* -- 27b-2. bootstrap-switch (mailing list Yes/No): segmented pill control -- */
.bootstrap-switch {
    display: inline-flex !important;
    align-items: center;
    width: auto !important; height: auto !important;
    border: 1px solid var(--wc-line) !important;
    border-radius: var(--wc-pill) !important;
    background: #efedf8 !important;
    overflow: hidden;
    box-shadow: none !important;
    padding: 3px;
}
.bootstrap-switch .bootstrap-switch-container {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    position: static !important;
    display: inline-block !important;
    width: auto !important; height: auto !important;
    padding: 5px 16px !important;
    font-size: .85rem !important; font-weight: 650;
    line-height: 1.35 !important;
    border: 0 !important;
    border-radius: var(--wc-pill) !important;
    transition: background .15s, color .15s;
}
.bootstrap-switch .bootstrap-switch-label {
    position: static !important;
    display: inline-block !important;
    width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: transparent !important;
    overflow: hidden;
}
/* the plugin's hidden checkbox picks up the global checkbox sizing and
   leaves a dead gap at the end of the track — remove it from the flow */
.bootstrap-switch .bootstrap-switch-container input[type="checkbox"] {
    position: absolute !important;
    width: 0 !important; height: 0 !important;
    margin: 0 !important; opacity: 0;
    pointer-events: none;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
    background: var(--wc-emerald) !important; color: #fff !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-off {
    background: transparent !important; color: var(--wc-muted) !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
    background: #fff !important; color: var(--wc-ink) !important;
    box-shadow: 0 1px 3px rgba(24, 16, 64, .18);
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-on {
    background: transparent !important; color: var(--wc-muted) !important;
}

/* -- 27b. Yes/No mailing-list switch (bootstrap-toggle sans plugin css):
      render as a clean segmented pill control -- */
.toggle.btn {
    width: auto !important; height: auto !important;
    display: inline-flex !important; align-items: center;
    padding: 3px !important;
    background: #efedf8 !important;
    border: 1px solid var(--wc-line) !important;
    border-radius: var(--wc-pill) !important;
    box-shadow: none !important;
    overflow: visible;
}
.toggle .toggle-group {
    position: static !important;
    display: inline-flex !important;
    width: auto !important; left: auto !important;
    transition: none !important;
}
.toggle .toggle-on, .toggle .toggle-off {
    position: static !important;
    display: inline-block !important;
    border-radius: var(--wc-pill) !important;
    padding: 6px 18px !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: .85rem !important; font-weight: 650;
    line-height: 1.3 !important;
    transition: background .15s, color .15s;
}
.toggle:not(.off) .toggle-on { background: var(--wc-emerald) !important; color: #fff !important; }
.toggle:not(.off) .toggle-off { background: transparent !important; color: var(--wc-muted) !important; }
.toggle.off .toggle-on { background: transparent !important; color: var(--wc-muted) !important; }
.toggle.off .toggle-off {
    background: #fff !important; color: var(--wc-ink) !important;
    box-shadow: 0 1px 3px rgba(24, 16, 64, .18);
}
.toggle .toggle-handle { display: none !important; }

/* -- 27c. Phone country picker (intl-tel-input) -- */
.intl-tel-input .country-list {
    border: 1px solid var(--wc-line) !important;
    border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow-lg);
    overflow-x: hidden !important;
    max-height: 260px;
    margin-top: 6px;
    /* stock list is ~465px and overflows the form column, which gives the
       card-body (overflow-x:auto) a horizontal scrollbar — keep it inside */
    width: 320px !important;
    max-width: min(320px, 84vw) !important;
    white-space: normal !important;
}
.intl-tel-input .country-list .country {
    padding: 8px 14px; font-size: .92rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
}
/* slim scrollbar that respects the panel's rounded corners */
.intl-tel-input .country-list::-webkit-scrollbar { width: 8px; }
.intl-tel-input .country-list::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: #d5d2e8;
    border-radius: 8px;
    border: 2px solid #fff;
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
    background: var(--wc-bg-tint) !important;
}
.intl-tel-input .country-list .divider { border-bottom: 1px solid var(--wc-line) !important; }
.intl-tel-input .country-list .country .dial-code { color: var(--wc-muted); }
.intl-tel-input .selected-flag {
    background: #fbfaff !important;
    border-right: 1px solid #ddd9f0;
    border-radius: var(--wc-radius-sm) 0 0 var(--wc-radius-sm);
    outline: none !important;
}
/* focus: violet ring instead of the harsh black outline */
.intl-tel-input .selected-flag:focus,
.intl-tel-input .selected-flag:focus-visible,
.intl-tel-input .flag-container:focus,
.intl-tel-input .flag-container:focus-within .selected-flag {
    outline: none !important;
    box-shadow: 0 0 0 .18rem rgba(91, 61, 245, .22);
}
.intl-tel-input.separate-dial-code .selected-dial-code { font-size: .9rem; }

/* ============================================================
   28. CART: DOMAIN REGISTER PAGE v42 — kill the yellow banner
   ============================================================ */

/* hero: stock paints a #ffd960→#ffb201 gradient + globe.png — go Aurora */
.domain-checker-container {
    background: var(--wc-grad) !important;
    border-radius: var(--wc-radius) !important;
    overflow: hidden;
    position: relative;
}
.domain-checker-bg {
    background-image: none !important;   /* the yellow globe */
    padding: 44px 28px !important;
    position: relative;
}
.domain-checker-bg::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(520px 260px at 10% -12%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(620px 320px at 94% 118%, rgba(236, 72, 153, .24), transparent 65%);
}
.domain-checker-container .search-container,
.domain-checker-container .input-group-box { position: relative; }

/* search button: keep the label + sparkles on ONE line, Aurora pill */
.domain-checker-bg .domain-check-availability,
.domain-checker-container .btn-primary {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--wc-pill) !important;
    background: var(--wc-grad-soft) !important;
    border: 0 !important;
    font-weight: 650 !important;
    box-shadow: 0 8px 20px -8px rgba(16, 12, 38, .45);
}
.domain-checker-bg .domain-check-availability i { display: inline-block; }

/* captcha centred under the search card */
.domain-checker-bg .g-recaptcha,
.domain-checker-bg [id^="google-recaptcha"] {
    display: flex; justify-content: center; margin-top: 16px; position: relative;
}

/* availability result text on the gradient */
.domain-checker-result-headline { position: relative; }
.domain-checker-available { color: #7ef0c8 !important; font-weight: 700; }
.domain-checker-unavailable, .domain-checker-invalid { color: #ffd2d2 !important; font-weight: 600; }

/* -- category chips: uniform Aurora, gradient when selected -- */
a.badge[data-category] {
    background: var(--wc-bg-tint) !important;
    color: var(--wc-brand) !important;
    border: 1px solid #ddd2fc;
    border-radius: var(--wc-pill) !important;
    padding: 7px 15px !important;
    font-weight: 650; font-size: .8rem !important;
    margin: 0 6px 8px 0; display: inline-block;
    transition: background .15s, color .15s, transform .15s var(--wc-ease);
}
a.badge[data-category]:hover { background: #e4dcfd !important; transform: translateY(-1px); }
a.badge[data-category].badge-primary,
a.badge[data-category].badge-success,
a.badge[data-category].active,
a.badge[data-category].selected {
    background: var(--wc-grad-soft) !important;
    color: #fff !important;
    border-color: transparent;
}

/* -- TLD pricing table -- */
.tld-pricing-header { background: transparent !important; }
.tld-pricing-header .col, .tld-pricing-header [class*="col"] {
    color: var(--wc-ink); font-weight: 700;
}
.tld-row {
    border-bottom: 1px solid #f1effa;
    transition: background .12s;
}
.tld-row:hover { background: #faf9ff; }
.tld-row .price { color: var(--wc-ink); font-weight: 650; }

/* ============================================================
   29. DOMAIN REGISTER PREMIUM v43 — hero content, search card,
       filter chips, pricing table as a card
   ============================================================ */

/* hero header inside the gradient */
.wc-domhero-head { text-align: center; position: relative; margin-bottom: 26px; }
.wc-domhero-head h2 {
    color: #fff !important;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800; letter-spacing: -.02em;
    margin: 0 0 .55rem;
}
.wc-domhero-head p {
    color: rgba(255, 255, 255, .85);
    max-width: 560px; margin: 0 auto;
    font-size: 1rem; line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
    .wc-domhero-head .wc-eyebrow { animation: wcRise .6s var(--wc-ease) backwards; }
    .wc-domhero-head h2 { animation: wcRise .6s .08s var(--wc-ease) backwards; }
    .wc-domhero-head p { animation: wcRise .6s .16s var(--wc-ease) backwards; }
}

/* the white search card: frosted ring, big radius, no hard border.
   FLEX layout: textarea full row, chips + safe-search + button on the row
   below — the stock ABSOLUTE-positioned button overlapped the placeholder. */
.domain-checker-container .input-group-box {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--wc-radius) !important;
    box-shadow: var(--wc-shadow-lg), 0 0 0 8px rgba(255, 255, 255, .12) !important;
    padding: 16px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.domain-checker-container .input-group-box textarea,
.domain-checker-container .input-group-box #message {
    flex: 1 1 100%;
    width: 100%;
    min-height: 76px;
    border-bottom: 1px solid var(--wc-line) !important;
    border-radius: 0;
    padding: 8px 6px;
    margin-bottom: 4px;
}
.domain-checker-container .input-group-box select.multiselect { display: none !important; }
.domain-checker-container .input-group-box .btn-group { flex: 0 0 auto; }
.domain-checker-container .input-group-box label {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
}
.domain-checker-bg .domain-check-availability,
.domain-checker-container .input-group-box .domain-check-availability {
    position: static !important;
    top: auto !important; right: auto !important;
    transform: none !important;
    order: 99;
    margin-left: auto !important;
}

/* living hero: slow gradient pan + floating pink orb (same as portal home) */
@media (prefers-reduced-motion: no-preference) {
    .domain-checker-container {
        background-size: 170% 170% !important;
        animation: wcPan 24s ease-in-out infinite;
    }
    .domain-checker-container::after {
        content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
        background: radial-gradient(circle, rgba(236, 72, 153, .26), transparent 68%);
        top: -160px; right: -110px; pointer-events: none;
        animation: wcFloat 13s ease-in-out infinite alternate;
    }
}
/* captcha + trust rhythm */
.domain-checker-bg .g-recaptcha, .domain-checker-bg [id^="google-recaptcha"] { margin-top: 18px; }
.domain-checker-bg .wc-hero-trust { margin-top: 22px; position: relative; }
.domain-checker-container textarea,
.domain-checker-container #message {
    border: 0 !important; box-shadow: none !important; resize: none;
    font-size: 1.02rem; color: var(--wc-ink);
}
.domain-checker-container input[name="query"] {
    border: 0 !important; box-shadow: none !important; font-size: 1.02rem;
}

/* filter chips inside the card (Include TLDs / Max Length) */
.domain-checker-container .multiselect.btn,
.domain-checker-container .btn-group .multiselect {
    background: var(--wc-bg-tint) !important;
    color: var(--wc-brand) !important;
    border: 1px solid #ddd2fc !important;
    border-radius: var(--wc-pill) !important;
    font-size: .84rem !important; font-weight: 650 !important;
    padding: 7px 16px !important;
    box-shadow: none !important;
}
.domain-checker-container .multiselect.btn:hover { background: #e4dcfd !important; }
.domain-checker-container label { color: var(--wc-ink-2); font-weight: 600; }
.domain-checker-bg .domain-check-availability { padding: 12px 28px !important; }

/* "Browse extensions by category" heading: display face + gradient accent */
h4.font-size-18 {
    font-family: var(--wc-font-display);
    font-size: 1.35rem !important;
    font-weight: 800;
    color: var(--wc-ink);
    margin: 2.2rem 0 1rem;
    position: relative;
    padding-bottom: 12px;
}
h4.font-size-18::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px; border-radius: 4px;
    background: var(--wc-grad-soft);
}
.tld-filters { margin-bottom: 1.2rem; }

/* pricing table becomes a proper card */
.tld-filters ~ .bg-white {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    overflow: hidden;
    box-shadow: var(--wc-shadow-sm);
}
.tld-pricing-header {
    background: #fbfaff !important;
    border-bottom: 2px solid var(--wc-line);
    padding: 14px 0 !important;
    font-weight: 700;
    color: var(--wc-ink) !important;
    text-transform: uppercase;
    font-size: .74rem !important;
    letter-spacing: .07em;
}
.tld-pricing-header [class*="col"] { border: 0 !important; }
.tld-row { padding: 6px 0; }
.tld-row:nth-child(even) { background: #fbfbfe; }
.tld-row:hover { background: #f5f2ff; }
.tld-row .tld-column, .tld-row [class*="col-md-4"]:first-child {
    font-weight: 750; color: var(--wc-ink);
}

/* ---- cart TLD pricing table: organised premium rows ---- */
/* neutral zebra instead of the stock blue (.highlighted is stock's stripe class) */
.tld-row { background: #fff !important; }
.tld-row.highlighted { background: #fbfbfe !important; }
.tld-row:hover, .tld-row.highlighted:hover { background: #f5f2ff !important; }
.tld-row.wc-row-sale, .tld-row.wc-row-sale.highlighted { background: #f7f3ff !important; }
.tld-row.wc-row-sale:hover { background: #f0e9ff !important; }

/* full-height soft dividers between price columns (kills the stray tick marks) */
.tld-row .col-md-8 .col-4 {
    border-left: 1px solid #f1effa !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-weight: 650;
    color: var(--wc-ink);
}
.tld-row .col-md-8 .col-4::before, .tld-row .col-md-8 .col-4::after { display: none !important; }
.tld-row small { color: var(--wc-muted); font-weight: 500; }
.tld-row .col-md-4 strong {
    font-family: var(--wc-font-display);
    font-size: 1.02rem;
    color: var(--wc-ink);
}
.tld-row .col-md-4 { padding-top: 14px !important; padding-bottom: 14px !important; }

/* short % chip beside the TLD name */
.wc-tld-pct {
    display: inline-block;
    background: var(--wc-grad-soft);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    border-radius: var(--wc-pill);
    padding: 2px 9px;
    margin-left: 8px;
    vertical-align: 2px;
}
/* sale register price pops in brand colour */
.wc-price-sale { color: var(--wc-brand); font-weight: 800; }
/* struck original price shown above the sale price */
del.wc-price-was {
    display: block;
    color: #9a97b0;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
}
del.wc-price-was-inline { display: inline; margin-right: 8px; }
.wc-renews-note {
    display: block;
    color: var(--wc-muted);
    font-size: .72rem;
    margin-top: 2px;
}
.domain-suggestion .wc-tld-pct { margin: 0 8px; }

/* header: identical cells, no stock band on any column */
.tld-pricing-header .col-4, .tld-pricing-header .tld-column {
    background: transparent !important;
}

/* currency select in the sidebar */
.sidebar select.form-control, .sidebar .custom-select {
    border-radius: var(--wc-radius-sm);
    border-color: #ddd9f0;
    font-weight: 550;
}

/* ============================================================
   30. DOMAIN SEARCH RESULTS v48 — exact match card, headings,
       suggestions panel, empty/loading states
   ============================================================ */

/* section headings: display face + gradient accent, no stock green bar */
.primary-domain-header,
.suggested-domains > .card-header {
    font-family: var(--wc-font-display) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--wc-ink) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 30px 0 12px !important;
    position: relative;
}
.primary-domain-header::after,
.suggested-domains > .card-header::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 52px; height: 4px; border-radius: 4px;
    background: var(--wc-grad-soft);
}

/* exact-match result becomes a card — ONLY on the domain-search page
   (.domain-checker-container ancestor); the hosting-config "Choose a
   Domain" step reuses the same #searchDomainInfo id and would show an
   empty white slab before any lookup runs. */
.domain-checker-container #searchDomainInfo {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm);
    padding: 30px 24px;
    margin: 10px 0 6px;
}
#searchDomainInfo .domain-available {
    color: #059669 !important;
    font-family: var(--wc-font-display);
    font-weight: 800;
    font-size: 1.3rem !important;
}
#searchDomainInfo .domain-unavailable,
#searchDomainInfo .domain-checker-unavailable {
    color: #b91c1c !important;
    font-weight: 700;
    font-size: 1.05rem !important;
}
#searchDomainInfo .domain-invalid { font-weight: 650; }
#searchDomainInfo .domain-price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--wc-ink);
    margin: 10px 0 0;
}
#searchDomainInfo .btn-add-to-cart { padding: 11px 28px !important; }
.domain-lookup-primary-loader { color: var(--wc-muted); font-weight: 600; }
.domain-lookup-primary-loader .fa-spinner { color: var(--wc-brand); }

/* suggestions panel as a card */
.suggested-domains {
    background: #fff;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm);
    overflow: hidden;
    margin-top: 20px;
}
.suggested-domains > .card-header {
    padding: 18px 22px 14px !important;
    border-bottom: 1px solid var(--wc-line) !important;
}
.suggested-domains > .card-header::after { left: 22px; }
.domain-lookup-suggestions-message,
.domain-lookup-suggestions-loader {
    color: var(--wc-muted);
    text-align: center;
    padding: 26px 20px !important;
    font-weight: 550;
}
.domain-lookup-suggestions-loader .fa-spinner { color: var(--wc-brand); }
#domainSuggestions .domain-suggestion {
    padding: 13px 22px;
    border-color: #f4f2fb;
    font-weight: 650;
    color: var(--wc-ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
#domainSuggestions .domain-suggestion:hover { background: #faf9ff; }
#domainSuggestions .domain-suggestion .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
#domainSuggestions .domain-suggestion .price { font-weight: 800; }
#domainSuggestions .btn-add-to-cart {
    background: var(--wc-bg-tint);
    color: var(--wc-brand);
    border: 0;
    border-radius: var(--wc-pill) !important;
    font-weight: 700;
    padding: 8px 20px !important;
}
#domainSuggestions .btn-add-to-cart:hover { background: var(--wc-grad-soft); color: #fff; }
/* price reads first, action button sits at the edge */
#domainSuggestions .domain-suggestion .actions .price { order: -1; margin-right: 6px; }

/* "Give me more suggestions!" — ghost pill instead of a grey strip */
.more-suggestions.card-footer {
    background: #fff !important;
    border-top: 1px solid var(--wc-line) !important;
    padding: 16px !important;
}
.more-suggestions #moreSuggestions {
    display: inline-block;
    color: var(--wc-brand);
    font-weight: 700;
    border: 1px solid #cfc6fb;
    border-radius: var(--wc-pill);
    padding: 9px 24px;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.more-suggestions #moreSuggestions:hover {
    background: var(--wc-grad-soft);
    border-color: transparent;
    color: #fff;
}
.more-suggestions .no-more { color: var(--wc-muted); }
.domain-suggestions-warning p {
    color: var(--wc-muted);
    font-size: .82rem;
    padding: 10px 16px 4px;
    margin: 0;
}

/* ============================================================
   31. PRODUCT DOMAIN STEP v52 — "Choose a Domain" config page
   ============================================================ */

/* the Check/Search button must never wrap its sparkle icon to a new line */
.domain-check-availability,
#btnCheckAvailability {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* domain option rows (register / transfer / own domain) */
#frmProductDomain .radio { border-radius: var(--wc-radius-sm); }
#frmProductDomain textarea,
#frmProductDomain input[type="text"] {
    border: 1px solid #ddd9f0 !important;
    border-radius: var(--wc-radius-sm) !important;
    padding: 12px 14px;
}
#frmProductDomain textarea:focus,
#frmProductDomain input[type="text"]:focus {
    border-color: #b7a8fb !important;
    box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .14) !important;
    outline: none;
}

/* -- 31b. Domain-step Continue CTA: bold when ready, unmistakably off when not -- */
#btnDomainContinue {
    padding: 14px 44px !important;
    font-size: 1.06rem !important;
    border-radius: var(--wc-pill) !important;
    letter-spacing: .01em;
    margin: 30px 0 12px;
}
#btnDomainContinue:not(:disabled) {
    box-shadow: 0 14px 34px -12px rgba(91, 61, 245, .55) !important;
}
#btnDomainContinue:not(:disabled):hover { transform: translateY(-2px); }
#btnDomainContinue:disabled,
#btnDomainContinue.disabled {
    background: #e6e4f2 !important;
    color: #8a879e !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1 !important;
    transform: none !important;
}
#btnDomainContinue:disabled::before { display: none; }
#btnDomainContinue:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(91, 61, 245, .35) !important;
}

/* ============================================================
   32. CHECKOUT POLISH v60 — modern iCheck controls, error box,
       section sub-headings
   ============================================================ */

/* -- 32a. iCheck (sprite "square-blue") → modern brand controls -- */
.icheckbox_square-blue, .iradio_square-blue {
    background-image: none !important;
    background: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #cfc6fb;
    position: relative;
    transition: background .15s, border-color .15s, box-shadow .15s;
    vertical-align: -4px;
}
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue { border-radius: 6px; }
.icheckbox_square-blue.hover, .iradio_square-blue.hover,
.icheckbox_square-blue:hover, .iradio_square-blue:hover { border-color: var(--wc-brand); }
.icheckbox_square-blue.checked, .iradio_square-blue.checked {
    background: var(--wc-grad-soft) !important;
    border-color: transparent;
    box-shadow: 0 4px 10px -4px rgba(91, 61, 245, .5);
}
.iradio_square-blue.checked::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff;
}
.icheckbox_square-blue.checked::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled { opacity: .5; }

/* -- 32b. validation boxes: rows, not centered soup.
      Applies to EVERY danger alert that carries a list — the checkout
      renders errors into more than one container (checkout-error-feedback,
      gateway-errors w/ text-center, …). -- */
.alert-danger,
.alert-danger.text-center,
.checkout-error-feedback,
.gateway-errors {
    text-align: left !important;
    padding: 16px 22px !important;
}
.alert-danger ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.alert-danger li {
    position: relative;
    list-style: none !important;
    text-align: left !important;
    padding: 5px 0 5px 24px !important;
    margin: 0 !important;
    font-weight: 550;
}
.alert-danger li::marker { content: ""; }
.alert-danger li::before {
    content: "";
    position: absolute; left: 6px; top: 13px;
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: .5;
}

/* -- 32c. cart sub-headings ("Additional Notes" etc.): match the system -- */
#order-standard_cart .sub-heading, .sub-heading { border: 0 !important; }
#order-standard_cart .sub-heading span, .sub-heading span {
    background: transparent !important;
    font-family: var(--wc-font-display);
    font-size: 1.15rem !important;
    font-weight: 800;
    color: var(--wc-ink) !important;
    padding: 0 0 10px !important;
    position: relative;
    display: inline-block;
}
#order-standard_cart .sub-heading span::after, .sub-heading span::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 0; width: 46px; height: 3px; border-radius: 3px;
    background: var(--wc-grad-soft);
}

/* ---------- 17. Motion restraint ---------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .tiles .tile, .action-icon-btns a { transition: none !important; }
    .wc-reveal { opacity: 1 !important; transform: none !important; }
}