/* Football Rwanda - joined theme styles (22 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)

   Site teal #007863 (was #3A9D23, too bright next to the site's teal
   and navy). White text on it: 5.4:1. The active item is a white pill
   with dark teal text.
   ========================================================== */

:root {
    --hb-green: #007863;      /* site teal (Top Scorers, buttons) */
    --hb-green-2: #00624f;    /* competitions row, a shade darker */
    --hb-green-ink: #005343;  /* text on white pills */
    --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 teal. */
    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: #e6f4f2;
        color: var(--hb-green-ink);
    }
}


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

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

.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;
}

/* ==========================================================
   Long drop-down menus (7 entries or more, e.g. "More"):
   two columns on desktop, still one column in the mobile menu.
   ========================================================== */

@media (min-width: 1081px) {
    html body .fr-header--bar .fr-menu .sub-menu:has(> li:nth-child(7)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 2px 6px;
        min-width: 600px;
    }

    html body .fr-header--bar .fr-menu .sub-menu:has(> li:nth-child(7)) > li {
        min-width: 0;
    }
}

/* ==========================================================
   Sticky filter sidebars (Clubs, Academies, Players,
   Nationalities, Positions) used to stop 30-100px from the top:
   under this sticky header (113px on desktop) their title and
   first field were hidden. They now stop just below it. Under
   901px they are not sticky (one column), so nothing changes.
   ========================================================== */

@media (min-width: 901px) {
    html body .fr-club-filters,
    html body .fr-player-filters,
    html body .fr-directory-filters {
        top: 129px;
    }
}

/* ---- block-titles.css ---- */
/* ==========================================================
   Football Rwanda - Block titles, the same on every page
   (as on the home page: light band #f3f7f6, navy title,
   thin line under it). Loaded on every page (inc/enqueue.php).

   1. Title at the top of a white card (club, competition,
      player pages): the band fills the whole top of the card,
      whatever the card's padding (box-shadow trick + overflow
      hidden on the card), with a 1px line under it.
   2. Title on its own above a list (Statistics, Dashboard,
      match page): a light rounded bar.
   ========================================================== */

:root {
    --fr-title-band: #f3f7f6;
    --fr-title-line: #dbe6e3;
    --fr-title-ink: #071b35;
    --fr-title-eyebrow: #007863;
}


/* ---------- 1. Band at the top of a card ---------- */

html body main .fr-club-pro-side-card,
html body main .fr-club-sidebar-section,
html body main .fr-comp-card,
html body main .fr-single-competition-details,
html body main .frp-card:has(> .frp-card-heading:first-child),
html body main .frp-card:has(> .fr-scout-head:first-child) {
    overflow: hidden;
}

html body main .fr-club-pro-side-card > header,
html body main .fr-club-sidebar-section > .fr-club-sidebar-heading,
html body main .fr-comp-card > h2:first-child,
html body main .fr-single-competition-details > .fr-single-competition-details-header,
html body main .frp-card > .frp-card-heading:first-child,
html body main .frp-card > .fr-scout-head:first-child {
    position: relative;
    margin-bottom: 18px;
    padding-top: 12px;
    padding-bottom: 14px;
    border-bottom: 0;
    background: var(--fr-title-band);
    /* Paint the band up to the card's edges, then the line under it. */
    box-shadow:
        0 0 0 100vmax var(--fr-title-band),
        0 1px 0 100vmax var(--fr-title-line);
    clip-path: inset(-100vmax -100vmax -1px -100vmax);
}

html body main .fr-club-pro-side-card > header h2,
html body main .fr-club-sidebar-heading h2,
html body main .fr-comp-card > h2:first-child,
html body main .fr-single-competition-details-header h2,
html body main .frp-card-heading h2,
html body main .fr-scout-head h2 {
    color: var(--fr-title-ink);
}


/* ---------- 2. Bar above a list ---------- */

html body main .fr-statistics-section-header,
html body main .fr-dashboard-section-header,
html body main .fr-match-context-heading,
html body main .fr-match-lineups-heading,
html body main .fr-match-events-heading,
html body main .fr-match-featured-video-heading {
    padding: 14px 18px;
    border: 1px solid var(--fr-title-line);
    border-radius: 14px;
    background: var(--fr-title-band);
    box-shadow: none;
}

html body main .fr-statistics-section-header h2,
html body main .fr-dashboard-section-header h2,
html body main .fr-match-context-heading h2,
html body main .fr-match-lineups-heading h2,
html body main .fr-match-events-heading h2,
html body main .fr-match-featured-video-heading h2 {
    color: var(--fr-title-ink);
}

/* Small word above the title ("Goals", "Performance", "MATCH DATA"…) */
html body main .fr-statistics-section-header .fr-statistics-subtitle,
html body main .fr-dashboard-section-header > span,
html body main .fr-match-context-heading > span,
html body main .fr-match-lineups-heading span,
html body main .fr-match-events-heading span,
html body main .fr-match-featured-video-heading span {
    color: var(--fr-title-eyebrow);
}

html body main .fr-match-lineups-heading p,
html body main .fr-match-events-heading p,
html body main .fr-match-featured-video-heading p {
    color: #5b6b7b;
}


