/* Nabd Football — Match Experience v1.4.0
   Focus: stable match tabs, exact score centering, full Arabic weekdays,
   broadcast-style fixture rows, recent form and head-to-head panels. */

:root{
  --mx-navy:#0b172a;
  --mx-navy-2:#111f35;
  --mx-blue:#1769e8;
  --mx-blue-soft:#eef5ff;
  --mx-green:#13a75b;
  --mx-red:#ed3d5c;
  --mx-gold:#f6b817;
  --mx-ink:#111827;
  --mx-muted:#6f7b8f;
  --mx-line:#e3e8f0;
  --mx-surface:#fff;
  --mx-soft:#f6f8fb;
  --mx-shadow:0 14px 34px rgba(17,31,53,.075);
}
html[data-theme="dark"]{
  --mx-ink:#f4f7fb;
  --mx-muted:#9dabc0;
  --mx-line:#2a3748;
  --mx-surface:#141e2c;
  --mx-soft:#192535;
  --mx-shadow:0 18px 42px rgba(0,0,0,.24);
}

/* Full weekday labels without truncation. */
.np-date-strip{gap:10px!important}
.np-date-item{
  min-width:0!important;
  min-height:78px!important;
  padding:10px 8px!important;
  border-radius:15px!important;
}
.np-date-item small{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:.78rem!important;
  line-height:1.25!important;
  font-weight:600!important;
}
.np-date-item strong{font-size:1.35rem!important;font-weight:800!important;line-height:1.1!important}
.np-date-item span{font-size:.66rem!important;font-weight:500!important;white-space:nowrap!important}

