/*
 * Axiam Networks — custom.css
 * Full reskin of the WHMCS "Six" theme to match axiamnetworks.com
 *
 * Auto-loaded by six/includes/head.tpl via {assetExists file="custom.css"}
 * Overrides six/css/styles.css and six/css/overrides.css
 */

/* ─── GOOGLE FONTS ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
    --ax-nav:     #1C82D6;
    --ax-dark:    #156DBF;
    --ax-accent:  #2AA8FF;
    --ax-bg0:     #F4FBFF;
    --ax-bg1:     #EAF6FF;
    --ax-text:    #0B1B2B;
    --ax-muted:   #516B85;
    --ax-surface: #FFFFFF;
    --ax-border:  rgba(11,27,43,.12);
    --ax-footer:  #0B1B2B;
    --ax-ease:    cubic-bezier(.2,.8,.2,1);
}

/* ─── BASE ───────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body,
input, button, select, textarea {
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    color: var(--ax-text) !important;
}

body {
    background-color: var(--ax-bg0) !important;
    background-image:
        radial-gradient(1100px 550px at 15% 0%,  rgba(42,168,255,.15), transparent 55%),
        radial-gradient(900px  520px at 85% 10%,  rgba(111,211,255,.18), transparent 60%),
        linear-gradient(180deg, var(--ax-bg0), var(--ax-bg1)) !important;
    background-attachment: fixed !important;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    color: var(--ax-text) !important;
}

a               { color: var(--ax-nav) !important; }
a:hover,a:focus { color: var(--ax-dark) !important; text-decoration: none !important; }

/* ─── SECTION #header  (Six's logo + top-nav strip) ─────────────────── */
section#header {
    background: var(--ax-dark) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
/* Override Bootstrap's .container max-width inside the header bar
   so logo and links span the full width, matching the navbar below */
section#header > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
section#header .logo img    { max-height: 44px !important; width: auto !important; }
section#header .logo-text   {
    font-weight: 900 !important; font-size: 20px !important;
    color: #fff !important; white-space: nowrap !important;
}
section#header ul.top-nav {
    display: flex !important; align-items: center !important;
    gap: 6px !important; list-style: none !important;
    margin: 0 !important; padding: 0 !important; flex-wrap: wrap !important;
}
section#header ul.top-nav li a {
    color: rgba(255,255,255,.88) !important;
    font-size: 13px !important; font-weight: 600 !important;
    padding: 6px 10px !important; border-radius: 10px !important;
    transition: background .18s, color .18s !important;
}
section#header ul.top-nav li a:hover {
    background: rgba(255,255,255,.14) !important; color: #fff !important;
}
section#header ul.top-nav li.primary-action a.btn {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important; font-weight: 700 !important;
    border-radius: 10px !important; padding: 7px 14px !important;
}
section#header ul.top-nav li.primary-action a.btn:hover {
    background: rgba(255,255,255,.22) !important; color: #fff !important;
    transform: translateY(-1px) !important;
}
section#header ul.top-nav .btn-logged-in-admin {
    background: rgba(255,220,50,.15) !important;
    border-color: rgba(255,220,50,.4) !important; color: #ffe432 !important;
}

/* ─── SECTION #main-menu  (the sticky blue navbar) ──────────────────── */
section#main-menu {
    background: var(--ax-nav) !important;
    box-shadow: 0 2px 20px rgba(10,40,70,.18) !important;
    position: sticky !important; top: 0 !important; z-index: 60 !important;
}
.navbar-main {
    background-color: var(--ax-nav) !important;
    background-image: none !important; border: none !important;
    margin-bottom: 0 !important; border-radius: 0 !important;
    min-height: 50px !important;
    font-family: 'Poppins', sans-serif !important; font-size: 13px !important;
}
/* Remove the negative margins Six applies to .navbar-nav inside #main-menu */
#main-menu .navbar-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.navbar-main .navbar-nav > li > a {
    color: rgba(255,255,255,.92) !important;
    font-weight: 700 !important; font-size: 13px !important;
    padding: 14px 12px !important; border-radius: 12px !important;
    margin: 3px 1px !important;
    transition: background .2s var(--ax-ease), color .2s var(--ax-ease) !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
    background: rgba(255,255,255,.14) !important; color: #fff !important;
}
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus {
    background: rgba(255,255,255,.18) !important; color: #ffe432 !important;
    box-shadow: none !important;
}
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background: rgba(255,255,255,.18) !important; color: #fff !important;
}
.navbar-main li.account { background-color: transparent !important; }

