/* ====================== SIDEBAR HIDING (when no panels) ====================== */
/* Stronger selectors for Control Theme compatibility */
body.clientarea .sidebar-left,
body.clientarea .primary-sidebar,
body.clientarea .sidebar {
    display: none !important;
}

/* Full-width content - matches your existing main-content-wrapper styles */
body.clientarea .main-content-wrapper,
body.clientarea .main-content,
body.clientarea .content-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px;
}

/* Mobile optimisation for South African networks */
@media (max-width: 767px) {
    body.clientarea .main-content-wrapper,
    body.clientarea .main-content {
        padding: 15px 10px;
    }
}


/******************************
WHMCS CONTROL THEME – CUSTOM STYLES v3.4
******************************/
:root {
    --primary-start: #0EA5E9;
    --primary-end: #A855F7;
    --primary-hover-start: #0C8DD6;
    --primary-hover-end: #974EE4;
    --primary-active-start: #0A7CC3;
    --primary-active-end: #8747D1;
    --text-primary: #1A1A1A;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    --text-white: #ffffff;
    --bg-light: #ffffff;
    --bg-medium: #fafafa;
    --bg-heavy: #E6EEF3;
    --bg-dark: #1A1A1A;
    --bg-hover-dark: #303030;
    --bg-dropdown: #ffffff;
    --text-dropdown: #1A1A1A;
    --bg-dropdown-hover: #f1f5f9;
    --border-dropdown: #e2e8f0;
    --bg-alert: #A3B8C9;
    --border-light: #e2e8f0;
    --border-alert: #A3B8C9;
    --gradient-primary: linear-gradient(135deg, var(--primary-start), var(--primary-end));
    --gradient-hover: linear-gradient(135deg, var(--primary-hover-start), var(--primary-hover-end));
    --gradient-active: linear-gradient(135deg, var(--primary-active-start), var(--primary-active-end));
    --shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    --icon-opacity: 0.85;
    --icon-opacity-hover: 1;
    --transition-fast: .25s ease;
    --transition-medium: .65s cubic-bezier(.2,.8,.2,1);
    --border-radius-small: 8px;
    --border-radius-medium: 14px;
    --border-radius-large: 24px;
    --shadow-subtle: 0 2px 8px rgba(0,0,0,.15);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
}


/* ==========================================================================
   LAYOUT FIXES & MISC OVERRIDES
   ========================================================================== */
.main-content-wrapper { background: var(--bg-heavy); }
.main-content-wrapper #main-content { padding-top: 50px; }
label.radio-icheck { margin-top: 10px; margin-bottom: 20px; margin-left: 20px; }
.dataTables_wrapper .dataTables_paginate { display: none; }

.div-service-status .label {
    padding: 5px 10px !important;
}

.panel>.list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.panel-body {

    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.input-group input[type=text] {
    height: 41px;
}

.input-group-lg input[type=text] {
    height: 46px;
}

/* Hide Quick Shortcuts and Quick Email Panel */
#cPanelQuickShortcutsPanel, 
#cPanelQuickEmailPanel,
#Primary_Sidebar-Service_Details_Actions-Login_to_cPanel {
    display: none !important;
}


/* ==========================================================================
   GLOBAL LAYOUT & TYPOGRAPHY – Applies to all pages
   ========================================================================== */
   
#header,
#header a:not(.btn):not(.dropdown-toggle),
.breadcrumb,
.page-header h1, .page-header h2, .page-header h3,
#main-content,
#main-content .panel,
#main-content .panel-title,
#main-content .panel-body,
#main-content table, #main-content table th, #main-content table td,
#main-content .form-control,
#main-content label,
#main-content p,
#main-content h1, #main-content h2, #main-content h3,
#main-content h4, #main-content h5, #main-content h6,
#main-content .alert,
#main-content .text-muted,
#main-content .text-info,
#main-content .list-group-item,
#main-content .modal-content,
#main-content .popover {
    color: var(--text-primary) !important;
}
#main-content a:not(.btn):not(.btn-primary):not(.btn-default):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info) {
    color: var(--primary-end) !important;
    transition: color var(--transition-fast);
}
#main-content a:not(.btn):not(.btn-primary):not(.btn-default):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info):hover,
#main-content a:not(.btn):not(.btn-primary):not(.btn-default):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info):focus {
    color: #9333ea !important;
}
#main-content a:not(.btn):not(.btn-primary):not(.btn-default):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info):active,
#main-content a:not(.btn):not(.btn-primary):not(.btn-default):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info).active {
    color: var(--text-white) !important;
    font-weight: var(--font-weight-semi-bold);
}

