/* ================================
   ViserGo v1.1 – Premium Casino Fintech Theme
   ================================= */

/* ===== VARIABLES GLOBALES ===== */
:root {
  --base: 43 96% 56%;          /* Dorado premium */
  --white: 0 0% 100%;
  --black: 220 26% 11%;

  --text-color: hsl(220 15% 85%);
  --muted-text: hsl(220 10% 55%);

  --success: 152 69% 45%;
  --danger: 0 84% 60%;
  --warning: 38 92% 50%;

  --border-color: hsl(220 15% 25%);
  --card-bg: hsl(220 26% 15%);
  --hover-bg: hsl(43 96% 56% / 0.08);
}

/* ===== BASE ===== */
body {
  background: hsl(220 26% 10%);
  color: var(--text-color);
}

.base-color {
  color: hsl(var(--base)) !important;
}

/* ===== CARDS ===== */
.card,
.cookies-card,
.payment-system-list {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

/* ===== BOTONES PREMIUM ===== */
.cookies-btn,
.btn--base {
  background: linear-gradient(135deg,
    hsl(43 96% 56%),
    hsl(38 92% 50%)
  );
  color: #000 !important;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 25px hsl(43 96% 56% / 0.35);
  transition: all 0.3s ease;
}

.cookies-btn:hover,
.btn--base:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 35px hsl(43 96% 56% / 0.55);
}

/* ===== COPIED ANIMATION ===== */
.copied::after {
  background-color: hsl(var(--base));
  color: #000;
  font-weight: 600;
}

/* ===== INPUTS ===== */
.form--control,
.deposit-info__input-select {
  background: hsl(220 26% 12%);
  border: 1px solid var(--border-color);
  color: #fff;
  border-radius: 8px;
}

.form--control:focus {
  border-color: hsl(var(--base));
  box-shadow: 0 0 0 3px hsl(var(--base) / 0.25);
}

/* ===== SELECT2 ===== */
.select2-container--default .select2-selection--single {
  background: hsl(220 26% 13%);
  border-color: var(--border-color) !important;
  color: #fff;
}

.select2-dropdown {
  background: hsl(220 26% 14%);
  border-radius: 10px;
}

.select2-results__option {
  color: #fff;
}

.select2-results__option--highlighted {
  background: hsl(var(--base) / 0.15) !important;
}

.select2-container--open
.select2-selection--single {
  border-color: hsl(var(--base)) !important;
}

/* ===== PAYMENT SYSTEM ===== */
.payment-item {
  background: hsl(220 26% 13%);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.payment-item:hover {
  border-color: hsl(var(--base));
  background: var(--hover-bg);
}

.payment-item:has(.payment-item__radio:checked) {
  border-color: hsl(var(--base));
  background: var(--hover-bg);
}

.payment-item__check {
  border-color: hsl(var(--base));
}

/* ===== TOTAL AMOUNT ===== */
.total-amount {
  border-top: 1px solid hsl(var(--base) / 0.3);
}

/* ===== TOOLTIP POPUP ===== */
.input-popup {
  background: hsl(220 26% 12%);
  border: 1px solid var(--border-color);
}

.input-popup::after {
  border-color: transparent transparent hsl(220 26% 12%) transparent;
}

.input-popup p.success::before {
  color: hsl(var(--success));
}

.input-popup p.error::before {
  color: hsl(var(--danger));
}

/* ===== SCROLLBAR ===== */
.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(
    hsl(43 96% 56%),
    hsl(38 92% 50%)
  );
}

/* ===== TEXT STATES ===== */
.text--success { color: hsl(var(--success)) !important; }
.text--danger  { color: hsl(var(--danger)) !important; }
.text--warning { color: hsl(var(--warning)) !important; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .cookies-card {
    border-radius: 0;
  }
}