/* Panther Storefront v4 — rediseño "Futurista Gaming": azul eléctrico + morado,
   detalles neón, glassmorphism, brillos. Capa aditiva sobre style-v3.css: redefine
   las mismas variables de color (--p-gold, --p-gold-soft, --p-line-gold) que ya usan
   ~60 selectores en style-v3.css, así el nuevo esquema se aplica sin tocar esas reglas
   una por una. Se carga DESPUÉS de style-v3.css en el layout para ganar la cascada.
   El sitio viejo (.txt) no carga este archivo — cero impacto ahí. */

.v2-shell {
  --p-gold: #4f8dff;
  --p-gold-soft: #8b5cf6;
  --p-line-gold: rgba(79, 141, 255, .35);
  --p-neon: #22d3ee;
  --p-neon-glow: 0 0 24px rgba(34, 211, 238, .55), 0 0 3px rgba(34, 211, 238, .9);
  --p-glass-bg: rgba(17, 24, 44, .55);
  --p-glass-border: rgba(148, 163, 255, .18);
  --v2-glow-gold: 0 0 0 1px rgba(79, 141, 255, .4), 0 0 32px rgba(79, 141, 255, .35);
  /* Tercera familia de variables de color, usada en style-v2.css (trust-row, iconos,
     degradés varios) -- naming distinto a --p-gold*, hay que redefinirla tambien. */
  --v2-gold-1: #8b5cf6;
  --v2-gold-2: #4f8dff;
  --v2-gold-3: #22d3ee;
  background:
    radial-gradient(circle at 8% 4%, rgba(79, 141, 255, .16), transparent 26rem),
    radial-gradient(circle at 92% 14%, rgba(139, 92, 246, .16), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(34, 211, 238, .06), transparent 40rem),
    var(--p-bg);
}