/* Fixture rows: three-column broadcast layout inspired by the supplied references. */
.np-match-list{background:var(--mx-surface)!important}
.np-match-row{
  min-height:118px!important;
  padding:13px 16px!important;
  gap:8px 18px!important;
  grid-template-rows:76px 24px!important;
  border-bottom:1px solid var(--mx-line)!important;
  background:var(--mx-surface)!important;
  box-shadow:none!important;
}
html[dir="rtl"] .np-match-row{
  grid-template-columns:64px minmax(0,1fr) 154px minmax(0,1fr)!important;
  grid-template-areas:
    "actions away score home"
    "actions meta meta meta"!important;
}
html[dir="ltr"] .np-match-row{
  grid-template-columns:minmax(0,1fr) 154px minmax(0,1fr) 64px!important;
  grid-template-areas:
    "home score away actions"
    "meta meta meta actions"!important;
}
.np-match-row:hover,.np-match-row:focus-visible{
  background:#f8fbff!important;
  box-shadow:inset 0 0 0 1px #c5d8fa!important;
}
html[data-theme="dark"] .np-match-row:hover,html[data-theme="dark"] .np-match-row:focus-visible{background:#192536!important}
.np-match-team{width:100%!important;gap:14px!important;min-width:0!important}
.np-match-home{justify-content:flex-start!important}
.np-match-away{justify-content:flex-end!important}
html[dir="rtl"] .np-match-away{flex-direction:row-reverse!important}
html[dir="ltr"] .np-match-away{flex-direction:row!important}
.np-team-logo{
  width:54px!important;height:54px!important;flex:0 0 54px!important;
  border-radius:50%!important;border:1px solid #e1e7f0!important;
  background:#fff!important;box-shadow:0 6px 18px rgba(22,36,61,.08)!important;
}
.np-team-logo img{width:100%!important;height:100%!important;object-fit:contain!important;padding:7px!important}
.np-team-logo b{font-size:.78rem!important;font-weight:800!important;color:#1a2740!important}
.np-team-text{min-width:0!important;display:grid!important;gap:5px!important}
.np-team-text strong{
  font-size:.96rem!important;line-height:1.45!important;font-weight:700!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
}
.np-team-text small{font-size:.62rem!important;color:var(--mx-muted)!important;font-weight:500!important}
.np-match-score{
  width:100%!important;min-height:76px!important;padding:0 10px!important;
  border-inline:1px solid var(--mx-line)!important;
  display:grid!important;place-items:center!important;align-content:center!important;gap:6px!important;
  text-align:center!important;direction:ltr!important;
}
.np-match-score time{font-size:1.4rem!important;font-weight:800!important;line-height:1!important;color:var(--mx-ink)!important}
.np-scoreline strong{font-size:1.7rem!important;font-weight:800!important}
.np-status-pill{
  min-height:27px!important;padding:4px 12px!important;border-radius:999px!important;
  background:#e9f7ef!important;color:#08713d!important;font-size:.65rem!important;font-weight:700!important;
  direction:rtl!important;
}
.np-match-row.is-live .np-status-pill{background:#ffe9ed!important;color:#c91f41!important}
.np-match-row.is-finished .np-status-pill{background:#eef1f5!important;color:#536074!important}
.np-countdown{font-size:.58rem!important;color:#a47500!important;font-weight:700!important}
.np-match-meta{
  min-width:0!important;padding:4px 0 0!important;border:0!important;border-top:1px dashed var(--mx-line)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;
  color:var(--mx-muted)!important;text-align:center!important;
}
.np-match-meta strong,.np-match-meta small{font-size:.61rem!important;font-weight:600!important;white-space:nowrap!important}
.np-match-meta small{display:flex!important;align-items:center!important;gap:5px!important}
.np-match-actions{align-self:center!important;display:grid!important;gap:8px!important;justify-items:center!important}
.np-favorite,.np-open-match{width:38px!important;height:38px!important;border-radius:10px!important}

/* Exact center alignment for the match hero time/score. */
.arena-match-versus{
  direction:ltr!important;
  grid-template-columns:minmax(0,1fr) minmax(190px,230px) minmax(0,1fr)!important;
  gap:24px!important;
}
html[dir="rtl"] .arena-hero-team{direction:rtl!important}
html[dir="ltr"] .arena-hero-team{direction:ltr!important}
.arena-hero-team{width:100%!important;justify-self:stretch!important}
.arena-hero-score{
  grid-column:2!important;width:100%!important;min-width:0!important;
  place-self:center!important;justify-self:center!important;align-self:center!important;
  text-align:center!important;direction:ltr!important;margin:0!important;transform:none!important;
}
.arena-hero-score>time,.arena-hero-score>div{width:100%!important;justify-content:center!important;text-align:center!important}
.arena-hero-score>time{display:block!important;font-variant-numeric:tabular-nums!important}
.arena-hero-score>em,.arena-hero-score>b,.arena-hero-score>small{justify-self:center!important}
.arena-match-facts>div{align-content:center!important}
.arena-match-facts>div strong{white-space:normal!important;line-height:1.35!important}

/* Stable match tabs. Horizontal only; sections reserve sticky-header space. */
.arena-section-tabs,.detail-tabs{
  scroll-behavior:smooth!important;
  overscroll-behavior-inline:contain!important;
}
.arena-section-tabs a,.detail-tabs a{font-size:.82rem!important;font-weight:650!important;min-height:42px!important;padding-inline:18px!important}
.match-detail-main>section[id],#prediction,#discussion{scroll-margin-top:150px!important}

/* Recent form and H2H. */
.recent-form-panel,.h2h-panel{overflow:hidden!important}
.recent-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.form-team-card{border:1px solid var(--mx-line);border-radius:18px;background:var(--mx-surface);overflow:hidden}
.form-team-head{min-height:82px;padding:14px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f7faff,#eef4ff);border-bottom:1px solid var(--mx-line)}
html[data-theme="dark"] .form-team-head{background:linear-gradient(135deg,#192536,#172231)}
.form-team-logo,.h2h-logo{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:#fff;border:1px solid var(--mx-line);display:grid;place-items:center;overflow:hidden}
.form-team-logo img,.h2h-logo img{width:100%;height:100%;object-fit:contain;padding:7px}.form-team-logo b,.h2h-logo b{color:#17243b;font-size:.72rem}
.form-team-head small{display:block;color:var(--mx-blue);font-size:.68rem;font-weight:700}.form-team-head h3{margin:3px 0 0;font-size:1rem;line-height:1.35}
.form-match-list{display:grid}
.form-match-row{min-height:76px;padding:10px 12px;display:grid;grid-template-columns:minmax(105px,.9fr) minmax(0,1.3fr) 64px 58px;align-items:center;gap:10px;border-bottom:1px solid var(--mx-line);color:var(--mx-ink)}
.form-match-row:last-child{border-bottom:0}.form-match-row:hover{background:var(--mx-blue-soft)}
.form-match-context{min-width:0}.form-match-context span{display:block;font-size:.66rem;font-weight:700}.form-match-context small{display:block;margin-top:4px;color:var(--mx-muted);font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form-opponent{min-width:0;display:flex;align-items:center;gap:8px}.form-opponent>span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--mx-line);background:#fff;display:grid;place-items:center;overflow:hidden}.form-opponent img{width:100%;height:100%;object-fit:contain;padding:4px}.form-opponent b{font-size:.48rem;color:#17243b}.form-opponent strong{font-size:.72rem;line-height:1.3;white-space:normal}
.form-score{display:flex;align-items:center;justify-content:center;gap:5px;font-variant-numeric:tabular-nums}.form-score strong{font-size:1rem}.form-score span{color:var(--mx-muted)}
.form-match-row>em{justify-self:end;min-width:48px;padding:4px 7px;border-radius:999px;text-align:center;font-size:.58rem;font-style:normal;font-weight:750}.form-match-row>em.is-win{background:#e7f8ef;color:#087344}.form-match-row>em.is-draw{background:#fff5d9;color:#8e6500}.form-match-row>em.is-loss{background:#ffe9ed;color:#bf2744}
.form-empty{min-height:150px;padding:24px;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:var(--mx-muted)}.form-empty>span{width:46px;height:46px;border-radius:14px;background:var(--mx-soft);display:grid;place-items:center;color:var(--mx-blue)}.form-empty p{max-width:360px;margin:0;font-size:.75rem;line-height:1.8}
.h2h-summary{margin:18px 0;display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--mx-line);border-radius:20px;padding:18px;background:linear-gradient(135deg,#f9fbff,#f2f6fc)}
html[data-theme="dark"] .h2h-summary{background:linear-gradient(135deg,#182434,#151f2d)}
.h2h-summary article{display:grid;justify-items:center;gap:6px;text-align:center}.h2h-summary article>strong{font-size:.86rem}.h2h-summary article>b{font-size:1.75rem}.h2h-summary article>small{color:var(--mx-muted);font-size:.62rem}.h2h-summary .h2h-draw{padding:12px;border-inline:1px solid var(--mx-line)}.h2h-summary .h2h-draw strong{font-size:2rem}.h2h-summary .h2h-draw em{font-size:.58rem;color:var(--mx-blue);font-style:normal;font-weight:700}
.h2h-match-list{border:1px solid var(--mx-line);border-radius:16px;overflow:hidden}
.h2h-match-row{min-height:72px;padding:10px 14px;display:grid;grid-template-columns:120px minmax(0,1fr) 78px minmax(0,1fr);align-items:center;gap:12px;border-bottom:1px solid var(--mx-line);color:var(--mx-ink)}.h2h-match-row:last-child{border-bottom:0}.h2h-match-row:hover{background:var(--mx-blue-soft)}
.h2h-date strong{display:block;font-size:.65rem}.h2h-date small{display:block;margin-top:4px;color:var(--mx-muted);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-team{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:9px}.h2h-team.away{justify-content:flex-start}.h2h-team>span{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#fff;border:1px solid var(--mx-line);display:grid;place-items:center;overflow:hidden}.h2h-team img{width:100%;height:100%;object-fit:contain;padding:4px}.h2h-team b{font-size:.5rem;color:#17243b}.h2h-team strong{font-size:.72rem;line-height:1.3}
.h2h-score{display:flex;align-items:center;justify-content:center;gap:7px}.h2h-score strong{font-size:1.2rem}.h2h-score span{color:var(--mx-muted)}

@media(max-width:980px){
  .recent-form-grid{grid-template-columns:1fr}
  .arena-match-versus{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)!important;gap:10px!important}
}

@media(max-width:760px){
  .np-date-strip{grid-template-columns:repeat(7,112px)!important;overflow:auto!important;padding-bottom:4px!important}
  .np-date-item{min-height:72px!important}.np-date-item small{font-size:.72rem!important}.np-date-item strong{font-size:1.18rem!important}.np-date-item span{font-size:.62rem!important}
  html[dir="rtl"] .np-match-row,html[dir="ltr"] .np-match-row{
    min-height:136px!important;padding:12px 8px!important;gap:6px!important;
    grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr)!important;
    grid-template-rows:92px 28px!important;
    grid-template-areas:"home score away" "meta meta meta"!important;
  }
  .np-match-actions{display:none!important}.np-match-team{display:grid!important;justify-items:center!important;align-content:center!important;gap:5px!important;text-align:center!important}.np-match-home,.np-match-away{justify-content:center!important;flex-direction:initial!important}.np-team-logo{width:46px!important;height:46px!important;flex-basis:46px!important}.np-team-text{width:100%!important;text-align:center!important;gap:2px!important}.np-team-text strong{font-size:.73rem!important;line-height:1.35!important}.np-team-text small{display:none!important}.np-match-score{min-height:82px!important;padding:0 4px!important}.np-match-score time{font-size:1.02rem!important}.np-scoreline strong{font-size:1.25rem!important}.np-status-pill{min-height:23px!important;padding:3px 7px!important;font-size:.53rem!important}.np-countdown{font-size:.48rem!important}.np-match-meta{padding-top:4px!important;gap:8px!important}.np-match-meta strong,.np-match-meta small{font-size:.51rem!important}
  .arena-match-versus{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)!important;gap:2px!important}.arena-hero-score>time{font-size:1.8rem!important}.arena-hero-team>strong{font-size:.72rem!important;line-height:1.35!important}.arena-section-tabs a,.detail-tabs a{font-size:.72rem!important;padding-inline:13px!important}
  .form-match-row{grid-template-columns:88px minmax(0,1fr) 54px 50px;gap:7px;padding:9px 8px}.form-match-context span{font-size:.57rem}.form-match-context small{font-size:.5rem}.form-opponent strong{font-size:.63rem}.form-opponent>span{width:30px;height:30px;flex-basis:30px}.form-score strong{font-size:.88rem}.form-match-row>em{min-width:44px;font-size:.52rem}
  .h2h-summary{grid-template-columns:1fr 90px 1fr;padding:12px 8px}.h2h-logo{width:44px;height:44px}.h2h-summary article>strong{font-size:.7rem}.h2h-match-row{grid-template-columns:1fr 62px 1fr;grid-template-areas:"home score away" "date date date";gap:7px;padding:10px}.h2h-date{grid-area:date;text-align:center;border-top:1px dashed var(--mx-line);padding-top:7px}.h2h-team:not(.away){grid-area:home}.h2h-score{grid-area:score}.h2h-team.away{grid-area:away}.h2h-team{display:grid;justify-items:center;text-align:center}.h2h-team strong{font-size:.62rem}.h2h-team>span{width:32px;height:32px}.h2h-date small{white-space:normal}
}