/*
Theme Name: SportsRush Modern
Theme URI: https://sportsrush.co.uk
Description: A bold, modern redesign for SportsRush - UK's #1 Sports Prediction Website
Author: Devin
Version: 2.0.0
*/

/* ============================================
   SPORTSRUSH MODERN THEME - DRAMATIC REDESIGN
   A completely fresh, bold look
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* CSS Variables - Bold Color Scheme */
:root {
    --sr-bg-dark: #0a0a0f;
    --sr-bg-card: #12121a;
    --sr-bg-card-hover: #1a1a25;
    --sr-primary: #6366f1;
    --sr-primary-light: #818cf8;
    --sr-accent: #f43f5e;
    --sr-accent-light: #fb7185;
    --sr-gold: #fbbf24;
    --sr-gold-light: #fcd34d;
    --sr-success: #10b981;
    --sr-cyan: #22d3ee;
    --sr-white: #ffffff;
    --sr-gray-100: #f3f4f6;
    --sr-gray-200: #e5e7eb;
    --sr-gray-300: #d1d5db;
    --sr-gray-400: #9ca3af;
    --sr-gray-500: #6b7280;
    --sr-gray-600: #4b5563;
    --sr-gray-700: #374151;
    --sr-gray-800: #1f2937;
    --sr-gray-900: #111827;
    --sr-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --sr-gradient-accent: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    --sr-gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --sr-gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
    --sr-gradient-hero: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #0f172a 100%);
    --sr-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --sr-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --sr-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --sr-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
    --sr-shadow-glow-accent: 0 0 40px rgba(244, 63, 94, 0.3);
    --sr-radius-sm: 8px;
    --sr-radius-md: 12px;
    --sr-radius-lg: 16px;
    --sr-radius-xl: 24px;
    --sr-radius-full: 9999px;
    --sr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sr-transition-fast: all 0.15s ease;
}

/* ============================================
   PARENT THEME OVERRIDES - AGGRESSIVE
   These override the sports-lite theme's inline styles
   ============================================ */

body.wp-theme-sports-lite,
body.theme-sports-lite {
    background: #0a0a0f !important;
    background-color: #0a0a0f !important;
}

.wp-theme-sports-lite .mainmenu-left-area,
.theme-sports-lite .mainmenu-left-area,
.mainmenu-left-area {
    background: transparent !important;
    background-color: transparent !important;
}

.wp-theme-sports-lite .mainmenu-left-area::before,
.wp-theme-sports-lite .mainmenu-left-area::after,
.theme-sports-lite .mainmenu-left-area::before,
.theme-sports-lite .mainmenu-left-area::after,
.mainmenu-left-area::before,
.mainmenu-left-area::after {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.wp-theme-sports-lite .hdr_sitemenu,
.theme-sports-lite .hdr_sitemenu,
.hdr_sitemenu {
    background: transparent !important;
    background-color: transparent !important;
}

.wp-theme-sports-lite .site-navigation .menu ul,
.theme-sports-lite .site-navigation .menu ul,
.site-navigation .menu ul {
    background: rgba(18, 18, 26, 0.98) !important;
    background-color: rgba(18, 18, 26, 0.98) !important;
}

/* Override all red (#e21e22) backgrounds */
[style*="background-color:#e21e22"],
[style*="background-color: #e21e22"],
[style*="background:#e21e22"],
[style*="background: #e21e22"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--sr-bg-dark) !important;
    color: var(--sr-gray-200) !important;
    line-height: 1.7 !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(244, 63, 94, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--sr-white) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

a {
    color: var(--sr-primary-light);
    text-decoration: none;
    transition: var(--sr-transition);
}

a:hover {
    color: var(--sr-accent-light);
}

/* ============================================
   SITE LAYOUT CONTAINER
   ============================================ */

#site-layout-type {
    background: transparent !important;
}

.container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ============================================
   HEADER - SLEEK GLASSMORPHISM
   ============================================ */

.site-header,
.site-header.siteinner {
    background: rgba(10, 10, 15, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0 !important;
}

.hdr_contactdetails {
    padding: 16px 0 !important;
    background: transparent !important;
}

.hdr_leftstyle {
    display: flex !important;
    align-items: center !important;
}

/* Logo Styling */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.logo img,
.custom-logo,
.custom-logo-link img {
    max-height: 60px !important;
    width: auto !important;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3)) !important;
    transition: var(--sr-transition) !important;
}

.logo img:hover,
.custom-logo:hover {
    filter: drop-shadow(0 6px 20px rgba(99, 102, 241, 0.5)) !important;
    transform: scale(1.02) !important;
}

.logo h1,
.logo h1 a {
    font-size: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* ============================================
   NAVIGATION - MODERN FLOATING STYLE
   ============================================ */

.hdr_sitemenu {
    background: transparent !important;
    padding: 0 !important;
}

.mainmenu-left-area {
    background: transparent !important;
    padding: 0 !important;
}

.mainmenu-left-area::before,
.mainmenu-left-area::after {
    display: none !important;
}

#mainnavigator {
    width: 100% !important;
}

