/* ============================================================
   TopSwap Premium Dark Theme
   "Modern casino lounge" — dark, premium, polished, cinematic
   Loaded LAST to override all existing styles.
   To revert: remove the <link> from welcome.blade.php
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  --ts-bg-base: #0f0f13;
  --ts-bg-surface: #1a1a24;
  --ts-bg-elevated: #22222e;
  --ts-bg-input: #16161f;
  --ts-border: rgba(255,255,255,0.06);
  --ts-border-gold: rgba(212,168,67,0.25);
  --ts-text-primary: #f0f0f5;
  --ts-text-secondary: #8b8fa3;
  --ts-text-muted: #5a5e72;
  --ts-gold: #d4a843;
  --ts-gold-hover: #e6bc5e;
  --ts-gold-dim: rgba(212,168,67,0.12);
  --ts-purple-glow: rgba(139,92,246,0.10);
  --ts-purple-glow-strong: rgba(139,92,246,0.25);
  --ts-green: #34d399;
  --ts-green-dim: rgba(52,211,153,0.12);
  --ts-blue: #60a5fa;
  --ts-red: #f87171;
  --ts-glass: rgba(26,26,36,0.75);
  --ts-glass-border: rgba(255,255,255,0.08);
  --ts-shadow: 0 4px 24px rgba(0,0,0,0.4);
  --ts-shadow-gold: 0 0 20px rgba(212,168,67,0.18);
  --ts-glow-gold: 0 0 22px rgba(212,168,67,0.16), 0 0 48px rgba(212,168,67,0.07);
  --ts-glow-red: 0 0 22px rgba(248,113,113,0.18), 0 0 48px rgba(248,113,113,0.08);
  --ts-radius: 12px;
  --ts-transition: all 0.2s ease;
}

/* ── Global / Body ─────────────────────────────────────── */
body {
  background-color: var(--ts-bg-base) !important;
  color: var(--ts-text-primary) !important;
}

a {
  color: var(--ts-gold) !important;
}
a:hover {
  color: var(--ts-gold-hover) !important;
  text-decoration: none !important;
}

::selection {
  background: var(--ts-gold);
  color: var(--ts-bg-base);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ts-bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--ts-gold-dim);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ts-gold);
}

/* ── Top Navbar ────────────────────────────────────────── */
.sb-topnav,
.custm__navbar--wrapper {
  background-color: var(--ts-bg-surface) !important;
  border-bottom: 1px solid var(--ts-border) !important;
  filter: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sb-topnav .navbar-brand img {
  filter: brightness(1.1);
}

.sb-topnav.navbar-dark #sidebarToggle,
.sb-topnav .btn {
  color: var(--ts-text-primary) !important;
}

.flex__wrapper i,
.flex__wrapper--center i,
.dropdown__menu-right i {
  color: var(--ts-text-secondary) !important;
}

.dropdown-menu {
  background-color: var(--ts-bg-elevated) !important;
  border: 1px solid var(--ts-border) !important;
  box-shadow: var(--ts-shadow) !important;
}
.dropdown-menu a,
.dropdown-item {
  color: var(--ts-text-primary) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ts-gold-dim) !important;
  color: var(--ts-gold) !important;
}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar--gradient,
.sb-sidenav {
  background: linear-gradient(180deg, #12121a 0%, #0f0f18 50%, #13111f 100%) !important;
  border-right: 1px solid var(--ts-border) !important;
  box-shadow: 4px 0 30px var(--ts-purple-glow) !important;
}

.heading-wrapper--one {
  color: var(--ts-text-primary) !important;
  text-shadow: 0 0 20px var(--ts-purple-glow-strong);
}

.dashboard-icon-border {
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 12px var(--ts-gold-dim);
}

.sb-sidenav-menu .nav-link {
  color: var(--ts-text-secondary) !important;
  border-bottom: 1px solid var(--ts-border) !important;
  transition: var(--ts-transition) !important;
  position: relative;
}
.sb-sidenav-menu .nav-link:hover {
  color: var(--ts-gold) !important;
  background-color: var(--ts-gold-dim) !important;
  padding-left: 1.25rem;
}
.sb-sidenav-menu .nav-link.active,
.sb-sidenav-menu .nav-link.router-link-active {
  background-color: rgba(212,168,67,0.15) !important;
  color: var(--ts-gold) !important;
  border-left: 3px solid var(--ts-gold) !important;
  box-shadow: inset 0 0 20px var(--ts-gold-dim);
}
.sb-sidenav-menu .nav-link .sb-nav-link-icon i {
  color: var(--ts-text-muted) !important;
  transition: var(--ts-transition);
}
.sb-sidenav-menu .nav-link:hover .sb-nav-link-icon i,
.sb-sidenav-menu .nav-link.active .sb-nav-link-icon i {
  color: var(--ts-gold) !important;
}

/* ── Main Content Area ─────────────────────────────────── */
#layoutSidenav #layoutSidenav_content {
  background-color: var(--ts-bg-base) !important;
}

