/*
Theme Name: MrSeed
Theme URI: https://example.com/mrseed
Author: Pea Edward
Author URI: https://example.com
Description: MrSeed is a WordPress theme for football (soccer) prediction sites. It uses a navy page with a grey centre column of white rounded boxes, a banner box, category buttons, a Yesterday / Today / Tomorrow day switch that changes instantly, and match rows with an odds and tips pill. It includes a Paste Predictions screen for publishing daily tips without creating posts, and a "Display in" picker for prediction posts. Articles use normal WordPress Posts.
Version: 3.3.3
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: football-predictions
Tags: sports, football, soccer, predictions, news, newspaper, magazine, custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, custom-post-type, responsive
*/

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:root{
    --fp-green: #0d7b3c;
    --fp-green-dark: #00832f;
    --fp-dark: #2b2e37;
    --fp-dark-2: #3a3e47;
    /* MrSeed palette — "Teal & Tangerine". Each of these can be changed in
       Customize → Colors & Fonts → Colors (Site colors). */
    --fp-navy: #0b3d3a;         /* header background */
    --fp-chrome: var(--fp-navy);
    --fp-footer: #072b29;       /* footer background */
    --fp-blue: #0f8b7d;         /* main colour: buttons, active tabs, tips */
    --fp-blue-soft: #dff3ef;    /* day switch background */
    --fp-gold: #ff7a3d;         /* accent: Login button, highlights */
    --fp-panel: #eaf0ee;        /* centre column */
    --fp-tip-bg: #fff1e8;       /* tips box */
    --fp-pill-bg: #eef3f2;      /* page buttons */
    --fp-main-dark: color-mix(in srgb, var(--fp-blue) 82%, #000);
    --fp-accent-dark: color-mix(in srgb, var(--fp-gold) 85%, #000);
    --fp-accent-light: color-mix(in srgb, var(--fp-gold) 70%, #fff);
    --fp-soft-hover: color-mix(in srgb, var(--fp-blue-soft) 75%, var(--fp-blue));
    --fp-ui-font: var(--fp-heading-font);
    --fp-orange: #ff6633;       /* active menu item, hovers */
    --fp-orange-soft: #df8c42;  /* header text link */
    --fp-purple: #7776d1;       /* Join Now button, Best Bet pick */
    --fp-red: #bb2200;          /* "vs" between team names */
    --fp-tip-bar: #99ccff;      /* light blue tip bar under each match */
    --fp-ink: #111111;
    --fp-light: #f6f6f6;
    --fp-border: #eeeeee;
    --fp-win: #0d7b3c;
    --fp-lose: #c0392b;
    --fp-void: #8a8f98;
    --fp-news-badge: #f36523;   /* News category flag on cards */
    --fp-section-dot: #e8112d;  /* Dot before section headings */
    --fp-radius: 5px;
    --fp-shadow: 0 1px 3px rgba(0,0,0,.04);
    --fp-font: "Monda", "Segoe UI", Arial, Helvetica, sans-serif;

    /* Customizer-controlled typography (see Appearance → Customize → Typography). */
    --fp-heading-font: "Monda", "Segoe UI", Arial, Helvetica, sans-serif;
    --fp-font-size-base: 14px;
    --fp-line-height-base: 1.5;
    --fp-heading-weight: 700;

    /* Customizer-controlled colors (see Appearance → Customize → Theme Colors).
       Defaults below intentionally match the theme's original hardcoded
       colors, so nothing changes visually until a color is edited. */
    --fp-highlight: #7776d1;      /* Global Highlight Color */
    --fp-accent-text: #00832f;    /* Accent Color (Text) */
    --fp-primary-hover: #ff6633;  /* Hover - Primary Color */
    --fp-accent-hover: #ff6633;   /* Hover - Accent Color */
    --fp-text: #666666;           /* Text Color */
    --fp-heading: #111111;        /* Text Color for Header 1,2,3 */
    --fp-link: #0d7b3c;           /* Hyperlink Color */
    --fp-link-hover: #ff6633;     /* Link Hover Color */
    --fp-meta: #666666;           /* Entry Meta color (incl. post date) */
    --fp-body-bg: #ffffff;        /* Body Background Color */
    --fp-single-bg: #ffffff;      /* Body Background for Single Post Color */
}

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fp-font);
    font-size: var(--fp-font-size-base);
    color: var(--fp-text);
    background: var(--fp-body-bg);
    line-height: var(--fp-line-height-base);
}
body.single-fp_prediction,
body.single-fp_news,
body.single {
    background: var(--fp-single-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fp-link); text-decoration: none; }
a:hover { color: var(--fp-link-hover); text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .5em; font-family: var(--fp-heading-font); font-weight: var(--fp-heading-weight); }
h1, h2, h3 { color: var(--fp-heading); }
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */
.fp-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
.fp-site-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    padding: 40px 0 60px;
}
@media (max-width: 900px){
    .fp-site-content { grid-template-columns: 1fr; }
}
/* Grid items default to min-width:auto, so the content column refuses to
   shrink below the min-content width of its widest child. One horizontally
   scrolling child (the date strip) was therefore forcing the whole column —
   and every card in it — wider than a phone screen. */
.fp-site-content > * { min-width: 0; }

/* ==========================================================================
   3. Header — dark gradient bar, logo left, menu right
   ========================================================================== */
.fp-header {
    background: var(--fp-dark);
    background-image: var(--fp-chrome);
    color: #fff;
}
.fp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding-top: 5px;
    padding-bottom: 5px;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.fp-logo { flex: 0 0 auto; }
.fp-logo a:hover { text-decoration: none; }
.fp-logo img { max-height: 44px; width: auto; }

