/* ================================================
   THEME OVERRIDE — Minimalista Claro
   Pisa style.css, blackjack.css, chat-enhanced.css
   ================================================ */

:root {
  --bg:     #eeebe5;
  --bg2:    #e5e1d9;
  --bg3:    #dbd6cc;
  --white:  #f7f4ef;
  --ink:    #1a1a1a;
  --ink2:   #555;
  --ink3:   #999;
  --border: #cdc9c0;
  --live:   #22c55e;
  --r:      14px;
  --rsm:    8px;
  --sh:     0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.05);
  --shmd:   0 2px 8px rgba(0,0,0,.09), 0 8px 24px rgba(0,0,0,.07);
}

/* ── BODY / BASE ── */
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
}

/* =============================================
   TIENDA — card-premium
   ============================================= */
.card-premium {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh) !important;
  transition: transform .2s, box-shadow .2s !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  overflow: hidden !important;
  min-height: unset !important;
}
.card-premium:hover {
  transform: translateY(-2px) !important;
  border-color: var(--ink) !important;
  box-shadow: var(--shmd) !important;
}

.card-content {
  flex: 1 !important;
  padding: 1.4rem 1.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .6rem !important;
  background: transparent !important;
}

.card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.3px !important;
}

.card-description {
  font-size: .82rem !important;
  color: var(--ink2) !important;
  line-height: 1.55 !important;
}

.card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
}
.card-features li {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  font-size: .8rem !important;
  color: var(--ink2) !important;
}
.card-features li svg {
  color: var(--ink3) !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
.feature-icon {
  color: var(--ink3) !important;
}

.btn-premium {
  width: 100% !important;
  padding: .75rem 1rem !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rsm) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  margin-top: auto !important;
}
.btn-premium:hover {
  background: #1a1a1a !important;
  opacity: .8 !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-premium:disabled, .btn-premium.disabled {
  background: var(--bg3) !important;
  color: var(--ink3) !important;
  opacity: 1 !important;
}

.card-image {
  flex-shrink: 0 !important;
  width: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg2) !important;
  padding: 1.2rem !important;
  border-left: 1px solid var(--border) !important;
}
.card-image img, .card-image svg {
  max-width: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;
  filter: none !important;
}

.card-stock {
  position: absolute !important;
  top: .7rem !important;
  right: .7rem !important;
  padding: .25rem .6rem !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  color: var(--ink3) !important;
  text-transform: uppercase !important;
  backdrop-filter: none !important;
}
/* sin stock */
.card-stock[style*="ff4444"] {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

.badge {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

.image-wrapper {
  position: relative !important;
}

/* shop-grid layout */
.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 14px !important;
}

@media(max-width:768px) {
  .card-premium { flex-direction: column !important; }
  .card-image { width: 100% !important; border-left: none !important; border-top: 1px solid var(--border) !important; min-height: 160px !important; }
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* =============================================
   CHAT GLOBAL
   ============================================= */
.chat-global {
  background: var(--bg2) !important;
}

.chat-layout {
  padding: 60px 20px !important;
}

.chat-box {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shmd) !important;
  clip-path: none !important;
  min-height: unset !important;
}

.chat-messages-header {
  padding: 12px 20px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.chat-messages-container {
  height: 420px !important;
  background: var(--white) !important;
  padding: 16px 20px !important;
  gap: 10px !important;
}
.chat-messages-container::-webkit-scrollbar { width: 6px !important; }
.chat-messages-container::-webkit-scrollbar-track { background: var(--bg) !important; }
.chat-messages-container::-webkit-scrollbar-thumb { background: var(--border) !important; }

/* Mensajes */
.chat-message {
  display: flex !important;
  gap: 10px !important;
  opacity: 1 !important;
  transform: none !important;
}
.chat-message-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.chat-message-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  clip-path: none !important;
  box-shadow: none !important;
  image-rendering: auto !important;
}
.chat-message-username {
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: .82rem !important;
  text-shadow: none !important;
  text-transform: none !important;
  font-family: 'DM Sans', sans-serif !important;
}
.chat-message-text {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  color: var(--ink) !important;
  font-size: .88rem !important;
  padding: 8px 12px !important;
  clip-path: none !important;
  box-shadow: none !important;
  line-height: 1.55 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.chat-message-own .chat-message-text {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
.chat-message-time {
  font-size: .68rem !important;
  color: var(--ink3) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.chat-system-message {
  text-align: center !important;
  padding: 10px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  color: var(--ink3) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
}
.chat-message-image {
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  box-shadow: none !important;
  margin: 6px 0 !important;
  max-width: 320px !important;
  overflow: hidden !important;
}

/* Input area */
.chat-input-container {
  padding: 14px 20px !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}
.chat-input {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .88rem !important;
  clip-path: none !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
}
.chat-input:focus {
  border-color: var(--ink) !important;
  box-shadow: none !important;
  outline: none !important;
}
.chat-send-button {
  padding: 10px 20px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rsm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-transform: none !important;
  clip-path: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .chat-send-button {
  background: #e8e8e8 !important;
  color: #111 !important;
}
.chat-send-button:hover:not(:disabled) {
  opacity: .8 !important;
  transform: none !important;
  box-shadow: none !important;
}
.chat-theme-btn, .chat-toolbar-btn {
  width: 32px !important;
  height: 32px !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
  color: var(--ink2) !important;
  clip-path: none !important;
}
.chat-theme-btn:hover, .chat-toolbar-btn:hover {
  background: var(--bg2) !important;
  transform: none !important;
}
.chat-connection-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--border) !important;
}
.chat-connection-indicator.connected {
  background: var(--live) !important;
}
.chat-online-count {
  color: var(--ink3) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .8rem !important;
}
.chat-login-message {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 2rem !important;
  text-align: center !important;
}
.chat-login-message h3 {
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  text-transform: none !important;
  font-size: 1.1rem !important;
}
.chat-login-button {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rsm) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.chat-image-preview {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
}
.chat-error-message {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--rsm) !important;
  color: #dc2626 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.chat-mod-button {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  border-radius: var(--rsm) !important;
}

/* =============================================
   BLACKJACK
   ============================================= */

/* Reset todas las variables del casino */
.blackjack-section,
.blackjack-table,
.blackjack-wrapper,
.bj-table {
  background: var(--bg2) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Las cards del juego (cartas físicas) */
.playing-card, .card, .bj-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
  color: var(--ink) !important;
}
.playing-card.hearts, .playing-card.diamonds,
.card.hearts, .card.diamonds,
.bj-card[data-suit="hearts"], .bj-card[data-suit="diamonds"] {
  color: #dc2626 !important;
}

/* Dealer / player areas */
.dealer-area, .player-area,
.bj-dealer, .bj-player {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rsm) !important;
}

/* Result message */
#resultMessage,
.result-message {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .9rem !important;
}
#resultMessage[style*="background"],
.result-message[style*="background"] {
  border-radius: var(--rsm) !important;
}

/* Blackjack buttons — los btn-start/hit/stand ya están en index.html 
   pero blackjack.css puede pisar, así que los reseteamos aquí */
.blackjack-section .game-btn,
#btnStartGame, #btnHit, #btnStand, #btnNewGame {
  clip-path: none !important;
  box-shadow: none !important;
  font-family: 'DM Sans', sans-serif !important;
  text-transform: uppercase !important;
}
#btnStartGame {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
}
#btnHit {
  background: #dcfce7 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}