.custom__container-wrapper,
.dboard-inner {
  background-color: var(--ts-bg-base) !important;
}

.container {
  color: var(--ts-text-primary);
}

/* ── Page Headings ─────────────────────────────────────── */
.account-title h4,
.match-title h4 {
  color: transparent !important;
  background: linear-gradient(135deg, var(--ts-gold) 0%, #f5d78e 50%, var(--ts-gold) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  border-bottom: 1px solid var(--ts-border-gold) !important;
  padding-bottom: 10px !important;
  font-weight: 600 !important;
}

.active-title h1,
.active-title-2 h1 {
  color: var(--ts-text-primary) !important;
  font-weight: 600;
}

.title-dashboard {
  color: var(--ts-text-primary) !important;
}

/* ── Wallet Cards — blue-to-purple gradient on ALL ──────── */
.card__one--wrapper,
.card__two--wrapper,
.card__three--wrapper,
.card__four--wrapper,
.advanced-card,
.advance-card1 {
  background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 24px rgba(52,152,219,0.22), 0 0 48px rgba(142,68,173,0.12) !important;
  transition: var(--ts-transition) !important;
}
.card__one--wrapper:hover,
.card__two--wrapper:hover,
.card__three--wrapper:hover,
.card__four--wrapper:hover,
.advanced-card:hover,
.advance-card1:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 36px rgba(52,152,219,0.32), 0 0 64px rgba(142,68,173,0.18) !important;
  transform: translateY(-3px);
}

.card-label-one {
  color: #dce0eb !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.card-label-one1 {
  color: #dce0eb !important;
}

.card-heading-one {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  font-weight: 700 !important;
}

.flex__wrapper-two i {
  color: rgba(255,255,255,0.7) !important;
  font-size: 24px;
}
.fa-wallet {
  color: rgba(255,255,255,0.8) !important;
}

/* ── Graph / Content Wrapper — GOLD glow ──────────────── */
.graph__wrapper-width {
  background-color: var(--ts-bg-surface) !important;
  background: linear-gradient(135deg, var(--ts-bg-surface) 0%, var(--ts-bg-elevated) 100%) !important;
  filter: none !important;
  border: 1px solid var(--ts-border-gold) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
  padding: 20px !important;
}
.graph__wrapper-width:hover {
  box-shadow: var(--ts-shadow), 0 0 32px rgba(212,168,67,0.28), 0 0 60px rgba(212,168,67,0.10) !important;
}

.sidebar--box {
  background-color: var(--ts-bg-surface) !important;
  filter: none !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
  border: 1px solid rgba(248,113,113,0.10) !important;
}

/* ── Active Details / Description — GOLD glow ─────────── */
.active-details {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid var(--ts-border-gold) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
}

.active-description {
  color: var(--ts-text-secondary) !important;
}
.active-description p,
.no-match-p p {
  color: var(--ts-text-secondary) !important;
}

/* ── Activity / History List — RED glow ───────────────── */
.acivity-details {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid rgba(248,113,113,0.08) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: var(--ts-transition) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), var(--ts-glow-red) !important;
}
.acivity-details:hover {
  border-color: rgba(248,113,113,0.25) !important;
  background-color: var(--ts-bg-elevated) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 28px rgba(248,113,113,0.25), 0 0 52px rgba(248,113,113,0.08) !important;
}

