/* ===============================
   Match Stats — Widget container
   (alineado con .h2h-widget)
================================= */
.ms-widget{
    font-family:'Inter',sans-serif;
    max-width:960px;
    margin:40px auto;
    padding:10px;
    background:#1f1f1f;
    border-radius:12px;
    color:#eee;
  }
  
  /* ===============================
     Header (consistente con .h2h-match-header)
  ================================= */
  .ms-header{
    background:#1f1f1f;
    padding:20px 16px;
    border-bottom:1px solid #333;
    border-radius:0 0 10px 10px;
    max-width:960px;
    margin:0 auto 32px;
    text-align:center;
    position:relative;
    z-index:10;
    transition:all .3s ease-in-out;
  }
  .ms-header-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    flex-shrink:0;
    margin-bottom:8px;
  }
  .ms-header-row .ms-badge{
    max-height:36px;
    object-fit:contain;
  }
  .ms-header-row .ms-team{
    font-size:1rem;
    font-weight:600;
    color:#fff;
  }
  .ms-header-row .ms-vs{
    font-size:.95rem;
    color:#ccc;
    font-weight:500;
  }
  .ms-sub{
    font-size:.9rem;
    color:#aaa;
  }
  @media (max-width:768px){
    .ms-header{ position:sticky; top:0; z-index:1000; border-radius:0; border-bottom:2px solid #333; box-shadow:0 2px 4px rgba(0,0,0,.4); }
    .ms-header-row{ flex-wrap:nowrap; overflow-x:auto; justify-content:center; }
  }
  
  /* ===============================
     Section titles (igual a .h2h .section-title)
  ================================= */
  .ms-title,
  .ms-widget .section-title{
    background:#262626;
    color:#d1d1d1;
    padding:10px 16px;
    border-radius:6px;
    margin:32px 0 24px;
    font-size:1.05rem;
    text-align:center;
    font-weight:400;
    box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  
  /* ===============================
     Card (contenedor neutro en dark)
  ================================= */
  .ms-card{
    background:#1f1f1f;
    border:1px solid #2b2b2b;
    border-radius:12px;
    padding:16px;
  }
  
  /* ===============================
     Tabla base (alineada a .h2h-table)
  ================================= */
  .ms-table{
    width:100%;
    border-collapse:collapse;
    margin-top:6px;
    font-size:.95rem;
    text-align:center;
  }
  .ms-table th,
  .ms-table td{
    padding:12px 8px;
    border-bottom:1px solid #444;
    vertical-align:middle;
  }
  .ms-table th{ color:#ccc; font-weight:600; }
  .ms-table td{ background:#222; color:#eee; }
  .ms-table .ms-label{ color:#ccc; font-weight:500; }
  .ms-table .ms-strong{ font-weight:800; color:#eee; }
  .ms-table .ms-big{ font-weight:800; font-size:1.1rem; color:#eee; }
  .ms-split td{ border-bottom:2px solid #3a3a3a; }
  
  /* ===============================
     Stats & Form: last 10 matches
  ================================= */
  .ms-statsform .ms-teams-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
  }
  .ms-statsform .ms-col{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#fff;
  }
  .ms-statsform .ms-col .ms-badge{
    max-height:28px; object-fit:contain;
  }
  @media (max-width:768px){
    .ms-statsform .ms-col .ms-badge{ max-height:24px; }
  }
  
  /* ===============================
     Prediction: Who scores first?
     (barra y porcentajes en dark)
  ================================= */
  .ms-pred .ms-pred-row{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .ms-pred .ms-side{
    width:160px; text-align:center;
  }
  .ms-pred .ms-side .ms-badge{
    height:24px; width:auto; object-fit:contain; margin-bottom:4px;
  }
  .ms-pred .ms-pct{
    font-weight:800; font-size:1.5rem; color:#eee;
  }
  .ms-pred .ms-note{
    font-size:.85rem; color:#bbb;
  }
  .ms-bar{
    position:relative; flex:1; height:16px;
    background:#333; border-radius:999px; overflow:hidden; display:flex;
    border:1px solid #444;
  }
  .ms-bar-home{ background:#27ae60; }
  .ms-bar-away{ background:#c0392b; }
  
  /* ===============================
     Match Odds (1X2) — chips en dark
  ================================= */
  .ms-odds .ms-odds-row{
    display:grid;
    grid-template-columns: 1fr repeat(3,120px) 1fr;
    gap:10px; align-items:center;
  }
  .ms-odds .ms-teamblock{
    display:flex; align-items:center; gap:8px; justify-content:center; color:#fff; font-weight:600;
  }
  .ms-odds .ms-teamblock .ms-badge{ height:24px; width:auto; object-fit:contain; }
  .ms-odds .ms-oddblock{ text-align:center; }
  .ms-odds .ms-oddlabel{ display:block; font-size:.8rem; color:#bbb; margin-bottom:4px; }
  .ms-odds .ms-odd{
    display:inline-block; min-width:54px; padding:8px 10px;
    background:#222; border:1px solid #3a3a3a; border-radius:999px;
    font-weight:800; color:#eee; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .ms-odds-note{ margin-top:8px; text-align:center; color:#aaa; font-size:.85rem; }
  @media (max-width:768px){
    .ms-odds .ms-odds-row{ grid-template-columns:1fr 1fr 1fr; }
  }
  
  /* ===============================
     Players Performance (dos columnas)
  ================================= */
  .ms-pp .ms-pp-row{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .ms-pp .ms-pp-col{}
  .ms-pp .ms-pp-team{
    display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:8px; color:#fff;
  }
  .ms-pp .ms-pp-team .ms-badge{ height:24px; width:auto; object-fit:contain; }
  .ms-pp .ms-pp-subtitle{
    text-align:center; letter-spacing:2px; margin:8px 0; color:#d1d1d1; font-weight:600;
  }
  .ms-pp .ms-pp-item{
    display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;
    padding:10px 0; border-top:1px solid #3a3a3a;
  }
  .ms-pp .ms-pp-item:first-of-type{ border-top:0; }
  .ms-pp .ms-pp-photo{
    width:36px; height:36px; object-fit:cover; border-radius:6px;
    background:#222; border:1px solid #3a3a3a;
  }
  .ms-pp .ms-pp-name{ font-weight:600; color:#eee; }
  .ms-pp .ms-pp-value{ font-weight:800; color:#eee; }
  .ms-pp .ms-muted{ color:#999; text-align:center; }
  @media (max-width:768px){
    .ms-pp .ms-pp-row{ grid-template-columns:1fr; }
  }
  
  /* ===============================
     Utilidades y accesibilidad
  ================================= */
  .ms-hidden{ display:none !important; }
  .ms-widget :where(a,button,[role="button"],li){ outline:none; }
  .ms-widget :where(a,button,[role="button"],li):focus-visible{
    box-shadow:0 0 0 3px rgba(0,123,255,.35); border-radius:6px;
  }
  
  /* ===============================
     Compatibilidad tamaños de logos
     (evita overrides del theme)
  ================================= */
  .ms-widget img.ms-badge{
    height:24px !important; max-height:24px !important; width:auto !important; max-width:none !important;
    object-fit:contain; display:inline-block; vertical-align:middle;
  }
  .ms-header-row img.ms-badge{ height:36px !important; max-height:36px !important; }
  @media (max-width:768px){
    .ms-widget img.ms-badge{ height:20px !important; max-height:20px !important; }
    .ms-header-row img.ms-badge{ height:32px !important; max-height:32px !important; }
  }