/* ---- 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; }
}

/* Counter: numbers and words in the same size, weight and colour */
.fr-ft-visits, .fr-ft-visits-today { color: #c3d0dd; font-size: 13px; font-weight: 500; }
.fr-ft-visits strong { color: inherit; font-size: inherit; font-weight: inherit; }

/* Counter: exactly the font of "All rights reserved." (no bold, same colour) */
.fr-ft-visits, .fr-ft-visits strong, .fr-ft-visits [data-fr-visits-total] { color: inherit; font-size: inherit; font-weight: inherit; }


/* ---- 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;
    }

}

/* ---- season.css ---- */
/* ==========================================================
   FOOTBALL RWANDA
   SEASON TAXONOMY
   /season/2026-2027/
========================================================== */


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

.fr-season-archive {
    padding: 48px 0 80px;
    background: #f5f8fa;
}


/* ==========================================================
   SEASON DIRECTORY HEADER
   Uses the actual directory-header HTML classes
========================================================== */

.fr-season-archive .fr-directory-header {
    margin-bottom: 32px;

    overflow: hidden;

    color: #ffffff;

    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%);

    border-radius: 16px;

    box-shadow:
        0 16px 40px rgba(6, 24, 47, 0.16);
}
/* ==========================================================
   HEADER CONTENT
========================================================== */

.fr-season-archive .fr-directory-header-content {
    padding: 30px 28px;
}


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

.fr-season-archive .fr-directory-header-subtitle {
    display: block;

    margin: 0 0 8px;

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

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

    line-height: 1.4;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


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

.fr-season-archive .fr-directory-header-title {
    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-size: 42px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    letter-spacing: -0.5px;
}


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

.fr-season-archive .fr-directory-header-description {
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.94) !important;

    font-size: 15px;

    line-height: 1.6;
}


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

.fr-season-archive .fr-directory-header-stats {
    display: flex;

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

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


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

.fr-season-archive .fr-directory-header-stat {
    min-width: 180px;

    padding: 18px 28px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


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

.fr-season-archive .fr-directory-header-stat strong {
    color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 800;

    line-height: 1;
}


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

.fr-season-archive .fr-directory-header-stat span {
    color: rgba(255, 255, 255, 0.82) !important;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


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

.fr-results-header {
    margin-bottom: 18px;
}


.fr-results-count {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #24364d;

    font-size: 15px;
}


.fr-results-count strong {
    color: #103f70;

    font-weight: 800;
}


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

.fr-competition-grid {
    display: grid;

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

    gap: 30px;
}


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

.fr-competition-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e9ef;

    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(15, 31, 53, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


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

    box-shadow:
        0 14px 32px rgba(15, 31, 53, 0.10);
}


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

.fr-competition-image {
    display: flex;

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

    height: 190px;

    background: #f4f8fa;

    text-decoration: none;
}


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

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.fr-competition-placeholder {
    display: flex;

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

    width: 72px;
    height: 72px;

    background: #e9f7f4;

    border-radius: 50%;

    font-size: 34px;
}


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

.fr-competition-content {
    padding: 24px;
}


.fr-competition-name {
    margin: 0 0 10px;

    text-align: center;
}


.fr-competition-name a {
    color: #103f70;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 800;

    text-decoration: none;
}


.fr-competition-name a:hover {
    color: #009b84;
}


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

.fr-competition-season {
    display: flex;

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

    gap: 6px;

    margin-bottom: 18px;

    color: #637286;

    font-size: 14px;
}


.fr-competition-meta-icon {
    font-size: 14px;
}


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

.fr-competition-description {
    margin-bottom: 20px;

    color: #637286;

    font-size: 14px;

    line-height: 1.6;

    text-align: center;
}


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

.fr-competition-button {
    display: flex;

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

    gap: 8px;

    width: 100%;

    padding: 12px 18px;

    box-sizing: border-box;

    color: #ffffff;

    background: #123f6d;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

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


.fr-competition-button:hover {
    color: #ffffff;

    background: #009b84;

    transform: translateY(-1px);
}


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

.fr-directory-empty {
    padding: 60px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2e9ef;

    border-radius: 16px;
}


.fr-directory-empty-icon {
    margin-bottom: 16px;

    font-size: 42px;
}


.fr-directory-empty h2 {
    margin: 0 0 8px;

    color: #103f70;

    font-size: 24px;
}


.fr-directory-empty p {
    margin: 0;

    color: #637286;
}


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

@media (max-width: 900px) {

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

}


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

@media (max-width: 768px) {

    .fr-season-archive {
        padding: 32px 0 60px;
    }

    .fr-season-archive .fr-directory-header-content {
        padding: 24px 20px;
    }

    .fr-season-archive .fr-directory-header-title {
        font-size: 32px !important;
    }

    .fr-season-archive .fr-directory-header-description {
        font-size: 14px;
    }

    .fr-season-archive .fr-directory-header-stat {
        min-width: 0;

        padding: 16px 20px;
    }

}


@media (max-width: 600px) {

    .fr-competition-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .fr-competition-image {
        height: 160px;
    }

}

/* ---- 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;
    }
}