.site-navigation,
.site-navigation.primary-navigation,
#main-navigation {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 8px 24px !important;
    margin: 12px auto 16px !important;
    width: calc(100% - 48px) !important;
    max-width: 1052px !important;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Make mainmenu-left-area match content width */
.mainmenu-left-area {
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.site-navigation ul,
.site-navigation .menu,
.primary-menu,
#primary {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.site-navigation ul li,
.site-navigation .menu li,
.primary-menu > li,
#primary > li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
}

.site-navigation ul li a,
.site-navigation .menu li a,
.primary-menu > li > a,
#primary > li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    color: var(--sr-gray-200) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: var(--sr-radius-full) !important;
    transition: var(--sr-transition) !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.site-navigation ul li a:hover,
.site-navigation .menu li a:hover,
.primary-menu > li > a:hover,
#primary > li > a:hover {
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

.site-navigation ul li.current-menu-item > a,
.site-navigation ul li.current_page_item > a,
.primary-menu > li.current-menu-item > a {
    color: var(--sr-white) !important;
    background: var(--sr-gradient-primary) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
}

/* Dropdown Menus */
.site-navigation ul li ul,
.site-navigation .menu ul,
.primary-menu .sub-menu,
#primary .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    min-width: 200px !important;
    background: rgba(18, 18, 26, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-md) !important;
    padding: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: var(--sr-transition) !important;
    box-shadow: var(--sr-shadow-lg) !important;
    z-index: 1000 !important;
    display: block !important;
    flex-direction: column !important;
}

.site-navigation ul li:hover > ul,
.site-navigation .menu li:hover > ul,
.primary-menu > li:hover > .sub-menu,
#primary > li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

.site-navigation ul li ul li,
.sub-menu li {
    width: 100% !important;
    margin: 0 !important;
}

.site-navigation ul li ul li a,
.sub-menu li a {
    display: block !important;
    padding: 10px 16px !important;
    color: var(--sr-gray-300) !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--sr-radius-sm) !important;
}

.site-navigation ul li ul li a:hover,
.sub-menu li a:hover {
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none !important;
    background: var(--sr-gradient-primary) !important;
    color: var(--sr-white) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--sr-radius-full) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--sr-transition) !important;
}

.menu-toggle:hover {
    transform: scale(1.02) !important;
    box-shadow: var(--sr-shadow-glow) !important;
}

@media (max-width: 992px) {
    .menu-toggle {
        display: block !important;
        margin: 12px auto !important;
    }
    
    .site-navigation,
    #main-navigation {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 16px !important;
        right: 16px !important;
        border-radius: var(--sr-radius-lg) !important;
        padding: 16px !important;
        max-width: none !important;
    }
    
    .site-navigation[aria-expanded="true"],
    #main-navigation[aria-expanded="true"],
    .site-navigation.toggled,
    #main-navigation.toggled {
        display: block !important;
    }
    
    .site-navigation ul,
    .primary-menu,
    #primary {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .site-navigation ul li,
    .primary-menu > li,
    #primary > li {
        width: 100% !important;
    }
    
    .site-navigation ul li a,
    .primary-menu > li > a,
    #primary > li > a {
        justify-content: center !important;
        width: 100% !important;
    }
    
    .site-navigation ul li ul,
    .sub-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 4px !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.site-content,
#content,
.content-area,
main,
.site-main {
    background: transparent !important;
    padding: 40px 20px !important;
    min-height: 60vh !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.entry-content,
.page-content,
.post-content {
    background: transparent !important;
}

/* Page Titles */
.entry-title,
.page-title,
h1.entry-title,
main h1 {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    color: var(--sr-white) !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    position: relative !important;
    padding-bottom: 20px !important;
}

.entry-title::after,
.page-title::after,
main h1::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    background: var(--sr-gradient-primary) !important;
    border-radius: var(--sr-radius-full) !important;
}

/* Content Cards */
.wp-block-group,
.wp-block-column,
article,
.hentry {
    background: rgba(18, 18, 26, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    transition: var(--sr-transition) !important;
}

.wp-block-group:hover,
article:hover {
    border-color: rgba(99, 102, 241, 0.2) !important;
    box-shadow: var(--sr-shadow-glow) !important;
}

/* ============================================
   HOMEPAGE HERO SECTION
   ============================================ */

.home .site-content,
.page-id-52 .site-content {
    padding-top: 0 !important;
}

.home .entry-content,
.page-id-52 .entry-content {
    background: var(--sr-gradient-hero) !important;
    padding: 80px 40px !important;
    border-radius: 0 0 var(--sr-radius-xl) var(--sr-radius-xl) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 40px !important;
}

.home .entry-content::before,
.page-id-52 .entry-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(244, 63, 94, 0.15) 0%, transparent 40%) !important;
    pointer-events: none !important;
}