.activity-name,
.activity-name a {
  color: var(--ts-text-primary) !important;
}
.activity-date {
  color: var(--ts-text-secondary) !important;
}
.activity-time {
  color: var(--ts-text-muted) !important;
}
.acivity-price {
  color: var(--ts-gold) !important;
  font-weight: 600 !important;
}

/* ── Tables ────────────────────────────────────────────── */
.table,
.gameTb,
table {
  color: var(--ts-text-primary) !important;
}

.table thead th,
.gameTb th,
table th {
  background-color: var(--ts-bg-elevated) !important;
  color: var(--ts-gold) !important;
  border-color: var(--ts-border) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

.table td,
.gameTb td,
table td {
  border-color: var(--ts-border) !important;
  color: var(--ts-text-primary) !important;
  background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.02) !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover,
.gameTb tr:hover {
  background-color: var(--ts-gold-dim) !important;
}

.game-det {
  background-color: var(--ts-bg-surface) !important;
}

/* DataTables overrides */
.dataTables_length label,
.dataTables_length select {
  color: var(--ts-text-secondary) !important;
}
.dataTables_length .entries {
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
}

/* ── Forms / Inputs ────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea {
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
  transition: var(--ts-transition) !important;
}
.form-control:focus,
input:focus,
textarea:focus {
  background-color: var(--ts-bg-elevated) !important;
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 0 3px var(--ts-gold-dim) !important;
  color: var(--ts-text-primary) !important;
  outline: none !important;
}
.form-control::placeholder,
input::placeholder {
  color: var(--ts-text-muted) !important;
}

select,
.form-control[as="select"],
select.form-control {
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
}
select:focus {
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 0 3px var(--ts-gold-dim) !important;
}
select option {
  background-color: var(--ts-bg-elevated) !important;
  color: var(--ts-text-primary) !important;
}

.email-feild input,
.email-feild select,
.account-feild input,
.trade-feild input {
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
}
.email-feild input:focus,
.account-feild input:focus,
.trade-feild input:focus {
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 0 3px var(--ts-gold-dim) !important;
}

.form-group select {
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
}

label {
  color: var(--ts-text-secondary) !important;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary,
.no-match-btn a,
.login-form-btn .btn a,
.account-f-btn .btn a {
  background: linear-gradient(135deg, var(--ts-gold) 0%, var(--ts-gold-hover) 100%) !important;
  border: none !important;
  color: var(--ts-bg-base) !important;
  font-weight: 600 !important;
  transition: var(--ts-transition) !important;
  box-shadow: 0 2px 12px var(--ts-gold-dim) !important;
}
.btn-primary:hover,
.no-match-btn a:hover,
.login-form-btn .btn a:hover,
.account-f-btn .btn a:hover {
  background: linear-gradient(135deg, var(--ts-gold-hover) 0%, var(--ts-gold) 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212,168,67,0.3) !important;
  color: var(--ts-bg-base) !important;
  border: none !important;
}

.btn-success {
  background: linear-gradient(135deg, #22c55e 0%, var(--ts-green) 100%) !important;
  border: none !important;
  color: var(--ts-bg-base) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, var(--ts-red) 100%) !important;
  border: none !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--ts-gold) 0%, #f59e0b 100%) !important;
  border: none !important;
  color: var(--ts-bg-base) !important;
}

.btn-secondary,
.btn-outline-secondary {
  background-color: var(--ts-bg-elevated) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text-secondary) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--ts-bg-surface) !important;
  color: var(--ts-text-primary) !important;
  border-color: var(--ts-gold) !important;
}

.con a {
  color: var(--ts-gold) !important;
}

/* ── Modals / Popups ───────────────────────────────────── */
body .overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body .popup {
  background: linear-gradient(160deg, var(--ts-bg-elevated) 0%, var(--ts-bg-surface) 100%) !important;
  border: 1px solid var(--ts-glass-border) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 60px var(--ts-purple-glow) !important;
  color: var(--ts-text-primary) !important;
}

body .popup h2 {
  color: var(--ts-gold) !important;
  font-weight: 600 !important;
}

body .popup .close {
  color: var(--ts-text-muted) !important;
  text-decoration: none !important;
}
body .popup .close:hover {
  color: var(--ts-red) !important;
}

body .pop-tos a {
  border-radius: 8px !important;
  transition: var(--ts-transition) !important;
}

body .tos2 a {
  background: linear-gradient(135deg, var(--ts-gold) 0%, var(--ts-gold-hover) 100%) !important;
  color: var(--ts-bg-base) !important;
  border: none !important;
}
body .tos2 a:hover {
  box-shadow: 0 4px 16px rgba(212,168,67,0.3) !important;
  transform: translateY(-1px);
}

body .tos1 a {
  background-color: var(--ts-bg-elevated) !important;
  color: var(--ts-text-secondary) !important;
  border: 1px solid var(--ts-border) !important;
}
body .tos1 a:hover {
  color: var(--ts-text-primary) !important;
  border-color: var(--ts-text-muted) !important;
}

/* Bootstrap modals */
.modal-content {
  background-color: var(--ts-bg-elevated) !important;
  border: 1px solid var(--ts-glass-border) !important;
  color: var(--ts-text-primary) !important;
}
.modal-header {
  border-bottom-color: var(--ts-border) !important;
}
.modal-footer {
  border-top-color: var(--ts-border) !important;
}
.modal-confirm .modal-content {
  border-top: 4px solid var(--ts-gold) !important;
}

/* ── Tier / Progress Steps ─────────────────────────────── */
.multi-steps > li {
  color: var(--ts-gold) !important;
}
.multi-steps > li:before {
  background-color: var(--ts-gold) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-bg-base) !important;
}
.multi-steps > li.is-active:before {
  background-color: var(--ts-bg-base) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-gold) !important;
  animation: goldPulse 2s infinite !important;
}
.multi-steps > li.is-active ~ li {
  color: var(--ts-text-muted) !important;
}
.multi-steps > li.is-active ~ li:before {
  background-color: var(--ts-bg-elevated) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-muted) !important;
}
.multi-steps > li.is-active ~ li:after,
.multi-steps > li.is-active:after {
  background-color: var(--ts-bg-elevated) !important;
}