/* ==========================================================================
   HEADER – Consistent across all pages
   ========================================================================== */
#header { background-color: var(--bg-dark) !important; }
#header, #header a:not(.btn):not(.dropdown-toggle) { color: var(--text-white) !important; }
#header .logo, #header .brand { background-color: var(--bg-dark) !important; }
#header .logo a, #header .brand a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 20px; }
#header .logo img { max-height: 100px; width: auto; transition: filter var(--transition-fast); }
#header .btn-default { background: #ffffff; }
#header .btn-default .fas { color: #000000; cursor: pointer; }
#header .btn-default:hover, #header .btn-default:active, #header li.open .btn-default { background: var(--bg-hover-dark) !important; }
#header .dropdown.settings>a { font-weight: var(--font-weight-semi-bold); font-size: 12px; color: #ffffff; }

/* ==========================================================================
   HEADER DROPDOWN – Settings menu
   ========================================================================== */
#header .dropdown.settings .dropdown-menu { background: var(--bg-dropdown) !important; border: 1px solid var(--border-dropdown) !important; }
#header .dropdown.settings .dropdown-menu > li > a { color: var(--text-dropdown) !important; }
#header .dropdown.settings .dropdown-menu > li > a:hover,
#header .dropdown.settings .dropdown-menu > li > a:active,
#header .dropdown.settings .dropdown-menu > li > a:focus {
    background-color: var(--bg-dropdown-hover) !important;
    color: var(--text-dropdown) !important;
}
#header .dropdown.settings .dropdown-menu > li > a i {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: var(--icon-opacity);
    transition: opacity var(--transition-fast);
}
#header .dropdown.settings .dropdown-menu > li > a:hover i { opacity: var(--icon-opacity-hover); }

/* ==========================================================================
   SIDEBAR – Consistent across all pages
   ========================================================================== */
.sidebar-left { background: var(--bg-light); border-right: 1px solid var(--border-light); }
.sidebar-left .nav-pills > li > a {
    position: relative;
    padding: 12px 10px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    border-left: 0 solid transparent !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    overflow: hidden;
    transition: all var(--transition-fast);
}
.sidebar-left .nav-pills > li > a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.sidebar-left .nav-pills > li > a:hover::before,
.sidebar-left .nav-pills > li.active > a::before { opacity: 1; }
.sidebar-left .nav-pills > li > a:hover,
.sidebar-left .nav-pills > li.active > a {
    color: #1e293b !important;
    background-color: rgba(14,165,233,.08) !important;
}
.sidebar-left .nav-pills > li.active > a { font-weight: var(--font-weight-semi-bold); }
.sidebar-left .nav-pills > li > a i {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: var(--icon-opacity);
    transition: opacity var(--transition-fast);
}
.sidebar-left .nav-pills > li > a:hover i,
.sidebar-left .nav-pills > li.active > a i { opacity: var(--icon-opacity-hover); }
.sidebar-left .nav-dropdown > a:after,
html[dir=rtl] .sidebar-left .nav-dropdown > a:after {
    margin-top: -2px !important;
    float: right !important;
    content: "\f105" !important;
    font-family: "Font Awesome 5 Pro" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    opacity: .75;
    transition: all var(--transition-fast) !important;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[dir=rtl] .sidebar-left .nav-dropdown > a:after { float: left !important; content: "\f104" !important; }
.sidebar-left .nav-dropdown.open > a:after,
.sidebar-left .nav-dropdown.nav-dropdown-open > a:after { content: "\f107" !important; opacity: 1; }
.sidebar-left .nav-pills > li > a:hover > .nav-dropdown > a:after,
.sidebar-left .nav-pills > li.active > a .nav-dropdown > a:after,
.sidebar-left .nav-dropdown.open > a:after { opacity: 1; }
.sidebar-left .nav .nav-sub,
.sidebar-left .nav .nav-sub a,
.sidebar-mini .sidebar-left .nav > li > .nav-sub,
.sidebar-mini .sidebar-left .nav > li:hover > .nav-sub,
.sidebar-mini .sidebar-left .nav > li.nav-dropdown-open > .nav-sub {
    background: var(--bg-light) !important;
    color: var(--text-secondary) !important;
}
.sidebar-left .nav .nav-sub a:hover,
.sidebar-mini .sidebar-left .nav-sub a:hover {
    background-color: rgba(14,165,233,.08) !important;
    color: #1e293b !important;
}
.sidebar-left .nav-sub,
.sidebar-mini .sidebar-left .nav-sub { background: var(--bg-light) !important; box-shadow: none !important; border: none !important; }
@media (min-width: 992px) {
    #header .toggle-navigation.toggle-left { display: none !important; }
}

/* ==========================================================================
   PANELS – All panels, modals, alerts across all pages
   ========================================================================== */
.panel-default,
.panel-success {
    position: relative;
    border-radius: var(--border-radius-medium);
    background: var(--bg-medium);
    padding: 2px;
    isolation: isolate;
    opacity: 0;
    transform: scale(.98);
    animation: panelFadeIn var(--transition-medium) forwards;
}
@keyframes panelFadeIn { to { opacity: 1; transform: scale(1); } }
.panel-default::before,
.panel-success::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.panel-heading { border-radius: calc(var(--border-radius-medium) - 2px) calc(var(--border-radius-medium) - 2px) 0 0; }
.panel-footer { border-radius: 0 0 calc(var(--border-radius-medium) - 2px) calc(var(--border-radius-medium) - 2px); }
.panel-body { padding: 15px; background: var(--bg-light) !important; }
.panel-title > i.fas,
.panel-title > i.fa,
.panel-title > i.far {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
}
.panel-success > .panel-heading { background-color: var(--bg-medium); }

/* ==========================================================================
   TABLES & PAGINATION – Consistent across all pages
   ========================================================================== */
#main-content table {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}
#main-content table th { background: var(--bg-medium); border-bottom: 1px solid var(--border-light); }
#main-content table td { border-top: 1px solid var(--border-light); }
.pagination > li > a,
.pagination > li > span {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background: var(--bg-heavy);
    border-color: var(--border-light);
}
.pagination > .active > a,
.pagination > .active > span {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--text-white);
}
.pagination > .active > a:hover,
.pagination > .active > span:hover { background: var(--gradient-hover); }

