/* Vivid Frequency — Dark Mode Override for host.spiritwp.com (ClientExec)
   Design System v6 | The Spiritual Agency®
   Loaded after main.css — overrides only, original file untouched. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --primary:             #FF0060;
  --primary-hover:       #FF008B;
  --vf-void:             #0D0D1A;
  --vf-deep-violet:      #1A0533;
  --vf-parchment:        #FAFAF7;
  --vf-shakti-pink:      #FF0060;
  --vf-magenta:          #FF008B;
  --vf-crimson:          #AB1C3D;
  --vf-spirit-blue:      #0896F2;
  --vf-electric-violet:  #9000FF;
  --vf-anahata-green:    #A7FF00;
  --vf-electric-yellow:  #FFE600;
  --vf-border:           rgba(255,255,255,0.08);
  --vf-shakti-gradient:  linear-gradient(135deg, #FF0060, #FF008B);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  background: var(--vf-void);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--vf-parchment);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: var(--vf-parchment);
}

h5 { color: var(--vf-parchment); }

p, span, td, th, li, label, small {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

a { color: var(--vf-spirit-blue); }
a:hover { color: var(--vf-magenta); }

::selection     { background: var(--vf-shakti-pink); color: #fff; }
::-moz-selection{ background: var(--vf-shakti-pink); color: #fff; }

/* ── Chakra accent bar (top of every page) ─────────────────────────────── */
.header::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #E24B4A, #FF8C00, #FFE600, #A7FF00, #0896F2, #9000FF, #FF008B);
}

/* ── Header / Navigation ──────────────────────────────────────────────── */
.header {
  background: var(--vf-void);
  box-shadow: 0 1px 0 var(--vf-border);
}


/* Replace FA chevrons with CSS-native arrows — no font dependency */
.main-menu > ul > li.dropdown::after,
.header-user-menu .current-user .user-toggle::after {
  content: '' !important;
  font-family: inherit !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid #a9b3cf !important;
  border-bottom: 1.5px solid #a9b3cf !important;
  transform: rotate(45deg) !important;
  font-size: 0 !important;
}