.progress-bar--success {
  background-color: var(--ts-gold) !important;
}
.progress-bar__bar {
  background-color: var(--ts-bg-elevated) !important;
}

@keyframes goldPulse {
  0% { box-shadow: 0 0 0 0 rgba(212,168,67,0.5); }
  100% { box-shadow: 0 0 0 10px rgba(212,168,67,0); }
}

/* ── Pagination ────────────────────────────────────────── */
.page-link {
  background-color: var(--ts-bg-elevated) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-secondary) !important;
}
.page-link:hover {
  background-color: var(--ts-gold-dim) !important;
  color: var(--ts-gold) !important;
  border-color: var(--ts-border-gold) !important;
}
.page-item.active .page-link {
  background-color: var(--ts-gold) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-bg-base) !important;
}
.page-item.disabled .page-link {
  background-color: var(--ts-bg-surface) !important;
  color: var(--ts-text-muted) !important;
}

/* ── Cards (Bootstrap general) ─────────────────────────── */
.card {
  background-color: var(--ts-bg-surface) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-primary) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
}
.card-body {
  color: var(--ts-text-primary) !important;
}
.card-header {
  background-color: var(--ts-bg-elevated) !important;
  border-bottom-color: var(--ts-border) !important;
}

/* ── Tour Modal ────────────────────────────────────────── */
.tour_modal .card {
  background-color: var(--ts-bg-elevated) !important;
  border: 1px solid var(--ts-border-gold) !important;
  color: var(--ts-text-primary) !important;
}
.tour_modal .card h6 {
  color: var(--ts-gold) !important;
}
.tour_modal .card p {
  color: var(--ts-text-secondary) !important;
}
.cd-next {
  color: var(--ts-gold) !important;
}

.zoom-in-zoom-out {
  border-color: var(--ts-gold) !important;
}

#layer {
  background: rgba(0,0,0,0.6) !important;
}

/* ── Checkboxes / Payment Methods ──────────────────────── */
.check-method {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text-primary) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
}
.check-method:hover {
  border-color: var(--ts-border-gold) !important;
  box-shadow: var(--ts-shadow), 0 0 24px rgba(212,168,67,0.18) !important;
}

.method-img img {
  filter: brightness(0.9) contrast(1.1);
}

