:root {
  --bg: #1f2223;           
  --bg-2: #181a1b;         
  --text: #e2e8f0;         
  --muted: #94a3b8;        
  --border: #383d3f;       
  --shadow-sm: 0 6px 18px rgba(0,0,0,.35);
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
p{color:var(--text) !important;}
.text-dark,.table th, label{color:var(--text) !important;}

.text-muted, .small, small { color: var(--muted) !important; }
.form-control::placeholder, textarea::placeholder { color: var(--muted) !important; }

.bg-white,  .bg-body, footer.bg-white, .vip-progress-box {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}
.bg-dark, .navbar-dark, header.bg-dark { 
  color: var(--text) !important;
}
.bg-darks,.bg-light { background: var(--bg) !important; color:var(--text) !important; }
.bg-warning { background-color: #a57400 !important; color: var(--text) !important; }

hr, .border, .border-top, .border-end, .border-bottom, .border-start,
.table, .table *,
.card, .list-group, .dropdown-menu, .modal-content, #sidebar {
  border-color: var(--border) !important;
}

.shadow, .shadow-sm, .shadow-lg, .dropdown-menu, .modal-content, .card {
  box-shadow: var(--shadow-sm) !important;
}

header .btn-light, .btn-light, .btn-outline-secondary, .btn btn-outline-dark {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] #amountToPay,
html[data-theme="dark"] #walletAddress {
  background: var(--bg-2) !important;     
}

header .btn-light, .btn-light, .btn btn-outline-dark:hover{  background: var(--bg) !important;
}

#sidebar {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}
#sidebar .nav-link {
  color: var(--text) !important;
}
#sidebar .nav-link:hover {
  background: var(--bg) !important;
  color:var(--text) !important;
}
#sidebar .nav-link.active {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.icon-btn {

  color: var(--text);

}

.icon-btn.logout-hover:hover {
  background-color: var(--bg) !important;
}
.icon-btn:hover {
  background-color: var(--bg) !important;
}

.card{
  background: var(--bg-2) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .method-option img {
  background: var(--bg-2) !important;            
}

html[data-theme="dark"] .method-option > div[style*="position: absolute"][style*="bottom: 0"]  {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .method-option > div[style*="position: absolute"][style*="bottom: 0"] strong {
  color: var(--text) !important;                 
}

.form-control, .form-select, .form-check-input, input, select, textarea {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .form-switch .form-check-input{
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-image: var(--bs-form-switch-bg) !important; 
  background-repeat: no-repeat !important;
  background-position: right center !important; 
}

html[data-theme="dark"] .form-switch .form-check-input:checked{
  background-color: #28cb69 !important;
  background-position: left center !important;           
}

.modal-content {
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal-header, .modal-footer {
  border-color: var(--border) !important;
}

.ticker-shell { background:var(--bg-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.search-wrapper { background: var(--bg-2) !important; }

.btn-success {
    background-color: var(--darkreader-background-005685, #00456a) !important;
    border-top-color: var(--darkreader-border-ffffff, #303436) !important;
    border-right-color: var(--darkreader-border-ffffff, #303436) !important;
    border-bottom-color: var(--darkreader-border-ffffff, #303436) !important;
    border-left-color: var(--darkreader-border-ffffff, #303436) !important;
    color: var(--text) !important;
}
.btn-success:hover {
    background-color: var(--darkreader-background-ffffff, #181a1b) !important;
    border-top-color: var(--darkreader-border-092643, #7f7669) !important;
    border-right-color: var(--darkreader-border-092643, #7f7669) !important;
    border-bottom-color: var(--darkreader-border-092643, #7f7669) !important;
    border-left-color: var(--darkreader-border-092643, #7f7669) !important;
    color: var(--text) !important;
}

.form-control[type="file"]::file-selector-button {
  background: var(--bg-2) !important; 
  color:var(--text) ;
}
.btn-outline-dark{color:var(--text); border-color:var(--border);}

.table {
  --bs-table-bg: var(--bg-2);
}
.table-sm>:not(caption)>*>* {
    color: var(--text);
}
.table-bordered>:not(caption)>*>* {
    background-color: var(--bg);
}

html[data-theme="dark"] select.form-select {

  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
    none !important;

  background-repeat: no-repeat !important;
  background-position: left .75rem center !important;
  background-size: 16px 12px !important;
}
.vip-chip-small {
    background: var(--bg) !important;
    color: var(--text) !important;
}

.login-box, .register-box {
    background-color: var(--bg-2) !important;
    color: var(--text) !important;
}

.login-box h2, .register-box h2 {
    color: var(--text) !important;
}

.register-link, .login-link {
    color: var(--muted) !important;
}
.register-link a, .login-link a {
    color: var(--text) !important;
}
.register-link a span, .login-link a span {
    color: var(--muted) !important;
}
.register-link a:hover span, .login-link a:hover span {
    text-decoration: underline;
}

.close-btn {
    color: var(--muted) !important;
}
.close-btn:hover {
    color: var(--text) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--muted) !important;  
}
.category-box .card-title, .product-box .card-title {
    color: var(--text) !important;
}