/* ===================================================================
   [matches_list] shortcode styles — Modern Sports UI
   Fully separate from .wpa-* / .mp-* (existing shortcode)
   =================================================================== */

/* ── CSS Variables ── */
:root {
    --mpm-accent:       #f59e0b;   /* amber — status "لم تبدأ", active tab */
    --mpm-accent-dark:  #d97706;
    --mpm-red:          #ef4444;
    --mpm-green:        #22c55e;
    --mpm-blue:         #3b82f6;
    --mpm-purple:       #7c3aed;
    --mpm-text:         #111827;
    --mpm-text-2:       #374151;
    --mpm-text-3:       #6b7280;
    --mpm-text-4:       #9ca3af;
    --mpm-border:       #e5e7eb;
    --mpm-border-light: #f3f4f6;
    --mpm-bg:           #ffffff;
    --mpm-bg-soft:      #f9fafb;
    --mpm-radius:       12px;
    --mpm-shadow:       0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
    --mpm-shadow-hover: 0 6px 24px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
}

/* ── Wrapper ── */
.mpm-app {
    font-family: 'Tahoma', 'Segoe UI', Arial, sans-serif !important;
    direction: rtl !important;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--mpm-text);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
.mpm-app *, .mpm-app *::before, .mpm-app *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   DATE SLIDER  (reference style: horizontal tab bar with arrows)
═══════════════════════════════════════════════════════════ */
.mpm-date-slider-outer {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    border-bottom: 2px solid var(--mpm-border);
    margin-bottom: 28px;
    background: var(--mpm-bg);
    position: relative;
    width: 100% !important;
    overflow: hidden;
}

/* Arrow buttons */
.mpm-slider-arrow {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: auto !important;
    background: var(--mpm-bg) !important;
    border: none !important;
    border-bottom: 2px solid var(--mpm-border) !important;
    margin-bottom: -2px !important;
    color: var(--mpm-text-3) !important;
    cursor: pointer !important;
    transition: color .15s, background .15s;
    padding: 0 !important;
    z-index: 2;
    border-radius: 0 !important;
    outline: none;
}
.mpm-slider-arrow:hover {
    color: var(--mpm-text) !important;
    background: var(--mpm-bg-soft) !important;
}

/* Tab strip */
.mpm-date-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mpm-date-slider::-webkit-scrollbar { display: none !important; }

/* Individual tab */
.mpm-date-tab {
    flex: 0 0 82px !important;
    min-width: 82px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 10px 20px !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: -2px !important;
    color: var(--mpm-text-3) !important;
    font-family: inherit !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
    transition: color .18s, border-color .18s;
    line-height: 1.35 !important;
    width: auto !important;
    min-width: 82px !important;
    height: auto !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    outline: none;
    vertical-align: top;
}
.mpm-date-tab:hover {
    color: var(--mpm-text-2) !important;
    background: none !important;
}
.mpm-date-tab[data-date="all"] {
    font-size: 0.85em !important;
    font-weight: 600 !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding: 10px 18px !important;
}

/* Active tab */
.mpm-date-tab-active {
    color: var(--mpm-text) !important;
    border-bottom-color: var(--mpm-accent) !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    font-weight: 700 !important;
}

.mpm-tab-dayname {
    font-size: 1em;
    font-weight: 600;
}
.mpm-tab-date {
    font-size: 0.88em;
    font-weight: 400;
    color: inherit;
}
.mpm-date-tab-active .mpm-tab-date {
    color: var(--mpm-text-2);
}