/* ── Alerts ────────────────────────────────────────────── */
.alert-success {
  background-color: var(--ts-green-dim) !important;
  border-color: var(--ts-green) !important;
  color: var(--ts-green) !important;
}
.alert-danger {
  background-color: rgba(248,113,113,0.12) !important;
  border-color: var(--ts-red) !important;
  color: var(--ts-red) !important;
}
.alert-warning {
  background-color: var(--ts-gold-dim) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-gold) !important;
}
.alert-info {
  background-color: rgba(96,165,250,0.12) !important;
  border-color: var(--ts-blue) !important;
  color: var(--ts-blue) !important;
}

/* ── Footer ────────────────────────────────────────────── */
.dash-foot {
  background-color: var(--ts-bg-surface) !important;
  border-top: 1px solid var(--ts-border) !important;
  color: var(--ts-text-muted) !important;
}
.dash-foot a {
  color: var(--ts-gold) !important;
}

/* ── Login / Auth Pages ────────────────────────────────── */
.login-form-btn .forget a {
  color: var(--ts-text-secondary) !important;
}
.login-form-btn .forget a:hover {
  color: var(--ts-gold) !important;
}

/* ── Misc Typography ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--ts-text-primary) !important;
}

p {
  color: var(--ts-text-secondary);
}

.text-muted {
  color: var(--ts-text-muted) !important;
}

/* ── SweetAlert2 (Toast) overrides ─────────────────────── */
.swal2-popup {
  background: var(--ts-bg-elevated) !important;
  color: var(--ts-text-primary) !important;
  border: 1px solid var(--ts-border) !important;
}
.swal2-title {
  color: var(--ts-text-primary) !important;
}
.swal2-html-container {
  color: var(--ts-text-secondary) !important;
}

/* ── Notification badges ───────────────────────────────── */
.badge-primary {
  background-color: var(--ts-gold) !important;
  color: var(--ts-bg-base) !important;
}
.badge-success {
  background-color: var(--ts-green) !important;
}
.badge-danger {
  background-color: var(--ts-red) !important;
}

/* ── Active card row ───────────────────────────────────── */
.active-card .card {
  border-radius: var(--ts-radius) !important;
}

/* ── Frequency / withdrawal info text ──────────────────── */
.frequency h6,
.frequency h5 {
  color: var(--ts-text-secondary) !important;
}

/* ── Hide-cancel toggle ────────────────────────────────── */
.hide-cancel p,
.hide-detail p {
  color: var(--ts-text-secondary) !important;
}

/* ── img_content withdrawal rows ───────────────────────── */
.img_content h5 {
  color: var(--ts-text-primary) !important;
}

/* ── "Deposit" heading in transfer-amount ──────────────── */
.some-class h3 {
  color: var(--ts-text-primary) !important;
}

/* ── Payment / Withdrawal Table — RED glow ────────────── */
.payment_new_section {
  /* red glow on the entire withdrawal section */
}
.payment_new_section .graph__wrapper-width {
  border: 1px solid rgba(248,113,113,0.15) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
}
.payment_new_section .graph__wrapper-width:hover {
  box-shadow: var(--ts-shadow), 0 0 32px rgba(248,113,113,0.28), 0 0 60px rgba(248,113,113,0.10) !important;
}
.payment_new_section .table {
  background-color: transparent !important;
}
.payment_new_section .table thead th {
  background-color: var(--ts-bg-elevated) !important;
  border-bottom: 2px solid rgba(248,113,113,0.30) !important;
}
.payment_new_section .table tbody td {
  border-color: var(--ts-border) !important;
}
.payment_new_section .table thead th h5 {
  color: var(--ts-red) !important;
}

/* ── Zelle / payment details ───────────────────────────── */
.zelle-details {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
}

/* ── Reported issue / contact — RED glow ──────────────── */
.contact-wrap,
.contact-info,
.contact-left {
  background-color: var(--ts-bg-surface) !important;
  color: var(--ts-text-primary) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
}

/* ── Chat styling — RED glow ───────────────────────────── */
.chat-card,
.msgcard {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid rgba(248,113,113,0.10) !important;
  color: var(--ts-text-primary) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
}
.chat-box {
  background-color: var(--ts-bg-base) !important;
}
.chat-log {
  background-color: var(--ts-bg-base) !important;
}

