/*
========================================
Global Styles & Variables
========================================
*/
/* Define a consistent color palette using CSS variables for easier theming */
:root {
    --brand-saffron: #e9c253;
    --brand-marian-blue: #3d3b8e;
    --brand-glaucous: #6883ba;
    --brand-thulian-pink: #e072a4;
    --brand-giants-orange: #ff521b;
    --brand-light-blue: #e9eff9;
    --brand-light-pink: #f7e9ed;
    --brand-light-yellow: #fff8e1;

    /* Default Badge Style */
    --badge-bg: var(--brand-glaucous);
    --badge-text: #fff;

    /* Bootstrap Theme Overrides - Hex */
    --bs-primary: var(--brand-marian-blue);
    --bs-secondary: var(--brand-glaucous);
    --bs-success: #4caf50;
    --bs-info: var(--brand-light-blue);
    --bs-warning: var(--brand-saffron);
    --bs-danger: var(--brand-giants-orange);
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* Bootstrap Theme Overrides - RGB (Required for background-color utilities) */
    /* Marian Blue #3d3b8e */
    --bs-primary-rgb: 61, 59, 142;
    /* Glaucous #6883ba */
    --bs-secondary-rgb: 104, 131, 186;
    /* Success #4caf50 */
    --bs-success-rgb: 76, 175, 80;
    /* Light Blue #e9eff9 */
    --bs-info-rgb: 233, 239, 249;
    /* Saffron #e9c253 */
    --bs-warning-rgb: 233, 194, 83;
    /* Giants Orange #ff521b */
    --bs-danger-rgb: 255, 82, 27;
    /* Light #f8f9fa */
    --bs-light-rgb: 248, 249, 250;
    /* Dark #212529 */
    --bs-dark-rgb: 33, 37, 41;

    /* Theme variables - Light (Default) */
    --bg-primary: #f8f9fa;
    --bg-secondary: #fff;
    --text-primary: #353535;
    --text-secondary: #6c757d;
    --card-bg: #fff;
    --border-color: rgba(0, 0, 0, 0.1);
    --input-bg: #fff;
    --input-text: #353535;
}

/* Dark Mode Overrides */
.dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --card-bg: #242424;
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #333;
    --input-text: #f8f9fa;

    /* Adjust accent backgrounds for dark mode */
    --brand-light-blue: #1e2a44;
    --brand-light-pink: #441e30;
    --brand-light-yellow: #44401e;
    --brand-marian-blue: #8988dd;
}

body {
    font-family: Poppins, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary) !important;
    padding-top: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}


body.goose-cursor-enabled {
    /* Custom Cursor enabled via Konami Code */
    cursor: url("../images/cursor.svg") 0 0, auto;
}

/* Custom Selection Highlight */
::selection {
    background-color: var(--brand-marian-blue);
    color: white;
}
::-moz-selection {
    background-color: var(--brand-marian-blue);
    color: white;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 18px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--brand-marian-blue);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-marian-blue);
}

/* Selection variants for interactive elements */
body.goose-cursor-enabled a,
body.goose-cursor-enabled button,
body.goose-cursor-enabled .cursor-pointer,
body.goose-cursor-enabled input,
body.goose-cursor-enabled select,
body.goose-cursor-enabled textarea,
body.goose-cursor-enabled [style*="cursor: pointer"] {
    cursor: url("../images/cursor-active.svg") 0 0, pointer !important;
}

.dark-mode ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

/* Override Bootstrap bg-light if it's explicitly used on body or other containers */
.dark-mode .bg-light,
.dark-mode.bg-light,
.dark-mode .bg-brand-glaucous,
.dark-mode.bg-brand-glaucous {
    background-color: var(--bg-primary) !important;
}

.dark-mode .bg-white {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

.dark-mode .card,
.dark-mode .filter-sidebar {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .filter-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .filter-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .filter-item.active {
    background-color: var(--brand-marian-blue) !important;
}

.dark-mode .offcanvas {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dark-mode .offcanvas-header {
    border-bottom-color: var(--border-color) !important;
}


/* Mascot styles removed in favor of SVG logo */

.content-container {
    overflow: hidden;
    z-index: 1;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: .5rem;
    padding: 1rem;
}

/* Normalize carousel image heights */
#entertainmentCarousel .carousel-item img {
    height: 500px;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 768px) {
    #entertainmentCarousel .carousel-item img {
        height: 300px;
    }
}

/* Marquee animation for the sponsor section */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    width: max-content;
    animation: marquee 30s linear infinite;
}