.home .entry-content h1,
.page-id-52 .entry-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    margin-bottom: 24px !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.home .entry-content p,
.page-id-52 .entry-content p {
    font-size: 1.25rem !important;
    color: var(--sr-gray-300) !important;
    max-width: 600px !important;
    margin: 0 auto 32px !important;
}

/* ============================================
   BUTTONS - BOLD & MODERN
   ============================================ */

button,
input[type="submit"],
input[type="button"],
.button,
.btn,
.wp-block-button__link,
a.blogreadmore,
.blogreadbtn,
.nivo-caption .slide_morebtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--sr-white) !important;
    background: var(--sr-gradient-primary) !important;
    border: none !important;
    border-radius: var(--sr-radius-full) !important;
    cursor: pointer !important;
    transition: var(--sr-transition) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

button::before,
input[type="submit"]::before,
.button::before,
.btn::before,
.wp-block-button__link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: 0.5s !important;
}

button:hover::before,
input[type="submit"]:hover::before,
.button:hover::before,
.btn:hover::before,
.wp-block-button__link:hover::before {
    left: 100% !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.btn:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5) !important;
}

/* Secondary/Outline Buttons */
.btn-secondary,
.button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--sr-primary) !important;
    color: var(--sr-primary-light) !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--sr-primary) !important;
    color: var(--sr-white) !important;
    box-shadow: var(--sr-shadow-glow) !important;
}

/* ============================================
   FORMS - SLEEK DARK STYLE
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    width: 100% !important;
    padding: 16px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: var(--sr-white) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-md) !important;
    transition: var(--sr-transition) !important;
    outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--sr-primary) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--sr-gray-500) !important;
}

label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: var(--sr-gray-300) !important;
    font-size: 14px !important;
}

fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    background: transparent !important;
}

/* ============================================
   TABLES - MODERN DATA DISPLAY
   ============================================ */

table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(18, 18, 26, 0.6) !important;
    border-radius: var(--sr-radius-lg) !important;
    overflow: hidden !important;
    margin: 24px 0 !important;
}

thead {
    background: var(--sr-gradient-primary) !important;
}

th {
    padding: 16px 20px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--sr-white) !important;
    text-align: left !important;
}

td {
    padding: 16px 20px !important;
    font-size: 14px !important;
    color: var(--sr-gray-200) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}

tr:last-child td {
    border-bottom: none !important;
}

tbody tr {
    transition: var(--sr-transition) !important;
}

tbody tr:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}

/* Rankings Table Special Styling - ONLY for ranking tables, not predictions */
.fp-ranking-table tbody tr:nth-child(1),
.rankings-page table tbody tr:nth-child(1),
.page-rankings table tbody tr:nth-child(1) {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, transparent 100%) !important;
}

.fp-ranking-table tbody tr:nth-child(2),
.rankings-page table tbody tr:nth-child(2),
.page-rankings table tbody tr:nth-child(2) {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.15) 0%, transparent 100%) !important;
}

.fp-ranking-table tbody tr:nth-child(3),
.rankings-page table tbody tr:nth-child(3),
.page-rankings table tbody tr:nth-child(3) {
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.15) 0%, transparent 100%) !important;
}

/* ============================================
   FOOTBALL POOL PLUGIN STYLES
   ============================================ */

.football-pool,
.fp-container {
    background: transparent !important;
}

.football-pool-predictions-table {
    background: rgba(18, 18, 26, 0.8) !important;
    border-radius: var(--sr-radius-lg) !important;
    overflow: hidden !important;
}

.football-pool-predictions-table th {
    background: var(--sr-gradient-primary) !important;
    color: var(--sr-white) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 16px !important;
}

.football-pool-predictions-table td {
    background: transparent !important;
    color: var(--sr-gray-200) !important;
    padding: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.football-pool-predictions-table .team-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

.football-pool-predictions-table .team-container img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.football-pool-predictions-table .prediction-input,
.prediction-input {
    width: 60px !important;
    height: 48px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.15) !important;
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
    border-radius: var(--sr-radius-md) !important;
    transition: var(--sr-transition) !important;
}