/* ==========================================================================
   ALERTS – Consistent across all pages
   ========================================================================== */
.alert-warning,
.alert-danger,
.alert-info {
    background-color: var(--bg-heavy) !important;
    border-color: var(--border-alert) !important;
    color: var(--text-primary) !important;
}
.alert-success {
    background-color: var(--bg-alert) !important;
    border-color: var(--border-alert) !important;
    color: var(--text-white) !important;
}
.alert-success .fas.fa-check,
.alert-success .fas.fa-2x.fa-check { color: var(--text-white) !important; }
.alert-success .results-text,
.alert-success span.results-text,
.domain-results .results-text,
.domainresults .results-text {
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    font-weight: var(--font-weight-semi-bold);
}
.alert-success .btn-add-to-cart,
.btn-add-to-cart.btn-success {
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    border: none !important;
}
.alert-success .btn-add-to-cart:hover,
.btn-add-to-cart.btn-success:hover { background: var(--gradient-hover) !important; }
.alert-success .btn-add-to-cart:active,
.btn-add-to-cart.btn-success:active { background: var(--gradient-active) !important; }
.alert-success .btn-add-to-cart::after,
.btn-add-to-cart.btn-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shimmer);
    transform: translateX(-150%) skewX(-25deg);
    transition: transform var(--transition-medium);
    pointer-events: none;
}
.alert-success .btn-add-to-cart:hover::after,
.btn-add-to-cart.btn-success:hover::after { transform: translateX(150%) skewX(-25deg); }

/* ==========================================================================
   BUTTONS – ONLY FIX: Small client area buttons now stay small
   ========================================================================== */
.btn,
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--border-radius-small);
    font-weight: var(--font-weight-regular);
    box-shadow: none !important;
    transform: none !important;
    transition: opacity .2s ease;
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-default {
    background: var(--gradient-primary);
    color: var(--text-white) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-default:hover {
    background: var(--gradient-hover);
}
.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-default:active {
    background: var(--gradient-active);
}
.btn-primary::after,
.btn-success::after,
.btn-warning::after,
.btn-default::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shimmer);
    transform: translateX(-150%) skewX(-25deg);
    transition: transform var(--transition-medium);
    pointer-events: none;
}
.btn-primary:hover::after,
.btn-success:hover::after,
.btn-warning:hover::after,
.btn-default:hover::after {
    transform: translateX(150%) skewX(-25deg);
}
.panel-body .btn-success,
.panel-body .btn-default {
    position: relative !important;
    overflow: hidden !important;
}
.panel-body .btn-success::after,
.panel-body .btn-default::after { display: block !important; }
#checkout.btn-primary,
.btn-primary.btn-3d { min-width: 280px !important; padding: 18px 44px !important; font-size: 18px !important; }
.btn { font-size: 13px; }
.btn-default.btn-3d { font-size: 18px; }