#btnHit:not(:disabled):hover {
  background: #16a34a !important;
  color: #fff !important;
}
#btnStand {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}
#btnStand:not(:disabled):hover {
  background: #dc2626 !important;
  color: #fff !important;
}
#btnNewGame {
  background: var(--bg3) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

/* Bet input */
#betAmount {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: var(--rsm) !important;
}

/* Player points display */
#playerPointsValue {
  color: var(--ink) !important;
  font-family: 'Unbounded', sans-serif !important;
}

/* =============================================
   HEADER / NAVBAR override (auth.js inyecta estilos)
   ============================================= */
.user-menu {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shmd) !important;
  color: var(--ink) !important;
}
.user-menu * { color: var(--ink) !important; }
.user-menu button, .user-menu a {
  background: transparent !important;
  color: var(--ink) !important;
}
.user-menu button:hover, .user-menu a:hover {
  background: var(--bg2) !important;
}
.user-menu-overlay {
  background: rgba(0,0,0,.3) !important;
}

/* =============================================
   RANKING TABLE override — infinite-ranking.js
   puede inyectar estilos dark
   ============================================= */
#rankingBody tr {
  background: var(--white) !important;
}
#rankingBody tr:hover {
  background: var(--bg2) !important;
}
#rankingBody td {
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
/* ══════════════════════════════════════════════
   DARK MODE FIXES — theme-override
   ══════════════════════════════════════════════ */

/* Tienda — botón Obtener Ahora */
[data-theme="dark"] .btn-premium {
  background: #e8e8e8 !important;
  color: #111 !important;
}
[data-theme="dark"] .btn-premium:hover {
  background: #fff !important;
  opacity: 1 !important;
}
[data-theme="dark"] .btn-premium:disabled,
[data-theme="dark"] .btn-premium.disabled {
  background: #2a2a2a !important;
  color: #555 !important;
}

/* Tienda — cards */
[data-theme="dark"] .card-premium {
  background: #181818 !important;
  border-color: #2a2a2a !important;
}
[data-theme="dark"] .card-content {
  background: #181818 !important;
}
[data-theme="dark"] .card-title {
  color: #f0f0f0 !important;
}
[data-theme="dark"] .card-description {
  color: #999 !important;
}
[data-theme="dark"] .card-features li {
  color: #888 !important;
}
[data-theme="dark"] .card-image {
  background: #222 !important;
  border-left-color: #2a2a2a !important;
}
[data-theme="dark"] .card-stock {
  background: #222 !important;
  border-color: #333 !important;
  color: #888 !important;
}

/* Chat — fix botón Enviar y action buttons */
[data-theme="dark"] .chat-send-button {
  background: #e8e8e8 !important;
  color: #111 !important;
}
[data-theme="dark"] .chat-send-button:hover {
  background: #fff !important;
  opacity: 1 !important;
}
[data-theme="dark"] .chat-message-text {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .chat-message-username {
  color: #f0f0f0 !important;
}
[data-theme="dark"] .chat-messages-container {
  background: #141414 !important;
}
[data-theme="dark"] .chat-messages-header {
  background: #181818 !important;
  border-bottom-color: #2a2a2a !important;
}
[data-theme="dark"] .chat-input-container {
  background: #181818 !important;
  border-top-color: #2a2a2a !important;
}
[data-theme="dark"] .chat-input {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .chat-input::placeholder {
  color: #555 !important;
}
[data-theme="dark"] .chat-box {
  background: #181818 !important;
  border-color: #2a2a2a !important;
}