.static-sponsors {
    width: 100%;
    justify-content: center;
    animation: none;
}

/* Sponsor link and logo styles */
.sponsor-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.sponsor-link:hover {
    transform: scale(1.05);
}

.sponsor-logo {
    transition: opacity 0.2s ease-in-out;
}

.sponsor-link:hover .sponsor-logo {
    opacity: 0.85;
}

.map-fullscreen-page #map {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 0;
}

.map-fullscreen-page .navbar {
    position: relative;
    z-index: 1000;
}


/* Custom styles for the navbar */
.navbar {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1030;
}

/* Scroll to top button styles */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 1000;
    border: none;
    outline: none;
    background-color: var(--brand-giants-orange);
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

#scrollToTopBtn:hover {
    background-color: var(--brand-thulian-pink);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 1rem;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.theme-toggle-btn i {
    font-size: 1.1rem;
}

.dark-mode .theme-toggle-btn {
    color: var(--brand-saffron);
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Overrides for Navigation */
.dark-mode #main-navbar.bg-brand-marian-blue {
    background-color: #0d0d0d !important;
}

.dark-mode .dropdown-menu {
    background-color: #1a1a1a !important;
    border: 1px solid var(--border-color);
}

.dark-mode .mobile-bottom-nav {
    background-color: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode .mobile-nav-item {
    color: var(--text-primary);
}

.dark-mode .mobile-nav-item.active {
    color: var(--brand-saffron);
}

.dark-mode #gallery-nav {
    background-color: #1e1e1e !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.dark-mode .segmented-toggle {
    background: rgba(255, 255, 255, 0.05);
}

/* Form elements in dark mode */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--input-text);
}

.dark-mode .form-control:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--brand-glaucous);
}


/* Custom class for a new green background */
/* Brand Background Utilities */
.bg-brand-marian-blue { background-color: var(--brand-marian-blue) !important; color: white !important; }
.bg-brand-glaucous { background-color: var(--brand-glaucous) !important; color: white !important; }
.bg-brand-thulian-pink { background-color: var(--brand-thulian-pink) !important; color: white !important; }
.bg-brand-saffron { background-color: var(--brand-saffron) !important; color: var(--brand-marian-blue) !important; }
.bg-brand-giants-orange { background-color: var(--brand-giants-orange) !important; color: white !important; }
.bg-brand-light-blue { background-color: var(--brand-light-blue) !important; color: var(--brand-marian-blue) !important; }
.bg-brand-light-pink { background-color: var(--brand-light-pink) !important; color: var(--brand-marian-blue) !important; }
.bg-brand-light-yellow { background-color: var(--brand-light-yellow) !important; color: var(--brand-marian-blue) !important; }