/* Fix the large gap between left and right nav sections.
   Bootstrap's navbar-right uses margin-right:-15px which combined with
   Six's margin overrides creates a huge space. We reset it. */
.navbar-main .navbar-nav.navbar-right {
    margin-right: 0 !important;
    float: right !important;
}
/* Separator line between primary nav and account nav */
.navbar-main .navbar-nav.navbar-right > li:first-child > a {
    border-left: 1px solid rgba(255,255,255,.18) !important;
    margin-left: 8px !important;
    padding-left: 14px !important;
}

/* hamburger */
.navbar-main .navbar-toggle {
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 12px !important; background: rgba(255,255,255,.12) !important;
}
.navbar-main .navbar-toggle .icon-bar { background-color: #fff !important; }
.navbar-main .navbar-toggle:hover, .navbar-main .navbar-toggle:focus {
    background: rgba(255,255,255,.2) !important;
}
.navbar-main .navbar-toggle:hover .icon-bar,
.navbar-main .navbar-toggle:focus .icon-bar { background-color: #fff !important; }

/* dropdown */
.navbar-main .dropdown-menu {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(42,168,255,.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(10,40,70,.16) !important;
    padding: 6px !important; margin-top: 4px !important; border-top: none !important;
}
.navbar-main .dropdown-menu > li > a {
    color: var(--ax-text) !important; font-weight: 600 !important;
    font-size: 13px !important; border-radius: 9px !important;
    padding: 9px 14px !important;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: rgba(42,168,255,.1) !important;
    color: var(--ax-nav) !important; text-decoration: none !important;
}
.navbar-main .dropdown-menu .divider {
    background-color: var(--ax-border) !important; margin: 5px 8px !important;
}

/* mobile */
@media (max-width: 991px) {
    .navbar-main .navbar-collapse {
        background: rgba(22,100,195,.98) !important;
        border-top: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 8px 20px rgba(10,40,70,.18) !important;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a {
        color: rgba(255,255,255,.9) !important; padding: 8px 20px !important;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        background: rgba(255,255,255,.1) !important; color: #fff !important;
    }
}

/* ─── HOME BANNER ────────────────────────────────────────────────────── */
section#home-banner {
    background: linear-gradient(135deg, #1C82D6 0%, #156DBF 100%) !important;
    padding: 48px 0 !important; position: relative !important; overflow: hidden !important;
}
section#home-banner::before {
    content: '' !important; position: absolute !important; inset: 0 !important;
    background:
        radial-gradient(700px 350px at 10% 50%, rgba(42,168,255,.2), transparent 55%),
        radial-gradient(500px 300px at 90% 20%, rgba(111,211,255,.15), transparent 55%) !important;
    pointer-events: none !important;
}
section#home-banner h2 {
    color: #fff !important; font-size: 28px !important;
    font-weight: 900 !important; margin-bottom: 24px !important;
    position: relative !important; z-index: 1 !important;
}
section#home-banner .form-control {
    border: none !important; height: 52px !important;
    font-size: 15px !important; padding: 0 18px !important;
    border-radius: 12px 0 0 12px !important;
    box-shadow: none !important; position: relative !important; z-index: 1 !important;
}
section#home-banner .input-group-btn .btn.search {
    background: linear-gradient(135deg, #0B1B2B, #1C3D5A) !important;
    border: none !important; color: #fff !important; font-weight: 800 !important;
    height: 52px !important; padding: 0 24px !important;
    border-radius: 0 12px 12px 0 !important;
    position: relative !important; z-index: 1 !important;
}
section#home-banner .input-group-btn .btn.transfer {
    background: linear-gradient(135deg, #156DBF, #1C82D6) !important;
    border: none !important; color: #fff !important; font-weight: 800 !important;
    height: 52px !important; border-radius: 0 12px 12px 0 !important;
    position: relative !important; z-index: 1 !important;
}

/* home shortcuts row */
.home-shortcuts {
    background: rgba(42,168,255,.05) !important;
    border-bottom: 1px solid rgba(42,168,255,.12) !important;
    padding: 20px 0 !important;
}
.home-shortcuts p.lead {
    color: var(--ax-muted) !important; font-weight: 700 !important;
    font-size: 15px !important; margin: 0 !important;
}
.home-shortcuts ul {
    list-style: none !important; padding: 0 !important; margin: 0 !important;
    display: flex !important; flex-wrap: wrap !important; gap: 0 !important;
}
/* Each li is the cell — border between cells acts as the separator */
.home-shortcuts ul li {
    border-right: 1px solid rgba(42,168,255,.18) !important;
}
.home-shortcuts ul li:last-child {
    border-right: none !important;
}
.home-shortcuts ul li a {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 10px 22px !important; border-radius: 0 !important;
    background: transparent !important; border: none !important;
    color: var(--ax-text) !important; font-weight: 700 !important; font-size: 13px !important;
    box-shadow: none !important;
    /* NO transform — avoids overlap with separator lines */
    transition:
        background 0.22s cubic-bezier(.2,.8,.2,1),
        color 0.22s cubic-bezier(.2,.8,.2,1) !important;
    white-space: nowrap !important;
}
.home-shortcuts ul li a:hover {
    background: rgba(42,168,255,.09) !important;
    color: var(--ax-nav) !important;
    /* shadow lift instead of transform so size/position never changes */
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
}
.home-shortcuts ul li a i {
    color: var(--ax-nav) !important; font-size: 17px !important;
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1) !important;
}
.home-shortcuts ul li a:hover i {
    transform: scale(1.15) !important;
}
.home-shortcuts ul li a p { margin: 0 !important; font-size: 13px !important; }