.prediction-input:focus {
    border-color: var(--sr-primary) !important;
    background: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

/* Override inline styles from football-pool plugin */
/* Remove ALL borders from table cells - border will be on TR instead */
table tbody td[style*="border"],
table tbody td[style*="padding"],
.fp-prediction-form table tbody td[style],
.football-pool table tbody td[style],
table tbody td {
    border: none !important;
}

/* Apply border to TR (row) instead of individual TD cells for consistent line */
table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Override inline background colors on table rows */
table tbody tr[style*="background"],
.fp-prediction-form table tbody tr[style],
.football-pool table tbody tr[style] {
    background: transparent !important;
}

/* Light theme overrides for inline styles */
body.light-theme table tbody td[style*="border"],
body.light-theme table tbody td[style*="padding"],
body.light-theme .fp-prediction-form table tbody td[style],
body.light-theme .football-pool table tbody td[style],
html.light-theme table tbody td[style*="border"],
html.light-theme table tbody td[style*="padding"],
body.light-theme table tbody td,
html.light-theme table tbody td {
    border: none !important;
}

/* Light theme - border on TR for consistent line */
body.light-theme table tbody tr,
html.light-theme table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme table tbody tr[style*="background"],
body.light-theme .fp-prediction-form table tbody tr[style],
body.light-theme .football-pool table tbody tr[style],
html.light-theme table tbody tr[style*="background"] {
    background: transparent !important;
}

/* Mobile Match Cards */
.match-card {
    background: rgba(18, 18, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    transition: var(--sr-transition) !important;
}

.match-card:hover {
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: var(--sr-shadow-glow) !important;
}

.match-header {
    text-align: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.match-date {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sr-primary-light) !important;
}

.competition-name {
    font-size: 12px !important;
    color: var(--sr-gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================
   LOGIN & REGISTRATION FORMS
   ============================================ */

.wpum-form,
.wpum-login-form,
.wpum-registration-form,
#loginform,
.login-form,
form {
    max-width: 480px !important;
    margin: 0 auto !important;
    background: rgba(18, 18, 26, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-xl) !important;
    padding: 48px 40px !important;
    box-shadow: var(--sr-shadow-lg) !important;
}

.wpum-form h2,
.login-form h2,
form h1 {
    text-align: center !important;
    margin-bottom: 32px !important;
    font-size: 28px !important;
}

.wpum-form .fieldset-wrapper,
.wpum-form fieldset,
form fieldset {
    margin-bottom: 20px !important;
    background: transparent !important;
    padding: 0 !important;
}

.wpum-form input[type="submit"],
.login-form input[type="submit"],
form input[type="submit"] {
    width: 100% !important;
    margin-top: 16px !important;
}

/* Social Login Buttons */
.nsl-container {
    margin: 24px 0 !important;
}

.nsl-container .nsl-button {
    border-radius: var(--sr-radius-md) !important;
    transition: var(--sr-transition) !important;
}

.nsl-container .nsl-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sr-shadow-md) !important;
}

.nsl-container .nsl-button-google {
    background: var(--sr-white) !important;
}

.nsl-container .nsl-button-facebook {
    background: #1877f2 !important;
}

/* WPUM Action Links */
.wpum-action-links {
    text-align: center !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.wpum-action-links a {
    color: var(--sr-primary-light) !important;
    font-size: 14px !important;
}

.wpum-action-links a:hover {
    color: var(--sr-accent-light) !important;
}

/* ============================================
   FOOTER - ELEGANT DARK
   ============================================ */

footer,
.site-footer,
#colophon {
    background: linear-gradient(180deg, var(--sr-bg-dark) 0%, #050508 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 48px 0 24px !important;
    margin-top: 60px !important;
}

.site-footer .container {
    text-align: center !important;
}

.site-footer,
.site-footer p,
.site-footer a,
footer,
footer p {
    color: var(--sr-gray-500) !important;
    font-size: 14px !important;
}

.site-footer a:hover,
footer a:hover {
    color: var(--sr-primary-light) !important;
}

/* Footer Navigation */
.site-footer nav,
.site-footer .footer-navigation,
footer nav,
footer ul {
    margin-bottom: 24px !important;
}

.site-footer nav ul,
footer nav ul,
footer ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-footer nav ul li a,
footer nav ul li a,
footer ul li a {
    display: inline-block !important;
    padding: 8px 16px !important;
    color: var(--sr-gray-400) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: var(--sr-radius-full) !important;
    transition: var(--sr-transition) !important;
}

.site-footer nav ul li a:hover,
footer nav ul li a:hover,
footer ul li a:hover {
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

/* Hide footer submenus - they should not display inline */
.site-footer ul ul,
.site-footer nav ul ul,
footer ul ul,
footer nav ul ul,
#colophon ul ul {
    display: none !important;
}

/* Hide dropdown toggle buttons in footer */
.site-footer .dropdown-toggle,
footer .dropdown-toggle,
#colophon .dropdown-toggle {
    display: none !important;
}

/* Ensure footer menu items with submenus don't show dropdown arrow */
.site-footer li.menu-item-has-children > a::after,
footer li.menu-item-has-children > a::after,
#colophon li.menu-item-has-children > a::after {
    display: none !important;
}

/* Copyright */
.site-info,
.copyright {
    color: var(--sr-gray-600) !important;
    font-size: 13px !important;
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */

.alert,
.notice,
.message,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 16px 20px !important;
    border-radius: var(--sr-radius-md) !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.alert-success,
.woocommerce-message {
    background: rgba(16, 185, 129, 0.15) !important;
    border-left: 4px solid var(--sr-success) !important;
    color: var(--sr-success) !important;
}

.alert-error,
.woocommerce-error {
    background: rgba(244, 63, 94, 0.15) !important;
    border-left: 4px solid var(--sr-accent) !important;
    color: var(--sr-accent-light) !important;
}

.alert-info,
.woocommerce-info {
    background: rgba(99, 102, 241, 0.15) !important;
    border-left: 4px solid var(--sr-primary) !important;
    color: var(--sr-primary-light) !important;
}

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

.pagination,
.nav-links,
.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 40px 0 !important;
}

.pagination a,
.page-numbers a,
.page-numbers span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sr-gray-300) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-md) !important;
    transition: var(--sr-transition) !important;
}

