/* VoidHost — brand override for WHMCS client area (Twenty-One theme) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --primary: #6C5CE7 !important;
  --void-bg: #FFFFFF;
  --void-bg-soft: #F7F6FB;
  --void-bg-deep: #0E0C1A;
  --void-ink: #15131F;
  --void-ink-soft: #5B586B;
  --void-line: #E6E3F0;
  --void-purple-900: #1F1B4D;
  --void-purple-700: #4A4099;
  --void-purple-500: #6C5CE7;
  --void-purple-300: #B7ACF5;
  --void-purple-100: #EFEBFC;
  --void-mint: #3FE0B0;
  --void-copper: #C2783F;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(20,16,50,0.04), 0 12px 32px -16px rgba(31,27,77,0.18);
  --shadow-card-hover: 0 1px 2px rgba(20,16,50,0.06), 0 24px 48px -20px rgba(31,27,77,0.28);
}

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--void-bg-soft);
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .card-title{
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- HEADER ---------- */
#header.header,
#header .navbar.navbar-light{
  background: var(--void-bg-deep) !important;
}
#header .navbar-light .nav-link,
#header .navbar-light .navbar-nav .nav-link{
  color: rgba(255,255,255,0.75) !important;
}
#header .navbar-light .nav-link:hover{ color: #fff !important; }
#header .logo-img{ max-height: 38px; }
.main-navbar-wrapper{
  background: #15122E !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.main-navbar-wrapper #nav > li > a{ color: rgba(255,255,255,0.8) !important; }
.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper #nav > li.active > a{ color: #fff !important; }
#header + div, .header-top, .top-bar{ background:#15122E !important; }

/* ---------- BUTTONS ---------- */
.btn{ border-radius: var(--radius-sm) !important; font-weight:600; }
.btn-primary{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  position:relative; overflow:hidden;
  box-shadow: 0 1px 2px rgba(31,27,77,0.08), 0 8px 20px -8px rgba(108,92,231,0.55);
}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ background-color:#5b4cd6 !important; border-color:#5b4cd6 !important; }
.btn-success{
  background-color: var(--void-mint) !important;
  border-color: var(--void-mint) !important;
  color:#0E0C1A !important;
}
.btn-success:hover{ background-color:#34c79c !important; border-color:#34c79c !important; color:#0E0C1A !important; }
.btn-default{ border-color: var(--void-line) !important; border-radius: var(--radius-sm) !important; }
a{ color: var(--primary); }
a:hover{ color:#5b4cd6; }

/* ---------- CARDS / PANELS ---------- */
.card, .mc-promo-manage, .mc-promo-login{
  border-radius: var(--radius-md) !important;
  border:1px solid var(--void-line) !important;
  box-shadow: var(--shadow-card) !important;
  overflow:hidden;
}
.card-header{
  background:#fff !important;
  border-bottom:1px solid var(--void-line) !important;
}
.card-accent-gold, .card-accent-orange, .card-accent-red,
.card-accent-green, .card-accent-lime, .card-accent-magenta,
.card-accent-pink, .card-accent-purple{ border-top:3px solid var(--primary) !important; }
.card-accent-blue, .card-accent-teal, .card-accent-turquoise{ border-top:3px solid var(--void-mint) !important; }
.label-success, .badge-success{ background-color: var(--void-mint) !important; color:#0E0C1A !important; }
.text-success{ color:#1FA988 !important; }
.label-primary, .badge-primary{ background-color: var(--primary) !important; }

/* ---------- STAT TILES ---------- */
.tiles{
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow:hidden;
  border:1px solid var(--void-line);
}
.tiles .tile{
  background:#fff;
  border-right:1px solid var(--void-purple-100);
  padding:22px 22px 18px;
  transition: background .2s ease, transform .15s ease;
  position:relative;
}
.tiles .tile .title{ color: var(--void-ink-soft); letter-spacing:0.04em; font-size:11.5px; }
.tiles .tile:hover{ background:#FBFAFE; transform: translateY(-2px); }
.tiles .tile i{ display:none; }
.tiles .tile .stat{ margin-top:6px; font-family:'Sora',sans-serif; font-weight:800; font-size:34px; }
.tiles .tile .highlight{ height:3px; border-radius:3px; }

.tiles .row > div:nth-child(1) .tile .stat{ color: var(--void-purple-700); }
.tiles .row > div:nth-child(1) .tile .highlight{ background: var(--void-purple-700) !important; }
.tiles .row > div:nth-child(2) .tile .stat{ color: var(--void-copper); }
.tiles .row > div:nth-child(2) .tile .highlight{ background: var(--void-copper) !important; }
.tiles .row > div:nth-child(3) .tile .stat{ color: #C0392B; }
.tiles .row > div:nth-child(3) .tile .highlight{ background: #C0392B !important; }
.tiles .row > div:nth-child(4) .tile .stat{ color: #1FA988; }
.tiles .row > div:nth-child(4) .tile .highlight{ background: var(--void-mint) !important; }

.tiles .tile .voxel-tile-icon{ position:absolute; top:18px; right:20px; width:34px; height:38px; }
.tiles .tile .voxel-tile-icon .f-top{ position:absolute; width:34px; height:20px; top:0; left:0; clip-path:polygon(50% 0%,100% 28%,50% 56%,0% 28%); }
.tiles .tile .voxel-tile-icon .f-left{ position:absolute; width:17px; height:25px; top:13px; left:0; clip-path:polygon(0 8%,100% 0%,100% 72%,0 100%); }
.tiles .tile .voxel-tile-icon .f-right{ position:absolute; width:17px; height:25px; top:13px; left:17px; clip-path:polygon(0 0%,100% 8%,100% 100%,0 72%); }
.tiles .row > div:nth-child(1) .voxel-tile-icon .f-top{ background:#B7ACF5; }
.tiles .row > div:nth-child(1) .voxel-tile-icon .f-left{ background:#6C5CE7; }
.tiles .row > div:nth-child(1) .voxel-tile-icon .f-right{ background:#4A4099; }
.tiles .row > div:nth-child(2) .voxel-tile-icon .f-top{ background:#E0A877; }
.tiles .row > div:nth-child(2) .voxel-tile-icon .f-left{ background:#C2783F; }
.tiles .row > div:nth-child(2) .voxel-tile-icon .f-right{ background:#8C5A38; }
.tiles .row > div:nth-child(3) .voxel-tile-icon .f-top{ background:#EC9A93; }
.tiles .row > div:nth-child(3) .voxel-tile-icon .f-left{ background:#C0392B; }
.tiles .row > div:nth-child(3) .voxel-tile-icon .f-right{ background:#922117; }
.tiles .row > div:nth-child(4) .voxel-tile-icon .f-top{ background:#A6F5DE; }
.tiles .row > div:nth-child(4) .voxel-tile-icon .f-left{ background:#3FE0B0; }
.tiles .row > div:nth-child(4) .voxel-tile-icon .f-right{ background:#1FA988; }

/* ---------- PROFILE SIDEBAR ---------- */
.card .card-body strong, .profile-info strong{ font-family:'Sora',sans-serif; }
.card-sidebar:first-of-type .card-body{ padding-top:28px; }
.card-sidebar:first-of-type .card-body::before{
  content:'';
  display:block;
  width:56px; height:56px; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), transparent 42%),
    linear-gradient(160deg, var(--void-purple-300), var(--void-purple-500) 55%, var(--void-purple-700));
  margin-bottom:16px;
  box-shadow: 0 6px 16px -4px rgba(108,92,231,0.55);
}

/* ---------- LOGIN / REGISTER (dark hero treatment) ---------- */
body:has(.login-form), body:has(.signup-form), body:has(#frmRegister){
  background: var(--void-bg-deep) !important;
  position:relative;
}
body:has(.login-form) #content, body:has(.signup-form) #content{
  position:relative; z-index:1;
}
body:has(.login-form)::before, body:has(.signup-form)::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(108,92,231,0.35), transparent 60%),
    radial-gradient(40% 40% at 90% 100%, rgba(63,224,176,0.10), transparent 60%),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 26px 26px;
}
body:has(.login-form) #header.header,
body:has(.login-form) .main-navbar-wrapper,
body:has(.login-form) footer,
body:has(.signup-form) #header.header,
body:has(.signup-form) .main-navbar-wrapper{
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body:has(.login-form) .breadcrumb, body:has(.login-form) nav[aria-label="breadcrumb"]{ display:none; }
.login-form .card, .signup-form .card{
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 1px 2px rgba(20,16,50,0.06), 0 24px 60px -20px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(6px);
}
.login-form .card-body, .signup-form .card-body{ color:#fff; }
.login-form .card-body h1, .login-form .card-body h2, .login-form .card-body h3,
.login-form .card-body h4, .login-form .card-body h5, .login-form .card-body h6{ color:#fff; }
.login-form .card-body p, .login-form .card-body label{ color: rgba(255,255,255,0.7); }
.login-form .card-footer, .signup-form .card-footer{
  background: rgba(255,255,255,0.03) !important;
  border-top:1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7);
}
.login-form input.form-control{
  background: rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  color:#fff !important;
  border-radius: var(--radius-sm) !important;
}
.login-form input.form-control::placeholder{ color: rgba(255,255,255,0.35); }
.login-form input.form-control:focus{
  border-color: var(--void-purple-300) !important;
  box-shadow: 0 0 0 3px rgba(183,172,245,0.25) !important;
}
.login-form .input-group-text{
  background: rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.6) !important;
}
.login-form a{ color: var(--void-purple-300); }