/* Text logo (used until a custom logo is uploaded): small caps, two tones. */
.fp-text-logo {
    display: inline-flex;
    align-items: baseline;
    font-variant: small-caps;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.5px;
    font-weight: 700;
    text-transform: lowercase;
}
.fp-text-logo__a { color: var(--fp-orange); text-transform: capitalize; }
.fp-text-logo__b { color: #a9abb0; font-weight: 400; text-transform: capitalize; }
.fp-text-logo:hover .fp-text-logo__b { color: #c9cbd0; }

.fp-header-actions { display: flex; align-items: center; gap: 14px; }

.fp-primary-nav { margin-left: auto; }
.fp-primary-nav ul { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.fp-primary-nav li { position: relative; }
.fp-primary-nav a {
    display: block;
    padding: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.fp-primary-nav a:hover { color: var(--fp-orange); text-decoration: none; }
.fp-primary-nav .current-menu-item > a,
.fp-primary-nav .current_page_item > a { color: var(--fp-orange); }

/* Dropdowns */
.fp-primary-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    flex-direction: column;
    align-items: stretch;
    background: var(--fp-dark);
    border-top: 2px solid var(--fp-orange);
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    z-index: 50;
}
.fp-primary-nav li:hover > .sub-menu,
.fp-primary-nav li:focus-within > .sub-menu { display: flex; }
.fp-primary-nav .sub-menu a { font-size: 13px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }

/* Register-style text link and Login-style button (Customize → Header Buttons,
   or add the CSS class fp-menu-register / fp-menu-login to any menu item). */
.fp-primary-nav .fp-nav-register,
.fp-primary-nav .fp-menu-register > a { color: var(--fp-orange-soft); font-size: 12px; }
.fp-primary-nav .fp-nav-login,
.fp-primary-nav .fp-menu-login > a {
    background: var(--fp-green);
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    margin-left: 6px;
    border-radius: 2px;
}
.fp-primary-nav .fp-nav-login:hover,
.fp-primary-nav .fp-menu-login > a:hover { background: var(--fp-green-dark); color: #fff; }

.fp-menu-toggle {
    display: none;
    width: 40px;
    height: 34px;
    background: none;
    border: 0;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    position: relative;
}
.fp-menu-toggle__bars,
.fp-menu-toggle__bars::before,
.fp-menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.fp-menu-toggle__bars { top: 16px; }
.fp-menu-toggle__bars::before { top: -7px; left: 0; right: 0; }
.fp-menu-toggle__bars::after { top: 7px; left: 0; right: 0; }
.fp-menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.1); }

@media (max-width: 1000px){
    .fp-menu-toggle { display: inline-block; margin-left: auto; }
    .fp-primary-nav { display: none; width: 100%; margin: 0; }
    .fp-primary-nav.is-open { display: block; }
    .fp-primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
    .fp-primary-nav a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .fp-primary-nav .sub-menu { display: flex; position: static; box-shadow: none; border: 0; padding-left: 14px; background: transparent; }
    .fp-primary-nav .fp-nav-login,
    .fp-primary-nav .fp-menu-login > a { display: inline-block; margin: 10px 0 0; padding: 9px 18px; border: 0; }
    .fp-text-logo { font-size: 28px; }
}
@media (max-width: 480px){
    .fp-header-actions .fp-social-icons{ display: none; }
}

/* ==========================================================================
   4. Cards: Predictions
   ========================================================================== */
.fp-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 10px 0 0;
}
.fp-section-title h2 { font-size: 20px; font-weight: 700; color: #000; display: flex; align-items: center; gap: 9px; margin: 0; }
.fp-section-title .fp-see-all { font-size: 14px; font-weight: 700; color: var(--fp-accent-text); }
.fp-section-title .fp-see-all:hover { color: var(--fp-accent-hover); }

.fp-prediction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%),1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.fp-card {
    background: #fff;
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    border: 1px solid var(--fp-border);
    overflow: hidden;
}

.fp-prediction-card { display: flex; flex-direction: column; }
.fp-prediction-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 16px;
    background: var(--fp-dark);
    color: #cfd6da;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fp-prediction-card__league { background: #000000; color: #ffffff; font-weight: 700; padding: 3px 10px; border-radius: 4px; display: inline-block; min-width: 0; flex: 0 1 auto; }
.fp-prediction-card__meta > span:last-child { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.fp-prediction-card__league:hover { background: #000000; color: #ffffff; }
.fp-prediction-card__body { padding: 16px; }
.fp-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
    margin-bottom: 14px;
}
.fp-team { flex: 1; min-width: 0; }
.fp-team img { width: 42px; height: 42px; object-fit: contain; margin: 0 auto 6px; }
.fp-team span { display: block; font-weight: 700; font-size: 14px; overflow-wrap: break-word; }
.fp-vs { font-weight: 800; color: #000000; font-size: 13px; padding-top: 20px; }

.fp-tip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--fp-light);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}
.fp-tip-row strong { color: var(--fp-accent-text); }

.fp-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}
.fp-status--upcoming { background: #000000; }
.fp-status--won { background: var(--fp-win); }
.fp-status--lost { background: var(--fp-lose); }
.fp-status--void { background: var(--fp-void); }
.fp-status--expired { background: var(--fp-void, #8a8f98); opacity: .85; }

.fp-prediction-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--fp-border);
    font-size: 13px;
    color: var(--fp-meta);
}

/* Single prediction */
.fp-single-prediction .fp-match-hero {
    background: var(--fp-dark);
    color: #fff;
    border-radius: var(--fp-radius);
    padding: 30px 20px;
    margin-bottom: 24px;
}
.fp-single-prediction .fp-match-hero .fp-teams span { color: #fff; }
.fp-single-prediction .fp-match-hero .fp-vs { color: #ffffff; }
/* Country / league line sits on the dark hero panel, so it must stay light. */
.fp-single-prediction .fp-match-hero__league { color: #ffffff; }
.fp-match-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(150px, 100%),1fr));
    gap: 12px;
    margin: 20px 0;
}
.fp-match-facts div {
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    padding: 12px 14px;
}
.fp-match-facts .fp-fact-label { font-size: 11px; text-transform: uppercase; color: #888; display: block; margin-bottom: 4px; }
.fp-match-facts .fp-fact-value { font-weight: 700; font-size: 15px; }

/* ==========================================================================
   5. News
   ========================================================================== */
.fp-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%),1fr));
    gap: 26px;
    margin-bottom: 40px;
}
.fp-news-card { background: none; border: 0; box-shadow: none; overflow: visible; }
.fp-news-card__media { position: relative; display: block; }
.fp-news-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: #dfe3e1; border-radius: 4px; }
.fp-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Category flag sitting on the bottom-left of the image, angled on its
   trailing edge so it reads as a tag rather than a plain box. */
.fp-news-card__media .fp-news-card__cat {
    position: absolute;
    left: 0;
    bottom: 10px;
    background: var(--fp-news-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 22px 5px 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}

.fp-news-card__body { padding: 12px 0 0; }
.fp-news-card__title { font-size: 20px; line-height: 1.25; font-weight: 800; margin: 0 0 10px; }
.fp-news-card__title a { color: #000; }
.fp-news-card__title a:hover { color: var(--fp-news-badge); text-decoration: none; }
.fp-news-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #000000;
}
.fp-news-card__author { display: inline-flex; align-items: center; gap: 6px; }
.fp-news-card__avatar { border-radius: 50%; display: block; }
.fp-news-card__sep { color: #9aa0a6; font-weight: 700; }

@media (max-width: 640px) {
    .fp-news-card__title { font-size: 17px; }
}

.fp-single-news .fp-featured-image { border-radius: var(--fp-radius); overflow: hidden; margin-bottom: 20px; }
.fp-single-news .fp-entry-meta { color: #888; font-size: 13px; margin-bottom: 20px; }
.fp-single-news .fp-entry-content { font-size: 16px; }
.fp-single-news .fp-entry-content p { margin: 0 0 1.2em; }

.fp-entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
    font-size: 15px;
    overflow-x: auto;
    display: block;
}
.fp-entry-content table thead { background: var(--fp-dark); }
.fp-entry-content table th {
    color: #fff;
    text-align: left;
    font-weight: 700;
    padding: 12px 14px;
    border: 1px solid var(--fp-dark);
}
.fp-entry-content table td {
    padding: 12px 14px;
    border: 1px solid var(--fp-border);
    vertical-align: top;
    line-height: 1.5;
}
.fp-entry-content table tbody tr:nth-child(even) { background: var(--fp-light); }
.fp-entry-content table tbody tr:hover { background: #eef1ef; }
@media (max-width: 640px) {
    .fp-entry-content table { font-size: 13px; }
    .fp-entry-content table th,
    .fp-entry-content table td { padding: 8px 10px; }
}

/* ==========================================================================
   6. Sidebar / Widgets
   ========================================================================== */
.fp-widget {
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: var(--fp-shadow);
}
.fp-widget h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--fp-green);
    padding-bottom: 8px;
    margin-bottom: 14px;
}
.fp-widget-prediction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--fp-border);
    font-size: 13px;
}
.fp-widget-prediction:last-child { border-bottom: none; }
.fp-widget-news li { padding: 10px 0; border-bottom: 1px solid var(--fp-border); font-size: 14px; }
.fp-widget-news li:last-child { border-bottom: none; }

/* ==========================================================================
   7. Filters
   ========================================================================== */
.fp-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.fp-filters a {
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--fp-border);
    font-size: 13px;
    font-weight: 700;
    color: #444;
}
.fp-filters a.is-active,
.fp-filters a:hover { background: var(--fp-green); color: #fff; border-color: var(--fp-green); }

/* ==========================================================================
   8. Pagination / Footer / Misc
   ========================================================================== */
.fp-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 40px; }
.fp-pagination a, .fp-pagination span {
    padding: 8px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--fp-border); font-size: 13px;
}
.fp-pagination .current { background: var(--fp-green); color: #fff; border-color: var(--fp-green); }

.fp-footer {
    background: var(--fp-dark);
    background-image: var(--fp-chrome);
    color: #c5c7cc;
    margin-top: 40px;
    font-size: 14px;
}
.fp-footer a { color: #c5c7cc; }
.fp-footer a:hover { color: var(--fp-orange); text-decoration: none; }
.fp-footer-inner { display: flex; flex-direction: column; gap: 22px; padding: 36px 20px 26px; }

.fp-footer-cols {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 30px;
}
.fp-footer-logo { margin-bottom: 14px; }
.fp-footer-logo img { max-height: 44px; width: auto; }
.fp-footer-about { margin: 0 0 14px; max-width: 360px; line-height: 1.6; }
.fp-footer .fp-social-icons a { background: rgba(255,255,255,.1) !important; }
.fp-footer .fp-social-icons a:hover { background: var(--fp-orange) !important; color: #fff !important; }
.fp-footer-col__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 14px;
}
.fp-footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.fp-footer-col a { display: inline-block; }

.fp-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.fp-footer-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    text-align: center;
    font-size: 13px;
}

/* Legacy single-row footer menu (kept for child themes). */
.fp-footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }

@media (max-width: 780px) {
    .fp-footer-cols { grid-template-columns: 1fr 1fr; }
    .fp-footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .fp-footer-cols { grid-template-columns: 1fr; }
}

