/* ================================================================
   AVRINTECH — WHMCS Twenty-One Custom Skin
   Kinetic Precision: Obsidian · Electric Amber · Metallic Blue
   Single unified file — no conflicting z-index layers
   ================================================================ */

/* ----------------------------------------------------------------
   CSS VARIABLES
   ---------------------------------------------------------------- */
:root {
    --ak-bg:           #07111f;
    --ak-bg-2:         #101827;
    --ak-panel:        rgba(15, 23, 42, 0.84);
    --ak-panel-strong: rgba(15, 23, 42, 0.96);
    --ak-border:       rgba(148, 163, 184, 0.22);
    --ak-text:         #e5eefb;
    --ak-muted:        #bfd0e5;
    --ak-soft:         #cbd5e1;
    --ak-cyan:         #67e8f9;
    --ak-blue:         #60a5fa;
    --ak-amber:        #F2A359;
}

/* ----------------------------------------------------------------
   BASE / BODY
   ---------------------------------------------------------------- */
html,
body {
    overflow-x: hidden !important;
    background-color: var(--ak-bg) !important;
    background-image:
        radial-gradient(circle at 12% 8%,  rgba(37, 99, 235, 0.34), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(124, 58, 237, 0.22), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #101827 55%, #111827 100%) !important;
    background-attachment: fixed !important;
    color: var(--ak-text);
}

#main-body {
    background: transparent !important;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

body,
#main-body,
section#main-body,
.primary-content {
    color: var(--ak-text);
}

/* ----------------------------------------------------------------
   STACKING ORDER (single source of truth)

   Layer 5 — dropdown menus:  z-index 5000
   Layer 4 — header/navbar:   z-index 4000
   Layer 3 — breadcrumb:      z-index 10
   Layer 2 — footer:          z-index 2
   Layer 1 — page content:    z-index 1
   ---------------------------------------------------------------- */

#header,
header.header,
.header {
    position: relative !important;
    z-index: 4000 !important;
    overflow: visible !important;
}

.header .navbar,
.header .navbar > .container,
.header .navbar > .container-fluid,
.header .main-navbar-wrapper,
.header .main-navbar-wrapper > .container,
.header .navbar-collapse,
.header #mainNavbar,
.header #nav,
.header .navbar-nav,
.header .nav-item,
.header li.dropdown,
.header .dropdown {
    overflow: visible !important;
    position: relative !important;
    z-index: 4001 !important;
}

.header .dropdown-menu,
.navbar-nav .dropdown-menu,
#mainNavbar .dropdown-menu,
#nav .dropdown-menu,
ul.dropdown-menu {
    position: absolute !important;
    z-index: 5000 !important;
    display: none;
    background: #081120 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.85) !important;
    color: #eaf2ff !important;
}

.header .dropdown-menu.show,
.header .dropdown.show > .dropdown-menu,
.header li.dropdown.show > .dropdown-menu,
.navbar-nav .dropdown-menu.show {
    display: block !important;
}

.header .dropdown-menu .dropdown-item,
.header .dropdown-menu a,
.dropdown-menu .dropdown-item,
.dropdown-menu a {
    color: #eaf2ff !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.header .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:hover {
    background: rgba(37, 99, 235, 0.28) !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-divider {
    border-top-color: rgba(148, 163, 184, 0.35) !important;
}

.master-breadcrumb,
#master-breadcrumb,
.master-breadcrumb .container,
.master-breadcrumb .breadcrumb,
.breadcrumb {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(2, 6, 23, 0.78) !important;
    border-color: var(--ak-border) !important;
    box-shadow: none !important;
}

.master-breadcrumb .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.master-breadcrumb {
    border-top: 1px solid var(--ak-border) !important;
    border-bottom: 1px solid var(--ak-border) !important;
    padding: 0.75rem 0 !important;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active,
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item.active {
    color: rgba(229, 238, 251, 0.92) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(203, 213, 225, 0.6) !important;
}

#main-body,
section#main-body,
.main-body,
.primary-content,
.domain-checker-container,
.domain-search,
.home-domain-search,
section.home-banner,
.client-home-panels,
.sidebar,
.card,
.panel,
.tiles,
.tile,
.store-order-container,
.invoice-container,
.product-details-tab-container,
.ak-page,
.ak-hero,
.ak-section {
    position: relative !important;
    z-index: 1 !important;
}

/* ----------------------------------------------------------------
   HEADER / NAVIGATION APPEARANCE
   ---------------------------------------------------------------- */
.header,
.header .navbar,
.header .topbar,
.main-navbar-wrapper {
    background: rgba(2, 6, 23, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

.header {
    border-bottom: 1px solid var(--ak-border) !important;
}

.header .navbar-brand,
.header .navbar-brand:hover,
.header .navbar .nav-link,
.header .navbar a,
.main-navbar-wrapper a,
.header .navbar-nav .nav-link {
    color: var(--ak-text) !important;
}

.header .navbar .nav-link:hover,
.header .navbar-nav .nav-link:hover,
.main-navbar-wrapper a:hover {
    color: var(--ak-amber) !important;
}

.header .navbar-nav .nav-link.active,
.header .navbar-nav .active > .nav-link {
    color: var(--ak-amber) !important;
    border-bottom: 2px solid var(--ak-amber);
}

.header .navbar .form-control,
.header .input-group-text,
.header .btn,
.topbar .btn {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

/* ----------------------------------------------------------------
   DOMAIN SEARCH BAR
   ---------------------------------------------------------------- */
.home-domain-search,
.domain-search-container,
.domain-checker-container,
#domain-search-bar,
.whmcs-banner-wrap,
.banner-container,
section.home-banner,
section.home-banner > div,
.domain-search-block,
.domain-search-wrap {
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: none !important;
    color: var(--ak-text) !important;
}

.home-domain-search h1,
.home-domain-search h2,
.home-domain-search h3,
.domain-checker-container h1,
.domain-checker-container h2,
.domain-checker-container h3,
.domain-search-container h1,
.domain-search-container h2 {
    color: #ffffff !important;
}

.home-domain-search input[type="text"],
.domain-checker-container input[type="text"],
.domain-search-container input[type="text"] {
    background: rgba(7, 17, 31, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    color: #e5eefb !important;
}

.home-domain-search input::placeholder,
.domain-checker-container input::placeholder {
    color: rgba(203, 213, 225, 0.55) !important;
}

.home-domain-search .btn-primary,
.domain-checker-container .btn-primary,
.domain-search-container .btn-primary {
    background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
    border: 0 !important;
    color: #fff !important;
}

.home-domain-search a,
.domain-checker-container a {
    color: var(--ak-cyan) !important;
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer,
footer,
#footer {
    background: rgba(2, 6, 23, 0.92) !important;
    border-top: 1px solid var(--ak-border) !important;
    color: var(--ak-muted) !important;
    position: relative !important;
    z-index: 2 !important;
}

.footer h5,
.footer h4,
.footer .footer-heading,
footer h5,
footer h4 {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.footer .copyright,
.footer .text-muted,
footer .text-muted {
    color: rgba(148, 163, 184, 0.55) !important;
}

/* Footer links */
.footer-link {
    color: #7a8fa8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: inline-block;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

.footer-link:hover {
    color: #F2A359 !important;
    text-decoration: none !important;
}

/* ----------------------------------------------------------------
   SERVICE / PRODUCT CARDS
   ---------------------------------------------------------------- */
.card,
.panel,
.tiles .tile,
.client-home-panels .panel,
.sidebar .panel,
.list-group-item,
.marketing-email-optin,
.domain-checker-container,
.logincontainer,
.register-page .form-holder,
.ticket-reply,
.ticket-details,
.announcement-single,
.kb-article,
.store-order-container,
.product-details-tab-container,
.invoice-container,
.table-container,
.dataTables_wrapper,
.sidebar .list-group,
.primary-content > .card,
.primary-content > .panel {
    background: var(--ak-panel) !important;
    border: 1px solid var(--ak-border) !important;
    border-radius: 16px !important;
    color: var(--ak-text) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.20) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.panel:hover,
.tiles .tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30) !important;
    border-color: rgba(96, 165, 250, 0.30) !important;
}

.card-header,
.panel-heading,
.panel-footer,
.card-footer,
.table thead th,
.invoice-summary,
.product-status,
.sidebar .list-group-item.active {
    background: rgba(2, 6, 23, 0.58) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

.card-body,
.panel-body,
.card p,
.panel p,
.primary-content p,
.primary-content li,
.primary-content label,
.primary-content span,
.sidebar p,
.sidebar li {
    color: var(--ak-soft);
}

.card .card-icon,
.card .product-icon,
.tile .ico-container,
.tiles .tile .ico-container {
    color: var(--ak-cyan) !important;
    background: rgba(96, 165, 250, 0.10) !important;
    border-radius: 12px;
    padding: 0.75rem;
}

.card .btn,
.panel .btn,
.tile .btn,
.tiles .tile a.btn {
    background: rgba(37, 99, 235, 0.18) !important;
    border: 1px solid rgba(96, 165, 250, 0.30) !important;
    color: var(--ak-cyan) !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.card .btn:hover,
.panel .btn:hover,
.tile .btn:hover {
    background: rgba(37, 99, 235, 0.35) !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------------
   ACTION GRID
   ---------------------------------------------------------------- */
.ak-actions-grid a,
.home-actions-grid a,
.client-home-panels a,
.panel-group a.panel,
.tiles a.tile {
    border-radius: 16px !important;
    background: rgba(15, 23, 42, 0.82) !important;
    color: #e5eefb !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    min-height: 120px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
}

.ak-actions-grid a:hover,
.home-actions-grid a:hover,
.client-home-panels a:hover,
.tiles a.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: #ffffff !important;
}

.ak-actions-grid .ico-container,
.home-actions-grid .ico-container,
.tiles .tile .ico-container,
.tiles a.tile i {
    color: var(--ak-cyan) !important;
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.page-title,
.primary-content h1,
.primary-content h2,
.primary-content h3,
.primary-content h4,
.primary-content h5,
.primary-content h6,
.card-title,
.panel-title {
    color: #ffffff !important;
}

.text-muted,
.small,
.help-block,
.form-text {
    color: var(--ak-muted) !important;
}

/* ----------------------------------------------------------------
   FORMS
   ---------------------------------------------------------------- */
.form-control,
.custom-select,
.input-group-text,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"] {
    background-color: rgba(2, 6, 23, 0.66) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

.form-control:focus,
.custom-select:focus,
textarea:focus,
input:focus {
    background-color: rgba(2, 6, 23, 0.86) !important;
    border-color: var(--ak-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(203, 213, 225, 0.70) !important;
}

@media (max-width: 768px) {
    label,
    .form-group label,
    .field-label {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   TABLES
   ---------------------------------------------------------------- */
.table,
.table td,
.table th,
.dataTable,
.dataTable td,
.dataTable th {
    color: var(--ak-text) !important;
    border-color: var(--ak-border) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover,
.dataTable tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.12) !important;
}

.table tbody tr,
.dataTable tbody tr {
    background-color: transparent !important;
}

/* ----------------------------------------------------------------
   LINKS & BUTTONS
   ---------------------------------------------------------------- */
a,
.primary-content a,
.sidebar a {
    color: #7dd3fc;
}

a:hover,
.primary-content a:hover,
.sidebar a:hover {
    color: #bae6fd;
}

.btn-primary,
.btn-success,
.domain-checker-container .btn-primary {
    background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.25);
}

.btn-default,
.btn-light,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

.btn-default:hover,
.btn-light:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #fff !important;
}

.badge-info,
.badge-primary {
    background: #0891b2 !important;
    color: #fff !important;
}

.alert {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

/* ----------------------------------------------------------------
   MODALS / POPOVERS
   ---------------------------------------------------------------- */
.modal-content,
.popover,
.client-alerts {
    background: var(--ak-panel-strong) !important;
    border: 1px solid var(--ak-border) !important;
    color: var(--ak-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.modal-content p,
.modal-content label,
.popover-body,
.client-alerts a {
    color: var(--ak-text) !important;
}

/* ----------------------------------------------------------------
   TRANSPARENT HOMEPAGE SECTIONS
   ---------------------------------------------------------------- */
section,
section.home-banner {
    background-color: transparent !important;
}

/* ----------------------------------------------------------------
   ANNOUNCEMENTS PAGE
   ---------------------------------------------------------------- */
.announcement-list .announcement,
.announcement-single,
.announcements-container,
#announcements,
.announcement-title,
.announcement-title a,
.announcement-date,
.announcement-body,
.announcement-body p,
.announcement-body li,
.announcement-body span {
    color: var(--ak-text) !important;
    background: transparent !important;
}

.announcement-title a:hover {
    color: var(--ak-amber) !important;
}

.announcement-single .card,
.announcement-single .panel,
.announcements-container .card,
.announcements-container .panel {
    background: var(--ak-panel) !important;
    border: 1px solid var(--ak-border) !important;
    color: var(--ak-text) !important;
}

/* ----------------------------------------------------------------
   SUPPORT / TICKET TEXTAREA & EDITOR — white on white fix
   ---------------------------------------------------------------- */
.ticket-reply textarea,
.ticket-open textarea,
#ticket-reply textarea,
#ticket-open textarea,
.support-reply textarea,
textarea#message,
textarea#reply,
textarea.form-control {
    background-color: rgba(2, 6, 23, 0.85) !important;
    color: #e5eefb !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    caret-color: #e5eefb !important;
}

.mce-container,
.mce-panel,
.mce-toolbar,
.mce-menubar,
.mce-statusbar {
    background: #0d1828 !important;
    border-color: var(--ak-border) !important;
    color: var(--ak-text) !important;
}

.mce-btn,
.mce-btn button {
    background: #0d1828 !important;
    color: var(--ak-text) !important;
    border-color: var(--ak-border) !important;
}

.mce-edit-area,
.mce-edit-area iframe,
.wp-editor-area {
    background: rgba(2, 6, 23, 0.9) !important;
    color: #e5eefb !important;
}

[contenteditable="true"],
div[contenteditable] {
    background: rgba(2, 6, 23, 0.85) !important;
    color: #e5eefb !important;
    caret-color: #e5eefb !important;
}

.ql-editor,
.ql-container {
    background: rgba(2, 6, 23, 0.85) !important;
    color: #e5eefb !important;
}

.ql-toolbar {
    background: #0d1828 !important;
    border-color: var(--ak-border) !important;
}

.ql-toolbar .ql-stroke {
    stroke: var(--ak-muted) !important;
}

.ql-toolbar .ql-fill {
    fill: var(--ak-muted) !important;
}

/* ----------------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07111f; }
::-webkit-scrollbar-thumb { background: #1c2438; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #F2A359; }

/* ----------------------------------------------------------------
   RECAPTCHA — force badge fully on-screen
   ---------------------------------------------------------------- */
.grecaptcha-badge {
    right: 14px !important;
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    position: fixed !important;
    bottom: 14px !important;
}

.g-recaptcha {
    overflow: visible !important;
    display: block !important;
}

.primary-content > .card,
.primary-content > .panel,
.logincontainer,
.register-page .form-holder,
.contactcontainer {
    overflow: visible !important;
}

/* ----------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------- */
@media print {
    html, body, #main-body, .invoice-container {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
    .invoice-container,
    .invoice-container * {
        color: #000 !important;
    }
}

/* ----------------------------------------------------------------
   FOOTER LINK CLICK FIX — highest specificity, last in file
   ---------------------------------------------------------------- */
#footer,
footer {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

#footer ul.list-unstyled,
#footer ul.list-unstyled li,
footer ul.list-unstyled,
footer ul.list-unstyled li {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

#footer a.footer-link,
footer a.footer-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 20 !important;
    display: inline-block !important;
}

/* ----------------------------------------------------------------
   ANNOUNCEMENT EXCERPT BOX FIX
   ---------------------------------------------------------------- */
.announcement-list .announcement-body-excerpt,
.announcement-list .announcement-body-excerpt *,
.announcement-list blockquote,
.announcements-index .announcement-excerpt,
.announcements-index .announcement-excerpt *,
.announcement-excerpt,
.announcement-excerpt * {
    background: rgba(15, 23, 42, 0.60) !important;
    color: #bfd0e5 !important;
    border-color: var(--ak-border) !important;
}

/* ----------------------------------------------------------------
   TICKET EDITOR BODY (EasyMDE / WHMCS markdown editor) FIX
   ---------------------------------------------------------------- */

/* The white editor content area */
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
    background: rgba(2, 6, 23, 0.90) !important;
    color: #e5eefb !important;
    border-color: var(--ak-border) !important;
}

.CodeMirror-cursor {
    border-left-color: #e5eefb !important;
}

.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
    background: rgba(37, 99, 235, 0.35) !important;
}

/* EasyMDE toolbar */
.editor-toolbar,
.editor-toolbar button,
.editor-toolbar a {
    background: #0d1828 !important;
    color: var(--ak-muted) !important;
    border-color: var(--ak-border) !important;
}

.editor-toolbar button:hover,
.editor-toolbar a:hover,
.editor-toolbar button.active {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #ffffff !important;
}

/* EasyMDE statusbar */
.editor-statusbar {
    background: #0d1828 !important;
    color: var(--ak-muted) !important;
    border-color: var(--ak-border) !important;
}

/* Wrapper border */
.EasyMDEContainer,
.EasyMDEContainer .CodeMirror {
    border-color: var(--ak-border) !important;
    border-radius: 8px !important;
}