.pagination a:hover,
.page-numbers a:hover {
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--sr-primary) !important;
}

.pagination .current,
.page-numbers.current {
    color: var(--sr-white) !important;
    background: var(--sr-gradient-primary) !important;
    border-color: transparent !important;
}

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

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sr-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--sr-gray-700);
    border-radius: var(--sr-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sr-gray-600);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-primary { color: var(--sr-primary-light) !important; }
.text-accent { color: var(--sr-accent-light) !important; }
.text-gold { color: var(--sr-gold) !important; }
.text-success { color: var(--sr-success) !important; }
.text-muted { color: var(--sr-gray-500) !important; }

.bg-primary { background: var(--sr-gradient-primary) !important; }
.bg-accent { background: var(--sr-gradient-accent) !important; }
.bg-card { background: var(--sr-bg-card) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }
.mt-5 { margin-top: 48px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }
.mb-5 { margin-bottom: 48px !important; }

.rounded { border-radius: var(--sr-radius-md) !important; }
.rounded-lg { border-radius: var(--sr-radius-lg) !important; }
.rounded-xl { border-radius: var(--sr-radius-xl) !important; }
.rounded-full { border-radius: var(--sr-radius-full) !important; }

.shadow { box-shadow: var(--sr-shadow-md) !important; }
.shadow-lg { box-shadow: var(--sr-shadow-lg) !important; }
.shadow-glow { box-shadow: var(--sr-shadow-glow) !important; }

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

@media (max-width: 768px) {
    body {
        font-size: 15px !important;
    }
    
    .container {
        padding: 0 16px !important;
    }
    
    .entry-title,
    .page-title {
        font-size: 1.75rem !important;
    }
    
    .wp-block-group,
    article {
        padding: 20px !important;
    }
    
    .wpum-form,
    .login-form,
    form {
        padding: 32px 24px !important;
        margin: 0 16px !important;
    }
    
    table {
        font-size: 13px !important;
    }
    
    th, td {
        padding: 12px !important;
    }
    
    footer {
        padding: 32px 0 16px !important;
    }
    
    .home .entry-content,
    .page-id-52 .entry-content {
        padding: 40px 20px !important;
    }
}