/* Force small size on client area action buttons */
.btn-primary.btn-3d.btn-sm.btn-block,
.panel-body .btn-default,
.service-item .btn,
.client-area-actions .btn,
.list-group-item .btn,
.btn-manage,
.btn-view,
.btn-login,
.btn-renew {
    padding: 11px 20px !important;
    font-size: 13px !important;
    min-width: auto !important;
}

.btn-sm.btn-success {
    font-size: 13px !important;
    min-width: auto !important;
}

/* ==========================================================================
   DASHBOARD TILES – Gradient + Shimmer
   ========================================================================== */
.dashboard-tile,
.dashboard-tile[class*="tile-"] {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-small) !important;
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    border: none !important;
    box-shadow: none !important;
    transition: opacity .2s ease;
}
.dashboard-tile:hover { background: var(--gradient-hover) !important; }
.dashboard-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shimmer);
    transform: translateX(-150%) skewX(-25deg);
    transition: transform var(--transition-medium);
    pointer-events: none;
}
.dashboard-tile:hover::after { transform: translateX(150%) skewX(-25deg); }
.dashboard-tile .header .title,
.dashboard-tile .content h1,
.dashboard-tile .content p {
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    font-weight: var(--font-weight-semi-bold) !important;
}
.dashboard-tile.detail .icon i,
.dashboard-tile .icon i {
    font-size: 70px !important;
    line-height: normal !important;
    color: rgba(255,255,255,.75) !important;
    -webkit-text-fill-color: rgba(255,255,255,.75) !important;
}

/* ==========================================================================
   PRICING TABLES – 100% YOUR ORIGINAL WORKING CODE
   ========================================================================== */
.panel-product,
.panel-solid-primary,
.panel-outline-default {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
.panel-title { padding-top: 20px; }
section.cart span.price { font-size: 36px; }
.panel-product {
    border-radius: var(--border-radius-large) !important;
    overflow: hidden;
    background: var(--bg-light);
    border: 1px solid var(--border-light) !important;
}
.panel-solid-primary {
    position: relative;
    padding: 5px;
    isolation: isolate;
    border: none !important;
}
.panel-solid-primary > .panel-body { background: var(--bg-light); }
.panel-solid-default a,
.panel-solid-primary a { text-decoration: none; }
.panel-solid-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-large);
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.panel-solid-primary > .panel-heading {
    background: var(--bg-light);
    color: var(--text-primary) !important;
    padding: 40px 20px 20px !important;
    text-align: center;
    border-radius: calc(var(--border-radius-large) - 5px) calc(var(--border-radius-large) - 5px) 0 0 !important;
    margin: -5px -5px 0 -5px;
}
.panel-solid-primary .panel-heading h3 { font-size: 32px !important; font-weight: var(--font-weight-bold); margin: 0 0 8px 0; }
.panel-solid-primary .panel-heading p { margin: 0; font-size: 16px; opacity: 0.9; }
.panel-solid-primary .panel-heading::after {
    content: "MOST POPULAR";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    padding: 8px 24px;
    border-radius: 0 0 16px 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.panel-product .panel-footer {
    padding: 0 20px 40px !important;
    background: var(--bg-light) !important;
    border-top: none !important;
    text-align: center;
}
.panel-product .btn {
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: 18px 50px !important;
    font-size: 18px !important;
    font-weight: var(--font-weight-regular);
    border-radius: 16px !important;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}
.panel-product .btn:hover { background: var(--gradient-hover) !important; }
.panel-product .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shimmer);
    transform: translateX(-150%) skewX(-25deg);
    transition: transform var(--transition-medium);
    pointer-events: none;
    border-radius: inherit;
}
.panel-product .btn:hover::after { transform: translateX(150%) skewX(-25deg); }
.panel-product .billing-info { font-size: 14px; color: var(--text-secondary); text-align: center; margin-top: 12px; }
.featured-tld .price.coza { background: var(--gradient-primary); color: var(--text-white); }
.featured-tld .price.com,
.featured-tld .price { background-color: var(--bg-alert); color: var(--text-white); }

/* ==========================================================================
   DOMAIN SEARCH PAGE – Filters, badges, results
   ========================================================================== */
