/* Cards de valores rápidos do modal de depósito — SOMENTE VISUAL.
 *
 * Não mexe em valores, ordem, eventos ou lógica: os botões continuam sendo
 * `.quick-value` com `.quick-badge` e `.active` como o Vue já renderiza.
 * Referência: dourado com glow + selo pílula sobre a borda superior + faixa
 * de brilho (shine sweep) cruzando o card em loop, elegante e discreta.
 *
 * O ::after usa deslocamento do background (não transform/overflow), então o
 * selo — posicionado para fora do botão (top:-9px) — nunca é cortado e o
 * border-radius é respeitado via border-radius:inherit.
 */

.quick-grid {
  gap: 14px 12px;
  margin-bottom: 16px;
  padding-top: 10px; /* respiro para os selos sobre a borda superior */
}

.quick-value {
  overflow: visible;
  border: 1px solid rgba(245, 197, 24, 0.85);
  background: linear-gradient(180deg, rgba(38, 26, 82, 0.42) 0%, rgba(13, 8, 30, 0.55) 100%);
  box-shadow:
    0 0 18px rgba(245, 197, 24, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(0, 0, 0, 0.4);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65), 0 0 14px rgba(255, 255, 255, 0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.quick-value:hover {
  border-color: rgba(255, 224, 138, 1);
  background: linear-gradient(180deg, rgba(38, 26, 82, 0.55) 0%, rgba(13, 8, 30, 0.62) 100%);
  box-shadow:
    0 0 24px rgba(245, 197, 24, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -8px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.quick-value.active {
  border-color: #ffe08a;
  background: linear-gradient(180deg, #2b3763 0%, #1b2347 100%);
  box-shadow:
    0 0 24px rgba(245, 197, 24, 0.5),
    inset 0 0 14px rgba(245, 197, 24, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Selo pílula: mesma cor de fundo do componente, só com mais vida —
   verniz sutil por cima, saturação realçada e glow. Nenhum matiz trocado. */
.quick-badge {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 55%);
  filter: saturate(1.4) brightness(1.08) drop-shadow(0 0 7px rgba(0, 0, 0, 0.45));
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 255, 255, 0.14);
  z-index: 1;
}

/* Faixa de brilho dourada cruzando o card em loop (shine sweep). */
.quick-value::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(245, 197, 24, 0.1) 44%,
    rgba(246, 211, 101, 0.42) 50%,
    rgba(245, 197, 24, 0.1) 56%,
    transparent 62%
  );
  background-size: 280% 100%;
  background-position: 120% 0;
  animation: qv-shine 3.8s ease-in-out infinite;
}

/* Defasagem para a luz não varrer todos os cards ao mesmo tempo. */
.quick-grid .quick-value:nth-child(2)::after { animation-delay: 0.45s; }
.quick-grid .quick-value:nth-child(3)::after { animation-delay: 0.9s; }
.quick-grid .quick-value:nth-child(4)::after { animation-delay: 1.35s; }
.quick-grid .quick-value:nth-child(5)::after { animation-delay: 1.8s; }
.quick-grid .quick-value:nth-child(6)::after { animation-delay: 2.25s; }
.quick-grid .quick-value:nth-child(7)::after { animation-delay: 2.7s; }
.quick-grid .quick-value:nth-child(8)::after { animation-delay: 3.15s; }
.quick-grid .quick-value:nth-child(9)::after { animation-delay: 3.6s; }

@keyframes qv-shine {
  0% { background-position: 120% 0; opacity: 0; }
  8% { opacity: 1; }
  38% { background-position: -20% 0; opacity: 1; }
  52%, 100% { background-position: -20% 0; opacity: 0; }
}

.quick-value.active {
  border-color: #22c55e;
  background: linear-gradient(180deg, #123f2b 0%, #0d2b1f 100%);
  box-shadow:
    0 0 22px rgba(34, 197, 94, 0.5),
    inset 0 0 16px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---------------------------------- bloco de bônus (abaixo dos cards) */

.db-painel {
  margin: 2px 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(34, 197, 94, 0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, #0e3a28 0%, #0a2a1e 100%);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.db-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.db-titulo {
  color: #4ade80;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.db-usar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eef1ff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.db-usar input {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #1a2340;
  border: 1px solid #3b2a70;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.db-usar input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9aa3c7;
  transition: transform 0.15s ease, background 0.15s ease;
}

.db-usar input:checked { background: #16a34a; border-color: transparent; }
.db-usar input:checked::after { transform: translateX(18px); background: #fff; }

.db-valor {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.db-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(74, 222, 128, 0.35);
  color: #c6cdea;
  font-size: 0.85rem;
}

.db-total strong { color: #fff; font-variant-numeric: tabular-nums; }

.db-painel--off { opacity: 0.55; }
.db-painel--off .db-valor, .db-painel--off .db-total { display: none; }

@media (prefers-reduced-motion: reduce) {
  .quick-value::after { animation: none; }
  .quick-value:hover { transform: none; }
}