.fp-empty { padding: 30px; text-align: center; color: #000000; background: #fff; border-radius: var(--fp-radius); border: 1px dashed var(--fp-border); }

.fp-search-form { display: flex; gap: 6px; }
.fp-search-form input[type="search"] {
    flex: 1; padding: 8px 10px; border: 1px solid var(--fp-border); border-radius: 6px;
}
.fp-search-form button {
    background: var(--fp-green); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer;
}

/* ==========================================================================
   9. Share on Socials
   ========================================================================== */
.fp-share-links{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px 0;
    padding: 16px;
    background: var(--fp-light);
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
}
.fp-share-label{ font-weight: 700; font-size: 13px; color: var(--fp-text); margin-right: 4px; }
.fp-share-links a{
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--fp-border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fp-text);
}
.fp-share-links a:hover{ background: var(--fp-highlight); color: #fff; border-color: var(--fp-highlight); text-decoration: none; }

/* ==========================================================================
   10. Elementor / full-width page support
   ========================================================================== */
.fp-full-width-page{ width: 100%; }
.fp-elementor-article .elementor{ margin: 0; }
/* Let Elementor's own section/column width & "stretch section" controls
   work exactly as in the editor — no prose max-width or padding imposed
   by the theme on Elementor-built content. */
body.elementor-page .fp-entry-content,
.fp-elementor-article > .elementor{
    max-width: none;
    font-size: inherit;
}
.fp-page-title{ font-size: 32px; }

/* ==========================================================================
   11. Load More / Infinite Scroll
   ========================================================================== */
.fp-load-more-wrap{ text-align: center; margin: 10px 0 40px; }
.fp-load-more-btn{
    background: var(--fp-highlight);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.fp-load-more-btn:hover{ background: var(--fp-primary-hover); }
.fp-load-more-btn:disabled{ opacity: .7; cursor: default; }
.fp-infinite-sentinel{ height: 1px; }
.fp-load-more-status{ margin-top: 10px; }

/* ==========================================================================
   12. Homepage Intro (H1 + about text)
   ========================================================================== */
.fp-home-intro{ padding: 26px 0 6px; max-width: 760px; }
.fp-home-intro h1{ font-size: 28px; margin-bottom: 8px; color: var(--fp-heading); }
.fp-home-intro p{ font-size: 15px; color: var(--fp-meta); margin: 0; }
@media (max-width: 640px){
    .fp-home-intro h1{ font-size: 22px; }
}

.fp-home-about{ margin: 20px 0 40px; }
.fp-home-about-content{
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 24px 28px;
    color: var(--fp-text);
}
.fp-home-about-content h2,
.fp-home-about-content h3{ margin-top: 1.2em; }
.fp-home-about-content p{ margin: 0 0 1em; line-height: 1.7; }
.fp-home-about-content ul,
.fp-home-about-content ol{ list-style: revert; margin: 0 0 1em; padding-left: 1.4em; }
.fp-home-about-content a{ text-decoration: underline; }
@media (max-width: 640px){
    .fp-home-about-content{ padding: 18px 20px; }
}
@media (max-width: 640px){
    .fp-share-links{ padding: 12px; }
    .fp-share-links a{ font-size: 12px; padding: 6px 12px; }
    .fp-page-title{ font-size: 26px; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.fp-breadcrumbs { margin: 0 0 16px; font-size: 13px; color: var(--fp-meta); }
.fp-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.fp-breadcrumbs li { display: flex; align-items: center; }
.fp-breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--fp-border); }
.fp-breadcrumbs a { color: var(--fp-meta); text-decoration: underline; }
.fp-breadcrumbs a:hover { color: var(--fp-accent-text); }
.fp-breadcrumbs [aria-current="page"] { color: var(--fp-text); font-weight: 600; }

/* ==========================================================================
   Author bio box
   ========================================================================== */
.fp-author-bio {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--fp-light);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: 20px;
    margin: 28px 0;
}
.fp-author-bio__avatar img { border-radius: 50%; display: block; }
.fp-author-bio__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fp-meta); margin-bottom: 2px; }
.fp-author-bio__name { font-size: 17px; font-weight: 700; color: var(--fp-heading); }
.fp-author-bio__desc { margin: 6px 0 10px; line-height: 1.6; color: var(--fp-text); }
.fp-author-bio__links { font-size: 13px; }
.fp-author-bio__links a { color: var(--fp-accent-text); }
@media (max-width: 480px) {
    .fp-author-bio { flex-direction: column; align-items: center; text-align: center; }
    .fp-author-bio__links { justify-content: center; }
}

/* ==========================================================================
   Author page hero
   ========================================================================== */
.fp-author-hero {
    display: flex;
    gap: 22px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    padding: 28px;
    margin: 0 0 28px;
}
.fp-author-hero__avatar img { border-radius: 50%; display: block; }
.fp-author-hero__name { margin: 0 0 8px; font-size: 26px; }
.fp-author-hero__desc { margin: 0 0 12px; line-height: 1.6; color: var(--fp-text); }
.fp-author-hero__stats { display: flex; gap: 22px; margin-bottom: 12px; }
.fp-author-hero__stats strong { display: block; font-size: 20px; color: var(--fp-heading); }
.fp-author-hero__stats span { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--fp-meta); }
.fp-author-hero__links { display: flex; gap: 14px; font-size: 13px; }
.fp-author-hero__links a { color: var(--fp-accent-text); text-decoration: underline; }
@media (max-width: 560px) {
    .fp-author-hero { flex-direction: column; text-align: center; }
    .fp-author-hero__stats,
    .fp-author-hero__links { justify-content: center; }
}

/* ==========================================================================
   Related content
   ========================================================================== */
.fp-related { margin: 32px 0; }
.fp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%),1fr));
    gap: 26px;
}

/* ==========================================================================
   Horizontal overflow guards
   Keeps the page from extending past the viewport on small screens.
   ========================================================================== */

/* Embeds (YouTube, Twitter, maps) carry fixed width/height attributes. */
iframe,
video,
embed,
object {
    max-width: 100%;
}

/* Editor content can contain long URLs and unbroken strings that would
   otherwise force the page wider than the screen. */
.fp-entry-content,
.fp-entry-content p,
.fp-entry-content li,
.fp-entry-content h1,
.fp-entry-content h2,
.fp-entry-content h3,
.fp-entry-content h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Code samples scroll inside their own box rather than stretching the page. */
.fp-entry-content pre {
    max-width: 100%;
    overflow-x: auto;
}
.fp-entry-content code {
    overflow-wrap: break-word;
}

/* Wide images and embeds inside post content stay within their column. */
.fp-entry-content img,
.fp-entry-content figure,
.fp-entry-content .wp-block-embed {
    max-width: 100%;
    height: auto;
}

/* Final guard. overflow-x: clip is used rather than hidden because hidden on
   body silently breaks the sticky header's position: sticky. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* ==========================================================================
   Most Popular widget
   Rank number floats so the headline wraps back underneath it, the way a
   numbered chart reads in print.
   ========================================================================== */
.fp-popular {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: fp-popular;
}
.fp-popular__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--fp-border);
}
.fp-popular__item:last-child { border-bottom: 0; }

.fp-popular__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: #dfe3e1;
    display: block;
}
.fp-popular__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fp-popular__body { flex: 1; min-width: 0; }
.fp-popular__rank {
    float: left;
    margin: -4px 8px 0 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--fp-news-badge);
}
.fp-popular__title {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 4px;
    overflow-wrap: break-word;
}
.fp-popular__title a { color: #000; }
.fp-popular__title a:hover { color: var(--fp-news-badge); text-decoration: none; }
.fp-popular__author {
    clear: left;
    display: block;
    font-size: 12px;
    color: #5f6368;
}

/* Sidebar widget headings pick up the same dot marker as section titles. */
.fp-widget__title {
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 2px solid #111;
    padding-bottom: 8px;
}
.fp-widget__title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fp-section-dot);
    flex: 0 0 auto;
}

/* ==========================================================================
   Lists inside editor content
   The global "ul { list-style: none }" reset above is for navigation and
   card lists; it also stripped bullets from post and page content, so
   restore normal list rendering wherever the editor output lands.
   ========================================================================== */
.fp-entry-content ul,
.fp-entry-content ol,
.comment-content ul,
.comment-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.6em;
}
.fp-entry-content ul,
.comment-content ul {
    list-style: disc outside;
}
.fp-entry-content ol,
.comment-content ol {
    list-style: decimal outside;
}
.fp-entry-content ul ul,
.comment-content ul ul {
    list-style: circle outside;
}
.fp-entry-content ul ul ul,
.comment-content ul ul ul {
    list-style: square outside;
}
.fp-entry-content ol ol,
.comment-content ol ol {
    list-style: lower-alpha outside;
}
.fp-entry-content li,
.comment-content li {
    margin: 0 0 .5em;
}
/* Nested lists sit tight against their parent item. */
.fp-entry-content li > ul,
.fp-entry-content li > ol,
.comment-content li > ul,
.comment-content li > ol {
    margin: .5em 0 0;
}

/* WordPress block editor list variants. */
.fp-entry-content ul.is-style-none,
.fp-entry-content .wp-block-navigation ul {
    list-style: none;
    padding-left: 0;
}

/* ==========================================================================
   Match date navigation
   Scrolls horizontally on small screens rather than wrapping, so the strip
   keeps its single-row shape on a phone.
   ========================================================================== */