.tld-filters a.badge,
.tld-filters .badge,
.domainresults a.badge,
.domainresults .badge,
.tld-list a.badge,
.tld-list .badge,
.input-domain-suggestions a.badge,
.input-domain-suggestions .badge,
.badge[href] {
    background-color: var(--bg-alert) !important;
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    border: none !important;
    font-weight: var(--font-weight-semi-bold) !important;
    transition: all var(--transition-fast) !important;
}
.tld-filters a.badge-success,
.tld-filters .badge-success,
.domainresults a.badge-success,
.domainresults .badge-success,
.tld-list a.badge-success,
.tld-list .badge-success,
.input-domain-suggestions a.badge-success,
.input-domain-suggestions .badge-success,
.badge-success[href],
.tld-filters a.badge.active,
.tld-filters .badge.active,
.domainresults a.badge.active,
.domainresults .badge.active {
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    box-shadow: var(--shadow-subtle) !important;
}
.tld-filters a.badge-success:hover,
.domainresults a.badge-success:hover { background: var(--gradient-hover) !important; }
.cart a.label-success,
.label-success {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background: #1A1A1A !important;
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    border: none !important;
    border-radius: var(--border-radius-small) !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-regular) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    transition: all .3s ease;
    backface-visibility: hidden;
}

/* ==========================================================================
   CART LABEL NO HOSTING
   ========================================================================== */
.cart a.label-no-hosting,
.label-no-hosting {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background: var(--gradient-primary) !important;
    color: var(--text-white) !important;
    -webkit-text-fill-color: var(--text-white) !important;
    border: none !important;
    border-radius: var(--border-radius-small) !important;
    padding: 11px 20px !important;
    font-size: 16px !important;
    font-weight: var(--font-weight-regular) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    transition: all .3s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
    animation: bounceIn 1.2s ease-out forwards, wiggle 4.5s infinite ease-in-out 2s;
}
.cart a.label-no-hosting:hover,
.label-no-hosting:hover { background: var(--gradient-hover) !important; }
.cart a.label-no-hosting::after,
.label-no-hosting::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: translateX(-150%) skewX(-25deg);
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    border-radius: inherit;
}
.cart a.label-no-hosting:hover::after,
.label-no-hosting:hover::after { transform: translateX(150%) skewX(-25deg); }
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3) translateZ(0); }
    50% { opacity: 1; transform: scale(1.05) translateZ(0); }
    70% { transform: scale(0.9) translateZ(0); }
    100% { opacity: 1; transform: scale(1) translateZ(0); }
}
@keyframes wiggle {
    2% { transform: translateX(3px) rotate(2deg); }
    4% { transform: translateX(-3px) rotate(-2deg); }
    6% { transform: translateX(3px) rotate(2deg); }
    8% { transform: translateX(-3px) rotate(-2deg); }
    10% { transform: translateX(2px) rotate(1deg); }
    12% { transform: translateX(-2px) rotate(-1deg); }
    14% { transform: translateX(2px) rotate(1deg); }
    16% { transform: translateX(-2px) rotate(-1deg); }
    18% { transform: translateX(1px) rotate(0); }
    20% { transform: translateX(-1px) rotate(0); }
    100% { transform: translateX(0) rotate(0); }
}

/* ==========================================================================
   CART / CHECKOUT / REVIEW PAGES
   ========================================================================== */
#continueShopping,
#btnEmptyCart,
.btn-continue-shopping,
.btn-empty-cart,
.cart-links { display: none !important; }
div.row > div.col-sm-6:has(> #checkout),
div.row > div.col-sm-12:has(> #checkout) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px 0 10px !important;
    width: 100%;
}
div.row > div.col-sm-6:has(> #checkout)::before,
div.row > div.col-sm-12:has(> #checkout)::before {
    content: "Ready to complete your order?";
    font-size: 19px;
    font-weight: var(--font-weight-regular);
    color: #1e293b;
    margin-bottom: 24px;
}
section.cart a.btn-link { color: #A855F7; }
section.cart button.btn-link { color: #A855F7; }
.panel-view-cart .item,
.panel-view-cart .total,
.panel-view-cart .recurring { color: #1A1A1A; }

/* ==========================================================================
   KNOWLEDGEBASE, ANNOUNCEMENTS, NETWORK STATUS, CONTACT US
   ========================================================================== */
#main-content .kb-article,
#main-content .announcement,
#main-content .network-status,
#main-content .contact-form {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}
#main-content .kb-article h2,
#main-content .announcement h2 { color: var(--text-primary); font-weight: var(--font-weight-regular); }

/* ==========================================================================
   FOOTER – Consistent across all pages
   ========================================================================== */
#footer,
#footer .panel,
#footer.panel-solid-default,
#footer.panel-solid-default > .panel-body,
#footer.panel-solid-default > .panel-heading,
#footer.panel-solid-default > .panel-footer {
    background-color: var(--bg-dark) !important;
    border-color: var(--border-light) !important;
    color: var(--text-muted);
}
#footer { border-top: 1px solid var(--border-light); }
#footer a,
#footer .footer-text { color: var(--text-light); }
#footer a:hover { color: var(--text-white); }