/* Vidrio esmerilado en las superficies principales -- glassmorphism real, no solo un tinte. */
.v2-shell .badge,
.v2-shell .hero__assurance span,
.v2-shell .v4-hero-panel,
.v2-shell .client-status__pill,
.v2-shell .v3-game-card__copy,
.v2-shell .account-card,
.v2-shell .wallet-balance-card {
  background: var(--p-glass-bg) !important;
  border-color: var(--p-glass-border) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Brillo neón simétrico (sin desplazamiento) en el botón principal y estados activos --
   misma técnica confirmada contra worldsale.net, ahora en cian en vez de dorado. */
.v2-shell .hero-primary:hover,
.v2-shell button[type="submit"]:hover:not(:disabled),
.v2-shell .v2-popular__card:hover,
.v2-shell .v3-game-card:hover {
  box-shadow: var(--p-neon-glow);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Texto de titulares con un leve degradé azul→morado en vez de dorado plano.
   !important porque style.css (compartido) tiene una regla mas especifica
   (con html[data-theme="dark"] de prefijo) que le gana en cascada normal a
   selectores de igual o mayor especificidad de este archivo. */
.v2-shell .hero--showcase h1 span,
.v2-shell .v2-page-head h1 span {
  background: linear-gradient(120deg, var(--p-gold) 0%, var(--p-gold-soft) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Puntito "en vivo" y acentos puntuales en neón cian en vez de verde/dorado. */
.v2-shell .badge::before {
  background: var(--p-neon);
  box-shadow: 0 0 8px var(--p-neon);
}

/* Misma familia de selectores que style.css agrupa bajo un solo color dorado
   (logo, pastilla de dominio, kickers de sección, toggle de tema, iconos SVG que
   heredan color del padre via currentColor) -- se pasa entera a azul de una vez,
   con !important porque compite con una version de esa misma lista prefijada con
   html[data-theme="dark"] que tiene mas especificidad que un selector .v2-shell simple. */
.v2-shell .logo span,
.v2-shell .domain-pill,
.v2-shell .section-head span,
.v2-shell .panel-head span,
.v2-shell .theme-toggle,
.v2-shell .pack .pack-kicker,
.v2-shell .amount-card b {
  color: var(--p-gold) !important;
}
.v2-shell .domain-pill {
  background: rgba(79, 141, 255, .08) !important;
}
.v2-shell .theme-toggle {
  background: rgba(79, 141, 255, .1) !important;
}

/* ── Unificación de color: style.css (compartido con el sitio viejo) tiene el dorado
   escrito directo en decenas de reglas (#f1b33d / #ffe3a3 / #d9a338), no por variable
   CSS -- por eso redefinir --p-gold arriba no alcanzaba y quedaba una mezcla dorado +
   azul/morado compitiendo. Estas dos capas lo resuelven sin tocar style.css: */

/* 1) Redefine las variables de color que SÍ usa gran parte de style.css via var(...) --
   esto solo/únicamente aplica dentro de .v2-shell, el sitio viejo no lo hereda. */
.v2-shell {
  --gold: #4f8dff;
  --gold-2: #8b5cf6;
  --clean-gold: #4f8dff;
  --clean-green: #22d3ee;
}

/* 2) Los casos que style.css escribe con el color literal (#f1b33d/#ffe3a3/#d9a338)
   en vez de var(...) -- cubiertos selector por selector, misma especificidad que el
   original (con !important donde el original también lo usa). */
.v2-shell .logo__copy,
.v2-shell .badge,
.v2-shell .account-head span,
.v2-shell .account-card>span,
.v2-shell .account-summary span,
.v2-shell .payment-method-box>span,
.v2-shell .profile-info span,
.v2-shell .wallet-balance-card span,
.v2-shell .wallet-history-head span,
.v2-shell .instant-head span,
.v2-shell .account-phase-card span,
.v2-shell .summary-guide b,
.v2-shell .wallet-table th,
.v2-shell .account-link-button,
.v2-shell .instant-game-title span {
  color: var(--gold) !important;
}
.v2-shell .payment.active strong,
.v2-shell .summary-row.phase-row strong {
  color: var(--gold-2) !important;
}
.v2-shell .hero-primary,
.v2-shell .primary,
.v2-shell .tab.active,
.v2-shell .payment.active,
.v2-shell .account-choice button.active,
.v2-shell .account-card button,
.v2-shell .account-summary button,
.v2-shell .saved-id__actions button:first-child,
.v2-shell .wallet-balance-card>button,
.v2-shell .instant-pack button,
.v2-shell .account-phase-card button,
.v2-shell .wallet-topup__chips button.active,
.v2-shell .account-settings-form button {
  background: var(--gold) !important;
  color: #0a1024 !important;
  border-color: var(--gold) !important;
}
.v2-shell .wallet-topup__chips button:hover {
  background: var(--gold) !important;
  color: #0a1024 !important;
}
.v2-shell .account-create-hero,
.v2-shell .customer-account,
.v2-shell .payment-method-box,
.v2-shell .instant-recharge,
.v2-shell .account-phase-card {
  border-color: rgba(79, 141, 255, .22) !important;
}
.v2-shell .account-create-hero a {
  background: var(--gold) !important;
  color: #0a1024 !important;
}
.v2-shell .instant-game-title span {
  background: rgba(79, 141, 255, .16) !important;
}
.v2-shell nav a:hover,
.v2-shell .nav-cta {
  background: rgba(79, 141, 255, .14) !important;
  color: var(--gold-2) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .v2-shell .hero-primary,
  .v2-shell .v2-popular__card,
  .v2-shell .v3-game-card {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .v2-shell .hero-primary:hover {
    transform: translateY(-2px);
  }
  /* Los mensajes de confirmacion (.result.ok) se desvanecen solos -- ver useAutoDismissNotice.
     Los de error nunca llevan esta clase, se quedan fijos hasta que el cliente actua. */
  .v2-shell .result {
    transition: opacity .4s ease;
  }
  .v2-shell .result.fading {
    opacity: 0;
  }
}