/* ===============================
 * Best Bets – CSS
 * Inspiré de results_by_date.css
 * =============================== */

/* Hero */
.hero--bb{
  background: linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff;
  padding:48px 16px;
  text-align:center;
  border-radius:0 0 12px 12px;
}

/* Variables locales */
.filter-section,
.results-section{
  --highlight-color:#2a4ba7;
  --highlight-text:#fff;
  --home-odds:#28a745;
  --draw-odds:#ffc107;
  --away-odds:#dc3545;
}

[data-theme="dark"] .filter-section,
[data-theme="dark"] .results-section{
  --highlight-color:#3d63d9;
}

/* =======================
 * Boutons ligues
 * ======================= */
.league-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:8px auto 16px;
}
.league-button{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--background-light);
  border:2px solid var(--primary-color);
  border-radius:10px;
  padding:6px 8px;
  width:70px;
  height:64px;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
}
.league-button img{
  width:35px;
  height:40px;
}
.league-button:hover{
  transform:scale(1.05);
  background:var(--highlight-color);
}
.league-button.selected{
  background:var(--highlight-color);
  border-color:var(--highlight-color);
}

/* =======================
 * Carte de filtres globale
 * ======================= */
.filter-section{
  width:90%;
  margin:0 auto;
  background:var(--background-light);
  border-radius:10px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.filter-container{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding:16px;
}
.filters-card{
  margin:10px auto 0;
  padding:14px;
  max-width:980px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
}

/* Grille des lignes de filtres */
.filter-rows{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.filter-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.filter-row--full{
  grid-column:1 / -1;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

/* Libellés / champs */
.filter-label{
  min-width:190px;
  font-weight:600;
  color:var(--text-color-light);
}
.nice-select{
  appearance:none;
  padding:.5rem 2.2rem .5rem .8rem;
  font-weight:600;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    right .7rem center/16px 16px no-repeat;
}
.nice-input{
  padding:.5rem .8rem;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:#fff;
  font-weight:600;
}
.value-badge{
  min-width:3.2rem;
  padding:.2rem .6rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  font-weight:700;
  text-align:center;
}

/* Rangées avec slider "standard" (si réutilisé ailleurs) */
.filter-row--slider{
  display:grid;
  grid-template-columns:190px 1fr 64px;
  align-items:center;
  gap:10px;
}
.filter-row--slider input[type="range"]{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#e5e7eb;
  -webkit-appearance:none;
  appearance:none;
}
.filter-row--slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #999;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.filter-row--slider input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #999;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* =======================
 * Date selector pills
 * ======================= */
.date-selector{
  display:flex;
  gap:8px;
  justify-content:center;
  padding:14px 8px;
  overflow-x:auto;
}
.date-button{
  background:var(--background-light);
  border:1px solid var(--primary-color);
  border-radius:12px;
  padding:8px 12px;
  min-width:120px;
  text-align:center;
  box-shadow:0 4px 6px rgba(0,0,0,.08);
  cursor:pointer;
  transition:.2s;
}
.date-button .match-count{
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-radius:8px;
  background:var(--highlight-color);
  color:#fff;
  font-weight:700;
  font-size:.8rem;
}
.date-button.selected{
  background:var(--highlight-color);
  border-color:var(--highlight-color);
  color:#fff;
  box-shadow:0 6px 10px rgba(0,0,0,.22);
}
.date-button.selected .match-count{
  background:rgba(0,0,0,.25);
}

/* =======================
 * Cards Best Bets
 * ======================= */
.bb-grid{
  width:90%;
  max-width:1100px;
  margin:18px auto 40px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width:1024px){
  .bb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .bb-grid{
    grid-template-columns:1fr;
  }
}

.bestbet-card{
  background:var(--background-light);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.bestbet-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.bb-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.bb-league{
  font-weight:700;
  color:var(--highlight-color);
}
.bb-date{
  font-size:.9rem;
  color:var(--text-color-dark);
}
.bb-match{
  margin:6px 0;
  font-weight:700;
  color:var(--primary-color);
}
.bb-vs{
  color:var(--highlight-color);
  margin:0 6px;
}
.bb-pick{
  margin:4px 0 8px;
}
.bb-prob{
  font-weight:800;
  color:var(--primary-color);
}
.bb-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.bb-chip{
  font-size:.75rem;
  color:var(--text-color-dark);
  max-width:70%;
  overflow-wrap:anywhere;
}

.pill{
  padding:4px 8px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
}
.pill-safe{
  background:#e8f5e9;
  color:#1b5e20;
  border:1px solid #a5d6a7;
}
.pill-solid{
  background:#e3f2fd;
  color:#0d47a1;
  border:1px solid #90caf9;
}
.pill-tot{
  background:#f3e5f5;
  color:#4a148c;
  border:1px solid #ce93d8;
}

/* Bouton */
.btn.small{
  font-size:.9rem;
  padding:.45rem .8rem;
  border-radius:10px;
}

/* =======================
 * Loading overlay
 * ======================= */
.loading-overlay{
  position:fixed;
  left:0; top:0;
  width:100vw; height:100vh;
  background:rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  flex-direction:column;
  color:var(--highlight-color);
}
.spinner{
  border:8px solid #f3f3f3;
  border-top:8px solid var(--highlight-color);
  border-radius:50%;
  width:54px;
  height:54px;
  animation:spin 1s linear infinite;
  margin-bottom:10px;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* =======================
 * Mobile – filtres / grid
 * ======================= */
@media (max-width:768px){
  .filter-rows{
    grid-template-columns:1fr;
  }
  .filter-row--slider{
    grid-template-columns:1fr;
  }
  .filter-label{
    min-width:0;
    font-size:.8rem;
    line-height:1.25;
    white-space:normal;
  }
}

/* =======================
 * Résultat du pari sur la carte
 * ======================= */
.bb-outcome-line{
  margin-top:0.4rem;
  font-size:0.85rem;
}
.bb-outcome.win{  color:#0b8f3d; font-weight:600; }
.bb-outcome.lose{ color:#c0392b; font-weight:600; }
.bb-outcome.void{ color:#7f8c8d; }
.bestbet-card.outcome-win{  border-color:#0b8f3d; }
.bestbet-card.outcome-lose{ border-color:#c0392b; }

/* =======================
 * Stats par type de pari
 * ======================= */
.bb-type-stats{
  width:100%;
  margin:12px 0 18px;
  padding:12px 14px 10px;
  border-radius:12px;
  background:var(--background-light);
  box-shadow:0 4px 8px rgba(0,0,0,.04);
}
.bb-type-stats h3{
  margin:0 0 8px;
  font-size:0.95rem;
}
.bb-type-chart{
  margin-top:4px;
}
.bb-type-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0;
}
.bb-type-label{
  flex:0 0 190px;
  font-size:0.8rem;
}
.bb-type-bar-wrap{
  flex:1;
  background:var(--border-subtle);
  border-radius:999px;
  overflow:hidden;
  height:8px;
}
.bb-type-bar{
  height:100%;
  background:var(--highlight-color);
  width:0;
  transition:width .4s ease-out;
}
.bb-type-value{
  flex:0 0 80px;
  text-align:right;
  font-size:0.8rem;
}
.bb-type-value .bb-type-volume{
  display:block;
  font-size:0.7rem;
  color:var(--text-muted);
}
.bb-type-empty{
  font-size:0.8rem;
  color:var(--text-muted);
}
.bb-type-suggestions{
  margin-top:10px;
}
.bb-type-suggestion-list{
  margin:0;
  padding-left:16px;
  font-size:0.78rem;
}
.bb-type-suggestion{
  margin:2px 0;
}

/* =======================
 * Bloc avancé Best Bets
 * ======================= */
.bb-advanced-toggle{
  justify-content:flex-end;
}

/* Full-width dans la filters-card */
.bb-advanced{
  grid-column: 1 / -1;     /* ⬅️ plein largeur sous le bouton */
  width:100%;
  margin:6px 0 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(0,0,0,.12);
  background:rgba(255,255,255,0.75);
  transition:max-height .25s ease, opacity .25s ease;
  box-sizing:border-box;
}
[data-theme="dark"] .bb-advanced{
  background:rgba(17,24,39,0.85);
}
.bb-advanced.collapsed{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  overflow:hidden;
}

/* Une seule colonne : 1 slider par ligne */
.bb-advanced-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Chaque row = label au-dessus, slider full width, badge aligné à droite */
.bb-advanced-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}
.bb-advanced-row .filter-label{
  min-width:0;
  text-align:left;
}
.bb-advanced-row .value-badge{
  align-self:flex-end;
}

.bb-advanced-help{
  margin:6px 0 0;
  font-size:0.75rem;
  color:var(--text-muted);
}

/* =======================
 * Sliders avancés – confort
 * ======================= */
.bb-advanced input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:26px;          /* grande zone cliquable */
  cursor:pointer;
  background:transparent;
}

/* Chrome / Edge */
.bb-advanced input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,#2563eb,#22c55e);
}
.bb-advanced input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#2563eb;
  border:2px solid #fff;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
  margin-top:-7px;      /* centre le thumb sur le track */
}

/* Firefox */
.bb-advanced input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,#2563eb,#22c55e);
}
.bb-advanced input[type="range"]::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#2563eb;
  border:2px solid #fff;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
}

/* Mobile : déjà 1 par ligne, juste quelques mini-ajustements */
@media (max-width:768px){
  .bb-advanced-row .filter-label{
    font-size:.8rem;
    line-height:1.3;
  }
  .bb-advanced-row .value-badge{
    font-size:.8rem;
  }
}