/* assets/css/style.css */
:root {
    --primary-dark-blue: #0A2463;
    --secondary-dark-blue: #123458; /* Slightly lighter than primary for cards/nav */
    --accent-gold: #D4AF37;
    --text-light-main: #EAEAEA;
    --text-light-secondary: #B0B0B0;
    --card-bg: #1A3A6A; /* Card background */
    --border-color: #2A5A9A;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--primary-dark-blue);
    color: var(--text-light-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.bg-dark-blue { background-color: var(--primary-dark-blue) !important; }
.bg-secondary-blue { background-color: var(--secondary-dark-blue) !important; }
.text-light-main { color: var(--text-light-main) !important; }
.text-gold { color: var(--accent-gold) !important; }

.navbar {
    border-bottom: 2px solid var(--accent-gold);
}

.navbar-brand, .nav-link {
    color: var(--text-light-main) !important;
    font-family: 'Montserrat', sans-serif;
}
.nav-link:hover, .nav-link.active {
    color: var(--accent-gold) !important;
}

/* assets/css/style.css */
/* ... existing styles ... */

footer.bg-secondary-blue { /* Ensure footer has consistent background if not already set */
    background-color: var(--secondary-dark-blue) !important;
}

footer .text-gold { /* Ensure text-gold uses your theme's gold */
    color: var(--accent-gold) !important;
}

.social-icons {
    margin-top: 5px;
}

.social-icon-link {
    color: var(--text-light-secondary); /* Initial color of the icon */
    transition: color 0.3s ease, transform 0.2s ease-in-out;
    display: inline-block; /* Allows transform */
}

.social-icon-link:hover {
    color: var(--accent-gold); /* Color on hover - your theme's gold */
    transform: scale(1.15); /* Slightly enlarge icon on hover */
}

.social-icon-link i {
    vertical-align: middle;
}

/* Responsive adjustments for footer content */
@media (max-width: 767.98px) { /* Bootstrap's md breakpoint */
    footer .text-md-start {
        text-align: center !important;
    }
    footer .text-md-end {
        text-align: center !important;
    }
    .social-icons {
        margin-top: 15px; /* More space on mobile if stacked */
    }
}


footer.bg-secondary-blue { /* Target your main footer element */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.shadow-top { /* Optional: add a subtle shadow above the footer */
    box-shadow: 0 -4px 10px -5px rgba(0,0,0,0.2);
}

.footer-links {
    padding-left: 0;
}

.footer-links .list-inline-item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem; /* For stacking on small screens */
}

.footer-link {
    color: var(--text-light-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease-in-out;
}

.footer-link:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}

footer p.small {
    color: var(--text-light-secondary);
    opacity: 0.8;
    line-height: 1.5;
}

/* Specifically for the content cards on these informational pages */
.card.bg-secondary-blue .card-body p,
.card.bg-secondary-blue .card-body ul li,
.card.bg-secondary-blue .card-body ol li {
    color: var(--text-light-main); /* Explicitly set if inheritance isn't enough */
}

/* Links within these cards should also be light, unless specifically styled otherwise */
.card.bg-secondary-blue .card-body a {
    color: var(--accent-gold); /* Or another light, contrasting link color */
}
.card.bg-secondary-blue .card-body a:hover {
    color: #edd06a; /* Lighter gold on hover */
}

/* Ensure headings within these cards also use a light color if not gold */
.card.bg-secondary-blue .card-body h1:not(.text-gold),
.card.bg-secondary-blue .card-body h2:not(.text-gold),
.card.bg-secondary-blue .card-body h3:not(.text-gold),
.card.bg-secondary-blue .card-body h4:not(.text-gold):not(.text-light-main), /* text-light-main is okay for some sub-headings */
.card.bg-secondary-blue .card-body h5:not(.text-gold),
.card.bg-secondary-blue .card-body h6:not(.text-gold) {
    color: var(--text-light-main);
}

.league-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.league-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.league-card .card-title {
    color: var(--accent-gold);
    font-family: 'Montserrat', sans-serif;
}
.league-card .card-text {
    color: var(--text-light-secondary);
}
.league-card img.league-logo {
    max-height: 80px;
    width: auto;
    margin-bottom: 15px;
}

.section-title {
    color: var(--accent-gold);
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.table-dark-theme {
    background-color: var(--card-bg);
    color: var(--text-light-main);
    border: 1px solid var(--border-color);
}
.table-dark-theme th {
    background-color: var(--secondary-dark-blue);
    color: var(--accent-gold);
    border-bottom: 2px solid var(--border-color) !important;
}
.table-dark-theme td, .table-dark-theme th {
    border-color: var(--border-color) !important;
}
.table-dark-theme tbody tr:hover {
    background-color: #204880; /* Slightly lighter for hover */
}
.table-dark-theme .team-logo {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.fixture-card, .result-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    padding: 15px;
}
.fixture-card .team-name, .result-card .team-name {
    font-weight: 500;
    color: var(--text-light-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}
.fixture-card .match-time, .result-card .match-time {
    font-size: 0.9em;
    color: var(--text-light-secondary);
}
.fixture-card .match-venue, .result-card .match-venue {
    font-size: 0.8em;
    color: var(--text-light-secondary);
}
.fixture-card .score, .result-card .score {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--accent-gold);
}


.nav-tabs .nav-link {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-light-secondary);
}
.nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    color: var(--accent-gold);
    border-bottom-color: var(--card-bg); /* Make it look like it's part of the content area */
}
.tab-content {
    background-color: var(--card-bg);
    padding: 20px;
    border: 1px solid var(--border-color);
    border-top: none; /* Avoid double border with active tab */
}

/* Small utility classes */
.status-ft { /* Full Time */
    color: #a0a0a0; /* Greyish */
}
.status-ns { /* Not Started */
    color: var(--text-light-secondary); /* Bootstrap secondary / grey */
}
.status-live { /* Live match - TBC if API provides this and you can use it */
    color: #28a745; /* Green */
    font-weight: bold;
}
.status-pst { /* Postponed */
    color: #ffc107; /* Yellow/Orange */
}
.status-canc { /* Cancelled */
    color: #dc3545; /* Red */
}

.last-updated-notice {
    font-size: 0.85em;
    color: var(--text-light-secondary);
    text-align: right;
    margin-bottom: 15px;
}

/* New styles for background-colored rank indicators */
.standings-table td span[class^="rank-"] { /* Common styling for all rank status spans */
    padding: 0.25em 0.5em; /* Padding around the number (adjust as needed) */
    border-radius: 0.25rem; /* Rounded corners, like Bootstrap badges */
    font-weight: bold;      /* Ensures the number itself is bold */
    line-height: 1;         /* Helps with consistent vertical alignment if needed */
    display: inline-block;  /* Ensures padding is applied correctly */
    text-align: center;
    min-width: 1.8em; /* Ensures even single-digit numbers have a decent badge width */
}

.standings-table td span.rank-cl { /* Champions League */
    background-color: #0D6EFD;  /* Bootstrap Primary Blue */
    color: #FFFFFF !important;   /* White text */
}

.standings-table td span.rank-cl-qual  { 
    background-color: #4A90E2; 
    color: #FFFFFF !important;
} /* CL Qualifiers (Lighter Blue) */

.standings-table td span.rank-el { /* Europa League */
    background-color: #FFC107;  /* Bootstrap Warning Yellow */
    color: #000000 !important;   /* Black text for yellow background (better contrast) */
}

.standings-table td span.rank-ecl { /* Europa Conference League */
    background-color: #198754;  /* Bootstrap Success Green */
    color: #FFFFFF !important;   /* White text */
}

.standings-table td span.rank-ecl-qual  {
     background-color: #20C997; 
     color: #000000 !important;
     } /* ECL Qualifiers (Teal) */

.standings-table td span.rank-rel { /* Relegation */
    background-color: #DC3545;  /* Bootstrap Danger Red */
    color: #FFFFFF !important;   /* White text */
}

.standings-table td span.rank-prom { /* Promotion */
    background-color: #0DCAF0;  /* Bootstrap Info Teal/Cyan (good for promotion) */
    color: #000000 !important;   /* Black text for lighter teal/cyan */
}

/* AFC (Asian) Competitions */
.standings-table td span.rank-afc-cle { background-color: #0033A0; }
.standings-table td span.rank-afc-cl2 { background-color: #4A90E2; }
/* .standings-table td span.rank-afc-acl { background-color: #FF8C00; } */ /* Example */

/* CAF (African) Competitions */
.standings-table td span.rank-caf-cl { background-color: #004080; }
.standings-table td span.rank-caf-cc { background-color: #4682B4; }

/* Copa América Competitions */
.standings-table td span.rank-qualify { background-color: #198754; }

/* Promotion / Relegation / Playoffs */
.standings-table td span.rank-prom-auto { background-color: #006400; }
.standings-table td span.rank-prom-po  { background-color: #20C997; /* Text color by inline style if needed */ }
.standings-table td span.rank-rel { background-color: #DC3545; }
.standings-table td span.rank-rel-po    { 
    background-color: #FD7E14; 
    color: #FFFFFF !important;
} /* Orange for Relegation Playoff */

/* MLS Specific */
.standings-table td span.rank-mls-shield { background-color: #DAA520; /* Text color by inline style if needed */ }
.standings-table td span.rank-mls-po    { background-color: #6f42c1; }



/* Default appearance for the rank number if no specific status class is applied */
/* This ensures the fw-bold from HTML is still styled if no status applies */
.standings-table td span:not([class*="rank-"]) {
    color: var(--text-light-main); /* Or your default table text color */
    font-weight: bold;
}

/* assets/css/style.css */

/* ... your existing styles ... */

.table-legend {
    padding: 15px;
    /* Use a slightly different background or border to distinguish from main content if desired */
    /* background-color: var(--secondary-dark-blue); */ /* Example */
    border-top: 1px solid var(--border-color); /* Or a full border */
    /* border-radius: 0.25rem; */ /* Optional */
}

.legend-title {
    font-size: 1.0rem; /* Adjusted size */
    color: var(--text-light-secondary); /* Subtler color for the title */
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.legend-item {
    display: flex;       /* For aligning the circle and text */
    align-items: center; /* Vertically center-align items */
    margin-bottom: 6px;  /* Space between legend items */
    font-size: 0.85em;   /* Slightly smaller font for legend text */
    color: var(--text-light-secondary);
}

.legend-indicator {
    display: inline-block;
    width: 12px;         /* Size of the color circle */
    height: 12px;        /* Size of the color circle */
    border-radius: 50%;  /* Makes it a perfect circle */
    margin-right: 10px;   /* Space between the circle and the text */
    flex-shrink: 0;      /* Prevent indicator from shrinking if text is long */
}

/* Apply the background colors to the legend indicators.
   These should match the background colors used for the rank number spans. */

.legend-indicator.rank-cl { /* Champions League */
    background-color: #0D6EFD;  /* Bootstrap Primary Blue */
}

.legend-indicator.rank-el { /* Europa League */
    background-color: #FFC107;  /* Bootstrap Warning Yellow */
}

.legend-indicator.rank-ecl { /* Europa Conference League */
    background-color: #198754;  /* Bootstrap Success Green */
}

.legend-indicator.rank-rel { /* Relegation */
    background-color: #DC3545;  /* Bootstrap Danger Red */
}

.legend-indicator.rank-prom { /* Promotion (if you add this to the legend HTML) */
    background-color: #0DCAF0;  /* Bootstrap Info Teal/Cyan */
}

/* assets/css/style.css */

/* ... your existing styles ... */

/* Homepage League Cards Improvements */
.league-fixture-card {
    background-color: var(--secondary-dark-blue);
    border: 1px solid var(--border-color);
    color: var(--text-light-main);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease; /* Smoother hover */
}
.league-fixture-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); /* Enhanced hover shadow */
}

.league-fixture-card .card-header {
    background-color: rgba(0,0,0,0.25); /* Slightly darker header */
    border-bottom: 1px solid var(--accent-gold);
    padding: 0.85rem 1.15rem;
}

.league-fixture-card .card-header h5.card-title {
    color: var(--text-light-main);
    font-weight: 500; /* Or 600 for bolder */
    font-size: 1.1rem;
    margin-bottom: 0; /* Remove default margin */
}

.league-fixture-card .card-header img.league-logo { /* For league logo in card header */
    height: 28px !important; /* Adjusted size */
    width: auto;
    margin-right: 12px;
}

.league-fixture-card .card-body {
    padding: 0.85rem;
    flex-grow: 1; /* Allow body to take available space */
}

h6.fixtures-section-title { /* "Today's Fixtures", "Upcoming Fixtures" */
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--accent-gold);
    margin-top: 0.25rem; /* Reduced top margin */
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

/* New Styles for Fixture Summary Items on Homepage V2 */
.fixture-summary-item-v2 {
    background-color: rgba(0,0,0,0.15);
    padding: 0.6rem 0.75rem; /* Adjusted padding */
    border-radius: 4px; /* Softer corners */
    border: 1px solid var(--border-color); /* Consistent border */
    margin-bottom: 0.6rem !important;
}

.team-logo-summary-v2 {
    width: 22px;  /* Slightly smaller team logos */
    height: 22px;
    object-fit: contain;
    background-color: rgba(255,255,255,0.05); /* Faint bg for missing transparent logos */
    border-radius: 3px; /* Slight rounding if desired */
}

.team-name-v2 {
    font-size: 0.88rem; /* Slightly larger team names */
    font-weight: 500;
    color: var(--text-light-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow team name to take space */
    /* Max-width can be tricky in flex, ensure parent col has width */
}

.score-time-separator-v2 {
    font-size: 0.9rem; /* Size for time or VS */
    font-weight: bold;
}
.score-time-separator-v2 .fixture-score { /* Actual score numbers */
    color: var(--accent-gold);
    letter-spacing: 1px;
}
.score-time-separator-v2 .fixture-time { /* Kick-off time */
    color: var(--text-light-secondary);
}


.fixture-status-line {
    font-size: 0.75em; /* Smaller text for status */
    line-height: 1.2;
}
.fixture-status-line .status-FT,
.fixture-status-line .status-HT {
    color: var(--text-light-secondary);
    font-style: italic;
}
.fixture-status-line .status-LIVE { /* You'd need to add status-LIVE class based on API status */
    color: #dc3545; /* Example: Bootstrap danger red for live */
    font-weight: bold;
}
/* Add more .status-XX classes as needed based on your API's short status codes */


.league-fixture-card .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 0.85rem 1.15rem;
}

.league-fixture-card .btn-outline-light {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.league-fixture-card .btn-outline-light:hover {
    background-color: var(--accent-gold);
    color: var(--primary-dark-blue); /* Text color on hover */
}

/* Back to Top Button Styles */
#backToTopBtn {
    display: none; /* Hidden by default, shown by JavaScript */
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1030; /* Ensure it's above most content, but below modals if any */
    border: none;
    outline: none;
    background-color: var(--accent-gold);
    color: var(--primary-dark-blue); /* Icon color */
    cursor: pointer;
    padding: 0.5rem 0.7rem; /* Adjust padding to make it look good */
    border-radius: 50%; /* Circular shape */
    font-size: 1.75rem; /* Icon size */
    line-height: 1; /* For better icon centering */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease, opacity 0.5s ease, visibility 0.5s ease;
    opacity: 0; /* Start fully transparent for fade-in */
    visibility: hidden; /* Start hidden for fade-in */
}

#backToTopBtn:hover {
    background-color: #c5a02f; /* A slightly darker gold for hover */
}

/* assets/css/style.css */
/* ... existing styles ... */

.about-league-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-light-secondary);
}

.about-league-content p {
    margin-bottom: 1rem;
}

.about-league-content .h5.text-gold { /* For "Focus Keywords & Topics:" title */
    color: var(--accent-gold) !important;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.about-league-content .badge.bg-dark {
    background-color: #343a40 !important; /* Bootstrap dark or your darker secondary blue */
    font-weight: normal;
    padding: 0.4em 0.7em;
}

.navbar-brand img.site-logo { /* Add class="site-logo" to your img tag */
    height: auto; /* Or your preferred height */
    width: 120px;
    margin-right: 10px; /* If you have text next to it */
    vertical-align: middle; /* Helps align with text if any */
}

/* assets/css/style.css */
/* ... existing styles ... */

/* --- Enhanced Styles for Analysis Page (analysis.php) --- */

/* Main Page Title Area */
.analysis-page-header h1.display-5 { /* Targeting the main "Premier League: Today's Match Analysis" title */
    font-size: 2.25rem; /* Slightly adjust size for different viewports if needed */
    margin-bottom: 0.5rem !important;
}
.analysis-page-header .lead {
    font-size: 1.1rem;
    margin-bottom: 2.5rem !important;
}

/* Individual Match Analysis Card */
.match-analysis-card {
    background-color: var(--secondary-dark-blue); /* Slightly different from var(--card-bg) for distinction if desired */
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent-gold); /* Stronger top accent */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); /* Softer, deeper shadow */
    border-radius: 0.375rem; /* Bootstrap's default is 0.25rem, slightly more rounded */
}

.match-analysis-card .card-body {
    padding: 1.5rem; /* More generous padding */
}

/* Match Header within the Card */
.match-header-analysis {
    background-color: rgba(0,0,0,0.15); /* Subtle darker bg for the header section */
    border-radius: 0.25rem;
    margin-bottom: 1.5rem !important; /* More space below header */
}
.match-header-analysis h3.text-gold { /* Team names */
    font-size: 1.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.match-header-analysis .vs-text {
    color: var(--text-light-secondary);
    font-weight: 400;
    font-size: 1.2rem; /* Make 'vs' a bit more subtle */
    margin: 0 0.75rem;
}
.match-header-analysis .team-logo-analysis {
    height: 45px; /* Slightly adjusted */
    width: 45px;
    object-fit: contain;
}
.match-header-analysis .fixture-time-analysis {
    font-weight: bold;
    color: var(--accent-gold);
    font-size: 1.5rem; /* Prominent time */
}
.match-header-analysis p.small { /* Date and Venue line */
    font-size: 0.85rem;
}

/* Analysis Tabs Navigation */
.analysis-tabs {
    margin-bottom: 0 !important; /* Remove bottom margin if tab-content provides separation */
    border-bottom: 2px solid var(--border-color); /* Solid line below tabs */
}
.analysis-tabs .nav-item {
    margin-bottom: -2px; /* To make active tab border merge with content border */
}
.analysis-tabs .nav-link {
    color: var(--text-light-secondary);
    border: 2px solid transparent;
    border-bottom: 2px solid transparent; /* For consistent height */
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.analysis-tabs .nav-link:hover {
    color: var(--accent-gold);
    border-bottom-color: var(--accent-gold);
}
.analysis-tabs .nav-link.active {
    color: var(--accent-gold);
    background-color: var(--card-bg); /* Match the tab content bg or slightly different */
    border-color: var(--border-color) var(--border-color) var(--accent-gold); /* Top and side borders match, bottom is gold */
    font-weight: bold;
}

/* Analysis Tab Content Area */
.analysis-tab-content {
    background-color: var(--card-bg); /* Match the active tab bg for seamless look */
    border: 1px solid var(--border-color);
    border-top: none; /* Remove top border as tabs provide separation */
    border-radius: 0 0 0.375rem 0.375rem; /* Match card rounding */
}
.analysis-tab-content .tab-pane {
    padding: 1.5rem; /* Consistent padding within tabs */
    color: var(--text-light-main);
}
.analysis-tab-content h5.text-gold, /* Sub-section titles within tabs */
.analysis-tab-content h6.text-gold {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.analysis-tab-content p {
    font-size: 0.9rem; /* Slightly smaller default paragraph text within tabs */
    line-height: 1.65;
    margin-bottom: 0.85rem;
}
.analysis-tab-content strong {
    color: var(--text-light-main); /* Ensure strong text is bright */
    font-weight: 600;
}

/* Stat Boxes (e.g., for probabilities) */
.stat-box {
    background-color: rgba(0,0,0,0.15); /* Darker, subtle box */
    border: 1px solid var(--border-color);
    padding: 0.75rem !important; /* Ensure consistent padding */
    text-align: center;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem; /* Space below stat boxes if they stack */
}
.stat-box .fs-4 { /* Probability percentage */
    font-size: 1.75rem !important; /* Make percentage stand out */
    line-height: 1.2;
}
.stat-box div:last-child { /* Team name or "Draw" text */
    font-size: 0.8rem;
    color: var(--text-light-secondary);
}

/* H2H List Styling */
.h2h-list-analysis li {
    padding: 0.5rem 0.75rem;
    background-color: rgba(10, 36, 99, 0.2); /* Very subtle bg for each H2H item */
    border-bottom: 1px solid var(--border-color);
    border-radius: 3px;
    margin-bottom: 0.25rem;
}
.h2h-list-analysis li:last-child {
    border-bottom: none;
}
.h2h-list-analysis li small.text-muted { /* Date of H2H match */
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 90px; /* Align scores a bit */
    color: var(--text-light-secondary);
}

/* Team League Performance Summary (from display_team_league_stats helper) */
.team-league-performance p {
    font-size: 0.9rem;
    border-bottom: 1px dotted var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.team-league-performance p:last-child {
    border-bottom: none;
}
.team-league-performance strong {
    min-width: 120px; /* Align the values a bit if using "Key: Value" format */
    display: inline-block;
}

/* Form Badges (W, D, L) - Ensure these are clear */
.badge.bg-success { background-color: #198754 !important; color: white !important; }
.badge.bg-danger  { background-color: #dc3545 !important; color: white !important; }
.badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
.badge.bg-secondary { background-color: #495057 !important; color: white !important; } /* Darker grey for unknown form chars */

/* assets/css/style.css */
/* ... */
.border-gold-glow {
    border: 1px solid var(--accent-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); /* Gold glow */
}

.btn-warning.text-dark { /* Ensure good contrast for this button */
    background-color: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: var(--primary-dark-blue) !important;
}
.btn-warning.text-dark:hover {
    background-color: #c5a02f !important; /* Darker gold */
    border-color: #c5a02f !important;
}

.pulse-anim { /* Optional: simple animation for the button */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
}

/* General appearance of the dropdown menu */
.navbar .dropdown-menu.dropdown-menu-dark {
    background-color: var(--secondary-dark-blue); /* Use your theme's secondary dark blue */
    border: 1px solid var(--border-color);     /* Consistent border with other elements */
    border-top: 2px solid var(--accent-gold);    /* Accent gold top border, matching main navbar bottom border */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); /* Softer, themed shadow */
    margin-top: 0.35rem; /* Adds a little space between navbar and dropdown */
    padding-top: 0.25rem;    /* Inner padding */
    padding-bottom: 0.25rem; /* Inner padding */
    min-width: 220px; /* Ensure a decent minimum width */
}

/* Styling for individual dropdown items */
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-item {
    color: var(--text-light-secondary); /* Use your theme's lighter text color */
    padding: 0.6rem 1.2rem;       /* Adjust padding for better spacing */
    font-family: 'Roboto', sans-serif; /* Ensure consistent font */
    font-weight: 400;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 3px; /* Slight rounding for items on hover/active */
    margin: 0.1rem 0.25rem; /* Small margin around items for spacing */
    white-space: nowrap; /* Prevent text wrapping for league names if too long - consider if needed */
}

/* Hover and Focus states for dropdown items */
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-item:hover,
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-item:focus {
    background-color: var(--primary-dark-blue); /* Your theme's primary dark blue */
    color: var(--accent-gold);             /* Accent color for text on hover/focus */
}

/* Active state for the currently selected league in the dropdown */
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-item.active,
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-item:active {
    background-color: var(--accent-gold);      /* Accent gold for active item background */
    color: var(--primary-dark-blue) !important; /* Dark text for contrast on gold */
    font-weight: 500;
}

/* Optional: Styling for dropdown dividers if you ever use them */
.navbar .dropdown-menu.dropdown-menu-dark .dropdown-divider {
    border-top-color: var(--border-color); /* Match your theme's border color */
    opacity: 0.5;
}

/* --- Responsiveness for the Dropdown Menu --- */

/* For when the navbar is collapsed (typically on screens smaller than 'lg' - 992px) */
@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-menu.dropdown-menu-dark {
        /* In collapsed view, dropdown often looks better as part of the main flow */
        margin-top: 0.1rem;
        border-top: 1px solid var(--border-color); /* Match other borders in collapsed nav */
        box-shadow: none; /* Remove floating shadow when part of collapsed list */
        max-height: calc(100vh - 150px); /* Example: Max height relative to viewport, minus navbar height etc. */
        overflow-y: auto; /* Enable vertical scrolling if list is too long */
    }
    .navbar-collapse .dropdown-menu.dropdown-menu-dark .dropdown-item {
         padding: 0.75rem 1.2rem; /* Slightly larger padding for easier tapping */
    }
}

/* For larger screens, if the dropdown list is still very long */
/* This applies when the navbar is expanded */
.navbar-expand-lg .navbar-nav .dropdown-menu-end.dropdown-menu-dark { /* Targeting expanded navbar's dropdown */
    max-height: 75vh; /* Max 75% of viewport height, adjust as needed */
    /* You could also use a fixed pixel value like max-height: 450px; */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* assets/css/style.css (Main PHP Site) */
/* ... existing styles ... */

.latest-blog-posts {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.bg-dark-blue-light { /* Define if not already defined */
    background-color: #081E42; /* Example: Slightly lighter than primary dark blue */
}

.blog-post-card {
    background-color: var(--secondary-dark-blue);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.blog-post-card .card-text {
    color: var(--text-light-secondary);
}

.blog-post-image {
    height: 200px; /* Adjust as needed */
    object-fit: cover; /* Cover the area, might crop */
}

.blog-post-card .card-body {
    /* Using d-flex flex-column on card-body already */
}

.blog-post-card .card-title a {
    text-decoration: none;
}
.hover-gold-light:hover {
    color: #edd06a !important; /* Lighter gold for hover */
}

.btn-outline-gold {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.btn-outline-gold:hover {
    color: var(--primary-dark-blue);
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
}

/* Styles for the "Visit Full Blog" button */
.btn-gold {
    background-color: var(--accent-gold, #D4AF37); /* Default gold if variable not set */
    border-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463); /* Crucial: Dark text for contrast */
    /* Other styles like padding, font-weight are often inherited from .btn and .btn-lg */
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: #c8a237; /* Slightly darker gold on hover */
    border-color: #b89230;
    color: var(--primary-dark-blue, #0A2463); /* Keep text dark */
}


/* Specific customizations for the "Visit Full Blog" button */
.btn-visit-blog {
    /* It already has .btn .btn-lg .fw-bold .btn-gold from HTML */

    /* Ensure text color contrasts with gold background if .btn-gold doesn't set it,
       or if you need to override. For a gold background, dark text is best. */
    color: var(--primary-dark-blue, #0A2463) !important; /* Ensures dark text, adjust color if needed */

    padding-left: 1.8rem;  /* Increased padding for a more substantial feel */
    padding-right: 1.8rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    
    border-width: 2px; /* Slightly more defined border */
    border-radius: 50px; /* Pill shape for a modern look */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Slight spacing for readability */
    font-size: 1rem; /* Override .btn-lg if it's too big, or adjust as needed */
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Softer, more modern shadow */
    transition: all 0.25s ease-in-out; /* Smooth transitions for all properties */
}

.btn-visit-blog:hover,
.btn-visit-blog:focus {
    /* .btn-gold:hover already handles bg and border color change */
    transform: translateY(-3px) scale(1.03); /* Lift and slightly enlarge */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    /* Text color should remain dark as set by .btn-gold:hover */
}

.btn-visit-blog:active {
    transform: translateY(-1px) scale(1.01); /* Subtle press effect */
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Icon styling within the button */
.btn-visit-blog .bi {
    margin-left: 0.6em;  /* Space between text and icon */
    font-size: 0.9em;    /* Relative to button's font size */
    vertical-align: -0.1em; /* Fine-tune vertical alignment */
    transition: transform 0.2s ease-in-out;
}

.btn-visit-blog:hover .bi,
.btn-visit-blog:focus .bi {
    transform: translateX(3px); /* Icon moves slightly on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
    .btn-visit-blog {
        /* .btn-lg might be too large, adjust padding and font for smaller screens */
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem; 
    }
    .btn-visit-blog .bi {
        font-size: 0.85em;
        margin-left: 0.4em;
    }
}

.responsive-share-module {
    background-color: var(--secondary-dark-blue, #123458); /* Use your theme's secondary color */
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color, #2A5A9A);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.share-module-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--accent-gold, #D4AF37);
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.share-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to next line */
    gap: 10px; /* Space between buttons */
    justify-content: center; /* Center buttons in the container */
    margin-bottom: 20px;
}

.share-button {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff; /* Default text color for icons/labels inside */
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease, opacity 0.2s ease;
    border: none; /* Reset button border if it's a <button> */
    cursor: pointer;
    min-width: 120px; /* Minimum width for consistency */
    text-align: center;
}

.share-button i {
    font-size: 1.2rem; /* Icon size */
    margin-right: 8px;
}
.share-button .share-button-label {
    display: inline; /* Show label by default */
}

/* Individual button colors (using CSS variable set in PHP) */
.share-button-facebook { background-color: var(--share-button-color); }
.share-button-twitter { background-color: var(--share-button-color); }
.share-button-telegram { background-color: var(--share-button-color); }
.share-button-whatsapp { background-color: var(--share-button-color); }
.share-button-reddit { background-color: var(--share-button-color); }

.share-button-more {
    background-color: #6c757d; /* Bootstrap secondary grey or your theme's grey */
}

.share-button:hover {
    transform: translateY(-2px) scale(1.03);
    opacity: 0.9;
}

.copy-url-container {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

#shareable-page-url {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--border-color, #2A5A9A);
    border-radius: 5px;
    background-color: var(--primary-dark-blue, #0A2463); /* Match input fields to theme */
    color: var(--text-light-main, #EAEAEA);
    font-size: 0.9rem;
    outline: none;
}
#shareable-page-url:focus {
    border-color: var(--accent-gold, #D4AF37);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); /* Gold focus glow */
}


#copy-url-button {
    padding: 10px 15px;
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463); /* Dark text on gold button */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
}
#copy-url-button i {
    margin-right: 6px;
}

#copy-url-button:hover {
    background-color: #c09d2e; /* Darker gold on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .share-button {
        flex-grow: 1; /* Allow buttons to take more space and potentially stack */
        min-width: 100px; /* Adjust min-width for smaller screens */
    }
}

@media (max-width: 480px) {
    .share-module-title {
        font-size: 1.1rem;
    }
    .share-button {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .share-button i {
        font-size: 1rem;
        margin-right: 5px;
    }
    /* Optional: Hide labels on very small screens if too crowded */
    /*
    .share-button .share-button-label {
        display: none; 
    }
    .share-button i {
        margin-right: 0;
    }
    .share-button {
        min-width: auto;
        padding: 8px 12px; 
    }
    */
    #shareable-page-url, #copy-url-button {
        font-size: 0.85rem;
    }
}

.standings-table {
    min-width: 750px; /* Adjust based on your total column widths if needed. Start with a reasonable value. */
    border-collapse: separate; 
    border-spacing: 0;
}

.standings-table th,
.standings-table td {
    white-space: nowrap; /* Important for horizontal scrolling and ellipsis */
    /* Ensure padding is manageable on small screens */
    padding: 0.5rem 0.4rem; /* Default padding */
}

/* Sticky Column Base Styles */
.standings-table .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10; 
    background-color: var(--card-bg, #1A3A6A); /* Default row background */
}

/* Specific styling for sticky header cells */
.standings-table thead .sticky-col {
    background-color: var(--secondary-dark-blue, #123458); /* Match table header background */
    z-index: 20; 
}

/* Define widths and left positions for sticky columns */
/* These are for larger screens initially */
.standings-table .sticky-rank {
    width: 45px; 
    min-width: 45px;
    left: 0;
    text-align: center;
}

.standings-table .sticky-logo {
    width: 55px; 
    min-width: 55px;
    left: 45px; /* Width of .sticky-rank */
    text-align: center;
}
.standings-table .sticky-logo img.team-logo {
    max-width: 22px; 
    max-height: 22px;
    display: inline-block; 
}

.standings-table .sticky-team-name {
    width: 180px; /* Default width for team name */
    min-width: 120px; /* Minimum it can shrink to before ellipsis is very aggressive */
    max-width: 220px; /* Prevent it from getting too wide on some views */
    left: 100px; /* Width of .sticky-rank (45px) + .sticky-logo (55px) */
    
    /* Styles for text truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Already on all td/th, but reinforce here */
}

/* Ensure hover effect also applies correct background to sticky cells */
.standings-table tbody tr:hover .sticky-col {
    background-color: #204880; /* Your existing hover color */
}

/* Borders for visual separation */
.standings-table .sticky-rank,
.standings-table .sticky-logo {
    border-right: 1px solid var(--border-color-translucent, rgba(42, 90, 154, 0.5)); /* Softer border */
}
/* Last sticky column's right border to separate from scrolling content */
.standings-table .sticky-team-name {
   border-right: 1px solid var(--border-color, #2A5A9A); 
}


/* --- Responsive Adjustments for Smaller Screens --- */

/* Medium Screens (e.g., tablets) - adjust breakpoint as needed */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
    .standings-table {
        min-width: 650px; /* Allow table to be a bit narrower */
    }
    .standings-table .sticky-team-name {
        width: 150px; /* Reduce team name width */
        left: 100px; /* Recalculate: rank (45) + logo (55) */
    }
}


/* Small Screens (e.g., mobile phones) */
@media (max-width: 767.98px) { /* Bootstrap's md breakpoint */
    .standings-table {
        min-width: 550px; /* Further reduce if needed */
    }
    .standings-table th,
    .standings-table td {
        font-size: 0.85rem; /* Slightly smaller font */
        padding: 0.4rem 0.3rem;
    }
    .standings-table .sticky-rank { 
        width: 35px; 
        min-width: 35px;
    }
    .standings-table .sticky-logo { 
        width: 45px; 
        min-width: 45px; 
        left: 35px; /* New width of rank */
    }
    .standings-table .sticky-logo img.team-logo {
        max-width: 20px; max-height: 20px;
    }
    .standings-table .sticky-team-name {
        width: 100px; /* Significantly reduce team name width */
        min-width: 80px; /* Absolute minimum */
        left: 80px; /* New: rank (35) + logo (45) */
    }
}

/* Extra Small Screens (e.g., very narrow phones) */
@media (max-width: 480px) {
    .standings-table {
        min-width: 450px; /* Absolute minimum, scrolling will be significant */
    }
     .standings-table th, 
    .standings-table td {
        font-size: 0.75rem; /* Even smaller font */
        padding: 0.3rem 0.2rem; 
    }
    .standings-table .sticky-rank { 
        width: 30px; 
        min-width: 30px;
    }
    .standings-table .sticky-logo { 
        width: 40px; 
        min-width: 40px; 
        left: 30px; 
    }
    .standings-table .sticky-logo img.team-logo {
        max-width: 18px; max-height: 18px;
    }
    .standings-table .sticky-team-name {
        width: 80px;  /* Very narrow, ellipsis will be aggressive */
        min-width: 60px;
        left: 70px; /* New: rank (30) + logo (40) */
    }
}
   
   /* Optional: Make scrollbars more visible on webkit browsers (Chrome, Safari, Edge)
      This is for aesthetics and might not be necessary if the default scrollbar is acceptable.
      Custom scrollbar styling has varying support and can be finicky. */
   .table-responsive::-webkit-scrollbar {
       height: 8px; /* Height of the horizontal scrollbar */
       background-color: rgba(0, 0, 0, 0.1); /* Scrollbar track */
   }
   
   .table-responsive::-webkit-scrollbar-thumb {
       background-color: var(--accent-gold, #D4AF37); /* Scrollbar thumb color (your theme's gold) */
       border-radius: 4px;
   }
   
   .table-responsive::-webkit-scrollbar-thumb:hover {
       background-color: #b89b30; /* Slightly darker gold on hover */
   }
   
   /* For Firefox, scrollbar styling is different (and more limited) */
   /* .table-responsive {
       scrollbar-width: thin;
       scrollbar-color: var(--accent-gold, #D4AF37) rgba(0,0,0,0.1);
       position: relative; 
        z-index: 1;
   } */

.llm-summary {
    background-color: rgba(255, 255, 255, 0.03); /* Very subtle light background on dark theme */
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    border-left: 3px solid var(--accent-gold, #D4AF37); /* Accent border */
    line-height: 1.7;
    font-size: 0.9rem;
}
.llm-summary p:last-child {
    margin-bottom: 0;
}

/* Responsive table for standings */
@media (max-width: 768px) {
    #backToTopBtn {
        bottom: 20px;
        right: 20px;
        padding: 0.4rem 0.6rem;
        font-size: 1.5rem;
    }

    .analysis-page-header h1.display-5 {
        font-size: 1.8rem; /* Smaller main title */
    }
    .analysis-page-header .lead {
        font-size: 1rem;
    }
    .match-header-analysis h3.text-gold {
        font-size: 1.4rem; /* Smaller team names in match header */
    }
    .match-header-analysis .fixture-time-analysis {
        font-size: 1.2rem;
    }
    .match-header-analysis .team-logo-analysis {
        height: 35px;
        width: 35px;
    }
    .analysis-tab-content .tab-pane,
    .match-analysis-card .card-body {
        padding: 1rem; /* Reduce padding on smaller cards */
    }
    .analysis-tabs .nav-link {
        padding: 0.6rem 0.5rem; /* Smaller tab buttons */
        font-size: 0.85rem;
    }
    .stat-box .fs-4 {
        font-size: 1.5rem !important;
    }
    .btn-visit-blog {
        /* Slightly reduce padding and font-size from the default btn-lg */
        padding-top: 0.45rem;    /* Default Bootstrap btn-lg padding-y is 0.5rem */
        padding-bottom: 0.45rem;
        padding-left: 1.25rem;  /* Adjusted from the 1.5rem base above */
        padding-right: 1.25rem;
        font-size: 1.1rem;   /* Default Bootstrap btn-lg font-size is 1.25rem */
    }
}

@media (max-width: 576px) { /* Small devices (landscape phones, less than 768px) */
    .analysis-tabs { /* Make tabs horizontally scrollable if they don't fit */
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .analysis-tabs::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari, Opera */
        display: none;
    }
    .analysis-tabs .nav-item {
        flex-shrink: 0; /* Prevent tabs from shrinking too much */
    }
    .match-header-analysis .row > div { /* Stack home team, time, away team vertically */
        flex-basis: 100%;
        text-align: center !important; /* Center all elements */
        margin-bottom: 0.5rem;
    }
    .match-header-analysis .row .col-4.text-end,
    .match-header-analysis .row .col-4.text-start {
        justify-content: center !important; /* Center logos and names */
    }
     .match-header-analysis .row .col-4.text-end .team-name-v2, /* If you reuse team-name-v2 */
     .match-header-analysis .row .col-4.text-start .team-name-v2 {
        margin: 0 0.5rem; /* Adjust margins when stacked */
    }
    .btn-visit-blog {
        /* Make it full width for better tapability and layout on narrow screens */
        width: 100%;
        display: block; /* To allow width: 100% and for it to be centered by parent's text-align:center */
        
        /* Adjust padding and font-size to be more like a regular .btn size */
        padding-top: 0.6rem;    /* More comfortable padding for full-width */
        padding-bottom: 0.6rem;
        padding-left: 1rem;     /* Standard horizontal padding */
        padding-right: 1rem;
        font-size: 1rem;      /* Standard button font-size */
    }
    .league-tags-section .section-title {
        font-size: 1.1rem;
    }
    .league-tag-button {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

.btn-view-all-leagues {
    /* It already has .btn and .btn-outline-gold */
    padding: 0.6rem 1.5rem; /* Slightly larger padding than individual tags */
    font-weight: 500; /* Make it a bit bolder */
    border-radius: 25px; /* Pill shape */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    transition: all 0.25s ease-in-out;
}

.btn-view-all-leagues:hover,
.btn-view-all-leagues:focus {
    /* .btn-outline-gold:hover already handles bg and text color change */
    transform: scale(1.05); /* Slightly larger scale on hover */
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3); /* Goldish shadow */
}

.btn-view-all-leagues .bi {
    vertical-align: -0.15em; /* Align icon better with text */
    font-size: 1.1em;
}

/* assets/css/style.css */

/* ... your existing styles ... */

/* --- Skeleton Screen Styles --- */
.skeleton-wrapper {
    /* Styles for a container that will be replaced */
}

.skeleton {
    background-color: #2a3a5e; /* A slightly lighter shade of your secondary blue, or a neutral grey */
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden; /* For the shimmer animation */
}

.skeleton.skeleton-text {
    height: 1em; /* Or specific heights like 12px, 16px */
    width: 80%;
}
.skeleton.skeleton-text-full {
    width: 100%;
}
.skeleton.skeleton-text-short {
    width: 40%;
}
.skeleton.skeleton-title {
    height: 1.5em; /* Larger for titles */
    width: 60%;
    margin-bottom: 15px;
}
.skeleton.skeleton-avatar,
.skeleton.skeleton-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* For circular avatars/logos */
}
.skeleton.skeleton-logo-rect {
    width: 60px;
    height: 30px;
    border-radius: 4px;
}

.skeleton.skeleton-card-header {
    height: 40px;
    margin-bottom: 15px;
}
.skeleton.skeleton-card-content-line {
    height: 12px;
    margin-bottom: 8px;
}
.skeleton.skeleton-button {
    height: 38px; /* Match button height */
    width: 100px;
    border-radius: 5px;
}

/* Shimmer Animation (Optional but nice) */
.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Start off-screen */
    height: 100%;
    width: 150%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* Specific Skeleton Structures */

/* For Homepage League Fixture Cards */
.skeleton-league-fixture-card {
    background-color: var(--card-bg, #1A3A6A); /* Match your card background */
    border: 1px solid var(--border-color, #2A5A9A);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px; /* Match .league-fixture-card margin */
    height: 250px; /* Approximate height of your fixture card, adjust as needed */
    display: flex;
    flex-direction: column;
}
.skeleton-league-fixture-card .skeleton-card-header {
    height: 30px; width: 70%; margin-bottom: 20px;
}
.skeleton-league-fixture-card .skeleton-card-content-line {
    height: 16px; margin-bottom: 10px;
}
.skeleton-league-fixture-card .skeleton-button {
    height: 40px; width: 100%; margin-top: auto; /* Push to bottom */
}


/* For League Page Table (Standings) */
.skeleton-table-wrapper {
    background-color: var(--card-bg, #1A3A6A);
    padding: 15px;
    border-radius: 5px;
}
.skeleton-table-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #2A5A9A);
}
.skeleton-table-row .skeleton {
    margin-right: 10px;
}
.skeleton-table-row .skeleton-avatar { margin-right: 15px; }
.skeleton-table-row .skeleton-text { flex-grow: 1; }
.skeleton-table-row .skeleton-text-short { flex-grow: 0; width: 50px; }

/* For League Page Fixture/Result Cards */
.skeleton-fixture-result-card {
    background-color: var(--card-bg, #1A3A6A);
    border: 1px solid var(--border-color, #2A5A9A);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px; /* Match .fixture-card margin */
    height: 100px; /* Approximate height */
}
.skeleton-fixture-result-card .skeleton-text { margin-bottom: 15px;}
.skeleton-fixture-result-card .skeleton-text-short { margin: 0 auto; }

/* for summary */
.summary-skeleton-wrapper {
    background-color: rgba(255, 255, 255, 0.02); /* Slightly different from main card bg */
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    border-left: 3px solid var(--border-color, #2A5A9A); /* Subtler border for skeleton */
}

.summary-skeleton-wrapper .skeleton {
    background-color: #2a3a5e; /* Match other skeletons */
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.summary-skeleton-wrapper .skeleton::before { /* Shimmer */
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    animation: shimmer 1.8s infinite;
}

/* --- Skeleton Styles for Blog Post Cards --- */
.blog-posts-skeleton-container .skeleton-blog-card {
    background-color: var(--card-bg, #1A3A6A); /* Match your card background */
    border: 1px solid var(--border-color, #2A5A9A);
    border-radius: 5px; /* Match .blog-post-card */
    padding: 15px;
    margin-bottom: 1.5rem; /* Matches .g-4 for column spacing */
    display: flex;
    flex-direction: column;
    height: 350px; /* Approximate height of your blog cards, adjust as needed */
}

.blog-posts-skeleton-container .skeleton-blog-card .skeleton-image-placeholder {
    height: 150px; /* Approximate height of your blog post image */
    background-color: #2a3a5e; /* Skeleton color */
    border-radius: 4px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}
.blog-posts-skeleton-container .skeleton-blog-card .skeleton-image-placeholder::before { /* Shimmer */
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    animation: shimmer 1.8s infinite; /* Use existing shimmer or adjust */
}

.blog-posts-skeleton-container .skeleton-blog-card .skeleton.skeleton-title-short {
    height: 1.2em;
    width: 70%;
    margin-bottom: 10px;
    background-color: #2a3a5e;
}
.blog-posts-skeleton-container .skeleton-blog-card .skeleton.skeleton-text {
    height: 0.9em;
    margin-bottom: 8px;
    background-color: #2a3a5e;
}
.blog-posts-skeleton-container .skeleton-blog-card .skeleton.skeleton-text-full { width: 100%; }
.blog-posts-skeleton-container .skeleton-blog-card .skeleton.skeleton-text-medium { width: 80%; }
.blog-posts-skeleton-container .skeleton-blog-card .skeleton.skeleton-text-short { width: 50%; }

.blog-posts-skeleton-container .skeleton-blog-card .skeleton-button {
    height: 38px; /* Match button height */
    width: 120px;
    border-radius: 5px;
    margin-top: auto; /* Push to bottom */
    background-color: #2a3a5e;
}
/* Keyframes for shimmer is already defined */

.league-tags-section {
    border-top: 1px solid var(--border-color, #2A5A9A); /* Separator from main content */
    border-bottom: 1px solid var(--border-color, #2A5A9A); /* Separator from footer */
}

.league-tags-section .section-title { /* Reusing .section-title from league.php if desired */
    color: var(--accent-gold, #D4AF37);
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    /* border-bottom: 2px solid var(--border-color); */ /* Optional: if you want underline for this title */
    padding-bottom: 5px;
    font-size: 1.3rem; /* Adjust size as needed */
}

.league-tags-container {
    /* d-flex flex-wrap justify-content-center gap-2 is handled by Bootstrap classes */
}

.league-tag-button {
    background-color: var(--secondary-dark-blue, #123458); /* Match your card/secondary bg */
    color: var(--text-light-secondary, #B0B0B0);
    border: 1px solid var(--border-color, #2A5A9A);
    padding: 0.4rem 0.8rem; /* Adjust padding for a "tag" feel */
    font-size: 0.85rem; /* Slightly smaller font for tags */
    border-radius: 20px; /* More rounded for a pill/tag shape */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    white-space: nowrap; /* Prevent names from wrapping within a button */
}

.league-tag-button:hover,
.league-tag-button:focus {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463); /* Dark text on gold hover */
    border-color: var(--accent-gold, #D4AF37);
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.league-tag-button.active {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
    border-color: var(--accent-gold, #D4AF37);
    font-weight: bold;
    pointer-events: none; /* Optional: make the active tag non-clickable */
}

.league-tag-flag {
    /* If you want to style flags specifically, e.g., opacity */
}

/* --- Cookie Consent Banner Styles --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1050; /* High z-index to be on top of most content */
    border-top: 1px solid var(--border-color, #2A5A9A);
    display: none; /* Hidden by default, JS will show it */
    font-size: 0.9rem;
    /* Using a very dark shade from your theme, or define a new one */
    background-color: #081E4D; /* Example: Darker than primary-dark-blue for contrast */
}

.cookie-consent-banner p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.cookie-consent-banner p:last-child {
    margin-bottom: 0;
}

.cookie-consent-banner a.text-decoration-underline {
    text-decoration: underline !important; /* Ensure underline for links in banner */
}
.cookie-consent-banner a.text-decoration-underline:hover {
    text-decoration: none !important;
}


.cookie-consent-banner .btn-gold { /* Assuming you have a .btn-gold style */
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463); /* Dark text on gold button */
    border-color: var(--accent-gold, #D4AF37);
    padding: 0.375rem 0.85rem;
}
.cookie-consent-banner .btn-gold:hover {
    background-color: #c09d2e; /* Darker gold */
    border-color: #b89b30;
    color: var(--primary-dark-blue, #0A2463);
}

/* Responsive adjustments for the banner text and button */
@media (max-width: 767.98px) { /* Bootstrap md breakpoint */
    .cookie-consent-banner .col-md-8, 
    .cookie-consent-banner .col-lg-9 {
        text-align: center;
    }
    .cookie-consent-banner .col-md-4,
    .cookie-consent-banner .col-lg-3 {
        margin-top: 10px;
    }
}

/* --- Newsletter Section Styles --- */
.newsletter-section {
    /* Option 1: Use a slightly different background from the main body if body is primary-dark-blue */
    background-color: var(--secondary-dark-blue, #123458); /* Or your bg-dark-blue-light */
    /* Option 2: Add a subtle gradient */
    /* background-image: linear-gradient(to bottom, rgba(10, 36, 99, 0.95), rgba(18, 52, 88, 0.98)); */
    padding-top: 3rem; /* Increased padding */
    padding-bottom: 3.5rem; /* Increased padding */
    border-top: 2px solid var(--accent-gold, #D4AF37); /* Prominent top border */
    border-bottom: 1px solid var(--border-color, #2A5A9A);
    position: relative; /* For potential pseudo-elements if desired */
    overflow: hidden; /* If using pseudo-elements that might extend */
    /* background-color: var(--primary-dark-blue); */ /* Or a slightly different shade if preferred */
    /* border-top: 1px solid var(--border-color, #2A5A9A); */ /* Optional separator */
}

.newsletter-section .bi-envelope-paper-heart-fill {
    font-size: 3rem !important; /* Larger icon */
    margin-bottom: 1rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.newsletter-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.25rem; /* Larger heading */
    font-weight: 700 !important; /* Ensure boldness */
    color: var(--text-light-main, #EAEAEA); /* Brighter than text-gold for main heading */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.newsletter-section h2 .highlight { /* Use <span class="highlight"> around parts of h2 if needed */
    color: var(--accent-gold, #D4AF37);
}

.newsletter-section .lead {
    font-size: 1.1rem;
    margin-bottom: 2.5rem !important; /* More space */
}

#newsletterSignupForm .form-control-lg {
    padding: 0.85rem 1.25rem; /* Slightly more padding */
    font-size: 1rem;
    border-radius: 25px; /* More rounded, pill-like input */
    background-color: rgba(0,0,0,0.2); /* Darker, more integrated input bg */
    border: 1px solid var(--border-color, #2A5A9A);
    color: var(--text-light-main, #EAEAEA);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#newsletterSignupForm .form-control-lg::placeholder {
    color: var(--text-light-secondary, #B0B0B0);
    opacity: 0.7;
}
#newsletterSignupForm .form-control-lg:focus {
    background-color: rgba(0,0,0,0.25);
    border-color: var(--accent-gold, #D4AF37);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.4); /* Gold focus glow */
    color: var(--text-light-main, #EAEAEA);
}

#newsletterSignupForm .btn-gold {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463); /* Dark text on gold button */
    border: 2px solid var(--accent-gold, #D4AF37); /* Make border more apparent */
    font-weight: bold;
    font-size: 1.1rem; /* Slightly larger button text */
    padding: 0.75rem 1.5rem; /* More padding for a substantial button */
    border-radius: 25px; /* Match input field rounding */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#newsletterSignupForm .btn-gold:hover,
#newsletterSignupForm .btn-gold:focus {
    background-color: #c09d2e; /* Darker gold */
    border-color: #b89b30;
    color: var(--primary-dark-blue, #0A2463);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
#newsletterSignupForm .btn-gold .spinner-border-sm {
    width: 1.1em;
    height: 1.1em;
    border-width: .22em;
}


#newsletterMessage {
    font-weight: 500;
    font-size: 0.95rem;
}
#newsletterMessage.text-success { color: #32cd32 !important; /* Brighter green */ }
#newsletterMessage.text-danger { color: #ff4757 !important; /* Brighter red */ }

.newsletter-section .text-muted {
    color: var(--text-light-secondary, #B0B0B0) !important;
    opacity: 0.8;
}

/* Daily Fixture Preferences Section (if shown) */
#dailyFixturePreferences {
    background-color: rgba(0,0,0,0.1);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px dashed var(--border-color, #2A5A9A);
}
#dailyFixturePreferences .form-label {
    color: var(--text-light-main, #EAEAEA);
    font-weight: 500;
}
#dailyFixturePreferences .form-select-sm {
    background-color: var(--primary-dark-blue, #0A2463) !important; /* Override Bootstrap if needed */
}

.league-selection-checkboxes {
    max-height: 200px; /* Make the league list scrollable if too long */
    overflow-y: auto;
    background-color: rgba(0,0,0,0.15); /* Slightly different background for the list */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #2A5A9A);
}

.league-selection-checkboxes .form-check {
    padding-left: 1.75em; /* Align checkbox and label nicely */
}
.league-selection-checkboxes .form-check-input {
    margin-top: 0.2em;
}
.league-selection-checkboxes .form-check-label {
    font-size: 0.85rem;
    cursor: pointer;
}

.league-selection-checkboxes-manage {
    /* Styles for the league checkbox container on manage_preferences page */
    background-color: rgba(0,0,0,0.1); /* Slightly different background for the list */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #2A5A9A); /* Use your theme's border color */
    max-height: 250px; /* Make the league list scrollable if too long */
    overflow-y: auto;
}

.league-selection-checkboxes-manage .form-check {
    padding-left: 1.75em; /* Align checkbox and label nicely */
    margin-bottom: 0.3rem;
}
.league-selection-checkboxes-manage .form-check-input {
    margin-top: 0.2em;
}
.league-selection-checkboxes-manage .form-check-label {
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-light-main); /* Ensure label text is visible */
}

#dailyEmailOptions .form-label {
    color: var(--text-light-secondary); /* Lighter color for labels in this section */
    font-weight: 500;
}
#dailyEmailOptions .form-select-sm { /* Style for the timezone select */
    background-color: var(--primary-dark-blue, #0A2463); /* Darker background for select */
    color: var(--text-light-main, #EAEAEA);
    border-color: var(--border-color, #2A5A9A);
}
#dailyEmailOptions .form-select-sm:focus {
    border-color: var(--accent-gold, #D4AF37);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25); /* Gold focus glow */
}


@media (max-width: 320px) {
    body {
        font-size: 12px; /* Reduce base font size, but be cautious with legibility */
        -webkit-text-size-adjust: 100%; /* Prevent iOS text zoom */
    }

    /* --- General Simplification --- */
    .container, .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    h1, .display-5 {
        font-size: 1.5rem; /* Significantly reduce heading sizes */
    }
    h2, .section-title {
        font-size: 1.1rem;
    }
    h3, h5, .legend-title {
        font-size: 0.9rem;
    }
    p, li, small, .small {
        font-size: 0.8rem; /* Or use px if more predictable */
    }

    /* --- Navigation --- */
    .navbar {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
    .navbar-brand {
        font-size: 1rem; /* Smaller brand */
    }
    .navbar-toggler {
        padding: 0.15rem 0.3rem;
        font-size: 0.8rem;
    }
    /* Consider hiding the league dropdown or making it a very simple list if it's too complex */
    #navbarDropdownLeagues + .dropdown-menu {
        min-width: 150px; /* Make dropdown narrower */
        font-size: 0.8rem;
    }
    /* Hide the timezone display in the navbar, the one below might be enough or hide both */
    #selected-timezone-display {
        display: none !important;
    }
    #selected-timezone-display-sm {
        font-size: 0.75rem;
        margin-top: 5px !important;
    }


    /* --- Homepage League Fixture Cards (`index.php`) --- */
    .league-fixture-card .card-header img {
        height: 20px !important; /* Smaller logos */
        margin-right: 5px !important;
    }
    .league-fixture-card .card-title {
        font-size: 0.9rem;
    }
    .fixture-summary-item-v2 {
        font-size: 0.75rem;
        padding: 5px !important;
    }
    .team-logo-summary-v2 {
        height: 18px !important;
        width: 18px !important;
    }
    .league-fixture-card .card-footer .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    /* Hide fixture summaries on index if too much, or show only one */
    .league-fixture-card .card-body {
        /* display: none; */ /* Option: hide fixture details on index for smartwatch */
    }


    /* --- League Page (`league.php`) --- */
    .d-flex.align-items-center.mb-4 > img { /* League logo on league page */
        height: 30px !important;
        margin-right: 8px !important;
    }

    /* Tabs - make them smaller */
    .nav-tabs .nav-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }

    /*
      League Table (.standings-table) on Smartwatch:
      The "sticky column + horizontal scroll" is not ideal for smartwatches.
      Option 1: Hide it completely.
      Option 2: Try to make it extremely compact (very hard for wide tables).
      Option 3 (Requires PHP change): Show a vastly simplified, stacked list.

      For CSS-only, hiding or a very basic scroll is the most straightforward.
    */
    #table-content-wrapper .table-responsive {
        /* display: none; */ /* Option 1: Hide the table completely */
        /* Add a message instead if hidden - see below */
    }
    /* If showing the table, make it as compact as possible */
    .standings-table {
        min-width: auto !important; /* Allow it to shrink as much as possible if not hidden */
        font-size: 0.7rem !important; /* Very small font */
    }
    .standings-table th,
    .standings-table td {
        padding: 0.2rem 0.15rem !important; /* Minimal padding */
        white-space: normal; /* Allow text to wrap to make columns narrower */
    }
    .standings-table .team-logo {
        width: 14px !important;
        height: 14px !important;
        margin-right: 3px !important;
    }
    /* Hide less critical columns even if scrollable, or all except rank, logo, name, pts */
    .standings-table th:nth-child(n+5), /* Hides MP onwards if you want to simplify further */
    .standings-table td:nth-child(n+5) {
        /* display: none !important; */
    }
    /* Adjust sticky column CSS if table is shown - they might not work well at this size */
    .standings-table .sticky-col {
        position: static !important; /* Disable stickiness if it causes issues */
        background-color: transparent !important
    }
    .table-legend {
        /* display: none; */ /* Option: Hide legend */
        font-size: 0.7rem;
    }
    .legend-indicator {
        width: 8px !important; height: 8px !important; margin-right: 5px !important;
    }


    /* Fixture & Result Cards on League Page */
    .fixture-card, .result-card {
        padding: 8px !important;
        font-size: 0.8rem;
    }
    .fixture-card .team-logo, .result-card .team-logo {
        height: 20px !important;
    }
    .fixture-card .score, .result-card .score {
        font-size: 1em !important; /* Relative to card font size */
    }
    .match-time, .match-venue {
        font-size: 0.75rem !important;
    }


    /* Top Scorers Table */
    #topscorers-content-wrapper .table-responsive {
        /* display: none; */ /* Option: Hide */
    }
    #topscorers-content-wrapper .table th,
    #topscorers-content-wrapper .table td {
        padding: 0.2rem 0.15rem !important;
        font-size: 0.7rem !important;
        white-space: normal;
    }
     #topscorers-content-wrapper .team-logo {
        width: 16px !important; height: 16px !important;
    }


    /* Share Buttons Module */
    .responsive-share-module {
        padding: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .share-module-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .share-button {
        padding: 6px 8px;
        font-size: 0.7rem;
        min-width: auto; /* Allow buttons to be smaller */
    }
    .share-button i {
        font-size: 0.9rem;
        margin-right: 4px;
    }
    .share-button .share-button-label {
        display: none; /* Hide labels, show only icons */
    }
    .share-button i {
        margin-right: 0; /* No margin if label is hidden */
    }
    .copy-url-container input, .copy-url-container button {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    /* About League Section */
    .about-league-content {
        padding: 10px !important;
        font-size: 0.8rem;
    }

    /* Footer */
    footer.bg-secondary-blue {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 0.75rem;
    }
    .social-icons i {
        font-size: 1.2rem !important; /* Smaller social icons */
    }

    /* Add a message for smartwatch users */
    .smartwatch-notice {
        display: block !important; /* Show this notice */
        text-align: center;
        padding: 10px;
        background-color: var(--accent-gold, #D4AF37);
        color: var(--primary-dark-blue, #0A2463);
        font-size: 0.8rem;
        width: 100%;
    }
}

/* Ensure the main container for the unsubscribe card has good spacing */
.page-unsubscribe-content .container { /* Add class="page-unsubscribe-content" to the main div in unsubscribe.php if needed for specificity */
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.unsubscribe-card { /* You can add this class to the card in unsubscribe.php for specific targeting */
    background-color: var(--secondary-dark-blue, #123458); /* Match your theme's secondary card color */
    color: var(--text-light-main, #EAEAEA);
    border: 1px solid var(--border-color, #2A5A9A);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25); /* Slightly more pronounced shadow */
}

.unsubscribe-card .card-header {
    background-color: var(--primary-dark-blue, #0A2463); /* Darker header */
    color: var(--accent-gold, #D4AF37);
    border-bottom: 2px solid var(--accent-gold, #D4AF37); /* Gold accent border */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.unsubscribe-card .card-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* Prominent title */
}

.unsubscribe-card .card-body {
    padding: 1.5rem 2rem; /* More padding inside the card body */
}

.unsubscribe-card .alert { /* Style for success/error messages */
    border-width: 0; /* Remove default border if it clashes */
    border-left: 4px solid; /* Add a colored left border */
    font-size: 0.95rem;
}
.unsubscribe-card .alert-success {
    background-color: rgba(40, 167, 69, 0.15); /* Lighter shade of success for dark theme */
    color: #a3d9a5; /* Lighter green text */
    border-left-color: #28a745;
}
.unsubscribe-card .alert-danger {
    background-color: rgba(220, 53, 69, 0.15); /* Lighter shade of danger */
    color: #f5c6cb; /* Lighter red text */
    border-left-color: #dc3545;
}
.unsubscribe-card .alert-warning {
    background-color: rgba(255, 193, 7, 0.15); /* Lighter shade of warning */
    color: #ffeeba; /* Lighter yellow text */
    border-left-color: #ffc107;
}
.unsubscribe-card .alert-info {
    background-color: rgba(13, 202, 240, 0.1); /* Lighter shade of info */
    color: #9eeaf9; /* Lighter cyan text */
    border-left-color: #0dcaf0;
}


.unsubscribe-card p {
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.unsubscribe-card .text-muted {
    color: #FFFFFF;
}

.unsubscribe-card .form-check-label { /* If you add more options in the future */
    font-size: 1rem;
}

.unsubscribe-card .btn-danger { /* For the "Yes, Unsubscribe Me" button */
    background-color: #c82333; /* Slightly darker red than default Bootstrap danger */
    border-color: #bd2130;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
}
.unsubscribe-card .btn-danger:hover {
    background-color: #b21f2d;
    border-color: #a01c28;
}

.unsubscribe-card .btn-secondary { /* For the "No, Keep My Subscription" button */
    background-color: #5a6268;
    border-color: #545b62;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
}
.unsubscribe-card .btn-secondary:hover {
    background-color: #494f54;
    border-color: #3f454a;
}

.unsubscribe-card .btn-outline-gold { /* For "Back to Homepage" link if styled as button */
    border-color: var(--accent-gold, #D4AF37);
    color: var(--accent-gold, #D4AF37);
    padding: 0.5rem 1rem;
}
.unsubscribe-card .btn-outline-gold:hover {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
}


/* Responsive adjustments for the unsubscribe card itself */
@media (max-width: 576px) {
    .unsubscribe-card .card-body {
        padding: 1rem 1.25rem;
    }
    .unsubscribe-card .card-header h3 {
        font-size: 1.25rem;
    }
    .unsubscribe-card p {
        font-size: 0.9rem;
    }
    .unsubscribe-card .btn { /* Make buttons full width on small screens */
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .unsubscribe-card .btn-danger.me-2 {
        margin-right: 0 !important;
    }
}

/* Styles for the new fixture summary on homepage */
.fixture-summary-item-v3 {
    /* background-color: var(--secondary-dark-blue); */ /* Already set on parent card */
    /* border-radius: 4px; */ /* Already set on parent card */
    /* padding: 0.75rem; */ /* Already set on parent card */
    /* margin-bottom: 0.75rem; */ /* Already set on parent card */
    font-size: 0.85rem; /* Base size for this component */
}

.fixture-summary-item-v3 .fixture-meta {
    /* For the top line with time and status short code if you use it */
    /* This is now integrated into the status line or the center info */
}

.fixture-summary-item-v3 .fixture-main-row {
    /* Uses Bootstrap row and col-5, col-2, col-5 */
}

.fixture-summary-item-v3 .team-column {
    display: flex;
    align-items: center;
    overflow: hidden; /* Prevent content from breaking out if names are extremely long */
}
.fixture-summary-item-v3 .home-team-column {
    justify-content: flex-end; /* Aligns content (name + logo) to the right */
}
.fixture-summary-item-v3 .away-team-column {
    justify-content: flex-start; /* Aligns content (logo + name) to the left */
}

.fixture-summary-item-v3 .team-logo-fixture {
    width: 22px; /* Adjust size as needed */
    height: 22px;
    object-fit: contain;
    flex-shrink: 0; /* Prevent logo from shrinking */
}
.fixture-summary-item-v3 .home-team-column .team-logo-fixture {
    margin-left: 8px; /* Space between name and logo */
}
.fixture-summary-item-v3 .away-team-column .team-logo-fixture {
    margin-right: 8px; /* Space between logo and name */
}

.fixture-summary-item-v3 .team-name-fixture {
    font-weight: 500;
    color: var(--text-light-main);
    white-space: normal; /* Allow team names to wrap */
    word-break: break-word; /* Break long words if necessary */
    overflow: hidden; /* Fallback if wrapping isn't enough */
    /* text-overflow: ellipsis; /* Can be added if you want ... for very long names on one line */
    /* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */ /* For multi-line ellipsis (complex) */
    flex-grow: 1; /* Allow name to take available space */
}

.fixture-summary-item-v3 .match-center-info {
    font-weight: bold;
    font-size: 1.1em; /* Make score/time slightly larger */
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px; /* Minimal horizontal padding */
}
.fixture-summary-item-v3 .fixture-time-display,
.fixture-summary-item-v3 .fixture-score-display {
    /* Specific styling if needed */
}


.fixture-summary-item-v3 .fixture-status-line {
    font-size: 0.8rem; /* Smaller text for status line */
    margin-top: 0.25rem;
}
.fixture-summary-item-v3 .fixture-status-line .status-text {
    /* Styles for specific statuses like .status-ft, .status-live can apply here */
}
.fixture-summary-item-v3 .fixture-datetime-datepart {
    /* JS will update this */
}


/* Responsive adjustments for fixture summary on very small screens */
@media (max-width: 420px) {
    /*
    .fixture-summary-item-v3 {
        font-size: 0.8rem;
    }
    .fixture-summary-item-v3 .fixture-main-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .fixture-summary-item-v3 .team-column {
        width: 100% !important;
        flex-basis: auto !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 3px;
    }
    .fixture-summary-item-v3 .home-team-column .team-logo-fixture {
        margin-left: 0;
        margin-right: 8px;
        order: -1;
    }
    .fixture-summary-item-v3 .away-team-column .team-logo-fixture {
        margin-right: 8px;
        order: -1;
    }
    .fixture-summary-item-v3 .match-center-info {
        width: 100% !important;
        flex-basis: auto !important;
        padding: 3px 0;
        font-size: 1.2em;
    }
    .fixture-summary-item-v3 .team-logo-fixture {
        width: 20px;
        height: 20px;
    }
    .fixture-summary-item-v3 .team-name-fixture {
        max-width: fit-content;
        font-size: 0.95em;
    }
    */
}

.ad-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center ad content if it's smaller than container */
    /* Add specific height/width constraints if your ad network requires them,
       but often ad scripts handle their own sizing. */
    /* Example:
    min-height: 90px; 
    background-color: rgba(255,255,255,0.05); /* Placeholder bg to see the slot */
    /* border: 1px dashed var(--border-color, #2A5A9A); */
}

.ad-container img, 
.ad-container iframe {
    max-width: 100%; /* Ensure ads are responsive */
    height: auto;
    display: block; /* For centering with margin auto if needed */
    margin-left: auto;
    margin-right: auto;
}

/* --- All Leagues Page Styles --- */
.all-leagues-card {
    background-color: var(--secondary-dark-blue, #123458); /* Match your card background */
    border: 1px solid var(--border-color, #2A5A9A);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    color: var(--text-light-main, #EAEAEA);
}
.all-leagues-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.25);
}

.all-leagues-card .card-header {
    /* bg-dark-blue and text-gold are applied via Bootstrap classes in HTML */
    border-bottom: 2px solid var(--accent-gold, #D4AF37); /* Accent border */
    min-height: 60px; /* Ensure consistent header height */
}

.all-leagues-card-logo {
    height: 28px; /* Adjust as needed */
    width: auto;
    max-width: 28px; /* Prevent oversized logos */
    object-fit: contain;
}
.all-leagues-card-flag {
    font-size: 1.5rem; /* Adjust flag size */
    line-height: 1;
}

.all-leagues-card .card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-light-main); /* Ensure title is light on dark header */
}
.all-leagues-card .card-body {
    background-color: var(--card-bg, #1A3A6A); /* Match other card bodies */
}

.all-leagues-card .card-text.small {
    font-size: 0.85rem;
    line-height: 1.5;
    min-height: 60px; /* Give some space for snippet, adjust as needed */
}

.all-leagues-card .btn-outline-gold {
    /* Styles for btn-outline-gold should already exist, ensure they are suitable */
    border-color: var(--accent-gold, #D4AF37);
    color: var(--accent-gold, #D4AF37);
    font-weight: 500;
}
.all-leagues-card .btn-outline-gold:hover {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
}

/* Pagination Styles (to match dark theme) */
.pagination .page-item .page-link {
    background-color: var(--secondary-dark-blue, #123458);
    border-color: var(--border-color, #2A5A9A);
    color: var(--text-light-secondary, #B0B0B0);
    margin: 0 2px; /* Add small margin between page numbers */
    border-radius: 0.25rem;
}
.pagination .page-item.active .page-link {
    background-color: var(--accent-gold, #D4AF37);
    border-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
    font-weight: bold;
}
.pagination .page-item.disabled .page-link {
    background-color: #2c3e50; /* Darker disabled background */
    border-color: var(--border-color, #2A5A9A);
    color: #6c757d; /* Muted text */
}
.pagination .page-item .page-link:hover {
    background-color: var(--primary-dark-blue, #0A2463);
    color: var(--accent-gold, #D4AF37);
}
.pagination .page-item.active .page-link:hover {
     background-color: #c8a237; /* Darker gold on hover for active */
     border-color: #b89230;
}

/* --- Fixture Email Subscribe Pop-up Styles --- */
.fixture-subscribe-popup {
    position: fixed;
    bottom: 20px;
    right: -400px; /* Initially off-screen */
    width: 100%;
    max-width: 360px; /* Max width of the pop-up */
    background-color: var(--secondary-dark-blue, #123458); /* Darker, distinct background */
    color: var(--text-light-main, #EAEAEA);
    border: 1px solid var(--border-color, #2A5A9A);
    border-radius: 8px;
    padding: 20px;
    z-index: 1040; /* Below modals (1050+), above most other content */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: right 0.5s ease-in-out; /* Animation for sliding in */
    font-size: 0.9rem;
}

.fixture-subscribe-popup.visible {
    right: 20px; /* Slide in */
}

.fixture-subscribe-popup .popup-content-inner {
    position: relative;
    text-align: center;
}

.fixture-subscribe-popup .close-popup-btn {
    position: absolute;
    top: -15px; /* Adjust to be slightly outside or inside top-right */
    right: -10px;
    background: var(--primary-dark-blue, #0A2463);
    color: var(--text-light-secondary, #B0B0B0);
    border: 1px solid var(--border-color, #2A5A9A);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    line-height: 1; /* Center the '×' */
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.fixture-subscribe-popup .close-popup-btn:hover {
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
}

.fixture-subscribe-popup .popup-icon-container {
    margin-bottom: 10px;
}
.fixture-subscribe-popup .popup-icon-container .bi {
    font-size: 2.5rem; /* Large icon */
}

.fixture-subscribe-popup .popup-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.fixture-subscribe-popup .popup-text {
    line-height: 1.5;
    margin-bottom: 15px;
}
.fixture-subscribe-popup .popup-text strong {
    color: var(--text-light-main);
}

.fixture-subscribe-popup .popup-actions .btn {
    font-weight: 500;
    padding: 0.4rem 0.8rem;
}
.fixture-subscribe-popup .popup-actions .btn-gold {
    /* Assuming you have .btn-gold styles already */
    background-color: var(--accent-gold, #D4AF37);
    color: var(--primary-dark-blue, #0A2463);
    border-color: var(--accent-gold, #D4AF37);
}
.fixture-subscribe-popup .popup-actions .btn-gold:hover {
    background-color: #c8a23e; /* Darker gold */
    border-color: #b89b30;
}
.fixture-subscribe-popup .popup-actions .btn-outline-secondary {
    color: var(--text-light-secondary, #B0B0B0);
    border-color: var(--text-light-secondary, #B0B0B0);
    font-size: 0.8rem;
}
.fixture-subscribe-popup .popup-actions .btn-outline-secondary:hover {
    color: var(--text-light-main, #EAEAEA);
    background-color: rgba(255,255,255,0.1);
    border-color: var(--text-light-main, #EAEAEA);
}


/* Responsive adjustments for the pop-up */
@media (max-width: 576px) {
    .fixture-subscribe-popup {
        max-width: 100%; /* Full width at bottom */
        right: 0; /* Align to right edge */
        left: 0;  /* Align to left edge */
        bottom: 0;
        border-radius: 8px 8px 0 0; /* Rounded top corners */
        padding: 15px;
        transform: translateY(100%); /* Initially hidden below screen */
        transition: transform 0.5s ease-in-out; /* Slide up animation */
    }
    .fixture-subscribe-popup.visible {
        transform: translateY(0); /* Slide up into view */
        right: 0; /* Keep it full width */
    }
    .fixture-subscribe-popup .close-popup-btn {
        top: -10px; /* Adjust for smaller pop-up */
        right: 5px;
    }
    .fixture-subscribe-popup .popup-title {
        font-size: 1.1rem;
    }
    .fixture-subscribe-popup .popup-text {
        font-size: 0.85rem;
    }
}