/*
 * Future UI — WHMCS Six
 * Visual overrides only. WHMCS Smarty logic/templates remain intact.
 */
:root {
    --neo-bg: #f5f7fb;
    --neo-surface: #ffffff;
    --neo-text: #111827;
    --neo-muted: #667085;
    --neo-line: rgba(15, 23, 42, .08);
    --neo-primary: #6d5dfc;
    --neo-primary-2: #2d8cff;
    --neo-cyan: #18c8ff;
    --neo-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    --neo-radius: 22px;
}

html { background: var(--neo-bg); }
body {
    background:
        radial-gradient(circle at 10% 0%, rgba(109,93,252,.08), transparent 28%),
        radial-gradient(circle at 100% 10%, rgba(24,200,255,.07), transparent 25%),
        var(--neo-bg);
    color: var(--neo-text);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Header */
section#header.whmcs-header {
    padding: 14px 0;
    background: rgba(255,255,255,.88);
    border-radius: 0;
    border-bottom: 1px solid rgba(15,23,42,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    z-index: 1000;
}
section#header .logo img { max-height: 44px; }
section#header .logo-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.95em;
    color: #171d2d;
    letter-spacing: -.04em;
}
section#header .top-nav { margin-top: 4px; }
section#header .top-nav > li > a {
    color: #4b5563;
    transition: .2s ease;
}
section#header .top-nav > li > a:hover { color: var(--neo-primary); }
.whmcs-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 99px;
    background: linear-gradient(135deg, #ff4d67, #ff7a59);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 0 0 4px rgba(255,77,103,.09), 0 5px 14px rgba(255,77,103,.28);
}
section#header .top-nav .primary-action .btn,
.whmcs-main-menu .navbar-main .btn {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--neo-primary), var(--neo-primary-2));
    color: #fff !important;
    box-shadow: 0 9px 24px rgba(78,85,225,.24);
    font-weight: 700;
}

