/* ============================================================================
   FOOTBALL DATA — overrides / additions on top of fdp-skin.css
   Unified match row (desktop row + mobile card), live status, finished note,
   sticky standings columns + mobile scroll hint, ad slots, misc.
   All namespaced under .fdp-root and token-driven.
   ========================================================================== */

/* --- Unified match block (.fdp-mcx-*) ----------------------------------- */
.fdp-root .fdp-mcx-list{
  display:flex; flex-direction:column; gap:5px;
  background:transparent; border:0; border-radius:0; overflow:visible;
}
.fdp-root .fdp-mcx-match{
  display:flex; align-items:stretch; gap:var(--fdp-s-3);
  padding:var(--fdp-s-3) var(--fdp-s-4);
  background:var(--fdp-surface); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius); transition:background .12s ease;
}
.fdp-root .fdp-mcx-match:hover{ background:var(--fdp-surface-2); }

/* meta column — start side (right in RTL) */
.fdp-root .fdp-mcx-meta{
  flex:0 0 auto; min-width:92px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  padding-inline-end:var(--fdp-s-3); border-inline-end:1px solid var(--fdp-border);
  font-size:var(--fdp-fs-xs); color:var(--fdp-text-3);
}
.fdp-root .fdp-mcx-time{ font-weight:var(--fdp-fw-semibold); color:var(--fdp-text-2); }

/* live status (red, stacked) */
.fdp-root .fdp-mcx-live{ display:inline-flex; align-items:center; gap:6px; }
.fdp-root .fdp-live-badge{
  background:var(--fdp-live); color:#fff; font-size:9px; font-weight:var(--fdp-fw-bold);
  letter-spacing:.04em; padding:2px 6px; border-radius:var(--fdp-radius-sm);
}
.fdp-root .fdp-mcx-min{ color:var(--fdp-live); font-weight:var(--fdp-fw-bold); font-size:var(--fdp-fs-xs); }
.fdp-root .fdp-mcx-period{ color:var(--fdp-live); font-weight:var(--fdp-fw-semibold); }

/* body holds the fixture + optional note */
.fdp-root .fdp-mcx-body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.fdp-root .fdp-mcx-fixture{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--fdp-s-3); }

.fdp-root .fdp-mcx-team{ display:flex; align-items:center; gap:var(--fdp-s-2); min-width:0; }
.fdp-root .fdp-mcx-home{ justify-content:flex-end; }                            /* hug toward the score (center) */
.fdp-root .fdp-mcx-away{ justify-content:flex-end; flex-direction:row-reverse; } /* hug toward the score; logo inner, name outer */
.fdp-root .fdp-mcx-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:var(--fdp-fw-medium); max-width:170px; }
.fdp-root .fdp-mcx-home .fdp-logo,.fdp-root .fdp-mcx-away .fdp-logo{ width:26px; height:26px; font-size:10px; flex:0 0 auto; }

/* score / vs */
.fdp-root .fdp-mcx-score{ display:flex; align-items:center; gap:6px; justify-content:center; min-width:70px; }
.fdp-root .fdp-mcx-box{
  min-width:28px; height:28px; padding:0 6px; display:grid; place-items:center;
  background:var(--fdp-surface-3); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-sm); font-weight:var(--fdp-fw-bold);
}
.fdp-root .fdp-mcx-sep{ color:var(--fdp-text-3); font-weight:var(--fdp-fw-bold); min-width:14px; text-align:center; }
.fdp-root .fdp-mcx-match--live .fdp-mcx-box{ border-color:var(--fdp-live); color:var(--fdp-live); }

/* centered note (ET / penalties) */
.fdp-root .fdp-mcx-note{ text-align:center; font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }

/* ---- Mobile: match row becomes a stacked card ---- */
@media (max-width:560px){
  .fdp-root .fdp-mcx-match{ flex-direction:column; gap:var(--fdp-s-2); padding:var(--fdp-s-3); }
  .fdp-root .fdp-mcx-meta{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; width:auto;
    min-width:0; padding:0 0 var(--fdp-s-2); border-inline-end:0; border-bottom:1px solid var(--fdp-border);
  }
  /* date + time stay grouped together on the start (right) */
  .fdp-root .fdp-mcx-meta .fdp-time{ order:0; }
  .fdp-root .fdp-mcx-time{ order:0; }
  /* live: LIVE+minute on the end (left), period on the start (right) */
  .fdp-root .fdp-mcx-match--live .fdp-mcx-meta{ justify-content:space-between; }
  .fdp-root .fdp-mcx-period{ order:0; }
  .fdp-root .fdp-mcx-live{ order:1; }
  .fdp-root .fdp-mcx-fixture{ grid-template-columns:1fr auto 1fr; gap:var(--fdp-s-2); }
  .fdp-root .fdp-mcx-team{ flex-direction:column-reverse; text-align:center; gap:6px; justify-content:center; }
  .fdp-root .fdp-mcx-away{ flex-direction:column-reverse; }   /* logo on top, name below */
  .fdp-root .fdp-mcx-name{ white-space:normal; font-size:var(--fdp-fs-sm); max-width:none; }
  .fdp-root .fdp-mcx-home .fdp-logo,.fdp-root .fdp-mcx-away .fdp-logo{ width:36px; height:36px; font-size:12px; }
  .fdp-root .fdp-mcx-box{ min-width:28px; height:28px; font-size:var(--fdp-fs-md); }
}

/* --- Standings: sticky #/club columns + mobile scroll hint -------------- */
.fdp-root .fdp-standings{ position:relative; }
.fdp-root .fdp-standings .fdp-c-pos{ position:sticky; inset-inline-start:0; z-index:2; background:var(--fdp-surface); }
.fdp-root .fdp-standings .fdp-c-club{ position:sticky; inset-inline-start:54px; z-index:2; background:var(--fdp-surface); }
.fdp-root .fdp-standings thead .fdp-c-pos,.fdp-root .fdp-standings thead .fdp-c-club{ background:var(--fdp-surface-3); z-index:3; }
.fdp-root .fdp-standings tbody tr:hover .fdp-c-pos,
.fdp-root .fdp-standings tbody tr:hover .fdp-c-club{ background:var(--fdp-surface-2); }
/* fade + hint shown only when horizontally scrollable (mobile) */
.fdp-root .fdp-scroll-hint{ display:none; }
@media (max-width:680px){
  .fdp-root .fdp-scroll-hint{
    display:flex; align-items:center; gap:6px; justify-content:flex-end;
    font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); padding:0 var(--fdp-s-2) var(--fdp-s-2);
  }
  .fdp-root .fdp-scroll-hint .fdp-scroll-arrow{ animation:fdp-nudge 1.2s ease-in-out infinite; }
}
@keyframes fdp-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-4px); } }

/* --- Ad slot ------------------------------------------------------------ */
.fdp-root .fdp-ad{ margin:var(--fdp-s-4) 0; text-align:center; }
.fdp-root .fdp-ad:empty{ display:none; margin:0; }

