/* Football Rwanda - joined theme styles (23 files). Built automatically, do not edit. */

/* ---- fonts.css ---- */
/* Inter (variable, latin) — self-hosted, no Google Fonts request */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Saira (variable weight + width, latin) — display face: titles and match numerals.
   SIL Open Font License 1.1, see assets/fonts/LICENSE-Saira.txt. Only downloaded
   by pages that use it.
   Weight capped at 600 (2026-10-18): titles were too heavy at 800/900. Any
   heavier request in the stylesheets renders at 600 (no faux bold); to allow
   heavier again, raise the second number. */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100 600;
    font-stretch: 50% 125%;
    font-display: swap;
    src: url('https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/fonts/saira-latin-wdth-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- variables.css ---- */
/* ======================================================
   Football Rwanda Design System v1.0
====================================================== */

:root{

    /* COLORS */

    --fr-primary:#009879;
    --fr-primary-dark:#007863;

    --fr-secondary:#F4B400;

    --fr-blue:#1E88E5;

    --fr-danger:#E53935;

    --fr-warning:#FFC107;

    --fr-success:#43A047;

    /* BACKGROUND */

    --fr-bg:#F5F7FA;

    --fr-card:#FFFFFF;

    /* TEXT */

    --fr-text:#222;

    --fr-text-light:#666;

    --fr-border:#E5E5E5;

    /* TYPOGRAPHY */

    --fr-font:'Inter',sans-serif;

    /* SPACING */

    --fr-radius:16px;

    --fr-shadow:0 8px 24px rgba(0,0,0,.08);

    --fr-transition:.3s;

    --fr-container:1400px;

}

/* ---- global.css ---- */
/* ==========================================================
   Football Rwanda
   Global Styles
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    padding:0;

    font-family:'Inter',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:#334155;

    background:#f8fafc;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   CONTAINER
========================================================== */

.fr-container{

    max-width:1200px;

    margin:auto;

    padding:20px 20px;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0;

    margin-bottom:15px;

    color:#0f172a;

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:42px;

}

h2{

    font-size:32px;

}

h3{

    font-size:24px;

}

h4{

    font-size:20px;

}

p{

    margin:0 0 18px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:#2563eb;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:#1d4ed8;

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ==========================================================
   LISTS
========================================================== */

ul,
ol{

    margin:0 0 20px;

    padding-left:20px;

}

li{

    margin-bottom:8px;

}

/* ==========================================================
   BUTTONS
========================================================== */

button,
input[type="submit"]{

    cursor:pointer;

    transition:.30s;

}

/* ==========================================================
   FORMS
========================================================== */

input,
select,
textarea{

    width:100%;

    padding:12px 15px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:15px;

    transition:.25s;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ==========================================================
   TABLES
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#f1f5f9;

    text-align:left;

    padding:14px;

}

td{

    padding:14px;

    border-bottom:1px solid #e5e7eb;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    h1{

        font-size:36px;

    }

    h2{

        font-size:28px;

    }

}

@media(max-width:768px){

    .fr-container{

        padding:25px 15px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

}

/* ==========================================================
   HEADER
========================================================== */

.fr-header{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    position:sticky;

    top:0;

    z-index:999;

}

.fr-header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}

.fr-logo{

    font-size:28px;

    font-weight:800;

    color:var(--fr-primary);

}

.fr-main{

    min-height:70vh;

}

/* ==========================================================
   FOOTER
========================================================== */

.fr-footer{

    background:#0f172a;

    color:#fff;

    margin-top:80px;

}

.fr-footer h3,
.fr-footer h4{

    color:#fff;

}

.fr-footer ul{

    list-style:none;

    margin:0;

    padding:0;

}

.fr-footer li{

    margin-bottom:12px;

}

.fr-footer a{

    color:#cbd5e1;

}

.fr-footer a:hover{

    color:#fff;

}

/* ---------- BK Pro League logo (card + home table) ---------- */
html body .fr-competition-image .fr-competition-logo-img {
    display: block;
    width: auto;
    max-width: 70%;
    height: 130px;
    margin: 0 auto;
    object-fit: contain;
    padding: 0;
    background: none;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}


/* ---- components.css ---- */
/*
==========================================================
FOOTBALL RWANDA
COMPONENTS
File: components.css
==========================================================
*/

/*
 * Shared component styles will be added here.
 *
 * Page Header styles are handled separately by:
 * components/page-header.css
 */

/* ---- header.css ---- */
/* ==========================================================
   FOOTBALL RWANDA
   GLOBAL HEADER / NAVIGATION
   Final clean version
   ========================================================== */


/* ==========================================================
   1. HEADER
   ========================================================== */

.fr-header {
    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e7edf3;

    box-sizing: border-box;
}


/* WordPress Admin Bar
   Keep the site header below the admin bar for logged-in users. */

body.admin-bar .fr-header {
    top: 32px;
}


/* ==========================================================
   2. HEADER INNER
   ========================================================== */

.fr-header-inner {
    width: 100%;
    min-width: 0;
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    box-sizing: border-box;
}


/* ==========================================================
   3. BRANDING
   ========================================================== */

.fr-branding {
    flex: 0 0 auto;
    min-width: 0;

    display: flex;
    align-items: center;
}

.fr-branding a {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.fr-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.fr-branding .custom-logo,
.fr-branding img {
    display: block;

    width: auto;
    max-width: 155px;
    max-height: 54px;

    object-fit: contain;
}


/* ==========================================================
   4. TEXT LOGO FALLBACK
   ========================================================== */

.fr-logo {
    display: inline-flex;
    align-items: center;

    color: var(--fr-primary, #009f83);
    text-decoration: none;

    font-size: 26px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}

.fr-logo:hover {
    color: var(--fr-primary, #009f83);
}

.fr-logo-image {
    display: block;

    width: auto;
    height: 54px;
    max-width: 220px;

    object-fit: contain;

    transition: opacity 0.2s ease;
}

.fr-logo:hover .fr-logo-image {
    opacity: 0.9;
}


/* ==========================================================
   5. PRIMARY NAVIGATION
   ========================================================== */

.fr-navigation {
    flex: 0 1 auto;
    min-width: 0;

    margin-left: auto;

    display: flex;
    align-items: center;
}

.fr-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.fr-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}

.fr-menu > li > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 72px;
    padding: 0 12px;

    color: var(--fr-navy, #0f1f35);

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.fr-menu > li > a:hover {
    color: var(--fr-green, #009b84);
}


/* ==========================================================
   6. ACTIVE MENU ITEM
   ========================================================== */

.fr-menu > li.current-menu-item > a,
.fr-menu > li.current-menu-parent > a,
.fr-menu > li.current-menu-ancestor > a {
    color: var(--fr-green, #009b84);
}

.fr-menu > li.current-menu-item > a::before,
.fr-menu > li.current-menu-parent > a::before,
.fr-menu > li.current-menu-ancestor > a::before {
    content: "";

    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;

    height: 3px;

    background: var(--fr-green, #009b84);
    border-radius: 3px 3px 0 0;
}


/* ==========================================================
   7. DROPDOWN
   ========================================================== */

.fr-menu .sub-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;

    min-width: 220px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 0 0 10px 10px;

    box-shadow: 0 12px 30px rgba(15, 31, 53, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 10000;
}

.fr-menu > li:hover > .sub-menu,
.fr-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Dropdown links */

.fr-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.fr-menu .sub-menu a {
    display: block;

    padding: 11px 14px;

    color: #24364d;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;

    text-decoration: none;

    border-radius: 7px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.fr-menu .sub-menu a:hover {
    color: var(--fr-green, #009b84);
    background: #f0f8f6;
}


/* Dropdown arrow */

.fr-menu > .menu-item-has-children > a::after {
    content: "⌄";

    margin-left: 7px;

    font-size: 12px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.fr-menu > .menu-item-has-children:hover > a::after,
.fr-menu > .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}


/* ==========================================================
   8. MOBILE TOGGLE
   ========================================================== */

.fr-menu-toggle {
    display: none;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    padding: 8px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.fr-menu-toggle span {
    display: block;

    width: 100%;
    height: 3px;

    margin: 6px 0;

    background: #111827;
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* ==========================================================
   9. MOBILE MENU
   ========================================================== */

@media (max-width: 1080px) {

    .fr-header-inner {
        min-height: 72px;
        gap: 16px;
    }

    .fr-navigation {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: none;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 18px 24px;

        box-sizing: border-box;

        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }

    .fr-navigation.is-open {
        display: block;
    }

    .fr-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        gap: 0;
    }

    .fr-menu > li {
        width: 100%;
    }

    .fr-menu > li > a {
        min-height: auto;
        width: 100%;

        padding: 13px 0;

        font-size: 16px;
        line-height: 1.3;

        border-radius: 0;
    }

    .fr-menu > li.current-menu-item > a::before,
    .fr-menu > li.current-menu-parent > a::before,
    .fr-menu > li.current-menu-ancestor > a::before {
        display: none;
    }

    .fr-menu > li.current-menu-item > a,
    .fr-menu > li.current-menu-parent > a,
    .fr-menu > li.current-menu-ancestor > a {
        background: transparent;
    }

    .fr-menu .sub-menu {
        position: static;

        display: none;

        min-width: 0;

        padding: 0 0 6px;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .fr-menu > li:hover > .sub-menu,
    .fr-menu > li:focus-within > .sub-menu {
        display: block;
    }

    .fr-menu .sub-menu a {
        padding: 10px 12px;

        font-size: 14px;
        background: #f7fafb;
    }

    .fr-menu > .menu-item-has-children > a::after {
        margin-left: auto;
    }

    .fr-menu-toggle {
        display: block;
    }
}


/* ==========================================================
   10. TABLET / NARROW DESKTOP
   ========================================================== */

@media (max-width: 1299px) and (min-width: 1081px) {

    .fr-header-inner {
        gap: 14px;
    }

    .fr-menu {
        gap: 0;
    }

    .fr-menu > li > a {
        min-height: 78px;
        padding: 0 9px;

        font-size: 14px;
    }

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 140px;
        max-height: 60px;
    }

    .fr-logo-image {
        height: 58px;
        max-width: 200px;
    }
}


/* ==========================================================
   11. MOBILE LOGO
   ========================================================== */

@media (max-width: 1080px) {

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 140px;
        max-height: 58px;
    }

    .fr-logo-image {
        height: 52px;
        max-width: 200px;
    }
}


/* ==========================================================
   12. SMALL MOBILE
   ========================================================== */

@media (max-width: 576px) {

    .fr-header-inner {
        min-height: 68px;
        gap: 10px;
    }

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 120px;
        max-height: 50px;
    }

    .fr-logo {
        font-size: 22px;
    }

    .fr-logo-image {
        height: 45px;
        max-width: 175px;
    }

    .fr-navigation {
        padding: 14px 20px;
    }

    .fr-menu-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}


/* ==========================================================
   13. WORDPRESS ADMIN BAR — MOBILE
   ========================================================== */

@media (max-width: 782px) {

    body.admin-bar .fr-header {
        top: 46px;
    }
}


/* ==========================================================
   14. MOBILE TOGGLE ACTIVE STATE
   ========================================================== */

.fr-menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.fr-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.fr-menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* ==========================================================
   15. SAFE BOX SIZING
   ========================================================== */

.fr-header,
.fr-header-inner,
.fr-navigation,
.fr-menu,
.fr-menu > li,
.fr-menu > li > a {
    box-sizing: border-box;
}


/* ==========================================================
   HEADER — COMPACT DESKTOP + LOGIN
   Based on current header.css.
   Only header sizing/navigation is adjusted.
   ========================================================== */

.fr-header-inner {
    min-height: 72px;
}

.fr-navigation {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.fr-menu {
    gap: 2px;
}

.fr-menu > li > a {
    min-height: 72px;
    padding: 0 11px;
}

/* Login button added in header.php */
.fr-header-login {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 18px;

    margin-left: 12px;

    background: var(--fr-green, #009f83);
    color: #ffffff !important;

    border: 1px solid var(--fr-green, #009f83);
    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.fr-header-login:hover {
    background: #008b76;
    border-color: #008b76;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.fr-header-login:focus-visible {
    outline: 2px solid #123c66;
    outline-offset: 3px;
}

/* Mobile: Login stays in the compact header beside the menu toggle. */
@media (max-width: 1080px) {
    .fr-header-inner {
        min-height: 72px;
    }

    .fr-header-login {
        min-height: 38px;
        padding: 0 15px;
        margin-left: auto;
        margin-right: 8px;
        font-size: 13px;
    }
}

/* Very small screens */
@media (max-width: 576px) {
    .fr-header-inner {
        min-height: 68px;
    }

    .fr-header-login {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
}


/* ==========================================================
   HEADER SEARCH ICON
========================================================== */

.fr-header-search {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    color: #123c66;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.fr-header-search:hover,
.fr-header-search:focus-visible {
    color: #009f83;
    border-color: #009f83;
}


/* ---- header-pro.css ---- */
/* Football Rwanda - Header PRO (loaded after header.css) */

html body .fr-header {
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid #e3e9ef;
    transition: box-shadow .2s ease, background .2s ease;
}
html body .fr-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 1px 2px rgba(6,24,47,.05), 0 10px 30px rgba(6,24,47,.08); }
html body .fr-header-inner { min-height: 76px; gap: 20px; }

/* Nav links = pills */
html body .fr-menu { gap: 2px; }
html body .fr-menu > li > a {
    min-height: 42px; padding: 0 14px; border-radius: 12px;
    color:#06182f; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em;
}
html body .fr-menu > li > a:hover { background:#f1f5f8; color:#06182f; }
html body .fr-menu > li.current-menu-item > a,
html body .fr-menu > li.current-menu-parent > a,
html body .fr-menu > li.current-menu-ancestor > a { background:#e6f4f2; color:#0a7f78; }
html body .fr-menu > li.current-menu-item > a::before,
html body .fr-menu > li.current-menu-parent > a::before,
html body .fr-menu > li.current-menu-ancestor > a::before { display:none; }
html body .fr-menu > .menu-item-has-children > a::after {
    content:""; width:6px; height:6px; margin: -3px 0 0 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity:.7; font-size:0;
}
html body .fr-menu > .menu-item-has-children:hover > a::after,
html body .fr-menu > .menu-item-has-children:focus-within > a::after { transform: rotate(225deg); margin-top: 3px; }

/* Dropdown */
html body .fr-menu .sub-menu {
    top: 100%; left: -6px; min-width: 232px; padding: 8px; margin-top: 8px;
    border: 1px solid #e3e9ef; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 18px 44px rgba(6,24,47,.14);
}
html body .fr-menu .sub-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* hover bridge */
html body .fr-menu .sub-menu a { padding: 11px 14px; border-radius: 12px; color:#06182f; font-weight:600; }
html body .fr-menu .sub-menu a:hover { background:#e6f4f2; color:#0a7f78; }
html body .fr-menu .sub-menu .current-menu-item > a { background:#e6f4f2; color:#0a7f78; }

/* Search + login */
html body .fr-header-search { border:1px solid #e3e9ef; border-radius: 12px; width:42px; height:42px; color:#06182f; transition: background .15s, border-color .15s; }
html body .fr-header-search:hover { background:#f1f5f8; border-color:#cfd9e2; }
html body .fr-header-login {
    min-height: 42px; padding: 0 20px; border: 0; box-shadow:none; border-radius: 12px; background:#06182f; color:#fff;
    font-weight: 700; transition: background .15s, transform .15s;
}
html body .fr-header-login:hover { background:#0a7f78; color:#fff; }

/* Mobile */
html body .fr-menu-toggle { border-radius: 12px; border:1px solid #e3e9ef; flex-basis:42px; width:42px; height:42px; padding: 11px 10px; }
html body .fr-menu-toggle span { height:2px; margin:5px 0; background:#06182f; }
html body .fr-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html body .fr-menu-toggle.is-active span:nth-child(2) { opacity:0; }
html body .fr-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
    html body .fr-header-inner { min-height: 68px; gap: 10px; }
    html body .fr-navigation {
        left: 12px; right: 12px; top: calc(100% + 8px); width: auto;
        max-height: calc(100vh - 110px); overflow-y: auto;
        padding: 10px; border: 1px solid #e3e9ef; border-radius: 18px;
        background:#fff; box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 22px 50px rgba(6,24,47,.18);
    }
    html body .fr-menu > li > a { padding: 14px 14px; border-radius: 12px; font-size: 16px; min-height: 0; justify-content: space-between; }
    html body .fr-menu > li + li { border-top: 1px solid #f0f3f6; }
    html body .fr-menu > .menu-item-has-children > a::after { margin: -3px 4px 0 auto; }
    html body .fr-menu > .menu-item-has-children:hover > a::after,
    html body .fr-menu > .menu-item-has-children:focus-within > a::after { transform: rotate(45deg); margin-top:-3px; }
    html body .fr-menu > .menu-item-has-children.is-expanded > a::after { transform: rotate(225deg); margin-top: 3px; }
    html body .fr-menu .sub-menu { display:none; margin:0 0 6px 8px; padding: 2px 0 4px 10px; border:0; border-left: 2px solid #e6f4f2; border-radius:0; box-shadow:none; background:transparent; }
    html body .fr-menu .sub-menu::before { display:none; }
    html body .fr-menu > li:hover > .sub-menu,
    html body .fr-menu > li:focus-within > .sub-menu { display:none; }
    html body .fr-menu > li.is-expanded > .sub-menu { display:block; }
    html body .fr-menu .sub-menu a { background:transparent; padding: 11px 12px; }
}
@media (max-width: 420px) {
    html body .fr-header-login { padding: 0 14px; }
}

/* ===== Rich sub-menus (icon + label + description) ===== */
html body .fr-menu .sub-menu { min-width: 320px; padding: 10px; }
html body .fr-menu .sub-menu a { display:flex; align-items:center; gap: 14px; padding: 10px 12px; }
html body .fr-menu .sub-menu .fr-menu-icon {
    flex: 0 0 40px; width: 40px; height: 40px; display:grid; place-items:center;
    border-radius: 12px; background:#f1f5f8; color:#0a7f78; transition: background .15s, color .15s;
}
html body .fr-menu .sub-menu a:hover .fr-menu-icon,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-icon { background:#0a7f78; color:#fff; }
html body .fr-menu .sub-menu .fr-menu-icon--logo,
html body .fr-menu .sub-menu a:hover .fr-menu-icon--logo,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-icon--logo { background: transparent; }
html body .fr-menu .sub-menu .fr-menu-icon--logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
html body .fr-menu .sub-menu .fr-menu-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
html body .fr-menu .sub-menu .fr-menu-label { font-size:14.5px; font-weight:700; line-height:1.25; color:#06182f; }
html body .fr-menu .sub-menu a:hover .fr-menu-label,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-label { color:#0a7f78; }
html body .fr-menu .sub-menu .fr-menu-desc { font-size:12.5px; font-weight:500; line-height:1.3; color:#62748a; }
html body .fr-menu .sub-menu .fr-menu-competition + .fr-menu-competition,
html body .fr-menu .sub-menu li { margin: 0; }

@media (max-width: 1080px) {
    html body .fr-menu .sub-menu { min-width: 0; }
    html body .fr-menu .sub-menu .fr-menu-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
    html body .fr-menu .sub-menu .fr-menu-label { font-size: 15px; }
}

/* Last dropdown opens towards the left so it never leaves the screen */
@media (min-width: 1081px) {
    html body .fr-menu > li:last-child > .sub-menu { left: auto; right: -6px; }
}

/* ===== Account area (Sign in / Create account / member chip) ===== */
html body .fr-header-signin {
    display:inline-flex; align-items:center; min-height:42px; padding: 0 14px; border-radius:12px;
    color:#06182f; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap;
    transition: background .15s;
}
html body .fr-header-signin:hover { background:#f1f5f8; }

.fr-account-chip { position:relative; }
.fr-account-chip-link {
    display:inline-flex; align-items:center; gap:10px; min-height:42px; padding: 0 12px 0 5px;
    border:1px solid #e3e9ef; border-radius: 999px; color:#06182f; text-decoration:none; font-weight:700; font-size:14.5px;
    transition: background .15s;
}
.fr-account-chip-link:hover { background:#f1f5f8; }
.fr-account-chip .fr-account-avatar { flex:0 0 32px; width:32px; height:32px; font-size:14px; }
.fr-account-menu {
    position:absolute; right:0; top:100%; min-width: 210px; margin:8px 0 0; padding:8px; list-style:none;
    background:#fff; border:1px solid #e3e9ef; border-radius:16px;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 18px 44px rgba(6,24,47,.14);
    opacity:0; visibility:hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s; z-index: 10000;
}
.fr-account-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.fr-account-chip:hover .fr-account-menu,
.fr-account-chip:focus-within .fr-account-menu { opacity:1; visibility:visible; transform:none; }
.fr-account-menu a { display:block; padding: 11px 14px; border-radius:10px; color:#06182f; font-size:14px; font-weight:600; text-decoration:none; }
.fr-account-menu a:hover { background:#e6f4f2; color:#0a7f78; }

.fr-nav-account { display:none; }

@media (max-width: 1080px) {
    html body .fr-header-signin { display:none; }
    html body .fr-header-login { padding: 0 14px; font-size: 13.5px; }
    .fr-account-chip-name { display:none; }
    .fr-account-chip-link { padding: 4px; }
    .fr-account-menu { display:none; }
    .fr-nav-account { display:flex; gap:8px; margin-top: 8px; padding-top: 12px; border-top:1px solid #f0f3f6; }
    .fr-nav-account a {
        flex:1; text-align:center; padding: 13px 10px; border-radius:12px; border:1px solid #e3e9ef;
        color:#06182f; font-weight:700; font-size:15px; text-decoration:none;
    }
    .fr-nav-account a.is-primary { background:#06182f; border-color:#06182f; color:#fff; }
}
.fr-account-chip-link, .fr-account-chip-link:hover, .fr-account-chip-link:focus { color:#06182f; }
.fr-account-chip-name { color:#06182f; }
.fr-btn-short { display:none; }
@media (max-width: 480px) {
    .fr-btn-long { display:none; }
    .fr-btn-short { display:inline; }
    html body .fr-header-inner { gap: 8px; }
}


/* ==========================================================
   BRAND MARK (emblem + wordmark, template-parts/header/branding.php)
   ========================================================== */

html body .fr-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

html body .fr-brandmark-icon {
    display: block;
    flex: 0 0 auto;
}

html body .fr-brandmark-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-stretch: 87.5%;
    line-height: .95;
    text-transform: uppercase;
    white-space: nowrap;
}

html body .fr-brandmark-text b {
    color: #031826;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
}

html body .fr-brandmark-text i {
    color: #00a07f;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .2em;
}

html body .fr-brandmark:hover .fr-brandmark-text b {
    color: #0a7f78;
}

/* Mid-size screens (full menu, little room): emblem only, no "Home"
   item (the emblem leads home), tighter links. */
@media (max-width: 1299px) and (min-width: 1081px) {
    html body .fr-brandmark-text { display: none; }
    html body .fr-menu > li.fr-menu-home { display: none; }
}

/* Desktop: links a little tighter than the original 14px, so the
   wordmark, the menu and the buttons fit side by side. */
@media (min-width: 1081px) {
    html body .fr-header-inner { gap: 12px; }
    html body .fr-menu > li > a { padding: 0 10px; font-size: 14px; }
    html body .fr-header-login { padding: 0 16px; }
}

/* Never let the menu slide under the logo if it is still too wide. */
html body .fr-navigation,
html body .fr-menu { justify-content: safe flex-end; }

/* Small phones: shorter wordmark lines. */
@media (max-width: 420px) {
    html body .fr-brandmark { gap: 8px; }
    html body .fr-brandmark-icon { width: 38px; height: 38px; }
    html body .fr-brandmark-text b,
    html body .fr-brandmark-text i { font-size: 13.5px; }
}

/* ---- header-bar.css ---- */
/* ==========================================================
   Football Rwanda - Header "score bar" (loaded after header-pro.css)
   header.php + template-parts/header/{ticker,subnav}.php

   1. Match ticker   white strip, scrolls away with the page
   2. Green bar      logo, menu, search, account (sticky)
   3. Competitions   pills under the bar (part of the sticky header)

   Green #3A9D23 (asked by the site owner). White text on it is
   bold and >= 14px; the active item is a white pill with dark green
   text (#24701a, 6:1 on white).
   ========================================================== */

:root {
    --hb-green: #3A9D23;
    --hb-green-ink: #24701a;
    --hb-white-08: rgba(255, 255, 255, .08);
    --hb-white-16: rgba(255, 255, 255, .16);
    --hb-white-28: rgba(255, 255, 255, .28);
    --hb-navy: #06182f;
    --hb-line: #e3e9ef;
    --hb-live: #e5484d;
}

.fr-hwrap {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    box-sizing: border-box;
}


/* ==========================================================
   1. MATCH TICKER
   ========================================================== */

.fr-ticker {
    background: #fff;
    border-bottom: 1px solid var(--hb-line);
}

.fr-ticker-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
}

.fr-ticker-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--hb-green);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.fr-ticker-tag.is-live {
    background: var(--hb-live);
}

.fr-ticker-dot,
.fr-tk-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: fr-hb-pulse 1.4s ease-in-out infinite;
}

.fr-ticker-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hb-navy);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.fr-ticker-arrow:hover {
    background: #f1f5f8;
}

.fr-ticker-arrow[hidden] {
    display: none;
}

.fr-ticker-list {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.fr-ticker-list::-webkit-scrollbar {
    display: none;
}

.fr-tk-day {
    flex: 0 0 auto;
    margin: 0 2px 0 6px;
    color: var(--hb-navy);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.fr-tk-day:first-child {
    margin-left: 0;
}

.fr-tk-item {
    flex: 0 0 auto;
    margin: 0;
}

.fr-tk-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--hb-line);
    border-radius: 10px;
    background: #fff;
    color: var(--hb-navy);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, box-shadow .15s;
}

.fr-tk-item a:hover {
    border-color: #c9d6e2;
    box-shadow: 0 4px 12px rgba(6, 24, 47, .08);
}

.fr-tk-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 34px;
    color: #5b6b7b;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fr-tk-item.is-scheduled .fr-tk-state {
    color: var(--hb-navy);
}

.fr-tk-item.is-live a {
    border-color: #f5c2c4;
    background: #fff5f5;
}

.fr-tk-item.is-live .fr-tk-state {
    color: var(--hb-live);
}

.fr-tk-item.is-live .fr-live-clock:empty::before {
    content: "LIVE";
}

.fr-tk-item.is-postponed .fr-tk-state {
    color: #b45309;
}

.fr-tk-team {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

.fr-tk-team img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.fr-tk-code {
    font-size: 10px;
    font-weight: 800;
    color: var(--hb-navy);
    letter-spacing: -.02em;
}

.fr-tk-score {
    min-width: 34px;
    color: var(--hb-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.fr-tk-item.is-live .fr-tk-score {
    color: var(--hb-live);
}

@keyframes fr-hb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}


/* ==========================================================
   2. GREEN BAR
   ========================================================== */

html body .fr-header.fr-header--bar,
html body .fr-header.fr-header--bar.is-scrolled {
    background: var(--hb-green);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
}

html body .fr-header.fr-header--bar.is-scrolled {
    box-shadow: 0 8px 24px rgba(6, 24, 47, .18);
}

html body .fr-header--bar .fr-header-inner {
    min-height: 64px;
    gap: 14px;
}

/* Logo on green: white wordmark, flag-yellow "DATA" */
html body .fr-header--bar .fr-brandmark-text b,
html body .fr-header--bar .fr-brandmark:hover .fr-brandmark-text b {
    color: #fff;
}

html body .fr-header--bar .fr-brandmark-text i {
    color: #FAD201;
}

html body .fr-header--bar .fr-brandmark-icon {
    box-shadow: 0 0 0 1px var(--hb-white-28);
    border-radius: 11px;
}

/* Desktop menu: white links, active item = white pill (like "SCORES") */
@media (min-width: 1081px) {

    html body .fr-header--bar .fr-menu > li > a {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
    }

    html body .fr-header--bar .fr-menu > li > a:hover,
    html body .fr-header--bar .fr-menu > li:focus-within > a {
        background: var(--hb-white-16);
        color: #fff;
    }

    html body .fr-header--bar .fr-menu > li.current-menu-item > a,
    html body .fr-header--bar .fr-menu > li.current-menu-parent > a,
    html body .fr-header--bar .fr-menu > li.current-menu-ancestor > a {
        background: #fff;
        color: var(--hb-green-ink);
        box-shadow: 0 2px 8px rgba(6, 24, 47, .12);
    }

    html body .fr-header--bar .fr-menu .sub-menu {
        margin-top: 12px;
    }

    html body .fr-header--bar .fr-menu .sub-menu::before {
        top: -14px;
        height: 14px;
    }
}

/* Search field */
.fr-hsearch {
    position: relative;
    flex: 0 1 260px;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--hb-white-28);
    border-radius: 999px;
    background: var(--hb-white-16);
    color: #fff;
    box-sizing: border-box;
    transition: background .15s, border-color .15s;
}

.fr-hsearch:hover {
    background: rgba(255, 255, 255, .22);
}

.fr-hsearch:focus-within {
    background: #fff;
    border-color: #fff;
    color: var(--hb-navy);
}

.fr-hsearch svg {
    flex: 0 0 auto;
}

.fr-hsearch input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

.fr-hsearch input::placeholder {
    color: rgba(255, 255, 255, .85);
    opacity: 1;
}

.fr-hsearch:focus-within input::placeholder {
    color: #8193a6;
}

.fr-hsearch kbd {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--hb-white-16);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.fr-hsearch:focus-within kbd {
    display: none;
}

.fr-hsearch .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Search icon (smaller screens) + account: round white-line buttons */
html body .fr-header--bar .fr-header-search,
.fr-header-user {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    text-decoration: none;
    transition: background .15s;
}

html body .fr-header--bar .fr-header-search:hover,
.fr-header-user:hover,
.fr-header-user:focus-visible {
    background: var(--hb-white-16);
    color: #fff;
}

/* Wide screens: the field; below: the icon */
html body .fr-header--bar .fr-header-search {
    display: none;
}

/* Field on every desktop width (it shrinks, the menu does not);
   the icon only with the mobile menu. */
@media (max-width: 1080px) {
    .fr-hsearch {
        display: none;
    }

    html body .fr-header--bar .fr-header-search {
        display: inline-grid;
    }
}

/* Narrower desktops: no "Ctrl K" hint, shorter field. */
@media (min-width: 1081px) and (max-width: 1299px) {
    .fr-hsearch kbd {
        display: none;
    }
}

/* Member chip on green */
html body .fr-header--bar .fr-account-chip-link,
html body .fr-header--bar .fr-account-chip-link:hover,
html body .fr-header--bar .fr-account-chip-link:focus {
    border-color: var(--hb-white-28);
    color: #fff;
}

html body .fr-header--bar .fr-account-chip-link:hover {
    background: var(--hb-white-16);
}

html body .fr-header--bar .fr-account-chip-name {
    color: #fff;
}

html body .fr-header--bar .fr-account-chip .fr-account-avatar {
    background: #fff;
    color: var(--hb-green-ink);
}

/* Burger: white lines, no frame */
html body .fr-header--bar .fr-menu-toggle {
    border-color: var(--hb-white-28);
}

html body .fr-header--bar .fr-menu-toggle span {
    background: #fff;
}

@media (max-width: 1080px) {
    html body .fr-header--bar .fr-header-inner {
        min-height: 60px;
        gap: 6px;
    }

    html body .fr-header--bar .fr-header-search {
        margin-left: auto;
    }

    /* The mobile menu panel stays white (header-pro.css), active item in green. */
    html body .fr-header--bar .fr-menu > li.current-menu-item > a,
    html body .fr-header--bar .fr-menu > li.current-menu-parent > a,
    html body .fr-header--bar .fr-menu > li.current-menu-ancestor > a,
    html body .fr-header--bar .fr-menu .sub-menu .current-menu-item > a {
        background: #eaf6e6;
        color: var(--hb-green-ink);
    }
}


/* ==========================================================
   3. COMPETITIONS ROW
   ========================================================== */

.fr-hsub {
    border-top: 1px solid var(--hb-white-16);
    background: var(--hb-green);
}

.fr-hsub-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fr-hsub-inner::-webkit-scrollbar {
    display: none;
}

.fr-hsub-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fr-hsub-list li {
    flex: 0 0 auto;
    margin: 0;
}

.fr-hsub-pill,
.fr-hsub-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.fr-hsub-pill:hover,
.fr-hsub-link:hover {
    background: var(--hb-white-16);
    color: #fff;
}

.fr-hsub-pill.is-active,
.fr-hsub-link.is-active {
    background: #fff;
    color: var(--hb-green-ink);
}

.fr-hsub-logo {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
}

.fr-hsub-logo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.fr-hsub-links .fr-hsub-link {
    font-weight: 600;
}

@media (max-width: 1080px) {
    .fr-hsub-inner {
        justify-content: flex-start;
        min-height: 44px;
        gap: 4px;
    }

    .fr-hsub-pill,
    .fr-hsub-link {
        height: 32px;
        padding: 0 12px;
        font-size: 13.5px;
    }
}

@media (max-width: 600px) {
    .fr-hwrap {
        width: calc(100% - 24px);
    }

    .fr-ticker-inner {
        min-height: 50px;
        gap: 8px;
    }

    .fr-ticker-tag {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-ticker-dot,
    .fr-tk-live-dot {
        animation: none;
    }

    .fr-ticker-list {
        scroll-behavior: auto;
    }
}


/* ==========================================================
   Fit: the menu keeps its width, the search field gives way.
   Logged-in members: round avatar only (no name), like the
   visitors' round account icon.
   ========================================================== */

@media (min-width: 1081px) {
    html body .fr-header--bar .fr-navigation {
        flex: 0 0 auto;
    }

    html body .fr-header--bar .fr-hsearch {
        flex: 1 1 240px;
        max-width: 260px;
        min-width: 150px;
    }

    html body .fr-header--bar .fr-account-chip-name {
        display: none;
    }

    html body .fr-header--bar .fr-account-chip-link {
        gap: 0;
        min-height: 40px;
        padding: 3px;
        border: 1px solid var(--hb-white-28);
        border-radius: 50%;
    }
}

html body .fr-header--bar .fr-account-chip .fr-account-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--hb-green-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

/* ---- footer-pro.css ---- */
/* Football Rwanda - Footer PRO (v3) */

.fr-ft {
    margin-top: 72px;
    color: #c5d2e0;
    background:
        radial-gradient(90% 120% at 12% 0%, rgba(0,190,160,.14), rgba(0,190,160,0) 60%),
        linear-gradient(180deg, #08213b 0%, #06182f 100%);
    border-top: 3px solid #0a7f78;
}
.fr-ft-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }

/* ----- numbers strip ----- */
.fr-ft-stats { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.fr-ft-stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fr-ft-stat { padding: 24px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.fr-ft-stat:last-child { border-right: 0; }
.fr-ft-stat strong { display:block; color:#fff; font-size: 28px; font-weight: 800; letter-spacing:-.02em; line-height:1; }
.fr-ft-stat span { display:block; margin-top: 8px; color:#7f95ad; font-size: 12px; font-weight: 700; letter-spacing:.08em; text-transform: uppercase; }

/* ----- main grid ----- */
.fr-ft-main { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 56px 0 44px; }

.fr-ft-logo { display:inline-flex; padding: 0; margin-bottom: 18px; background: none; border-radius: 0; }
.fr-ft-logo img { display:block; height: 52px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); width:auto; max-width: 200px; object-fit: contain; }
.fr-ft-tagline { max-width: 340px; margin: 0 0 22px; color:#9fb2c7; font-size: 14.5px; line-height: 1.65; }
.fr-ft-cta {
    display:inline-flex; align-items:center; gap:8px; padding: 11px 18px; border-radius: 12px;
    background: rgba(94,234,212,.12); color:#5eead4; font-size: 14px; font-weight:700; text-decoration:none;
    border: 1px solid rgba(94,234,212,.25); transition: background .15s, transform .15s;
}
.fr-ft-cta:hover { background: rgba(94,234,212,.2); transform: translateX(2px); color:#5eead4; }

.fr-ft-title { margin: 4px 0 18px; color:#fff; font-size: 13px; font-weight: 800; letter-spacing:.09em; text-transform: uppercase; }
.fr-ft-col ul { margin:0; padding:0; list-style:none; display:grid; gap: 0; }
.fr-ft-col a {
    display:inline-block; padding: 6px 0; color:#b4c4d6; font-size: 14.5px; font-weight: 500; text-decoration:none;
    transition: color .15s, transform .15s;
}
.fr-ft-col a:hover { color:#fff; transform: translateX(3px); }

/* ----- bottom bar ----- */
.fr-ft-bottom { border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.fr-ft-bottom-inner { display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 20px 0; font-size: 13px; }
.fr-ft-copy { color:#8ea3b9; }
.fr-ft-copy strong { color:#fff; }
.fr-ft-legal { display:flex; gap: 10px; align-items:center; color:#4f6580; }
.fr-ft-legal a { color:#9fb2c7; text-decoration:none; }
.fr-ft-legal a:hover { color:#fff; }

@media (max-width: 1000px) {
    .fr-ft-main { grid-template-columns: 1fr 1fr; gap: 36px 32px; padding: 44px 0 36px; }
    .fr-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .fr-ft { margin-top: 48px; }
    .fr-ft-stats-inner { grid-template-columns: 1fr 1fr; }
    .fr-ft-stat { padding: 18px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .fr-ft-stat:nth-child(2n) { border-right: 0; }
    .fr-ft-stat:nth-last-child(-n+2) { border-bottom: 0; }
    .fr-ft-main { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .fr-ft-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ----- floating Back to top (all pages) ----- */
.fr-btt {
    position: fixed; right: 22px; bottom: 22px; z-index: 9000;
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 14px; cursor: pointer;
    background: #06182f; color: #fff;
    box-shadow: 0 1px 2px rgba(6,24,47,.2), 0 10px 28px rgba(6,24,47,.28);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s, transform .2s, visibility .2s, background .15s;
}
.fr-btt.is-visible { opacity: 1; visibility: visible; transform: none; }
.fr-btt:hover { background: #0a7f78; }
.fr-btt:focus-visible { outline: 3px solid rgba(10,127,120,.45); outline-offset: 2px; }
@media (max-width: 600px) { .fr-btt { right: 14px; bottom: 14px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .fr-btt { transition: none; } }
.fr-ft-bottom-inner { padding-right: 64px; }
@media (max-width: 600px) { .fr-ft-bottom-inner { padding-right: 56px; } }

.fr-ft-cookie { background:none; border:0; padding:0; font:inherit; color:#9fb2c7; cursor:pointer; }
.fr-ft-cookie:hover { color:#fff; }
.fr-ft-legal { flex-wrap: wrap; }

/* Brand mark on the dark footer */
html body .fr-ft-logo.fr-brandmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
html body .fr-ft-logo .fr-brandmark-icon { display: block; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.18); border-radius: 11px; }
html body .fr-ft-logo .fr-brandmark-text { display: flex; flex-direction: column; gap: 3px; font-family: var(--fr-display, 'Saira', 'Inter', sans-serif); font-stretch: 87.5%; line-height: .95; text-transform: uppercase; white-space: nowrap; }
html body .fr-ft-logo .fr-brandmark-text b { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
html body .fr-ft-logo .fr-brandmark-text i { color: #2fd3ad; font-size: 18px; font-style: normal; font-weight: 800; letter-spacing: .2em; }

/* Visitor counter (inc/stats/visitor-counter.php), after All rights reserved. */
.fr-ft-visits { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #8ea3b9; white-space: nowrap; }
.fr-ft-visits[hidden] { display: none; }
.fr-ft-visits svg { color: #2ec4a6; flex: 0 0 auto; }
.fr-ft-visits strong { color: #fff; font-variant-numeric: tabular-nums; }
.fr-ft-visits-sep { margin-right: 2px; color: #4f6580; }
.fr-ft-visits-today { color: #8ea3b9; }
@media (max-width: 600px) {
    .fr-ft-visits { display: flex; margin: 8px 0 0; }
    .fr-ft-visits[hidden] { display: none; }
    .fr-ft-visits-sep { display: none; }
}


/* ---- page-header.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Global Page Header
 * File: page-header.css
 * ==========================================================
 */


/* ==========================================================
   HEADER
========================================================== */

.fr-page-header {

    width: 100%;

    margin-bottom: 32px;

    background:
        linear-gradient(
            135deg,
            #009b83 0%,
            #008f7a 50%,
            #007f70 100%
        );

    color: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 128, 110, 0.18);
}


/* ==========================================================
   CONTENT
========================================================== */

.fr-page-header-content {

    padding: 28px 42px 24px;
}


/* ==========================================================
   SUBTITLE
========================================================== */

.fr-page-subtitle {

    display: block;

    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   TITLE
========================================================== */

.fr-page-title {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 34px;

    line-height: 1.15;

    font-weight: 800;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.fr-page-description {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================================
   STATS
========================================================== */

.fr-page-stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: rgba(0, 0, 0, 0.08);

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


/* ==========================================================
   STAT
========================================================== */

.fr-page-stat {

    min-height: 72px;

    padding: 14px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-page-stat:last-child {
    border-right: none;
}


/* ==========================================================
   STAT VALUE
========================================================== */

.fr-page-stat-value {

    color: #ffffff;

    font-size: 22px;

    line-height: 1.15;

    font-weight: 800;
}


/* ==========================================================
   STAT LABEL
========================================================== */

.fr-page-stat-label {

    margin-top: 3px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-page-header-content {

        padding: 25px 30px 22px;
    }


    .fr-page-title {

        font-size: 31px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-page-header {

        margin-bottom: 24px;

        border-radius: 14px;
    }


    .fr-page-header-content {

        padding: 24px 24px 20px;
    }


    .fr-page-title {

        font-size: 28px;
    }


    .fr-page-description {

        font-size: 13px;
    }


    .fr-page-stats {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .fr-page-stat {

        min-height: 68px;

        padding: 13px 18px;
    }


    .fr-page-stat:nth-child(2) {

        border-right: none;
    }


    .fr-page-stat:nth-child(-n + 2) {

        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fr-page-header-content {

        padding: 21px 18px 18px;
    }


    .fr-page-subtitle {

        font-size: 10px;
    }


    .fr-page-title {

        font-size: 25px;
    }


    .fr-page-description {

        font-size: 12px;
    }


    .fr-page-stat {

        min-height: 64px;

        padding: 11px 12px;
    }


    .fr-page-stat-value {

        font-size: 19px;
    }


    .fr-page-stat-label {

        font-size: 9px;
    }

}

/* ---- brand.css ---- */
/* ==========================================================
   Football Rwanda - Brand layer (every page)
   The identity introduced on the home page, for the parts
   every page shares. CSS only.

   - Display face: Saira (assets/css/base/fonts.css) for page
     titles and their key numbers.
   - Rwanda flag band closing the page header, as on the home
     hero and the match hero.
   - The generic "Football Rwanda" eyebrow above every page
     title is removed: the title speaks for itself.
   ========================================================== */

:root {
    --fr-display: 'Saira', 'Inter', system-ui, sans-serif;
}


/* ---------- Page header (template-parts/components/page-header.php) ---------- */

html body .fr-page-header .fr-page-subtitle {
    display: none;
}

html body .fr-page-header .fr-page-title {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    text-transform: uppercase;
}

html body .fr-page-header .fr-page-stat-value {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

html body .fr-page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: linear-gradient(90deg, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%);
    pointer-events: none;
}


/* ---------- Directory header (template-parts/components/directory-header.php:
   Statistics, Players, Clubs, Coaches, Academies, Nationalities...) ---------- */

/* The flag band is absolutely positioned: the header must be its
   containing block (it is position: static on some pages). */
html body .fr-directory-header,
html body .fr-page-header {
    position: relative;
    overflow: hidden;
}

html body .fr-directory-header .fr-directory-subtitle {
    display: none;
}

html body .fr-directory-header .fr-directory-title {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    text-transform: uppercase;
}

html body .fr-directory-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: linear-gradient(90deg, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%);
    pointer-events: none;
}

/* Directory filters: same green button on every directory (Academies and
   Coaches do not load pro-pages.css and fell back to a blue button). */
html body .fr-filter-button {
    border-color: #0a7f78;
    background: #0a7f78;
    color: #fff;
}

html body .fr-filter-button:hover,
html body .fr-filter-button:focus-visible {
    border-color: #07665f;
    background: #07665f;
    color: #fff;
}

/* SVG icons (inc/ui/icons.php): inline, aligned with the text, text colour. */
.fr-ui-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -2px;
}


/* ---------- Browser surfaces ---------- */

::selection {
    background: rgba(0, 152, 121, .22);
    color: #0f172a;
}


/* ---- directory-header.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Global Directory Header
 * File: directory-header.css
 * ==========================================================
 */


/* ==========================================================
   HEADER
========================================================== */

.fr-directory-header {

    width: 100%;

    margin-bottom: 32px;

    background:
        radial-gradient(120% 90% at 20% 0%, rgba(0,190,160,.22), rgba(0,190,160,0) 60%),
        linear-gradient(160deg,#06182f 0%,#0a2c47 55%,#08524f 100%);

    color: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 16px 40px rgba(6, 24, 47, 0.16);
}


/* ==========================================================
   CONTENT
========================================================== */

.fr-directory-header-content {

    padding: 38px 42px 32px;
}


.fr-directory-subtitle {

    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.fr-directory-title {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 36px;

    line-height: 1.15;

    font-weight: 800;
}


.fr-directory-description {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.6;
}


/* ==========================================================
   STATS
========================================================== */

.fr-directory-stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: rgba(0, 0, 0, 0.08);

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-directory-stat {

    min-height: 86px;

    padding: 18px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-directory-stat:last-child {
    border-right: none;
}


.fr-directory-stat strong {

    color: #ffffff;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 800;
}


.fr-directory-stat span {

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-directory-header-content {

        padding: 32px 30px 28px;
    }


    .fr-directory-title {

        font-size: 32px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-directory-header {

        margin-bottom: 24px;

        border-radius: 14px;
    }


    .fr-directory-header-content {

        padding: 28px 24px;
    }


    .fr-directory-title {

        font-size: 28px;
    }


    .fr-directory-description {

        font-size: 14px;
    }


    .fr-directory-stats {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .fr-directory-stat {

        min-height: 76px;

        padding: 15px 18px;
    }


    .fr-directory-stat:nth-child(2) {

        border-right: none;
    }


    .fr-directory-stat:nth-child(-n + 2) {

        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fr-directory-header-content {

        padding: 24px 20px;
    }


    .fr-directory-subtitle {

        font-size: 11px;
    }


    .fr-directory-title {

        font-size: 25px;
    }


    .fr-directory-description {

        font-size: 13px;
    }


    .fr-directory-stat {

        min-height: 70px;

        padding: 13px 12px;
    }


    .fr-directory-stat strong {

        font-size: 20px;
    }


    .fr-directory-stat span {

        font-size: 9px;
    }

}

/* ---- section.css ---- */
/* ==========================================================
   SECTION HEADER
========================================================== */

.fr-section-header{

    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:24px;

}

.fr-section-subtitle{

    display:block;
    color:var(--fr-primary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;

}

.fr-section-title{

    margin:0;
    font-size:38px;
    color:var(--fr-dark);

}

.fr-section-link{

    text-decoration:none;
    font-weight:700;
    color:var(--fr-primary);

}

.fr-section-link:hover{

    text-decoration:underline;

}

@media(max-width:768px){

.fr-section-header{

    flex-direction:column;
    align-items:flex-start;

}

.fr-section-title{

    font-size:30px;

}

}

/* ---- stat-card.css ---- */
/*
====================================================
Football Rwanda
Stat Card
====================================================
*/

.fr-stats-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;

}

.fr-stat-card{

    background:#fff;
    border-radius:14px;
    padding:20px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.3s;

}

.fr-stat-card:hover{

    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.fr-stat-icon{

    font-size:34px;
    margin-bottom:10px;

}

.fr-stat-value{

    font-size:32px;
    font-weight:700;
    color:var(--fr-primary);
    line-height:1;

}

.fr-stat-label{

    margin-top:10px;
    font-size:14px;
    color:#666;

}

/* ---- search.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Search Pro
 * Version 5.0
 * ==========================================================
 */


/* ==========================================================
   SEARCH WRAPPER
========================================================== */

.fr-search {
    position: relative;
    width: 100%;
    max-width: 730px;
    
}


/* ==========================================================
   INPUT
========================================================== */

.fr-search input {
    width: 80%;
    height: 58px;

    padding: 0 22px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;

    background: #ffffff;

    color: #111827;

    font-size: 16px;
    font-weight: 500;

    box-sizing: border-box;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fr-search input::placeholder {
    color: #94a3b8;
}

.fr-search input:focus {
    border-color: #00a889;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14),
        0 0 0 3px rgba(0, 168, 137, 0.12);
}


/* ==========================================================
   RESULTS CONTAINER
========================================================== */

#fr-search-results {
    position: absolute;

    top: 66px;
    left: 0;

    width: 100%;

    display: none;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.18),
        0 5px 15px rgba(15, 23, 42, 0.08);

    z-index: 999999;

    max-height: 430px;

    overflow-y: auto;
}

#fr-search-results.is-visible {
    display: block;

    animation: frSearchFade 0.18s ease;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes frSearchFade {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   SEARCH GROUP
========================================================== */

.fr-search-group {
    border-bottom: 1px solid #edf0f3;
}

.fr-search-group:last-child {
    border-bottom: none;
}


/* ==========================================================
   GROUP TITLE
========================================================== */

.fr-search-group-title {

    display: flex;
    align-items: center;

    min-height: 38px;

    padding: 0 16px;

    background: #f7f9fb;

    color: #008f79;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ==========================================================
   SEARCH ITEM
========================================================== */

.fr-search-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 9px 16px;

    text-decoration: none;

    color: #1f2937;

    background: #ffffff;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.fr-search-item:hover {
    background: #f5f8fa;
}


/* ==========================================================
   IMAGE
========================================================== */

.fr-search-item img {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    object-fit: cover;

    flex: 0 0 44px;

    border: 1px solid #e5e7eb;

    background: #f3f4f6;
}


/* ==========================================================
   SEARCH CONTENT
========================================================== */

.fr-search-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 3px;
}


.fr-search-content strong {

    display: block;

    color: #111827;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.fr-search-content span {

    display: block;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================
   TAXONOMY ITEMS
========================================================== */

/*
 * Clubs, Nationalities and Positions can also use
 * .fr-search-item without a player photo.
 */

.fr-search-group .fr-search-item:not(:has(img)) {

    min-height: 48px;

    padding-top: 7px;
    padding-bottom: 7px;
}


/* ==========================================================
   EMPTY RESULT
========================================================== */

.fr-search-empty {

    padding: 20px 16px;

    text-align: center;

    color: #6b7280;

    font-size: 13px;

    background: #ffffff;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

#fr-search-results::-webkit-scrollbar {
    width: 5px;
}

#fr-search-results::-webkit-scrollbar-track {
    background: transparent;
}

#fr-search-results::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 20px;
}

#fr-search-results::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-search {
        max-width: 100%;
    }


    .fr-search input {

        height: 54px;

        padding: 0 18px;

        border-radius: 12px;

        font-size: 15px;
    }


    #fr-search-results {

        top: 61px;

        border-radius: 12px;

        max-height: 380px;
    }


    .fr-search-group-title {

        min-height: 36px;

        padding: 0 14px;

        font-size: 10px;
    }


    .fr-search-item {

        gap: 10px;

        min-height: 60px;

        padding: 8px 14px;
    }


    .fr-search-item img {

        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .fr-search-content strong {
        font-size: 13px;
    }


    .fr-search-content span {
        font-size: 11px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    #fr-search-results {

        left: 0;

        width: 100%;

        max-height: 350px;
    }


    .fr-search-item {
        padding-left: 12px;
        padding-right: 12px;
    }

}

/* ==========================================================
   SEARCH RESULTS PAGE (search.php)
========================================================== */

.fr-search-page {
    padding: 40px 0 70px;
}

.fr-search-page .fr-container {
    max-width: 860px;
    margin: 0 auto;
}

.fr-search-page-header {
    margin-bottom: 24px;
}

.fr-search-page-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #009f88;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fr-search-page-header h1 {
    margin: 0 0 18px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.fr-search-page-form {
    display: flex;
    gap: 10px;
}

.fr-search-page-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    font-size: 16px;
    box-sizing: border-box;
}

.fr-search-page-form input:focus {
    border-color: #00a889;
    outline: none;
}

.fr-search-page-form button {
    flex: 0 0 auto;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: #009f88;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.fr-search-page-results .fr-search-list {
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .fr-search-page-header h1 {
        font-size: 28px;
    }
}


/* ---- player-card.css ---- */
/**
 * Football Rwanda
 * Component: Player Card
 * Version: 8.0
 *
 * IMPORTANT:
 * - Based on the real player-card.php structure.
 * - Does NOT change the player grid.
 * - Does NOT modify global stat-card.css.
 * - Only styles stat-card instances INSIDE .fr-player-stats.
 */

/* ==========================================================
   PLAYER CARD
========================================================== */

.fr-player-card {
    width: 100%;
    min-width: 0;
    height: 160px;
    min-height: 160px;
    max-height: 160px;

    display: flex;
    flex-direction: row;

    overflow: hidden;

    border: 1px solid #dfe5ec;
    border-radius: 14px;

    background: #f7f9fb;

    box-sizing: border-box;
}

/* ==========================================================
   PLAYER IMAGE
========================================================== */

.fr-player-card .fr-player-image {
    position: relative;

    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;

    height: 160px;

    display: block;

    overflow: hidden;

    background: #e3e3e3;

    box-sizing: border-box;
}

.fr-player-card .fr-player-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ==========================================================
   SHIRT NUMBER
========================================================== */

.fr-player-card .fr-shirt-number {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--fr-primary);
    color: #fff;

    font-size: 14px;
    line-height: 1;
    font-weight: 700;

    z-index: 2;
}

/* ==========================================================
   CONTENT
========================================================== */

.fr-player-card .fr-player-content {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 0;

    padding: 11px 13px 10px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    box-sizing: border-box;

    overflow: hidden;
}

/* ==========================================================
   PLAYER NAME
========================================================== */

.fr-player-card .fr-player-name {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    margin: 0 0 5px;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-player-card .fr-player-name a {
    display: block;

    width: 100%;
    max-width: 100%;

    color: inherit;
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   META
========================================================== */

.fr-player-card .fr-player-meta {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    margin: 0;

    font-size: 11px;
    line-height: 1.25;

    overflow: hidden;
}

/* Each metadata item stays on its own line */
.fr-player-card .fr-meta-item {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-player-card .fr-meta-item a {
    display: block;

    max-width: 100%;

    color: inherit;
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   NATIONALITY / FLAG
========================================================== */

/*
 * Supports the real flag image returned by fr_get_flag().
 *
 * The selector is intentionally generic so it can work with
 * existing nationality markup without affecting other images.
 */

.fr-player-card .fr-player-meta img.fr-nationality-flag {
    display: inline-block;

    width: 18px !important;
    height: 12px !important;

    min-width: 18px !important;
    max-width: 18px !important;

    min-height: 12px !important;
    max-height: 12px !important;

    margin: 0 6px 0 0 !important;

    object-fit: cover;

    vertical-align: middle;

    border-radius: 2px;

    flex: 0 0 auto;
}

/* ==========================================================
   STATS AREA
========================================================== */

.fr-player-card .fr-player-stats {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 18px;

    margin: 7px 0 6px;

    overflow: hidden;
}

/* ==========================================================
   NESTED STAT CARDS
========================================================== */

.fr-player-card .fr-player-stats > * {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
}

.fr-player-card .fr-player-stats .fr-stat-card {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fr-player-card .fr-player-stats .fr-stat-icon {
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 16px !important;
    line-height: 1 !important;
}

.fr-player-card .fr-player-stats .fr-stat-value {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.fr-player-card .fr-player-stats .fr-stat-label {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-transform: uppercase;
    letter-spacing: .35px;
}

/* Generic stat-card support */

.fr-player-card .fr-player-stats .stat-card {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 4px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   BUTTON
========================================================== */

.fr-player-card .fr-player-button {
    flex: 0 0 auto;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: auto;
    padding: 6px 10px;

    min-height: 25px;

    border: 0;
    border-radius: 6px;

    background: var(--fr-primary);
    color: #fff !important;

    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;
}

.fr-player-card .fr-player-button:hover {
    color: #fff !important;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-player-card {
        height: 160px;
        min-height: 160px;
        max-height: 160px;
    }

    .fr-player-card .fr-player-image {
        flex-basis: 120px;
        width: 120px;
        min-width: 120px;
        max-width: 120px;

        height: 160px;
    }

    .fr-player-card .fr-player-content {
        padding: 10px 12px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .fr-player-card .fr-player-image {
        flex-basis: 110px;
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    .fr-player-card .fr-player-content {
        padding: 10px 11px;
    }

    .fr-player-card .fr-player-name {
        font-size: 15px;
    }

    .fr-player-card .fr-player-meta {
        font-size: 10px;
    }

    .fr-player-card .fr-player-stats {
        gap: 12px;
        margin-top: 6px;
    }

    .fr-player-card .fr-player-button {
        min-height: 24px;
        padding: 5px 8px;
    }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .fr-player-card {
        height: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    .fr-player-card .fr-player-image {
        flex-basis: 100px;
        width: 100px;
        min-width: 100px;
        max-width: 100px;

        height: 150px;
    }

    .fr-player-card .fr-player-content {
        padding: 9px 10px;
    }

    .fr-player-card .fr-player-name {
        font-size: 14px;
    }

    .fr-player-card .fr-player-meta {
        font-size: 9px;
    }

    .fr-player-card .fr-player-stats {
        gap: 10px;
    }

    .fr-player-card .fr-player-stats .fr-stat-icon {
        font-size: 14px !important;
    }

    .fr-player-card .fr-player-stats .fr-stat-value {
        font-size: 14px !important;
    }

    .fr-player-card .fr-player-stats .fr-stat-label {
        font-size: 7px !important;
    }
}

/* ==========================================================
   PLAYER GRID
   DO NOT CHANGE
========================================================== */

.fr-player-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}

@media (max-width: 992px) {

    .fr-player-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .fr-player-grid {
        grid-template-columns: 1fr;
    }
}

/* Club logo in the card meta (replaces the stadium emoji) */
.fr-player-card .fr-meta-club-logo {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
}

/* Current club line (Players Abroad cards) */
html body .fr-player-card .fr-meta-club-current {
    align-items: center;
}
html body .fr-player-card .fr-meta-club-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
html body .fr-player-card .fr-meta-club-text small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a7f78;
}
html body .fr-player-card .fr-meta-club-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #06182f;
}
html body .fr-player-card .fr-meta-club-text em.fr-meta-club-country {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: #62748a;
}

/* Abroad cards: extra club + country lines need more height */
html body .fr-player-card.fr-player-card--abroad {
    height: auto;
    min-height: 190px;
    max-height: none;
}
html body .fr-player-card.fr-player-card--abroad .fr-player-image {
    height: auto;
    min-height: 190px;
    align-self: stretch;
}
html body .fr-player-card.fr-player-card--abroad .fr-player-content {
    overflow: visible;
}

/* Country · league line: wrap instead of being cut */
html body .fr-player-card .fr-meta-club-text em.fr-meta-club-country {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}


/* ---- club-card.css ---- */


/* ==================================================
   CLUB CARD
================================================== */

.fr-club-card {
    width: 100%;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e4ebf0;
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(18, 60, 102, .07);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.fr-club-card:hover {
    transform: translateY(-4px);

    border-color: #d2dfe7;

    box-shadow:
        0 14px 32px rgba(18, 60, 102, .12);
}

/* ==================================================
   CLUB IMAGE
   Balanced logo presentation
================================================== */

.fr-club-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 170px;

    padding: 16px;

    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        #f8fafc 0%,
        #f2f6f8 100%
    );

    border-bottom: 1px solid #edf2f5;

    overflow: hidden;
}

/* ==================================================
   CLUB LOGO
================================================== */

.fr-club-image img {
    display: block;

    width: auto;
    height: auto;

    /*
     * Limits the logo while preserving
     * its original proportions.
     */
    max-width: 135px;
    max-height: 135px;

    object-fit: contain;
    object-position: center;

    transition:
        transform .25s ease;
}

/* ==================================================
   LOGO HOVER
================================================== */

.fr-club-card:hover
.fr-club-image img {
    transform: scale(1.06);
}

/* ==================================================
   CLUB CONTENT
================================================== */

.fr-club-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 16px 16px 15px;

    gap: 9px;

    text-align: center;
}

/* ==================================================
   CLUB NAME
================================================== */

.fr-club-name {
    margin: 0;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 800;
}

.fr-club-name a {
    color: #123c66;

    text-decoration: none;

    transition:
        color .2s ease;
}

.fr-club-name a:hover {
    color: #009f83;
}

/* ==================================================
   CLUB META
================================================== */

.fr-club-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #718096;

    font-size: 11px;

    line-height: 1.3;

    min-height: 22px;
}

.fr-club-meta-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 12px;
}

/* ==================================================
   PLAYERS COUNT
================================================== */

.fr-club-players {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: auto;

    padding-top: 5px;

    color: #009f83;

    font-size: 11px;

    font-weight: 800;
}

.fr-club-players::before {
    content: "👥";

    font-size: 12px;
}

/* ==================================================
   BUTTON
================================================== */

.fr-club-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 100%;

    box-sizing: border-box;

    margin-top: 5px;

    padding: 9px 12px;

    border-radius: 8px;

    background: #123c66;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;
}

.fr-club-button:hover {
    background: #009f83;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

.fr-club-image {
        height: 155px;
    }

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 576px) {

@media (max-width: 576px) {

    .fr-club-image {
        height: 145px;
        padding: 16px;
    }

    .fr-club-image img {
        max-width: 110px;
        max-height: 110px;
    }

}
    .fr-club-content {
        padding: 15px;
    }

.fr-club-name {
        font-size: 16px;
    }

.fr-club-meta {
        font-size: 11px;
    }

}

/* ---- player-navigation.css ---- */
/* ==========================================================
   FOOTBALL RWANDA
   PLAYER NAVIGATION
========================================================== */

.fr-player-navigation {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    width: 100%;

}


/* ==========================================================
   NAVIGATION ITEM
========================================================== */

.fr-player-navigation-item {

    min-width: 0;

}


/* ==========================================================
   LINK
========================================================== */

.fr-player-navigation-link {

    display: flex;

    align-items: center;

    gap: 16px;

    width: 100%;

    min-height: 82px;

    padding: 16px 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.fr-player-navigation-link:hover {

    transform: translateY(-2px);

    border-color: #d1d5db;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

}


/* ==========================================================
   PREVIOUS
========================================================== */

.fr-player-navigation-previous
.fr-player-navigation-link {

    justify-content: flex-start;

}


/* ==========================================================
   NEXT
========================================================== */

.fr-player-navigation-next
.fr-player-navigation-link {

    justify-content: flex-end;

    text-align: right;

}


/* ==========================================================
   ARROW
========================================================== */

.fr-player-navigation-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    min-width: 42px;

    height: 42px;

    background: #f3f4f6;

    border-radius: 10px;

    font-size: 22px;

    font-weight: 700;

    color: #009f83;

}


/* ==========================================================
   CONTENT
========================================================== */

.fr-player-navigation-content {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


/* ==========================================================
   LABEL
========================================================== */

.fr-player-navigation-content small {

    margin-bottom: 5px;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 500;

    color: #6b7280;

}


/* ==========================================================
   PLAYER NAME
========================================================== */

.fr-player-navigation-content strong {

    overflow: hidden;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

    color: #111827;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-player-navigation {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .fr-player-navigation-next
    .fr-player-navigation-link {

        justify-content: flex-start;

        text-align: left;

    }


    .fr-player-navigation-link {

        min-height: 72px;

        padding: 14px 16px;

    }


    .fr-player-navigation-arrow {

        width: 38px;

        min-width: 38px;

        height: 38px;

        font-size: 20px;

    }

}

/* ---- competition-card.css ---- */
/*
====================================================
Football Rwanda
Competition Card
File: competition-card.css
====================================================
*/


/* ==================================================
   COMPETITION GRID
================================================== */

.fr-competition-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    width: 100%;

    margin-top: 10px;
}


/* ==================================================
   COMPETITION CARD
================================================== */

.fr-competition-card {

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e5ebf0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(18, 60, 102, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.fr-competition-card:hover {

    transform: translateY(-5px);

    border-color: #d3e0e8;

    box-shadow:
        0 16px 34px rgba(18, 60, 102, 0.13);
}


/* ==================================================
   COMPETITION IMAGE
================================================== */

.fr-competition-image {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 190px;

    padding: 22px;

    box-sizing: border-box;

    background: #f7fafc;

    overflow: hidden;

    text-decoration: none;
}


.fr-competition-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    transition:
        transform .3s ease;
}


.fr-competition-card:hover
.fr-competition-image img {

    transform: scale(1.05);
}


/* ==================================================
   PLACEHOLDER
================================================== */

.fr-competition-placeholder {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: #eaf7f4;

    color: #009f83;

    font-size: 30px;
}


/* ==================================================
   CONTENT
================================================== */

.fr-competition-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 20px;
}


/* ==================================================
   NAME
================================================== */

.fr-competition-name {

    margin: 0 0 10px;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 800;

    text-align: center;
}


.fr-competition-name a {

    color: #123c66;

    text-decoration: none;

    transition:
        color .2s ease;
}


.fr-competition-name a:hover {

    color: #009f83;
}


/* ==================================================
   SEASON
================================================== */

.fr-competition-season {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-bottom: 12px;

    color: #68798a;

    font-size: 13px;

    line-height: 1.4;
}


.fr-competition-meta-icon {

    font-size: 13px;
}


/* ==================================================
   DESCRIPTION
================================================== */

.fr-competition-description {

    margin-bottom: 20px;

    color: #68798a;

    font-size: 13px;

    line-height: 1.6;

    text-align: center;
}


/* ==================================================
   BUTTON
================================================== */

.fr-competition-button {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;

    margin-top: auto;

    padding: 11px 14px;

    box-sizing: border-box;

    border-radius: 8px;

    background: #123c66;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;
}


.fr-competition-button:hover {

    background: #009f83;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .fr-competition-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 576px) {

    .fr-competition-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .fr-competition-image {

        height: 180px;

        padding: 20px;
    }


    .fr-competition-content {

        padding: 18px;
    }


    .fr-competition-name {

        font-size: 19px;
    }

}

/* ---- archive-player.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Player Directory
 * File: archive-player.css
 * ==========================================================
 */

/* ==========================================================
   DIRECTORY LAYOUT
========================================================== */

.fr-player-directory {

    display: grid;

    grid-template-columns:
        260px minmax(0, 1fr);

    gap: 30px;

    align-items: start;

    margin-top: 30px;
}

/* ==========================================================
   FILTER SIDEBAR
========================================================== */

.fr-player-filters {

    position: sticky;

    top: 30px;

    align-self: start;
}

.fr-filter-card {

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.05);
}

/* ==========================================================
   FILTER HEADER
========================================================== */

.fr-filter-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 20px;
}

.fr-filter-header h2 {

    margin: 0;

    color: #14213d;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}

.fr-filter-reset {

    color: #087fda;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}

.fr-filter-reset:hover {

    color: #0568b5;

    text-decoration: underline;
}

/* ==========================================================
   FILTER FORM
========================================================== */

.fr-player-filter-form {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

/* ==========================================================
   FILTER GROUP
========================================================== */

.fr-filter-group {

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.fr-filter-group label {

    color: #374151;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 600;
}

/* ==========================================================
   FILTER INPUTS
========================================================== */

.fr-filter-group input,
.fr-filter-group select {

    width: 100%;

    min-height: 42px;

    padding: 0 12px;

    border: 1px solid #d9dee7;

    border-radius: 8px;

    background: #ffffff;

    color: #374151;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fr-filter-group input:focus,
.fr-filter-group select:focus {

    border-color: #087fda;

    box-shadow:
        0 0 0 3px rgba(8, 127, 218, 0.10);
}

/* ==========================================================
   FILTER BUTTON
========================================================== */

.fr-filter-button {

    width: 100%;

    min-height: 44px;

    margin-top: 2px;

    padding: 0 16px;

    border: none;

    border-radius: 8px;

    background: #087fda;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.fr-filter-button:hover {

    background: #0568b5;

    transform: translateY(-1px);
}

/* ==========================================================
   RESULTS
========================================================== */

.fr-player-directory-results {

    min-width: 0;

    width: 100%;
}

/* ==========================================================
   RESULTS HEADER
========================================================== */

.fr-results-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.fr-results-count {

    display: flex;

    align-items: baseline;

    gap: 6px;
}

.fr-results-count strong {

    color: #14213d;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;
}

.fr-results-count span,
.fr-results-page {

    color: #6b7280;

    font-size: 13px;

    line-height: 1.4;
}

/* ==========================================================
   PLAYER LIST
========================================================== */

.fr-player-list {

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.04);

    box-sizing: border-box;
}

/* ==========================================================
   PLAYER LIST HEADER
========================================================== */

.fr-player-list-header {

    display: grid;

    grid-template-columns:
        minmax(230px, 2.2fr)
        minmax(140px, 1.2fr)
        minmax(110px, 1fr)
        minmax(120px, 1fr)
        130px;

    align-items: center;

    min-height: 48px;

    padding: 0 18px;

    background: #f7f9fc;

    border-bottom: 1px solid #e5e7eb;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

/* ==========================================================
   PLAYER LIST ITEM
========================================================== */

.fr-player-list-item {

    display: grid;

    grid-template-columns:
        minmax(190px, 2fr)
        minmax(140px, 1.2fr)
        minmax(100px, 0.9fr)
        minmax(130px, 1fr)
        120px;

    align-items: center;

    min-height: 76px;

    padding: 12px 18px;

    background: #ffffff;

    border-bottom: 1px solid #edf0f4;

    box-sizing: border-box;

    transition:
        background 0.2s ease;
}

.fr-player-list-item:last-child {

    border-bottom: none;
}

.fr-player-list-item:hover {

    background: #f8fafc;
}

/* ==========================================================
   PLAYER
========================================================== */

.fr-player-list-player {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.fr-list-player-photo {

    display: block;

    width: 48px;

    min-width: 48px;

    height: 48px;

    overflow: hidden;

    border-radius: 50%;

    background: #f1f5f9;
}

.fr-list-player-photo img {

    display: block;

    width: 48px;

    height: 48px;

    max-width: none;

    object-fit: cover;
}

.fr-list-player-name {

    min-width: 0;

    overflow: hidden;

    color: #14213d;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.fr-list-player-name:hover {

    color: #087fda;
}

/* ==========================================================
   CLUB
========================================================== */

.fr-player-list-club {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}

.fr-list-club-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    min-width: 34px;

    height: 34px;

    overflow: hidden;

    border-radius: 50%;

    background: #f8fafc;
}

.fr-list-club-logo img {

    display: block;

    width: 28px;

    height: 28px;

    max-width: none;

    object-fit: contain;
}

.fr-list-club-name {

    min-width: 0;

    overflow: hidden;

    color: #374151;

    font-size: 13px;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.fr-list-club-name:hover {

    color: #087fda;
}

/* ==========================================================
   POSITION
========================================================== */

.fr-player-list-position {

    min-width: 0;
}

.fr-position-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}

/* ==========================================================
   NATIONALITY
========================================================== */

.fr-player-list-nationality {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    color: #4b5563;

    font-size: 13px;
}

/* ==========================================================
   MUTED
========================================================== */

.fr-list-muted {

    color: #9ca3af;

    font-size: 13px;
}

/* ==========================================================
   VIEW PLAYER
========================================================== */

.fr-player-list-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 34px;

    padding: 0 10px;

    border-radius: 7px;

    background: #087fda;

    color: #ffffff;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.fr-player-list-arrow:hover {

    background: #0568b5;

    color: #ffffff;

    transform: translateY(-1px);
}

/* ==========================================================
   PAGINATION
========================================================== */

.fr-directory-pagination {

    margin-top: 24px;

    text-align: center;
}

.fr-directory-pagination ul {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.fr-directory-pagination li {

    margin: 0;

    padding: 0;
}

.fr-directory-pagination a,
.fr-directory-pagination span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 38px;

    height: 38px;

    padding: 0 10px;

    border: 1px solid #e1e5eb;

    border-radius: 8px;

    background: #ffffff;

    color: #374151;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.fr-directory-pagination a:hover {

    border-color: #087fda;

    background: #087fda;

    color: #ffffff;
}

.fr-directory-pagination .current {

    border-color: #087fda;

    background: #087fda;

    color: #ffffff;
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.fr-directory-empty {

    padding: 60px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;
}

.fr-directory-empty-icon {

    margin-bottom: 14px;

    font-size: 36px;
}

.fr-directory-empty h2 {

    margin: 0 0 8px;

    color: #14213d;

    font-size: 22px;

    font-weight: 700;
}

.fr-directory-empty p {

    margin: 0 0 20px;

    color: #6b7280;

    font-size: 14px;
}

.fr-directory-empty a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    border-radius: 8px;

    background: #087fda;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.fr-directory-empty a:hover {

    background: #0568b5;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .fr-player-directory {

        grid-template-columns:
            230px minmax(0, 1fr);

        gap: 24px;
    }

.fr-player-list-header {

        grid-template-columns:
            minmax(160px, 2fr)
            minmax(110px, 1fr)
            minmax(90px, 0.8fr)
            minmax(100px, 1fr)
            95px;

        padding: 0 14px;
    }

.fr-player-list-item {

        grid-template-columns:
            minmax(170px, 1.8fr)
            minmax(120px, 1.1fr)
            minmax(90px, 0.8fr)
            minmax(110px, 1fr)
            105px;

        padding: 11px 14px;
    }

}

/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media (max-width: 900px) {

    .fr-player-directory {

        grid-template-columns: 1fr;

        gap: 24px;
    }

.fr-player-filters {

        position: static;

        width: 100%;
    }

.fr-filter-card {

        padding: 18px;
    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------
       DIRECTORY
    ------------------------------------------------------ */

    .fr-player-directory {

        display: flex;

        flex-direction: column;

        width: 100%;
        max-width: 100%;

        gap: 20px;

        margin-top: 24px;
    }

/* ------------------------------------------------------
       RESULTS
    ------------------------------------------------------ */

    .fr-player-directory-results {

        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

/* ------------------------------------------------------
       RESULTS HEADER
    ------------------------------------------------------ */

    .fr-results-header {

        width: 100%;

        gap: 10px;

        margin-bottom: 14px;
    }

.fr-results-count strong {

        font-size: 18px;
    }

.fr-results-page {

        display: none;
    }

/* ------------------------------------------------------
       PLAYER LIST
    ------------------------------------------------------ */

    .fr-player-list {

        width: 100%;
        max-width: 100%;

        overflow: hidden;

        border-radius: 12px;
    }

/* ------------------------------------------------------
       HIDE DESKTOP TABLE HEADER
    ------------------------------------------------------ */

    .fr-player-list-header {

        display: none;
    }

/* ------------------------------------------------------
       PLAYER ROW → MOBILE CARD
    ------------------------------------------------------ */

    .fr-player-list-item {

        display: grid;

        grid-template-columns: 1fr auto;

        grid-template-areas:

            "player player"
            "club action"
            "position nationality";

        width: 100%;

        min-width: 0;

        min-height: auto;

        gap: 12px;

        padding: 16px;

        box-sizing: border-box;
    }

/* ------------------------------------------------------
       PLAYER
    ------------------------------------------------------ */

    .fr-player-list-player {

        grid-area: player;

        width: 100%;

        min-width: 0;
    }

.fr-list-player-photo {

        width: 50px;

        min-width: 50px;

        height: 50px;
    }

.fr-list-player-photo img {

        width: 50px;

        height: 50px;
    }

.fr-list-player-name {

        font-size: 14px;
    }

/* ------------------------------------------------------
       CLUB
    ------------------------------------------------------ */

    .fr-player-list-club {

        grid-area: club;

        min-width: 0;
    }

.fr-list-club-logo {

        width: 32px;

        min-width: 32px;

        height: 32px;
    }

.fr-list-club-logo img {

        width: 26px;

        height: 26px;
    }

.fr-list-club-name {

        font-size: 12px;
    }

/* ------------------------------------------------------
       POSITION
    ------------------------------------------------------ */

    .fr-player-list-position {

        grid-area: position;

        display: flex;

        align-items: center;
    }

/* ------------------------------------------------------
       NATIONALITY
    ------------------------------------------------------ */

    .fr-player-list-nationality {

        grid-area: nationality;

        justify-content: flex-end;

        font-size: 12px;

        text-align: right;
    }

/* ------------------------------------------------------
       VIEW PLAYER
    ------------------------------------------------------ */

    .fr-player-list-arrow {

        grid-area: action;

        justify-self: end;

        min-height: 32px;

        padding: 0 10px;

        font-size: 10px;
    }

/* ------------------------------------------------------
       PAGINATION
    ------------------------------------------------------ */

    .fr-directory-pagination {

        margin-top: 20px;
    }

.fr-directory-pagination ul {

        gap: 5px;

        flex-wrap: wrap;
    }

.fr-directory-pagination a,
    .fr-directory-pagination span {

        min-width: 34px;

        height: 34px;

        padding: 0 8px;

        font-size: 12px;
    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fr-player-directory {

        gap: 16px;

        margin-top: 20px;
    }

.fr-filter-card {

        padding: 14px;
    }

.fr-filter-header {

        margin-bottom: 16px;
    }

.fr-filter-header h2 {

        font-size: 16px;
    }

.fr-player-filter-form {

        gap: 14px;
    }

.fr-filter-group input,
    .fr-filter-group select {

        min-height: 40px;

        font-size: 12px;
    }

.fr-filter-button {

        min-height: 42px;

        font-size: 13px;
    }

.fr-player-list-item {

        grid-template-columns: 1fr auto;

        gap: 10px;

        padding: 14px;
    }

.fr-list-player-photo {

        width: 46px;

        min-width: 46px;

        height: 46px;
    }

.fr-list-player-photo img {

        width: 46px;

        height: 46px;
    }

.fr-list-player-name {

        font-size: 13px;
    }

.fr-list-club-name {

        font-size: 11px;
    }

.fr-position-badge {

        min-height: 26px;

        padding: 0 8px;

        font-size: 10px;
    }

.fr-player-list-nationality {

        font-size: 11px;
    }

.fr-player-list-arrow {

        min-height: 30px;

        padding: 0 8px;

        font-size: 9px;
    }

.fr-directory-empty {

        padding: 40px 16px;
    }

.fr-directory-empty h2 {

        font-size: 20px;
    }

.fr-directory-empty p {

        font-size: 13px;
    }

}

.fr-player-list-nationality {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fr-nationality-flag {
    width: 22px !important;
    height: 15px !important;
    min-width: 22px;
    max-width: 22px;
    min-height: 15px;
    max-height: 15px;
    object-fit: cover;
    display: inline-block;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---- pro-pages.css ---- */
/* Football Rwanda - Pro pages (Fixtures, Standings, Statistics, Dashboard, Nationalities, Positions)
   Loaded last; shares the design language of Match / Club / Competition / Player pages. */

html body .fixtures-hero,
html body .fr-page-header,
html body .fr-directory-header,
html body .fr-statistics-page .fr-directory-header {
    position: relative;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(0,190,160,.22), rgba(0,190,160,0) 60%),
        linear-gradient(160deg,#06182f 0%,#0a2c47 55%,#08524f 100%);
    box-shadow: 0 1px 2px rgba(6,24,47,.06), 0 16px 40px rgba(6,24,47,.16);
    overflow: hidden;
}
html body .fixtures-hero-content,
html body .fr-page-header-content,
html body .fr-directory-header-content { padding: 34px 40px 28px; }

html body .fixtures-eyebrow,
html body .fr-page-subtitle,
html body .fr-directory-subtitle {
    display: inline-block;
    color: #5eead4;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(94,234,212,.12);
    margin-bottom: 12px;
}
html body .fixtures-title,
html body .fr-page-title,
html body .fr-directory-title { color:#fff; font-size: 38px; letter-spacing: -.02em; }
html body .fixtures-description,
html body .fr-page-description,
html body .fr-directory-description { color: rgba(255,255,255,.78); }

html body .fixtures-hero-stats,
html body .fr-page-stats,
html body .fr-directory-stats { border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
html body .fixtures-stat,
html body .fr-page-stat,
html body .fr-directory-stat { border-color: rgba(255,255,255,.12); padding: 18px 28px; }
html body .fixtures-stat strong,
html body .fr-page-stat strong,
html body .fr-directory-stat strong,
html body .fr-page-stat-value { color:#fff; font-size: 28px; }
html body .fixtures-stat span,
html body .fr-page-stat span,
html body .fr-directory-stat span,
html body .fr-page-stat-label { color: rgba(255,255,255,.62); letter-spacing:.06em; }

/* Cards: shared surface */
html body .fixtures-filters-sidebar,
html body .fr-directory-filters,
html body .match-card,
html body .fr-statistics-filters,
html body .fr-dashboard-highlight-card,
html body .fr-nationality-list,
html body .fr-position-list,
html body .fr-ranking-list,
html body .fr-player-ranking-section .fr-ranking-item,
html body .fr-club-ranking-card,
html body .fr-dashboard-ranking-list {
    border: 1px solid #e3e9ef;
    border-radius: 18px;
    background:#fff;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 8px 24px rgba(6,24,47,.05);
}

/* Matchday pills */
html body .matchday-tab { border-radius: 999px; border-color:#e3e9ef; }
html body .matchday-tab.is-active,
html body .matchday-tab.active,
html body .matchday-tab[aria-selected="true"] { background:#06182f; border-color:#06182f; color:#fff; }
html body .matchday-title { letter-spacing:-.01em; }
html body .match-card { transition: transform .15s, box-shadow .15s; }
html body .match-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 14px 32px rgba(6,24,47,.09); }
html body .match-status { background:#e6f4f2; color:#0a7f78; }

/* Buttons / selects / inputs */
html body .fr-filter-button,
html body .fr-statistics-filter-button {
    background:#0a7f78; border-color:#0a7f78; color:#fff; border-radius:12px; font-weight:700;
}
html body .fr-filter-button:hover,
html body .fr-statistics-filter-button:hover { background:#086660; }
html body .fixtures-filter select,
html body .fr-statistics-filter select,
html body .fr-directory-filters input,
html body .fr-dashboard-season-filter select {
    border:1px solid #e3e9ef; border-radius:12px; background:#fff; color:#06182f; min-height:44px;
}
html body .fr-directory-filters input:focus,
html body .fixtures-filter select:focus { outline:2px solid rgba(10,127,120,.35); border-color:#0a7f78; }

/* Section titles on statistics / dashboard */
html body .fr-statistics-section-header h2,
html body .fr-dashboard-section-header h2 { color:#06182f; letter-spacing:-.01em; }
html body .fr-statistics-section-header span,
html body .fr-dashboard-section-header span { color:#0a7f78; }

/* Directory lists (nationalities / positions) */
html body .fr-nationality-list-item:hover,
html body .fr-position-list-item:hover { background:#f4faf9; }
html body .fr-nationality-list-action,
html body .fr-position-list-action { color:#0a7f78; font-weight:700; }
html body .fr-nationality-list-header,
html body .fr-position-list-header { color:#62748a; }
html body .fr-list-nationality-flag { overflow:hidden; font-size:0; }
html body .fr-list-nationality-flag img { width:100%; height:100%; object-fit:cover; border-radius:8px; }

@media (max-width: 700px) {
    html body .fixtures-hero-content,
    html body .fr-page-header-content,
    html body .fr-directory-header-content { padding: 24px 20px 20px; }
    html body .fixtures-title,
    html body .fr-page-title,
    html body .fr-directory-title { font-size: 28px; }
    html body .fixtures-stat,
    html body .fr-page-stat,
    html body .fr-directory-stat { padding: 14px 16px; }
}

html body .fr-page-stat *:first-child,
html body .fr-page-stat strong,
html body .fr-page-stat-value { color:#fff !important; opacity:1 !important; }
html body .fr-page-stat span,
html body .fr-page-stat-label { color: rgba(255,255,255,.62) !important; }

/* ===== Directories: Players, Clubs, Competitions, Seasons, Rwandan Players Abroad ===== */
html body .fr-player-list,
html body .fr-club-list,
html body .fr-season-card,
html body .fr-competition-card,
html body .fr-player-grid > * {
    border: 1px solid #e3e9ef;
    border-radius: 18px;
    background:#fff;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 8px 24px rgba(6,24,47,.05);
}
html body .fr-player-list-header,
html body .fr-club-list-header { background:#f4f8fa; color:#62748a; letter-spacing:.06em; }
html body .fr-player-list-item:hover,
html body .fr-club-list-item:hover { background:#f4faf9; }

/* blue buttons -> teal / ink */
html body .fr-player-list-arrow,
html body .fr-club-list-action a,
html body a.fr-club-list-action {
    background:#0a7f78; border-color:#0a7f78; color:#fff; border-radius:12px; font-weight:700;
}
html body .fr-player-list-arrow:hover,
html body .fr-club-list-action a:hover { background:#086660; }
html body .fr-position-badge { background:#e6f4f2; color:#0a7f78; border-radius:999px; }
html body .fr-count-badge { background:#e6f4f2; color:#0a7f78; }

/* Competition & season cards */
html body .fr-competition-card,
html body .fr-season-card { overflow:hidden; transition: transform .15s, box-shadow .15s; }
html body .fr-competition-card:hover,
html body .fr-season-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 16px 36px rgba(6,24,47,.10); }
html body .fr-competition-image,
html body .fr-season-image {
    background: radial-gradient(120% 90% at 20% 0%, rgba(0,190,160,.22), rgba(0,190,160,0) 60%), linear-gradient(160deg,#06182f 0%,#0a2c47 55%,#08524f 100%);
}
html body .fr-competition-button,
html body .fr-season-button { background:#0a7f78; border-radius:12px; color:#fff; font-weight:700; }
html body .fr-competition-button:hover,
html body .fr-season-button:hover { background:#086660; }

/* Abroad page */
html body .fr-rwandan-abroad-section { margin-top: 8px; }
html body .fr-rwandan-abroad-section .fr-section-title { color:#06182f; font-size:26px; letter-spacing:-.01em; }
html body .fr-rwandan-abroad-section > p,
html body .fr-rwandan-abroad-section .fr-directory-empty {
    padding: 28px; border:1px dashed #cfd9e2; border-radius:18px; background:#fff; color:#62748a;
}

/* ===== PASS 2 : Fixtures, Standings, Statistics ===== */

/* hero stat numbers: value must stay white */
html body .fr-page-stat span:not(.fr-page-stat-value),
html body .fr-page-stat-label { color: rgba(255,255,255,.62) !important; }
html body .fr-page-stat .fr-page-stat-value { color:#fff !important; }

/* ---------- Fixtures ---------- */
html body .fixtures-filters-sidebar { position: sticky; top: 96px; align-self: start; }
html body .matchday-tabs { scrollbar-width: none; }
html body .matchday-group-header { align-items: flex-end; border-bottom: 1px solid #e3e9ef; padding-bottom: 14px; }
html body .matchday-title { font-size: 26px; color:#06182f; }
html body .matchday-count {
    background:#e6f4f2; color:#0a7f78; font-weight:700; font-size:12px;
    padding:6px 12px; border-radius:999px;
}
html body .match-card { padding: 16px 20px; gap: 14px; }
html body .match-meta { color:#62748a; }
html body .match-date { color:#06182f; font-weight:700; }
html body .match-team-name { font-size: 15px; font-weight: 700; color:#06182f; }
html body .match-score {
    display:inline-flex; align-items:center; gap:8px; min-width: 84px; justify-content:center;
    padding: 8px 16px; border-radius: 12px; background:#06182f; color:#fff;
}
html body .match-score .match-score-value,
html body .match-score .match-score-vs,
html body .match-score .match-score-sep { color:#fff; }
html body .match-score .match-score-sep { opacity:.45; }
html body .match-score-vs { font-size: 13px; letter-spacing:.08em; }
html body .match-status { padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
html body .match-status.status-scheduled { background:#fff6e0; color:#9a6a00; }
html body .match-status.status-live { background:#fde8e8; color:#c0262d; }
html body .match-status.status-postponed,
html body .match-status.status-cancelled { background:#eef1f5; color:#62748a; }

/* ---------- Statistics ---------- */
html body .fr-statistics-jump {
    position: sticky; top: 8px; z-index: 20;
    display:flex; gap:6px; padding:6px; margin: 0 0 28px; overflow-x:auto; scrollbar-width:none;
    background:#fff; border:1px solid #e3e9ef; border-radius:18px;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 8px 24px rgba(6,24,47,.05);
}
html body .fr-statistics-jump::-webkit-scrollbar { display:none; }
html body .fr-statistics-jump a {
    flex: 0 0 auto; display:inline-flex; align-items:center; min-height:42px; padding:0 18px;
    border-radius:12px; color:#62748a; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap;
}
html body .fr-statistics-jump a:hover { background:#e6f4f2; color:#0a7f78; }
html body .fr-statistics-section { scroll-margin-top: 90px; margin-bottom: 44px; }
html body .fr-statistics-section-header { margin-bottom: 18px; }
html body .fr-ranking-item,
html body .fr-player-ranking-section .fr-ranking-item,
html body .fr-club-ranking-card { transition: transform .15s, box-shadow .15s; }
html body .fr-club-ranking-card:hover,
html body .fr-ranking-item:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 12px 28px rgba(6,24,47,.08); }
html body .fr-club-ranking-buttons button { border-radius: 999px; }
html body .fr-statistics-empty { border:1px dashed #cfd9e2; border-radius:18px; background:#fff; color:#62748a; }
html body .fr-statistics-filters { padding: 18px 20px; }
@media (max-width: 700px) {
    html body .fr-statistics-jump { top: 0; border-radius: 14px; }
    html body .fr-statistics-section { margin-bottom: 32px; }
}
html body .fr-statistics-reset { align-self: center; text-align: left; color:#0a7f78; font-weight:700; }
html body .fr-statistics-top-scorers > .fr-statistics-empty,
html body .fr-statistics-section .fr-statistics-empty { box-shadow:none; }

/* Club logo + name in player lists (Statistics, Dashboard) */
html body .fr-club-chip{display:inline-flex;align-items:center;gap:6px}
html body .fr-club-chip-logo{width:18px;height:18px;object-fit:contain;flex:0 0 18px;border-radius:4px;background:transparent}

/* ---------- Players Abroad filters ---------- */

html body .fr-abroad-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 18px;
}

html body .fr-abroad-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

html body .fr-abroad-filter > span {
    color: #62748a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body .fr-abroad-filter select,
html body .fr-abroad-filter input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: #06182f;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    background: #f7f9fb;
    border: 1px solid #e3e9ef;
    border-radius: 12px;
}

html body .fr-abroad-filter select:focus,
html body .fr-abroad-filter input[type="search"]:focus {
    outline: 2px solid #0a7f78;
    outline-offset: 1px;
    background: #fff;
}

html body .fr-abroad-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

html body .fr-abroad-filter-apply {
    height: 44px;
    padding: 0 18px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    background: #0a7f78;
    border: 0;
    border-radius: 12px;
}

html body .fr-abroad-filter-apply:hover {
    background: #086963;
}

html body .fr-abroad-filter-reset {
    color: #0a7f78;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

html body .fr-abroad-filter-count {
    margin: 4px 2px 16px;
    color: #62748a;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 900px) {
    html body .fr-abroad-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .fr-abroad-filter--search,
    html body .fr-abroad-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    html body .fr-abroad-filters {
        grid-template-columns: 1fr;
    }
}

/* ---------- Fixtures cards on phones: logo above name, compact score, nothing clipped ---------- */
@media (max-width: 600px) {
    html body .match-card { padding: 14px 14px; gap: 12px; }

    html body .match-teams {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        align-items: start;
    }

    html body .match-team,
    html body .match-team--home,
    html body .match-team--away {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        text-align: center;
    }

    /* away block is name-then-logo in the markup: flip it so both sides read logo, then name */
    html body .match-team--away { flex-direction: column-reverse; }

    html body .match-team-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
        word-break: break-word;
    }

    html body .match-score {
        min-width: 0;
        padding: 6px 12px;
        gap: 6px;
        font-size: 17px;
        border-radius: 10px;
        align-self: center;
        margin-top: 4px;
    }

    html body .match-score .match-score-value { min-width: 12px; }
    html body .match-score-vs { min-width: 0; padding: 0; height: auto; font-size: 12px; background: transparent; }
}

/* ---------- Players directory: competition tabs ---------- */
html body .fr-division-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px;
}
html body .fr-division-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 999px;
    background: #fff; border: 1px solid #e3e9ef;
    color: #06182f; font-size: 14px; font-weight: 700; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
html body .fr-division-tab span {
    padding: 2px 8px; border-radius: 999px; background: #eef2f6; color: #62748a; font-size: 12px; font-weight: 800;
}
html body .fr-division-tab:hover { border-color: #0a7f78; color: #0a7f78; }
html body .fr-division-tab.is-active { background: #06182f; border-color: #06182f; color: #fff; }
html body .fr-division-tab.is-active span { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 600px) {
    html body .fr-division-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    html body .fr-division-tab { flex: 0 0 auto; }
}

/* "VS" sits on the dark score pill: no light box behind it */
html body .match-score .match-score-vs {
    background: transparent;
    color: #fff;
    min-width: 0;
    height: auto;
    padding: 0;
}

/* Dashboard mini lists: player name + club (logo) on two lines */
html body .fr-dashboard-mini-name { display: flex; flex-direction: column; gap: 2px; }
html body .fr-dashboard-mini-name .fr-mini-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .fr-dashboard-mini-name .fr-mini-club {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #62748a; font-size: 12px; font-weight: 600;
}

/* Dashboard: Top Scorers / Top Assists / Most Viewed rows = same size as Club Ranking rows */
html body .fr-dashboard-mini-list {
    gap: 10px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
html body .fr-dashboard-mini-item {
    min-height: 82px; padding: 13px 18px;
    grid-template-columns: 48px 58px minmax(0, 1fr) auto; gap: 14px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 15px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}
html body .fr-dashboard-mini-item:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
html body .fr-dashboard-mini-rank { width: 42px; height: 42px; border-radius: 11px; font-size: 15px; }
html body .fr-dashboard-mini-photo { width: 56px; height: 56px; min-width: 56px; }
html body .fr-dashboard-mini-name { font-size: 15px; }
html body .fr-dashboard-mini-name .fr-mini-club { font-size: 13px; }
html body .fr-dashboard-mini-item > strong { font-size: 20px; }
html body .fr-dashboard-mini-item > strong small { font-size: 9px; }

@media (max-width: 992px) {
    html body .fr-dashboard-mini-item { grid-template-columns: 44px 52px minmax(0, 1fr) auto; gap: 12px; padding: 13px 15px; }
    html body .fr-dashboard-mini-photo { width: 52px; height: 52px; min-width: 52px; }
}
@media (max-width: 600px) {
    html body .fr-dashboard-mini-item { grid-template-columns: 38px 48px minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px; border-radius: 13px; min-height: 0; }
    html body .fr-dashboard-mini-rank { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
    html body .fr-dashboard-mini-photo { width: 46px; height: 46px; min-width: 46px; }
    html body .fr-dashboard-mini-name { font-size: 14px; }
    html body .fr-dashboard-mini-item > strong { font-size: 17px; }
}
@media (max-width: 480px) {
    html body .fr-dashboard-mini-item { grid-template-columns: 36px 44px minmax(0, 1fr) auto; padding: 10px; gap: 7px 8px; }
    html body .fr-dashboard-mini-rank { width: 34px; height: 34px; font-size: 12px; }
    html body .fr-dashboard-mini-photo { width: 42px; height: 42px; min-width: 42px; }
    html body .fr-dashboard-mini-name { font-size: 13px; }
}


/* ---- consent.css ---- */
html body .fr-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:99999;max-width:760px;margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 20px;background:#06182f;color:#dbe6f1;border-radius:18px;box-shadow:0 12px 40px rgba(6,24,47,.35);font-size:14px;line-height:1.5}
html body .fr-consent[hidden]{display:none}
html body .fr-consent strong{color:#fff;font-size:15px}
html body .fr-consent p{margin:4px 0 0;color:#b7c7d8}
html body .fr-consent a{color:#5fe0cf;font-weight:600}
html body .fr-consent-actions{display:flex;gap:8px;flex-shrink:0}
html body .fr-consent-btn{height:42px;padding:0 18px;border:0;border-radius:999px;background:#0a7f78;color:#fff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
html body .fr-consent-btn:hover{background:#0c968d}
html body .fr-consent-btn.is-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
html body .fr-consent-btn.is-ghost:hover{background:rgba(255,255,255,.1)}
html body .fr-consent-btn:focus-visible{outline:2px solid #5fe0cf;outline-offset:2px}
@media(max-width:600px){html body .fr-consent{flex-direction:column;align-items:stretch;gap:14px}html body .fr-consent-actions{flex-direction:column}}


/* ---- partners.css ---- */
/* ==========================================================
   Football Rwanda — partner slots (banners, sponsor lines)
   Markup: inc/partners/partners-display.php
   ========================================================== */

html body .fr-partner-slot {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

html body .fr-partner-slot--home_top,
html body .fr-partner-slot--home_mid,
html body .fr-partner-slot--home_bottom {
    width: min(1240px, calc(100% - 32px));
    margin: 28px auto;
}

html body .fr-partner-slot--player {
    grid-column: 1 / -1; /* the player sidebar is a 2-column grid */
    margin: 0;
}

/* ---------- Sponsor line: "Presented by" / "Official partners" ---------- */

html body .fr-sponsor-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    padding: 12px 18px;
    border: 1px solid #e3e9ef;
    border-radius: 14px;
    background: #fff;
}

html body .fr-sponsor-label {
    color: #5b6b7b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body .fr-sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

html body .fr-sponsor-logo {
    display: inline-flex;
    align-items: center;
}

html body .fr-sponsor-logo img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 34px;
    object-fit: contain;
}

html body a.fr-sponsor-logo:hover img {
    opacity: .8;
}

/* ---------- Banner ---------- */

html body .fr-ad {
    position: relative;
    display: block;
}

html body .fr-ad-label {
    display: block;
    margin-bottom: 6px;
    color: #8595a5;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body .fr-ad-item {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #eef2f6;
}

html body .fr-ad-item[hidden] {
    display: none;
}

html body .fr-ad-item picture,
html body .fr-ad-item img {
    display: block;
    width: 100%;
    height: auto;
}

html body a.fr-ad-item:focus-visible {
    outline: 3px solid #007863;
    outline-offset: 2px;
}

/* ---------- "Advertise here" tile (empty slot) ---------- */

html body .fr-ad-house {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 18px 22px;
    border: 1px dashed #b9c6d3;
    border-radius: 14px;
    background: #f5f8fa;
    color: #031826;
    text-decoration: none;
}

html body .fr-ad-house:hover {
    border-color: #007863;
    background: #eef7f5;
}

html body .fr-ad-house-title {
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 18px;
    font-stretch: 87.5%;
    font-weight: 600;
}

html body .fr-ad-house-text {
    flex: 1 1 220px;
    color: #5b6b7b;
    font-size: 14px;
}

html body .fr-ad-house-cta {
    color: #007863;
    font-size: 14px;
    font-weight: 700;
}

html body .fr-partner-slot--player .fr-ad-house {
    flex-direction: column;
    align-items: flex-start;
}

html body .fr-partner-slot--player .fr-ad-house-text {
    flex: 0 0 auto;
}

/* ---------- Sponsored article notice ---------- */

html body .fr-sponsored-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-left: 3px solid #007863;
    border-radius: 0 10px 10px 0;
    background: #eef7f5;
    color: #33465c;
    font-size: 14px;
}

html body .fr-sponsored-note > span {
    color: #031826;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    html body .fr-partner-slot {
        margin: 18px 0;
    }

    html body .fr-ad-item {
        border-radius: 10px;
    }

    html body .fr-sponsor-logo img {
        height: 28px;
    }
}


/* ---- player-explorer.css ---- */
/* ==========================================================
   Football Rwanda - Player Explorer (archive-player.php)
   Filter bar + chips, catalog (ways in), dense results table.
   Same identity as the other pages: navy, teal, Saira numerals.
   ========================================================== */

html body .fr-explorer {
    --ex-ink: #031826;
    --ex-teal: #007863;
    --ex-teal-soft: #E3F4EF;
    --ex-muted: #5b6b7b;
    --ex-line: #e3e9ef;
    --ex-soft: #f5f8fa;
}


/* ---------- Filter bar ---------- */

html body .fr-ex-bar {
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid var(--ex-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(3, 24, 38, .05);
}

html body .fr-ex-search {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

/* Label for screen readers only (the theme has no global rule for it). */
html body .fr-explorer .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

html body .fr-ex-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #cfd9e2;
    border-radius: 10px;
    background: var(--ex-soft);
    color: var(--ex-ink);
    font-size: 15px;
}

html body .fr-ex-search input:focus {
    border-color: var(--ex-teal);
    background: #fff;
    outline: 2px solid rgba(0, 120, 99, .18);
}

html body .fr-ex-search .fr-filter-button {
    width: auto;
    height: 46px;
    margin: 0;
    padding: 0 22px;
}

html body .fr-ex-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
}

html body .fr-ex-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

html body .fr-ex-field > span {
    color: var(--ex-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html body .fr-ex-field select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #cfd9e2;
    border-radius: 9px;
    background-color: #fff;
    color: var(--ex-ink);
    font-size: 14px;
}

html body .fr-ex-field select:focus {
    border-color: var(--ex-teal);
    outline: 2px solid rgba(0, 120, 99, .18);
}


/* ---------- Chips ---------- */

html body .fr-ex-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
}

html body .fr-ex-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ex-ink);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

html body .fr-ex-chip span {
    opacity: .7;
    font-size: 15px;
    line-height: 1;
}

html body .fr-ex-chip:hover span {
    opacity: 1;
}

html body .fr-ex-clear {
    color: var(--ex-teal);
    font-size: 13px;
    font-weight: 700;
}


/* ---------- Catalog ---------- */

html body .fr-ex-catalog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}

html body .fr-ex-cat-col {
    padding: 16px 16px 12px;
    border: 1px solid var(--ex-line);
    border-radius: 14px;
    background: #fff;
}

html body .fr-ex-cat-col h2 {
    margin: 0 0 10px;
    color: var(--ex-ink);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 16px;
    font-stretch: 87.5%;
    font-weight: 600;
    text-transform: uppercase;
}

html body .fr-ex-cat-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .fr-ex-cat-col li + li {
    border-top: 1px solid var(--ex-line);
}

html body .fr-ex-cat-col li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px;
    color: var(--ex-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

html body .fr-ex-cat-col li a > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

html body .fr-ex-cat-col li a img {
    flex: 0 0 auto;
    border-radius: 2px;
}

html body .fr-ex-cat-col li a b {
    color: var(--ex-teal);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 15px;
    font-stretch: 87.5%;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

html body .fr-ex-cat-col li a:hover > span {
    color: var(--ex-teal);
}

html body .fr-ex-cat-col--lists li a > span {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

html body .fr-ex-cat-col--lists small {
    color: var(--ex-muted);
    font-size: 12px;
    font-weight: 500;
}

html body .fr-ex-cat-more {
    display: inline-block;
    margin-top: 8px;
    color: var(--ex-teal);
    font-size: 13px;
    font-weight: 700;
}


/* ---------- Results ---------- */

html body .fr-ex-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

html body .fr-ex-results-head h2 {
    margin: 0;
    color: var(--ex-muted);
    font-size: 15px;
    font-weight: 600;
}

html body .fr-ex-results-head h2 strong {
    color: var(--ex-ink);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 26px;
    font-stretch: 87.5%;
    font-weight: 600;
}

html body .fr-ex-results-head > span {
    color: var(--ex-muted);
    font-size: 13px;
}

html body .fr-ex-table {
    overflow: hidden;
    border: 1px solid var(--ex-line);
    border-radius: 14px;
    background: #fff;
}

html body .fr-ex-row {
    display: grid;
    grid-template-columns: minmax(220px, 2.4fr) 1.1fr 1.3fr 54px 76px 46px 46px 64px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--ex-ink);
    font-size: 14px;
}

html body .fr-ex-row + .fr-ex-row {
    border-top: 1px solid var(--ex-line);
}

html body .fr-ex-row:not(.fr-ex-row--head):hover {
    background: #f8fbfa;
}

html body .fr-ex-row--head {
    padding-top: 11px;
    padding-bottom: 11px;
    background: var(--ex-ink);
    color: #cfe0e8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

html body .fr-ex-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

html body .fr-ex-row:not(.fr-ex-row--head) .fr-ex-num {
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 16px;
    font-stretch: 87.5%;
    font-weight: 550;
}

html body .fr-ex-row i {
    color: #a3b0bc;
    font-style: normal;
}

html body .fr-ex-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

html body .fr-ex-photo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ex-soft);
}

html body .fr-ex-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

html body .fr-ex-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

html body .fr-ex-name {
    overflow: hidden;
    color: var(--ex-ink);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .fr-ex-name:hover {
    color: var(--ex-teal);
}

html body .fr-ex-club {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: var(--ex-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

html body .fr-ex-club img {
    flex: 0 0 auto;
    object-fit: contain;
}

html body .fr-ex-club em {
    font-style: normal;
    opacity: .75;
}

html body .fr-ex-pos b {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ex-teal-soft);
    color: #00614c;
    font-size: 12px;
    font-weight: 700;
}

html body .fr-ex-nat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13.5px;
}

html body .fr-ex-nat img {
    flex: 0 0 auto;
    border-radius: 2px;
}

html body .fr-ex-foot {
    font-size: 13px;
}

html body .fr-ex-note {
    margin: 12px 2px 0;
    color: var(--ex-muted);
    font-size: 12.5px;
}

html body .fr-ex-pagination {
    margin-top: 18px;
}


/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
    html body .fr-ex-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .fr-ex-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .fr-ex-row { grid-template-columns: minmax(180px, 2fr) 1fr 1.2fr 44px 64px 40px 40px 56px; gap: 8px; padding: 10px 12px; }
}


/* ---------- Phones: each player becomes a card ---------- */

@media (max-width: 720px) {
    html body .fr-ex-bar { padding: 12px; border-radius: 14px; }
    html body .fr-ex-search .fr-filter-button { padding: 0 14px; }
    /* Catalog: one swipe per block instead of a long column. */
    html body .fr-ex-catalog {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-right: -16px;
        padding-right: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    html body .fr-ex-cat-col {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    html body .fr-ex-row--head { display: none; }

    html body .fr-ex-row {
        /* Age, foot, goals, assists, minutes: one line of 5 tiles. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px 6px;
        padding: 12px 14px;
    }

    html body .fr-ex-player { grid-column: 1 / -1; }
    html body .fr-ex-pos { grid-column: 1 / 3; }
    html body .fr-ex-nat { grid-column: 3 / -1; justify-content: flex-end; }

    html body .fr-ex-row > [data-label] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 6px 8px;
        border-radius: 8px;
        background: var(--ex-soft);
        text-align: left;
    }

    html body .fr-ex-row > [data-label]::before {
        content: attr(data-label);
        color: var(--ex-muted);
        font-family: var(--fr-body, 'Inter', sans-serif);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

}