@media (max-width: 480px) {
    .site-navigation ul li a,
    .primary-menu > li > a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    button,
    input[type="submit"],
    .button,
    .btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   FOOTBALL POOL PLUGIN - AGGRESSIVE OVERRIDES
   These ensure dark theme on all plugin tables
   ============================================ */

/* Force dark background on ALL table elements */
.entry-content table,
.page-content table,
.site-main table,
main table,
form table,
.football-pool table,
.fp-container table,
table.fp-ranking,
table.fp-predictions,
table.fp-results,
table.widefat,
.wp-block-table table {
    background: rgba(18, 18, 26, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--sr-radius-lg) !important;
    overflow: hidden !important;
}

/* Force dark background on ALL table rows */
.entry-content table tbody tr,
.page-content table tbody tr,
.site-main table tbody tr,
main table tbody tr,
form table tbody tr,
.football-pool table tbody tr,
table.fp-ranking tbody tr,
table.fp-predictions tbody tr,
table.fp-results tbody tr,
table tbody tr {
    background: rgba(18, 18, 26, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Alternating row colors for better readability */
.entry-content table tbody tr:nth-child(even),
.page-content table tbody tr:nth-child(even),
.site-main table tbody tr:nth-child(even),
main table tbody tr:nth-child(even),
form table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: rgba(24, 24, 35, 0.9) !important;
}

/* Hover effect on rows */
.entry-content table tbody tr:hover,
.page-content table tbody tr:hover,
.site-main table tbody tr:hover,
main table tbody tr:hover,
form table tbody tr:hover,
table tbody tr:hover {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* Force dark background on ALL table cells */
.entry-content table td,
.page-content table td,
.site-main table td,
main table td,
form table td,
.football-pool table td,
table.fp-ranking td,
table.fp-predictions td,
table.fp-results td,
table td {
    background: transparent !important;
    color: var(--sr-gray-200) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle !important;
}

/* Force gradient header on ALL table headers */
.entry-content table thead,
.page-content table thead,
.site-main table thead,
main table thead,
form table thead,
.football-pool table thead,
table.fp-ranking thead,
table.fp-predictions thead,
table.fp-results thead,
table thead {
    background: var(--sr-gradient-primary) !important;
}

/* Override inline styles on thead tr - the plugin adds background-color: #f4f4f4 inline */
table thead tr,
table thead tr[style],
thead tr,
thead tr[style],
.entry-content table thead tr,
.page-content table thead tr,
form table thead tr,
table thead > tr {
    background: var(--sr-gradient-primary) !important;
    background-color: transparent !important;
}

.entry-content table th,
.page-content table th,
.site-main table th,
main table th,
form table th,
.football-pool table th,
table.fp-ranking th,
table.fp-predictions th,
table.fp-results th,
table th {
    background: transparent !important;
    color: var(--sr-white) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 12px !important;
    padding: 14px 16px !important;
}

/* Prediction inputs in tables */
table input[type="number"],
.fp-predictions input[type="number"],
form table input[type="number"] {
    width: 55px !important;
    height: 42px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--sr-white) !important;
    background: rgba(99, 102, 241, 0.2) !important;
    border: 2px solid rgba(99, 102, 241, 0.4) !important;
    border-radius: var(--sr-radius-md) !important;
    transition: var(--sr-transition) !important;
}

table input[type="number"]:focus,
.fp-predictions input[type="number"]:focus,
form table input[type="number"]:focus {
    border-color: var(--sr-primary) !important;
    background: rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

/* Team logos in tables - centered above team name */
table td img,
.fp-predictions td img,
.fp-results td img,
form table td img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Team cells - stack logo and name vertically */
.entry-content table td:nth-child(3),
.entry-content table td:nth-child(5),
form table td:nth-child(3),
form table td:nth-child(5),
.team-container {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Competition Stats section */
h4,
.entry-content h4,
.page-content h4 {
    color: var(--sr-white) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    margin: 32px 0 16px !important;
}

/* Filter dropdowns */
.entry-content select,
.page-content select,
form select,
select[name="competition"],
select[name="round"],
select[name="week"] {
    background: rgba(18, 18, 26, 0.95) !important;
    color: var(--sr-gray-200) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--sr-radius-md) !important;
    padding: 10px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    min-width: 180px !important;
    cursor: pointer !important;
}

.entry-content select:focus,
.page-content select:focus,
form select:focus {
    border-color: var(--sr-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Filter labels */
.entry-content label,
.page-content label,
form label {
    color: var(--sr-gray-300) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
}

/* Form containers */
.entry-content form,
.page-content form {
    background: rgba(18, 18, 26, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

/* Load more button */
button[type="button"],
.entry-content button[type="button"],
form button[type="button"] {
    background: var(--sr-gradient-primary) !important;
    color: var(--sr-white) !important;
    border: none !important;
    border-radius: var(--sr-radius-full) !important;
    padding: 12px 28px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: var(--sr-transition) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important;
}

button[type="button"]:hover,
.entry-content button[type="button"]:hover,
form button[type="button"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4) !important;
}

/* Rankings - Top 3 special styling - ONLY for ranking tables, not predictions */
.fp-ranking-table tbody tr:first-child td,
.fp-ranking tbody tr:first-child td,
.rankings-page table tbody tr:first-child td,
.page-rankings table tbody tr:first-child td {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.2) 0%, transparent 100%) !important;
}

.fp-ranking-table tbody tr:nth-child(2) td,
.fp-ranking tbody tr:nth-child(2) td,
.rankings-page table tbody tr:nth-child(2) td,
.page-rankings table tbody tr:nth-child(2) td {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 100%) !important;
}

.fp-ranking-table tbody tr:nth-child(3) td,
.fp-ranking tbody tr:nth-child(3) td,
.rankings-page table tbody tr:nth-child(3) td,
.page-rankings table tbody tr:nth-child(3) td {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, transparent 100%) !important;
}

/* Strong/bold text in tables */
table td strong,
table td b {
    color: var(--sr-white) !important;
    font-weight: 600 !important;
}

/* Article/entry wrappers */
article,
.hentry,
.entry-content,
.page-content {
    background: transparent !important;
}

/* Remove any white backgrounds from WordPress blocks */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    background: transparent !important;
}

/* Stats container and summary sections - fix white backgrounds */
.stats-container,
.user-points-summary,
.competition-stats,
div[class*="stats"],
div[class*="summary"] {
    background: rgba(18, 18, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 20px !important;
    color: var(--sr-gray-200) !important;
}

.stats-container h4,
.user-points-summary h4,
.competition-stats h4,
div[class*="stats"] h4,
div[class*="summary"] h4 {
    color: var(--sr-white) !important;
    margin-bottom: 16px !important;
}

.stats-container p,
.user-points-summary p,
.competition-stats p,
div[class*="stats"] p,
div[class*="summary"] p {
    color: var(--sr-gray-300) !important;
}

/* Rankings page container */
.rankings-page-container {
    background: transparent !important;
}

/* ============================================
   PREDICTIONS PAGE - FULL WIDTH LAYOUT
   ============================================ */

/* Make predictions container use full width */
.predictions-container,
.filters-container,
.football-pool-filter-form,
div[class*="predictions"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Make the table use full width */
.predictions-container table,
.entry-content form table,
form table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* Ensure entry-content uses full width */
.entry-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make forms inside entry-content full width */
.entry-content > form,
.entry-content form.football-pool-filter-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix the article/hentry container to use full width */
article.page,
article.hentry,
.hentry {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure site-main content area is properly sized */
.site-main .entry-content,
main .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Table columns - give more space to team names */
.entry-content table th,
.entry-content table td,
form table th,
form table td {
    white-space: nowrap !important;
}

.entry-content table th:nth-child(3),
.entry-content table td:nth-child(3),
.entry-content table th:nth-child(5),
.entry-content table td:nth-child(5),
form table th:nth-child(3),
form table td:nth-child(3),
form table th:nth-child(5),
form table td:nth-child(5) {
    min-width: 150px !important;
    white-space: normal !important;
}

/* Prediction input cells */
.entry-content table td:nth-child(4),
form table td:nth-child(4),
.prediction-container {
    min-width: 120px !important;
    text-align: center !important;
}

/* Score input fields */
input[type="number"][name*="home_score"],
input[type="number"][name*="away_score"],
.entry-content input[type="number"],
form input[type="number"] {
    width: 50px !important;
    padding: 8px 4px !important;
    text-align: center !important;
    background: rgba(18, 18, 26, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--sr-radius-sm) !important;
    color: var(--sr-white) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

input[type="number"]:focus {
    border-color: var(--sr-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

/* Remove spinner buttons from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ============================================
   RESULTS PAGE - USER POINTS SUMMARY FIX
   ============================================ */

/* User Points Summary container - full width dark background */
.user-points-summary {
    background: rgba(18, 18, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--sr-radius-lg) !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* User Points Summary heading */
.user-points-summary h4 {
    color: var(--sr-white) !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
}

/* User Points Summary table - full width, transparent background */
.user-points-summary table {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

/* User Points Summary table header */
.user-points-summary table thead tr {
    background: linear-gradient(135deg, var(--sr-primary) 0%, var(--sr-secondary) 100%) !important;
}

.user-points-summary table th {
    background: transparent !important;
    color: var(--sr-white) !important;
    padding: 12px 16px !important;
}

/* Results page - team cells with logo and name inline but aligned */
.entry-content table td:nth-child(3),
.entry-content table td:nth-child(5) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 200px !important;
}

/* Team logo in results table - fixed width for alignment */
.entry-content table td:nth-child(3) img,
.entry-content table td:nth-child(5) img {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .site-header,
    .site-footer,
    .site-navigation,
    button,
    .btn {
        display: none !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
}

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */

.theme-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10001 !important;
    cursor: pointer !important;
    outline: none !important;
}

.theme-toggle:focus-visible .theme-toggle-track {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4) !important;
}

.theme-toggle-track {
    position: relative !important;
    width: 56px !important;
    height: 28px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 6px !important;
}

.theme-toggle:hover .theme-toggle-track {
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.theme-toggle-icon {
    font-size: 12px !important;
    line-height: 1 !important;
    z-index: 1 !important;
    transition: opacity 0.3s ease !important;
}

.theme-toggle-icon.icon-sun {
    opacity: 0.4 !important;
}

.theme-toggle-icon.icon-moon {
    opacity: 1 !important;
}

.theme-toggle-thumb {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Light theme - thumb moves to left */
body.light-theme .theme-toggle-track,
html.light-theme .theme-toggle-track,
.light-theme .theme-toggle-track {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

body.light-theme .theme-toggle-icon.icon-sun,
html.light-theme .theme-toggle-icon.icon-sun,
.light-theme .theme-toggle-icon.icon-sun {
    opacity: 1 !important;
}

body.light-theme .theme-toggle-icon.icon-moon,
html.light-theme .theme-toggle-icon.icon-moon,
.light-theme .theme-toggle-icon.icon-moon {
    opacity: 0.4 !important;
}

body.light-theme .theme-toggle-thumb,
html.light-theme .theme-toggle-thumb,
.light-theme .theme-toggle-thumb {
    right: auto !important;
    left: 3px !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4) !important;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

body.light-theme {
    --sr-bg-dark: #f8fafc;
    --sr-bg-card: #ffffff;
    --sr-bg-card-hover: #f1f5f9;
    --sr-white: #0f172a;
    --sr-gray-100: #1e293b;
    --sr-gray-200: #334155;
    --sr-gray-300: #475569;
    --sr-gray-400: #64748b;
    --sr-gray-500: #94a3b8;
    --sr-gray-600: #cbd5e1;
    --sr-gray-700: #e2e8f0;
    --sr-gray-800: #f1f5f9;
    --sr-gray-900: #f8fafc;
}

body.light-theme {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
}

body.light-theme::before {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(244, 63, 94, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.02) 0%, transparent 70%) !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: #0f172a !important;
}

body.light-theme a {
    color: #6366f1 !important;
}

body.light-theme a:hover {
    color: #4f46e5 !important;
}

/* Light theme header */
body.light-theme .site-header,
body.light-theme .site-header.siteinner {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light theme navigation */
body.light-theme .site-navigation,
body.light-theme .site-navigation.primary-navigation,
body.light-theme #main-navigation {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .site-navigation ul li a,
body.light-theme .site-navigation .menu li a {
    color: #475569 !important;
}

body.light-theme .site-navigation ul li a:hover,
body.light-theme .site-navigation .menu li a:hover {
    color: #0f172a !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

body.light-theme .site-navigation ul li.current-menu-item > a,
body.light-theme .site-navigation ul li.current_page_item > a {
    color: #ffffff !important;
    background: var(--sr-gradient-primary) !important;
}

/* Light theme dropdown */
body.light-theme .site-navigation ul li ul,
body.light-theme .site-navigation .menu ul,
body.light-theme .sub-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .site-navigation ul li ul li a,
body.light-theme .sub-menu li a {
    color: #475569 !important;
}

body.light-theme .site-navigation ul li ul li a:hover,
body.light-theme .sub-menu li a:hover {
    color: #0f172a !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

/* Light theme content area */
body.light-theme .entry-content,
body.light-theme .page-content,
body.light-theme .post-content {
    background: transparent !important;
    color: #334155 !important;
}

/* Light theme cards and containers */
body.light-theme .card,
body.light-theme .glassmorphic-card,
body.light-theme .content-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light theme tables */
body.light-theme table {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme table thead tr {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

body.light-theme table thead th {
    color: #ffffff !important;
    background: transparent !important;
}

body.light-theme table tbody tr {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.light-theme table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

body.light-theme table tbody tr:hover {
    background: #f1f5f9 !important;
}

body.light-theme table td {
    color: #334155 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Light theme forms */
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #334155 !important;
}

body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

body.light-theme input::placeholder {
    color: #94a3b8 !important;
}

/* Light theme buttons - ensure white text on gradient background */
body.light-theme .btn,
body.light-theme button[type="submit"],
body.light-theme input[type="submit"],
body.light-theme .wp-block-button__link,
body.light-theme .wp-element-button,
body.light-theme a.wp-block-button__link,
body.light-theme .button,
body.light-theme a.blogreadmore,
body.light-theme .nivo-caption .slide_morebtn {
    background: var(--sr-gradient-primary) !important;
    color: #ffffff !important;
}

/* Light theme HTML and body background - prevent dark band below footer */
html.light-theme,
body.light-theme {
    background: #f0f4f8 !important;
    background-color: #f0f4f8 !important;
}

/* Create a pseudo-element to cover entire scrollable area in light theme */
body.light-theme::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 200vh;
    background: #f0f4f8 !important;
    z-index: -9999;
    pointer-events: none;
}

/* Ensure site layout fills entire document in light theme */
body.light-theme #site-layout-type,
html.light-theme #site-layout-type {
    background: #f0f4f8 !important;
    background-color: #f0f4f8 !important;
    min-height: 100% !important;
}

/* Fix any wrapper elements that might have dark backgrounds */
body.light-theme .site-wrapper,
body.light-theme .page-wrapper,
body.light-theme #page,
body.light-theme .site {
    background: #f0f4f8 !important;
    background-color: #f0f4f8 !important;
}

/* Light theme User Points Summary */
body.light-theme .user-points-summary {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .user-points-summary h4 {
    color: #0f172a !important;
}

/* Light theme filter forms */
body.light-theme .football-pool-filter-form,
body.light-theme form {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme label {
    color: #475569 !important;
}

/* Light theme footer */
body.light-theme .site-footer,
body.light-theme footer {
    background: #f1f5f9 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #475569 !important;
}

/* Light theme toggle switch - additional overrides if needed */

/* Light theme logo - make text visible by adding contrast filter */
body.light-theme .custom-logo,
body.light-theme .custom-logo-link img,
html.light-theme .custom-logo,
html.light-theme .custom-logo-link img {
    filter: brightness(0.6) contrast(1.2) !important;
}