/*
  bet-cards-theme.css
  Thème adapté au style 'ligues' (fond sombre, accents néon, glassy cards)
  -> Charger les styles `ligues` (variables :root) AVANT ce fichier pour profiter des variables.
  Fallbacks sont fournis si les variables ne sont pas présentes.
*/

:root{
  /* fallbacks si le thème principal n'est pas chargé */
  --c-bg: #0b0f14;
  --c-card: #111823;
  --c-card-alt: #0f1420;
  --c-accent: #00e7d6;      /* teal */
  --c-accent-2: #6ec2ff;    /* blue */
  --c-accent-3: #00e792;
  --c-text: #eef3f7;
  --c-text-dim: #b7c3cf;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ----- Container ----- */
.bet-cards-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
  width:100%;
}

/* ----- Carte ----- */
.bet-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 100%;
  margin: 0;
  color: var(--c-text);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.bet-total{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 100%;
  margin: 0;
  color: var(--c-text);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.bet-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,0.10);
}

.bet-total:hover{
  border-color: rgba(255,255,255,0.10);
}

.bet-card-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.bet-card-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:12px;
  background: rgba(255,255,255,0.02);
  padding:6px;
}

.bet-card-title{ flex:1; }

.bet-card-competition{
  font-size:1.05rem;
  font-weight:700;
  color:var(--c-text);
  margin:0 0 4px 0;
}

.bet-card-date{
  font-size:0.9rem;
  color:var(--c-text-dim);
  margin:0;
}

.bet-card-remove{
  background: rgba(253, 0, 0, 0.08);
  color:var(--c-text);
  border:1px solid rgba(255,255,255,0.08);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:1rem;
  transition: background-color .12s ease, transform .12s ease;
}

.bet-card-remove:hover{
  background: rgba(255, 55, 55, 0.08);
}

/* ----- Détails ----- */
.bet-card-details{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}

.bet-detail-item{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  padding:12px;
  border-radius:12px;
}

.bet-detail-label{
  font-size:0.85rem;
  color:var(--c-text-dim);
  margin:0 0 6px 0;
}

.bet-detail-value{
  font-size:1rem;
  font-weight:700;
  color:var(--c-text);
  margin:0;
}

/* ----- Caution / Avertissement ----- */
.bet-card-caution{
  background: linear-gradient(180deg, rgba(255,193,7,0.06), rgba(255,193,7,0.02));
  border: 1px solid rgba(255,193,7,0.10);
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}

.bet-card-caution-title{
  font-size:1rem;
  font-weight:700;
  color: #ffd966; /* un jaune doux qui reste lisible sur fond sombre */
  margin:0 0 8px 0;
}

.bet-card-caution-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

/* ----- Footer / Résumé ----- */
.bet-card-footer{
  border-top:1px solid rgba(255,255,255,0.04);
  padding-top:12px;
}

.social-media{
  display:flex; gap:16px; justify-content:center; margin: 1.5% 0 1% 0;
}
.social-media a{
  display:inline-block; width:24px; height:24px; color:var(--c-text-dim); transition:color .2s ease
}
.social-media a:hover{ color:var(--c-accent) }
.social-media svg{ width:100%; height:100%; fill:currentColor }

.bet-card-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.match-result-display{ text-align:right; }

.match-result-value{
  font-size:1.15rem;
  font-weight:800;
  color:var(--c-accent-2);
}

.bet-card-potential{
  font-size:1.15rem;
  font-weight:800;
  color:var(--c-accent);
}

.bet-card-total{
  font-size:0.95rem;
  color:var(--c-text-dim);
}

/* ----- Badges / Statuts ----- */
.bet-status-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:12px;
  font-size:0.75rem;
  font-weight:700;
  color:var(--c-text);
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
}

.bet-status-active{ background: linear-gradient(135deg, rgba(0,231,214,.06), rgba(110,194,255,.04)); color: var(--c-text); }
.bet-status-pending{ background: rgba(255,193,7,0.04); color: #ffd966; }

/* ----- Gains ----- */
.gain-positive{ color: var(--c-accent-3); font-weight:800; }
.gain-negative{ color: #ff6b6b; font-weight:800; }
.gain-pending{ color: #ffd966; font-weight:800; }
.gain-potential{ color: var(--c-accent-2); font-weight:800; }

.bet-card-result{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.bet-card-amount{ font-size:1.05rem; font-weight:800; }

/* ----- Section VOS PARIS ----- */
#vos-paris-section{ margin-top:40px; }
#vos-paris-section h3{
  font-size:1.5rem; font-weight:700; color:var(--c-text); margin-bottom:20px; text-align:center;
}

.empty-bets-message,
.loading-message,
.error-message{
  text-align:center;
  padding:36px;
  font-size:1.05rem;
  color:var(--c-text-dim);
}

.empty-bets-message{
  background: rgba(255,255,255,0.01);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
}

/* ----- Input / Champ de mise (style calqué sur ligues) ----- */
.bet-input{
  width:100%; max-width:420px; height:4.8rem; font-size:2.6rem; font-weight:900; text-align:center; padding:.4rem 1rem;
  border-radius:12px; border:2.5px solid var(--c-accent-2); outline:none; background:#08121d; color:var(--c-text); margin-bottom:12px;
}
.no-spinner::-webkit-outer-spin-button,.no-spinner::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.no-spinner{ -moz-appearance:textfield }

/* ----- Éffets légers et utilitaires ----- */
.has-light{ position:relative; overflow:hidden; }
.has-light::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12), transparent 60%); opacity: var(--light-opacity, 0); pointer-events:none; transition: opacity .15s ease; }

/* ----- Animation (apparition) ----- */
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
.bet-card{ animation: fadeInUp .32s cubic-bezier(.2,.9,.2,1); }

/* ----- Responsive ----- */
@media (max-width:768px){
  .bet-cards-container{ grid-template-columns: 1fr; }
  .bet-card-details{ grid-template-columns: 1fr; }
  .bet-card-caution-grid{ grid-template-columns: 1fr; }
  .bet-card-logo{ width:48px; height:48px; }
}

@media (min-width:1200px){
  .bet-cards-container{ grid-template-columns: repeat(3, 1fr); }
}

/* petites améliorations d'accessibilité */
.bet-card, .bet-detail-item, .bet-card-remove{ transition: box-shadow .12s ease, transform .12s ease; }

/* fin du thème */