/* ─── SECTION #main-body ─────────────────────────────────────────────── */
section#main-body {
    background: transparent !important;
    padding: 30px 0 !important; min-height: 400px !important;
}

/* page header / breadcrumb */
div.header-lined h1 {
    font-weight: 900 !important; font-size: 26px !important;
    color: var(--ax-text) !important;
    border-bottom: 2px solid var(--ax-border) !important;
    padding-bottom: 12px !important; margin-bottom: 6px !important;
}
div.header-lined .breadcrumb {
    background: transparent !important; padding-left: 0 !important;
    font-size: 13px !important; margin-top: -6px !important;
}
div.header-lined .breadcrumb li a { color: var(--ax-muted) !important; font-weight: 600 !important; }
div.header-lined .breadcrumb > .active { color: var(--ax-nav) !important; }
.breadcrumb > li + li::before { color: var(--ax-accent) !important; }

/* ─── SIDEBAR ────────────────────────────────────────────────────────── */
.sidebar .list-group {
    border-radius: 0 0 14px 14px !important; overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(10,40,70,.07) !important;
}
/* First item must have square top corners — butts flush against panel-heading, no double-radius gap */
.sidebar .list-group .list-group-item:first-child {
    border-radius: 0 !important;
}
.sidebar .list-group-item {
    background: #fff !important; border-color: var(--ax-border) !important;
    font-size: 13px !important; font-weight: 600 !important;
    padding: 10px 16px !important; color: var(--ax-text) !important;
    transition: background .16s, padding-left .16s !important;
}
.sidebar a.list-group-item:hover,
.sidebar a.list-group-item:focus {
    background: rgba(42,168,255,.07) !important;
    color: var(--ax-nav) !important; padding-left: 20px !important;
}
.sidebar a.list-group-item.active,
.sidebar a.list-group-item.active:hover,
.sidebar a.list-group-item.active:focus {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    border-color: #1C82D6 !important; color: #fff !important; font-weight: 800 !important;
}
.sidebar .list-group-item .badge { background: transparent !important; color: var(--ax-nav) !important; }
.sidebar .list-group-item.active .badge { color: rgba(255,255,255,.8) !important; }