/* ═══════════════════════════════════════════════════════════
   MATCH CARDS LIST  (single column, horizontal team layout)
═══════════════════════════════════════════════════════════ */
.mpm-matches-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.mpm-tournaments-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    width: 100% !important;
}
.mpm-tournament-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.mpm-tournament-group-hidden {
    display: none !important;
}
.mpm-tournament-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 11px 15px;
    background: var(--mpm-tournament-bg, linear-gradient(110deg, var(--mpm-bg) 0%, var(--mpm-bg-soft) 100%));
    border: 1px solid var(--mpm-tournament-border, var(--mpm-border));
    border-right: 4px solid var(--mpm-accent);
    border-radius: calc(var(--mpm-radius) + 3px);
    box-shadow: var(--mpm-shadow);
}
.mpm-tournament-logo {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid var(--mpm-tournament-border, var(--mpm-border));
    border-radius: 12px;
    background: var(--mpm-tournament-logo-bg, var(--mpm-bg));
    color: var(--mpm-accent);
}
.mpm-tournament-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mpm-tournament-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 22px;
}
.mpm-tournament-logo-fallback[hidden] {
    display: none !important;
}
.mpm-tournament-heading-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.mpm-tournament-name {
    overflow: hidden;
    margin: 0;
    color: var(--mpm-text);
    font-size: 1.02em;
    font-weight: 800;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.mpm-tournament-heading.mpm-tournament-style-centered {
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-right-width: 1px;
    border-bottom: 3px solid var(--mpm-accent);
    text-align: center;
}
.mpm-tournament-style-centered .mpm-tournament-heading-copy {
    align-items: center;
}
.mpm-tournament-style-centered .mpm-tournament-name {
    text-align: center;
}

.mpm-tournament-heading.mpm-tournament-style-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto 10px;
    padding: 6px 14px;
    gap: 9px;
    border-right-width: 1px;
    border-radius: 999px;
    box-shadow: none;
}
.mpm-tournament-style-badge .mpm-tournament-logo {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.mpm-tournament-heading.mpm-tournament-style-banner {
    min-height: 76px;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 4px solid var(--mpm-accent);
    border-radius: var(--mpm-radius);
    box-shadow: none;
}

.mpm-tournament-heading.mpm-tournament-style-minimal {
    min-height: 0;
    padding: 4px 8px;
    border: 0;
    border-right: 3px solid var(--mpm-accent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.mpm-tournament-style-minimal .mpm-tournament-logo {
    border: 0;
    background: transparent;
}

/* Align the tournament title independently from its selected visual style. */
.mpm-app .mpm-tournament-heading-copy {
    flex: 1 1 auto;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-align-right .mpm-tournament-heading-copy,
.mpm-app .mpm-tournament-heading.mpm-tournament-align-center .mpm-tournament-heading-copy,
.mpm-app .mpm-tournament-heading.mpm-tournament-align-left .mpm-tournament-heading-copy {
    align-items: stretch !important;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-style-centered .mpm-tournament-heading-copy {
    width: 100%;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-align-right .mpm-tournament-name {
    width: 100%;
    text-align: right !important;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-align-center .mpm-tournament-name {
    width: 100%;
    text-align: center !important;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-align-left .mpm-tournament-name {
    width: 100%;
    text-align: left !important;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-style-badge.mpm-tournament-align-right {
    margin-inline-start: 0;
    margin-inline-end: auto;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-style-badge.mpm-tournament-align-center {
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.mpm-app .mpm-tournament-heading.mpm-tournament-style-badge.mpm-tournament-align-left {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* ── Card ── */
.mpm-card {
    position: relative !important;
    background: var(--mpm-bg) !important;
    border-radius: var(--mpm-radius) !important;
    border: 1px solid var(--mpm-border) !important;
    box-shadow: var(--mpm-shadow) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: box-shadow .2s, transform .2s;
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}
.mpm-card.mpm-card-hidden {
    display: none !important;
}
.mpm-card:hover {
    box-shadow: var(--mpm-shadow-hover) !important;
    transform: translateY(-2px);
}
.mpm-card:active { transform: translateY(0); }

.mpm-card-permalink {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}
.mpm-card-permalink:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 3px #f59e0b !important;
    z-index: 4 !important;
}
.mpm-card-inner {
    z-index: 2 !important;
    pointer-events: none !important;
}
.mpm-card-inner .mpm-team-logo-link,
.mpm-card-inner .mpm-team-link,
.mpm-card-inner .mpm-channel-link {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
}
.mpm-foot-channel .mpm-channel-link {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
.mpm-foot-channel .mpm-channel-link:hover,
.mpm-foot-channel .mpm-channel-link:focus-visible {
    color: var(--mpm-accent) !important;
}

/* ── Card with background image ── */
.mpm-card-has-bg {
    background-color: #0f172a !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
.mpm-card-overlay {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    background: linear-gradient(160deg, rgba(5,10,25,.80) 0%, rgba(5,10,25,.92) 100%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
    border-radius: inherit !important;
}
.mpm-card-inner {
    position: relative !important;
    z-index: 1 !important;
}

/* White text when card has bg image */
.mpm-card-has-bg .mpm-tournament-label { color: rgba(255,255,255,.6) !important; }
.mpm-card-has-bg .mpm-team-name        { color: #fff !important; }
.mpm-card-has-bg .mpm-sep              { color: rgba(255,255,255,.25) !important; }
.mpm-card-has-bg .mpm-foot-item        { color: rgba(255,255,255,.65) !important; }
.mpm-card-has-bg .mpm-card-foot        { border-top-color: rgba(255,255,255,.1) !important; }
.mpm-card-has-bg .mpm-team-logo-wrap   {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.2) !important;
}
.mpm-card-has-bg .mpm-status-upcoming {
    background: rgba(245,158,11,.22) !important;
    color: #fcd34d !important;
    border-color: rgba(245,158,11,.4) !important;
}
.mpm-card-has-bg .mpm-status-live {
    background: rgba(239,68,68,.22) !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,.4) !important;
}
.mpm-card-has-bg .mpm-status-finished {
    background: rgba(34,197,94,.18) !important;
    color: #86efac !important;
    border-color: rgba(34,197,94,.3) !important;
}
.mpm-card-has-bg .mpm-status-postponed {
    background: rgba(124,58,237,.22) !important;
    color: #c4b5fd !important;
    border-color: rgba(124,58,237,.4) !important;
}

/* Tournament label */
.mpm-card-header {
    padding: 10px 20px 0 !important;
    display: block !important;
}
.mpm-tournament-label {
    display: inline-block !important;
    font-size: 0.72em !important;
    font-weight: 700 !important;
    color: var(--mpm-accent-dark) !important;
    letter-spacing: .02em;
}

/* ── Match body: CSS grid — logo | center | logo / name | · | name ── */
.mpm-match-body {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    padding: 14px 20px 8px !important;
    gap: 6px 8px !important;
    width: 100% !important;
}

/* Logo columns */
.mpm-logo-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mpm-col-1 { grid-column: 1 !important; grid-row: 1 !important; }
.mpm-col-2 { grid-column: 3 !important; grid-row: 1 !important; }

/* Center block (status between logos) */
.mpm-match-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Team names row (aligned under logos) */
.mpm-team-name {
    font-size: 0.88em !important;
    font-weight: 700 !important;
    color: var(--mpm-text) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    display: block !important;
    max-width: 100% !important;
}
.mpm-name-1 { grid-column: 1 !important; grid-row: 2 !important; }
.mpm-name-2 { grid-column: 3 !important; grid-row: 2 !important; }
.mpm-name-spacer {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
}

/* Team logo circle */
.mpm-team-logo-wrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: var(--mpm-bg-soft) !important;
    border: 1px solid var(--mpm-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}
.mpm-team-logo-wrap img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: none !important;
}
.mpm-no-logo { font-size: 1.6em !important; display: block !important; }

.mpm-sep {
    color: var(--mpm-border) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    user-select: none;
    display: inline !important;
}

/* Status pill */
.mpm-status-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: .01em;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}
.mpm-status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.mpm-kickoff-time {
    color: var(--mpm-text-2);
    direction: ltr;
    font-size: 0.78em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.mpm-result-score {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mpm-text);
    direction: rtl;
    font-size: 1em;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.mpm-result-score__team {
    direction: ltr;
    unicode-bidi: isolate;
}
.mpm-result-score__separator {
    direction: ltr;
    unicode-bidi: isolate;
}
.mpm-status-upcoming {
    background: #fff7ed;
    color: var(--mpm-accent-dark);
    border: 1px solid #fde68a;
}
.mpm-status-live {
    background: #fef2f2;
    color: var(--mpm-red);
    border: 1px solid #fecaca;
}
.mpm-status-finished {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.mpm-status-postponed {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

/* Live pulse dot */
.mpm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: mpm-pulse 1.2s infinite;
}
@keyframes mpm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.65); }
}

/* ── Card footer ── */
.mpm-card-foot {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 14px !important;
    padding: 8px 18px 12px !important;
    border-top: 1px solid var(--mpm-border-light) !important;
    width: 100% !important;
}

.mpm-foot-item {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.73em !important;
    color: var(--mpm-text-3) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.mpm-foot-item svg {
    flex-shrink: 0 !important;
    opacity: .65;
    display: inline-block !important;
    vertical-align: middle !important;
}
.mpm-foot-time   { color: var(--mpm-text-3); }
.mpm-foot-channel { color: var(--mpm-text-3); }
.mpm-foot-commentator { color: var(--mpm-text-3); }
.mpm-foot-venue  { color: var(--mpm-text-3); }

/* ── Empty / loading states ── */
.mpm-loading,
.mpm-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--mpm-text-4);
    font-size: 0.95em;
}
.mpm-date-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 52px 20px;
    text-align: center;
    color: var(--mpm-text-4);
}
.mpm-date-empty svg { opacity: .2; }
.mpm-date-empty p { margin: 0; font-size: 0.92em; }

/* ═══════════════════════════════════════════════════════════
   DETAIL VIEW
═══════════════════════════════════════════════════════════ */
.mpm-detail-view { scroll-margin-top: 24px; }

/* Back button */
.mpm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--mpm-purple);
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    margin-bottom: 20px;
    padding: 6px 0;
    font-family: inherit;
    transition: gap .15s;
}
.mpm-back-btn:hover { gap: 10px; }
.mpm-back-btn svg { transition: transform .15s; }
.mpm-back-btn:hover svg { transform: translateX(4px); }

/* ── Detail header (dark card with bg image + overlay) ── */
.mpm-detail-header {
    position: relative !important;
    border-radius: var(--mpm-radius) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    background: #0f172a !important;
    /* background-image set by JS */
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
}

/* Overlay rendered by JS as inner div */
.mpm-dh-overlay {
    position: absolute !important;
    inset: 0;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    background: linear-gradient(
        160deg,
        rgba(10, 15, 30, .82) 0%,
        rgba(10, 15, 30, .92) 100%
    ) !important;
    z-index: 0 !important;
    display: block !important;
}

.mpm-dh-inner {
    position: relative !important;
    z-index: 1 !important;
    padding: 28px 24px 20px !important;
    color: #fff !important;
    display: block !important;
}

/* Tournament + round */
.mpm-dh-tournament {
    text-align: center;
    font-size: 0.82em;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    margin-bottom: 20px;
    letter-spacing: .03em;
}

/* Teams row */
.mpm-dh-teams {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
}
.mpm-dh-team {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: center !important;
    min-width: 0 !important;
    max-width: 40% !important;
}
.mpm-dh-team img,
.mpm-dh-team .mpm-dh-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    padding: 4px;
}
.mpm-dh-team-name {
    font-size: 1em;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.mpm-dh-coach {
    font-size: 0.72em;
    color: rgba(255,255,255,.55);
}

/* Center score/status block */
.mpm-dh-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    padding-top: 18px !important;
    min-width: 80px !important;
}
.mpm-dh-sep {
    font-size: 1.4em;
    color: rgba(255,255,255,.3);
    font-weight: 300;
}
.mpm-dh-score {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: rtl;
    font-size: 2em;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.mpm-dh-score__team {
    direction: ltr;
    unicode-bidi: isolate;
}
.mpm-dh-time {
    font-size: 0.88em;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    margin-top: 4px;
}

/* Status pill in detail (same classes reused, but override colors) */
.mpm-dh-center .mpm-status-pill.mpm-status-upcoming {
    background: rgba(245,158,11,.2);
    color: #fcd34d;
    border-color: rgba(245,158,11,.35);
}
.mpm-dh-center .mpm-status-pill.mpm-status-live {
    background: rgba(239,68,68,.2);
    color: #fca5a5;
    border-color: rgba(239,68,68,.35);
}
.mpm-dh-center .mpm-status-pill.mpm-status-finished {
    background: rgba(34,197,94,.15);
    color: #86efac;
    border-color: rgba(34,197,94,.25);
}
.mpm-dh-center .mpm-status-pill.mpm-status-postponed {
    background: rgba(124,58,237,.2);
    color: #c4b5fd;
    border-color: rgba(124,58,237,.35);
}

/* Info bar (stadium, date, channels, commentators) */
.mpm-dh-infobar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 18px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
.mpm-dh-info-item {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.75em !important;
    color: rgba(255,255,255,.65) !important;
    white-space: nowrap !important;
}
.mpm-dh-info-item svg { opacity: .7; flex-shrink: 0 !important; display: inline-block !important; }
.mpm-dh-info-item strong { color: rgba(255,255,255,.9) !important; font-weight: 600 !important; }

/* ── Detail tabs ── */
.mpm-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    border-bottom: 2px solid var(--mpm-border) !important;
    margin-bottom: 24px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    list-style: none !important;
    padding: 0 !important;
}
.mpm-tabs::-webkit-scrollbar { display: none !important; }

.mpm-tab {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 22px !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    color: var(--mpm-text-3) !important;
    cursor: pointer !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
    transition: color .15s;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    border-radius: 0 !important;
    outline: none;
    text-decoration: none !important;
}
.mpm-tab:hover { color: var(--mpm-text-2) !important; background: none !important; }
.mpm-tab-active {
    color: var(--mpm-purple) !important;
    border-bottom-color: var(--mpm-purple) !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
}

.mpm-tab-panel { display: none; }
.mpm-tab-panel-active { display: block; }

/* ── Channels / commentator in detail view ── */
.mpm-info-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.mpm-info-box {
    background: var(--mpm-bg-soft);
    border: 1px solid var(--mpm-border);
    border-radius: 12px;
    padding: 14px 18px;
    flex: 1;
    min-width: 200px;
}
.mpm-info-label {
    font-size: 0.78em;
    color: var(--mpm-text-3);
    margin-bottom: 8px;
    font-weight: 700;
}
.mpm-channels-list { display: flex; gap: 8px; flex-wrap: wrap; }
.mpm-channel-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mpm-bg);
    border: 1px solid var(--mpm-border);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.83em;
}
.mpm-channel-chip img { width: 20px; height: 20px; object-fit: contain; }
.mpm-commentator { display: flex; align-items: center; gap: 10px; font-size: 0.88em; }
.mpm-commentator img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* ── Event timeline ── */
.mpm-timeline { position: relative; padding-right: 32px; }
.mpm-timeline::before {
    content: '';
    position: absolute;
    right: 11px; top: 0; bottom: 0;
    width: 2px;
    background: var(--mpm-border);
}
.mpm-event { position: relative; padding-bottom: 18px; }
.mpm-event::before {
    content: '';
    position: absolute;
    right: 6px; top: 35px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--mpm-purple);
    border: 2px solid var(--mpm-bg);
    box-shadow: 0 0 0 2px var(--mpm-border);
}
.mpm-event-minute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    background: var(--mpm-text);
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    margin-bottom: 4px;
    direction: ltr;
    line-height: 1.4;
}
.mpm-event-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.mpm-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 18px;
    line-height: 1;
}
.mpm-event-goal .mpm-event-icon,
.mpm-event-penalty .mpm-event-icon { background: #dcfce7; }
.mpm-event-yellow_card .mpm-event-icon { background: #fef3c7; }
.mpm-event-red_card .mpm-event-icon { background: #fee2e2; }
.mpm-event-substitution .mpm-event-icon { background: #dbeafe; }
.mpm-event-var .mpm-event-icon { background: #ede9fe; }
.mpm-event-copy { min-width: 0; padding-top: 6px; }
.mpm-event-body { font-size: 0.9em; line-height: 1.6; overflow-wrap: anywhere; }
.mpm-event-substitute { color: var(--mpm-text-3); }
.mpm-event-desc { color: var(--mpm-text-4); font-size: 0.83em; line-height: 1.55; margin-top: 3px; overflow-wrap: anywhere; }

/* ── Predictions tab ── */
.mpm-pred-card {
    background: var(--mpm-bg);
    border: 1px solid var(--mpm-border);
    border-radius: 16px;
    padding: 22px;
}
.mpm-pred-form-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mpm-pred-form-row input {
    flex: 1; min-width: 160px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95em;
}
.mpm-score-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; }
.mpm-score-input { width: 64px; height: 64px; text-align: center; font-size: 1.6em; font-weight: 800; border: 2px solid #cbd5e1; border-radius: 12px; }
.mpm-submit-btn {
    display: block; width: 100%;
    background: linear-gradient(45deg, #8b5cf6, #7c3aed);
    color: #fff; border: none;
    padding: 14px; border-radius: 12px;
    font-size: 1em; font-weight: 700; cursor: pointer;
    font-family: inherit;
}
.mpm-submit-btn:hover { opacity: .92; }
.mpm-pred-success {
    text-align: center; padding: 16px;
    background: #f0fdf4; border-radius: 12px; color: #166534; font-weight: 700;
}
.mpm-pred-error {
    background: #fef2f2; color: #b91c1c;
    padding: 10px 14px; border-radius: 10px;
    font-size: 0.9em; margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mpm-date-tab { flex-basis: 74px !important; min-width: 74px !important; padding: 10px 8px !important; }
    .mpm-match-row { padding: 12px 14px 8px; }
    .mpm-card-foot { padding: 7px 14px 10px; gap: 4px 10px; }
    .mpm-dh-team img, .mpm-dh-team .mpm-dh-logo { width: 60px; height: 60px; }
    .mpm-dh-inner { padding: 22px 18px 18px; }
    .mpm-info-row { flex-direction: column; }
}

@media (max-width: 600px) {
    .mpm-slider-arrow { width: 30px !important; min-width: 30px !important; max-width: 30px !important; }
    .mpm-date-tab { flex-basis: 70px !important; min-width: 70px !important; padding: 10px 7px !important; font-size: 0.78em; }
    .mpm-tournaments-list { gap: 16px !important; }
    .mpm-tournament-group { gap: 8px; }
    .mpm-tournament-heading { min-height: 60px; padding: 9px 11px; gap: 10px; }
    .mpm-tournament-logo { flex-basis: 40px; width: 40px; height: 40px; }
    .mpm-tournament-name { font-size: .95em; }
    .mpm-team-logo-wrap { width: 46px; height: 46px; }
    .mpm-team-logo-wrap img { width: 34px; height: 34px; }
    .mpm-team-name { font-size: 0.82em; }
    .mpm-match-center { gap: 6px; }
    .mpm-dh-teams { gap: 10px; }
    .mpm-dh-team img, .mpm-dh-team .mpm-dh-logo { width: 52px; height: 52px; }
    .mpm-dh-score { font-size: 1.6em; }
    .mpm-dh-inner { padding: 18px 14px 16px; }
    .mpm-detail-header { border-radius: 10px; }
    .mpm-dh-infobar { gap: 5px 12px; }
}

@media (max-width: 420px) {
    .mpm-date-tab { flex-basis: 64px !important; min-width: 64px !important; padding: 8px 5px !important; font-size: 0.75em; }
    .mpm-date-tab[data-date="all"] { padding: 8px 12px; }
    .mpm-match-row { gap: 6px; }
    .mpm-status-pill { padding: 4px 10px; font-size: 0.7em; }
    .mpm-foot-item { font-size: 0.69em; }
    .mpm-card-header { padding: 6px 14px 0; }
    .mpm-match-row { padding: 10px 14px 8px; }
    .mpm-card-foot { padding: 6px 14px 10px; }
}

/* ══════════════════════════════════════════════════════════
   DETAIL HEADER — admin-customisable colour variables
══════════════════════════════════════════════════════════ */
.mpm-detail-header .mpm-dh-tournament {
    color: var(--mpm-dh-title-color, rgba(255,255,255,.7));
}
.mpm-detail-header .mpm-dh-team-name {
    color: var(--mpm-dh-team-color, #fff);
}
.mpm-detail-header .mpm-dh-score {
    color: var(--mpm-dh-score-color, #fff);
}
.mpm-detail-header .mpm-status-pill {
    color: var(--mpm-dh-score-color, inherit);
}
.mpm-detail-header .mpm-dh-time {
    color: var(--mpm-dh-title-color, rgba(255,255,255,.75));
}
.mpm-detail-header .mpm-dh-info-item {
    color: var(--mpm-dh-title-color, rgba(255,255,255,.65));
}
.mpm-detail-header .mpm-dh-sep {
    color: var(--mpm-dh-title-color, rgba(255,255,255,.3));
}
.mpm-detail-header .mpm-dh-coach {
    color: var(--mpm-dh-title-color, rgba(255,255,255,.55));
}

/* ══════════════════════════════════════════════════════════
   LIST MODE — compact display variant
══════════════════════════════════════════════════════════ */
.mpm-list-mode .mpm-matches-list {
    gap: 6px !important;
}
.mpm-list-mode .mpm-card {
    border-radius: 8px !important;
}
.mpm-list-mode .mpm-match-body {
    padding: 10px 16px 6px !important;
}
.mpm-list-mode .mpm-team-logo-wrap {
    width: 44px !important;
    height: 44px !important;
}
.mpm-list-mode .mpm-team-logo-wrap img {
    width: 32px !important;
    height: 32px !important;
}
.mpm-list-mode .mpm-team-name {
    font-size: 0.8em !important;
}
.mpm-list-mode .mpm-card-foot {
    padding: 6px 16px 10px !important;
}
.mpm-list-mode .mpm-card-header {
    padding: 6px 16px 0 !important;
}
.mpm-list-mode .mpm-tournament-label {
    font-size: 0.75em !important;
}

/* Match status colors and watch link */
.mpm-app .mpm-status-pill.mpm-status-upcoming {
    background: var(--mpm-status-upcoming-bg, #f59e0b) !important;
    color: var(--mpm-status-upcoming-text, #1f2937) !important;
    border-color: var(--mpm-status-upcoming-bg, #f59e0b) !important;
}

.mpm-app .mpm-status-pill.mpm-status-live {
    background: var(--mpm-status-live-bg, #dc2626) !important;
    color: var(--mpm-status-live-text, #ffffff) !important;
    border-color: var(--mpm-status-live-bg, #dc2626) !important;
    animation: mpm-live-flash 1.1s ease-in-out infinite;
}

.mpm-app .mpm-status-pill.mpm-status-finished {
    background: var(--mpm-status-finished-bg, #16a34a) !important;
    color: var(--mpm-status-finished-text, #ffffff) !important;
    border-color: var(--mpm-status-finished-bg, #16a34a) !important;
}

.mpm-live-watch-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.mpm-live-watch-box .mpm-info-label {
    margin-bottom: 6px;
}

.mpm-live-watch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    background: #dc2626;
    color: #fff !important;
    font-size: 0.9em;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none !important;
    animation: mpm-live-flash 1.1s ease-in-out infinite;
}

.mpm-live-watch-button:hover,
.mpm-live-watch-button:focus-visible {
    background: #b91c1c;
    color: #fff !important;
    text-decoration: none !important;
}

.mpm-live-watch-button.mpm-channel-details-button {
    border-color: #15803d;
    background: #16a34a;
}

.mpm-live-watch-button.mpm-channel-details-button:hover,
.mpm-live-watch-button.mpm-channel-details-button:focus-visible {
    background: #15803d;
}

@keyframes mpm-live-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: .58; }
}

@media (prefers-reduced-motion: reduce) {
    .mpm-app .mpm-status-pill.mpm-status-live,
    .mpm-live-watch-button {
        animation: none;
    }
}