.main-menu > ul > li > a {
  color: var(--vf-parchment);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li > a.active {
  color: var(--vf-shakti-pink);
}

.menu-toggle span { background: var(--vf-parchment); }

.mobile-menu {
  background: var(--vf-void);
}

.mobile-menu > ul > li > a {
  color: var(--vf-parchment);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.mobile-menu > ul > li > a:hover { color: var(--vf-shakti-pink); }

/* User dropdown */
.header-right .current-user > ul {
  background: var(--vf-deep-violet);
  border: 1px solid var(--vf-border);
}

.header-right .current-user > ul li a {
  color: var(--vf-parchment);
}

.header-right .current-user > ul li a:hover {
  background: rgba(255, 0, 96, 0.12);
  color: var(--vf-shakti-pink);
}

.header-right .current-user .user-toggle .user-tag span,
.header-right .current-user .user-toggle .user-tag h5 {
  color: var(--vf-parchment);
}

/* ── Page background & content areas ──────────────────────────────────── */
.content-page { background: var(--vf-void); }

.form-wrapper {
  background: var(--vf-deep-violet);
  border: 1px solid var(--vf-border);
}

/* ── Data table / panel wrappers ──────────────────────────────────────── */
.data-table-wrapper {
  background: var(--vf-deep-violet);
  border: 1px solid var(--vf-border);
}

.data-table-wrapper .head {
  background: var(--vf-deep-violet);
  border-color: var(--vf-border);
}

.data-table-wrapper .head h3 {
  color: var(--vf-parchment);
}

.data-table-wrapper .cs-padding {
  background: var(--vf-deep-violet);
}

.data-table-wrapper table tr th {
  background: var(--vf-void);
  color: var(--vf-parchment);
  border-color: var(--vf-border);
}

.data-table-wrapper table tr td {
  color: var(--vf-parchment);
  border-color: var(--vf-border);
}

.data-table-wrapper table tr:hover td {
  background: rgba(255, 0, 96, 0.06);
}

/* ── cm-holder cards ──────────────────────────────────────────────────── */
.cm-holder {
  background: var(--vf-void);
}

.cm-holder.support-ticket-table .head,
.cm-holder.invoices .head {
  background: var(--vf-deep-violet);
  border-color: var(--vf-border);
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-elem label {
  color: var(--vf-parchment);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.form-elem .form-control {
  background: var(--vf-void);
  border-color: var(--vf-border);
  color: var(--vf-parchment);
}

.form-elem .form-control:focus {
  background: var(--vf-void);
  border-color: var(--vf-shakti-pink);
  color: var(--vf-parchment);
}

.form-elem .prefix .prefix-text {
  background: var(--vf-deep-violet);
  color: rgba(250,250,247,0.6);
  border-right: 1px solid var(--vf-border);
}

input, textarea, select {
  background: var(--vf-void) !important;
  color: var(--vf-parchment) !important;
  border-color: var(--vf-border) !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(250,250,247,0.4);
}

/* Select2 */
.select2-container--default .select2-selection--single {
  background: var(--vf-void);
  border-color: var(--vf-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--vf-parchment);
}

.select2-dropdown {
  background: var(--vf-deep-violet);
  border-color: var(--vf-border);
}

.select2-container--default .select2-results__option {
  color: var(--vf-parchment);
}

.select2-container--default .select2-results__option--highlighted {
  background: var(--vf-shakti-pink);
  color: #fff;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.app-btns.primary {
  background: var(--vf-shakti-gradient);
  color: #fff;
}

.app-btns.primary:hover {
  background: linear-gradient(135deg, #FF008B, #FF0060);
  color: #fff;
}

.app-btns.secondary {
  background: var(--vf-spirit-blue);
  color: #fff;
}

.app-btns.secondary:hover {
  background: #0880d4;
  color: #fff;
}

.action-btns {
  color: var(--vf-parchment);
  border-color: var(--vf-border);
}

.action-btns:hover {
  background: rgba(255, 0, 96, 0.1);
  border-color: var(--vf-shakti-pink);
  color: var(--vf-shakti-pink);
}

/* ── Inline section headings ──────────────────────────────────────────── */
.inline-heading::before { border-color: var(--vf-border); }

.inline-heading h4 {
  background: var(--vf-void);
  color: var(--vf-parchment);
}

/* ── Alerts / status messages ─────────────────────────────────────────── */
.alert-success { background: rgba(167,255,0,0.12); border-color: var(--vf-anahata-green); color: var(--vf-anahata-green); }
.alert-danger, .alert-error { background: rgba(171,28,61,0.18); border-color: var(--vf-crimson); color: #ff7a9a; }
.alert-info { background: rgba(8,150,242,0.12); border-color: var(--vf-spirit-blue); color: var(--vf-spirit-blue); }
.alert-warning { background: rgba(255,230,0,0.12); border-color: var(--vf-electric-yellow); color: var(--vf-electric-yellow); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
  background: var(--vf-deep-violet);
  border-top: 1px solid var(--vf-border);
}

.footer p { color: rgba(250,250,247,0.5); }

/* ── Shimmer divider above footer ─────────────────────────────────────── */
.footer::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FF0060, #FF008B, transparent);
  opacity: 0.5;
}

/* ── Misc utility overrides ───────────────────────────────────────────── */
.text-muted { color: rgba(250,250,247,0.5) !important; }

hr { border-color: var(--vf-border); }

.card, .panel, .box {
  background: var(--vf-deep-violet);
  border-color: var(--vf-border);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vf-void); }
::-webkit-scrollbar-thumb { background: var(--vf-deep-violet); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vf-shakti-pink); }

/* ═══════════════════════════════════════════════════════════════════════
   ACTION CARDS — Manage Account / Submit Ticket / Order New Service
   ═══════════════════════════════════════════════════════════════════════ */

.client-area-page .client-area-top-block a { text-decoration: none; }

.client-area-page .client-area-top-block .client-area-top-box {
  background: var(--vf-deep-violet);
  border: 1px solid var(--vf-border);
  border-top: 3px solid var(--vf-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.client-area-page .client-area-top-block .client-area-top-box:hover {
  background: var(--vf-deep-violet);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Icon — inline SVG */
.client-area-page .client-area-top-block .client-area-top-box .vf-card-icon {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 18px auto !important;
  color: var(--vf-parchment);
  transition: transform 0.2s ease;
}

.client-area-top-box:hover .vf-card-icon { transform: scale(1.08); }

/* Card title */
.client-area-page .client-area-top-block .client-area-top-box p span {
  color: var(--vf-parchment) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
}

/* Card description */
.client-area-page .client-area-top-block .client-area-top-box p {
  color: rgba(250,250,247,0.6) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
}

/* ── Pillar accent: Manage Account → Shakti Pink ─────────────────────── */
.client-area-top-box.vf-card--shakti { border-top-color: var(--vf-shakti-pink) !important; }
.client-area-top-box.vf-card--shakti .vf-card-icon { color: var(--vf-shakti-pink) !important; }
.client-area-top-box.vf-card--shakti:hover { border-color: var(--vf-shakti-pink) !important; box-shadow: 0 8px 32px rgba(255,0,96,0.2); }

/* ── Pillar accent: Knowledge Base → Electric Violet ─────────────────── */
.client-area-top-box.vf-card--violet { border-top-color: var(--vf-electric-violet) !important; }
.client-area-top-box.vf-card--violet .vf-card-icon { color: var(--vf-electric-violet) !important; }
.client-area-top-box.vf-card--violet:hover { border-color: var(--vf-electric-violet) !important; box-shadow: 0 8px 32px rgba(144,0,255,0.2); }

/* ── Pillar accent: Submit Ticket → Spirit Blue ──────────────────────── */
.client-area-top-box.vf-card--blue { border-top-color: var(--vf-spirit-blue) !important; }
.client-area-top-box.vf-card--blue .vf-card-icon { color: var(--vf-spirit-blue) !important; }
.client-area-top-box.vf-card--blue:hover { border-color: var(--vf-spirit-blue) !important; box-shadow: 0 8px 32px rgba(8,150,242,0.2); }

/* ── Pillar accent: Order New Service → Anahata Green ───────────────── */
.client-area-top-box.vf-card--green { border-top-color: var(--vf-anahata-green) !important; }
.client-area-top-box.vf-card--green .vf-card-icon { color: var(--vf-anahata-green) !important; }
.client-area-top-box.vf-card--green:hover { border-color: var(--vf-anahata-green) !important; box-shadow: 0 8px 32px rgba(167,255,0,0.15); }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD STAT BOXES — remapped to VF semantic colours
   ═══════════════════════════════════════════════════════════════════════ */

/* Account Status — Shakti Gradient */
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes {
  background: linear-gradient(135deg, #FF0060, #FF008B);
  border: none;
}

/* Total Packages — Electric Yellow */
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.yellow-bg {
  background: #1a1400;
  border: 1px solid var(--vf-electric-yellow);
}

.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.yellow-bg .dash-commen-boxe-icon,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.yellow-bg p,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.yellow-bg p span {
  color: var(--vf-electric-yellow);
}

/* Support Tickets — Electric Violet */
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.purple-bg {
  background: #0d0022;
  border: 1px solid var(--vf-electric-violet);
}

.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.purple-bg .dash-commen-boxe-icon,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.purple-bg p,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.purple-bg p span {
  color: var(--vf-electric-violet);
}

/* Account Credit Balance — Anahata Green */
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.green-bg {
  background: #0a1400;
  border: 1px solid var(--vf-anahata-green);
}

.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.green-bg .dash-commen-boxe-icon,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.green-bg p,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.green-bg p span {
  color: var(--vf-anahata-green);
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD LEFT SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */

.dashboard-wraper .dashboard-main .dashboard-left-bar {
  background: var(--vf-deep-violet);
  border: 1px solid var(--vf-border);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box {
  border-bottom-color: var(--vf-border);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box .heading {
  border-bottom-color: var(--vf-border);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box .heading h4 {
  color: var(--vf-parchment);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box p {
  color: rgba(250,250,247,0.6);
  border-bottom-color: var(--vf-border);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li {
  border-top-color: var(--vf-border);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a {
  color: rgba(250,250,247,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a:hover {
  color: var(--vf-shakti-pink);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a:hover span,
.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a span {
  color: rgba(250,250,247,0.4);
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a:hover span {
  color: var(--vf-shakti-pink);
}