/* --- Live standings row (added after the brief) ------------------------- */
.fdp-root .fdp-standings__row--live{ background:linear-gradient(90deg, var(--fdp-loss-soft) 0%, transparent 60%); }
.fdp-root .fdp-live-pill{ display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:var(--fdp-fw-bold); color:var(--fdp-live); margin-inline-start:4px; }
.fdp-root .fdp-live-pill .fdp-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--fdp-live); animation:fdp-pulse 1.4s infinite; }
@keyframes fdp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* --- Misc classes introduced by the renderer ---------------------------- */
.fdp-root .fdp-standings__filter{ display:flex; gap:var(--fdp-s-2); flex-wrap:wrap; }
.fdp-root .fdp-tabs__btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border:1px solid var(--fdp-border); border-radius:var(--fdp-radius-pill);
  background:var(--fdp-surface); color:var(--fdp-text-2); font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium);
}
.fdp-root .fdp-tabs__btn:hover{ background:var(--fdp-surface-2); }
.fdp-root .fdp-tabs__btn[aria-pressed="true"]{ background:var(--fdp-accent); border-color:var(--fdp-accent); color:#fff; }
.fdp-root .fdp-group-title{ font-size:var(--fdp-fs-md); font-weight:var(--fdp-fw-semibold); margin:var(--fdp-s-4) 0 var(--fdp-s-3); }
.fdp-root .fdp-empty{ text-align:center; color:var(--fdp-text-3); padding:var(--fdp-s-6) 0; }
.fdp-root .fdp-free{ margin:var(--fdp-s-3) 0; }

/* --- Reusable tab bar (.fdp-tabbar) — used on every tabbed surface ------ */
.fdp-root .fdp-tabbar{
  background:var(--fdp-surface); border:1px solid var(--fdp-border);
  border-radius:var(--fdp-radius-lg); box-shadow:var(--fdp-shadow-sm);
  padding:var(--fdp-s-1) var(--fdp-s-2);
}
.fdp-root .fdp-tabbar .fdp-tabs__list{ border-bottom:0; gap:0; display:flex; overflow-x:auto; scrollbar-width:none; }
.fdp-root .fdp-tabbar .fdp-tabs__list::-webkit-scrollbar{ display:none; }
.fdp-root .fdp-tabbar .fdp-tab{
  position:relative; border:0; border-radius:0; margin:0; background:none; white-space:nowrap;
  padding:var(--fdp-s-2) var(--fdp-s-4); color:var(--fdp-text-2);
  font-weight:var(--fdp-fw-medium); transition:color .15s;
}
.fdp-root .fdp-tabbar .fdp-tab:hover{ background:none; color:var(--fdp-text); }
/* vertical separator between tabs ( | ) — RTL: start side = right */
.fdp-root .fdp-tabbar .fdp-tab:not(:first-child)::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:1px; height:16px; background:var(--fdp-border);
}
/* active = accent text + short underline */
.fdp-root .fdp-tabbar .fdp-tab[aria-selected="true"]{ color:var(--fdp-accent-strong); background:none; box-shadow:none; }
.fdp-root .fdp-tabbar .fdp-tab[aria-selected="true"]::after{
  content:""; position:absolute; inset-inline:var(--fdp-s-4); bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--fdp-accent);
}

/* --- Competition page: header spacing ----------------------------------- */
.fdp-root .fdp-competition__header{ margin-bottom:var(--fdp-s-4); }

/* --- Match page hero: distinctive gradient header ----------------------- */
/* Flexible via variables — override these from the admin Custom CSS box, e.g.:
   .fdp-root .fdp-match__header{ --fdp-hero-from:#15324f; --fdp-hero-to:#0a1c2e; --fdp-hero-text:#fff; } */
.fdp-root .fdp-match{ overflow:hidden; }
.fdp-root .fdp-match__header{
  --fdp-hero-from: var(--fdp-accent-soft);
  --fdp-hero-to:   var(--fdp-surface);
  --fdp-hero-text: var(--fdp-text);
  background:
    radial-gradient(120% 140% at 50% -25%, var(--fdp-hero-from) 0%, transparent 60%),
    linear-gradient(160deg, var(--fdp-hero-from) 0%, var(--fdp-hero-to) 75%);
  color:var(--fdp-hero-text);
  border-bottom:1px solid var(--fdp-border);
}
/* hero text follows --fdp-hero-text so a dark gradient + light text "just works" */
.fdp-root .fdp-match__header .fdp-team__name,
.fdp-root .fdp-match__score{ color:var(--fdp-hero-text); }
.fdp-root .fdp-match__score .dash{ color:var(--fdp-hero-text); opacity:.45; }

/* date + time inside the hero center, visitor-local */
.fdp-root .fdp-match__when{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:var(--fdp-fs-sm); color:var(--fdp-hero-text);
}
.fdp-root .fdp-match__when .fdp-time:first-child{ font-weight:var(--fdp-fw-semibold); }
.fdp-root .fdp-match__time{ font-size:var(--fdp-fs-xs); opacity:.7; }

