/* ============================================================
   FootArabi Tabs v1.5.1 — RTL Arabic Competition Tabs
   ============================================================ */

.fa-tabs-wrap {
    font-family: 'Tahoma', 'Arial', sans-serif;
    direction: rtl;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid #e8ecf0;
}

/* ── Header ─────────────────────────────────────────────── */
.fa-tabs-header {
    background: linear-gradient(135deg, #0d2137 0%, #1a3c5e 100%);
    padding: 14px 20px;
    display: flex;
    align-items: center;
}

.fa-league-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Tab nav ─────────────────────────────────────────────── */
.fa-tabs-nav {
    display: flex;
    background: #1a3c5e;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 3px solid #f0a500;
}
.fa-tabs-nav::-webkit-scrollbar { display: none; }

.fa-tab {
    flex: 1;
    min-width: 62px;
    padding: 12px 4px 9px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.fa-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.fa-tab.active {
    color: #f0a500;
    border-bottom-color: #f0a500;
    background: rgba(255,255,255,0.07);
    font-weight: 700;
}

.fa-tab-ico { font-size: 16px; line-height: 1; }

/* ── Panels ──────────────────────────────────────────────── */
.fa-panels { min-height: 200px; }

.fa-panel { display: none; }
.fa-panel.active { display: block; }

/* ── Loading ─────────────────────────────────────────────── */
.fa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: #888;
    gap: 12px;
    font-size: 14px;
}

.fa-spin {
    width: 36px;
    height: 36px;
    border: 4px solid #e8ecf0;
    border-top-color: #1a3c5e;
    border-radius: 50%;
    animation: fa-spin 0.75s linear infinite;
}

@keyframes fa-spin { to { transform: rotate(360deg); } }

/* ── Error / Notice ──────────────────────────────────────── */
.fa-err {
    margin: 16px;
    padding: 16px;
    background: #fff5f5;
    border: 1px solid #fcc;
    border-radius: 8px;
    color: #c0392b;
    font-size: 14px;
    text-align: center;
}

.fa-notice {
    margin: 16px;
    padding: 20px;
    background: #f7f9fc;
    border: 1px dashed #c9d6e3;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   CLASSEMENT
   ══════════════════════════════════════════════════════════ */
.fa-table-wrap { overflow-x: auto; }

.fa-standings-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fa-standings-tbl thead {
    background: #f5f7fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fa-standings-tbl th {
    padding: 10px 6px;
    text-align: center;
    font-weight: 700;
    color: #555;
    border-bottom: 2px solid #e0e6ed;
    white-space: nowrap;
    font-size: 12px;
}
.fa-standings-tbl th.col-team { text-align: right; padding-right: 14px; }

.fa-standings-tbl td {
    padding: 9px 6px;
    text-align: center;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.fa-standings-tbl tbody tr:hover { background: #f9fbfd; }

.fa-team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    padding-right: 12px;
}
.fa-team-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.fa-team-nm   { font-weight: 500; font-size: 13px; }
.fa-rank-num  { color: #999; font-weight: 600; font-size: 12px; }
.fa-pts       { font-weight: 800; color: #1a3c5e; font-size: 14px; }

.fa-z-cl   { border-right: 4px solid #1565C0; }
.fa-z-el   { border-right: 4px solid #E65100; }
.fa-z-conf { border-right: 4px solid #2E7D32; }
.fa-z-rel  { border-right: 4px solid #B71C1C; }

.fa-legend {
    display: flex;
    gap: 14px;
    padding: 10px 16px;
    font-size: 11px;
    color: #777;
    flex-wrap: wrap;
    border-top: 1px solid #f0f3f7;
    direction: rtl;
}
.fa-legend span { display: flex; align-items: center; gap: 5px; }
.fa-legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   MATCHS (communs)
   ══════════════════════════════════════════════════════════ */
.fa-round-block { margin-bottom: 4px; }

.fa-round-label {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fa-match-row {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid #f5f7fa;
    gap: 10px;
    transition: background 0.12s;
}
.fa-match-row:hover { background: #f9fbfd; }

.fa-match-row.fa-match-live {
    background: #fff8f8;
    border-right: 3px solid #e74c3c;
}
.fa-match-row.fa-match-live:hover { background: #fff0f0; }

.fa-mteam {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}
.fa-mteam.away { flex-direction: row-reverse; text-align: left; }
.fa-mteam img  { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.fa-mscore {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    gap: 3px;
}
.fa-score-num {
    font-size: 19px;
    font-weight: 800;
    color: #0d2137;
    letter-spacing: 3px;
    line-height: 1;
}
.fa-score-tag {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 10px;
    background: #eef1f5;
    color: #777;
    white-space: nowrap;
}
.fa-score-tag.live {
    background: #e74c3c;
    color: #fff;
    animation: fa-blink 1.2s ease-in-out infinite;
}
.fa-score-date { font-size: 10px; color: #bbb; }

@keyframes fa-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

/* ── Pas de live ──────────────────────────────────────────── */
.fa-no-live {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.fa-no-live-icon { font-size: 48px; line-height: 1; }
.fa-no-live-sub  { font-size: 12px; color: #bbb; }

/* ── Bandeau live ────────────────────────────────────────── */
.fa-live-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff3f3;
    border-bottom: 1px solid #fdd;
    font-weight: 700;
    font-size: 14px;
    color: #c0392b;
}
.fa-live-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e74c3c;
    animation: fa-blink 1.2s ease-in-out infinite;
}

/* ── Barre de rafraîchissement live ─────────────────────── */
.fa-live-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 16px;
    background: #fff3f3;
    border-top: 1px solid #fdd;
    font-size: 11px;
    color: #c0392b;
}

.fa-live-next-refresh { color: #888; font-size: 11px; }

.fa-live-refresh-btn {
    background: transparent;
    border: 1px solid #e74c3c;
    border-radius: 50%;
    width: 28px; height: 28px;
    font-size: 16px;
    color: #e74c3c;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    padding: 0;
}
.fa-live-refresh-btn:hover { background: #e74c3c; color: #fff; }

.fa-live-min {
    font-size: 10px;
    font-weight: 800;
    background: rgba(255,255,255,0.25);
    padding: 0 4px;
    border-radius: 4px;
    vertical-align: middle;
}

/* ── Filtres matchs ──────────────────────────────────────── */
.fa-match-filters {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f3f7;
    overflow-x: auto;
    scrollbar-width: none;
}
.fa-match-filters::-webkit-scrollbar { display: none; }

.fa-flt-btn {
    padding: 5px 14px;
    border: 1px solid #d0d8e4;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: #555;
    white-space: nowrap;
    transition: all 0.18s;
}
.fa-flt-btn:hover,
.fa-flt-btn.active {
    background: #1a3c5e;
    color: #fff;
    border-color: #1a3c5e;
}

/* ══════════════════════════════════════════════════════════
   HДАФون / أسيستات
   ══════════════════════════════════════════════════════════ */
.fa-scorers-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fa-scorers-tbl thead { background: #f5f7fa; }
.fa-scorers-tbl th {
    padding: 10px 10px;
    font-weight: 700;
    color: #555;
    border-bottom: 2px solid #e0e6ed;
    font-size: 12px;
}
.fa-scorers-tbl th:first-child { text-align: right; padding-right: 16px; }
.fa-scorers-tbl td {
    padding: 9px 10px;
    border-bottom: 1px solid #f0f3f7;
    text-align: center;
    vertical-align: middle;
}

.fa-scorer-cell { display: flex; align-items: center; gap: 8px; text-align: right; }
.fa-srank {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #555;
    flex-shrink: 0;
}
.fa-srank.gold   { background: linear-gradient(135deg,#f0a500,#e67e22); color:#fff; }
.fa-srank.silver { background: linear-gradient(135deg,#adb5bd,#868e96); color:#fff; }
.fa-srank.bronze { background: linear-gradient(135deg,#cd7f32,#a0522d); color:#fff; }

.fa-goals-num {
    display: inline-block;
    background: #1a3c5e;
    color: #fff;
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════
   الفرق (grille + squad)
   ══════════════════════════════════════════════════════════ */
.fa-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 12px;
    padding: 16px;
}

.fa-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px 10px;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    color: #333;
    transition: all 0.2s;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.fa-team-card:hover,
.fa-team-card.fa-tc-open {
    border-color: #1a3c5e;
    box-shadow: 0 4px 14px rgba(26,60,94,0.12);
    background: #f4f7fb;
}
.fa-team-card img { width: 50px; height: 50px; object-fit: contain; }
.fa-team-placeholder { font-size: 36px; line-height: 1; }
.fa-tc-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.fa-tc-btn {
    font-size: 10px;
    color: #1a3c5e;
    font-weight: 600;
    margin-top: 2px;
    background: #e8f0fb;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Squad panel */
.fa-squad-panel {
    grid-column: 1 / -1;
    background: #f8fafd;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    margin: 0 4px;
}

.fa-squad-loading {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.fa-squad-wrap { padding: 16px; }

.fa-squad-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a3c5e;
    margin: 0 0 14px;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 8px;
}

.fa-squad-group { margin-bottom: 12px; }

.fa-squad-pos-label {
    font-size: 11px;
    font-weight: 700;
    color: #f0a500;
    background: #1a3c5e;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.fa-squad-players { display: flex; flex-direction: column; gap: 2px; }

.fa-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.12s;
}
.fa-player-row:hover { background: #e8f0fb; }

.fa-player-num {
    min-width: 30px;
    font-size: 12px;
    color: #888;
    font-weight: 600;
}
.fa-player-name {
    flex: 1;
    font-weight: 500;
}
.fa-player-nat {
    font-size: 11px;
    color: #aaa;
}

.fa-squad-count { font-weight: 400; font-size: 10px; color: rgba(255,255,255,0.7); }

.fa-player-meta { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.fa-player-age  { font-size: 10px; color: #1a3c5e; background: #e8f0fb; padding: 2px 6px; border-radius: 8px; }

.fa-squad-empty {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   ARTICLES (derniers articles de la catégorie)
   ══════════════════════════════════════════════════════════ */
.fa-articles-section {
    margin: 32px 0 16px;
    font-family: 'Tahoma', 'Arial', sans-serif;
}

.fa-articles-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a3c5e;
    border-right: 4px solid #f0a500;
    padding-right: 12px;
    margin-bottom: 16px;
}

.fa-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.fa-article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    background: #fff;
}
.fa-article-card:hover {
    border-color: #1a3c5e;
    box-shadow: 0 4px 16px rgba(26,60,94,0.12);
    transform: translateY(-3px);
    color: #1a3c5e;
}

.fa-article-thumb { aspect-ratio: 16/9; overflow: hidden; }
.fa-article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.fa-article-card:hover .fa-article-thumb img { transform: scale(1.05); }

.fa-article-no-thumb {
    background: linear-gradient(135deg, #0d2137, #1a3c5e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.fa-article-body { padding: 12px 14px; flex: 1; }

.fa-article-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fa-article-date {
    font-size: 11px;
    color: #999;
}

.fa-articles-empty {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 20px 0;
}

/* ══════════════════════════════════════════════════════════
   المباراة القادمة (Next Match)
   ══════════════════════════════════════════════════════════ */

/* Header */
.fa-nm-header {
    display: flex;
    align-items: center;
    padding: 20px 12px 16px;
    gap: 6px;
    background: linear-gradient(135deg, #0d2137 0%, #1a3c5e 100%);
    color: #fff;
}
.fa-nm-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.fa-nm-team img {
    width: 54px; height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.fa-nm-team span {
    font-size: 12px; font-weight: 700; line-height: 1.3;
    max-width: 90px;
}
.fa-nm-no-logo { font-size: 34px; line-height: 1; }

.fa-nm-meta {
    flex: 0 0 76px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.fa-nm-vs { font-size: 20px; font-weight: 900; color: #f0a500; letter-spacing: 2px; margin-bottom: 2px; }
.fa-nm-date { font-size: 10px; color: rgba(255,255,255,0.7); }
.fa-nm-time { font-size: 17px; font-weight: 800; color: #f0a500; }
.fa-nm-round { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.fa-nm-note { font-size: 11px; color: #999; font-weight: 400; margin-right: 6px; }

/* Sections */
.fa-nm-section { padding: 12px 14px; border-top: 1px solid #f0f3f7; }
.fa-nm-section-title {
    font-size: 13px; font-weight: 700; color: #1a3c5e;
    margin-bottom: 10px; display: flex; align-items: center; gap: 5px;
}

/* Chaînes TV */
.fa-nm-channels {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #f8fafd; border-radius: 8px;
    font-size: 13px; color: #444;
    border: 1px solid #e8ecf0;
}
.fa-nm-ch-icon { font-size: 20px; flex-shrink: 0; }

/* ── Terrain de foot ──────────────────────────────────────── */
.fa-pitch-wrap { max-width: 340px; margin: 0 auto; }

.fa-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 68 / 105;
    background: linear-gradient(180deg,
        #2e7d32 0%, #347a38 8.3%, #2e7d32 8.3%,
        #2e7d32 16.6%, #347a38 16.6%, #347a38 25%,
        #2e7d32 25%, #2e7d32 33.3%, #347a38 33.3%,
        #347a38 41.6%, #2e7d32 41.6%, #2e7d32 50%,
        #347a38 50%, #347a38 58.3%, #2e7d32 58.3%,
        #2e7d32 66.6%, #347a38 66.6%, #347a38 75%,
        #2e7d32 75%, #2e7d32 83.3%, #347a38 83.3%,
        #347a38 91.6%, #2e7d32 91.6%, #2e7d32 100%
    );
    border: 3px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    overflow: visible;
}

/* Lignes du terrain */
.fa-pm { position: absolute; pointer-events: none; }

.fa-pm-center-line {
    top: 50%; left: 4%; right: 4%;
    height: 2px;
    background: rgba(255,255,255,0.6);
    transform: translateY(-50%);
}

.fa-pm-center-circle {
    top: 50%; left: 50%;
    width: 26%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.fa-pm-area-top {
    top: 3%; left: 22%; right: 22%;
    height: 17%;
    border: 1.5px solid rgba(255,255,255,0.45);
    border-top: none;
}

.fa-pm-area-bottom {
    bottom: 3%; left: 22%; right: 22%;
    height: 17%;
    border: 1.5px solid rgba(255,255,255,0.45);
    border-bottom: none;
}

/* Joueur sur le terrain */
.fa-pp {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    z-index: 3;
}
.fa-pp-circle {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.fa-pp-home .fa-pp-circle { background: #1a3c5e; color: #f0a500; }
.fa-pp-away .fa-pp-circle { background: #c0392b; color: #fff; }

.fa-pp-name {
    font-size: 7.5px; color: #fff; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8);
    white-space: nowrap; max-width: 40px;
    overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* Légende terrain */
.fa-pitch-legend {
    display: flex; justify-content: center; gap: 20px;
    padding: 7px 0 0; font-size: 12px; font-weight: 600;
}
.fa-pl { display: flex; align-items: center; gap: 6px; }
.fa-pl.home { color: #1a3c5e; }
.fa-pl.away { color: #c0392b; }

/* ── جدول المباريات — navigateur de date ────────────────────── */
.fa-sch-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f4f6f8;
    border-bottom: 1px solid #e0e4e9;
    margin-bottom: 6px;
    border-radius: 6px 6px 0 0;
}
.fa-sch-btn {
    background: #fff;
    border: 1px solid #d0d5db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #1a3c5e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.fa-sch-btn:hover:not(:disabled) {
    background: #e4eaf2;
    border-color: #1a3c5e;
}
.fa-sch-btn:disabled {
    opacity: .3;
    cursor: default;
}
.fa-sch-date-label {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1a3c5e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
}
.fa-sch-today {
    background: #c8102e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.6;
}
.fa-sch-matches {
    padding: 4px 0;
}
.fa-pl-dot {
    width: 13px; height: 13px; border-radius: 50%; display: inline-block;
    border: 2px solid rgba(255,255,255,0.8);
}
.fa-pl-dot.home { background: #1a3c5e; }
.fa-pl-dot.away { background: #c0392b; }

/* ── Remplaçants ──────────────────────────────────────────── */
.fa-nm-benches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fa-nm-bench-team {
    font-size: 12px; font-weight: 700; color: #1a3c5e;
    padding-bottom: 5px; margin-bottom: 4px;
    border-bottom: 2px solid #e0e6ed;
}
.fa-nm-bench-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; font-size: 12px;
    border-bottom: 1px solid #f5f7fa;
}
.fa-nm-shirt { font-size: 10px; color: #888; min-width: 24px; font-weight: 700; }
.fa-nm-bname { flex: 1; color: #333; }
.fa-nm-bpos  { font-size: 10px; color: #aaa; }

/* ── Entraîneurs ──────────────────────────────────────────── */
.fa-nm-coaches { display: flex; flex-direction: column; gap: 8px; }
.fa-nm-coach-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #f8fafd;
    border-radius: 8px; font-size: 13px; border: 1px solid #e8ecf0;
}
.fa-nm-coach-badge {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 10px; white-space: nowrap;
}
.fa-nm-coach-badge.home { background: #1a3c5e; color: #f0a500; }
.fa-nm-coach-badge.away { background: #c0392b; color: #fff; }
.fa-nm-coach-name { flex: 1; font-weight: 600; color: #333; }
.fa-nm-coach-nat  { font-size: 11px; color: #aaa; }

/* ── Arbitres ──────────────────────────────────────────────── */
.fa-nm-refs { display: flex; flex-direction: column; gap: 5px; }
.fa-nm-ref-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; background: #f8fafd;
    border-radius: 6px; font-size: 12px; border: 1px solid #f0f3f7;
}
.fa-nm-ref-role {
    font-size: 10px; font-weight: 700; color: #fff;
    background: #f0a500; padding: 2px 8px;
    border-radius: 8px; white-space: nowrap; min-width: 82px; text-align: center;
}
.fa-nm-ref-name { flex: 1; color: #333; font-weight: 500; }
.fa-nm-ref-nat  { font-size: 10px; color: #bbb; }

/* ── Stade ─────────────────────────────────────────────────── */
.fa-nm-venue {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 14px; background: #f8fafd;
    border-radius: 10px; border: 1px solid #e8ecf0;
}
.fa-nm-venue-icon { font-size: 34px; line-height: 1; flex-shrink: 0; }
.fa-nm-venue-name { font-size: 15px; font-weight: 700; color: #1a3c5e; }
.fa-nm-venue-addr { font-size: 12px; color: #888; margin-top: 3px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .fa-tab { font-size: 10px; padding: 10px 3px 7px; min-width: 52px; }
    .fa-tab-ico { font-size: 14px; }
    .fa-team-nm { font-size: 12px; }
    .fa-standings-tbl th,
    .fa-standings-tbl td { padding: 7px 4px; font-size: 11px; }
    .fa-score-num { font-size: 16px; }
    .fa-teams-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 10px; }
    .fa-league-title { font-size: 14px; }
    .fa-articles-grid { grid-template-columns: 1fr 1fr; }
    .fa-player-row { font-size: 12px; }
}

@media (max-width: 400px) {
    .fa-articles-grid { grid-template-columns: 1fr; }
    .fa-tab span:not(.fa-tab-ico) { display: none; }
    .fa-tab { min-width: 42px; }
}

/* ══════════════════════════════════════════════════════════
   النتائج — مباراة قابلة للنقر + درج التفاصيل
   ══════════════════════════════════════════════════════════ */
.fa-match-clickable { cursor: pointer; }
.fa-match-clickable:hover { background: #f0f5ff; }

.fa-details-toggle {
    display: inline-block;
    font-size: 10px;
    color: #1a3c5e;
    background: #e8f0fb;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 3px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s;
}
.fa-match-clickable:hover .fa-details-toggle { background: #c8daf5; }

.fa-match-detail-drawer {
    border-top: 1px solid #e8ecf0;
    background: #f8fafd;
}

/* Mini-tabs dans les détails */
.fa-detail-content { padding: 12px; }

.fa-detail-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fa-dtab {
    padding: 5px 12px;
    border: 1px solid #d0d8e4;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    color: #555;
    transition: all 0.15s;
    white-space: nowrap;
}
.fa-dtab:hover,
.fa-dtab.active {
    background: #1a3c5e;
    color: #fff;
    border-color: #1a3c5e;
}

.fa-dpanel { display: none; }
.fa-dpanel.active { display: block; }

/* Événements (goals, subs, cards) */
.fa-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 3px;
    border: 1px solid transparent;
}
.fa-event-row.ev-home { background: #eef4ff; border-color: #d0def5; }
.fa-event-row.ev-away { background: #fff0f0; border-color: #f5d0d0; }
.fa-event-row:not(.ev-home):not(.ev-away) { background: #f5f7fa; }

.fa-ev-min  { min-width: 34px; font-size: 11px; color: #888; font-weight: 700; }
.fa-ev-icon { font-size: 14px; flex-shrink: 0; }
.fa-ev-name { flex: 1; font-weight: 600; color: #333; }
.fa-ev-out  { flex: 1; color: #c0392b; font-weight: 500; }
.fa-ev-in   { flex: 1; color: #27ae60; font-weight: 500; }
.fa-ev-arr  { color: #999; font-size: 12px; }
.fa-ev-detail { font-size: 10px; color: #888; background: #eee; padding: 1px 6px; border-radius: 8px; }
.fa-ev-assist { font-size: 11px; color: #666; }

/* Badge formation */
.fa-formation-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #f0a500;
    color: #fff;
    padding: 2px 7px;
    border-radius: 8px;
    margin-right: 6px;
    vertical-align: middle;
}
.fa-formation-badge.home { background: #1a3c5e; }
.fa-formation-badge.away { background: #c0392b; }

.fa-nm-formations { display: inline-flex; gap: 5px; margin-right: 6px; }

/* Terrain dans les détails match */
.fa-detail-pitch-wrap { margin-top: 8px; }
.fa-detail-pitch-label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0;
    color: #fff;
}
.fa-detail-pitch-label.home { background: #1a3c5e; border-radius: 6px 6px 0 0; }
.fa-detail-pitch-label.away { background: #c0392b; border-radius: 0 0 6px 6px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   الفرق — فيشة كاملة (stade + coaches + photos)
   ══════════════════════════════════════════════════════════ */
.fa-ti-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e6ed;
}
.fa-ti-logo    { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.fa-ti-founded { font-size: 12px; color: #888; margin-top: 2px; }
.fa-ti-country { font-size: 11px; color: #aaa; }

.fa-ti-venue {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    background: #f0f5fb;
    border-radius: 8px;
    border: 1px solid #d8e4f0;
    margin-bottom: 14px;
}
.fa-ti-venue-img {
    width: 90px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.fa-ti-venue-info { flex: 1; }
.fa-ti-venue-name { font-size: 13px; font-weight: 700; color: #1a3c5e; margin-bottom: 3px; }
.fa-ti-venue-city { font-size: 11px; color: #666; margin-bottom: 2px; }
.fa-ti-venue-cap  { font-size: 11px; color: #888; }

/* Photo joueur dans la liste squad */
.fa-player-photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e0e6ed;
}

@media (max-width: 600px) {
    .fa-ti-venue-img { display: none; }
    .fa-detail-tabs { gap: 4px; }
    .fa-dtab { font-size: 10px; padding: 4px 8px; }
}