/* ── Icon override (ion-icon color) ────────────────────── */
ion-icon {
  color: var(--ts-text-secondary) !important;
}
ion-icon.create {
  color: var(--ts-gold) !important;
}

/* ── "Disclaimer" modal ────────────────────────────────── */
.Disclamer,
.dis-overlay .popup {
  background: var(--ts-bg-elevated) !important;
  color: var(--ts-text-primary) !important;
}

/* ── User profile image in sidebar on hover ────────────── */
#profile-image {
  background-color: rgba(0,0,0,0.5) !important;
}

/* ── Status text colors ────────────────────────────────── */
.acivity-price[style*="color:green"],
.acivity-price[style*="color: green"] {
  color: var(--ts-green) !important;
}
.acivity-price[style*="color:red"],
.acivity-price[style*="color: red"] {
  color: var(--ts-red) !important;
}

/* ── Over-flow container ───────────────────────────────── */
.over-flow {
  background-color: transparent !important;
}

/* ── Platform admin table — RED glow ──────────────────── */
.table-container {
  background-color: var(--ts-bg-surface) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
}
.table-rwd {
  color: var(--ts-text-primary) !important;
}
.table-rwd thead th {
  background-color: var(--ts-bg-elevated) !important;
  color: var(--ts-gold) !important;
}
.table-rwd td {
  border-color: var(--ts-border) !important;
}

/* ── Main-b section spacing ────────────────────────────── */
.main-b {
  color: var(--ts-text-primary) !important;
}

/* ── Remove old green CTA color where inline ───────────── */
a[style*="color: rgb(4, 138, 79)"],
a[style*="color:rgb(4, 138, 79)"] {
  color: var(--ts-gold) !important;
}

/* ── Bootstrap multiselect overrides ───────────────────── */
.multiselect-container {
  background-color: var(--ts-bg-elevated) !important;
}
.multiselect-container > li > a {
  color: var(--ts-text-primary) !important;
}
.multiselect-container > li > a:hover {
  background-color: var(--ts-gold-dim) !important;
}

/* ── Fix white text on white bg for specific elements ──── */
.nav-link span {
  color: inherit !important;
}

/* ── Ensure body a inside cards stays readable ─────────── */
.card__one--wrapper a,
.card__two--wrapper a,
.card__three--wrapper a,
.card__four--wrapper a {
  color: var(--ts-text-primary) !important;
}

/* ── Inline style color overrides ───────────────────────── */
/* Header username and icons use inline color:#3c3c3c */
span[style*="color:#3c3c3c"],
span[style*="color: #3c3c3c"] {
  color: var(--ts-text-primary) !important;
}

/* Scrolling announcement text - forced black in Vue template */
marquee b,
marquee b[style*="color:black"],
marquee b[style*="color: black"],
marquee b[style] {
  color: var(--ts-text-primary) !important;
}
marquee i,
marquee i.fa-bell,
marquee .fa-bell,
marquee i[style],
marquee i[style*="color"] {
  color: var(--ts-gold) !important;
}

/* Announcement banner inline color — aggressive override for all icons with inline blue */
i[style*="#007bff"],
i[style*="007bff"],
b[style*="#007bff"],
b[style*="007bff"],
.fa-bell[style] {
  color: var(--ts-gold) !important;
}
/* Inline green/red on action icons */
i[style*="color:green"],
i[style*="color: green"] {
  color: var(--ts-green) !important;
}
i[style*="color:red"],
i[style*="color: red"] {
  color: var(--ts-red) !important;
}

/* ── Deposit section — "Please select your platform" ───── */
.acivity-details .activity-info.method-info,
.activity-info.method-info {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  padding: 12px !important;
}

/* Override inline hr style on deposit page */
hr,
hr[style] {
  border-color: var(--ts-border) !important;
  opacity: 0.5;
}