.fp-date-nav {
    --fp-datenav-bg: #141127;
    --fp-datenav-text: #b9b6cc;
    --fp-datenav-active-from: #7d5cff;
    --fp-datenav-active-to: #9b7bff;
    background: var(--fp-datenav-bg);
    border-radius: 14px;
    margin: 0 0 18px;
    padding: 18px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fp-date-nav::-webkit-scrollbar { display: none; }

.fp-date-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: max-content;
}
.fp-date-nav__item { flex: 0 0 auto; }

.fp-date-nav__link {
    display: block;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--fp-datenav-text);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}
.fp-date-nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
}
.fp-date-nav__link.is-active {
    color: #fff;
    background: linear-gradient(180deg, var(--fp-datenav-active-from), var(--fp-datenav-active-to));
    box-shadow: 0 0 18px rgba(125, 92, 255, .55);
}
.fp-date-nav__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .fp-date-nav__list { justify-content: flex-start; }
    .fp-date-nav__link { padding: 8px 14px; font-size: 13px; }
}

/* ==========================================================================
   Mobile touch targets
   Filter pills, pagination, date nav and footer links were all around 31-35px
   tall, below the ~44px minimum a thumb needs and below what Lighthouse
   accepts. Enlarged on small screens only, so desktop density is unchanged.
   ========================================================================== */