/* Tag Specific Brand Backgrounds */
.bg-brand-vegetarian { background-color: #2e7d32 !important; color: white !important; }
.bg-brand-main-course { background-color: var(--brand-marian-blue) !important; color: white !important; }
.bg-brand-cakes { background-color: var(--brand-thulian-pink) !important; color: white !important; }
.bg-brand-deserts { background-color: #8e24aa !important; color: white !important; }
.bg-brand-pizzas { background-color: #bf360c !important; color: white !important; }
.bg-brand-burgers { background-color: #795548 !important; color: white !important; }
.bg-brand-churros { background-color: #ff8f00 !important; color: white !important; }
.bg-brand-mexican { background-color: #d32f2f !important; color: white !important; }
.bg-brand-ice-cream { background-color: #00acc1 !important; color: white !important; }
.bg-brand-beer { background-color: var(--brand-saffron) !important; color: var(--brand-marian-blue) !important; }
.bg-brand-drinks { background-color: #03a9f4 !important; color: white !important; }
.bg-brand-music { background-color: var(--brand-glaucous) !important; color: white !important; }
.bg-brand-shows { background-color: var(--brand-giants-orange) !important; color: white !important; }
.bg-brand-kids { background-color: #ba68c8 !important; color: white !important; }
.bg-brand-free { background-color: #00796b !important; color: white !important; }
.bg-brand-rides { background-color: #f4511e !important; color: white !important; }
.bg-brand-games { background-color: #9ebc3a !important; color: var(--brand-marian-blue) !important; }
.bg-brand-sports { background-color: #1a237e !important; color: white !important; }
.bg-brand-food-and-drink { background-color: #455a64 !important; color: white !important; }

/* Consolidated Food Tags */
.bg-brand-mains { background-color: var(--brand-marian-blue) !important; color: white !important; }
.bg-brand-desserts { background-color: var(--brand-thulian-pink) !important; color: white !important; }
.bg-brand-charity { background-color: #e53935 !important; color: white !important; }
.bg-brand-sweets { background-color: #f06292 !important; color: white !important; }
.bg-brand-crafts { background-color: #fb8c00 !important; color: white !important; }
.bg-brand-community { background-color: #3949ab !important; color: white !important; }
.bg-brand-nature { background-color: #43a047 !important; color: white !important; }
.bg-brand-local-business { background-color: var(--brand-marian-blue) !important; color: white !important; }



/* Dark Mode Overrides for Brand Backgrounds */
.dark-mode .bg-brand-marian-blue { background-color: #0d0d0d !important; }
.dark-mode .bg-brand-glaucous { background-color: #1a2a44 !important; }
.dark-mode .bg-brand-thulian-pink { background-color: #3d1a2a !important; }
.dark-mode .bg-brand-saffron { background-color: #44401e !important; color: #e9c253 !important; }

/* Ensure text in brand backgrounds remains readable in dark mode */
.dark-mode .bg-brand-glaucous,
.dark-mode .bg-brand-thulian-pink,
.dark-mode .bg-brand-marian-blue {
    color: var(--text-primary) !important;
}


.navbar-nav .nav-link.active {
    color: var(--brand-saffron) !important;
    font-weight: bold;
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: var(--brand-saffron);
    border-radius: 2px;
}

/* Hide underline on collapsed navbar (narrow screens) */
@media (max-width: 767px) {
    .navbar-nav .nav-link.active::after {
        display: none;
    }
}

.dropdown-item.active {
    background-color: var(--brand-thulian-pink) !important;
    color: white !important;
    font-weight: bold;
}

/* Navbar Dropdown Styles */
.dropdown-menu {
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    /* Ensure the dropdown matches the visual style */
    background-color: var(--brand-marian-blue);
    border: none;
}

.dropdown-item {
    color: white;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-thulian-pink);
    color: white;
}

/* Navbar Centering and Countdown Fixes */
@media (min-width: 768px) {
    .navbar-collapse {
        position: relative;
    }

    .navbar-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        /* Ensure it doesn't wrap unnecessarily */
    }

    #countdown-timer {
        min-width: 280px;
        /* Reserve space to prevent resizing */
        text-align: right;
        display: inline-block;
        font-variant-numeric: tabular-nums;
        /* Monospaced numbers to reduce jitter */
    }
}


/* ========================================
   Bento Grid Styles
   ======================================== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns for mobile by default */
    gap: 0.75rem;
    /* Reduced gap for smaller screens */
    grid-auto-rows: minmax(160px, auto);
    /* Reduced min-height for smaller screens */
    grid-auto-flow: dense;
}

.bento-item {
    transition: transform 0.3s ease, background-size 0.3s ease-in-out, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 1.5rem; /* Increased padding slightly for better spacing */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px; /* Ensure minimum height for titles */
}

.day-tag {
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand-marian-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.7rem;
    z-index: 5;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: fit-content;
    display: inline-flex;
    align-items: center;
}

.dark-mode .day-tag {
    background: rgba(0, 0, 0, 0.85);
    color: white;
}

.bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.bento-item > * {
    position: relative;
    z-index: 2;
}


.bento-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.bento-item h4 {
    font-size: 1.5rem;
    /* Reduced font size for smaller screens */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.bento-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-item-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.bento-item-wide {
    grid-column: span 2;
    grid-row: span 1;
}

/* Add padding back to the bento container on larger screens */
.bento-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
    .bento-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .bento-grid {
        gap: 1rem;
        /* Restore gap for larger screens */
        grid-auto-rows: minmax(200px, auto);
        /* Restore min-height */
    }

    .bento-item {
        padding: 1.5rem;
        /* Restore padding */
    }

    .bento-item h4 {
        font-size: 1.75rem;
        /* Restore font size */
    }
}

/* Large screens (desktops) */
@media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        /* Four columns for desktops */
        grid-auto-rows: minmax(180px, auto);
    }

    .bento-item-large {
        grid-column: span 2;
        /* The large item spans 2 columns and 2 rows */
        grid-row: span 2;
    }

    .bento-item-tall {
        grid-column: span 1;
        /* Tall item is 1 column wide */
        grid-row: span 2;
        /* and 2 rows tall */
        min-height: auto;
    }
}

/* ========================================
   Gallery Specific Styles
   ======================================== */

/* Keyframes for the fade-in-up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Keyframes for the placeholder shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}


/* Thumbnail Container */
.gallery-img-container {
    /* Apply the animation */
    opacity: 0;
    /* Start hidden */
    animation: fadeInUp 0.5s ease-out forwards;
    animation-fill-mode: forwards;
    /* Add the shimmer effect as a background */
    background-color: #e0e0e0;
    background-image: linear-gradient(to right, #e0e0e0 0%, #f0f0f0 20%, #e0e0e0 40%, #e0e0e0 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation-name: fadeInUp, shimmer;
    animation-duration: 0.5s, 1.5s;
    animation-timing-function: ease-out, linear;
    animation-iteration-count: 1, infinite;
}

/* Thumbnail Image */
.gallery-img {
    /* Fade the image in when it loads */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.gallery-img.loaded {
    opacity: 1;
}

/* Styles for the new Gallery Scrollspy Nav */
#gallery-nav {
    top: 100px;
    /* Offset from the sticky top navbar */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#gallery-nav .nav-link {
    color: var(--brand-thulian-pink);
    font-weight: 500;
}

#gallery-nav .nav-link.active,
#gallery-nav .nav-link:hover {
    color: #fff;
    background-color: var(--brand-thulian-pink);
}

/* Style for the gallery download button */
.download-btn {
    background-color: var(--brand-glaucous);
    color: #fff;
    border: 1px solid var(--brand-glaucous);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border-radius: 0.375rem; /* Standard Bootstrap border-radius */
    padding: 0.375rem 0.75rem;
    font-weight: 600;
}

.download-btn:hover {
    background-color: var(--brand-marian-blue);
    border-color: var(--brand-marian-blue);
    color: #fff;
}

/* Hover scale effect for cards */
.hover-scale {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.02);
}



.section-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Brand Hover Utilities */
.hover-brand-saffron:hover {
    color: var(--brand-saffron) !important;
}

.transition-200 {
    transition: all 0.2s ease-in-out;
}

.transition-300 {
    transition: all 0.3s ease-in-out;
}

.text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.text-shadow-subtle {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.bg-gradient-dark-strong {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.group:hover .group-hover-darken {
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

.btn-white {
    background-color: #fff;
    color: var(--brand-marian-blue);
    border: none;
}

.btn-white:hover {
    background-color: #f8f9fa;
    transform: scale(1.1);
}

/* Sponsor Badge Styles */
.sponsor-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: auto;
}

.sponsor-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    margin-bottom: 4px;
    opacity: 0.9;
}

.sponsor-name-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sponsor-badge:hover .sponsor-name-container {
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

.sponsor-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-marian-blue);
    display: block;
    white-space: nowrap;
}

.dark-mode .sponsor-name-container {
    background: rgba(255, 255, 255, 0.85); /* Keep backgrounds light for contrast with dark brand blue */
}

.dark-mode .sponsor-logo-container {
    background: rgba(255, 255, 255, 0.85); /* Keep logo backgrounds mostly light for visibility */
}

/* ========================================
   Floating Scrollspy Sidebar
   ======================================== */
#scrollspy-sidebar {
    pointer-events: none; /* Let clicks through the container */
}

#scrollspy-sidebar .card {
    pointer-events: auto; /* Re-enable for the card itself */
}

.hover-bg-light:hover {
    background-color: rgba(var(--bs-light-rgb), 0.5);
}

.dark-mode .hover-bg-light:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Hide on screens smaller than 1800px (User preference) */
@media (max-width: 1800px) {
    #scrollspy-sidebar {
        display: none !important;
    }
}

.pointer-events-none {
    pointer-events: none;
}

.opacity-10 {
    opacity: 0.1;
}

body,
html {
    overflow-x: clip;
    width: 100%;
}

/* ========================================
   Mobile Bottom Navigation Styles (Floating & Centered)
   ======================================== */
.mobile-bottom-nav {
    /* Custom width constraints not covered by Bootstrap */
    width: 90%;
    max-width: 400px;
}

.mobile-nav-item {
    color: var(--brand-marian-blue);
    opacity: 0.6;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.mobile-nav-item i {
    font-size: 1.2rem;
}

.mobile-nav-item.active {
    color: var(--brand-thulian-pink);
    opacity: 1;
}

.mobile-nav-item.active i {
    color: var(--brand-thulian-pink);
}


/* Adjust body padding on mobile */
@media (max-width: 767px) {
    body {
        padding-bottom: 100px;
        /* Space for the floating nav and clearance */
    }

    #scrollToTopBtn {
        bottom: 95px;
        /* Above floating nav */
    }
}

/* ========================================
   Filter FAB & Sidebar Styles
   ======================================== */
.fab-filter {
    position: fixed;
    bottom: 95px; /* Above mobile bottom nav */
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--brand-marian-blue);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-filter:active {
    transform: scale(0.9);
}

/* Offcanvas tweaks */
.offcanvas-bottom {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    z-index: 1060 !important;
}

.offcanvas-backdrop {
    z-index: 1055 !important;
}

.btn-brand-marian-blue {
    background-color: var(--brand-marian-blue);
    color: white;
}

.btn-brand-marian-blue:hover {
    background-color: #0d2a4a;
    color: white;
}

/* Segmented Control - Minimal overrides for custom interaction */
.segmented-control .btn-outline-primary {
    border: none;
    color: var(--brand-marian-blue);
    font-weight: 600;
    transition: all 0.2s ease;
}

.segmented-control .btn-outline-primary:hover {
    background-color: rgba(61, 59, 142, 0.1);
}

.segmented-control .btn-check:checked + .btn-outline-primary {
    background-color: var(--brand-marian-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(61, 59, 142, 0.2);
}

.dark-mode .segmented-control .btn-outline-primary {
    color: var(--text-primary);
}

/* Ultra-Wide Screen Optimization */
@media (min-width: 1600px) {
    .container-xxl {
        max-width: 1540px !important;
    }
}

@media (min-width: 1900px) {
    .container-xxl {
        max-width: 1820px !important;
    }
}

.dark-mode .segmented-control .btn-check:checked + .btn-outline-primary {
    background-color: var(--brand-marian-blue);
    color: white;
}

/* ========================================
   Netflix-Style Horizontal Scroll
   ======================================== */
.horizontal-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 0.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-marian-blue) transparent;
    -webkit-overflow-scrolling: touch;
}

.horizontal-scroll-row::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll-row::-webkit-scrollbar-track {
    background: transparent;
}

.horizontal-scroll-row::-webkit-scrollbar-thumb {
    background: var(--brand-marian-blue);
    border-radius: 10px;
    opacity: 0.3;
}

.horizontal-scroll-item {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 1.5rem;
    transition: transform 0.3s ease;
}

.horizontal-scroll-item:hover {
    transform: translateY(-5px) scale(1.02);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.category-row h3 {
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 1.25rem;
    opacity: 0.9;
}

/* ========================================
   Site Rules Styles
   ======================================== */
.site-rules-container {
    background-color: var(--bg-secondary);
    border-radius: 50px;
    display: inline-flex;
    padding: 0.5rem 2rem;
    gap: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.rule-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rule-item i {
    color: var(--brand-giants-orange);
}

.dark-mode .site-rules-container {
    background-color: var(--card-bg);
}
/* Pulse animation for the ticket scarcity badge */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}