/* ── Game platform cards (compiled Vue .game-card) — GOLD glow ── */
.game-card {
  background: linear-gradient(135deg, var(--ts-bg-surface) 0%, var(--ts-bg-elevated) 100%) !important;
  border: 2px solid var(--ts-border-gold) !important;
  border-radius: 15px !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
  transition: all 0.3s ease !important;
}
.game-card:hover {
  border-color: var(--ts-gold) !important;
  box-shadow: var(--ts-shadow), 0 0 32px rgba(212,168,67,0.28), 0 0 60px rgba(212,168,67,0.10) !important;
  transform: translateY(-5px) !important;
}
.game-card img {
  border-radius: 10px !important;
  filter: brightness(0.95) contrast(1.05) !important;
}
.game-card-body {
  color: var(--ts-text-primary) !important;
}
.game-input-wrapper {
  color: var(--ts-text-primary) !important;
}
.game-input,
.game-card input {
  background-color: var(--ts-bg-input) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text-primary) !important;
  border-radius: 5px !important;
}
.game-input:focus,
.game-card input:focus {
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 0 3px var(--ts-gold-dim) !important;
}
.game-label {
  color: var(--ts-text-secondary) !important;
}
.check-icon {
  color: var(--ts-gold) !important;
}

/* ── .new-class container (compiled Vue scoped) — GOLD glow ── */
.new-class {
  background: linear-gradient(135deg, var(--ts-bg-surface) 0%, var(--ts-bg-elevated) 100%) !important;
  filter: none !important;
  border: 1px solid var(--ts-border-gold) !important;
  border-radius: 10px !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-gold) !important;
}

/* wallet card glows already set per-card above — no extra override needed */

/* ── Scoped Vue style boosters ─────────────────────────── */
/* GameSetting table scoped border */
body .gameTb td,
body .gameTb th {
  border-color: var(--ts-border) !important;
  color: var(--ts-text-primary) !important;
}

/* transfer-amount scoped input borders */
body .email-feild input {
  border-color: var(--ts-border) !important;
  background-color: var(--ts-bg-input) !important;
  color: var(--ts-text-primary) !important;
}

/* Scoped progress bar overrides (transfer-amount.vue) */
body .multi-steps > li {
  color: var(--ts-gold) !important;
}
body .multi-steps > li:before {
  background-color: var(--ts-gold) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-bg-base) !important;
}
body .multi-steps > li.is-active:before {
  background-color: var(--ts-bg-base) !important;
  border-color: var(--ts-gold) !important;
  color: var(--ts-gold) !important;
}
body .multi-steps > li.is-active ~ li:before {
  background-color: var(--ts-bg-elevated) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text-muted) !important;
}
body .multi-steps > li.is-active ~ li {
  color: var(--ts-text-muted) !important;
}
body .progress-bar--success {
  background-color: var(--ts-gold) !important;
}
body .progress-bar__bar {
  background-color: var(--ts-bg-elevated) !important;
}

/* ── Profile Settings — dark container, light inputs, RED glow ── */
.account-info {
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid rgba(248,113,113,0.10) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow), var(--ts-glow-red) !important;
}
.account-detail {
  border-bottom-color: var(--ts-border) !important;
}
.account-description p {
  color: var(--ts-text-secondary) !important;
}
.account-form .account-feild input,
.account-form .account-feild input.placeholder,
.account-form .phone-num-inter input {
  background-color: #ffffff !important;
  color: #1a1a24 !important;
  border: 1px solid #d0d4e0 !important;
  border-radius: 30px !important;
}
.account-form .account-feild input:focus,
.account-form .phone-num-inter input:focus {
  border-color: var(--ts-gold) !important;
  box-shadow: 0 0 0 3px var(--ts-gold-dim) !important;
}
.account-form .account-feild input::placeholder,
.account-form .phone-num-inter input::placeholder {
  color: #6c757d !important;
}
.account-form .account-feild input:disabled {
  background-color: #e9ecef !important;
  color: #495057 !important;
}

/* ── Hide Contact Us nav tab ──────────────────────────── */
.sb-sidenav-menu a.nav-link[href="/add_contact_us"],
.sb-sidenav-menu a.nav-link[href*="add_contact_us"],
a.nav-link.step_link_7.step_link {
  display: none !important;
}

/* wallet gradient already set above — no duplicate override */

/* ── Motion: micro-interactions ─────────────────────────── */
.card,
.acivity-details,
.btn,
.no-match-btn a,
.nav-link,
.page-link {
  transition: var(--ts-transition) !important;
}

.btn:active {
  transform: scale(0.98) !important;
}