@media (max-width: 780px) {
    .fp-filters { gap: 10px; }
    .fp-filters a {
        padding: 11px 18px;
        font-size: 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .fp-pagination { gap: 10px; }
    .fp-pagination a,
    .fp-pagination span {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .fp-date-nav__link {
        padding: 12px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .fp-footer-nav a {
        display: inline-block;
        padding: 8px 0;
    }

    /* Reclaim a little width on narrow phones. */
    .fp-container { padding: 0 14px; }

    /* Stack the section heading and its "see all" link instead of squeezing. */
    .fp-section-title {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Very small phones: let the match-up breathe. */
@media (max-width: 380px) {
    .fp-teams { gap: 6px; }
    .fp-team span { font-size: 13px; }
    .fp-prediction-card__body { padding: 14px 12px; }
    .fp-tip-row { flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   Category label on single articles
   Sits inline above the headline. Never overlays the featured image — the
   card treatment is scoped to .fp-news-card__media.
   ========================================================================== */
.fp-entry-cat {
    display: inline-block;
    background: var(--fp-news-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}
.fp-entry-cat a { color: #fff; }
.fp-entry-cat a:hover { text-decoration: underline; }

/* ==========================================================================
   Prediction table layout
   One set of markup: CSS grid columns on desktop, restacked on mobile.
   ========================================================================== */
.fp-pred-table {
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.fp-pred-table__head,
.fp-pred-row {
    display: grid;
    /* Match gets the most room — club names are the longest strings here and
       the league can ellipsis without losing meaning. */
    grid-template-columns: minmax(150px, 1.15fr) minmax(250px, 2.9fr) 110px 82px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}

.fp-pred-table__head {
    padding-top: 15px;
    padding-bottom: 15px;
    background: #14171c;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 0;
}
/* Column dividers, as in the reference. */
.fp-pred-table__head span + span { box-shadow: -1px 0 0 rgba(255, 255, 255, .22); }
.fp-pred-table__head span { padding-left: 10px; }
.fp-pred-table__head span:first-child { padding-left: 0; }
.fp-pred-table__head span:nth-child(2),
.fp-pred-table__head span:nth-child(3),
.fp-pred-table__head span:nth-child(4) { text-align: center; }

.fp-pred-row {
    position: relative;
    min-height: 62px;
    border-bottom: 1px solid #eef0f2;
    font-size: 15px;
}
.fp-pred-row:last-child { border-bottom: 0; }
.fp-pred-row:nth-child(even) { background: #f7f8f9; }
.fp-pred-row:hover { background: #eef5f1; }

.fp-pred-row__league {
    display: flex;
    align-items: baseline;
    color: #4b5563;
    font-size: 14px;
    min-width: 0;
}
.fp-pred-row__leaguename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-pred-row__match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.fp-pred-row > * { min-width: 0; }
.fp-pred-row__side {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #111;
    font-weight: 700;
    text-decoration: none;
}
.fp-pred-row__side:hover { text-decoration: none; color: #111; }
.fp-pred-row__side--home { justify-content: flex-end; text-align: right; }
.fp-pred-row__side--away { justify-content: flex-start; }
.fp-pred-row__team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-pred-row__crest {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 auto;
}
.fp-pred-row__crest--blank { border-radius: 50%; background: #e5e7eb; }
.fp-pred-row__vs { text-align: center; font-size: 12px; font-weight: 700; color: #9ca3af; }

.fp-pred-row__tip { text-align: center; font-weight: 700; color: #111; min-width: 0; }
.fp-pred-tip {
    display: inline-block;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    background: #eef1f3;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}
.fp-pred-row__result { text-align: center; }

/* The circle takes its colour from the wrapper, so one fill drives it. */
.fp-result { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.fp-result svg { display: block; }
.fp-result--won      { color: #21b26a; }
.fp-result--lost     { color: #dc2f3f; }
.fp-result--upcoming { color: #f0b429; }
.fp-result--void     { color: #9aa0a6; }

/* Whole row clickable, without nesting links inside links. */
.fp-pred-row__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.fp-pred-row__side { position: relative; z-index: 2; }
.fp-pred-row__link:focus-visible { outline: 2px solid var(--fp-green); outline-offset: -2px; }

/* ---------- Mobile: restack into a block per match ---------- */
@media (max-width: 782px) {
    .fp-pred-table__head { display: none; }

    .fp-pred-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "meta  meta meta"
            "match tip  conf";
        gap: 6px 10px;
        padding: 14px 16px;
        min-height: 0;
    }

    /* Time and league already share one cell, so it simply spans the top. */
    .fp-pred-row__league {
        grid-area: meta;
        justify-self: start;
        font-size: 14px;
        color: #4b5563;
    }
    .fp-pred-row__leaguename { white-space: normal; }

    .fp-pred-row__match {
        grid-area: match;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 6px;
        min-width: 0;
    }
    .fp-pred-row__side { min-width: 0; }
    .fp-pred-row__side--away {
        justify-content: flex-start;
        text-align: left;
    }
    /* Home markup is name-then-crest for the desktop right alignment;
       reverse it so both crests line up on the left when stacked. */
    .fp-pred-row__side--home {
        flex-direction: row-reverse;
        justify-content: flex-end;
        text-align: left;
    }

    .fp-pred-row__side--home { order: 1; }
    .fp-pred-row__vs { display: none; }
    .fp-pred-row__side--away { order: 2; }

    .fp-pred-row__tip  { grid-area: tip;  align-self: center; max-width: 104px; }
    .fp-pred-row__result { grid-area: conf; align-self: center; }
}

@media (max-width: 420px) {
    .fp-pred-row { font-size: 14px; }
    .fp-pred-row__tip { font-size: 13px; }
}

/* Between tablet and small desktop the content column is narrow (the
   sidebar takes 320px), so give the match its space back. */
@media (min-width: 783px) and (max-width: 1150px) {
    .fp-pred-table__head,
    .fp-pred-row {
        grid-template-columns: minmax(130px, 1fr) minmax(240px, 2.8fr) 104px 76px;
    }
}

/* ==========================================================================
   Footer link box
   Sits between the footer menu and the copyright line.
   ========================================================================== */
.fp-footer-links {
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 18px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #cfd6da;
    text-align: center;
}
.fp-footer-links__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    margin: 0 0 8px;
}
.fp-footer-links__body p { margin: 0 0 8px; }
.fp-footer-links__body p:last-child { margin-bottom: 0; }
.fp-footer-links__body a {
    color: #fff;
    text-decoration: none;
    /* Long link lists must wrap rather than stretch the footer. */
    overflow-wrap: break-word;
}
.fp-footer-links__body a:hover { text-decoration: underline; }
.fp-footer-links__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

/* Result icon inside the card footer and the single-page fact list. */
.fp-prediction-card__footer .fp-result { margin-left: auto; }
.fp-fact-value--result { display: inline-flex; align-items: center; }

/* Interlinking: league and tip point at their archives, styled as text so
   the row does not turn into a sea of blue links. */
.fp-pred-row__league a { color: inherit; text-decoration: none; }
.fp-pred-row__league a:hover { color: var(--fp-green); text-decoration: underline; }
a.fp-pred-tip { color: #111; text-decoration: none; }
a.fp-pred-tip:hover { background: #e2e8ea; color: #111; text-decoration: none; }
/* Sit above the whole-row overlay link so these stay clickable. */
.fp-pred-row__league a,
a.fp-pred-tip { position: relative; z-index: 2; }

/* ==========================================================================
   "Read also" inline link
   ========================================================================== */
.fp-read-also {
    margin: 26px 0;
    background: #f2f4f5;
    border-left: 4px solid var(--fp-green);
    border-radius: 4px;
}
.fp-read-also__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
}
.fp-read-also__link:hover { text-decoration: none; }

.fp-read-also__thumb {
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
    border-radius: 4px;
    overflow: hidden;
    background: #dfe3e1;
    display: block;
}
.fp-read-also__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fp-read-also__body { min-width: 0; }
.fp-read-also__label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp-green);
    margin-bottom: 6px;
}
.fp-read-also__title {
    display: block;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
    color: #111;
    overflow-wrap: break-word;
}
.fp-read-also__link:hover .fp-read-also__title { color: var(--fp-green); }
.fp-read-also__link:focus-visible {
    outline: 2px solid var(--fp-green);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .fp-read-also__link { gap: 12px; padding: 12px 14px; }
    .fp-read-also__thumb { flex-basis: 64px; width: 64px; height: 64px; }
    .fp-read-also__title { font-size: 16px; }
}

/* Blue day bar above each new match day in the table. */
.fp-pred-daybar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #1c1cd8 0%, #0d0da8 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.fp-pred-daybar__icon { flex: 0 0 auto; display: block; }
.fp-pred-daybar__text { overflow-wrap: break-word; }

@media (max-width: 782px) {
    .fp-pred-daybar { font-size: 14px; padding: 12px 14px; gap: 10px; }
}

/* ==========================================================================
   MrSeed design layer
   Hero, match blocks,
   market pills, and palette updates for the shared components.
   ========================================================================== */

/* ---------- Buttons ---------- */
.fp-btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 5px;
    font-weight: 700;
    line-height: 1.3;
    border: 1px solid transparent;
    transition: background-color .15s ease, transform .15s ease;
}
.fp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.fp-btn--purple { background: var(--fp-purple); color: #fff; }
.fp-btn--purple:hover { background: #6261c4; color: #fff; }

/* ---------- Homepage grid ---------- */
.fp-home { padding: 24px 0 20px; }
.fp-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.fp-home__grid--sidebar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fp-home__grid > * { min-width: 0; }
@media (max-width: 900px) {
    .fp-home__grid,
    .fp-home__grid--sidebar { grid-template-columns: 1fr; }
}
.fp-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 0 14px;
}
.fp-home-heading { font-size: 20px; font-weight: 700; color: #000; margin: 0; }
.fp-home .fp-sidebar { margin-top: 56px; }
@media (max-width: 900px) { .fp-home .fp-sidebar { margin-top: 10px; } }

/* ---------- Match blocks ---------- */
.fp-match-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fp-match {
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: 5px;
    padding: 10px;
    color: var(--fp-text);
    font-size: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fp-match:hover { border-color: #dcdcdc; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.fp-match__top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: #333;
    margin-bottom: 6px;
}
.fp-match__league { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fp-match__league:hover { color: var(--fp-orange); }
.fp-match__time { flex: 0 0 auto; font-weight: 700; color: #333; }

.fp-match__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    color: var(--fp-ink);
}
.fp-match__teams {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--fp-ink);
    font-weight: 700;
    font-size: 13px;
}
.fp-match__teams:hover { color: var(--fp-ink); }
.fp-match__teams:hover .fp-match__names { text-decoration: underline; }
.fp-match__crests { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.fp-match__names { min-width: 0; overflow-wrap: anywhere; }
.fp-match__vs { color: var(--fp-red); font-weight: 700; margin: 0 2px; }

.fp-crest {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}
.fp-crest--blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9ebef;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}
.fp-crest--sm { width: 22px; height: 22px; font-size: 10px; }

.fp-match__bet {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fp-ink);
    white-space: nowrap;
}
.fp-match__pick { color: var(--fp-purple); font-weight: 700; }
a.fp-match__pick:hover { color: var(--fp-orange); }
.fp-match__bet .fp-result svg { width: 20px; height: 20px; }

.fp-match__analysis {
    display: block;
    margin-top: 6px;
    padding: 5px;
    background: var(--fp-tip-bar);
    color: #000;
    font-size: 12px;
}
.fp-match__analysis:hover { color: #000; background: #8cc2f7; }
.fp-match--won .fp-match__analysis { background: #bdeccb; }
.fp-match--lost .fp-match__analysis { background: #f8c9c4; }

@media (max-width: 520px) {
    .fp-match__content { flex-wrap: wrap; }
    .fp-match__bet { width: 100%; justify-content: flex-end; }
}

/* ---------- Market quick links ---------- */
.fp-market-links { text-align: center; margin: 22px 0 6px; }
.fp-market-links__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
}
.fp-market-links__list a {
    display: inline-block;
    padding: 9px 26px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: var(--fp-ink);
    font-weight: 700;
    font-size: 13px;
}
.fp-market-links__list a:hover { border-color: var(--fp-purple); color: var(--fp-purple); }
.fp-market-links__more { font-size: 20px; font-weight: 700; color: var(--fp-accent-text); }
.fp-market-links__more:hover { color: var(--fp-orange); }

/* ---------- News cards ---------- */
.fp-news-card__thumb { border-radius: 5px; background: #e9ebef; }
.fp-news-card__media .fp-news-card__cat { background: var(--fp-orange); }
.fp-news-card__title { font-size: 17px; font-weight: 700; }
.fp-news-card__title a { color: var(--fp-ink); }
.fp-news-card__title a:hover { color: var(--fp-orange); }
.fp-news-card__meta { color: var(--fp-text); font-size: 12px; }
.fp-news-grid { gap: 22px; }

/* ---------- Sidebar widgets ---------- */
.fp-widget {
    border: 1px solid #eaeae9;
    border-radius: 5px;
    box-shadow: none;
    padding: 14px;
}
.fp-widget__title,
.fp-widget h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--fp-border);
    padding-bottom: 10px;
}
.fp-widget__title::before { display: none; }
.fp-popular__rank { color: var(--fp-orange); }
.fp-popular__title a:hover { color: var(--fp-orange); }

/* ---------- Shared components re-tinted ---------- */
.fp-card { border-color: var(--fp-border); box-shadow: none; }
.fp-prediction-card__meta { background: var(--fp-dark); background-image: var(--fp-chrome); color: #e2e4e8; }
.fp-prediction-card__league,
.fp-prediction-card__league:hover { background: rgba(255,255,255,.1); }
.fp-vs { color: var(--fp-red); }
.fp-tip-row strong { color: var(--fp-purple); }
.fp-status--upcoming { background: var(--fp-purple); }
.fp-single-prediction .fp-match-hero { background: var(--fp-dark); background-image: var(--fp-chrome); }

.fp-filters a { border-radius: 10px; border-color: #ddd; color: var(--fp-ink); }
.fp-filters a.is-active,
.fp-filters a:hover { background: var(--fp-purple); border-color: var(--fp-purple); color: #fff; }
.fp-pagination a:hover { border-color: var(--fp-purple); color: var(--fp-purple); text-decoration: none; }
.fp-pagination .current { background: var(--fp-purple); border-color: var(--fp-purple); }
.fp-load-more-btn { background: var(--fp-purple); border-radius: 5px; }
.fp-load-more-btn:hover { background: #6261c4; }
.fp-search-form button { background: var(--fp-green); border-radius: 5px; }

.fp-pred-table { border-color: var(--fp-border); border-radius: 5px; }
.fp-pred-table__head { background: var(--fp-dark); background-image: var(--fp-chrome); }
.fp-pred-daybar { background: var(--fp-dark-2); background-image: var(--fp-chrome); }
.fp-pred-row:hover { background: #f6f6fd; }
.fp-pred-tip { color: var(--fp-purple); background: #f0f0fb; }
a.fp-pred-tip { color: var(--fp-purple); }
a.fp-pred-tip:hover { background: #e4e4f8; color: var(--fp-purple); }
.fp-pred-row__vs { color: var(--fp-red); }

.fp-entry-cat { background: var(--fp-orange); }
.fp-read-also { border-left-color: var(--fp-orange); background: var(--fp-light); }
.fp-read-also__label { color: var(--fp-orange); }
.fp-read-also__link:hover .fp-read-also__title { color: var(--fp-orange); }
.fp-share-links a:hover { background: var(--fp-purple); border-color: var(--fp-purple); }
.fp-home-about-content { border-color: var(--fp-border); border-radius: 5px; }
.fp-home-about-content h2,
.fp-home-about-content h3 { color: #000; }
.fp-entry-content table thead { background: var(--fp-dark); }
.fp-entry-content table th { border-color: var(--fp-dark); }
.fp-entry-content h2,
.fp-entry-content h3 { color: #000; }

/* Long-form text stays comfortable even with the compact 14px base. */
.fp-entry-content { font-size: 16px; line-height: 1.7; color: #444; }


/* Day tabs are buttons: drop the browser button look. */
button.fp-date-nav__link {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button.fp-date-nav__link.is-active {
    background: linear-gradient(180deg, var(--fp-datenav-active-from), var(--fp-datenav-active-to));
}
.fp-day-tabs .fp-date-nav { margin: 4px 0 6px; }
.fp-day-tabs .fp-date-nav__list { display: flex; }
.fp-day-panel[hidden] { display: none; }
@media (max-width: 640px) {
    button.fp-date-nav__link { font-size: 13px; }
}

/* ==========================================================================
   Date strip layout
   Desktop: every day gets an equal column, so Today sits dead centre.
   Phones: only Yesterday · Today · Tomorrow, still centred, no scrolling.
   ========================================================================== */
.fp-date-nav { overflow: hidden; }
.fp-date-nav .fp-date-nav__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.fp-date-nav .fp-date-nav__item { display: flex; justify-content: center; min-width: 0; }
.fp-date-nav .fp-date-nav__link { padding: 12px 22px; white-space: nowrap; }

@media (max-width: 1000px) {
    .fp-date-nav .fp-date-nav__link { padding: 10px 14px; font-size: 15px; }
}
@media (max-width: 760px) {
    .fp-date-nav { padding: 12px 10px; }
    .fp-date-nav .fp-date-nav__link--far,
    .fp-date-nav .fp-date-nav__item--far { display: none; }
    .fp-date-nav .fp-date-nav__link { padding: 12px 18px; font-size: 16px; min-height: 0; }
}
@media (max-width: 360px) {
    .fp-date-nav .fp-date-nav__link { padding: 10px 12px; font-size: 14px; }
}


/* ==========================================================================
   MrSeed v3 — card layout
   Navy page, a grey centre column holding white rounded boxes, blue
   accents, gold call-to-action, and match rows with an odds / tips pill.
   ========================================================================== */

body { background: var(--fp-body-bg); color: var(--fp-text); }

/* ---------- Header ---------- */
.fp-header { background: var(--fp-navy); background-image: none; }
.fp-header-inner { min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
.fp-text-logo { font-variant: normal; text-transform: none; font-family: var(--fp-heading-font); font-size: 28px; letter-spacing: -.3px; }
.fp-text-logo__a { color: #fff; }
.fp-text-logo__b { color: var(--fp-gold); font-weight: 700; }
.fp-text-logo:hover .fp-text-logo__b { color: var(--fp-accent-light); }

@media (min-width: 1001px) {
    .fp-primary-nav > ul {
        background: rgba(255, 255, 255, .08);
        border-radius: 8px;
        padding: 6px 10px;
        gap: 6px;
    }
}
.fp-primary-nav a {
    color: #f3f3f3;
    font-family: var(--fp-heading-font);
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    padding: 8px 10px;
}
.fp-primary-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.fp-primary-nav .current-menu-item > a,
.fp-primary-nav .current_page_item > a { color: var(--fp-gold); }
.fp-primary-nav .sub-menu { background: var(--fp-footer); border-top-color: var(--fp-gold); border-radius: 6px; padding: 6px; }
.fp-primary-nav .fp-nav-register,
.fp-primary-nav .fp-menu-register > a {
    color: #fff;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px;
    padding: 7px 22px;
    margin-left: 6px;
}
.fp-primary-nav .fp-nav-register:hover,
.fp-primary-nav .fp-menu-register > a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fp-primary-nav .fp-nav-login,
.fp-primary-nav .fp-menu-login > a {
    background: var(--fp-gold);
    color: #fff;
    font-size: 15px;
    border-radius: 8px;
    padding: 8px 24px;
    margin-left: 8px;
}
.fp-primary-nav .fp-nav-login:hover,
.fp-primary-nav .fp-menu-login > a:hover { background: var(--fp-accent-dark); color: #fff; }

/* ---------- Grey centre column ---------- */
#fp-main-content.fp-container {
    max-width: 1000px;
    background: var(--fp-panel);
    border-radius: 0 0 16px 16px;
    padding: 10px 16px 16px;
}
@media (max-width: 780px) {
    #fp-main-content.fp-container { padding: 6px 6px 10px; border-radius: 0 0 12px 12px; }
}

/* White rounded boxes */
.fp-box {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
}
@media (max-width: 600px) { .fp-box { padding: 14px; border-radius: 16px; } }

/* Inner pages: content and sidebar sit in white boxes too */
.fp-site-content { padding: 6px 0 10px; gap: 16px; }
.fp-site-content > .fp-main {
    background: #fff;
    border-radius: 20px;
    padding: 22px;
}
@media (max-width: 600px) { .fp-site-content > .fp-main { padding: 14px; border-radius: 16px; } }
.fp-widget { border-radius: 20px; border-color: #d9d9d9; padding: 18px; }
.fp-widget__title, .fp-widget h3 { font-family: var(--fp-heading-font); color: var(--fp-heading); border-bottom-color: #f3f3f3; }

/* ---------- Buttons ---------- */
.fp-btn { border-radius: 10px; font-family: var(--fp-heading-font); font-weight: 500; padding: 12px 26px; font-size: 15px; text-align: center; }
.fp-btn--blue { background: var(--fp-blue); color: #fff; }
.fp-btn--blue:hover { background: var(--fp-main-dark); color: #fff; }
.fp-btn--alt { background: linear-gradient(90deg, var(--fp-blue) 0%, var(--fp-gold) 100%); color: #fff; }
.fp-btn--alt:hover { filter: brightness(1.06); color: #fff; }

/* ---------- Homepage banner box ---------- */
.fp-home { padding: 6px 0 4px; }
.fp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 20px 28px;
    align-items: center;
    padding: 22px 36px;
    border: 0;
    color: var(--fp-text);
}
.fp-hero__title {
    color: var(--fp-blue);
    font-family: var(--fp-heading-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 10px;
}
.fp-hero__intro { color: #000; font-size: 16px; line-height: 1.6; margin: 0; }
.fp-hero__side { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.fp-hero__img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 14px; }
.fp-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.fp-hero__btns .fp-btn { flex: 1 1 160px; }
@media (max-width: 760px) {
    .fp-hero { grid-template-columns: 1fr; padding: 16px; }
    .fp-hero__title { font-size: 26px; line-height: 1.35; }
}

/* ---------- Category buttons ---------- */
.fp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 6px;
    border-radius: 16px;
}
.fp-pill {
    flex: 1 0 auto;
    text-align: center;
    padding: 8px 28px;
    border-radius: 999px;
    background: var(--fp-pill-bg);
    color: #000;
    font-family: var(--fp-ui-font);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.fp-pill:hover,
.fp-pill.is-active { background: var(--fp-blue); color: #fff; }
@media (max-width: 600px) { .fp-pill { padding: 8px 16px; font-size: 13px; } }

/* ---------- Predictions box ---------- */
.fp-home__grid { gap: 16px; }
.fp-home .fp-sidebar { margin-top: 0; }
.fp-picks__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;
}
.fp-picks__title {
    margin: 0;
    font-family: var(--fp-heading-font);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--fp-heading);
}
.fp-picks__date { margin: 4px 0 0; font-size: 12px; color: #000; }
.fp-picks__note { margin: 12px 0 0; font-size: 13px; color: var(--fp-meta); }

/* Day switch */
.fp-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    width: min(540px, 100%);
    background: var(--fp-blue-soft);
    border-radius: 999px;
}
.fp-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: var(--fp-ui-font);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.fp-seg__btn:hover { background: var(--fp-soft-hover); }
.fp-seg__btn.is-active { background: var(--fp-blue); color: #fff; font-weight: 700; }
.fp-seg__btn:focus-visible { outline: 2px solid var(--fp-blue); outline-offset: 2px; }
.fp-seg--wide { width: 100%; }
@media (max-width: 760px) {
    .fp-picks__head { flex-direction: column; align-items: stretch; }
    .fp-seg { width: 100%; }
    .fp-seg__btn--far { display: none; }
}

/* ---------- Match rows ---------- */
.fp-rows { display: grid; gap: 10px; margin-top: 10px; }
.fp-rows + .fp-rows { margin-top: 10px; }
.fp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #f3f3f3;
    border-radius: 16px;
    background: #fff;
}
.fp-row__main {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 28px;
    color: inherit;
}
a.fp-row__main:hover { text-decoration: none; color: inherit; }
a.fp-row__main:hover .fp-row__name { color: var(--fp-blue); }
.fp-row__league {
    display: block;
    padding: 6px 14px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    font-weight: 700;
    color: #303030;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-row__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    align-items: center;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}
.fp-row__team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fp-row__team--home { justify-content: flex-end; text-align: right; }
.fp-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-row__crest { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.fp-row__time { text-align: center; color: #757575; font-weight: 500; }
.fp-row__time--score { color: #000; font-weight: 700; }
.fp-row__note { display: block; padding: 0 0 8px; text-align: center; font-size: 12px; font-weight: 400; color: #757575; }

.fp-row__pill {
    display: flex;
    flex: 0 0 250px;
    align-self: stretch;
    min-height: 64px;
    overflow: hidden;
    border-left: 2px solid var(--fp-blue);
    border-right: 2px solid var(--fp-blue);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.fp-row__odds,
.fp-row__tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    text-align: center;
}
.fp-row__odds { flex: 0 0 90px; background: #fff; }
.fp-row__tip { flex: 1 1 auto; min-width: 0; background: var(--fp-tip-bg); }
.fp-row__pill small { font-size: 11px; line-height: 1; text-transform: uppercase; color: #000; }
.fp-row__odds b { margin-top: 5px; font-size: 14px; font-weight: 600; color: #000; }
.fp-row__tipval { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 14px; font-weight: 600; color: var(--fp-blue); }
.fp-row__tipval b,
.fp-row__tipval a { color: var(--fp-blue); font-weight: 600; overflow-wrap: anywhere; }
.fp-row__tipval a:hover { color: var(--fp-gold); }
.fp-row__tipval .fp-result svg { width: 18px; height: 18px; }
.fp-row--won .fp-row__tip { background: #e5f6ea; }
.fp-row--lost .fp-row__tip { background: #fbe7e5; }

@media (max-width: 760px) {
    .fp-row { flex-direction: column; align-items: stretch; }
    .fp-row__main { padding: 0 6px; }
    .fp-row__teams { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); font-size: 14px; }
    .fp-row__pill { flex-basis: auto; min-height: 56px; margin: 0 4px 4px; }
}

/* "More football predictions" */
.fp-more { text-align: center; margin: 6px 0 14px; }

/* ---------- Predictions archive date strip: light version ---------- */
.fp-date-nav {
    --fp-datenav-bg: var(--fp-blue-soft);
    --fp-datenav-text: #000;
    --fp-datenav-active-from: var(--fp-blue);
    --fp-datenav-active-to: var(--fp-blue);
    border-radius: 999px;
    padding: 4px;
}
.fp-date-nav .fp-date-nav__link {
    background: #fff;
    border-radius: 999px;
    font-family: var(--fp-ui-font);
    font-size: 13px;
    font-weight: 400;
    padding: 8px 14px;
    box-shadow: none;
}
.fp-date-nav .fp-date-nav__link.is-active { background: var(--fp-blue); color: #fff; font-weight: 700; box-shadow: none; }
.fp-date-nav .fp-date-nav__item { width: 100%; }
.fp-date-nav .fp-date-nav__item .fp-date-nav__link { width: 100%; text-align: center; }

/* ---------- Footer ---------- */
.fp-footer {
    background: var(--fp-footer);
    background-image: none;
    color: rgba(255, 255, 255, .85);
    border-radius: 40px 40px 0 0;
    margin-top: 30px;
}
.fp-footer a { color: rgba(255, 255, 255, .85); }
.fp-footer a:hover { color: var(--fp-gold); }
.fp-footer-inner { padding: 44px 20px 26px; }
.fp-footer-col__title { font-family: var(--fp-heading-font); }
.fp-footer-bottom { background: transparent; border-top-color: rgba(255, 255, 255, .12); }
.fp-footer .fp-social-icons a:hover { background: var(--fp-gold) !important; }
@media (max-width: 600px) { .fp-footer { border-radius: 20px 20px 0 0; } }

/* ---------- Misc re-tints ---------- */
.fp-section-title h2 { font-family: var(--fp-heading-font); color: var(--fp-heading); }
.fp-filters a { border-radius: 999px; font-family: var(--fp-ui-font); font-weight: 500; }
.fp-filters a.is-active, .fp-filters a:hover { background: var(--fp-blue); border-color: var(--fp-blue); }
.fp-pagination .current, .fp-load-more-btn { background: var(--fp-blue); border-color: var(--fp-blue); }
.fp-pagination a:hover { border-color: var(--fp-blue); color: var(--fp-blue); }
.fp-news-card__media .fp-news-card__cat { background: var(--fp-blue); }
.fp-news-card__title a:hover, .fp-popular__title a:hover { color: var(--fp-blue); }
.fp-popular__rank { color: var(--fp-gold); }
.fp-entry-cat { background: var(--fp-blue); }
.fp-read-also { border-left-color: var(--fp-blue); }
.fp-read-also__label, .fp-read-also__link:hover .fp-read-also__title { color: var(--fp-blue); }
.fp-share-links a:hover { background: var(--fp-blue); border-color: var(--fp-blue); }
.fp-entry-content { color: #333; }
.fp-pred-table__head, .fp-pred-daybar, .fp-prediction-card__meta, .fp-single-prediction .fp-match-hero { background: var(--fp-navy); background-image: none; }
.fp-empty { border-radius: 16px; color: var(--fp-meta); }

/* ==========================================================================
   Footer (v3.1): an inset rounded panel with centred menu rows, a
   highlighted link, a dark link box that folds, an 18+ notice, and
   copyright + social icons.
   ========================================================================== */
.fp-footer {
    background: transparent;
    border-radius: 0;
    margin: 30px 0 0;
    padding: 0 18px 18px;
    color: #fff;
}
.fp-footer > .fp-container { max-width: none; padding: 0; }
.fp-foot {
    background: var(--fp-footer);
    border-radius: 32px;
    padding: 44px 120px 28px;
    text-align: center;
}
.fp-foot a { color: #fff; }
.fp-foot a:hover { color: var(--fp-gold); text-decoration: none; }

/* Menu rows with dividers */
.fp-fmenu { margin: 0 0 18px; }
.fp-fmenu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
}
.fp-fmenu__list li { display: flex; align-items: center; }
.fp-fmenu__list li + li::before {
    content: "";
    width: 1px;
    height: 26px;
    margin: 0 18px;
    background: rgba(255, 255, 255, .45);
}
.fp-fmenu__list a { font-family: var(--fp-heading-font); font-size: 18px; font-weight: 500; }

.fp-foot__textlink { margin: 26px 0; font-size: 18px; font-family: var(--fp-heading-font); }
.fp-foot__textlink strong { font-weight: 500; margin-right: 4px; }
.fp-foot__textlink a { color: var(--fp-gold); text-decoration: underline; text-underline-offset: 3px; }
.fp-foot__textlink a:hover { color: var(--fp-accent-light); }

/* Dark link box */
.fp-foot__links {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 26px;
    padding: 18px 24px;
    background: rgba(0, 0, 0, .28);
    border-radius: 24px;
    text-align: left;
    font-size: 17px;
    line-height: 1.75;
    color: #cfe6e1;
}
.fp-foot__links-body { flex: 1 1 auto; min-width: 0; }
.fp-foot__links.is-folded .fp-foot__links-body {
    max-height: calc(1.75em * 2);
    overflow: hidden;
}
.fp-foot__links-title { color: #fff; margin-right: 6px; }
.fp-foot__links a { color: #cfe6e1; white-space: nowrap; }
.fp-foot__links a:hover { color: #fff; }
.fp-foot__links p { display: inline; margin: 0; }
.fp-foot__sep { margin: 0 6px; color: rgba(255, 255, 255, .7); }
.fp-foot__fold {
    flex: 0 0 auto;
    padding: 5px 14px;
    border: 0;
    border-radius: 999px;
    background: #cfe6e1;
    color: var(--fp-footer);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}
.fp-foot__fold:hover { background: #fff; }

/* 18+ notice */
.fp-foot__age {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 26px;
    font-size: 16px;
    color: #fff;
}
.fp-foot__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid #e5323b;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
}
.fp-foot__age a { text-decoration: underline; text-underline-offset: 3px; }

/* Bottom row */
.fp-foot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    text-align: left;
}
.fp-foot__copy { font-size: 18px; font-family: var(--fp-heading-font); }
.fp-foot__social { display: flex; gap: 12px; }
.fp-foot__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--fp-footer);
}
.fp-foot__social a:hover { background: var(--fp-gold); color: #fff; }

/* Back to top */
.fp-top {
    position: fixed;
    right: 14px;
    bottom: 80px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fp-blue) 88%, transparent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.fp-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.fp-top:hover { background: var(--fp-blue); color: #fff; text-decoration: none; }

@media (max-width: 1000px) {
    .fp-foot { padding: 36px 32px 24px; }
}
@media (max-width: 640px) {
    .fp-footer { padding: 0 8px 8px; }
    .fp-foot { padding: 28px 16px 20px; border-radius: 22px; }
    .fp-fmenu__list a { font-size: 15px; }
    .fp-fmenu__list li + li::before { margin: 0 10px; height: 18px; }
    .fp-foot__textlink { font-size: 15px; }
    .fp-foot__links { flex-direction: column; align-items: stretch; padding: 14px 16px; font-size: 14px; border-radius: 18px; }
    .fp-foot__fold { align-self: center; }
    .fp-foot__age { font-size: 14px; text-align: left; align-items: flex-start; }
    .fp-foot__badge { width: 38px; height: 38px; font-size: 13px; }
    .fp-foot__bottom { flex-direction: column-reverse; align-items: center; text-align: center; }
    .fp-foot__copy { font-size: 15px; }
    .fp-top { bottom: 20px; right: 10px; padding: 8px 11px 6px; font-size: 13px; }
}

/* Page buttons at the top of inner pages */
#fp-main-content > .fp-pills { margin: 6px 0 10px; }

/* No sidebar: content fills the column (empty sidebar, or a predictions page). */
.fp-no-sidebar .fp-site-content { grid-template-columns: minmax(0, 1fr); }
.fp-no-sidebar .fp-site-content > .fp-sidebar { display: none; }

/* Prediction pages: no titles, so tighten the top of the box. */
.fp-picks__titles:not(:has(.fp-picks__title)) .fp-picks__date { margin-top: 0; font-size: 13px; font-weight: 600; }

/* Prediction pages: the box sits straight on the grey column, full width. */
.fp-list-page { padding: 6px 0 10px; }
.fp-list-page .fp-picks__title { font-size: 30px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.fp-list-page__content { padding: 22px 26px; }
.fp-list-page .fp-share-links { border-radius: 20px; background: #fff; }
@media (max-width: 600px) { .fp-list-page .fp-picks__title { font-size: 24px; } }

/* Palette details */
.fp-text-logo__a { color: #fff; }
.fp-text-logo__b { color: var(--fp-gold); }
.fp-hero__title { color: var(--fp-blue); }
.fp-btn--alt { background: linear-gradient(90deg, var(--fp-blue) 0%, var(--fp-gold) 100%); }
.fp-row__pill { border-left-color: var(--fp-blue); border-right-color: var(--fp-blue); }
.fp-picks__title { letter-spacing: 0; }
.fp-top:hover { background: var(--fp-gold); }

/* [mrseed_home] on a page: drop the page's own white card so the boxes sit
   straight on the centre column, like the built-in homepage. */
.fp-home-shortcode .fp-site-content > .fp-main { background: transparent; padding: 0; border-radius: 0; }
.fp-home-shortcode .fp-site-content > .fp-main > .fp-breadcrumbs { display: none; }
.fp-home-shortcode .fp-share-links { background: #fff; border-radius: 20px; }
.fp-home-sc { padding-top: 0; }
.fp-entry-content .fp-home-sc { font-size: var(--fp-font-size-base); line-height: var(--fp-line-height-base); color: var(--fp-text); }

/* ==========================================================================
   [sports_news] box
   ========================================================================== */
.fp-newsbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f2f2;
}
.fp-newsbox__title { margin: 0; font-family: var(--fp-heading-font); font-size: 24px; font-weight: 600; color: var(--fp-heading); }
.fp-newsbox__more { font-family: var(--fp-ui-font); font-weight: 600; font-size: 14px; color: var(--fp-blue); white-space: nowrap; }
.fp-newsbox__more:hover { color: var(--fp-gold); }

.fp-newsbox__grid {
    display: grid;
    grid-template-columns: repeat(var(--fp-news-cols, 3), minmax(0, 1fr));
    gap: 18px;
}
.fp-newscard { display: flex; flex-direction: column; min-width: 0; }
.fp-newscard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--fp-panel); }
.fp-newscard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.fp-newscard:hover .fp-newscard__media img { transform: scale(1.04); }
.fp-newscard__body { padding: 10px 2px 0; }
.fp-newscard__cat {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fp-blue-soft);
    color: var(--fp-blue);
    font-family: var(--fp-ui-font);
    font-size: 12px;
    font-weight: 600;
}
.fp-newscard__cat:hover { background: var(--fp-blue); color: #fff; }
.fp-newscard__title { margin: 0 0 6px; font-family: var(--fp-heading-font); font-size: 17px; font-weight: 600; line-height: 1.35; }
.fp-newscard__title a { color: var(--fp-heading); }
.fp-newscard__title a:hover { color: var(--fp-blue); }
.fp-newscard__excerpt { margin: 0 0 6px; font-size: 14px; color: var(--fp-meta); line-height: 1.55; }
.fp-newscard__date { font-size: 12px; color: var(--fp-meta); }

/* Compact list */
.fp-newsbox--list .fp-newsbox__grid { gap: 12px 22px; }
.fp-newsbox--list .fp-newscard { flex-direction: row; align-items: center; gap: 12px; }
.fp-newsbox--list .fp-newscard__media { flex: 0 0 96px; width: 96px; aspect-ratio: 1; border-radius: 12px; }
.fp-newsbox--list .fp-newscard__body { padding: 0; }
.fp-newsbox--list .fp-newscard__title { font-size: 15px; }

@media (max-width: 900px) {
    .fp-newsbox__grid { grid-template-columns: repeat(min(var(--fp-news-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .fp-newsbox__grid { grid-template-columns: 1fr; }
    .fp-newsbox__title { font-size: 20px; }
}
/* Inside a page's white content card, the news box drops its own card look. */
.fp-entry-content .fp-newsbox { padding: 0; border: 0; background: transparent; margin: 10px 0 24px; }
.fp-home-shortcode .fp-entry-content .fp-newsbox,
.fp-elementor-article .fp-newsbox { padding: 20px; border: 1px solid #d9d9d9; background: #fff; }

/* Pages using [sports_news]: full width, and the news box sits straight on
   the page (no white page card around it). */
.fp-news-page .fp-site-content > .fp-main { background: transparent; padding: 0; border-radius: 0; }
.fp-news-page .fp-site-content > .fp-main > .fp-breadcrumbs { display: none; }
.fp-news-page .fp-site-content > .fp-main > article > h1 { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } /* kept for search engines */
.fp-news-page .fp-entry-content .fp-newsbox { padding: 20px; border: 1px solid #d9d9d9; background: #fff; margin: 0 0 16px; }
.fp-news-page .fp-share-links { background: #fff; border-radius: 20px; }
.fp-newscard__media img { height: 100%; max-width: none; }
.fp-entry-content .fp-newscard__title { font-size: 17px; margin: 0 0 6px; }
.fp-entry-content .fp-newscard__title a { color: var(--fp-heading); text-decoration: none; }
.fp-entry-content .fp-newscard__cat { text-decoration: none; }

/* Category pages and news cards in post listings */
.fp-cat-page > .fp-main { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.fp-cat-page .fp-breadcrumbs { margin: 0 0 6px; font-size: 12px; }
.fp-cat-page .fp-newsbox__title { font-size: 28px; }
.fp-cat-page__desc { margin: -4px 0 16px; color: var(--fp-meta); font-size: 15px; }
.fp-cat-page__desc p { margin: 0 0 8px; }
.fp-news-grid { display: grid; grid-template-columns: repeat(var(--fp-news-cols, 3), minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.fp-news-card.fp-newscard { background: none; border: 0; box-shadow: none; }
.fp-cat-page .fp-pagination, .fp-cat-page .fp-load-more-wrap { margin-top: 10px; }
@media (max-width: 900px) { .fp-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fp-news-grid { grid-template-columns: 1fr; } .fp-cat-page .fp-newsbox__title { font-size: 22px; } }

/* ==========================================================================
   Pagination: one centred row of rounded buttons
   (numbered pages, and WordPress's own posts navigation)
   ========================================================================== */
.fp-pages,
.fp-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.fp-pages { margin: 24px 0 6px; }
.fp-pages .page-numbers,
.fp-pagination .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #dfe6e4;
    border-radius: 999px;
    background: #fff;
    color: var(--fp-heading);
    font-family: var(--fp-ui-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    gap: 6px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fp-pages a.page-numbers:hover,
.fp-pagination .nav-links a.page-numbers:hover { border-color: var(--fp-blue); color: var(--fp-blue); background: var(--fp-blue-soft); }
.fp-pages .page-numbers.current,
.fp-pagination .nav-links .page-numbers.current { background: var(--fp-blue); border-color: var(--fp-blue); color: #fff; }
.fp-pages .page-numbers.dots,
.fp-pagination .nav-links .page-numbers.dots { border-color: transparent; background: transparent; min-width: 24px; padding: 0 4px; }
.fp-pages .prev,
.fp-pages .next,
.fp-pagination .nav-links .prev,
.fp-pagination .nav-links .next { padding: 0 18px; }
/* The old wrapper rules gave each button its own box; neutralise them here. */
.fp-pages > a, .fp-pages > span { margin: 0; }
@media (max-width: 560px) {
    .fp-pages { gap: 6px; }
    .fp-pages .page-numbers,
    .fp-pagination .nav-links .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; }
    .fp-pages .prev, .fp-pages .next { padding: 0 12px; }
}
.fp-pages .page-numbers span,
.fp-pagination .nav-links .page-numbers span { padding: 0; border: 0; background: none; font-size: inherit; }