/* ==========================================================================
   AdUsdc — Dark Navy Theme
   Loaded AFTER theme.css + custom.css so it can safely override them.
   Matches the reference screenshot: dark navy background, blue balance
   card, dark pill tabs w/ solid-blue active state, dark ad cards.
   ========================================================================== */

:root{
  --bg-page:        #0a0e1f;
  --bg-page-2:      #0b1230;
  --bg-card:        #10182f;
  --bg-card-2:      #131c3d;
  --border-soft:    #1c2745;
  --border-soft-2:  #24305a;
  --text-heading:   #eef1fb;
  --text-body:      #aab2cc;
  --text-muted:     #7c85a3;
  --accent-blue:    #3d6bef;
  --accent-blue-2:  #2f57c9;
  --accent-blue-lt: #6ea1ff;
  --balance-grad-1: #163a9e;
  --balance-grad-2: #2f5fd6;
  --deposit-grad-1: #0e6f8f;
  --deposit-grad-2: #1aa7c9;
}

/* ---------- Base page ---------- */
body{
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
}
a{ color: var(--accent-blue-lt) !important; }
a:hover{ color: #9cc0ff !important; }
hr{ border-color: var(--border-soft) !important; opacity:1; }

/* ---------- Navbar ---------- */
.navbar{
  background-color: var(--bg-page-2) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
.navbar.shadow-sm{ box-shadow: 0 2px 10px rgba(0,0,0,.35) !important; }
.navbar-light .navbar-nav .nav-link{ color: var(--text-heading) !important; opacity:.9; }
.navbar-light .navbar-nav .nav-link:hover{ color: var(--accent-blue-lt) !important; opacity:1; }
.navbar-brand{ color: var(--text-heading) !important; }
.navbar-toggler{ color: var(--text-heading) !important; border-color: var(--border-soft-2) !important; }
.navbar-toggler svg{ stroke: var(--text-heading) !important; }
.btn-outline.rounded-pill{
  color: var(--text-heading) !important;
  border-color: var(--border-soft-2) !important;
  background: transparent !important;
}
.btn-outline.rounded-pill:hover{
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}

/* ---------- Cards (generic) ---------- */
.card{
  background-color: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-body) !important;
}
.card-primary{
  border-color: var(--border-soft) !important;
  background-color: var(--bg-card) !important;
  border-radius: 14px !important;
}
.card-primary.card-body{ border-radius: 14px !important; }

/* ad / offer / task cards (Bitco PTC, Shortlinks, PTC, etc.) */
.ptc-ads-item .card-primary,
.ra-ads-item .card-primary{
  transition: transform .15s ease, border-color .15s ease;
}
.ptc-ads-item .card-primary:hover,
.ra-ads-item .card-primary:hover{
  transform: translateY(-2px);
  border-color: var(--accent-blue) !important;
}

/* ---------- Balance cards ---------- */
.card-balance{
  background: linear-gradient(135deg, var(--balance-grad-1) 0%, var(--balance-grad-2) 100%) !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(47,95,214,.35) !important;
  border-radius: 18px !important;
}
.card-deposit-balance{
  background: linear-gradient(135deg, var(--deposit-grad-1) 0%, var(--deposit-grad-2) 100%) !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(26,167,201,.30) !important;
  border-radius: 18px !important;
}
.card-balance .card-title,
.card-deposit-balance .card-title,
.card-balance .card-text,
.card-deposit-balance .card-text{ color: #fff !important; }

/* ---------- Text helper classes used across templates ---------- */
.text-dark-main, .text-dark-p{ color: var(--text-heading) !important; }
.text-history{ color: var(--text-body) !important; }
.text-reward{ color: var(--accent-blue-lt) !important; }
label{ color: var(--text-body) !important; }
.color-1 p{ color: var(--accent-blue-lt) !important; }

/* ---------- Buttons ---------- */
.btn-primary{
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color: var(--accent-blue-2) !important;
  border-color: var(--accent-blue-2) !important;
}
.btn-primary.dep{ background-color: #1aa7c9 !important; }
.btn-primary.dep:hover,
.btn-primary.dep:active,
.btn-primary.dep:focus{ background-color: #178fac !important; }

/* ---------- Pills / Tabs ---------- */
.nav-pills .nav-link{
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-radius: 8px !important;
}
.nav-pills .nav-link.cus1,
.nav-pills .nav-link.cus4,
.nav-pills .nav-link.b-b{
  border: 1px solid var(--border-soft-2) !important;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link.i-pills.active,
.nav-pills .nav-link.p-pills.active,
.nav-pills .active.p-pills,
.nav-pills .active.i-pills{
  background-image: none !important;
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}
.nav-pills .nav-link.i-pills:hover,
.nav-pills .nav-link.p-pills:hover,
.i-s:hover, .p-s:hover{
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}
.dropdown-menu{
  background-color: var(--bg-card-2) !important;
  border-color: var(--border-soft-2) !important;
}
.dropdown-item{ color: var(--text-body) !important; }
.dropdown-item:hover,
.dropdown-item:focus{
  background-color: var(--bg-page-2) !important;
  color: #fff !important;
}
.dropdown-item.active{
  background-image: none !important;
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
}

/* ---------- Forms ---------- */
.form-control{
  background-color: var(--bg-card) !important;
  border-color: var(--border-soft-2) !important;
  color: var(--text-heading) !important;
}
.form-control::placeholder{ color: var(--text-muted) !important; }
.form-control:focus{
  background-color: var(--bg-card) !important;
  border-color: var(--accent-blue) !important;
  color: var(--text-heading) !important;
}
.custom-select{ background-color: var(--bg-card) !important; color: var(--text-heading) !important; }

/* ---------- Tables ---------- */
.table{ color: var(--text-body) !important; }
.table thead tr{ color: var(--accent-blue-lt) !important; border-bottom: 1px solid var(--border-soft) !important; }
.table td, .table th{ border-color: var(--border-soft) !important; }
.table-responsive{ background-color: transparent !important; }

/* ---------- Alerts / Referral boxes ---------- */
.alert-primary{
  background-color: var(--bg-card) !important;
  border-color: var(--border-soft-2) !important;
  color: var(--text-body) !important;
}
.alert-primary code{ color: var(--accent-blue-lt) !important; }
.alert-ref{
  background-color: var(--bg-card) !important;
  border-color: var(--border-soft-2) !important;
  color: var(--text-heading) !important;
}

/* ---------- Modals ---------- */
.modal-content{
  background-color: var(--bg-card-2) !important;
  color: var(--text-body) !important;
  border-color: var(--border-soft) !important;
}
.modal-header, .modal-footer{ border-color: var(--border-soft) !important; }
.modal-title{ color: var(--text-heading) !important; }
button.close, button.close:hover, button.close:focus{
  color: var(--text-heading) !important;
}

/* ---------- Footer ---------- */
footer{
  background-color: var(--bg-page-2) !important;
  border-top: 1px solid var(--border-soft) !important;
}
footer p{ color: var(--text-muted) !important; }

/* ---------- Badges (contrast tweaks only) ---------- */
.badge-info{ background-color: #4a5fce !important; color:#fff !important; }
.badge-warning{ background-color: #2a2f57 !important; color: #8fb0ff !important; }

/* ---------- VPN block screen (template.twig) ---------- */
#vpn-block-screen{ background: var(--bg-page) !important; }
#vpn-block-screen .vpn-card{
  background: var(--bg-card) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}
#vpn-block-screen h2{ color: #ff6b6b !important; }
#vpn-block-screen p{ color: var(--text-body) !important; }

/* ---------- Floating banner slider (template.twig) ---------- */
#bnr-inner{ background: var(--bg-card) !important; border-color: var(--border-soft-2) !important; }

/* ---------- Page section wrapper (was hardcoded #fff in theme.css) ---------- */
.page-section{
  background-color: var(--bg-page) !important;
}
.page-section p{ color: var(--text-body) !important; }

/* ---------- SweetAlert2 popups (assets/js/sweetalert.min.js) ---------- */
.swal2-popup{
  background: var(--bg-card-2) !important;
  color: var(--text-body) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}
.swal2-title{ color: var(--text-heading) !important; }
.swal2-content, .swal2-html-container{ color: var(--text-body) !important; }
.swal2-close{ color: var(--text-body) !important; }
.swal2-close:hover{ color: var(--accent-blue-lt) !important; }
.swal2-actions .swal2-styled{ color:#fff !important; }
.swal2-confirm{ background-color: var(--accent-blue) !important; }
.swal2-confirm:hover{ background-color: var(--accent-blue-2) !important; }
.swal2-cancel{ background-color: #3a3f55 !important; }
.swal2-success-ring{ border-color: rgba(53,187,120,.3) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color:#ff4943 !important; }
.swal2-icon.swal2-warning{ border-color:#fac14d !important; color:#fac14d !important; }
.swal2-icon.swal2-info{ border-color: var(--accent-blue-lt) !important; color: var(--accent-blue-lt) !important; }
.swal2-timer-progress-bar{ background: var(--accent-blue) !important; }
.swal2-validation-message{ background: var(--bg-page-2) !important; color: var(--text-body) !important; }
.swal2-input, .swal2-textarea, .swal2-select{
  background: var(--bg-card) !important;
  color: var(--text-heading) !important;
  border-color: var(--border-soft-2) !important;
}

/* ---------- Misc ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: var(--bg-page); }
::-webkit-scrollbar-thumb{ background: var(--border-soft-2); border-radius:8px; }