/* ---- Match hero responsive (scale down cleanly to 320px) ---- */
@media (max-width:520px){
  .fdp-root .fdp-match__header{ gap:var(--fdp-s-2); padding:var(--fdp-s-5) var(--fdp-s-3); }
  .fdp-root .fdp-match__center{ min-width:0; }
  .fdp-root .fdp-match .fdp-logo--xl{ width:60px; height:60px; font-size:var(--fdp-fs-md); }
  .fdp-root .fdp-match__side .fdp-team__name{ font-size:var(--fdp-fs-sm); text-align:center; }
  .fdp-root .fdp-match__meta{ flex-wrap:wrap; justify-content:center; row-gap:2px; }
}
@media (max-width:360px){
  .fdp-root .fdp-match__header{ padding:var(--fdp-s-4) var(--fdp-s-2); gap:var(--fdp-s-1); }
  .fdp-root .fdp-match .fdp-logo--xl{ width:48px; height:48px; font-size:var(--fdp-fs-sm); }
  .fdp-root .fdp-match__score{ font-size:var(--fdp-fs-xl); }
  .fdp-root .fdp-match__form .fdp-form-pill{ min-width:14px; height:14px; font-size:9px; }
  .fdp-root .fdp-match__when{ font-size:var(--fdp-fs-xs); }
}

/* season switcher — native dropdown styled like the design control */
.fdp-root select.fdp-season-select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding:var(--fdp-s-2) var(--fdp-s-3); padding-inline-start:var(--fdp-s-7);
  border:1px solid var(--fdp-border); border-radius:var(--fdp-radius);
  background-color:var(--fdp-surface-2); color:var(--fdp-text);
  font-size:var(--fdp-fs-sm); font-weight:var(--fdp-fw-medium); line-height:1.4;
  /* chevron on the inline-start edge (left in RTL) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left var(--fdp-s-3) center; background-size:14px;
}
.fdp-root select.fdp-season-select:hover{ border-color:var(--fdp-border-strong); }
.fdp-root select.fdp-season-select:focus{ outline:2px solid var(--fdp-accent-soft); outline-offset:1px; }

/* --- Lineup two-column list (data-driven) -------------------------------- */
.fdp-root .fdp-lineup-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fdp-s-5); }
.fdp-root .fdp-lineup__player--sub{ opacity:.7; }
.fdp-root .fdp-lineup__pos{ margin-inline-start:auto; font-size:var(--fdp-fs-xs); color:var(--fdp-text-3); }
@media (max-width:560px){ .fdp-root .fdp-lineup-cols{ grid-template-columns:1fr; gap:var(--fdp-s-4); } }

/* --- Event sides hug the centre minute (mirror, RTL-correct) ------------- */
.fdp-root .fdp-event__side--home{ justify-content:flex-end; flex-direction:row; }
.fdp-root .fdp-event__side--away{ justify-content:flex-start; flex-direction:row; }
.fdp-root .fdp-event__side--home .fdp-event__txt{ text-align:right; }
.fdp-root .fdp-event__side--away .fdp-event__txt{ text-align:left; }

/* --- Teams context strip above two-sided match data --------------------- */
.fdp-root .fdp-sides-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--fdp-s-2);
  padding-bottom:var(--fdp-s-3); margin-bottom:var(--fdp-s-4);
  border-bottom:1px solid var(--fdp-border);
}
.fdp-root .fdp-sides-head__team{ display:flex; align-items:center; min-width:0; max-width:46%; font-weight:var(--fdp-fw-semibold); font-size:var(--fdp-fs-sm); }
.fdp-root .fdp-sides-head__team--home{ justify-content:flex-start; }
.fdp-root .fdp-sides-head__team--away{ justify-content:flex-end; }
.fdp-root .fdp-sides-head__team .fdp-team__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }