/* ========================================================================
   AFW MATCH PREDICTIONS PAGE
   templates:
   - match-predictions.php
   ======================================================================== */

/* ========================================================================
   1. ROOT / LAYOUT
   ======================================================================== */

.afw-pr{
  display:grid;
  gap:14px;
  width:100%;
  max-width:760px;
  margin:12px auto 0;
}

.afw-pr .afw-pr-card{
  display:block;
  width:100%;
  min-width:0;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:14px 16px;
}

.afw-pr .afw-pr-head{
  margin:0 0 12px;
  text-align: center;
  font-family:var(--h1-font-family);
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:var(--color-content-heading);
}

/* ========================================================================
   2. CHART
   ======================================================================== */

.afw-pr .afw-pr-card--chart{
  padding:16px;
}

.afw-pr .afw-pr-chartWrap{
  position:relative;
  width:100%;
  min-height:520px;
}

.afw-pr .afw-pr-chartWrap canvas{
  display:block;
  width:100% !important;
  height:520px !important;
}

/* ========================================================================
   3. COMPARISON / SNAPSHOTS / LEAGUE
   ======================================================================== */

.afw-pr .afw-pr-compList{
  display:grid;
  gap:16px;
  min-width:0;
}

.afw-pr .afw-pr-comp{
  min-width:0;
}

.afw-pr .afw-pr-comp__top{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 52px;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.afw-pr .afw-pr-comp__pct{
  font-family:var(--h1-font-family);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
}

.afw-pr .afw-pr-comp__pct--left{
  text-align:left;
}

.afw-pr .afw-pr-comp__pct--right{
  text-align:right;
}

.afw-pr .afw-pr-comp__label{
  text-align:center;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:var(--color-content-heading);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.afw-pr .afw-pr-comp__bar{
  position:relative;
  display:flex;
  width:100%;
  height:8px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.afw-pr .afw-pr-comp__barHome{
  display:block;
  height:100%;
  background:#49a8f2;
}

.afw-pr .afw-pr-comp__barAway{
  display:block;
  height:100%;
  background:#9adf24;
}

/* ========================================================================
   4. TOP ROW / WINNER / PILL
   ======================================================================== */

.afw-pr .afw-pr-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}

.afw-pr .afw-pr-kv{
  min-width:0;
  flex:1 1 auto;
}

.afw-pr .afw-pr-k{
  margin:0 0 6px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.55);
}

.afw-pr .afw-pr-v{
  font-family:var(--h1-font-family);
  font-size:18px;
  line-height:1.2;
  font-weight:700;
  color:var(--color-content-heading);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.afw-pr .afw-pr-note{
  font-family:var(--h5-font-family, var(--h1-font-family));
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  color:rgba(255,255,255,.55);
}

.afw-pr .afw-pr-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:8px 12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.90);
  white-space:nowrap;
}

.afw-pr .afw-pr-pill__k{
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.60);
  white-space:nowrap;
}

.afw-pr .afw-pr-pill__v{
  font-family:var(--h1-font-family);
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  color:var(--color-content-heading);
  white-space:nowrap;
}

/* ========================================================================
   5. PERCENTAGES
   ======================================================================== */

.afw-pr .afw-pr-pcts{
  display:grid;
  gap:12px;
}

.afw-pr .afw-pr-pct{
  display:grid;
  gap:7px;
  min-width:0;
}

.afw-pr .afw-pr-pct__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.afw-pr .afw-pr-pct__lbl{
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.82);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.afw-pr .afw-pr-pct__val{
  flex:0 0 auto;
  font-family:var(--h1-font-family);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  color:var(--color-content-heading);
  white-space:nowrap;
}

.afw-pr .afw-pr-bar{
  position:relative;
  width:100%;
  height:8px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.afw-pr .afw-pr-bar__in{
  display:block;
  height:100%;
  background:rgba(255,255,255,.55);
}

/* ========================================================================
   6. MINI STATS GRID
   ======================================================================== */

.afw-pr .afw-pr-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.afw-pr .afw-pr-mini{
  min-width:0;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding:10px 11px;
}

.afw-pr .afw-pr-mini__k{
  margin:0 0 6px;
  font-size:11px;
  line-height:1.25;
  font-weight:700;
  color:rgba(255,255,255,.55);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.afw-pr .afw-pr-mini__v{
  font-family:var(--h1-font-family);
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  color:var(--color-content-heading);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ========================================================================
   7. ADVICE
   ======================================================================== */

.afw-pr .afw-pr-advice{
  font-size:13px;
  line-height:1.5;
  font-weight:600;
  color:rgba(255,255,255,.82);
}

/* ========================================================================
   8. PREDICTION H2H
   uses existing global styles:
   - .afw-h2h-list
   - .afw-h2h-list--upcoming
   - .afw-h2h-card
   - .afw-h2h-card__*
   ======================================================================== */

.afw-pr .afw-h2h-list{
  display:grid;
  gap:14px;
}

.afw-pr .afw-h2h-card{
  margin:0;
}

/* ========================================================================
   9. RESPONSIVE
   ======================================================================== */

@media (max-width:767px){
  .afw-pr{
    gap:12px;
    margin-top:10px;
  }

  .afw-pr .afw-pr-card{
    padding:12px;
  }

  .afw-pr .afw-pr-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .afw-pr .afw-pr-pill{
    width:100%;
    justify-content:space-between;
  }

  .afw-pr .afw-pr-grid{
    grid-template-columns:1fr;
  }

  .afw-pr .afw-pr-chartWrap{
    min-height:420px;
  }

  .afw-pr .afw-pr-chartWrap canvas{
    height:420px !important;
  }
}

@media (max-width:600px){
  .afw-pr .afw-pr-comp__top{
    grid-template-columns:46px minmax(0,1fr) 46px;
    gap:8px;
  }

  .afw-pr .afw-pr-comp__pct{
    font-size:12px;
  }

  .afw-pr .afw-pr-comp__label{
    font-size:12px;
  }

  .afw-pr .afw-pr-chartWrap{
    min-height:340px;
  }

  .afw-pr .afw-pr-chartWrap canvas{
    height:340px !important;
  }
}

@media (max-width:520px){
  .afw-pr .afw-pr-v{
    font-size:16px;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }

  .afw-pr .afw-pr-pct__lbl,
  .afw-pr .afw-pr-mini__k,
  .afw-pr .afw-pr-comp__label{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }

  .afw-pr .afw-pr-chartWrap{
    min-height:300px;
  }

  .afw-pr .afw-pr-chartWrap canvas{
    height:300px !important;
  }
}