/* Main nav */
section#main-menu.whmcs-main-menu {
    background: rgba(11,16,32,.96);
    border: 0;
    box-shadow: 0 15px 35px rgba(15,23,42,.14);
}
.whmcs-main-menu .navbar-main { border: 0; background: transparent; margin-bottom: 0; }
.whmcs-main-menu .navbar-nav > li > a {
    color: rgba(255,255,255,.72);
    font-weight: 600;
    letter-spacing: .01em;
    padding-top: 17px;
    padding-bottom: 17px;
    transition: .2s ease;
}
.whmcs-main-menu .navbar-nav > li > a:hover,
.whmcs-main-menu .navbar-nav > li.active > a,
.whmcs-main-menu .navbar-nav > li.open > a {
    color: #fff;
    background: rgba(255,255,255,.07);
}
.whmcs-main-menu .navbar-nav > li > a i { color: #8ba1ff; }
.whmcs-main-menu .dropdown-menu {
    border: 1px solid rgba(255,255,255,.08);
    background: #111827;
    box-shadow: 0 18px 35px rgba(0,0,0,.2);
    border-radius: 14px;
    overflow: hidden;
}
.whmcs-main-menu .dropdown-menu > li > a { color: rgba(255,255,255,.8); padding: 10px 16px; }
.whmcs-main-menu .dropdown-menu > li > a:hover { background: rgba(109,93,252,.18); color: #fff; }

/* Home / hero */
#home-banner {
    background: linear-gradient(135deg, #0b1020 0%, #171a3a 52%, #0c5a88 100%);
    position: relative;
    overflow: hidden;
}
#home-banner:before, #home-banner:after {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .32;
}
#home-banner:before { background: #6d5dfc; left: -80px; top: -110px; }
#home-banner:after { background: #18c8ff; right: -90px; bottom: -150px; }

/* Dashboard hero */
.whmcs-dashboard-hero {
    margin: 0 0 18px;
    padding: 31px 34px;
    border-radius: 26px;
    background: linear-gradient(135deg, #0d1225, #20244e 58%, #0b6b91);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(17,24,39,.16);
}
.whmcs-dashboard-hero:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06), transparent 64%);
    pointer-events: none;
}
.whmcs-dashboard-orb { position:absolute; border-radius:50%; filter: blur(2px); opacity:.35; }
.whmcs-dashboard-orb-1 { width: 190px; height:190px; background:#6d5dfc; right: 4%; top:-90px; }
.whmcs-dashboard-orb-2 { width: 130px; height:130px; background:#18c8ff; right: 19%; bottom:-85px; }
.whmcs-dashboard-hero-copy { position:relative; z-index:2; max-width:720px; }
.whmcs-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 10px;
    font-weight: 800;
    opacity: .72;
    margin-bottom: 7px;
}
.whmcs-dashboard-hero h1 { margin:0 0 8px; font-weight:700; letter-spacing:-.03em; color:#fff; }
.whmcs-dashboard-hero p { margin:0; color:rgba(255,255,255,.7); font-size:14px; }
.whmcs-dashboard-support {
    position:absolute; z-index:3; right:28px; bottom:24px;
    display:flex; align-items:center; gap:9px;
    color:#fff !important; text-decoration:none !important;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
    border-radius:999px; padding:10px 14px;
    backdrop-filter:blur(10px); transition:.2s ease;
}
.whmcs-dashboard-support:hover { background:rgba(255,255,255,.18); transform:translateY(-1px); }

/* Invoice notification */
.whmcs-invoice-alert {
    display:flex; align-items:center; gap:14px;
    margin: 0 0 22px;
    padding: 15px 17px;
    border:1px solid rgba(249,115,22,.16);
    background: linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,251,235,.95));
    border-radius:18px;
    box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.whmcs-invoice-alert-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#f97316,#f59e0b); color:#fff; box-shadow:0 10px 22px rgba(245,158,11,.24); }
.whmcs-invoice-alert-copy { flex:1; min-width:0; }
.whmcs-invoice-alert-copy strong { display:block; color:#7c2d12; font-size:14px; }
.whmcs-invoice-alert-copy span { display:block; color:#9a3412; font-size:12px; margin-top:2px; }
.whmcs-invoice-alert-button { border-radius:11px; background:#7c3aed; color:#fff !important; padding:10px 13px; font-size:12px; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.whmcs-invoice-alert-button:hover { background:#6d28d9; }

/* Dashboard stats */
.tiles { margin-bottom: 22px; }
.whmcs-stat-grid { margin-left:-8px; margin-right:-8px; }
.whmcs-stat-card { padding:8px; }
.whmcs-stat-card > a {
    display:block;
    min-height:144px;
    padding:22px;
    border:1px solid rgba(15,23,42,.06);
    border-radius:20px;
    background:rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
    position:relative;
    overflow:hidden;
    transition: .23s ease;
}
.whmcs-stat-card > a:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(15,23,42,.1); border-color:rgba(109,93,252,.2); }
.whmcs-stat-card .icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, rgba(109,93,252,.12), rgba(45,140,255,.12)); color:var(--neo-primary); font-size:18px; margin-bottom:13px; }
.whmcs-stat-card .stat { font-size:30px; line-height:1; font-weight:800; color:#111827; letter-spacing:-.04em; }
.whmcs-stat-card .title { margin-top:7px; color:#667085; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.whmcs-stat-card .highlight { height:3px !important; position:absolute; left:0; right:0; bottom:0; opacity:.9; }
.bg-color-blue { background:#6d5dfc !important; }
.bg-color-green { background:#10b981 !important; }
.bg-color-red { background:#ef476f !important; }
.bg-color-gold { background:#f59e0b !important; }

/* Knowledge base / panels */
.home-kb-search { position:relative; margin-bottom:22px; }
.home-kb-search .form-control {
    height:56px; border-radius:16px; border:1px solid var(--neo-line); padding-left:49px; box-shadow:0 10px 28px rgba(15,23,42,.04);
    background:rgba(255,255,255,.92);
}
.home-kb-search i { position:absolute; left:24px; top:20px; color:#98a2b3; }
.client-home-panels .panel {
    border:1px solid var(--neo-line);
    border-radius:18px;
    overflow:hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
    background:rgba(255,255,255,.92);
}
.client-home-panels .panel-heading { background:transparent; border-bottom:1px solid var(--neo-line); padding:16px 18px; }
.client-home-panels .panel-title { color:#111827; font-weight:700; }
.client-home-panels .panel-body { padding:18px; }
.client-home-panels .list-group-item { border-left:0; border-right:0; border-color:var(--neo-line); }

/* Global cards/forms */
.panel, .well, .card, .modal-content { border-radius:18px; }
.form-control { border-radius:12px; border-color:rgba(15,23,42,.11); box-shadow:none; min-height:44px; }
.form-control:focus { border-color:rgba(109,93,252,.58); box-shadow:0 0 0 4px rgba(109,93,252,.08); }
.btn { border-radius:11px; font-weight:600; transition:.2s ease; }
.btn-primary { border:0; background:linear-gradient(135deg,var(--neo-primary),var(--neo-primary-2)); box-shadow:0 9px 20px rgba(78,85,225,.18); }
.btn-primary:hover, .btn-primary:focus { background:linear-gradient(135deg,#5e4df1,#2180ed); transform:translateY(-1px); }

/* Login */
.whmcs-auth-page {
    min-height: calc(100vh - 118px);
    display:grid;
    place-items:center;
    padding:54px 18px;
    background:radial-gradient(circle at 0 0, rgba(109,93,252,.13), transparent 32%),radial-gradient(circle at 100% 100%,rgba(24,200,255,.12),transparent 31%),#0b1020;
    position:relative;
    overflow:hidden;
}
.whmcs-auth-page:before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent); }
.whmcs-auth-glow { position:absolute; border-radius:50%; filter:blur(15px); opacity:.32; pointer-events:none; }
.whmcs-auth-glow-1 { width:380px; height:380px; background:#6d5dfc; left:-190px; top:-120px; }
.whmcs-auth-glow-2 { width:320px; height:320px; background:#18c8ff; right:-160px; bottom:-130px; }
.whmcs-auth-shell { width:min(1040px,100%); display:grid; grid-template-columns:1.03fr .97fr; border:1px solid rgba(255,255,255,.08); border-radius:30px; overflow:hidden; background:rgba(9,14,31,.72); box-shadow:0 35px 100px rgba(0,0,0,.4); backdrop-filter:blur(22px); position:relative; z-index:2; }
.whmcs-auth-brand { padding:58px 55px; color:#fff; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(140deg,rgba(109,93,252,.1),rgba(24,200,255,.04)); }
.whmcs-auth-logo img { max-width:210px; max-height:58px; object-fit:contain; margin-bottom:42px; filter:drop-shadow(0 10px 25px rgba(0,0,0,.22)); }
.whmcs-auth-logo span { font-size:27px; font-weight:800; letter-spacing:-.04em; margin-bottom:42px; display:block; }
.whmcs-auth-copy h1 { color:#fff; font-size:42px; line-height:1.05; letter-spacing:-.045em; margin:7px 0 15px; font-weight:800; }
.whmcs-auth-copy p { color:rgba(255,255,255,.65); line-height:1.7; font-size:14px; max-width:440px; }
.whmcs-auth-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }
.whmcs-auth-pills span { border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); border-radius:999px; padding:8px 11px; color:rgba(255,255,255,.72); font-size:11px; }
.whmcs-auth-pills i { color:#86f0ff; }
.whmcs-auth-card { padding:42px; background:rgba(255,255,255,.98); }
.whmcs-auth-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.whmcs-auth-card-head h2 { margin:4px 0 0; font-weight:800; letter-spacing:-.03em; font-size:28px; color:#111827; }
.whmcs-auth-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#ede9fe,#dbeafe); color:#5b4df2; }
.whmcs-field label { color:#344054; font-size:12px; font-weight:700; margin-bottom:8px; display:block; }
.whmcs-field label i { color:#7c6cff; margin-right:4px; }
.whmcs-input-wrap { position:relative; }
.whmcs-input-wrap > i:first-child { position:absolute; left:15px; top:15px; z-index:2; color:#98a2b3; }
.whmcs-input-wrap .form-control { padding-left:42px; padding-right:45px; height:49px; }
.whmcs-password-toggle { position:absolute; right:11px; top:7px; height:35px; width:35px; background:transparent; border:0; color:#98a2b3; }
.whmcs-login-options { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 20px; }
.whmcs-check { color:#667085; font-size:12px; font-weight:600; margin:0; display:flex; align-items:center; gap:6px; }
.whmcs-login-options a { color:#5b4df2; font-weight:700; font-size:12px; }
.whmcs-login-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; }
.whmcs-auth-register { text-align:center; margin-top:20px; color:#98a2b3; font-size:12px; }
.whmcs-auth-register a { color:#5b4df2; font-weight:800; }
.whmcs-divider { display:flex; align-items:center; gap:10px; color:#98a2b3; font-size:11px; margin:25px 0 15px; }
.whmcs-divider:before,.whmcs-divider:after { content:''; flex:1; height:1px; background:#eaecf0; }

/* Footer */
section#footer { background:#0b1020; color:rgba(255,255,255,.48); border-top:0; padding:24px 10px; }
section#footer a { color:rgba(255,255,255,.7); }

/* Mobile */
@media (max-width: 991px) {
    section#header .top-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; }
    .whmcs-auth-shell { grid-template-columns:1fr; max-width:620px; }
    .whmcs-auth-brand { padding:38px 35px; }
    .whmcs-auth-logo img { margin-bottom:22px; }
    .whmcs-auth-copy h1 { font-size:34px; }
    .whmcs-auth-card { padding:32px; }
}
@media (max-width: 767px) {
    section#header.whmcs-header { padding:11px 0; }
    section#header .logo { display:inline-block; max-width:55%; }
    section#header .logo img { max-width:150px; max-height:38px; }
    section#header .top-nav { margin-bottom:5px; gap:2px; }
    section#header .top-nav > li > a { padding:4px 7px; font-size:11px; }
    section#header .top-nav .primary-action .btn { padding:7px 10px; }
    .whmcs-main-menu .navbar-header { border:0; }
    .whmcs-main-menu .navbar-toggle { border:0; background:rgba(255,255,255,.08); border-radius:10px; margin-top:8px; margin-bottom:8px; }
    .whmcs-main-menu .navbar-toggle .icon-bar { background:#fff; }
    .whmcs-main-menu .navbar-collapse { border-top:1px solid rgba(255,255,255,.06); }
    .whmcs-main-menu .navbar-nav > li > a { padding:12px 15px; }
    .whmcs-dashboard-hero { padding:24px 22px 66px; border-radius:20px; }
    .whmcs-dashboard-hero h1 { font-size:25px; }
    .whmcs-dashboard-support { left:22px; right:auto; bottom:18px; }
    .whmcs-invoice-alert { align-items:flex-start; flex-wrap:wrap; padding:13px; }
    .whmcs-invoice-alert-copy { flex-basis:calc(100% - 60px); }
    .whmcs-invoice-alert-button { margin-left:58px; }
    .whmcs-stat-card > a { min-height:132px; padding:17px; border-radius:17px; }
    .whmcs-stat-card .stat { font-size:26px; }
    .home-kb-search .form-control { height:50px; }
    .whmcs-auth-page { min-height:calc(100vh - 100px); padding:25px 12px; }
    .whmcs-auth-brand { padding:28px 24px; }
    .whmcs-auth-copy h1 { font-size:29px; }
    .whmcs-auth-card { padding:25px 20px; }
    .whmcs-auth-card-head h2 { font-size:24px; }
    .whmcs-auth-pills { margin-top:17px; }
}
@media (max-width: 420px) {
    .whmcs-stat-card { width:50%; }
    .whmcs-dashboard-hero p { font-size:13px; }
    .whmcs-invoice-alert-button { width:100%; margin-left:58px; text-align:center; }
    .whmcs-auth-shell { border-radius:20px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