/* ─── PANELS ─────────────────────────────────────────────────────────── */
.panel {
    background: var(--ax-surface) !important;
    border: 1px solid var(--ax-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 22px rgba(10,40,70,.07) !important;
    overflow: hidden !important;
}
.panel-heading {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    color: #fff !important; border: none !important; border-radius: 0 !important;
    padding: 13px 20px !important; font-weight: 800 !important; font-size: 14px !important;
}
.panel-heading .panel-title, .panel-heading h3 {
    color: #fff !important; font-weight: 800 !important; font-size: 14px !important;
}
.panel-heading a { color: rgba(255,255,255,.92) !important; }
.panel-body   { padding: 20px !important; }
.panel-footer {
    background: rgba(42,168,255,.04) !important;
    border-top: 1px solid var(--ax-border) !important; padding: 12px 20px !important;
}
.panel-primary > .panel-heading { background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important; }
.panel-default > .panel-heading { background: #f0f6fc !important; color: var(--ax-text) !important; border-bottom: 1.5px solid var(--ax-border) !important; }
.panel-default > .panel-heading .panel-title,
.panel-default > .panel-heading h3 { color: var(--ax-text) !important; font-weight: 800 !important; }
.panel-success > .panel-heading { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
.panel-info    > .panel-heading { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
.panel-warning > .panel-heading { background: linear-gradient(135deg, #d97706, #f59e0b) !important; }
.panel-danger  > .panel-heading { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important; font-size: 13px !important;
    border-radius: 12px !important;
    transition: all .2s var(--ax-ease) !important; overflow: hidden !important;
}
.btn-primary {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 4px 14px rgba(42,168,255,.28) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, #1876c4, #2AA8FF) !important;
    color: #fff !important; transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(42,168,255,.36) !important;
}
.btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    border: none !important; color: #fff !important;
}
.btn-success:hover { background: linear-gradient(135deg, #15803d, #16a34a) !important; color: #fff !important; transform: translateY(-1px) !important; }
.btn-danger  { background: linear-gradient(135deg, #dc2626, #ef4444) !important; border: none !important; color: #fff !important; }
.btn-danger:hover  { background: linear-gradient(135deg, #b91c1c, #dc2626) !important; color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b) !important; border: none !important; color: #fff !important; }
.btn-info    { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; border: none !important; color: #fff !important; }
.btn-default {
    background: transparent !important;
    border: 1.5px solid rgba(42,168,255,.35) !important; color: var(--ax-nav) !important;
}
.btn-default:hover, .btn-default:focus {
    background: rgba(42,168,255,.08) !important;
    border-color: rgba(42,168,255,.6) !important; color: var(--ax-nav) !important;
    transform: translateY(-1px) !important;
}
.btn-lg { padding: 12px 24px !important; font-size: 15px !important; }
.btn-sm { padding:  6px 12px !important; font-size: 12px !important; }
.btn-xs { padding:  3px  8px !important; font-size: 11px !important; border-radius: 8px !important; }
.input-group-btn > .btn { border-radius: 0 12px 12px 0 !important; }
.input-group .form-control:first-child { border-radius: 12px 0 0 12px !important; }

/* ─── FORMS ──────────────────────────────────────────────────────────── */
.form-control {
    font-family: 'Poppins', sans-serif !important; font-size: 14px !important;
    color: var(--ax-text) !important; background: var(--ax-surface) !important;
    border: 1.5px solid var(--ax-border) !important;
    border-radius: 12px !important; padding: 10px 16px !important;
    height: auto !important; box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
/* Prepend-icon inputs (register, client details, order forms) — restore left
   padding so text clears the absolutely-positioned icon (field-icon is 42px wide) */
#registration .prepend-icon .field,
#registration .prepend-icon .form-control,
.prepend-icon .field,
.prepend-icon .form-control {
    padding-left: 42px !important;
}
/* Also ensure the field-icon vertically centres correctly with our taller inputs */
#registration .prepend-icon .field-icon,
.prepend-icon .field-icon {
    height: 100% !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.form-control:focus {
    border-color: var(--ax-accent) !important;
    box-shadow: 0 0 0 3px rgba(42,168,255,.14) !important; outline: none !important;
}
.form-control::placeholder { color: var(--ax-muted) !important; }
label, .control-label {
    font-weight: 700 !important; font-size: 13px !important;
    color: var(--ax-text) !important; margin-bottom: 5px !important;
}
.input-group-addon {
    background: rgba(42,168,255,.06) !important;
    border: 1.5px solid var(--ax-border) !important;
    color: var(--ax-nav) !important; font-weight: 700 !important;
    border-radius: 12px 0 0 12px !important;
}
.has-error .form-control   { border-color: #ef4444 !important; }
.has-error .control-label  { color: #dc2626 !important; }
.has-success .form-control { border-color: #22c55e !important; }
.has-feedback label ~ .form-control-feedback { top: 32px !important; }

/* ─── ALERTS ─────────────────────────────────────────────────────────── */
.alert {
    border: none !important; border-radius: 12px !important;
    font-weight: 600 !important; font-size: 14px !important; padding: 13px 18px !important;
}
.alert-success { background: rgba(22,163,74,.09)  !important; color: #15803d !important; border-left: 4px solid #22c55e !important; }
.alert-danger,
.alert-error   { background: rgba(220,38,38,.08)   !important; color: #b91c1c !important; border-left: 4px solid #ef4444 !important; }
.alert-warning { background: rgba(217,119,6,.09)   !important; color: #92400e !important; border-left: 4px solid #f59e0b !important; }
.alert-info    { background: rgba(42,168,255,.09)  !important; color: var(--ax-nav) !important; border-left: 4px solid var(--ax-accent) !important; }
.alert-bordered-left { border-radius: 0 12px 12px 0 !important; }

/* ─── TABLES ─────────────────────────────────────────────────────────── */
.table > thead > tr > th {
    background: linear-gradient(135deg, #1C82D6, #156DBF) !important;
    color: #fff !important; font-weight: 800 !important; font-size: 13px !important;
    border: none !important; padding: 13px 16px !important;
}
.table > tbody > tr > td {
    border-color: var(--ax-border) !important; padding: 12px 16px !important;
    font-size: 14px !important; vertical-align: middle !important; color: var(--ax-text) !important;
}
.table > tbody > tr:hover > td { background: rgba(42,168,255,.03) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(42,168,255,.025) !important; }
.table-bordered {
    border: 1px solid var(--ax-border) !important;
    border-radius: 14px !important; overflow: hidden !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--ax-border) !important; }

/* ─── LIST GROUP ─────────────────────────────────────────────────────── */
.list-group { border-radius: 14px !important; overflow: hidden !important; font-size: 0.9em; }
.list-group-item {
    border-color: var(--ax-border) !important; font-size: 13px !important;
    font-weight: 600 !important; padding: 10px 16px !important;
    background: var(--ax-surface) !important; color: var(--ax-text) !important;
    transition: background .15s, color .15s !important;
}
a.list-group-item:hover, a.list-group-item:focus {
    background: rgba(42,168,255,.07) !important; color: var(--ax-nav) !important;
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    border-color: #1C82D6 !important; color: #fff !important; font-weight: 800 !important;
}
.list-group-item .badge { background: transparent !important; color: var(--ax-nav) !important; }
.list-group-item > i.far.fa-circle { color: var(--ax-muted) !important; }

/* ─── LABELS / BADGES ────────────────────────────────────────────────── */
.label { border-radius: 999px !important; font-weight: 800 !important; font-size: 11px !important; }
.badge { border-radius: 999px !important; font-weight: 800 !important; }
.label-default   { background: #6b7280 !important; color: #fff !important; }
.label-primary,
.label-info      { background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important; }
.label-success   { background: #16a34a !important; color: #fff !important; }
.label-warning   { background: #d97706 !important; color: #fff !important; }
.label-danger    { background: #dc2626 !important; }

/* ─── PAGINATION ─────────────────────────────────────────────────────── */
.pagination { font-size: 13px !important; }
.pagination > li > a, .pagination > li > span {
    border: 1.5px solid var(--ax-border) !important; color: var(--ax-nav) !important;
    font-weight: 700 !important; margin: 0 2px !important; border-radius: 10px !important;
    transition: all .18s var(--ax-ease) !important;
}
.pagination > li > a:hover {
    background: rgba(42,168,255,.09) !important; border-color: rgba(42,168,255,.4) !important;
    transform: translateY(-1px) !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    border-color: #1C82D6 !important; color: #fff !important;
}

/* ─── TABS ───────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--ax-border) !important; }
.nav-tabs > li > a {
    border: none !important; border-radius: 12px 12px 0 0 !important;
    font-weight: 700 !important; font-size: 13px !important;
    color: var(--ax-muted) !important; padding: 10px 18px !important;
    transition: background .18s, color .18s !important;
}
.nav-tabs > li > a:hover {
    background: rgba(42,168,255,.07) !important; color: var(--ax-nav) !important; border: none !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none !important; border-bottom: 3px solid var(--ax-accent) !important;
    color: var(--ax-nav) !important; font-weight: 800 !important; background: transparent !important;
}

/* ─── MODALS ─────────────────────────────────────────────────────────── */
.modal-content {
    border: none !important; border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(10,40,70,.2) !important; overflow: hidden !important;
}
.modal-header {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    border: none !important; padding: 16px 22px !important; border-radius: 0 !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 800 !important; font-size: 15px !important; }
.modal-header .close { color: rgba(255,255,255,.8) !important; opacity: 1 !important; text-shadow: none !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-body   { padding: 22px !important; }
.modal-footer { border-top: 1px solid var(--ax-border) !important; padding: 14px 22px !important; }
/* Six's #modalAjax uses panel-primary classes inside the modal */
.system-modal .modal-header.panel-heading {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
}
.system-modal .modal-body.panel-body     { background: #fff !important; }
.system-modal .modal-footer.panel-footer { background: rgba(42,168,255,.04) !important; border-top: 1px solid var(--ax-border) !important; }

/* ─── WELLS ──────────────────────────────────────────────────────────── */
.well {
    background: rgba(42,168,255,.05) !important;
    border: 1px solid rgba(42,168,255,.15) !important;
    border-radius: 14px !important; box-shadow: none !important;
}

/* ─── PROGRESS BARS ──────────────────────────────────────────────────── */
.progress {
    height: 8px !important; border-radius: 999px !important;
    background: rgba(42,168,255,.12) !important; box-shadow: none !important;
}
.progress-bar {
    background: linear-gradient(90deg, #1C82D6, #2AA8FF) !important; border-radius: 999px !important;
}

/* ─── LOGIN PAGE ─────────────────────────────────────────────────────── */
.logincontainer {
    max-width: 480px !important; margin: 50px auto 100px !important;
    background: var(--ax-surface) !important;
    border: 1px solid var(--ax-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 50px rgba(10,40,70,.1) !important; padding: 36px !important;
}
.logincontainer.with-social { max-width: 620px !important; }
.logincontainer h1, .logincontainer h2 {
    font-size: 26px !important; font-weight: 900 !important; margin-bottom: 24px !important;
}

/* ─── SECTION #footer ────────────────────────────────────────────────── */
section#footer {
    background: var(--ax-footer) !important;
    border-top: none !important; color: rgba(255,255,255,.72) !important;
    font-size: 14px !important; padding: 52px 0 26px !important;
    margin-top: 48px !important; line-height: 1.7 !important;
}
section#footer p   { color: rgba(255,255,255,.45) !important; font-size: 13px !important; margin: 0 !important; }
section#footer a   { color: rgba(255,255,255,.65) !important; transition: color .18s !important; }
section#footer a:hover { color: #fff !important; }
section#footer .back-to-top       { float: right !important; }
section#footer .back-to-top i     {
    background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.7) !important;
    border-radius: 10px !important; padding: 10px !important; opacity: 1 !important;
    transition: background .18s !important;
}
section#footer .back-to-top:hover i {
    background: rgba(255,255,255,.2) !important; color: #fff !important;
}

/* ─── MISC ───────────────────────────────────────────────────────────── */
#fullpage-overlay { background: rgba(11,27,43,.88) !important; }
.compact-control-bar {
    background: rgba(42,168,255,.06) !important;
    border: 1px solid rgba(42,168,255,.14) !important; border-radius: 10px !important;
}
.tooltip-inner {
    background: #0B1B2B !important; border-radius: 8px !important;
    font-size: 13px !important; font-weight: 600 !important; padding: 6px 12px !important;
}
.popover {
    border: 1px solid var(--ax-border) !important;
    border-radius: 14px !important; box-shadow: 0 12px 36px rgba(10,40,70,.14) !important;
}
.popover-title {
    background: linear-gradient(135deg, #1C82D6, #2AA8FF) !important;
    color: #fff !important; border-radius: 13px 13px 0 0 !important; font-weight: 800 !important;
}
.primary-bg-color { background-color: var(--ax-surface) !important; }
.domain-available   { color: #16a34a !important; font-weight: 800 !important; }
.domain-unavailable { color: #dc2626 !important; font-weight: 700 !important; }

/* ─── SMOOTH ANIMATIONS — global pass ───────────────────────────────── */

/* Buttons: lift on hover without layout shift */
.btn {
    will-change: transform, box-shadow !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-warning:hover {
    transform: translateY(-2px) !important;
}
.btn-default:hover {
    transform: translateY(-1px) !important;
}
/* Active state snaps back */
.btn:active {
    transform: translateY(0) !important;
    transition-duration: 0.08s !important;
}

/* Nav links */
.navbar-main .navbar-nav > li > a {
    will-change: background, color !important;
}

/* Sidebar items */
.sidebar .list-group-item,
a.list-group-item {
    will-change: background, color !important;
}

/* Panel hover lift */
.panel {
    transition: box-shadow 0.22s cubic-bezier(.2,.8,.2,1),
                transform   0.22s cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform, box-shadow !important;
}
.panel:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(10,40,70,.12) !important;
}

/* Links */
a {
    transition: color 0.18s cubic-bezier(.2,.8,.2,1) !important;
}

/* Table rows */
.table > tbody > tr {
    transition: background 0.16s !important;
}

/* Dropdown menus — fade in smoothly */
.navbar-main .dropdown-menu {
    animation: axDropIn 0.18s cubic-bezier(.16,1,.3,1) !important;
}
@keyframes axDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduce motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */

/* Large desktop */
@media (min-width: 1200px) {
    section#header > .container { padding-left: 30px !important; padding-right: 30px !important; }
}

/* Tablet & small desktop */
@media (max-width: 991px) {
    /* Header bar stacks logo above account links on tablet */
    section#header > .container {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
    }
    section#header ul.top-nav { flex-wrap: wrap !important; gap: 4px !important; }

    /* Shortcuts wrap gracefully */
    .home-shortcuts ul { gap: 0 !important; flex-wrap: wrap !important; }
    .home-shortcuts ul li { border-right: none !important; border-bottom: 1px solid rgba(42,168,255,.14) !important; width: 50% !important; }
    .home-shortcuts ul li:nth-last-child(-n+2) { border-bottom: none !important; }
    .home-shortcuts ul li a { width: 100% !important; justify-content: center !important; padding: 12px 16px !important; }

    /* Login container */
    .logincontainer { margin: 20px auto 40px !important; }
}

/* Mobile */
@media (max-width: 600px) {
    section#home-banner h2 { font-size: 22px !important; }
    section#home-banner { padding: 32px 0 !important; }

    /* Shortcuts go single column on mobile */
    .home-shortcuts ul li { width: 100% !important; border-bottom: 1px solid rgba(42,168,255,.14) !important; }
    .home-shortcuts ul li:last-child { border-bottom: none !important; }
    .home-shortcuts ul li a { justify-content: flex-start !important; padding: 12px 20px !important; }

    .logincontainer { padding: 24px !important; margin: 10px auto 30px !important; }

    div.header-lined h1 { font-size: 22px !important; }

    /* Compact table on mobile */
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 9px 10px !important; font-size: 13px !important; }

    /* Footer grid single column */
    section#footer > .container > div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }
}