/* =====================================================================
   VYOMIKA GLOBAL — PREMIUM MEMBER PANEL THEME  (Sol-style warm palette)
   Bright golden-yellow + warm orange→red gradient · fixed DARK theme
   ---------------------------------------------------------------------
   Re-skins the existing DexignZone template only — no markup logic, no
   backend changes. No dark/light toggle. All headings use solid colour
   (no transparent gradient-clip) so text is always visible.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@500;600;700&display=swap');

:root {
  /* Warm-dark surfaces */
  --vg-navy-0:#0b0906;
  --vg-navy-1:#141009;
  --vg-navy-2:#1c1610;
  --vg-navy-3:#271e14;
  --vg-navy-line:rgba(255,190,70,.18);

  /* Bright golden yellow */
  --vg-gold:#ffc01e;
  --vg-gold-hi:#ffd766;
  --vg-gold-deep:#e0a200;
  --vg-gold-soft:rgba(255,192,30,.14);

  /* Warm orange → red */
  --sol-orange:#ff7a1a;
  --sol-red:#f5361f;

  --vg-ink:#f3ece0;
  --vg-muted:#c2b59a;

  /* Warm gradient for fills (buttons, bars, hero reward) */
  --vg-gold-btn:linear-gradient(135deg,#ffb020 0%,#ff6a1e 48%,#f5361f 100%);
  /* Bright golden-yellow gradient (coin / soft accents) */
  --vg-yellow-grad:linear-gradient(135deg,#ffe08a,#ffc01e 45%,#e0a200);

  --primary:#ffc01e;
  --primary-hover:#e0a200;
  --primary-dark:#141009;
  --secondary:#ff6a1e;
  --rgba-primary-1:rgba(255,192,30,.10);
  --rgba-primary-2:rgba(255,192,30,.18);
  --rgba-primary-3:rgba(255,192,30,.28);
  --rgba-primary-4:rgba(255,192,30,.38);
  --rgba-primary-5:rgba(255,192,30,.50);
  --font-family-base:'Inter',sans-serif;
  --font-family-title:'Inter',sans-serif;
}

html, body { background:var(--vg-navy-0) !important; }
.dz-theme-mode { display:none !important; }

body {
  font-family:'Inter',sans-serif;
  letter-spacing:.1px;
  color:var(--vg-ink) !important;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { font-family:'Inter',sans-serif; }

.vg-gold-text,
.brand-title { color:var(--vg-gold-hi) !important; }

/* -------- Buttons -------- */
.btn-primary,
.btn-primary:focus {
  background:var(--vg-gold-btn) !important;
  border:none !important;
  color:#fff !important;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 8px 22px rgba(245,54,31,.30);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,
.btn-primary:active {
  color:#fff !important;
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(245,54,31,.42);
}
.btn-outline-primary { color:var(--vg-gold) !important; border:1px solid var(--vg-gold) !important; background:transparent !important; }
.btn-outline-primary:hover { background:var(--vg-gold-soft) !important; color:var(--vg-gold-hi) !important; }
.btn-secondary,
.btn-warning { background:var(--vg-gold-btn) !important; border:none !important; color:#fff !important; font-weight:700; }
.btn-danger  { background:linear-gradient(135deg,#ff6a1e,#e2261a)!important;border:none!important;color:#fff!important; }
.btn-success { background:linear-gradient(135deg,#2fbf87,#1e8f63)!important;border:none!important;color:#04160f!important; }

.text-primary { color:var(--vg-gold) !important; }
.text-warning { color:var(--vg-gold-hi) !important; }
.bg-primary { background:var(--vg-navy-3) !important; }
.dz-separator.bg-primary,
.dz-separator.style-liner { background:var(--vg-gold-btn) !important; height:3px; border-radius:3px; }
.progress-bar { background:var(--vg-gold-btn) !important; }
.badge-primary,.badge.bg-primary { background:var(--vg-gold-soft)!important;color:var(--vg-gold-hi)!important;border:1px solid rgba(255,192,30,.35); }

* { scrollbar-width:thin; scrollbar-color:var(--vg-gold-deep) transparent; }
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--vg-gold),var(--sol-red));border-radius:10px;}
*::-webkit-scrollbar-track{background:transparent;}

/* -------- Background: warm-dark gradient (no media) -------- */
#myVideo { display:none !important; }
#main-wrapper { background:transparent; }
#main-wrapper::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 620px at 12% -10%, rgba(255,120,30,.20), transparent 60%),
    radial-gradient(1000px 700px at 100% 8%, rgba(255,192,30,.16), transparent 55%),
    linear-gradient(180deg, #0b0906 0%, #141009 45%, #0a0805 100%);
}

/* -------- Nav header / header / sidebar -------- */
.nav-header,
.nav-header .brand-logo {
  background:linear-gradient(180deg,#1a140b,#120d07) !important;
  border-bottom:1px solid rgba(255,192,30,.16);
}
.header {
  background:linear-gradient(180deg, rgba(22,17,10,.94), rgba(16,12,7,.86)) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,192,30,.14);
}
.header-left .dashboard_bar { color:var(--vg-ink) !important; font-weight:600; }
.header .search-area .form-control,
.header .search-area .input-group-text { background:transparent; }

/* Sidebar collapse button (« toggle) — was a white box with a purple chevron.
   Make it a bright golden control with a dark chevron, matching the theme. */
.nav-control {
  background:linear-gradient(135deg,#ffe08a,#ffc01e 50%,#e0a200) !important;
  border:none !important;
  border-radius:9px !important;
  box-shadow:0 6px 16px rgba(224,162,0,.40), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:filter .18s ease, box-shadow .18s ease;
}
.nav-control:hover {
  filter:brightness(1.05);
  box-shadow:0 8px 20px rgba(245,54,31,.38), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.nav-control .hamburger .line svg path { fill:#241500 !important; opacity:1 !important; }
.nav-control .hamburger .line svg path[opacity="0.3"] { fill:#241500 !important; opacity:.45 !important; }

.deznav {
  background:linear-gradient(180deg,#1a140b 0%,#0d0a06 100%) !important;
  border-right:1px solid rgba(255,192,30,.12);
}
.deznav .metismenu > li > a { color:#d8c9ad !important; }
.deznav .metismenu ul a { color:#b7a888 !important; }
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li:hover > a,
.deznav .metismenu > li > a:hover,
.deznav .metismenu > li > a:focus {
  background:linear-gradient(90deg, rgba(255,192,30,.16), rgba(255,106,30,0)) !important;
  color:var(--vg-gold-hi) !important;
}
.deznav .metismenu > li.mm-active > a::before,
.deznav .metismenu > li > a.mm-active::before { background:var(--vg-gold-btn) !important; }
.deznav .metismenu > li.mm-active > a .menu-icon svg [fill],
.deznav .metismenu > li > a:hover .menu-icon svg [fill] { fill:var(--vg-gold) !important; }
.deznav .metismenu ul a:hover,
.deznav .metismenu ul a.mm-active { color:var(--vg-gold-hi) !important; }
.deznav .metismenu ul a:before { background:var(--vg-gold) !important; }

.deznav .metismenu h4,
.deznav h4.text-white {
  font-family:'Cinzel',serif !important;
  letter-spacing:2px;
  font-size:15px;
  color:var(--vg-gold-hi) !important;
  padding:14px 0 10px;
  margin-bottom:6px;
  position:relative;
  text-align:center;
}
.deznav .metismenu h4::after {
  content:"";position:absolute;left:22%;right:22%;bottom:2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--sol-red),var(--vg-gold),transparent);
}

/* -------- Cards -------- */
.card {
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(28,22,16,.94), rgba(18,13,8,.94)) !important;
  border:1px solid var(--vg-navy-line) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.5) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}
.card:hover {
  transform:translateY(-4px);
  border-color:rgba(255,192,30,.45) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,192,30,.16) !important;
}
.card .card-header { background:transparent !important; border-bottom:1px solid rgba(255,192,30,.16); }
.card .card-footer { background:transparent !important; border-top:1px solid rgba(255,192,30,.12); }

p, span, td, li { color:#d6c9b2; }
label, .text-dark { color:#d6c9b2 !important; }
.text-muted { color:var(--vg-muted) !important; }

/* -------- Forms -------- */
.form-control,
.form-select {
  background:rgba(11,9,6,.65) !important;
  border:1px solid var(--vg-navy-line) !important;
  color:var(--vg-ink) !important;
}
.form-control::placeholder { color:#8c7d63 !important; }
.form-control:focus,
.form-select:focus {
  border-color:var(--vg-gold) !important;
  box-shadow:0 0 0 3px rgba(255,192,30,.20) !important;
}

/* -------- Dropdown / modal / tables -------- */
.dropdown-menu {
  background:#191309 !important;
  border:1px solid var(--vg-navy-line) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.55) !important;
}
.dropdown-item { color:#d6c9b2 !important; }
.dropdown-item:hover { background:var(--vg-gold-soft) !important; color:var(--vg-gold-hi) !important; }
.modal-content { background:#191309 !important; border:1px solid var(--vg-navy-line); }

.table { color:#d6c9b2; }
table.dataTable thead th,
.table thead th {
  color:var(--vg-gold-hi) !important;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:12px;
  border-color:var(--vg-navy-line) !important;
}
.table td { border-color:rgba(255,255,255,.06); }
table.dataTable tbody tr:hover { background:rgba(255,192,30,.06); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background:var(--vg-gold-btn) !important;color:#fff !important;border:none !important;border-radius:8px;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border:1px solid var(--vg-navy-line); background:rgba(11,9,6,.65); color:var(--vg-ink); }

#preloader { background:var(--vg-navy-0) !important; }

/* -------- Neutralise old colour patches -------- */
.card.bg-primary,
.col-xl-6.col-lg-6 .card.bg-primary,
.card.bg-primary + .card.bg-primary {
  background:linear-gradient(135deg, rgba(28,22,16,.96), rgba(39,30,20,.96)) !important;
  border:1px solid rgba(255,192,30,.30) !important;
}
.any-card .heading,
.any-card h3,
.col-xl-6.col-lg-6 h1,.col-xl-6.col-lg-6 h4,.col-xl-6.col-lg-6 h5 { color:#fff !important; }
.any-card .heading { color:var(--vg-gold-hi) !important; }

.referral-box {
  background:linear-gradient(135deg, rgba(28,22,16,.92), rgba(18,13,8,.92)) !important;
  border:1px solid rgba(255,192,30,.30) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.4) !important;
}
.referral-icon { background:var(--vg-gold-btn) !important;color:#fff !important; }
.referral-content label { color:var(--vg-muted) !important; }
.referral-link { color:var(--vg-gold-hi) !important; }
.copy-btn { background:var(--vg-gold-btn) !important;color:#fff !important;font-weight:700; }
.copy-btn:hover { filter:brightness(1.06); }

.widget-stat.card {
  background:linear-gradient(135deg,#1f1810,#140f08) !important;
  border:1px solid rgba(255,192,30,.30) !important;
}
.widget-stat .media span i { background:var(--vg-gold-soft) !important;color:var(--vg-gold-hi) !important; }
.widget-stat .media-body p { color:#d6c9b2 !important; }
.widget-stat .media-body h4 { color:#fff !important; }
.widget-stat .progress-bar { background:var(--vg-gold-btn) !important;box-shadow:0 4px 12px rgba(245,54,31,.4); }

:root{
  --bubble-gradient:linear-gradient(135deg, rgba(255,192,30,.18), rgba(255,106,30,.06));
  --accent-purple:var(--vg-gold-deep);
}
.icon-bubble,.icon-box.icon-bubble { background:var(--vg-gold-soft) !important;box-shadow:0 8px 18px rgba(255,192,30,.22)!important; }
.total-projects h3,.card-metric h3,.stat-block .count,h3.count,.text-purple { color:var(--vg-gold-hi) !important; }
.icon-box.bg-primary.rounded-circle { background:var(--vg-gold-btn) !important; }
.icon-box .fa-solid,.icon-box i { color:#fff !important; }

/* -------- Auth pages -------- */
.browse-job.login-style3 #myVideo { display:none !important; }
.browse-job.login-style3 .bg-img-fix {
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,120,30,.22), transparent 60%),
    radial-gradient(800px 620px at 90% 20%, rgba(255,192,30,.16), transparent 55%),
    linear-gradient(180deg, #0b0906 0%, #141009 50%, #0a0805 100%) !important;
  min-height:100vh;
}
.browse-job.login-style3 .row { position:relative; z-index:1; }

.login-form.style-2,
.login-form.style-2.card {
  background:linear-gradient(180deg, rgba(28,22,16,.86), rgba(14,10,6,.90)) !important;
  border:1px solid rgba(255,192,30,.32) !important;
  border-radius:20px !important;
  box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px);
  overflow:hidden;
  position:relative;
}
.login-form.style-2::before {
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--vg-gold),var(--sol-red),var(--vg-gold),transparent);
}
.login-form.style-2 .card-body { padding:34px 30px !important; }
.login-form.style-2 .form-title,
.login-form.style-2 h3 {
  font-family:'Cinzel',serif !important;
  letter-spacing:1px;
  color:var(--vg-gold-hi) !important;
}
.login-form.style-2 p,
.login-form.style-2 label,
.login-form.style-2 .form-label { color:#d6c9b2 !important; }
.login-form.style-2 .form-control {
  background:rgba(11,9,6,.6) !important;
  border:1px solid var(--vg-navy-line) !important;
  color:#fff !important;
  height:48px;border-radius:12px;
}
.login-form.style-2 .form-control::placeholder { color:#8c7d63 !important; }
.login-form.style-2 .form-control:focus { border-color:var(--vg-gold) !important;box-shadow:0 0 0 3px rgba(255,192,30,.22) !important; }
.login-form.style-2 .btn-primary { width:100%;height:48px;border-radius:12px;font-size:15px;letter-spacing:.5px; }
.login-form.style-2 .btn-warning { background:transparent!important;border:1px solid var(--vg-gold)!important;color:var(--vg-gold-hi)!important;font-weight:600; }
/* Secondary link-buttons (Forget Password / Create new Account) — visible outlined gold */
.login-form.style-2 .btn.tp-btn-light,
.login-form.style-2 .tp-btn-light.btn-primary,
.login-form.style-2 .tp-btn-light.btn-warning,
.login-form.style-2 .forget-tab,
.login-form.style-2 a .forget-tab {
  background:transparent !important;
  border:1px solid var(--vg-gold) !important;
  color:var(--vg-gold-hi) !important;
  font-weight:600 !important;
}
.login-form.style-2 .forget-tab:hover,
.login-form.style-2 .btn.tp-btn-light:hover {
  background:var(--vg-gold-soft) !important;
  color:#fff !important;
  border-color:var(--vg-gold-hi) !important;
}
.login-form.style-2 .text-primary,
.login-form.style-2 a.text-primary,
.login-form.style-2 .text-primary small { color:var(--vg-gold-hi) !important; }
.login-form.style-2 .table th { color:var(--vg-gold-hi)!important;border-color:var(--vg-navy-line)!important; }
.login-form.style-2 .table td { color:#efe6d6!important;border-color:rgba(255,255,255,.08)!important; }
.login-form.style-2 .text-success { color:#57d9a3 !important; }

@media (prefers-reduced-motion:reduce){
  .card,.btn-primary{transition:none!important;}
  .card:hover,.btn-primary:hover{transform:none!important;}
}