/* ─────────────────────────────────────────────────────────────
   SUPATIPS – premium match card  (used with shared/match-card.php)
   Desktop: one clean line per match. Phone: two tidy rows.
   Upload to: public_html/assets/css/match-card.css
   ───────────────────────────────────────────────────────────── */
.match-row.mc{display:grid;position:relative;grid-template-columns:24px 50px minmax(0,1fr) 34px 168px 112px 104px;
  grid-template-areas:none;grid-template-rows:auto;align-items:center;column-gap:12px;row-gap:0;
  padding:10px 14px 10px 10px;margin:6px 8px;background:var(--bg-card);border:1px solid var(--border);
  border-left:3px solid transparent;border-radius:var(--radius,3px);font-family:var(--font-body);
  transition:background .15s,border-color .15s,box-shadow .15s}
.match-row.mc:hover{background:var(--bg-row);border-left-color:var(--accent);box-shadow:0 2px 10px var(--shadow,rgba(0,0,0,.06))}
.match-row.mc.fixture-hidden{display:none}
.match-row.mc.is-live{border-left-color:#c94a4a}
.mc *{box-sizing:border-box}
.mc-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.mc .mc-star{grid-area:auto;position:relative;z-index:2;background:none;border:0;color:var(--dim,var(--muted));font-size:15px;padding:0;cursor:pointer;width:24px;height:24px}
.mc .mc-star:hover,.mc .mc-star.starred{color:var(--amber-text,#c99a2e)}

/* time / status */
.mc-when{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.mc-time{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mc-date{font-size:10.5px;color:var(--muted);margin-top:2px}
.mc-ft{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px}
.mc-live{font-size:12px;font-weight:700;color:#c94a4a;display:inline-flex;align-items:center;gap:4px}
.mc-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#c94a4a;animation:mcp 1.4s infinite}
@keyframes mcp{50%{opacity:.25}}

/* teams */
.mc-teams{display:flex;flex-direction:column;gap:5px;min-width:0}
.mc-team{display:flex;align-items:center;gap:8px;min-width:0}
.mc-team img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.mc-team .team-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.mc-team.win .team-name{font-weight:800}

/* score */
.mc-score{display:flex;flex-direction:column;align-items:center;gap:5px;font-variant-numeric:tabular-nums;line-height:20px}
.mc-score b{font-size:14px;font-weight:800;color:var(--text)}
.mc-score span{color:var(--dim,var(--muted));font-size:13px}
.mc-score small{font-size:9.5px;color:var(--muted);white-space:nowrap;line-height:1;margin-top:-2px}
.mc-score.live b{color:#c94a4a}

/* footer group (one line on desktop) */
.mc-foot{display:contents}

/* odds */
.mc-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mc-o{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius,3px);
  padding:4px 2px;line-height:1.15;background:var(--bg-card)}
.mc-o i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted)}
.mc-o b{font-size:12.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mc-o.on{background:var(--accent);border-color:var(--accent)}
.mc-o.on i{color:rgba(255,255,255,.8)}.mc-o.on b{color:#fff}

/* tip + backup */
.mc-tip,.mc-bk{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;row-gap:3px;min-width:0}
.mc-k{grid-column:1/-1;font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.mc-pick{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0}
.mc-pick b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 5px;border-radius:var(--radius,3px);
  background:var(--bg-league);color:var(--accent);font-size:12.5px;font-weight:800}
.mc-pick em{font-style:normal;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}
.mc-bk .mc-pick em{color:var(--amber-text,#a07a1c);font-weight:700}
.mc-conf{height:4px;border-radius:2px;background:rgba(128,128,128,.22);overflow:hidden;position:relative}
.mc-conf i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:2px}
.mc-pct{font-size:11px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mc-tip .mc-conf{grid-column:1/2;width:52px}
.mc-gm{grid-column:1/-1;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.mc-none{grid-column:1/-1;color:var(--dim,var(--muted))}
.mc-res{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:800;color:#fff}
.mc-tip.won .mc-res{background:#2f6f4e}.mc-tip.lost .mc-res{background:#c94a4a}
.mc-tip.won .mc-pick b{background:#2f6f4e;color:#fff}.mc-tip.lost .mc-pick b{background:rgba(201,74,74,.14);color:#c94a4a}
.mc-bk.won .mc-pick b{background:rgba(47,111,78,.16);color:#2f6f4e}.mc-bk.lost .mc-pick b{background:rgba(201,74,74,.12);color:#c94a4a}

/* medium screens: drop the backup goals line spacing */
@media(max-width:1180px) and (min-width:761px){
  .match-row.mc{grid-template-columns:22px 46px minmax(0,1fr) 30px 150px 100px 92px;column-gap:9px}
  .mc-pick em{font-size:11.5px}
}

/* phones: row 1 = time, teams, score · row 2 = odds | tip | backup */
@media(max-width:760px){
  .match-row.mc{grid-template-columns:44px minmax(0,1fr) 30px;grid-template-areas:"when teams score" "star foot foot";
    column-gap:10px;row-gap:9px;padding:10px 10px 10px 8px;margin:6px}
  .mc-when{grid-area:when}.mc-teams{grid-area:teams}.mc-score{grid-area:score}
  .mc .mc-star{grid-area:star;justify-self:center}
  .mc-foot{grid-area:foot;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.9fr);gap:8px;align-items:center;
    padding-top:8px;border-top:1px dashed var(--border)}
  .mc-o{padding:3px 1px}
  .mc-o b{font-size:12px}
  .mc-tip .mc-conf{width:34px}
  .mc-pick em{font-size:11px}
  .mc-tip .mc-pick em{display:none}
  .mc-gm{display:none}
}

/* ── Show more / show less + "more in league" – site style ── */
.show-more-wrapper{text-align:center;padding:14px 0 6px;margin-top:4px}
.show-more-btn,.show-more-btn:hover,.show-more-btn.expanded{background:var(--bg-card);background-image:none;color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--radius,3px);box-shadow:none;transform:none;
  padding:9px 22px;font:700 13px var(--font-body);letter-spacing:.2px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:background .15s,color .15s}
.show-more-btn:hover{background:var(--accent);color:#fff}
.show-more-btn .show-more-count{font-weight:500;color:var(--muted);font-size:12px}
.show-more-btn:hover .show-more-count{color:rgba(255,255,255,.85)}
.show-more-btn .show-more-icon{font-size:13px}
.show-more-btn.expanded{color:var(--muted);border-color:var(--border)}
.show-more-btn.expanded:hover{background:var(--bg-row);color:var(--text)}
.league-more-indicator,.league-more-indicator:hover{background:none;margin:2px 8px 8px;padding:7px 10px;border:1px dashed var(--border);
  border-radius:var(--radius,3px);color:var(--muted);font:600 12px var(--font-body);text-align:center;cursor:pointer;transition:color .15s,border-color .15s}
.league-more-indicator:hover{color:var(--accent);border-color:var(--accent)}
.league-show-more-btn{background:none;color:var(--accent);border-radius:var(--radius,3px)}

/* 1 or 2 odds boxes (market pages) */
.mc-odds.mc-n2{grid-template-columns:repeat(2,1fr)}
.mc-odds.mc-n1{grid-template-columns:1fr}
.mc-o i{white-space:nowrap}
.mc-pick b{white-space:nowrap;flex-shrink:0}