/**
 * Sezioni della pagina evento — foglio unico (task-935).
 * Era: dieci `@import` seriali in events.css (una richiesta ciascuno, in
 * catena). L'ordine dei blocchi e' quello degli import; ogni blocco e' il
 * vecchio file, con il suo nome nell'intestazione.
 */

/* ==================================================================
   sections/css/hero.css
   ================================================================== */
/**
 * Hero Section Styles - Matching Original 10km Design
 * Consistent with support app hero section
 */

/* ============================================
   CSS CUSTOM PROPERTIES & VARIABLES
   ============================================ */
:root {
    --hero-primary: #0a2540;
    --hero-secondary: #007bff;
    --hero-accent: #ffc107;
    --hero-accent-secondary: #17a2b8;
    --hero-success: #28a745;
    --hero-danger: #dc3545;
    --hero-info: #17a2b8;
    --hero-dark: #212529;
    --hero-light: #f8f9fa;
    --hero-white: var(--admin-white);
    --hero-gray-50: #f8f9fa;
    --hero-gray-100: #e9ecef;
    --hero-gray-200: #dee2e6;
    --hero-gray-300: #ced4da;
    --hero-gray-400: #adb5bd;
    --hero-gray-500: #6c757d;
    --hero-gray-600: #495057;
    --hero-gray-700: #343a40;

    /* Beautiful Gradient System */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, var(--admin-green-600) 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-forest: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --gradient-royal: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-ice: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);

    /* Hero shadows */
    --hero-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --hero-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --hero-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Hero radius */
    --hero-radius: 0.75rem;
    --hero-radius-lg: 1rem;
    --hero-radius-xl: 1.5rem;
    --hero-radius-2xl: 2rem;

    /* Navbar height variables */
    --navbar-height: 80px;
    --navbar-height-mobile: 70px;

    /* Typography */
    --hero-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hero-title-size: clamp(2.8rem, 7vw, 4.5rem);
    --hero-subtitle-size: clamp(1.1rem, 3vw, 1.4rem);
    --hero-body-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

/* ============================================
   HERO SECTION BASE
   ============================================ */
.hero-section {
    position: relative;
    /* Full viewport on every window size (task-994): vh → svh → dvh. */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(-1 * var(--navbar-height, 80px));
    padding-top: var(--navbar-height, 80px);
    padding-bottom: 2rem;
    color: var(--hero-white);
    font-family: var(--hero-font-family);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='waves' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,50 Q25,25 50,50 T100,50 V100 H0 Z' fill='%23ffffff' opacity='0.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23waves)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Event List Hero Section
   ========================================================================== */

.event-list-hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--bs-dark);
    color: var(--bs-light);
    overflow: hidden;
    margin-top: calc(-1 * var(--navbar-height, 80px)); /* Pull hero behind navbar */
    padding-top: var(--navbar-height, 80px); /* Add padding so content doesn't get hidden */
}

/* Background Elements
   ========================================================================== */

.event-list-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    z-index: 1;
}

.event-list-hero__bg--animated {
    animation: gradientShift 15s ease infinite;
    background: linear-gradient(120deg, #232526 0%, #1a1a2e 40%, #283e51 70%, #6a11cb 100%);
    background-size: 400% 400%;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}

/* Floating icons for hero background */
.event-list-hero__bg-icons {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}
.event-list-hero__bg-icon {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.12;
    color: var(--admin-white);
    animation: floatIcon 18s linear infinite;
}
@keyframes floatIcon {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.12; }
    50% { transform: translateY(-40px) scale(1.1) rotate(10deg); opacity: 0.18; }
    100% { transform: translateY(0) scale(1) rotate(-5deg); opacity: 0.12; }
}

.event-list-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Carousel
   ========================================================================== */

.event-list-hero__carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.event-list-hero__slide-img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

.swiper-slide:hover .event-list-hero__slide-img {
    filter: brightness(0.9);
}

.event-list-hero__slide-content {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* Content Container
   ========================================================================== */

.event-list-hero__container {
    position: relative;
    z-index: 3;
    padding: 4rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.event-list-hero__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Badge
   ========================================================================== */

.event-list-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.event-list-hero__badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.event-list-hero__badge-icon {
    font-size: 1.2em;
}

/* Typography
   ========================================================================== */

.event-list-hero__title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    background: linear-gradient(135deg, var(--admin-white) 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.event-list-hero__subtitle {
    color: var(--admin-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 1px 0 #222;
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.95;
    max-width: 800px;
    z-index: 4;
}

/* Stats Grid
   ========================================================================== */

.event-list-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.event-list-hero__stat-card {
    --stat-color: #4F46E5;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.event-list-hero__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--stat-color) 0%,
        transparent 80%
    );
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.event-list-hero__stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.event-list-hero__stat-card:hover::before {
    opacity: 0.15;
}

.event-list-hero__stat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.event-list-hero__stat-icon {
    font-size: 1.5rem;
    color: var(--stat-color);
    text-shadow: 0 0 15px rgba(var(--stat-color), 0.4);
}

.event-list-hero__stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--admin-white) 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0.25rem 0;
}

.event-list-hero__stat-label {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stat-color);
}

.event-list-hero__stat-trend {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: auto;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-list-hero__stat-trend:hover {
    background: rgba(255, 255, 255, 0.15);
}

.event-list-hero__stat-trend-icon {
    font-size: 1.1em;
    color: var(--stat-color);
}

.event-list-hero__stat-trend--charity .event-list-hero__stat-trend-icon {
    color: #F43F5E;
}

/* Action Buttons
   ========================================================================== */

.event-list-hero__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.event-list-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-list-hero__btn-icon {
    font-size: 1.2em;
}

.event-list-hero__btn.btn-primary {
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, var(--admin-blue-500) 25%, #8b5cf6 50%, var(--admin-violet-600) 75%, #6366f1 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.event-list-hero__btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, #2563eb 25%, var(--admin-violet-600) 50%, #6d28d9 75%, #5b21b6 100%);
}

.event-list-hero__btn.btn-outline-light {
    /* REMOVE backdrop-filter - causes iOS rendering issues */
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Solid background - no blur */
    color: white !important;
    /* iOS Safari compatibility */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    text-rendering: optimizeLegibility;
    opacity: 1 !important;
}

.event-list-hero__btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: white !important;
}

/* iOS Safari specific fixes - remove blur completely */
@supports (-webkit-touch-callout: none) {
    .event-list-hero__btn.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: var(--admin-white) !important; /* Explicit white text */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
}

/* Scroll Indicator
   ========================================================================== */
.event-list-hero__scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2rem;
    opacity: 0.7;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
}

.event-list-hero__scroll-indicator:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* ============================================
   BACKGROUND SYSTEM
   ============================================ */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* fixed causes white gaps in overflow:hidden containers */
}

.hero-gradient-animated {
    background: linear-gradient(135deg, #2563eb, var(--admin-blue-500), #10b981, var(--admin-green-600));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   OVERLAY & EFFECTS
   ============================================ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, var(--hero-overlay-start), var(--hero-overlay-end));
    z-index: 1;
}

/* ============================================
   CAROUSEL SYSTEM - DARK THEME
   ============================================ */
.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 100%;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 5%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin: auto 20px;
    height: 50px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

.hero-carousel .carousel-indicators {
    bottom: 30px;
    z-index: 10;
}

.hero-carousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    margin: 0 5px;
    transition: all 0.3s ease;
}

.hero-carousel .carousel-indicators button.active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

/* ============================================
   HERO CONTENT - DARK THEME
   ============================================ */
.hero-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0; /* Section-level padding handles navbar offset */
}

.hero-content {
    text-align: center;
    padding: 1rem 2rem 1rem 2rem;
    max-width: 900px;
    margin: 0.5rem auto 0 auto;
    width: 100%;
}

/* Enhanced Event Badge - Perfectly Centered and Spaced */
.event-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    color: white;
    margin: 0 auto 1.75rem auto; /* Reduced bottom margin */
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    max-width: fit-content; /* Changed to fit-content for perfect centering */
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    width: auto;
}

.event-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.event-badge i {
    font-size: 1.2em;
}

/* Enhanced Hero Title - Better spacing */
.hero-title {
    font-size: var(--hero-title-size);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1.25rem 0; /* Reduced bottom margin */
    background: linear-gradient(135deg, var(--admin-white) 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 5;
}

.hero-subtitle {
    font-size: var(--hero-subtitle-size);
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto 1.5rem auto; /* Reduced bottom margin */
    color: rgba(255, 255, 255, 0.9);
}

.event-datetime-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.25rem 1.5rem; /* Reduced vertical padding */
    margin: 1.5rem auto; /* Reduced top/bottom margin */
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.event-datetime-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: white;
}

.event-datetime-card i {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.event-datetime-card span {
    color: inherit;
    font-weight: 500;
}

.event-datetime-card .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   STATS GRID - DARK THEME
   ============================================ */
.event-stats-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
    justify-content: center;
}

/* Adaptive grid: 1 card = centered wider, 2 = side by side, 3 = 3-col, 4 = 2x2 */
.event-stats-grid:has(.stat-card:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(200px, 280px));
}
.event-stats-grid:has(.stat-card:nth-child(3)):not(:has(.stat-card:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(180px, 260px));
}
.event-stats-grid:has(.stat-card:nth-child(2)):not(:has(.stat-card:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(200px, 300px));
}
.event-stats-grid:not(:has(.stat-card:nth-child(2))) {
    grid-template-columns: minmax(280px, 400px);
}

.stat-card {
    --stat-color: #4F46E5;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--stat-color) 0%,
        transparent 80%
    );
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: 0 !important; /* Behind content but above card background */
    pointer-events: none; /* Don't block interactions */
    transform: translateZ(0); /* Force GPU layer but behind content */
}

.stat-card:hover::before {
    opacity: 0.15;
}

.stat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.stat-card > i {
    font-size: 1.25rem;
    color: var(--stat-color);
    align-self: center;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 50 !important;
    filter: none !important;
    transform: translateZ(0);
    isolation: isolate;
    /* Centered circle background */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Base stat-number: white pill with dark text on hero dark background */
.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    text-shadow: none;
    white-space: nowrap;
    background: var(--admin-white);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    z-index: 10;
    filter: none;
    transform: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    isolation: isolate;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 0.5rem;
    position: relative;
    z-index: 5;
    filter: none;
    isolation: isolate;
}

/* Stat color scheme via CSS custom properties */
.stat-card:nth-child(1) { --stat-color: #8B5CF6; }
.stat-card:nth-child(2) { --stat-color: #F59E0B; }
.stat-card:nth-child(3) { --stat-color: var(--admin-red-500); }
.stat-card:nth-child(4) { --stat-color: #10B981; }

/* Icon colors per stat type */
.stat-card:nth-child(1) i,
.stat-card[data-stat-id="registrations"] i,
.stat-card[data-stat-id="participants"] i { color: #8B5CF6; }

.stat-card:nth-child(2) i,
.stat-card[data-stat-id="pricing"] i { color: #F59E0B; }

.stat-card:nth-child(3) i,
.stat-card[data-stat-id="distance"] i,
.stat-card[data-stat-id="race_distances"] i { color: var(--admin-red-500); }

.stat-card:nth-child(4) i,
.stat-card[data-stat-id="elevation"] i { color: #10B981; }

.stat-card:hover > i {
    transform: scale(1.1);
}

/* Stat-number colors by data-stat-id */
.stat-card[data-stat-id="registrations"] .stat-number,
.stat-card[data-stat-id="participants"] .stat-number {
    color: #8B5CF6;
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-card[data-stat-id="pricing"] .stat-number {
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-card[data-stat-id="distance"] .stat-number,
.stat-card[data-stat-id="race_distances"] .stat-number {
    color: var(--admin-red-500);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-card[data-stat-id="elevation"] .stat-number {
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* ============================================
   HERO ACTIONS - DARK THEME
   ============================================ */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    border: 2px solid transparent;
    font-size: 1.04rem;
}

/* Primary hero CTA — solid brand teal, squared, prominent (task-293). */
.btn-hero.btn-primary {
    background: var(--admin-primary);
    color: var(--admin-white);
    box-shadow: 0 6px 20px rgba(var(--admin-primary-rgb), 0.38);
}

.btn-hero.btn-primary:hover,
.btn-hero.btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--admin-primary-rgb), 0.5);
    background: #0f6f63;
    color: var(--admin-white);
}

.btn-hero.btn-primary:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .btn-hero, .btn-hero.btn-primary:hover { transition: none; transform: none; }
}

.btn-hero.btn-outline-light {
    /* REMOVE backdrop-filter - causes iOS rendering issues */
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Solid background - no blur */
    /* iOS Safari compatibility */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    text-rendering: optimizeLegibility;
    opacity: 1 !important;
}

.btn-hero.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* iOS Safari specific fixes - remove blur completely */
@supports (-webkit-touch-callout: none) {
    .btn-hero.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: var(--admin-white) !important; /* Explicit white text */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
}

.btn-hero.btn-secondary {
    background: linear-gradient(135deg, var(--admin-neutral-500) 0%, var(--admin-neutral-600) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

/* ============================================
   SCROLL INDICATOR - DARK THEME
   ============================================ */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    cursor: pointer;
    z-index: 10;
}

.scroll-indicator:hover {
    color: rgba(255, 255, 255, 1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

/* ============================================
   COUNTDOWN TIMER - DARK THEME (Universal)
   ============================================ */
.hero-countdown {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;
}

.countdown-title {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.countdown-section {
    margin-bottom: 40px;
}

.countdown-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Enhanced Countdown Timer - Mobile responsive */
.countdown-timer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: nowrap; /* Prevent wrapping on mobile */
    margin: 2rem 0;
}

.countdown-item {
    text-align: center;
    min-width: 70px;
    flex: 1; /* Make items flexible to fit in one row */
    max-width: 100px; /* Limit maximum width */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 8px; /* Reduced horizontal padding */
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* Changed from hidden to visible to prevent clipping labels */
}

.countdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.countdown-item:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.countdown-item:hover::before {
    opacity: 1;
}

.countdown-number,
.countdown-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.countdown-label,
.countdown-unit {
    font-size: 0.85rem !important; /* Larger font for better visibility */
    color: var(--admin-white) !important; /* Pure white */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Strong shadow */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700 !important; /* Bolder */
    position: relative;
    z-index: 10 !important; /* Above pseudo-elements */
    display: block !important; /* Ensure visible */
    opacity: 1 !important; /* Full opacity */
}

/* Support for both old and new countdown structures */
.countdown-container .countdown-timer {
    gap: 1.2rem;
}

.countdown-container .countdown-item {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    min-width: 70px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-container .countdown-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--admin-white);
    margin-bottom: 0.2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.countdown-container .countdown-label {
    font-size: 0.8rem;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   RESPONSIVE DESIGN - DARK THEME
   ============================================ */

@media (max-width: 1200px) {
    .event-list-hero__title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .event-list-hero__container {
        padding: 3rem 1.5rem;
    }
    
    .event-list-hero__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: var(--navbar-height-mobile);
        /* Fix mobile background issues */
        min-height: 100vh;
        position: relative;
    }
    
    /* Fix background attachment for mobile */
    .hero-background {
        background-attachment: scroll !important; /* Fixed attachment causes issues on mobile */
        background-size: cover !important;
        background-position: center center !important;
        min-height: 100vh;
    }
    
    .hero-content {
        padding: 1.5rem 1rem 1rem 1rem;
        margin: 0.75rem auto 0 auto; /* Reduced top margin to move container up */
        text-align: center; /* Center all hero content including badge */
    }
    
    /* Make container wider on mobile */
    .hero-container {
        max-width: 100%;
        padding: 0 0.5rem; /* Minimal padding for edge-to-edge feel */
        padding-top: var(--navbar-height-mobile, 70px); /* Add padding at container level */
        align-items: flex-start; /* Changed from center */
    }
    
    /* Compact badge for tablet */
    .event-badge {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        margin: 0 auto 2rem auto; /* Increased spacing */
        max-width: fit-content;
        white-space: normal;
        word-wrap: break-word;
        text-align: center;
        line-height: 1.3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Tablet: stack stats to single column */
    .event-stats-grid,
    .event-stats-grid:has(.stat-card:nth-child(2)),
    .event-stats-grid:has(.stat-card:nth-child(3)),
    .event-stats-grid:has(.stat-card:nth-child(4)) {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin: 2rem -0.5rem 0 -0.5rem;
        padding: 0 0.5rem;
    }
    
    .stat-card {
        padding: 1.25rem 1.75rem; /* More horizontal padding on tablet */
    }
    
    .countdown-timer {
        gap: 0.5rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-hero {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        width: 10%;
        margin: auto 10px;
    }
    
    .event-list-hero__title {
        font-size: 2.5rem;
    }
    
    .event-list-hero__stats {
        grid-template-columns: 1fr;
    }
    
    .event-list-hero__actions {
        flex-direction: column;
    }
    
    .event-list-hero__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Clean mobile background - contained within hero */
    .hero-section {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
        background-size: cover !important;
        background-position: center center !important;
        min-height: 100vh;
        position: relative;
        overflow: hidden; /* Contain background within hero section */
    }
    
    .hero-background {
        background-attachment: scroll !important;
        -webkit-background-size: cover !important;
        background-size: cover !important;
        background-position: center center !important;
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    /* Wider container for mobile cards */
    .hero-container {
        max-width: 100%; /* Allow full width */
        padding: 0 0.5rem; /* Safe padding to prevent overflow */
        padding-top: var(--navbar-height-mobile, 70px); /* Add padding at container level */
        width: 100%;
        align-items: flex-start; /* Changed from center */
    }
    
    .hero-content {
        padding: 1rem 0.5rem; /* Minimal side padding */
        margin: 0.5rem auto 0 auto; /* Reduced top margin to move container up */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Changed from center */
        width: 100%;
    }
    
    .event-badge {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
        margin: 0 auto 1.5rem auto; /* Increased spacing */
        max-width: fit-content;
        text-align: center;
        word-wrap: break-word;
        line-height: 1.25;
        border-radius: 18px;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        /* Force perfect centering on mobile */
        position: relative;
        left: 0;
        right: 0;
        transform: none;
    }
    
    /* Wider datetime card */
    .event-datetime-card {
        padding: 1rem 1.25rem;
        margin: 1rem -0.25rem; /* Extend slightly beyond container */
        max-width: none;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    /* Ensure date card text wraps properly */
    .event-datetime-card span {
        display: inline;
        white-space: normal;
        line-height: 1.4;
        word-break: break-word; /* Break long words if needed */
    }
    
    /* Mobile: full width stats stack */
    .event-stats-grid,
    .event-stats-grid:has(.stat-card:nth-child(2)),
    .event-stats-grid:has(.stat-card:nth-child(3)),
    .event-stats-grid:has(.stat-card:nth-child(4)) {
        gap: 0.75rem;
        grid-template-columns: 1fr !important;
        margin: 2rem -0.5rem;
        padding: 0 0.25rem;
        width: auto;
    }
    
    .stat-card {
        padding: 1.25rem 1.75rem; /* Generous padding for full-width cards */
        width: 100%;
        margin: 0;
        border-radius: 12px;
        min-height: auto;
        box-sizing: border-box;
        /* Enhanced visual impact for wider cards */
        font-size: 1.1rem;
        text-align: center;
    }
    
    /* Wider countdown timer */
    .countdown-timer {
        width: auto;
        margin: 1.5rem -0.25rem; /* Extend slightly beyond container */
        padding: 0.5rem;
        justify-content: space-between; /* Better distribution */
        gap: 0.25rem;
        max-width: none; /* Remove width constraint */
        box-sizing: border-box;
    }
    
    .countdown-item {
        min-width: 60px; /* Slightly wider for more space */
        max-width: 90px; /* Increased max width */
        padding: 12px 6px; /* Better padding */
        font-size: 0.9rem;
        flex: 1; /* Equal distribution of space */
    }
    
    .countdown-number {
        font-size: 1.25rem;
        margin-bottom: 1px;
    }
    
    .countdown-label {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
    
    /* Clean hero actions */
    .hero-actions {
        width: 100%;
        margin: 2rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-hero {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 25px;
        margin: 0;
    }
    
    .event-list-hero__container {
        padding: 2rem 1rem;
    }
    
    .event-list-hero__title {
        font-size: 2rem;
    }
    
    .event-list-hero__badge {
        font-size: 0.875rem;
    }
}

/* Mobile-specific countdown timer improvements */
@media (max-width: 768px) {
    .countdown-timer {
        gap: 0.5rem; /* Reduced gap on mobile */
        padding: 0 0.5rem; /* Add some padding */
    }
    
    .countdown-item {
        min-width: 60px; /* Smaller minimum width */
        max-width: 80px; /* Smaller maximum width */
        padding: 12px 6px; /* Reduced padding */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.5rem; /* Smaller font size on mobile */
        margin-bottom: 2px;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.65rem; /* Smaller label font */
        letter-spacing: 0.3px;
    }
}

@media (max-width: 480px) {
    .countdown-timer {
        gap: 0.25rem; /* Even smaller gap on very small screens */
        padding: 0 0.25rem;
    }
    
    .countdown-item {
        min-width: 50px; /* Even smaller minimum width */
        max-width: 70px; /* Even smaller maximum width */
        padding: 10px 4px; /* Minimal padding */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.25rem; /* Even smaller font size */
        margin-bottom: 1px;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.6rem; /* Even smaller label font */
        letter-spacing: 0.2px;
    }
}

/* iOS Safari specific fixes - remove backdrop-filter and ensure proper contrast */
@supports (-webkit-touch-callout: none) {
    /* Remove all blur effects on iOS */
    .stat-card,
    .countdown-item,
    .btn-outline-light,
    .cta-btn-secondary,
    .btn-hero.btn-outline-light,
    .event-list-hero__btn.btn-outline-light {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        /* Use solid backgrounds for better visibility */
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    /* Ensure stat numbers are visible on iOS */
    .stat-number {
        background: var(--admin-white) !important;
        color: #1a1a2e !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .stat-card[data-stat-id="participants"] .stat-number,
    .stat-card[data-stat-id="registrations"] .stat-number {
        color: #8B5CF6 !important;
    }

    .stat-card[data-stat-id="pricing"] .stat-number {
        color: #F59E0B !important;
    }
    
    /* Ensure countdown labels and numbers are visible on iOS */
    .countdown-label,
    .countdown-unit {
        color: var(--admin-white) !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1 !important;
    }
    
    .countdown-number,
    .countdown-value {
        color: var(--admin-white) !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    
    /* Ensure buttons have proper colors on iOS */
    .btn-hero.btn-outline-light {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 1) !important;
        color: var(--admin-white) !important;
    }
    
    .cta-btn-secondary {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
        color: var(--admin-white) !important;
    }
}

/* iPhone specific fixes for consistent appearance */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .hero-background {
        background-attachment: scroll !important;
        -webkit-transform: translate3d(0, 0, 0); /* Hardware acceleration */
        transform: translate3d(0, 0, 0);
    }
    
    .hero-section {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .hero-background {
        background-attachment: scroll !important;
        position: absolute !important; /* Fixed positioning can cause issues on iOS */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0 !important; /* Ensure background stays behind content */
    }
    
    .hero-section {
        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS viewport height fix */
        position: relative;
        z-index: 1;
    }
    
    /* Ensure sections after hero have proper backgrounds */
    section.bg-light {
        background-color: var(--bg-light) !important;
        position: relative;
        z-index: 2;
    }
    
    /* Fix for panoramica section background bleeding */
    #overview {
        background-color: #f8f9fa !important;
        position: relative;
        z-index: 10;
        margin-top: 0;
        padding-top: 4rem;
    }
    
    /* Ensure all sections after hero have proper isolation */
    section:not(.hero-section) {
        position: relative;
        z-index: 5;
        isolation: isolate;
    }
}

/* iPhone 12 Pro specific fixes (390px width) - SAFE BOUNDS */
@media (max-width: 390px) {
    .event-datetime-card {
        font-size: 0.85rem !important;
        padding: 0.6rem 0.8rem !important;
        margin: 1rem auto !important; /* Center without overflow */
        width: 95% !important; /* Safe width within bounds */
        max-width: 350px !important;
        line-height: 1.2;
        box-sizing: border-box !important;
    }
    
    .countdown-timer {
        margin: 1.5rem auto !important; /* Center without overflow */
        width: 95% !important; /* Safe width within bounds */
        max-width: 350px !important;
        gap: 0.3rem !important; /* Tighter for small screen */
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }
    
    .countdown-item {
        min-width: 55px !important; /* Smaller for safe fit */
        max-width: 65px !important; /* Prevent any overflow */
        padding: 0.5rem 0.2rem !important; /* Tighter padding */
        font-size: 0.75rem !important;
        flex: 1 !important; /* Equal distribution */
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.3rem !important;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.65rem !important;
    }
}

/* Ensure countdown stays in one row on all screen sizes */
@media (max-width: 320px) {
    .countdown-timer {
        gap: 0.2rem;
        padding: 0 0.1rem;
    }
    
    .countdown-item {
        min-width: 45px;
        max-width: 60px;
        padding: 8px 2px;
    }
    
    .countdown-number,
    .countdown-value {
        font-size: 1.1rem;
    }
    
    .countdown-label,
    .countdown-unit {
        font-size: 0.55rem;
    }
    
    /* Ultra-compact badge for very small screens */
    .event-badge {
        font-size: 0.65rem !important;
        padding: 0.35rem 0.6rem !important;
        max-width: fit-content !important;
        line-height: 1.15 !important;
        border-radius: 15px !important;
        gap: 0.3rem !important;
        margin: 0 auto 1.3rem auto !important; /* Increased spacing */
        /* Force perfect centering on ultra-small screens */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: auto !important;
    }
    
    /* Compact but wide race cards for very small screens */
    .hero-race-card {
        padding: 1.25rem 1rem !important; /* Even more compact */
        min-height: 200px !important; /* Very compact height */
        margin-bottom: 0.75rem !important;
    }
    
    .hero-race-card .race-icon {
        width: 50px !important; /* Smaller icon */
        height: 50px !important;
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .race-distance {
        font-size: 1.5rem !important; /* Compact distance */
        margin-bottom: 0.4rem !important;
    }
    
    .race-price {
        font-size: 1.2rem !important; /* Compact price */
        margin-top: 0.75rem !important;
    }
    
    .race-features .feature {
        font-size: 0.7rem !important; /* Very compact features */
        padding: 0.3rem 0.5rem !important;
    }
    
    /* Maximum width usage for ultra-small screens */
    .hero-races-container {
        margin: 0 -1.5rem !important; /* Match mobile width extension */
    }
    
    .event-stats-grid {
        margin: 2rem -1.5rem 0 -1.5rem !important; /* Match mobile width extension */
        padding: 0 0.5rem !important;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .hero-carousel,
    .hero-gradient-animated,
    .event-list-hero__bg--animated,
    .event-list-hero__stat-card,
    .event-list-hero__btn,
    .event-list-hero__scroll-indicator {
        animation: none;
        transition: none;
    }
    
    .hero-gradient-animated {
        animation: none;
        background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    }
    
    .event-list-hero__bg--animated {
        animation: none;
        background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    }
}

@media (prefers-contrast: high) {
    .hero-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    
    .event-badge,
    .stat-card,
    .event-datetime-card,
    .event-list-hero__stat-card {
        border: 2px solid rgba(255, 255, 255, 0.5);
        background: rgba(0, 0, 0, 0.7);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .hero-section {
        min-height: auto;
        background: white !important;
        color: black !important;
        padding: 2rem 0;
    }
    
    .hero-overlay,
    .hero-carousel,
    .scroll-indicator {
        display: none !important;
    }
    
    .btn-hero {
        display: none !important;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-title,
    .hero-subtitle {
        color: black !important;
    }
}

/* ============================================
   HERO RACE OPTIONS
   ============================================ */

.hero-race-options {
    margin: 1.25rem 0;
    max-width: 900px;
}

.race-options-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.race-options-title i {
    color: #F59E0B;
}

.race-options-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.race-options-title i {
    color: var(--hero-accent);
    font-size: 1.25rem;
}

.hero-races-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* 3 race tiers = 3 columns */
.hero-races-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 1 race tier = single centered column */
.hero-races-1 {
    grid-template-columns: minmax(280px, 400px);
    justify-content: center;
}

/* Individual Race Card - Override stat-card defaults for proper layout */
.hero-race-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--hero-radius-lg, 1rem);
    padding: 1.25rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Override stat-card flex layout to ensure correct stacking */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
}

/* Ensure race-info stacks its children properly */
.hero-race-card .race-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.2rem;
    margin-bottom: 0;
}

/* Race description gets a subtle container */
.hero-race-card .race-description {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.35rem;
}

/* Race price always at bottom of info block */
.hero-race-card .race-price {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    color: var(--admin-white);
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-race-card .race-price i {
    opacity: 0.85;
}

.hero-race-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Enhanced clickable behavior */
.clickable-race-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.clickable-race-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.clickable-race-card::after {
    content: '→';
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.clickable-race-card:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.clickable-race-card:active {
    transform: scale(0.98);
}

/* Add subtle pulse animation for better UX feedback */
@keyframes pulse-click {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.hero-race-card.competitive {
    border-left: 4px solid rgba(255, 107, 53, 0.8);
}

.hero-race-card.family {
    border-left: 4px solid rgba(76, 175, 80, 0.8);
}

.hero-race-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Race Icon */
.hero-race-card .race-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
    color: white;
    box-shadow: var(--hero-shadow);
}

.hero-race-card.competitive .race-icon {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.hero-race-card.family .race-icon {
    background: linear-gradient(135deg, #4caf50, #8bc34a);
}

/* Race Info */
.race-info {
    text-align: center;
    margin-bottom: 1rem;
}

.race-distance {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 0.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.race-type {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.4rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.race-description {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.3;
}

/* Race Features */
.race-features {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: auto;
}

.race-features .feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.race-features .feature i {
    width: 14px;
    color: white;
    flex-shrink: 0;
    opacity: 0.95;
    font-size: 0.75rem;
}

.hero-race-card.competitive .race-features .feature i {
    color: #ff6b35;
}

.hero-race-card.family .race-features .feature i {
    color: #4caf50;
}

/* Race Price Styling */
.race-price {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-top: 0.5rem;
}

.race-price i {
    color: #F59E0B;
    margin-right: 0.25rem;
}

.race-price .early-bird-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B, var(--admin-red-500));
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

/* ============================================
   RESPONSIVE HERO RACE OPTIONS
   ============================================ */

@media (max-width: 768px) {
    .hero-race-options {
        margin: 2rem 0;
        padding: 0 1rem;
    }

    .race-options-title {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
        font-weight: 600;
    }

    .hero-races-container,
    .hero-races-2,
    .hero-races-3 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .hero-race-card {
        padding: 2rem 1.75rem; /* Larger padding for tablets */
        min-height: 320px; /* Taller cards */
    }
    
    .hero-race-card .race-icon {
        width: 70px; /* Larger icons */
        height: 70px;
        font-size: 1.7rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .race-distance {
        font-size: 1.9rem; /* Larger distance text */
        font-weight: 800;
        margin-bottom: 0.5rem;
    }
    
    .race-subtitle {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
    
    .race-price {
        font-size: 1.5rem; /* Larger price */
        margin-top: 1.25rem;
    }
    
    .race-type {
        font-size: 0.9rem;
    }
    
    .race-description {
        font-size: 0.8rem;
    }
    
    .race-features .feature {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-race-options {
        margin: 1.5rem -0.25rem; /* Extend slightly beyond container */
        padding: 0.25rem; /* Small padding for edge safety */
    }
    
    .race-options-title {
        font-size: 1.2rem;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    
    .hero-race-card {
        padding: 1.5rem 1.5rem; /* Better horizontal padding for wider cards */
        min-height: 220px; /* Compact height */
        margin-bottom: 1rem; /* Reduced space between cards */
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box; /* Ensure proper sizing */
    }
    
    .hero-race-card .race-icon {
        width: 55px; /* Compact icon size */
        height: 55px;
        font-size: 1.4rem;
        margin-bottom: 1rem; /* Reduced margin */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    
    .race-distance {
        font-size: 1.7rem; /* Compact but readable */
        font-weight: 800;
        margin-bottom: 0.5rem;
        letter-spacing: -0.01em;
    }
    
    .race-subtitle {
        font-size: 0.9rem; /* Compact subtitle */
        margin-bottom: 1rem;
        font-weight: 500;
        opacity: 0.9;
    }
    
    .race-features {
        gap: 0.5rem; /* Compact gap */
        margin: 1rem 0;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .race-features .feature {
        font-size: 0.75rem; /* Compact features */
        padding: 0.4rem 0.7rem;
        border-radius: 20px;
        font-weight: 500;
        min-width: auto;
        flex: none;
    }
    
    .race-price {
        font-size: 1.4rem; /* Compact but prominent price */
        margin-top: 1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }
    
    .race-price i {
        font-size: 1.2rem;
    }
    
    .early-bird {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        font-weight: 600;
        margin-left: 0.4rem;
    }
    
    /* Wider race cards container */
    .hero-races-container {
        gap: 1rem;
        padding: 0; /* No padding to use full width */
        margin: 0 -0.25rem; /* Extend beyond parent padding */
    }
}

/* ============================
   Modular Race Cards (3+ tiers)
   ============================ */

.hero-races-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .hero-races-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-races-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .hero-races-3 .hero-race-card {
        padding: 1.25rem;
    }
    .hero-races-3 .hero-race-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

.hero-race-card[style*="--race-accent"] .race-distance {
    color: var(--race-accent, var(--admin-white));
}

/* Early Bird Banner in hero */
.hero-early-bird-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--hero-radius, 0.75rem);
    color: var(--admin-amber-400);
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

.hero-early-bird-banner i {
    color: #f59e0b;
    animation: pulse 2s ease infinite;
}

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

/* Hero pricing — subtle text link below race cards */
.hero-pricing-cta {
    margin-top: 0.9rem;
    text-align: center;
}

.hero-pricing-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.hero-pricing-link:hover,
.hero-pricing-link:focus {
    color: var(--admin-white);
    text-decoration: none;
}

/* ============================
   FOMO / Social Proof Bar
   ============================ */

.hero-fomo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.fomo-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.fomo-social-proof {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fomo-urgency {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: urgencyPulse 3s ease infinite;
}

@keyframes urgencyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.2); }
}

@media (max-width: 768px) {
    .hero-fomo-bar {
        gap: 0.75rem;
    }
    .fomo-item {
        font-size: 0.8rem;
        padding: 0.3rem 0.625rem;
    }
    .hero-early-bird-banner {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-fomo-bar {
        gap: 0.5rem;
        flex-direction: column;
    }
    .fomo-item {
        font-size: 0.78rem;
        padding: 0.3rem 0.625rem;
    }
    .hero-early-bird-banner {
        font-size: 0.75rem;
    }
}

/* ============================================
   LARGE SCREENS - COMPACT LAYOUT
   ============================================ */
@media (min-width: 1200px) {
    .hero-content {
        max-width: 960px;
        padding: 0.5rem 2rem;
    }

    /* Wider for race options area */
    .hero-race-options {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .event-badge {
        margin-bottom: 1.25rem;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .event-datetime-card {
        padding: 0.875rem 1.25rem;
        margin: 1rem auto;
    }

    .countdown-timer {
        gap: 1rem;
        margin: 1rem auto;
    }

    .countdown-item {
        min-width: 65px;
        padding: 0.5rem 0.75rem;
    }

    .countdown-number {
        font-size: 1.5rem;
    }

    .hero-race-options {
        margin-top: 1rem;
    }

    .race-options-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .hero-race-card {
        padding: 0.75rem 1rem;
    }

    .race-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .race-distance {
        font-size: 1.15rem;
    }

    .race-price {
        font-size: 0.85rem;
    }

    .event-stats-grid {
        margin-top: 1rem;
        gap: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .hero-actions {
        margin-top: 1rem;
        gap: 0.625rem;
    }

    .btn-hero {
        padding: 0.625rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero-fomo-bar {
        margin-top: 0.75rem;
    }
}

@media (min-width: 1600px) {
    .hero-content {
        max-width: 800px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-container {
        align-items: center; /* vertically center on very large screens */
    }
}

/* =====================================================================
   TASK-284 — EVENT HERO, EDITORIAL REDESIGN (rr-kit aligned)
   ---------------------------------------------------------------------
   Single authoritative override layer for the public event hero. Appended
   last so it wins on source order. Replaces the legacy "AI website" look
   (glassmorphism cards, multicolour stat numbers, pill radii, gradient
   bars) with the brand-page language: ONE teal accent + a light-aqua
   wordmark, Space Grotesk display, squared 6px radii, hairline rules,
   restrained shadows. Tokens come from design-system/rr-kit.css (loaded
   site-wide). RR-specific lockup lives under .hero-content--rr.
   ===================================================================== */
.events-page .hero-section {
    --hero-aqua: var(--admin-brand-primary-lift);                  /* light-blue/aqua wordmark, logo-consistent */
    --hero-line: rgba(255, 255, 255, .22); /* hairline on dark */
    --hero-card: rgba(8, 16, 14, .34);     /* squared glass-lite tile */
    font-family: var(--admin-font-body);
}

/* Brand dark backdrop when no photo is set (kills the rainbow animation) */
.events-page .hero-section .hero-gradient-animated {
    background:
        radial-gradient(125% 85% at 82% -10%, rgba(var(--admin-primary-rgb), .42) 0%, rgba(11, 21, 19, 0) 55%),
        linear-gradient(158deg, color-mix(in srgb, var(--admin-primary) 24%, var(--admin-night-900)) 0%, color-mix(in srgb, var(--admin-primary) 12%, var(--admin-night-900)) 58%, color-mix(in srgb, var(--admin-primary) 8%, var(--admin-night-900)) 100%) !important;
    animation: none !important;
}

/* Content column — centered editorial stack */
.events-page .hero-section .hero-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centered emblem */
.events-page .hero-section .hero-rr-lockup {
    display: block;
    height: clamp(74px, 11vw, 132px);
    width: auto;
    margin: 0 auto clamp(18px, 3vw, 30px);
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}

/* Optional badge (non-RR events keep it; RR drops it for a cleaner stack) */
.events-page .hero-section .event-badge {
    background: rgba(255, 255, 255, .12);
    border: 1px solid var(--hero-line);
    border-radius: 6px;
    box-shadow: none;
    color: var(--admin-white);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
    padding: .5rem .9rem;
}
.events-page .hero-section .event-badge i { color: var(--admin-accent); }

/* Title — big squared display; RR splits white + light-aqua */
.events-page .hero-section .hero-title {
    font-family: var(--admin-font-heading);
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 6rem);
    line-height: .94;
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--admin-white);
    text-shadow: 0 2px 30px rgba(0, 0, 0, .42);
    margin: 0 0 .55rem;
}
.events-page .hero-section .hero-title::after { display: none; }   /* kill legacy underline */
.hero-title--lockup .ht-w { color: var(--admin-white); }
.hero-title--lockup .ht-a { color: var(--hero-aqua); }
.hero-title--lockup .ht-sep {
    font-family: var(--admin-font-body);
    font-weight: 400;
    font-size: .30em;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .8);
    margin: 0 .4em;
    vertical-align: middle;
    text-transform: lowercase;
}
.hero-title--lockup .ht-year {
    display: block;
    font-family: var(--admin-font-body);
    font-weight: 600;
    font-size: .19em;
    letter-spacing: .44em;
    color: var(--hero-aqua);
    margin: .65rem 0 0 .44em;
}

/* Subtitle / cause line */
.events-page .hero-section .hero-subtitle {
    font-family: var(--admin-font-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    max-width: 42ch;
    margin: 0 0 1.6rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

/* Date + location — quiet meta row, gold icon */
.events-page .hero-section .event-datetime-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.95rem, 2vw, 1.05rem);
    margin: 0 0 clamp(22px, 3.5vw, 34px);
}
.events-page .hero-section .event-datetime-card i { color: var(--admin-accent); }

/* Countdown — one squared hairline strip */
.events-page .hero-section .countdown-timer {
    display: flex;
    gap: 0;
    background: var(--hero-card);
    border: 1px solid var(--hero-line);
    border-radius: 6px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin: 0 auto clamp(26px, 4vw, 40px);
}
.events-page .hero-section .countdown-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 1px 0 0 var(--hero-line);
    padding: clamp(13px, 2vw, 20px) clamp(16px, 3.2vw, 32px);
    min-width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.events-page .hero-section .countdown-item:first-child { box-shadow: none; }
.events-page .hero-section .countdown-item::before,
.events-page .hero-section .countdown-item::after { display: none !important; }
.events-page .hero-section .countdown-item:hover { transform: none; }
.events-page .hero-section .countdown-number {
    font-family: var(--admin-font-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--admin-white);
    -webkit-text-fill-color: var(--admin-white);
    background: none;
}
.events-page .hero-section .countdown-label {
    font-family: var(--admin-font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* Registration-closed / status notice — was unstyled (rendered left-aligned and off-centre).
   Now a centred editorial badge that sits where the countdown would be. */
.events-page .hero-section .event-live-text {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 auto clamp(26px, 4vw, 40px);
    padding: .7rem 1.35rem;
    background: rgba(var(--admin-brand-accent-rgb), .14);
    border: 1px solid rgba(var(--admin-brand-accent-rgb), .45);
    border-radius: 6px;
    color: #f6edda;
    font-family: var(--admin-font-body);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    text-align: center;
}
.events-page .hero-section .event-live-text i { color: var(--admin-accent); }

/* Race selectors — uniform squared hairline tiles, one teal/gold accent */
.events-page .hero-section .hero-race-options {
    width: 100%;
    max-width: 780px;
    margin: 0 auto clamp(24px, 4vw, 38px);
}
.events-page .hero-section .race-options-title {
    font-family: var(--admin-font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.events-page .hero-section .race-options-title i { color: var(--admin-accent); }
.events-page .hero-section .hero-races-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 14px;
}
.events-page .hero-section .hero-race-card {
    background: var(--hero-card) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--hero-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 18px;
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.events-page .hero-section .hero-race-card::before,
.events-page .hero-section .hero-race-card::after { display: none !important; }
.events-page .hero-section .hero-race-card:hover {
    transform: translateY(-3px);
    border-color: var(--hero-aqua) !important;
    background: rgba(8, 16, 14, .52) !important;
}
.events-page .hero-section .hero-race-card .race-icon {
    background: rgba(255, 255, 255, .1) !important;
    color: var(--hero-aqua) !important;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.events-page .hero-section .race-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}
.events-page .hero-section .race-distance {
    font-family: var(--admin-font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--admin-white) !important;
}
.events-page .hero-section .race-type {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}
.events-page .hero-section .race-description {
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .66);
}
.events-page .hero-section .race-price {
    font-size: .98rem;
    font-weight: 700;
    color: var(--admin-accent);
    margin-top: 4px;
}
.events-page .hero-section .race-price i { color: var(--admin-accent); }
.events-page .hero-section .early-bird-badge {
    display: inline-block;
    background: var(--admin-accent);
    color: var(--admin-gray-900);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
}
.events-page .hero-section .race-features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.events-page .hero-section .race-features .feature {
    font-size: .76rem;
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.events-page .hero-section .race-features .feature i { color: var(--hero-aqua); }

/* Early-bird banner + pricing CTA */
.events-page .hero-section .hero-early-bird-banner {
    background: rgba(var(--admin-brand-accent-rgb), .16);
    border: 1px solid rgba(var(--admin-brand-accent-rgb), .4);
    border-radius: 6px;
    color: #f6edda;
    font-size: .88rem;
    padding: .6rem 1rem;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.events-page .hero-section .hero-early-bird-banner i { color: var(--admin-accent); }
.events-page .hero-section .hero-pricing-cta { margin-top: 14px; }
.events-page .hero-section .hero-pricing-link {
    color: var(--hero-aqua);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.events-page .hero-section .hero-pricing-link:hover,
.events-page .hero-section .hero-pricing-link:focus { color: var(--admin-white); }

/* FOMO bar — quiet hairline pills */
.events-page .hero-section .hero-fomo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 clamp(18px, 3vw, 28px);
}
.events-page .hero-section .hero-fomo-bar .fomo-item {
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--hero-line);
    border-radius: 6px;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    padding: .45rem .85rem;
}
.events-page .hero-section .hero-fomo-bar .fomo-urgency { color: var(--admin-accent); border-color: rgba(var(--admin-brand-accent-rgb), .45); }

/* Stats grid (fallback) — squared hairline, single ink, no multicolour */
.events-page .hero-section .event-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto clamp(20px, 3vw, 32px);
}
.events-page .hero-section .stat-card {
    background: var(--hero-card) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid var(--hero-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 22px 16px;
    text-align: center;
}
.events-page .hero-section .stat-card > i {
    color: var(--admin-accent) !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    font-size: 1.4rem !important;
    margin-bottom: .4rem;
}
.events-page .hero-section .stat-card .stat-number {
    background: transparent !important;
    color: var(--admin-white) !important;
    -webkit-text-fill-color: var(--admin-white) !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--admin-font-heading) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    display: block !important;
}
.events-page .hero-section .stat-card .stat-number small {
    color: rgba(255, 255, 255, .7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .7) !important;
}
.events-page .hero-section .stat-card .stat-label {
    color: rgba(255, 255, 255, .72) !important;
    text-shadow: none !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Buttons — canonical squared rr-btn shapes */
.events-page .hero-section .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: clamp(8px, 2vw, 18px);
}
.events-page .hero-section .btn-hero {
    border-radius: 6px;
    font-family: var(--admin-font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    text-transform: none;
    padding: .95rem 1.8rem;
    border: 1.5px solid transparent;
    box-shadow: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.events-page .hero-section .btn-hero:hover { transform: translateY(-2px); }
.events-page .hero-section .btn-hero.btn-primary {
    background: var(--admin-primary);
    color: var(--admin-white);
    border-color: var(--admin-primary);
    box-shadow: 0 6px 18px rgba(var(--admin-primary-rgb), .26);
}
.events-page .hero-section .btn-hero.btn-primary:hover {
    background: var(--admin-brand-primary-deep);
    border-color: var(--admin-brand-primary-deep);
    box-shadow: 0 10px 24px rgba(var(--admin-primary-rgb), .32);
}
.events-page .hero-section .btn-hero.btn-success {
    background: var(--admin-accent);
    color: var(--admin-gray-900);
    border-color: var(--admin-accent);
}
.events-page .hero-section .btn-hero.btn-success:hover {
    background: var(--admin-brand-accent-deep);
    border-color: var(--admin-brand-accent-deep);
    color: var(--admin-gray-900);
}
.events-page .hero-section .btn-hero.btn-outline-light {
    background: transparent;
    color: var(--admin-white);
    border-color: rgba(255, 255, 255, .55);
}
.events-page .hero-section .btn-hero.btn-outline-light:hover {
    background: var(--admin-white);
    color: var(--admin-ink);
    border-color: var(--admin-white);
}

@media (max-width: 560px) {
    /* Countdown — 4 equal cells that fill the row; labels no longer clip ("SECONDI"). */
    .events-page .hero-section .countdown-timer { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; margin-bottom: clamp(18px, 5vw, 26px); box-sizing: border-box; }
    .events-page .hero-section .countdown-item { min-width: 0; flex: 1 1 0; padding: 12px 1px 10px; gap: 2px; text-align: center; }
    .events-page .hero-section .countdown-number { font-size: clamp(1.5rem, 8vw, 1.95rem); }
    .events-page .hero-section .countdown-label { font-size: .47rem; letter-spacing: 0; white-space: nowrap; width: 100%; text-align: center; }
    .events-page .hero-section .hero-title--lockup .ht-year { letter-spacing: .3em; }
    .events-page .hero-section .btn-hero { width: 100%; justify-content: center; }

    /* Race selectors — compact one-per-row tiles; the distance + price are the focal point. */
    .events-page .hero-section .hero-races-container { grid-template-columns: 1fr !important; gap: 10px; }
    .events-page .hero-section .hero-race-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        text-align: left;
        padding: 12px 14px !important;
        gap: 13px;
    }
    .events-page .hero-section .hero-race-card .race-icon {
        width: 40px; height: 40px; min-width: 40px;
        font-size: 1.1rem;
        margin: 0 !important;
    }
    .events-page .hero-section .race-info { gap: 2px; flex: 1; }
    /* Category tag ("NUOVA") becomes a small gold eyebrow … */
    .events-page .hero-section .race-distance {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--admin-accent);
    }
    /* … so the actual distance/name and the price can dominate. */
    .events-page .hero-section .race-type { font-size: 1.02rem; font-weight: 700; color: var(--admin-white); }
    .events-page .hero-section .race-description { font-size: .78rem; }
    .events-page .hero-section .race-price { font-size: 1.18rem; margin-top: 2px; }
}

/* Tiny phones — keep the 4 cells uncramped, numbers still the focal point */
@media (max-width: 380px) {
    .events-page .hero-section .countdown-item { padding: 10px 1px 9px; }
    .events-page .hero-section .countdown-number { font-size: 1.45rem; }
    .events-page .hero-section .countdown-label { font-size: .46rem; letter-spacing: .02em; }
    .events-page .hero-section .hero-race-card .race-icon { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
    .events-page .hero-section .race-type { font-size: .96rem; }
    .events-page .hero-section .race-price { font-size: 1.1rem; }
}

/* ============================================================
   task-329 — Symmetric race-selector cards (all viewports)
   The base .hero-race-card layer wins layout via !important
   (column + centered), the registration-section sheet leaked an
   absolute .race-price, and a 769-1024px hack sent the 3rd card
   to its own 50%-width row. This layer makes the task-284
   horizontal tile the definitive desktop layout.
   ============================================================ */
.events-page .hero-section .hero-race-card {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}
.events-page .hero-section .hero-race-card .race-icon {
    margin: 0 !important;
}
.events-page .hero-section .hero-race-card .race-price {
    position: static !important;
    justify-content: flex-start;
}
.events-page .hero-section .race-info,
.events-page .hero-section .race-description {
    text-align: left !important;
}
.events-page .hero-section .hero-race-card .race-description {
    margin-top: .35rem;
}
/* Neutralize the tablet "last card on its own row" hack */
.events-page .hero-section .hero-races-3 .hero-race-card:last-child {
    grid-column: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
/* Three tiers = three equal columns whenever they fit side by side */
@media (min-width: 769px) {
    .events-page .hero-section .hero-races-container.hero-races-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
/* 561-768px: one card per row (matches the <=560 mobile tiles) */
@media (max-width: 768px) {
    .events-page .hero-section .hero-races-container {
        grid-template-columns: 1fr !important;
    }
}

/* ==================================================================
   sections/css/overview.css
   ================================================================== */
/**
 * Overview Section Styles - Refactored from overview_section.css
 * Modern Event Page Design with consistent styling and responsive layout
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Comprehensive overview section with event details, sidebar widgets, and interactive elements
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colors - Consistent with route section */
    --overview-primary: #0a2540; /* Dark Blue */
    --overview-secondary: #007bff; /* Bright Blue */
    --overview-accent: #ffc107; /* Yellow */
    --overview-accent-secondary: #17a2b8; /* Teal */
    --overview-success: #28a745; /* Green */
    --overview-danger: #dc3545; /* Red */
    --overview-info: #17a2b8; /* Teal */
    --overview-dark: #212529;
    --overview-light: #f8f9fa;
    --overview-white: var(--admin-white);
    --overview-gray-50: #f8f9fa;
    --overview-gray-100: #e9ecef;
    --overview-gray-200: #dee2e6;
    --overview-gray-300: #ced4da;
    --overview-gray-400: #adb5bd;
    --overview-gray-500: #6c757d;
    --overview-gray-600: #495057;
    --overview-gray-700: #343a40;
    --overview-gray-800: #212529;
    --overview-gray-900: #121212;
    
    /* Beautiful Gradient System */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, var(--admin-green-600) 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-forest: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --gradient-royal: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-ice: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    
    /* Shadows */
    --overview-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --overview-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --overview-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Border radius */
    --overview-radius: 0.75rem;
    --overview-radius-lg: 1rem;
    --overview-radius-xl: 1.5rem;
    --overview-radius-2xl: 2rem;
}

/* ============================================
   OVERVIEW SECTION BASE
   ============================================ */
.overview-content {
    display: block; /* Remove grid layout */
    max-width: 1000px; /* Set a max-width for the content */
    margin: 2rem auto 0; /* Center the block and keep top margin */
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.overview-main {
    background: var(--overview-white);
    border-radius: var(--overview-radius-xl);
    padding: 2.5rem;
    box-shadow: var(--overview-shadow);
    border: 1px solid var(--overview-gray-200);
    position: relative;
    overflow: hidden;
}

.overview-main::before {
    display: none;
}

/* ============================================
   EVENT DESCRIPTION - FIXED HTML RENDERING
   ============================================ */
.event-description {
    margin-bottom: 2rem;
}

.event-description .content-title {
    background: linear-gradient(135deg, #2563eb, var(--admin-violet-600)) !important;
    color: var(--overview-white) !important;
    padding: 1rem 1.5rem;
    margin: -2.5rem -2.5rem 1.5rem; /* Pull up to bleed into the card padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--overview-radius-xl) var(--overview-radius-xl) 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.event-description .content-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.event-description .content-title i {
    font-size: 1.3rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Fixed description text styling */
.description-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--overview-gray-600);
    margin-bottom: 0;
}

/* Properly style HTML elements within description */
.description-text h3,
.description-text h4 {
    color: var(--overview-dark);
    font-weight: 600;
    margin: 1.5rem 0 1rem 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.description-text h3 {
    font-size: 1.25rem;
    border-bottom: 2px solid var(--overview-gray-200);
    padding-bottom: 0.5rem;
}

.description-text h4 {
    font-size: 1.1rem;
    color: var(--overview-primary);
}

.description-text p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.description-text ul,
.description-text ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.description-text li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.description-text li strong {
    color: var(--overview-dark);
    font-weight: 600;
}

.description-text strong {
    color: var(--overview-dark);
    font-weight: 600;
}

/* ============================================
   EVENT DETAILS GRID - MODERN CARDS
   ============================================ */
.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.detail-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(37, 99, 235, 0.15); /* Updated to match header gradient */
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.1); /* Updated to match header gradient */
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.02) 0%, 
        rgba(124, 58, 237, 0.02) 100%); /* Updated to match header gradient */
    pointer-events: none;
    z-index: 1;
}

.detail-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15); /* Updated to match header gradient */
    border-color: rgba(37, 99, 235, 0.25); /* Updated to match header gradient */
}

/* ============================================
   OVERVIEW DETAIL ICONS - CLEAN IMPLEMENTATION
   Following Kit section pattern for reliability
   ============================================ */

/* Clean container styling like kit section */
.overview-main .event-details-grid .detail-card .detail-icon {
    width: 80px;
    height: 80px;
    margin: 0;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--admin-white);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* Override registration CSS conflicts */
    width: 80px !important;
    height: 80px !important;
    margin-top: 0 !important;
    opacity: 1 !important;
}

/* Ensure icons are visible on top of backgrounds */
.overview-main .event-details-grid .detail-card .detail-icon i {
    font-size: 2rem !important;
    color: var(--admin-white) !important;
    /* Ensure icon is on top */
    position: relative !important;
    z-index: 10 !important;
    display: inline-block !important;
    /* Remove conflicting styles */
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Ensure Bootstrap Icons work */
    font-family: 'bootstrap-icons' !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure pseudo-element is visible for Bootstrap Icons */
.overview-main .event-details-grid .detail-card .detail-icon i::before {
    display: inline-block !important;
    font-family: 'bootstrap-icons' !important;
}

/* Hover effects on containers (like Kit section) */
.overview-main .event-details-grid .detail-card:hover .detail-icon {
    transform: scale(1.1) rotate(5deg);
}

.detail-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.detail-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--admin-gray-800);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.detail-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.detail-subtitle {
    font-size: 0.95rem;
    color: var(--admin-gray-500);
    margin: 0;
    line-height: 1.5;
}

.price-type {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--admin-green-600);
    background: rgba(5, 150, 105, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    margin-left: 0.5rem;
}

/* Clean gradient application to containers (following Kit section pattern) */
.overview-main .event-details-grid .detail-card:nth-child(1) .detail-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    animation: iconPulse 2s infinite;
} /* Date - Modern Purple */

.overview-main .event-details-grid .detail-card:nth-child(2) .detail-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
    animation: iconPulse 2s infinite 0.2s;
} /* Location - Modern Pink */

.overview-main .event-details-grid .detail-card:nth-child(3) .detail-icon {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
    animation: iconPulse 2s infinite 0.4s;
} /* Distance - Modern Cyan */

.overview-main .event-details-grid .detail-card:nth-child(4) .detail-icon {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.3);
    animation: iconPulse 2s infinite 0.6s;
} /* Participants - Modern Green */

.overview-main .event-details-grid .detail-card:nth-child(5) .detail-icon {
    background: linear-gradient(135deg, #fa709a, #fee140);
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.3);
    animation: iconPulse 2s infinite 0.8s;
} /* Fee - Modern Coral */

.overview-main .event-details-grid .detail-card:nth-child(6) .detail-icon {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    box-shadow: 0 8px 25px rgba(168, 237, 234, 0.3);
    animation: iconPulse 2s infinite 1s;
} /* Awards - Modern Aqua */

/* ============================================
   BOOTSTRAP ICONS PROTECTION
   ============================================ */
/* Ensure Bootstrap Icons font-family is protected from global overrides */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Extra protection for overview section icons */
.overview-main .detail-icon .bi::before,
.overview-main .detail-icon [class^="bi-"]::before,
.overview-main .detail-icon [class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    }
}

/* Detail icon styles are now defined above */

/* Detail content styles are now defined above */

.detail-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--overview-dark);
    margin-bottom: 0.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.detail-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--overview-primary);
    margin-bottom: 0.25rem;
}

.detail-subtitle {
    font-size: 0.85rem;
    color: var(--overview-gray-500);
    margin: 0;
    font-weight: 500;
}

/* ============================================
   WHAT'S INCLUDED SECTION
   ============================================ */
.whats-included {
    margin-top: 3rem;
    background: var(--overview-white);
    border-radius: var(--overview-radius-xl);
    overflow: hidden;
}

.whats-included .content-title {
    background: linear-gradient(135deg, var(--admin-green-600), #10b981);
    color: var(--overview-white);
    padding: 1rem 1.5rem;
    margin: 0;
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.whats-included .content-title i {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0;
    padding: 0;
}

.included-item {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--overview-gray-200);
    border-right: 1px solid var(--overview-gray-200);
    transition: all 0.3s ease;
    position: relative;
    background: var(--overview-white);
}

.included-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.included-item:hover::before {
    transform: scaleY(1);
}

.included-item:hover {
    background: var(--overview-gray-50);
    transform: translateX(8px);
}

.included-item i {
    font-size: 1.5rem;
    color: var(--overview-primary);
    flex-shrink: 0;
}

.included-grid .included-item:nth-child(1) i { color: #5a9cec; } /* T-shirt */
.included-grid .included-item:nth-child(2) i { color: #f9bf3b; } /* Medaglia */
.included-grid .included-item:nth-child(3) i { color: #e74c3c; } /* Cronometraggio */
.included-grid .included-item:nth-child(4) i { color: #1abc9c; } /* Ristoro */
.included-grid .included-item:nth-child(5) i { color: #9b59b6; } /* Foto */
.included-grid .included-item:nth-child(6) i { color: #3498db; } /* Assistenza */
.included-grid .included-item:nth-child(7) i { color: #f39c12; } /* Certificato */
.included-grid .included-item:nth-child(8) i { color: #2ecc71; } /* Pacco Gara */

.included-item span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--overview-dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   SIDEBAR
   ============================================ */
.overview-sidebar {
    margin-top: 2rem;
}

.sidebar-widget {
    background: var(--overview-white);
    border-radius: var(--overview-radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--overview-shadow);
    border: 1px solid var(--overview-gray-200);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.sidebar-widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--overview-shadow-lg);
}

.sidebar-widget:hover::before {
    transform: scaleX(1);
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--overview-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.widget-title i {
    font-size: 1.3rem;
    color: var(--overview-primary);
    opacity: 0.8;
}

/* ============================================
   STATISTICS WIDGET
   ============================================ */
.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--overview-gray-200);
    transition: all 0.3s ease;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-item:hover {
    background: var(--overview-gray-50);
    margin: 0 -1rem;
    padding: 1rem;
    border-radius: var(--overview-radius);
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: var(--overview-light);
    border-radius: var(--overview-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--overview-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: inherit;
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--overview-primary);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--overview-gray-500);
    margin: 0;
    font-weight: 500;
}

/* ============================================
   WEATHER WIDGET
   ============================================ */
.weather-info {
    text-align: center;
}

.weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.weather-icon {
    font-size: 3rem;
    color: var(--overview-accent);
}

.weather-temp {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--overview-primary);
    margin: 0;
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.weather-detail {
    text-align: center;
    padding: 0.75rem;
    background: var(--overview-light);
    border-radius: var(--overview-radius);
}

.weather-detail i {
    color: var(--overview-primary);
    margin-bottom: 0.5rem;
}

.weather-note {
    font-size: 0.9rem;
    color: var(--overview-gray-500);
    font-style: italic;
    margin: 0;
    padding: 1rem;
    background: var(--overview-light);
    border-radius: var(--overview-radius);
    border-left: 4px solid var(--overview-accent);
}

/* ============================================
   SHARING WIDGET
   ============================================ */
.share-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.share-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--overview-white);
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--overview-shadow);
}

.share-btn.facebook {
    background: #1877f2;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.whatsapp {
    background: #25d366;
}

.share-btn.email {
    background: var(--overview-gray-600);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-btn {
    padding: 1rem 1.5rem;
    border-radius: var(--overview-radius);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.action-btn.primary {
    background: var(--overview-primary);
    color: var(--overview-white);
    border-color: var(--overview-primary);
}

.action-btn.primary:hover {
    background: var(--overview-secondary);
    transform: translateY(-2px);
    box-shadow: var(--overview-shadow);
}

.action-btn.secondary {
    background: transparent;
    color: var(--overview-primary);
    border-color: var(--overview-primary);
}

.action-btn.secondary:hover {
    background: var(--overview-primary);
    color: var(--overview-white);
}

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

/* ============================================
   SECTION HEADER STYLES
   ============================================ */
#overview {
    padding: 4rem 0;
    background: var(--overview-light);
    position: relative;
}

#overview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: 0 0 50px 50px;
}

#overview .container {
    position: relative;
    z-index: 1;
}

/* Overview header now uses global enhanced header styles from events.css */

/* ============================================
   ENHANCED OVERVIEW SECTION - PANORAMICA DELL'EVENTO
   ============================================ */

/* Enhanced section background */
#overview {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.02) 0%, 
        rgba(124, 58, 237, 0.02) 50%, 
        rgba(6, 182, 212, 0.02) 100%);
    position: relative;
    overflow: hidden;
}

#overview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--admin-primary) 0%, 
        var(--accent-cyan, #06b6d4) 50%,
        var(--secondary-color, var(--admin-violet-600)) 100%);
    animation: sectionGlow 3s infinite;
}

@keyframes sectionGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Enhanced event description */
.event-description {
    margin-bottom: 3rem;
    position: relative;
}

/* Duplicate styles removed - using the primary .event-description .content-title styles above */

.description-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--admin-neutral-700);
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.description-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #2563eb, var(--admin-violet-600));
    border-radius: 2px;
}

/* Enhanced detail cards grid */
.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.overview-card {
    background: var(--overview-white);
    border-radius: var(--overview-radius-xl);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--overview-shadow);
    border: 1px solid var(--overview-gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.overview-card:hover::before {
    transform: scaleX(1);
}

.overview-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--overview-shadow-lg);
}

.overview-card .card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--overview-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--overview-primary);
    transition: all 0.3s ease;
}

.overview-card:nth-child(1) .card-icon {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: var(--overview-white);
}

.overview-card:nth-child(2) .card-icon {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: var(--overview-white);
}

.overview-card:nth-child(3) .card-icon {
    background: linear-gradient(135deg, #fa709a, #fee140);
    color: var(--overview-white);
}

.overview-card:nth-child(4) .card-icon {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: var(--overview-white);
}

.overview-card:nth-child(5) .card-icon {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
    color: var(--overview-white);
}

.overview-card:nth-child(6) .card-icon {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
    color: var(--overview-white);
}

.overview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

.overview-card .card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--overview-dark);
    margin-bottom: 1rem;
}

.overview-card .card-text {
    color: var(--overview-gray-600);
    line-height: 1.6;
}

.overview-highlights {
    background: var(--overview-white);
    border-radius: var(--overview-radius-xl);
    padding: 3rem;
    margin-top: 3rem;
    box-shadow: var(--overview-shadow);
    border: 1px solid var(--overview-gray-200);
    position: relative;
    overflow: hidden;
}

.overview-highlights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--overview-primary), var(--overview-secondary));
}

.overview-highlights .highlights-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--overview-dark);
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--overview-light);
    border-radius: var(--overview-radius);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: var(--overview-white);
    transform: translateY(-3px);
    box-shadow: var(--overview-shadow);
}

.highlight-item .highlight-icon {
    width: 50px;
    height: 50px;
    background: var(--overview-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--overview-white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.highlight-item:nth-child(1) .highlight-icon {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.highlight-item:nth-child(2) .highlight-icon {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.highlight-item:nth-child(3) .highlight-icon {
    background: linear-gradient(135deg, #fa709a, #fee140);
}

.highlight-item:nth-child(4) .highlight-icon {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.highlight-item:nth-child(5) .highlight-icon {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.highlight-item:nth-child(6) .highlight-icon {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
}

.highlight-item:nth-child(7) .highlight-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.highlight-item:nth-child(8) .highlight-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.highlight-item .highlight-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--overview-dark);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
/* ============================================
   TOURNAMENT QUICK STATS
   ============================================ */
.tournament-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-radius: var(--overview-radius-lg);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.quick-stat-card {
    background: var(--overview-white);
    border-radius: var(--overview-radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--overview-gray-200);
}

.quick-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.quick-stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.quick-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--overview-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.quick-stat-label {
    font-size: 0.75rem;
    color: var(--overview-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============================================
   TOURNAMENT HIGHLIGHTS
   ============================================ */
.tournament-highlights {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: var(--overview-radius-lg);
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.tournament-highlights .content-title {
    background: linear-gradient(135deg, #ff6b00, #10b981) !important;
    color: var(--overview-white) !important;
    padding: 0.875rem 1.25rem;
    margin: -1.5rem -1.5rem 1.25rem;
    border-radius: var(--overview-radius-lg) var(--overview-radius-lg) 0 0;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.highlight-item {
    background: var(--overview-white);
    border-radius: var(--overview-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--overview-gray-200);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.highlight-content {
    flex: 1;
}

.highlight-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--overview-dark);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.highlight-content span {
    display: block;
    font-size: 0.875rem;
    color: var(--overview-gray-600);
}

.tournament-format-card {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.tournament-format-card .detail-icon {
    background: linear-gradient(135deg, #10b981, var(--admin-green-600)) !important;
}

@media (max-width: 768px) {
    #overview {
        padding: 2rem 0;
    }
    
    /* Overview header uses global responsive styles */
    
    .tournament-quick-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .quick-stat-card {
        padding: 1rem 0.75rem;
    }
    
    .quick-stat-icon {
        font-size: 1.5rem;
    }
    
    .quick-stat-value {
        font-size: 1.5rem;
    }
    
    .event-details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .detail-card {
        padding: 1.5rem;
        flex-direction: row;
        align-items: center;
    }
    
    .overview-main .event-details-grid .detail-card .detail-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .description-text {
        padding: 1.5rem;
        font-size: 1rem;
    }
    
    .event-description .content-title {
        font-size: 1.5rem;
        padding: 0.75rem 1rem;
        margin: -1.5rem -1.5rem 1rem;
    }
    
    .event-description .content-title i {
        font-size: 1.25rem !important;
    }
    
    .overview-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .overview-card {
        padding: 1.5rem;
    }
    
    .tournament-highlights {
        padding: 1rem;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .highlight-item {
        padding: 1rem;
    }
}

/* ============================================
   ENHANCED OVERVIEW - ACCESSIBILITY
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #overview::before,
    .detail-card:hover .detail-icon i,
    .detail-card:hover {
        animation: none;
        transform: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    #overview {
        background: var(--admin-white);
        border: 2px solid var(--admin-night-900);
    }
    
    .detail-card {
        border: 2px solid var(--admin-night-900);
        box-shadow: none;
        background: var(--admin-white);
    }
    
    .detail-icon i {
        background: var(--admin-night-900);
        color: var(--admin-white);
        border: 1px solid var(--admin-night-900);
    }
    
    .description-text {
        border: 2px solid var(--admin-night-900);
        background: var(--admin-white);
    }
    
    .description-text::before {
        background: var(--admin-night-900);
    }
}

/* Focus states for keyboard navigation */
.detail-card:focus-within {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* ============================================
   COMPACT PRICING STYLING
   ============================================ */
.compact-pricing {
    margin-top: 0.5rem;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--overview-gray-200);
}

.price-row:last-child {
    border-bottom: none;
}

.price-row .distance {
    font-size: 0.9rem;
    color: var(--overview-primary);
    font-weight: 500;
}

.price-row .price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--overview-accent);
}

/* Race Pricing Styles */
.race-pricing {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.price-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px solid var(--overview-gray-200);
    border-radius: 8px;
    background: var(--overview-gray-50);
    transition: all 0.3s ease;
}

.price-option:hover {
    border-color: var(--overview-accent);
    background: rgba(255, 193, 7, 0.05);
}

.price-option strong {
    color: var(--overview-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.price-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.current-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--overview-accent);
}

.regular-price {
    color: var(--overview-gray-500);
    text-decoration: line-through;
    font-size: 0.85rem;
}

/* Kit CTA Section - Beautiful Centered Button */
.kit-section-cta {
    margin: 3rem 0;
    text-align: center;
}

.kit-button-container {
    display: inline-block;
}

.kit-cta-button {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    transition: none;
    border: none;
    min-width: 320px;
    position: relative;
    overflow: hidden;
}

.kit-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 16px;
}

.kit-button-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.kit-button-content {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
}

.kit-button-content h4 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.kit-button-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

.kit-button-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.kit-cta-button:hover {
    color: white;
    text-decoration: none;
    transform: none;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.kit-cta-button:hover .kit-button-arrow {
    color: white;
}

/* Compact version - smaller kit button */
.kit-cta-button.compact {
    gap: 1rem;
    padding: 1rem 1.5rem;
    min-width: 260px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}

.kit-cta-button.compact .kit-button-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

.kit-cta-button.compact .kit-button-content h4 {
    font-size: 1.1rem;
    margin: 0 0 0.3rem 0;
}

.kit-cta-button.compact .kit-button-content p {
    font-size: 0.9rem;
}

.kit-cta-button.compact .kit-button-arrow {
    font-size: 1.6rem;
}

/* Responsive design for kit button */
@media (max-width: 480px) {
    .kit-cta-button {
        min-width: 280px;
        padding: 1.2rem 1.5rem;
        gap: 1rem;
    }
    
    .kit-button-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .kit-button-content h4 {
        font-size: 1.1rem;
    }
    
    .kit-button-content p {
        font-size: 0.9rem;
    }
    
    .kit-button-arrow {
        font-size: 1.7rem;
    }
    
    /* Compact mobile responsive */
    .kit-cta-button.compact {
        min-width: 240px;
        padding: 0.9rem 1.2rem;
        gap: 0.8rem;
    }
    
    .kit-cta-button.compact .kit-button-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .kit-cta-button.compact .kit-button-content h4 {
        font-size: 1rem;
    }
    
    .kit-cta-button.compact .kit-button-content p {
        font-size: 0.85rem;
    }
    
    .kit-cta-button.compact .kit-button-arrow {
        font-size: 1.4rem;
    }
}

/* Responsive design for race options */
@media (min-width: 576px) {
    .race-options {
        flex-direction: row;
        gap: 1rem;
    }
    
    .race-option {
        flex: 1;
    }
    
    .race-pricing {
        flex-direction: row;
        gap: 1rem;
    }
    
    .price-option {
        flex: 1;
    }
}
/* Style variant: featured — prominent banner above card */
.ov-featured-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    min-height: 220px;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-end;
}
.ov-featured-banner__overlay {
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 100%);
}
.ov-featured-banner__title {
    color: var(--admin-white);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.ov-featured-banner__sub {
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-size: 1rem;
}
@media (max-width: 768px) {
    .ov-featured-banner { min-height: 160px; }
    .ov-featured-banner__title { font-size: 1.25rem; }
}

/* ==================================================================
   sections/css/program.css
   ================================================================== */
/**
 * Program Section Styles - Refactored from program_section.css
 * Modern timeline design with interactive elements and responsive layout
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Comprehensive program section with timeline, categories, and accessibility features
 */

/* ============================================
   CSS VARIABLES - CONSISTENT WITH DESIGN SYSTEM
   ============================================ */
:root {
    /* Program-specific variables that align with global design */
    --program-primary: #0a2540; /* Dark Blue */
    --program-secondary: #007bff; /* Bright Blue */
    --program-accent: #ffc107; /* Yellow */
    --program-accent-secondary: #17a2b8; /* Teal */
    --program-success: #28a745; /* Green */
    --program-danger: #dc3545; /* Red */
    --program-warning: #ffc107; /* Yellow */
    --program-info: #17a2b8; /* Teal */
    --program-dark: #212529;
    --program-light: #f8f9fa;
    --program-white: var(--admin-white);
    --program-gray-50: #f8f9fa;
    --program-gray-100: #e9ecef;
    --program-gray-200: #dee2e6;
    --program-gray-300: #ced4da;
    --program-gray-400: #adb5bd;
    --program-gray-500: #6c757d;
    --program-gray-600: #495057;
    --program-gray-700: #343a40;
    
    /* Program shadows */
    --program-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --program-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --program-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Program radius */
    --program-radius: 0.75rem;
    --program-radius-lg: 1rem;
    --program-radius-xl: 1.5rem;
    --program-radius-2xl: 2rem;

    /* Beautiful Gradient System */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, var(--admin-green-600) 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-forest: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --gradient-royal: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-ice: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
}

/* ============================================
   PROGRAM SECTION BASE
   ============================================ */
#program {
    background: linear-gradient(135deg, var(--admin-gray-50) 0%, #e3f2fd 100%);
    position: relative;
    padding: 80px 0;
}

#program::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dots' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23dots)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 1;
}

#program .container {
    position: relative;
    z-index: 2;
}

.program-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}

/* ============================================
   PROGRAM TIMELINE
   ============================================ */
.program-timeline {
    position: relative;
    padding: 40px 0;
}

/* Straight connecting line below the items */
.program-timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-ocean);
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
}

/* ============================================
   PROGRAM ITEMS
   ============================================ */
.program-item {
    position: relative;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    z-index: 2;
    opacity: 0;
    animation: slideInProgram 0.8s ease forwards;
}

.program-item:nth-child(1) { animation-delay: 0.2s; }
.program-item:nth-child(2) { animation-delay: 0.4s; }
.program-item:nth-child(3) { animation-delay: 0.6s; }
.program-item:nth-child(4) { animation-delay: 0.8s; }
.program-item:nth-child(5) { animation-delay: 1.0s; }
.program-item:nth-child(6) { animation-delay: 1.2s; }

@keyframes slideInProgram {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Alternating left/right layout */
.program-item:nth-child(odd) {
    justify-content: flex-start;
}

.program-item:nth-child(even) {
    justify-content: flex-end;
}

/* ============================================
   PROGRAM TIME CIRCLE
   ============================================ */
.program-time {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: var(--gradient-ocean);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 6px solid white;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Ensure perfect centering */
    margin-left: 0;
}

.program-time i {
    font-size: 2rem;
    margin-bottom: 8px;
}

.time-display {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.program-time:hover {
    /* Use separate properties for better control over centering */
    transform: translateX(-50%);
    scale: 1.1;
    rotate: 5deg;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Featured time styling */
.program-time.featured-time {
    width: 140px;
    height: 140px;
    background: var(--gradient-fire);
    border-width: 8px;
}

.program-time.featured-time i {
    font-size: 2.5rem;
}

.program-time.featured-time .time-display {
    font-size: 1.3rem;
}

/* ============================================
   PROGRAM CONTENT CARDS
   ============================================ */
.program-content {
    background: var(--program-white);
    border-radius: var(--program-radius-xl);
    padding: 30px;
    box-shadow: var(--program-shadow-lg);
    max-width: 450px;
    margin: 0 40px;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid var(--program-gray-200);
}

/* Content positioning */
.program-item:nth-child(odd) .program-content {
    margin-right: auto;
    margin-left: 40px;
}

.program-item:nth-child(even) .program-content {
    margin-left: auto;
    margin-right: 40px;
}

/* Speech bubble arrows */
.program-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    transform: translateY(-50%);
}

.program-item:nth-child(odd) .program-content::before {
    right: -30px;
    border-left-color: var(--program-white);
}

.program-item:nth-child(even) .program-content::before {
    left: -30px;
    border-right-color: var(--program-white);
}

.program-content:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--program-shadow-xl);
    border-color: var(--program-primary);
}

/* ============================================
   PROGRAM CONTENT ELEMENTS
   ============================================ */
.program-header {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--program-gray-100);
    padding-bottom: 15px;
}

.program-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--program-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.program-title i {
    font-size: 1.8rem;
    padding: 12px;
    border-radius: 50%;
    color: var(--program-white);
    background: var(--gradient-ocean);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    transition: all 0.3s ease;
}

.program-title:hover i {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

/* Category badges */
.program-category {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.category-competition {
    background: linear-gradient(135deg, #fa709a, #fee140);
    color: var(--program-white);
}

.category-registration {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: var(--program-white);
}

.category-ceremony {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: var(--program-white);
}

.category-refreshment {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: var(--program-dark);
}

.category-entertainment {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
    color: var(--program-white);
}

/* Description and details */
.program-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--program-gray-600);
    margin-bottom: 20px;
}

.program-location {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--program-primary);
    font-weight: 500;
    margin-bottom: 15px;
}

.program-location i {
    font-size: 1.2rem;
    padding: 8px;
    background: var(--program-light);
    border-radius: 50%;
    color: var(--program-primary);
    transition: all 0.3s ease;
}

.program-location:hover i {
    background: var(--program-primary);
    color: var(--program-white);
    transform: scale(1.1);
}

/* Highlight badges */
.program-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.highlight-badge {
    background: var(--program-light);
    color: var(--program-primary);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.highlight-badge i {
    font-size: 1rem;
}

.highlight-badge:hover {
    background: var(--program-primary);
    color: var(--program-white);
    transform: translateY(-2px);
}

/* ============================================
   PROGRAM NOTES SECTION - COMPACT & WIDER
   ============================================ */
.program-notes {
    margin: 60px auto 2rem auto;
    padding: 0;
    background: var(--program-white);
    border-radius: var(--program-radius-xl);
    position: relative;
    /* FIXED: Match other cards with proper max-width and centering */
    max-width: 1000px;
    width: 100%;
    box-shadow: var(--program-shadow);
    border: 1px solid var(--program-gray-200);
    /* FIXED: Ensure proper content containment */
    overflow: hidden;
    box-sizing: border-box;
    /* Ensure the background properly contains all content */
    min-height: auto;
}

.program-notes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-ocean);
    border-radius: var(--program-radius-xl) var(--program-radius-xl) 0 0;
}

.notes-card {
    padding: 2rem 2rem 2.5rem 2rem;
    /* FIXED: Match other cards with consistent padding and proper bottom spacing */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure the card properly fills the background container */
    margin: 0;
    background: transparent;
}

.notes-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--program-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.notes-title i {
    font-size: 1.4rem;
    padding: 10px;
    background: var(--gradient-warning);
    color: var(--program-white);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.notes-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: grid;
    /* FIXED: Grid layout that ensures all content fits within background */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    /* Ensure proper spacing within the background container */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure grid items don't overflow the container */
    overflow: hidden;
}

.notes-list li {
    padding: 14px 16px;
    border: 1px solid var(--program-gray-200);
    border-radius: var(--program-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    background: var(--program-gray-50);
    font-size: 0.95rem;
    /* FIXED: Ensure proper sizing within the background container */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure items don't overflow the background */
    overflow: hidden;
}

.notes-list li:hover {
    background: var(--program-white);
    border-color: var(--program-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notes-list li i {
    font-size: 1rem;
    color: var(--program-primary);
    flex-shrink: 0;
    padding: 6px;
    background: var(--program-white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.notes-list li:hover i {
    background: var(--program-primary);
    color: var(--program-white);
    transform: scale(1.1);
}

/* ============================================
   EMERGENCY CONTACT - COMPACT
   ============================================ */
.emergency-contact {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: var(--program-white);
    padding: 15px 20px;
    border-radius: var(--program-radius-lg);
    margin-top: 20px;
    text-align: center;
}

.contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.contact-info i {
    font-size: 1.3rem;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

.contact-info div {
    text-align: left;
}

.contact-info strong {
    display: inline;
    font-size: 1rem;
    margin-right: 8px;
}

.contact-info span {
    font-size: 1rem;
    opacity: 0.95;
    font-weight: 700;
}

/* ============================================
   DESKTOP CENTERING FIX - ENSURE PERFECT ALIGNMENT
   ============================================ */
@media screen and (min-width: 769px) {
    .program-time {
        /* Ensure perfect centering on desktop */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        /* Additional centering insurance */
        top: 0;
    }
    
    .program-time:hover {
        /* Maintain perfect centering on hover */
        transform: translateX(-50%);
        scale: 1.1;
        rotate: 5deg;
    }
    
    /* FIXED: Better desktop layout for notes - ensure 2 rows of 3 items fit in background */
    .notes-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        max-width: 100%;
        /* Ensure proper spacing within the background container */
        padding: 0;
        margin: 0;
    }
    
    .notes-list li {
        min-height: 56px;
        padding: 16px 18px;
        /* Ensure items fit properly within the background */
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   TABLET LAYOUT (769px - 1024px)
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* FIXED: Better tablet layout for notes - 2 columns fit in background */
    .notes-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        /* Ensure proper spacing within the background container */
        padding: 0;
        margin: 0;
    }
    
    .notes-list li {
        min-height: 52px;
        padding: 15px 17px;
        /* Ensure items fit properly within the background */
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media screen and (max-width: 768px) {
    .program-timeline::after {
        left: 40px; /* Align with the time circles */
        transform: none;
        width: 4px; /* Slightly thicker line for mobile */
    }
    
    .program-item {
        flex-direction: row; /* Keep horizontal layout */
        align-items: flex-start;
        margin-bottom: 30px;
        position: relative;
        padding-left: 0; /* Remove left padding */
    }
    
    .program-item:nth-child(odd) .program-content,
    .program-item:nth-child(even) .program-content {
        margin: 0 0 0 20px; /* Consistent left margin */
        max-width: none;
        width: calc(100% - 100px); /* Account for time circle width */
        flex: 1;
    }
    
    /* Improved time circle styling for mobile */
    .program-time {
        position: absolute; /* Keep absolute positioning for proper centering */
        left: 40px; /* Align with timeline line */
        transform: translateX(-50%); /* Center over the line */
        width: 80px;
        height: 80px;
        margin: 0; /* Remove margin */
        flex-shrink: 0;
        border-width: 4px; /* Thinner border for mobile */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Lighter shadow */
        top: 0; /* Align to top of content */
        z-index: 3;
    }
    
    .program-time i {
        font-size: 1.5rem; /* Smaller icon for mobile */
        margin-bottom: 4px; /* Reduced margin */
    }
    
    .time-display {
        font-size: 0.9rem; /* Smaller font for mobile */
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    
    .program-time.featured-time {
        width: 90px;
        height: 90px;
        border-width: 5px;
    }
    
    .program-time.featured-time i {
        font-size: 1.8rem;
    }
    
    .program-time.featured-time .time-display {
        font-size: 1rem;
    }
    
    /* Remove speech bubble arrows on mobile */
    .program-content::before {
        display: none;
    }
    
    /* Improve content card styling for mobile */
    .program-content {
        padding: 20px; /* Reduced padding */
        border-radius: 10px; /* Smaller border radius */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
    
    .program-header {
        text-align: left; /* Left align for better readability */
    }
    
    .program-title {
        font-size: 1.2rem; /* Smaller title */
        justify-content: flex-start; /* Left align */
        margin-bottom: 8px;
    }
    
    .program-title i {
        font-size: 1.2rem;
        margin-right: 8px;
    }
    
    .program-description {
        font-size: 0.9rem; /* Smaller description text */
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .program-location {
        justify-content: flex-start; /* Left align */
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
    
    .program-location i {
        font-size: 1rem;
        margin-right: 6px;
    }
    
    .program-highlights {
        justify-content: flex-start; /* Left align */
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .highlight-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
        border-radius: 6px;
    }
    
    .highlight-badge i {
        font-size: 0.8rem;
        margin-right: 4px;
    }
    
    .program-notes {
        margin-top: 30px;
    }
    
    .notes-card {
        padding: 1.5rem 1.5rem 2rem 1.5rem;
    }
    
    .notes-title {
        font-size: 1.1rem;
        gap: 8px;
    }
    
    .notes-title i {
        font-size: 1.2rem;
        padding: 8px;
    }
    
    .notes-list {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        /* Ensure proper spacing within the background container */
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    .notes-list li {
        padding: 12px 14px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* Ensure items fit properly within the background */
        min-height: 44px;
    }
    
    .contact-info {
        flex-direction: row;
        gap: 8px;
        text-align: left;
    }
    
    .contact-info i {
        font-size: 1.1rem;
    }
    
    .contact-info strong {
        display: inline;
        font-size: 0.9rem;
    }
    
    .contact-info span {
        font-size: 0.9rem;
    }
}

/* ============================================
   SMALL MOBILE DEVICES (480px and below)
   ============================================ */
@media screen and (max-width: 480px) {
    .program-timeline::after {
        left: 35px; /* Slightly adjust for smaller screens */
        width: 3px;
    }
    
    .program-item {
        margin-bottom: 25px;
    }
    
    .program-item:nth-child(odd) .program-content,
    .program-item:nth-child(even) .program-content {
        margin: 0 0 0 15px;
        width: calc(100% - 90px);
    }
    
    .program-time {
        left: 35px; /* Align with smaller timeline line */
        transform: translateX(-50%); /* Center over the line */
        width: 70px;
        height: 70px;
        border-width: 3px;
    }
    
    .program-time i {
        font-size: 1.3rem;
        margin-bottom: 3px;
    }
    
    .time-display {
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }
    
    .program-time.featured-time {
        width: 80px;
        height: 80px;
        border-width: 4px;
    }
    
    .program-time.featured-time i {
        font-size: 1.6rem;
    }
    
    .program-time.featured-time .time-display {
        font-size: 0.9rem;
    }
    
    .program-content {
        padding: 15px;
        border-radius: 10px;
    }
    
    .program-title {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }
    
    .program-title i {
        font-size: 1.1rem;
        margin-right: 6px;
    }
    
    .program-description {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    .program-location {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }
    
    .program-location i {
        font-size: 0.9rem;
        margin-right: 5px;
    }
    
    .highlight-badge {
        padding: 3px 6px;
        font-size: 0.7rem;
        border-radius: 6px;
    }
    
    .highlight-badge i {
        font-size: 0.75rem;
        margin-right: 3px;
    }
    
    /* Fix notes overflow on small mobile */
    .program-notes {
        margin-top: 25px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    .notes-card {
        padding: 1.25rem 1.25rem 1.75rem 1.25rem;
        max-width: 100%;
        overflow: hidden;
    }
    
    .notes-list {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        /* Ensure proper spacing within the background container */
        padding: 0;
        margin: 0;
    }
    
    .notes-list li {
        padding: 10px 12px;
        font-size: 0.85rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        /* Ensure items fit properly within the background */
        min-height: 40px;
    }
}

/* ============================================
   VERY SMALL MOBILE DEVICES (320px and below)
   ============================================ */
@media screen and (max-width: 320px) {
    .program-timeline::after {
        left: 30px;
        width: 2px;
    }
    
    .program-item {
        margin-bottom: 20px;
    }
    
    .program-item:nth-child(odd) .program-content,
    .program-item:nth-child(even) .program-content {
        margin: 0 0 0 10px;
        width: calc(100% - 80px);
    }
    
    .program-time {
        width: 60px;
        height: 60px;
        border-width: 2px;
    }
    
    .program-time i {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }
    
    .time-display {
        font-size: 0.7rem;
        letter-spacing: 0.2px;
    }
    
    .program-time.featured-time {
        width: 70px;
        height: 70px;
        border-width: 3px;
    }
    
    .program-time.featured-time i {
        font-size: 1.4rem;
    }
    
    .program-time.featured-time .time-display {
        font-size: 0.8rem;
    }
    
    .program-content {
        padding: 12px;
        border-radius: 10px;
    }
    
    .program-title {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    
    .program-title i {
        font-size: 1rem;
        margin-right: 5px;
    }
    
    .program-description {
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 8px;
    }
    
    .program-location {
        font-size: 0.75rem;
        margin-bottom: 5px;
    }
    
    .program-location i {
        font-size: 0.8rem;
        margin-right: 4px;
    }
    
    .highlight-badge {
        padding: 2px 5px;
        font-size: 0.65rem;
        border-radius: 4px;
    }
    
    .highlight-badge i {
        font-size: 0.7rem;
        margin-right: 2px;
    }
    
    /* Extra fix for very small screens */
    .program-notes {
        margin-left: -5px;
        margin-right: -5px;
        width: calc(100% + 10px);
        max-width: calc(100% + 10px);
    }
    
    .notes-card {
        padding: 1rem 1rem 1.5rem 1rem;
        margin: 0 5px;
        max-width: calc(100% - 10px);
    }
    
    .notes-list li {
        padding: 5px 8px;
        font-size: 0.8rem;
        line-height: 1.3;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .program-item,
    .program-time,
    .program-content,
    .highlight-badge,
    .notes-list li {
        animation: none;
        transition: none;
    }
    
    .program-content::before {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .program-time {
        border: 4px solid var(--program-dark);
    }
    
    .program-content {
        border: 2px solid var(--program-dark);
    }
    
    .notes-card {
        border: 2px solid var(--program-dark);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .program-timeline::before {
        display: none;
    }
    
    .program-item {
        break-inside: avoid;
        margin-bottom: 30px;
    }
    
    .program-content {
        box-shadow: none;
        border: 1px solid var(--program-gray-300);
    }
    
    .notes-card {
        box-shadow: none;
        border: 1px solid var(--program-gray-300);
    }
}

/* ==================================================================
   sections/css/kit.css
   ================================================================== */
/**
 * Kit Section Styles - Refactored from kit_section.css
 * Compact & efficient design with modern kit showcase
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Comprehensive kit section with items grid, features, and collection info
 */

/* ============================================
   CSS VARIABLES & BASE
   ============================================ */
:root {
    --kit-primary: var(--admin-gray-900);
    --kit-secondary: var(--admin-primary);
    --kit-accent: var(--admin-accent);
    --kit-accent-secondary: var(--admin-primary);
    --kit-success: var(--admin-primary);
    --kit-danger: #dc3545;
    --kit-info: var(--admin-primary);
    --kit-dark: var(--admin-ink);
    --kit-light: #f6f8f7;
    --kit-white: var(--admin-white);
    --kit-gray-50: #f6f8f7;
    --kit-gray-100: #e9ecef;
    --kit-gray-200: #e4e8e6;
    --kit-gray-300: #ced4da;
    --kit-gray-400: #adb5bd;
    --kit-gray-500: #5d6b66;
    --kit-gray-600: #5d6b66;
    --kit-gray-700: #343a40;

    /* Beautiful Gradient System (restored — colorful kit items) */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, var(--admin-green-600) 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-forest: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --gradient-royal: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-ice: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);

    /* Kit shadows */
    --kit-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --kit-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);
    --kit-shadow-xl: 0 2px 6px rgba(0, 0, 0, 0.08);

    /* Kit radius */
    --kit-radius: 10px;
    --kit-radius-lg: 10px;
    --kit-radius-xl: 10px;
    --kit-radius-2xl: 10px;
}

/* ============================================
   KIT SECTION BASE - ULTRA COMPACT
   ============================================ */
#kit {
    background: #f6f8f7;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

#kit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='hexagons' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='15,5 25,12 25,23 15,30 5,23 5,12' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23hexagons)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 1;
}

#kit .container {
    position: relative;
    z-index: 2;
}

/* ============================================
   SECTION HEADER - COMPACT
   ============================================ */
.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 15px;
    background: var(--admin-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    font-family: var(--admin-font-heading);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--admin-primary);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 20px;
    color: var(--kit-gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   KIT CONTENT LAYOUT
   ============================================ */
.kit-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================
   MAIN KIT IMAGE
   ============================================ */
.kit-hero {
    margin-bottom: 60px;
}

/* ============================================
   KIT SHOWCASE - COMPACT
   ============================================ */
.kit-showcase {
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

/* Kit Image Container - Smaller */
.kit-image-container {
    position: relative;
    border-radius: var(--kit-radius-2xl);
    overflow: hidden;
    box-shadow: var(--kit-shadow-xl);
    transition: all 0.3s ease;
}

.kit-image-container:hover {
    transform: translateY(-10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kit-main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.kit-image-container:hover .kit-main-image {
    transform: scale(1.05);
}

.kit-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 39, 68, 0.35);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 2rem;
}

.kit-value-badge {
    background: var(--gradient-primary);
    color: white;
    padding: 20px 30px;
    border-radius: var(--kit-radius-xl);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.kit-value-amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.kit-value-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   KIT ITEMS SECTION
   ============================================ */
.kit-items-container {
    margin-bottom: 60px;
}

.kit-items-header {
    margin-bottom: 40px;
    text-align: center;
}

.kit-items-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kit-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.kit-items-title i {
    color: var(--kit-primary);
}

.kit-items-subtitle {
    font-size: 1.1rem;
    color: var(--kit-gray-600);
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================
   KIT TOGGLE BAR
   ============================================ */
.kit-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kit-white);
    border: 1.5px solid var(--kit-gray-200);
    border-radius: var(--kit-radius);
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.kit-toggle-bar:hover {
    border-color: var(--admin-primary);
    background: var(--admin-primary-soft);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.kit-toggle-bar--open {
    border-color: var(--admin-primary);
    background: var(--admin-primary-soft);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    justify-content: center;
}

.kit-toggle-bar--open .kit-toggle-right {
    margin-left: 0;
}

.kit-toggle-bar:focus-visible {
    outline: 2px solid var(--kit-secondary);
    outline-offset: 2px;
}

.kit-toggle-icons {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    max-width: 100%;
    transition: opacity 0.22s ease, max-width 0.32s ease, margin 0.28s ease, gap 0.28s ease;
}

/* Expanded kit: hide preview chips — full list shows icons in the grid */
.kit-toggle-bar--open .kit-toggle-icons {
    flex: 0 1 0;
    max-width: 0;
    opacity: 0;
    gap: 0;
    margin: 0;
    pointer-events: none;
}

.kit-chip {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--kit-white);
    flex-shrink: 0;
}

.kit-chip-1  { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.kit-chip-2  { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.kit-chip-3  { background: linear-gradient(135deg, #fa709a, #fee140); }
.kit-chip-4  { background: linear-gradient(135deg, #a8edea, #fed6e3); color: var(--admin-gray-600); }
.kit-chip-5  { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: var(--admin-gray-600); }
.kit-chip-6  { background: linear-gradient(135deg, #56ab2f, #a8e063); }
.kit-chip-7  { background: linear-gradient(135deg, #667eea, #764ba2); }
.kit-chip-8  { background: linear-gradient(135deg, #f093fb, #f5576c); }
.kit-chip-9  { background: linear-gradient(135deg, #ffd89b, #19547b); color: var(--admin-white); }
.kit-chip-10 { background: linear-gradient(135deg, #89f7fe, #66a6ff); }

/**
 * Ordinal tones: same palette as toggle chips, applied to each .kit-item-card via kit-tone-*.
 * Keeps row icons and preview chips visually aligned.
 */
.kit-tone-1  { --kit-tone-bg: linear-gradient(135deg, #4facfe, #00f2fe); --kit-tone-solid: var(--admin-sky-400); --kit-tone-fg: var(--admin-white); }
.kit-tone-2  { --kit-tone-bg: linear-gradient(135deg, #43e97b, #38f9d7); --kit-tone-solid: var(--admin-green-400); --kit-tone-fg: var(--admin-white); }
.kit-tone-3  { --kit-tone-bg: linear-gradient(135deg, #fa709a, #fee140); --kit-tone-solid: #f472b6; --kit-tone-fg: var(--admin-white); }
.kit-tone-4  { --kit-tone-bg: linear-gradient(135deg, #a8edea, #fed6e3); --kit-tone-solid: #5eead4; --kit-tone-fg: var(--admin-gray-600); }
.kit-tone-5  { --kit-tone-bg: linear-gradient(135deg, #ff9a9e, #fecfef); --kit-tone-solid: #fb7185; --kit-tone-fg: var(--admin-gray-600); }
.kit-tone-6  { --kit-tone-bg: linear-gradient(135deg, #56ab2f, #a8e063); --kit-tone-solid: #65a30d; --kit-tone-fg: var(--admin-white); }
.kit-tone-7  { --kit-tone-bg: linear-gradient(135deg, #667eea, #764ba2); --kit-tone-solid: #6366f1; --kit-tone-fg: var(--admin-white); }
.kit-tone-8  { --kit-tone-bg: linear-gradient(135deg, #f093fb, #f5576c); --kit-tone-solid: #e879f9; --kit-tone-fg: var(--admin-white); }
.kit-tone-9  { --kit-tone-bg: linear-gradient(135deg, #ffd89b, #19547b); --kit-tone-solid: #0e7490; --kit-tone-fg: var(--admin-white); }
.kit-tone-10 { --kit-tone-bg: linear-gradient(135deg, #89f7fe, #66a6ff); --kit-tone-solid: var(--admin-sky-400); --kit-tone-fg: var(--admin-white); }

.kit-chip-img {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 5px;
}

.kit-toggle-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

.kit-toggle-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #5d6b66;
    white-space: nowrap;
}

.kit-toggle-chevron {
    font-size: 0.8rem;
    color: #5d6b66;
    transition: transform 0.2s ease;
}

.kit-toggle-bar--open .kit-toggle-chevron {
    transform: rotate(-180deg);
}

/* Kit Items Grid */
.kit-items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 40px;
    overflow: hidden;
    max-height: 4000px;
    opacity: 1;
    visibility: visible;
    transition:
        max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.28s ease,
        margin-bottom 0.28s ease,
        visibility 0s linear 0s;
}

.kit-items-grid.kit-grid--collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        max-height 0.36s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.22s ease,
        margin-bottom 0.26s ease,
        visibility 0s linear 0.32s;
}

.kit-item-card {
    background: var(--kit-white);
    border-radius: var(--kit-radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--kit-gray-200);
    position: relative;
    overflow: hidden;
}

.kit-item-card:hover {
    box-shadow: var(--kit-shadow);
    border-color: var(--kit-secondary);
}

.kit-item-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--kit-radius);
    /* task-512: senza questo l'immagine che sborda esce dagli angoli
       arrotondati invece di essere ritagliata dal riquadro. */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--kit-tone-fg, var(--kit-white));
    transition: transform 0.2s ease;
    background: var(--kit-tone-bg, linear-gradient(135deg, #667eea, #764ba2));
}

.kit-item-card .kit-item-icon i {
    color: var(--kit-tone-fg, var(--kit-white));
}

/* Gallery rows: no small icon — show the same ordinal accent on the media strip */
.kit-item-card[data-item-id] .kit-item-media {
    box-shadow: inset 0 3px 0 0 var(--kit-tone-solid, var(--admin-gray-400));
}

.kit-item-card:hover .kit-item-icon {
    transform: scale(1.08);
}

/* task-512 — l'immagine riempie il riquadro, non ripete la sua misura.
   Il difetto: `.kit-item-icon` scende a 40x40 sotto i 768px, ma qui la misura
   era scritta a mano come 44x44 e la media query non la toccava. Su telefono
   l'immagine risultava quindi 4px piu' grande del riquadro e ne usciva di 2px
   per lato (misurato in produzione: sy=-2, dy=-2), rompendo gli angoli
   arrotondati e facendo sembrare la foto storta. Con 100% la misura sta in un
   posto solo: cambiare il riquadro basta e avanza. */
.kit-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    flex-shrink: 0;
}

.kit-item-content {
    flex: 1;
    min-width: 0;
}

.kit-item-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kit-dark);
    margin: 0 0 3px;
    line-height: 1.3;
}

.kit-item-content p,
.kit-item-content .item-description {
    color: var(--kit-gray-500);
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   KIT FEATURES
   ============================================ */
.kit-features {
    margin-bottom: 60px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--kit-white);
    border-radius: var(--kit-radius-xl);
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid var(--kit-gray-200);
    box-shadow: var(--kit-shadow);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kit-shadow-lg);
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--kit-white);
    flex-shrink: 0;
}

.feature-card:nth-child(1) .feature-icon {
    background: var(--gradient-success);
}

.feature-card:nth-child(2) .feature-icon {
    background: var(--gradient-warning);
}

.feature-card:nth-child(3) .feature-icon {
    background: var(--gradient-danger);
}

.feature-content h5 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kit-dark);
    margin-bottom: 10px;
}

.feature-content p {
    color: var(--kit-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   KIT COLLECTION INFO
   ============================================ */
.kit-collection-info {
    margin-top: 30px;
}

.collection-card {
    background: var(--kit-white);
    border-radius: var(--kit-radius-lg);
    padding: 24px;
    box-shadow: var(--kit-shadow);
    position: relative;
    overflow: hidden;
}

.collection-card::before { display: none; }

.collection-header {
    margin-bottom: 18px;
    text-align: center;
}

.collection-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kit-dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.collection-header i {
    font-size: 1.3rem;
    color: var(--kit-primary);
    opacity: 0.8;
}

.collection-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.collection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kit-light);
    border-radius: var(--kit-radius);
    transition: all 0.3s ease;
}

.collection-item:hover {
    background: var(--kit-white);
    transform: translateY(-3px);
    box-shadow: var(--kit-shadow);
}

.collection-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--kit-white);
    flex-shrink: 0;
}

.collection-item:nth-child(1) .collection-icon {
    background: var(--gradient-success);
}

.collection-item:nth-child(2) .collection-icon {
    background: var(--gradient-warning);
}

.collection-item:nth-child(3) .collection-icon {
    background: var(--gradient-info);
}

.collection-text {
    flex: 1;
}

.collection-text strong {
    display: block;
    font-weight: 600;
    color: var(--kit-dark);
    margin-bottom: 5px;
}

.collection-note {
    background: var(--admin-accent-soft);
    border: 1px solid var(--admin-accent);
    border-radius: var(--kit-radius);
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.collection-note i {
    font-size: 1.1rem;
    color: var(--admin-brand-accent-deep);
    margin-top: 2px;
    flex-shrink: 0;
}

.collection-note p {
    color: var(--admin-ink);
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   KIT PLACEHOLDER (when no kit image available)
   ============================================ */
.kit-placeholder {
    text-align: center;
    padding: 60px 30px;
    background: var(--kit-light);
    border-radius: var(--kit-radius-2xl);
    border: 2px dashed var(--kit-gray-300);
}

.placeholder-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: var(--kit-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--kit-gray-400);
    box-shadow: var(--kit-shadow);
}

.kit-placeholder h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--kit-gray-600);
    margin-bottom: 15px;
}

.kit-placeholder p {
    color: var(--kit-gray-500);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.placeholder-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.placeholder-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kit-gray-600);
    font-weight: 500;
}

.placeholder-feature i {
    color: var(--kit-primary);
    font-size: 1.2rem;
}

.placeholder-feature span {
    font-size: 0.95rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    #kit {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 18px;
    }

    .kit-toggle-bar {
        min-height: 44px;
        padding: 8px 14px;
    }

    .kit-toggle-label {
        font-size: 0.85rem;
    }

    /* Hide extra chips beyond 5 on mobile so they don't overflow */
    .kit-chip:nth-child(n+6) {
        display: none;
    }

    .kit-items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .kit-item-card {
        padding: 12px 14px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-card {
        padding: 25px;
    }
    
    .collection-card {
        padding: 30px;
    }
    
    .collection-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .collection-item {
        padding: 15px;
    }
    
    .kit-main-image {
        height: 300px;
    }
    
    .kit-image-overlay {
        padding: 1.5rem;
    }
    
    .kit-value-badge {
        padding: 15px 20px;
    }
    
    .kit-value-amount {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .kit-items-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .kit-item-card {
        padding: 12px 14px;
    }

    .kit-item-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .collection-details {
        gap: 10px;
    }
    
    .placeholder-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .placeholder-features {
        gap: 15px;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .kit-item-card,
    .feature-card,
    .collection-item,
    .kit-image-container,
    .kit-items-grid,
    .kit-toggle-icons {
        transition: none !important;
    }
    
    .kit-item-card::before {
        display: none;
    }
}

@media (prefers-contrast: high) {
    .kit-item-card,
    .feature-card,
    .collection-card {
        border: 2px solid var(--kit-dark);
    }
    
    .kit-placeholder {
        border: 2px solid var(--kit-dark);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .kit-image-overlay {
        display: none;
    }
    
    .kit-item-card,
    .feature-card,
    .collection-card {
        box-shadow: none;
        border: 1px solid var(--kit-gray-300);
        break-inside: avoid;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.kit-text-sm { font-size: 0.8rem; }
.kit-text-xs { font-size: 0.7rem; }
.kit-mb-sm { margin-bottom: 0.5rem; }
.kit-mb-md { margin-bottom: 1rem; }
.kit-p-sm { padding: 0.5rem; }
.kit-p-md { padding: 1rem; }

/* ==================================================================
   sections/css/registration.css
   ================================================================== */
/**
 * Registration Section Styles - Refactored from registration_section.css
 * Modern design system with pricing and action components
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Comprehensive registration section with pricing, details, and action components
 */

/* ============================================
   CSS VARIABLES - MODERN COLOR PALETTE 2025
   ============================================ */
:root {
    /* Professional Business Colors */
    --registration-primary: #2563eb; /* Professional Blue */
    --registration-primary-light: var(--admin-blue-500); /* Light Blue */
    --registration-primary-dark: #1d4ed8; /* Dark Blue */
    --registration-secondary: var(--admin-cyan-600); /* Teal */
    --registration-accent: var(--admin-green-600); /* Emerald Green */
    
    /* Professional Status Colors */
    --registration-success: var(--admin-green-600); /* Professional Green */
    --registration-danger: var(--admin-red-600); /* Professional Red */
    --registration-warning: var(--admin-amber-600); /* Professional Orange */
    --registration-info: var(--admin-cyan-600); /* Professional Teal */
    
    /* Professional Neutrals */
    --registration-dark: var(--admin-neutral-800); /* Professional Dark */
    --registration-light: var(--admin-neutral-50); /* Clean White */
    --registration-white: var(--admin-white);
    --registration-gray-50: var(--admin-neutral-50);
    --registration-gray-100: var(--admin-neutral-100);
    --registration-gray-200: var(--admin-neutral-200);
    --registration-gray-300: var(--admin-neutral-300);
    --registration-gray-400: var(--admin-neutral-400);
    --registration-gray-500: var(--admin-neutral-500);
    --registration-gray-600: var(--admin-neutral-600);
    --registration-gray-700: var(--admin-neutral-700);
    
    /* Registration shadows */
    --registration-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --registration-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --registration-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Registration radius */
    --registration-radius: 0.75rem;
    --registration-radius-lg: 1rem;
    --registration-radius-xl: 1.5rem;
    --registration-radius-2xl: 2rem;
}

/* ============================================
   REGISTRATION SECTION BASE
   ============================================ */
.registration-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--admin-neutral-50) 0%, var(--admin-neutral-100) 50%, var(--admin-neutral-200) 100%);
    background-image: 
        radial-gradient(at 47% 33%, rgba(37, 99, 235, 0.06) 0, transparent 59%), 
        radial-gradient(at 82% 65%, rgba(8, 145, 178, 0.04) 0, transparent 55%),
        radial-gradient(at 25% 75%, rgba(5, 150, 105, 0.03) 0, transparent 40%);
    position: relative;
}

/* Ensure proper text contrast and visibility */
.registration-section .registration-card {
    background: var(--admin-white) !important;
    color: var(--admin-neutral-800) !important;
}

/* Fix text visibility in pricing options */
.registration-section .price-option {
    background: var(--admin-white) !important;
    color: var(--admin-neutral-800) !important;
    border: 2px solid var(--admin-neutral-200);
}

.registration-section .price-option .price-label {
    color: var(--admin-neutral-500) !important;
}

.registration-section .price-option .amount {
    color: var(--admin-neutral-800) !important;
}

.registration-section .price-option .currency {
    color: var(--admin-neutral-500) !important;
}

/* Feature items visibility */
.registration-section .feature-item {
    color: var(--admin-neutral-700) !important;
}

.registration-section .feature-item span {
    color: var(--admin-neutral-600) !important;
}

.registration-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
}

.registration-section .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   SECTION HEADER
   ============================================ */
.registration-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Removed registration-specific section title styling to use global styles */

.registration-section .section-subtitle {
    font-size: 1.2rem;
    color: var(--registration-gray-500);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   REGISTRATION BOX
   ============================================ */
.registration-box {
    background: linear-gradient(135deg, var(--registration-white) 0%, var(--registration-gray-50) 100%);
    border-radius: var(--registration-radius-2xl);
    box-shadow: var(--registration-shadow-lg);
    padding: 2.5rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--registration-gray-200);
    position: relative;
    overflow: hidden;
}

.registration-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #22c55e 100%);
    border-radius: var(--registration-radius-2xl) var(--registration-radius-2xl) 0 0;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.registration-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--registration-shadow-xl);
}

/* ============================================
   REGISTRATION HEADER
   ============================================ */
.registration-header {
    margin-bottom: 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, var(--admin-blue-500) 25%, #8b5cf6 50%, var(--admin-violet-600) 75%, #6366f1 100%);
    padding: 2rem;
    border-radius: var(--registration-radius-xl);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.registration-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.registration-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--admin-white) !important;
    margin-bottom: 0.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.registration-header h3 i {
    color: var(--admin-white) !important;
    background: rgba(255, 255, 255, 0.2);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    padding: 0.5rem;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   REGISTRATION DETAILS
   ============================================ */
.registration-details {
    margin-bottom: 2rem;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--registration-gray-50);
    border-radius: var(--registration-radius-lg);
    transition: all 0.3s ease;
    border: 1px solid var(--registration-gray-200);
}

.detail-item:hover {
    background: var(--registration-white);
    border-color: var(--registration-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.detail-item .icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--registration-primary), var(--registration-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.detail-item .icon i {
    color: var(--registration-white);
    font-size: 1.2rem;
}

.detail-item .content {
    flex: 1;
}

.detail-item .content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--registration-dark);
    margin-bottom: 0.25rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.detail-item .content p {
    color: var(--registration-gray-600);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ============================================
   PRICING SECTION
   ============================================ */
.pricing-info {
    margin-bottom: 2rem;
}

.pricing-info h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--registration-dark);
    margin-bottom: 1rem;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pricing-info h4 i {
    color: var(--registration-success);
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.price-card {
    background: var(--registration-white);
    border-radius: var(--registration-radius-lg);
    padding: 1.5rem;
    border: 2px solid var(--registration-gray-200);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--registration-primary), var(--registration-secondary));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.price-card:hover {
    border-color: var(--registration-primary);
    transform: translateY(-5px);
    box-shadow: var(--registration-shadow-lg);
}

.price-card:hover::before {
    transform: translateX(0);
}

.price-card.featured {
    border-color: var(--registration-success);
    box-shadow: var(--registration-shadow);
}

.price-card.featured::before {
    background: linear-gradient(90deg, var(--registration-success), var(--registration-primary));
    transform: translateX(0);
}

.price-card .price-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--registration-gray-600);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-card .price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--registration-primary);
    margin-bottom: 0.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.price-card .price-description {
    color: var(--registration-gray-500);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   REGISTRATION ACTION
   ============================================ */
.registration-action {
    text-align: center;
    margin-top: 2rem;
}

.registration-action .btn-register {
    background: linear-gradient(135deg, #2563eb 0%, var(--admin-cyan-600) 100%);
    color: var(--registration-white);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--registration-radius-lg);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--registration-shadow);
    position: relative;
    overflow: hidden;
}

.registration-action .btn-register:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(37, 99, 235, 0.15);
    color: var(--registration-white);
    background: linear-gradient(135deg, var(--admin-blue-500) 0%, #06b6d4 100%);
}

.registration-action .btn-register i {
    font-size: 1.2rem;
}

.registration-action .btn-register:active {
    transform: translateY(-1px);
    box-shadow: var(--registration-shadow-lg);
}

/* ============================================
   REGISTRATION CLOSED STATE
   ============================================ */
.registration-closed {
    background: linear-gradient(135deg, var(--registration-gray-100), var(--registration-gray-200));
    border-radius: var(--registration-radius-2xl);
    padding: 2rem;
    text-align: center;
    border: 2px solid var(--registration-gray-300);
}

.registration-closed .closed-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--registration-danger), var(--admin-red-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--registration-shadow);
}

.registration-closed .closed-icon i {
    color: var(--registration-white);
    font-size: 2rem;
}

.registration-closed h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--registration-dark);
    margin-bottom: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.registration-closed p {
    color: var(--registration-gray-600);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.registration-closed .alternative-action {
    margin-top: 1rem;
}

.registration-closed .btn-secondary {
    background: var(--registration-gray-400);
    color: var(--registration-white);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--registration-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.registration-closed .btn-secondary:hover {
    background: var(--registration-gray-500);
    transform: translateY(-2px);
    box-shadow: var(--registration-shadow);
    color: var(--registration-white);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .registration-section {
        padding: 3rem 0;
    }
    
    .registration-box {
        padding: 2rem;
        margin: 0 1rem;
    }
    
    .registration-section .section-title {
        font-size: 2rem;
    }
    
    .registration-section .section-subtitle {
        font-size: 1.1rem;
    }
    
    .price-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .price-card {
        padding: 1.25rem;
    }
    
    .price-card .price-amount {
        font-size: 1.75rem;
    }
    
    .detail-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .detail-item .icon {
        width: 40px;
        height: 40px;
        margin-right: 0;
    }
    
    .detail-item .icon i {
        font-size: 1.1rem;
    }
    
    .registration-action .btn-register {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    .registration-closed {
        padding: 1.5rem;
    }
    
    .registration-closed .closed-icon {
        width: 60px;
        height: 60px;
    }
    
    .registration-closed .closed-icon i {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .registration-box {
        padding: 1.5rem;
    }
    
    .registration-section .section-title {
        font-size: 1.75rem;
    }
    
    .registration-header h3 {
        font-size: 1.5rem;
        color: var(--admin-white) !important;
    }
    
    .pricing-info h4 {
        font-size: 1.2rem;
    }
    
    .price-card .price-amount {
        font-size: 1.5rem;
    }
    
    .detail-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .detail-item .icon {
        width: 35px;
        height: 35px;
    }
    
    .registration-action .btn-register {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .registration-closed h4 {
        font-size: 1.3rem;
    }
    
    .registration-closed p {
        font-size: 0.95rem;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .registration-box,
    .detail-item,
    .price-card,
    .registration-action .btn-register,
    .registration-closed .btn-secondary {
        transition: none;
    }
    
    .price-card::before {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .registration-box,
    .detail-item,
    .price-card {
        border: 2px solid var(--registration-dark);
    }
    
    .registration-closed {
        border: 2px solid var(--registration-dark);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .registration-section {
        padding: 1rem 0;
    }
    
    .registration-box::before,
    .price-card::before {
        display: none;
    }
    
    .registration-box,
    .price-card,
    .registration-closed {
        box-shadow: none;
        border: 1px solid var(--registration-gray-300);
    }
    
    .registration-action .btn-register,
    .registration-closed .btn-secondary {
        display: none;
    }
}

/* ============================================
   IMPROVED REGISTRATION UI STYLES
   ============================================ */

/* Registration Container */
.registration-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Registration Card */
.registration-card {
    background: var(--registration-white);
    border-radius: var(--registration-radius-2xl);
    box-shadow: var(--registration-shadow-lg);
    border: 1px solid var(--registration-gray-200);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.registration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--registration-success), var(--registration-primary));
}

.registration-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--registration-shadow-xl);
}

/* Registration Header */
.registration-header {
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, var(--admin-blue-500) 25%, #8b5cf6 50%, var(--admin-violet-600) 75%, #6366f1 100%);
    color: var(--registration-white);
    padding: 2rem;
    text-align: center;
    margin-bottom: 0;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.registration-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.registration-header .header-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--admin-white) !important;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.registration-header .header-title i {
    opacity: 0.9;
    color: var(--admin-white) !important;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Registration Details */
.registration-details {
    padding: 2rem;
    border-bottom: 1px solid var(--registration-gray-200);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.registration-details .detail-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--registration-gray-50);
    border-radius: var(--registration-radius-lg);
    transition: all 0.3s ease;
    border: 1px solid var(--registration-gray-200);
}

.registration-details .detail-item:hover {
    background: var(--registration-white);
    border-color: var(--registration-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.registration-details .detail-item .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--registration-primary), var(--registration-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.registration-details .detail-item .icon i {
    font-size: 1.25rem;
    color: var(--registration-white);
}

.registration-details .detail-item .content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--registration-dark);
    margin-bottom: 0.25rem;
}

.registration-details .detail-item .content p {
    color: var(--registration-gray-600);
    margin: 0;
    line-height: 1.4;
}

/* Pricing Section */
.pricing-section {
    padding: 2rem;
    border-bottom: 1px solid var(--registration-gray-200);
}

.pricing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--registration-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-title i {
    color: var(--registration-warning);
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pricing-section .price-card {
    background: var(--registration-white);
    border: 2px solid var(--registration-gray-200);
    border-radius: var(--registration-radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-section .price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--registration-gray-400), var(--registration-gray-500));
    transition: all 0.3s ease;
}

.pricing-section .price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--registration-primary);
}

.pricing-section .price-card:hover::before {
    background: linear-gradient(90deg, var(--registration-primary), var(--registration-secondary));
}

/* Featured Price Card */
.pricing-section .price-card.featured-price {
    border-color: var(--registration-primary);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
    transform: scale(1.05);
}

.pricing-section .price-card.featured-price::before {
    background: linear-gradient(90deg, var(--registration-primary), var(--registration-secondary));
}

.pricing-section .price-card.featured-price .price-header {
    position: relative;
}

.pricing-section .price-card.featured-price .price-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, var(--registration-success), var(--registration-warning));
    color: var(--registration-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Price Card Header */
.price-header {
    margin-bottom: 1rem;
}

.price-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--registration-dark);
    margin-bottom: 0.5rem;
}

/* Price Amount */
.price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.price-amount .currency {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--registration-gray-600);
}

.price-amount .amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--registration-dark);
    line-height: 1;
}

/* Price Savings */
.price-savings {
    background: var(--registration-success);
    color: var(--registration-white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.price-savings i {
    font-size: 1rem;
}

/* Early Bird Notice */
.early-bird-notice {
    background: linear-gradient(135deg, var(--registration-warning), var(--registration-accent));
    color: var(--registration-white);
    padding: 1rem 1.5rem;
    border-radius: var(--registration-radius-lg);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.early-bird-notice .notice-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.early-bird-notice .notice-icon i {
    font-size: 1.25rem;
    color: var(--registration-white);
}

.early-bird-notice .notice-content {
    flex: 1;
}

.early-bird-notice .notice-content strong {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Race Types Section */
.race-types-section {
    margin-top: 2rem;
}

.race-types-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--registration-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.race-types-title i {
    color: var(--registration-warning);
}

.race-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.race-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--registration-gray-50);
    border-radius: var(--registration-radius);
    border: 1px solid var(--registration-gray-200);
    transition: all 0.3s ease;
}

.race-option:hover {
    background: var(--registration-white);
    border-color: var(--registration-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.race-option .race-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--registration-primary), var(--registration-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.race-option .race-icon i {
    font-size: 1.1rem;
    color: var(--registration-white);
}

.race-option .race-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.race-option .race-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--registration-dark);
}

.race-option .race-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--registration-primary);
}

/* Registration Actions */
.registration-action {
    padding: 2rem;
    text-align: center;
    background: var(--registration-gray-50);
}

/* Inline Registration Action - Positioned after pricing cards */
.registration-action-inline {
    padding: 2rem 0;
    text-align: center;
    margin-top: 1.5rem;
    border-top: 2px solid var(--registration-gray-200);
    border-bottom: 2px solid var(--registration-gray-200);
    background: linear-gradient(135deg, var(--admin-gray-50) 0%, var(--admin-gray-100) 100%);
}

.registration-action .btn-register,
.registration-action-inline .btn-register {
    background: linear-gradient(135deg, #2563eb 0%, var(--admin-cyan-600) 100%);
    color: var(--registration-white);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    margin-bottom: 1.5rem;
}

.registration-action .btn-register:hover,
.registration-action-inline .btn-register:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 35px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(37, 99, 235, 0.15);
    background: linear-gradient(135deg, var(--admin-blue-500) 0%, #06b6d4 100%);
}

.registration-action .btn-register:active,
.registration-action-inline .btn-register:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}

.registration-action .action-info,
.registration-action-inline .action-info-inline {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.registration-action .action-info p,
.registration-action-inline .action-info-inline p {
    margin: 0;
    color: var(--registration-gray-600);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.registration-action .action-info i,
.registration-action-inline .action-info-inline i {
    color: var(--registration-primary);
}

/* Responsive Design for New UI */
@media (max-width: 768px) {
    .registration-card {
        margin: 0 1rem;
    }
    
    .registration-header {
        padding: 1.5rem;
    }
    
    .registration-header .header-title {
        font-size: 1.5rem;
        color: var(--admin-white) !important;
    }
    
    .registration-details,
    .pricing-section,
    .registration-action {
        padding: 1.5rem;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-section .price-card.featured-price {
        transform: none;
    }
    
    .registration-action .action-info {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .registration-header .header-title {
        font-size: 1.25rem;
        flex-direction: column;
        gap: 0.5rem;
        color: var(--admin-white) !important;
    }
    
    .pricing-title {
        font-size: 1.25rem;
    }
    
    .price-amount .amount {
        font-size: 2rem;
    }
    
    .race-option .race-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .registration-action .btn-register {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

/* ============================================
   ENHANCED RACE CARDS WITH PRICING - NEW LAYOUT
   ============================================ */

/* Race Cards Grid Layout */
.race-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.race-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(12px);
    border-radius: var(--registration-radius-xl);
    padding: 1.5rem;
    border: 2px solid rgba(139, 92, 246, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(139, 92, 246, 0.1);
}

.race-card:hover {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.2), 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px) scale(1.02);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(245, 243, 255, 0.6) 100%);
}

.race-card.competitive-race {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(8, 145, 178, 0.04) 100%);
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
}

.race-card.family-race {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.04) 0%, rgba(8, 145, 178, 0.04) 100%);
    border-color: rgba(5, 150, 105, 0.15);
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.08);
}

/* Race Header */
.race-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.race-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, #2563eb 50%, var(--admin-violet-600) 100%);
    color: var(--admin-white) !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.race-info {
    flex: 1;
}

.race-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--registration-dark);
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* Ensure white text in header contexts */
.race-header .race-name,
.race-header-enhanced .race-name {
    color: var(--admin-white) !important;
}

.race-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.race-badge.competitive {
    background: var(--registration-warning);
    color: var(--registration-white);
}

.race-badge.family {
    background: var(--registration-success);
    color: var(--registration-white);
}

/* Race Features */
.race-features {
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--registration-gray-600);
    line-height: 1.4;
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-item i {
    color: var(--registration-primary);
    flex-shrink: 0;
    font-size: 1rem;
}

/* Pricing Options */
.pricing-options {
    display: grid;
    gap: 1rem;
}

.price-option {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.95) 100%);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid rgba(37, 99, 235, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.price-option:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(239, 246, 255, 0.3) 100%);
}

.price-option.featured {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.08) 50%, rgba(99, 102, 241, 0.06) 100%);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    position: relative;
    overflow: hidden;
}

.price-option.featured::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #8b5cf6 0%, var(--admin-violet-600) 50%, #6366f1 100%);
    border-radius: 12px;
    z-index: -1;
    opacity: 0.8;
}

.price-option.featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    border-radius: 10px;
}

.price-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.price-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--registration-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-option.featured .price-label {
    color: var(--admin-white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.price-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--registration-success);
    color: var(--registration-white);
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.price-badge.active {
    background: var(--registration-success);
    animation: pulse 2s infinite;
}

.price-option.featured .price-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: var(--admin-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

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

.price-amount {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--registration-gray-500);
}

.amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--registration-primary);
    line-height: 1;
}

.price-option.featured .amount {
    color: var(--admin-white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.price-option.featured .currency {
    color: rgba(255, 255, 255, 0.9) !important;
}

.price-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--registration-gray-500);
    font-weight: 500;
}

.price-note i {
    color: var(--registration-success);
    font-size: 0.875rem;
}

.price-option.featured .price-note {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.price-option.featured .price-note i {
    color: var(--admin-white) !important;
}

.price-savings {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--registration-success);
    font-weight: 600;
    margin-top: 0.5rem;
}

.price-savings i {
    font-size: 0.875rem;
}

.price-option.featured .price-savings {
    color: var(--admin-white) !important;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.price-option.featured .price-savings i {
    color: var(--admin-white) !important;
}

/* Enhanced Early Bird Notice */
.early-bird-notice {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(8, 145, 178, 0.04) 100%);
    border: 2px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
    backdrop-filter: blur(8px);
}

.notice-icon {
    color: var(--registration-warning);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.notice-content {
    color: var(--admin-amber-800);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Enhanced Race Selection Note */
.race-selection-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--admin-blue-50);
    border: 2px solid var(--admin-blue-100);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--registration-gray-600);
    font-weight: 500;
}

.race-selection-note i {
    color: var(--registration-primary);
    flex-shrink: 0;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .race-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .race-card {
        padding: 1.25rem;
    }
    
    .race-header {
        gap: 0.75rem;
    }
    
    .race-icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    
    .race-name {
        font-size: 1rem;
    }
    
    .amount {
        font-size: 1.5rem;
    }
    
    .feature-item {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .early-bird-notice,
    .race-selection-note {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .race-card {
        padding: 1rem;
    }
    
    .race-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .race-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .pricing-options {
        gap: 0.75rem;
    }
    
    .price-option {
        padding: 0.875rem;
    }
    
    .amount {
        font-size: 1.375rem;
    }
}

/* ============================================
   ENHANCED PRICING SUMMARY SECTION
   ============================================ */

.pricing-summary-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--registration-gray-200);
}

.price-comparison {
    background: linear-gradient(135deg, var(--admin-blue-50) 0%, var(--admin-blue-100) 100%);
    border: 2px solid var(--registration-primary);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.comparison-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--registration-dark);
}

.comparison-item i {
    color: var(--registration-primary);
    font-size: 1.125rem;
}

.pricing-benefits {
    margin-top: 1.5rem;
}

.benefit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--registration-gray-600);
    padding: 0.75rem;
    background: var(--registration-gray-50);
    border-radius: 8px;
    border: 1px solid var(--registration-gray-200);
}

.benefit-item i {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Responsive for pricing benefits */
@media (max-width: 768px) {
    .benefit-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .benefit-item {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }
    
    .comparison-item {
        font-size: 0.875rem;
        gap: 0.5rem;
    }
    
    .pricing-summary-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
}

/* ============================================
   ENHANCED RACE HEADERS - IMPROVED DESIGN
   ============================================ */

/* Enhanced race header styling */
.race-header-enhanced {
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    border-radius: var(--registration-radius-xl) var(--registration-radius-xl) 0 0;
    overflow: hidden;
    position: relative;
}

.race-header-background {
    padding: 1.5rem;
    color: var(--registration-white);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, var(--admin-blue-500) 25%, #8b5cf6 50%, var(--admin-violet-600) 75%, #6366f1 100%) !important;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
}

.race-header-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

.race-header-enhanced .race-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--admin-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.race-header-enhanced .race-icon:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.race-header-enhanced .race-info {
    flex: 1;
    position: relative;
    z-index: 2;
}

.race-header-enhanced .race-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--admin-white) !important;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Force white text with maximum specificity */
.race-header-enhanced .race-info .race-name,
.race-header-enhanced .race-name,
.race-card .race-header-enhanced .race-name,
.race-card[data-tier-id] .race-header-enhanced .race-name {
    color: var(--admin-white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.race-header-enhanced .race-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--admin-neutral-800);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.race-header-enhanced .race-badge:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Specific colors for different race types in legacy system */
.race-card.competitive-race .race-header-enhanced .race-badge {
    background: rgba(245, 158, 11, 0.9);
    color: var(--registration-white);
    border-color: rgba(245, 158, 11, 0.5);
}

.race-card.family-race .race-header-enhanced .race-badge {
    background: rgba(16, 185, 129, 0.9);
    color: var(--registration-white);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Responsive adjustments for enhanced headers */
@media (max-width: 768px) {
    .race-header-enhanced {
        margin: -1.25rem -1.25rem 1.25rem -1.25rem;
    }
    
    .race-header-background {
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        text-align: left;
    }
    
    .race-header-enhanced .race-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        color: var(--admin-white) !important;
    }
    
    .race-header-enhanced .race-name {
        font-size: 1.125rem;
        color: var(--admin-white) !important;
    }
}

@media (max-width: 480px) {
    .race-header-enhanced {
        margin: -1rem -1rem 1rem -1rem;
    }
    
    .race-header-background {
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .race-header-enhanced .race-icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
        color: var(--admin-white) !important;
    }
    
    .race-header-enhanced .race-name {
        font-size: 1rem;
        color: var(--admin-white) !important;
    }
    
    .race-header-enhanced .race-badge {
        padding: 0.25rem 0.75rem;
        font-size: 0.6875rem;
    }
}

/* ============================================
   MODULAR PRICING SYSTEM STYLES - IMPROVED CONTRAST
   ============================================ */

/* Fix contrast issues with colored backgrounds */
.race-card.competitive-race {
    background: var(--registration-white);
    border-color: #f59e0b;
    color: var(--admin-neutral-800);
    border-width: 2px;
    border-style: solid;
}

.race-card.competitive-race .feature-item,
.race-card.competitive-race .price-label {
    color: var(--admin-neutral-800) !important;
}

.race-card.family-race {
    background: var(--registration-white);
    border-color: #10b981;
    color: var(--admin-neutral-800);
    border-width: 2px;
    border-style: solid;
}

.race-card.family-race .feature-item,
.race-card.family-race .price-label {
    color: var(--admin-neutral-800) !important;
}

/* Dynamic tier styling for modular system */
.race-card[data-tier-id] {
    position: relative;
    overflow: hidden;
    background: var(--registration-white);
    border-width: 2px;
    border-style: solid;
}

/* Tier-specific styling that maintains good contrast */
.race-card.tier-5km {
    border-color: #10b981;
}

.race-card.tier-10km {
    border-color: #f59e0b;
}

.race-card.tier-singles {
    border-color: #2563eb;
}

.race-card.tier-doubles {
    border-color: var(--admin-cyan-600);
}

.race-card.tier-standard {
    border-color: var(--admin-gray-500);
}

.race-card.tier-vip {
    border-color: #a855f7;
}

/* Ensure text remains readable on all tier backgrounds */
.race-card[data-tier-id] .race-name,
.race-card[data-tier-id] .feature-item,
.race-card[data-tier-id] .price-label,
.race-card[data-tier-id] .race-description p {
    color: var(--admin-neutral-800) !important;
    text-shadow: none;
}

/* Race description styling */
.race-description {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.race-description p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--admin-neutral-600);
}

/* Tier notes styling */
.tier-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tier-notes .price-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--admin-green-600);
    font-weight: 600;
    background: rgba(5, 150, 105, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.tier-notes .price-note:last-child {
    margin-bottom: 0;
}

.tier-notes .price-note i {
    color: var(--admin-green-600);
    font-size: 0.875rem;
}

/* Improved race badge contrast */
.race-badge {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dynamic race badge colors with good contrast */
.race-card[data-tier-id] .race-badge {
    background: var(--registration-dark);
    color: var(--registration-white);
}

/* Pricing fallback styling */
.pricing-fallback {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--admin-neutral-50), var(--admin-neutral-100));
    border-radius: var(--registration-radius-lg);
    border: 2px dashed var(--registration-gray-300);
    color: var(--registration-gray-600);
}

.pricing-fallback p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Enhanced feature icons for better visibility */
.feature-item i {
    background: rgba(37, 99, 235, 0.1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Better price option styling with improved contrast */
.price-option {
    position: relative;
    background: var(--registration-white);
    border: 2px solid var(--registration-gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.price-option.featured {
    border-color: var(--registration-primary);
    background: var(--registration-white);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.price-option.featured::before {
    background: linear-gradient(135deg, var(--registration-primary), var(--admin-blue-500));
}

/* Improved early bird notice contrast */
.early-bird-notice {
    background: var(--admin-amber-100);
    border: 2px solid #f59e0b;
    color: var(--admin-amber-800);
}

.early-bird-notice .notice-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--admin-amber-800);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.early-bird-notice .notice-content {
    color: var(--admin-amber-800);
    font-weight: 600;
}

.early-bird-notice .notice-content strong {
    color: #78350f;
}

/* Improved race selection note */
.race-selection-note {
    background: var(--admin-blue-50);
    border: 2px solid var(--admin-blue-200);
    color: var(--admin-blue-800);
}

.race-selection-note i {
    color: #2563eb;
}

/* Custom CSS classes for different event types */
.racing-style .race-card {
    border-width: 3px;
    transform: skew(-2deg);
}

.racing-style .race-card:hover {
    transform: skew(-2deg) translateY(-3px);
}

.competitive-colors .price-option.featured {
    background: linear-gradient(135deg, var(--admin-amber-100), var(--admin-amber-200));
    border-color: #f59e0b;
}

.competitive-colors .race-badge {
    background: linear-gradient(135deg, #f59e0b, var(--admin-amber-600));
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .race-card {
        border-width: 3px;
        border-color: var(--admin-night-900) !important;
    }
    
    .race-card .race-name,
    .race-card .feature-item,
    .race-card .price-label {
        color: var(--admin-night-900) !important;
        font-weight: 700;
    }
    
    .race-badge {
        background: var(--admin-night-900) !important;
        color: var(--admin-white) !important;
        border: 2px solid var(--admin-white);
    }
    
    .price-option {
        border-color: var(--admin-night-900) !important;
        border-width: 3px;
    }
    
    .early-bird-notice,
    .race-selection-note {
        border-color: var(--admin-night-900) !important;
        border-width: 3px;
    }
}

/* Accessibility improvements */
.race-card:focus-within {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1);
}

.price-option:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Enhanced contrast for text readability */
.race-card .race-name,
.race-card .feature-item,
.price-option .price-label {
    color: var(--admin-neutral-800) !important;
    font-weight: 600;
}

.race-card .race-description p {
    color: var(--admin-neutral-700) !important;
    line-height: 1.6;
}

/* Ensure sufficient contrast for interactive elements */
.btn-register:focus {
    outline: 3px solid var(--admin-neutral-800);
    outline-offset: 2px;
}

/* High contrast adjustments */
@media (prefers-contrast: high) {
    .race-card,
    .price-option {
        border-width: 3px !important;
        border-color: var(--admin-gray-900) !important;
    }
    
    .race-card .race-name,
    .race-card .feature-item,
    .price-option .price-label,
    .btn-register {
        color: var(--admin-night-900) !important;
        font-weight: 700 !important;
    }
    
    .btn-register {
        background: var(--admin-gray-900) !important;
        border: 2px solid var(--admin-white) !important;
    }
}

/* Animation for tier cards (respecting reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .race-card[data-tier-id] {
        animation: fadeInUp 0.6s ease-out;
    }
    
    .race-card[data-tier-id]:nth-child(2) {
        animation-delay: 0.1s;
    }
    
    .race-card[data-tier-id]:nth-child(3) {
        animation-delay: 0.2s;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Responsive improvements for modular system */
@media (max-width: 768px) {
    .race-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .race-card[data-tier-id] {
        margin-bottom: 1rem;
    }
    
    .tier-notes .price-note {
        font-size: 0.8125rem;
        padding: 0.75rem;
    }
    
    .race-description {
        padding: 1rem;
    }
    
    .early-bird-notice .notice-icon {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .race-card {
        padding: 1rem;
    }
    
    .race-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .race-icon {
        width: 40px;
        height: 40px;
    }
    
    .pricing-options {
        gap: 0.75rem;
    }
    
    .amount {
        font-size: 1.5rem;
    }
    
    .racing-style .race-card {
        transform: none;
    }
    
    .racing-style .race-card:hover {
        transform: translateY(-2px);
    }
}

/* ============================================
   CRITICAL WHITE TEXT OVERRIDE - MAXIMUM SPECIFICITY
   ============================================ */

/* Force white text in race headers with maximum specificity */
.race-card .race-header-enhanced .race-info .race-name,
.race-card .race-header-enhanced .race-name,
.race-card[data-tier-id] .race-header-enhanced .race-info .race-name,
.race-card[data-tier-id] .race-header-enhanced .race-name,
.race-header-enhanced .race-info .race-name,
.race-header-enhanced .race-name {
    color: var(--admin-white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Force white icons in race headers */
.race-card .race-header-enhanced .race-icon,
.race-card[data-tier-id] .race-header-enhanced .race-icon,
.race-header-enhanced .race-icon {
    color: var(--admin-white) !important;
}

/* Ensure white text in all header contexts */
.race-header .race-name,
.race-header-enhanced .race-name,
.race-card .race-header .race-name,
.race-card .race-header-enhanced .race-name {
    color: var(--admin-white) !important;
}

/* ==================================================================
   sections/css/sponsors-modern.css
   ================================================================== */
/**
 * MODERN SPONSOR CARDS - REDESIGNED VERSION
 * 
 * Features:
 * - Much larger and more prominent sponsor logos
 * - Modern glassmorphism and neumorphism effects
 * - Better spacing and typography
 * - Enhanced mobile responsiveness
 * - Smooth animations and micro-interactions
 * 
 * @version: 3.0.0 - Modern Redesign
 * @author: ColomboWebsite Development Team
 */

/* ============================================
   ENHANCED CSS VARIABLES
   ============================================ */
:root {
    /* Modern color palette */
    --sponsors-primary: var(--admin-primary);
    --sponsors-secondary: var(--admin-ink);
    --sponsors-accent: var(--admin-accent);
    --sponsors-success: #10b981;
    --sponsors-danger: var(--admin-red-500);
    --sponsors-white: var(--admin-white);
    --sponsors-gray-50: var(--admin-neutral-50);
    --sponsors-gray-100: var(--admin-neutral-100);
    --sponsors-gray-200: var(--admin-neutral-200);
    --sponsors-gray-300: var(--admin-neutral-300);
    --sponsors-gray-400: var(--admin-neutral-400);
    --sponsors-gray-500: var(--admin-neutral-500);
    --sponsors-gray-600: var(--admin-neutral-600);
    --sponsors-gray-700: var(--admin-neutral-700);
    --sponsors-gray-800: var(--admin-neutral-800);
    --sponsors-gray-900: var(--admin-neutral-900);
    
    /* Modern shadows */
    --sponsors-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sponsors-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sponsors-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sponsors-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sponsors-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-backdrop: blur(20px);
    
    /* Enhanced border radius */
    --sponsors-radius: 0.75rem;
    --sponsors-radius-lg: 1rem;
    --sponsors-radius-xl: 1.25rem;
    --sponsors-radius-2xl: 1.5rem;
    --sponsors-radius-3xl: 2rem;
}

/* ============================================
   SPONSORS SECTION BASE - MODERNIZED
   ============================================ */
.sponsors-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, 
        var(--sponsors-gray-50) 0%, 
        #fefefe 25%, 
        var(--sponsors-white) 50%, 
        #fafafa 75%, 
        var(--sponsors-gray-100) 100%);
    position: relative;
    overflow: hidden;
}

.sponsors-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(var(--admin-primary-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(30, 58, 95, 0.05) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
}

/* ============================================
   ENHANCED SECTION HEADER
   ============================================ */
.sponsors-section .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.sponsors-section .section-title {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--admin-brand-primary-deep) 0%, var(--admin-ink) 50%, var(--admin-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.025em;
    text-shadow: 0 0 30px rgba(var(--admin-primary-rgb), 0.3);
}

.sponsors-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--admin-brand-primary-deep), var(--admin-ink), var(--admin-accent));
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(var(--admin-primary-rgb), 0.3);
}

.sponsors-section .section-subtitle {
    font-size: 1.25rem;
    color: var(--sponsors-gray-600);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 400;
}

/* ============================================
   SPONSOR TIER SPACING - FIXED
   ============================================ */
.sponsor-tier {
    margin-bottom: 4.5rem; /* More space between sponsor categories */
    opacity: 0;
    animation: sponsorFadeInUp 0.8s ease forwards;
}

.sponsor-tier:last-of-type {
    margin-bottom: 0;
}

/* ============================================
   MODERN SPONSORS GRID - REDESIGNED
   ============================================ */
.sponsors-grid {
    display: grid;
    gap: 2.5rem;
    justify-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.main-sponsors {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.secondary-sponsors {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ============================================
   MODERN SPONSOR CARDS - COMPLETELY REDESIGNED
   ============================================ */
.sponsor-item {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(248, 250, 252, 0.9) 100%);
    border-radius: var(--sponsors-radius-2xl);
    padding: 0; /* Remove padding to let logo container take full space */
    box-shadow: var(--sponsors-shadow-lg);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: center;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    min-height: 320px;
}

/* Premium glassmorphism effect */
.sponsor-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: var(--sponsors-radius-2xl);
}

.sponsor-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--sponsors-shadow-xl);
    border-color: rgba(var(--admin-primary-rgb), 0.3);
}

/* Main sponsors get even more prominence */
.main-sponsor {
    min-height: 380px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(249, 250, 251, 0.95) 100%);
}

.main-sponsor::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--admin-accent), #f97316, var(--admin-orange-600));
    border-radius: var(--sponsors-radius-2xl);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.main-sponsor:hover::after {
    opacity: 0.8;
}

/* ============================================
   ENHANCED LOGO CONTAINER - MAIN FEATURE
   ============================================ */
.sponsor-logo-container {
    height: 180px; /* MUCH LARGER - was 80px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(248, 250, 252, 0.9) 100%);
    border-radius: var(--sponsors-radius-2xl) var(--sponsors-radius-2xl) 0 0;
    padding: 2rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.main-sponsor .sponsor-logo-container {
    height: 220px; /* EVEN BIGGER for main sponsors - was 100px */
    padding: 2.5rem;
}

/* Logo styling */
.sponsor-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.sponsor-item:hover .sponsor-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.main-sponsor:hover .sponsor-logo {
    transform: scale(1.12);
}

/* Enhanced placeholder for logos */
.sponsor-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(var(--admin-primary-rgb), 0.05) 0%, 
        rgba(30, 58, 95, 0.05) 100%);
    border-radius: var(--sponsors-radius-lg);
    color: var(--sponsors-gray-500);
    border: 2px dashed rgba(var(--admin-primary-rgb), 0.2);
}

.sponsor-placeholder i {
    font-size: 3rem; /* Larger placeholder icon */
    color: var(--sponsors-primary);
    opacity: 0.8;
}

.sponsor-placeholder span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sponsors-gray-600);
}

/* ============================================
   MODERN SPONSOR INFO SECTION
   ============================================ */
.sponsor-info {
    padding: 1.5rem 2rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    position: relative;
}

.sponsor-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sponsors-gray-900);
    margin-bottom: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.015em;
}

.main-sponsor .sponsor-name {
    font-size: 1.4rem;
    font-weight: 800;
}

.sponsor-description {
    font-size: 0.95rem;
    color: var(--sponsors-gray-600);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

/* ============================================
   ENHANCED WEBSITE LINK
   ============================================ */
.sponsor-website {
    font-size: 0.9rem;
    color: var(--sponsors-white);
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-brand-primary-deep));
    border-radius: 2rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: center;
    box-shadow: 0 4px 14px rgba(var(--admin-primary-rgb), 0.4);
    position: relative;
    overflow: hidden;
}

.sponsor-website::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.sponsor-website:hover::before {
    left: 100%;
}

.sponsor-website:hover {
    background: linear-gradient(135deg, var(--admin-brand-primary-deep), var(--admin-primary), var(--admin-brand-primary-lift));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--admin-primary-rgb), 0.5);
}

.sponsor-website i {
    font-size: 1rem;
}

/* ============================================
   TIER TITLES - ENHANCED
   ============================================ */
.tier-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sponsors-gray-800);
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.025em;
    position: relative;
}

.tier-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0.6;
}

.tier-title i {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ============================================
   ENHANCED RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .sponsors-section {
        padding: 4rem 0;
    }
    
    .sponsor-tier {
        margin-bottom: 3.5rem; /* Reduce spacing on mobile but keep separation */
    }
    
    .sponsors-grid {
        gap: 2rem;
        padding: 0 0.75rem;
    }

    .main-sponsors,
    .secondary-sponsors {
        grid-template-columns: 1fr;
    }

    .sponsor-item,
    .main-sponsor {
        min-height: 280px;
    }

    .sponsor-logo-container,
    .main-sponsor .sponsor-logo-container {
        height: 140px;
        padding: 1.5rem;
    }

    .sponsor-name {
        font-size: 1.1rem;
    }

    .main-sponsor .sponsor-name {
        font-size: 1.25rem;
    }

    .tier-title {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    .tier-title i {
        font-size: 1.4rem;
    }
    
    /* Become Sponsor Section Mobile */
    .become-sponsor-section {
        padding: 2rem 0;
    }

    .become-sponsor-card {
        padding: 2rem;
    }

    .become-sponsor-content h3 {
        font-size: 1.5rem;
    }

    .become-sponsor-content p {
        font-size: 1rem;
    }

    .sponsor-benefits {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .benefit-item {
        padding: 1rem;
    }

    .benefit-item i {
        font-size: 1.5rem;
    }

    .cta-container h4 {
        font-size: 1.2rem;
    }

    .sponsor-cta-btn {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .sponsors-section {
        padding: 3rem 0;
    }
    
    .sponsor-tier {
        margin-bottom: 2.5rem; /* Compact spacing for very small screens */
    }

    .sponsor-item,
    .main-sponsor {
        min-height: 250px;
    }

    .sponsor-logo-container,
    .main-sponsor .sponsor-logo-container {
        height: 120px;
        padding: 1.25rem;
    }

    .sponsor-info {
        padding: 1.25rem 1.5rem 1.75rem;
    }

    .sponsor-name {
        font-size: 1rem;
    }

    .main-sponsor .sponsor-name {
        font-size: 1.15rem;
    }

    .sponsor-website {
        padding: 0.75rem 1.25rem;
        font-size: 0.85rem;
    }

    .tier-title {
        font-size: 1.4rem;
        gap: 0.75rem;
    }

    .tier-title i {
        font-size: 1.2rem;
    }
    
    /* Become Sponsor Section Extra Small Mobile */
    .become-sponsor-card {
        padding: 1.5rem;
    }

    .become-sponsor-content h3 {
        font-size: 1.3rem;
    }

    .benefit-item {
        padding: 0.75rem;
    }

    .benefit-item i {
        font-size: 1.3rem;
    }

    .benefit-item span {
        font-size: 0.9rem;
    }

    .sponsor-cta-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        border-radius: 2rem;
    }
}

/* ============================================
   BECOME SPONSOR SECTION - RESTORED ORIGINAL STYLING
   ============================================ */
.become-sponsor-section {
    background: linear-gradient(135deg, 
        rgba(30, 58, 95, 0.15) 0%, 
        rgba(139, 69, 234, 0.18) 25%, 
        rgba(147, 51, 234, 0.16) 50%, 
        rgba(168, 85, 247, 0.14) 75%, 
        rgba(30, 58, 95, 0.12) 100%);
    padding: 5rem 0;
    margin-top: 4rem;
    position: relative;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--admin-ink), #2d4f7a, var(--admin-ink), #2d4f7a, var(--admin-ink)) 1;
    overflow: hidden;
}

.become-sponsor-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(30, 58, 95, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.04) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c3aed' fill-opacity='0.02'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
    animation: backgroundPulse 8s infinite;
}

@keyframes backgroundPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.become-sponsor-section .container {
    position: relative;
    z-index: 1;
}

.become-sponsor-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(251, 248, 255, 0.96) 25%, 
        rgba(248, 250, 252, 0.97) 75%, 
        rgba(255, 255, 255, 0.95) 100%);
    border-radius: var(--sponsors-radius-2xl);
    padding: 3.5rem;
    box-shadow: 
        0 25px 50px rgba(30, 58, 95, 0.2),
        0 10px 25px rgba(168, 85, 247, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
}

.become-sponsor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        var(--admin-ink) 0%, 
        #2d4f7a 20%, 
        var(--admin-ink) 40%, 
        #2d4f7a 60%, 
        #c084fc 80%, 
        var(--admin-ink) 100%);
    border-radius: var(--sponsors-radius-2xl) var(--sponsors-radius-2xl) 0 0;
    z-index: 1;
    animation: enhancedPurpleGlow 4s infinite;
}

@keyframes enhancedPurpleGlow {
    0%, 100% { 
        opacity: 0.9; 
        box-shadow: 0 0 15px rgba(30, 58, 95, 0.3);
    }
    25% { 
        opacity: 1; 
        box-shadow: 0 0 25px rgba(139, 69, 234, 0.4);
    }
    50% { 
        opacity: 0.95; 
        box-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
    }
    75% { 
        opacity: 1; 
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
    }
}

.become-sponsor-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sponsors-gray-800);
    margin-bottom: 1rem;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.become-sponsor-content p {
    font-size: 1.1rem;
    color: var(--sponsors-gray-600);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   SPONSOR BENEFITS
   ============================================ */
.sponsor-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.benefit-item {
    background: var(--sponsors-gray-50);
    padding: 1.25rem;
    border-radius: var(--sponsors-radius-lg);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--sponsors-gray-200);
}

.benefit-item:hover {
    background: var(--sponsors-white);
    border-color: var(--sponsors-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--admin-primary-rgb), 0.1);
}

.benefit-item i {
    font-size: 2rem;
    color: var(--sponsors-primary);
    margin-bottom: 0.75rem;
}

.benefit-item span {
    display: block;
    font-weight: 600;
    color: var(--sponsors-gray-800);
    margin-bottom: 0.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.benefit-item small {
    color: var(--sponsors-gray-600);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-container {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--sponsors-gray-200);
}

.cta-container h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sponsors-gray-800);
    margin-bottom: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cta-container p {
    color: var(--sponsors-gray-600);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.sponsor-cta-btn {
    background: linear-gradient(135deg, var(--admin-ink), #2d4f7a, var(--admin-ink));
    color: var(--sponsors-white);
    padding: 1.25rem 3rem;
    border-radius: 3rem;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.4);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.sponsor-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.sponsor-cta-btn:hover::before {
    left: 100%;
}

.sponsor-cta-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 35px rgba(30, 58, 95, 0.5);
    background: linear-gradient(135deg, var(--admin-navy-900), var(--admin-ink), var(--admin-ink));
}

.sponsor-cta-btn i {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.contact-info {
    margin-top: 1.5rem;
    color: var(--sponsors-gray-600);
}

.contact-info small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--sponsors-gray-500);
}

/* ============================================
   ENHANCED ANIMATIONS & MICRO-INTERACTIONS
   ============================================ */
@keyframes sponsorFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sponsor-tier {
    opacity: 0;
    animation: sponsorFadeInUp 0.8s ease forwards;
}

.sponsor-tier:nth-child(1) { animation-delay: 0.1s; }
.sponsor-tier:nth-child(2) { animation-delay: 0.2s; }
.sponsor-tier:nth-child(3) { animation-delay: 0.3s; }
.sponsor-tier:nth-child(4) { animation-delay: 0.4s; }
.sponsor-tier:nth-child(5) { animation-delay: 0.5s; }

/* Loading shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.sponsor-logo {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

.sponsor-logo[src] {
    background: none;
    animation: none;
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .sponsor-item,
    .sponsor-logo,
    .sponsor-website,
    .sponsor-tier {
        animation: none;
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .sponsor-item {
        border: 2px solid var(--sponsors-gray-600);
        background: var(--sponsors-white);
    }

    .sponsor-logo-container {
        border-bottom: 2px solid var(--sponsors-gray-600);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sponsors-section {
        padding: 1rem 0;
        background: white;
    }

    .sponsor-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--sponsors-gray-400);
        background: white;
    }

    .sponsor-website {
        background: var(--sponsors-gray-600);
        box-shadow: none;
    }
}

/* ==================================================================
   sections/css/route.css
   ================================================================== */
/**
 * Route Section Styles - Focused & Corrected
 * Matching actual HTML template classes
 * 
 * @author: Senior Software Engineer
 * @version: 5.0.0
 * @description: Lightweight route section styles matching the HTML template
 */

/* ============================================
   ROUTE SECTION BASE
   ============================================ */
#route {
    background: linear-gradient(135deg, var(--admin-white) 0%, var(--admin-gray-50) 50%, var(--admin-white) 100%);
    position: relative;
    padding: 4rem 0;
    overflow: hidden;
}

#route::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
}

#route .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   ENHANCED MAP CONTAINER
   ============================================ */
.route-map-full-width {
    border-radius: 1rem;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.1);
    margin: 2rem 0;
    position: relative;
}

.map-container-full {
    width: 100%;
    height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.map-container-full iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 1rem;
}

/* Enhanced GPX Map Container */
#gpx-map-container {
    width: 100%;
    position: relative;
    margin: 2rem 0;
}

/* Custom Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
}

.leaflet-popup-tip {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.custom-popup .leaflet-popup-content {
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Enhanced marker hover effects */
.custom-marker:hover,
.custom-waypoint-marker:hover {
    transform: scale(1.1) !important;
    z-index: 1000 !important;
}

/* Map controls styling */
.leaflet-control-zoom a {
    border-radius: 0.5rem !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-control-zoom a:hover {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.map-placeholder {
    background: var(--gray-50);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: var(--border-radius-lg);
    border: 2px dashed var(--gray-300);
    color: var(--gray-600);
}

.map-placeholder .placeholder-content {
    max-width: 400px;
    margin: 0 auto;
}

.map-placeholder i {
    font-size: 3rem;
    color: var(--admin-primary);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.map-placeholder p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.map-placeholder small {
    font-size: 0.9rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #2563eb, var(--admin-blue-500));
    border-radius: 6px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   FULL WIDTH SECTIONS
   ============================================ */
.full-width-section {
    padding: 4rem 0;
    position: relative;
}

.full-width-section:nth-child(even) {
    background-color: #f8f9fa;
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================
   MODERN CARDS
   ============================================ */
/* Enhanced modern cards */
.modern-card {
    background: var(--admin-white);
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
}

.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.01) 0%, 
        rgba(124, 58, 237, 0.01) 100%);
    pointer-events: none;
    z-index: 1;
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.2);
}

.modern-card-header {
    background: linear-gradient(135deg, 
        var(--admin-gray-800) 0%, 
        #2563eb 50%, 
        var(--admin-violet-600) 100%);
    padding: 2rem;
    color: var(--admin-white) !important;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.modern-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    transition: left 0.6s ease;
}

.modern-card:hover .modern-card-header::before {
    left: 100%;
}

.modern-card-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--admin-white) !important;
}

.modern-card-header i {
    color: var(--admin-amber-400);
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}

.modern-card-body {
    padding: 2.5rem;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
}

/* ============================================
   ROUTE DESCRIPTION
   ============================================ */
.route-text {
    color: #495057;
    line-height: 1.7;
    font-size: 1.1rem;
}

.route-text h3,
.route-text h4 {
    color: #0a2540;
    margin-bottom: 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.route-text h3 {
    font-size: 1.4rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.route-text p {
    margin-bottom: 1rem;
    color: #6c757d;
}

.route-text ul,
.route-text ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.route-text li {
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.route-text strong {
    color: #0a2540;
    font-weight: 700;
}

/* ============================================
   MODERN TIMELINE (POI)
   ============================================ */
.modern-timeline {
    position: relative;
    margin: 2rem 0;
}

.modern-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #2563eb 0%, var(--admin-blue-500) 100%);
    border-radius: 6px;
    z-index: 1;
}

.modern-timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    opacity: 0;
    animation: slideInUp 0.6s ease forwards;
}

.modern-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.modern-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.modern-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.modern-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.modern-timeline-item:nth-child(5) { animation-delay: 0.5s; }
.modern-timeline-item:nth-child(6) { animation-delay: 0.6s; }

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

.modern-timeline-item:nth-child(odd) {
    flex-direction: row;
    text-align: left;
}

.modern-timeline-item:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

.modern-timeline-dot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--admin-white);
    z-index: 2;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border: 4px solid var(--admin-white);
    position: relative;
    margin: 0 2rem;
    transition: all 0.3s ease;
}

.modern-timeline-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

/* POI Type Colors */
.modern-timeline-dot.poi-start { 
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.modern-timeline-dot.poi-tunnel { 
    background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
}

.modern-timeline-dot.poi-medical { 
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.modern-timeline-dot.poi-refreshment { 
    background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
}

.modern-timeline-dot.poi-turnaround { 
    background: linear-gradient(135deg, var(--admin-violet-600) 0%, var(--admin-violet-400) 100%);
}

.modern-timeline-dot.poi-warning { 
    background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
}

.modern-timeline-dot.poi-info {
    background: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-400) 100%);
}

.modern-timeline-dot.poi-sign {
    background: linear-gradient(135deg, #7b3f00 0%, #b45309 100%);
}

.modern-timeline-dot.poi-gallery {
    background: linear-gradient(135deg, var(--admin-gray-600) 0%, var(--admin-gray-400) 100%);
}

.modern-timeline-dot.poi-default {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.modern-timeline-content {
    background: var(--admin-white);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
    max-width: 400px;
    position: relative;
    transition: all 0.3s ease;
}

.modern-timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.modern-timeline-content::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--admin-white);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -10px;
    border: 1px solid #dee2e6;
    z-index: -1;
}

.modern-timeline-item:nth-child(odd) .modern-timeline-content::before {
    left: -10px;
}

.modern-timeline-item:nth-child(even) .modern-timeline-content::before {
    right: -10px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.modern-timeline-item:nth-child(even) .timeline-header {
    flex-direction: row-reverse;
}

.timeline-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0a2540;
    margin: 0;
    flex: 1;
}

.kilometer-badge {
    background: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    color: var(--admin-white);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    white-space: nowrap;
}

.timeline-body {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
}

/* ============================================
   NAVIGAZIONE E INFORMAZIONI - ENHANCED SECTION
   ============================================ */

/* Section container with modern background */
.full-width-section {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.02) 0%, 
        rgba(124, 58, 237, 0.02) 50%, 
        rgba(6, 182, 212, 0.02) 100%);
    padding: 4rem 0;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}

.full-width-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--admin-primary) 0%, 
        var(--accent-cyan, #06b6d4) 25%,
        var(--secondary-color, var(--admin-violet-600)) 50%,
        var(--accent-cyan, #06b6d4) 75%,
        var(--admin-primary) 100%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.full-width-section .section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Enhanced section header */
.full-width-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

/* Full-width section now uses global enhanced header styles */

/* Enhanced cards grid */
.route-details-horizontal-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
}

/* Enhanced action buttons */
.modern-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

.modern-action-btn {
    padding: 1.25rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}

.modern-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.6s ease;
}

.modern-action-btn:hover::before {
    left: 100%;
}

.modern-action-btn.primary {
    background: linear-gradient(135deg, #2563eb, var(--admin-blue-500), #1d4ed8);
    color: var(--admin-white);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
    position: relative;
    z-index: 1;
}

.modern-action-btn.primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.5);
    filter: brightness(1.1);
}

.modern-action-btn.secondary {
    background: var(--admin-white);
    color: #2563eb;
    border: 2px solid #2563eb;
}

.modern-action-btn.secondary:hover {
    background: #2563eb;
    color: var(--admin-white);
    transform: translateY(-2px);
}

.modern-action-btn.success {
    background: linear-gradient(135deg, #10b981, var(--admin-green-600), var(--admin-green-700));
    color: var(--admin-white);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4);
    position: relative;
    z-index: 1;
}

.modern-action-btn.success:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.5);
    filter: brightness(1.1);
}

.modern-info-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

.modern-info-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 1.1rem;
    color: var(--admin-neutral-700);
    padding: 1rem;
    background: rgba(37, 99, 235, 0.02);
    border-radius: 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.08);
    transition: all 0.3s ease;
    font-weight: 500;
}

.modern-info-item:hover {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.15);
}

.modern-info-item i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #2563eb;
    background: #eef4ff;
    border-radius: 10px;
    box-shadow: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
/* Enhanced responsive design for Navigazione e Informazioni */
@media (max-width: 1024px) {
    .full-width-section {
        padding: 3rem 0;
        margin: 2rem 0;
    }
    
    /* Full-width section uses global responsive header styles */
    
    .route-details-horizontal-card {
        gap: 1.25rem;
    }
    
    .modern-timeline::before {
        left: 40px;
    }
    
    .modern-timeline-item {
        flex-direction: row !important;
        text-align: left !important;
    }
    
    .modern-timeline-item:nth-child(even) .timeline-header {
        flex-direction: row;
    }
    
    .modern-timeline-dot {
        margin: 0 2rem 0 0;
    }
    
    .modern-timeline-content::before {
        left: -10px !important;
        right: auto !important;
    }
}

@media (max-width: 768px) {
    #route {
        padding: 3rem 0;
    }
    
    .full-width-section {
        padding: 2.5rem 0;
        margin: 1.5rem 0;
    }
    
    .full-width-section .section-content {
        padding: 0 1.5rem;
    }
    
    /* Enhanced Map Responsive */
    .route-map-full-width {
        margin: 1.5rem 0;
    }
    
    .map-container-full {
        height: 400px;
    }
    
    /* Map statistics responsive */
    .enhanced-stats {
        padding: 1.5rem;
    }
    
    /* Leaflet controls mobile adjustments */
    .leaflet-control-zoom {
        margin-left: 10px !important;
        margin-top: 10px !important;
    }
    
    .leaflet-control-attribution {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }
    
    /* Full-width section uses global responsive header styles */
    
    .section-title {
        font-size: 2rem;
    }
    
    .route-details-horizontal-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .modern-card-header {
        padding: 1.5rem;
    }
    
    .modern-card-header h3 {
        font-size: 1.5rem;
        color: var(--admin-white) !important;
    }
    
    .modern-card-body {
        padding: 2rem;
    }
    
    .modern-action-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    .modern-info-item {
        padding: 0.875rem;
        font-size: 1rem;
    }
    
    .modern-info-item i {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    
    .modern-timeline::before {
        left: 30px;
    }
    
    .modern-timeline-dot {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin: 0 1rem 0 0;
    }
    
    .modern-timeline-content {
        max-width: none;
        flex: 1;
    }
}

/* ─── Compact neutral route actions ───────────────── */
#route .full-width-section:last-child {
    padding: 1.5rem 0;
    background: var(--admin-white);
}

#route .full-width-section:last-child .section-header {
    margin-bottom: 0.85rem;
}

#route .full-width-section:last-child .section-title {
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    color: var(--admin-neutral-900);
    background: none;
    -webkit-text-fill-color: currentColor;
}

#route .full-width-section:last-child .section-title::after {
    background: var(--admin-neutral-300);
    width: 44px;
    height: 2px;
}

#route .full-width-section:last-child .section-subtitle {
    font-size: 0.95rem;
    color: var(--admin-neutral-500);
}

#route .full-width-section:last-child .modern-card,
#route .route-details-horizontal-card .modern-card {
    border-radius: 10px;
    border: 1px solid var(--admin-neutral-200);
    box-shadow: none;
}

/* Light "paper" headers for arrival/tools cards — must beat .modern-card-header h3 { color: #fff !important } */
#route .full-width-section:last-child .modern-card-header,
#route .route-details-horizontal-card .modern-card-header {
    background: var(--admin-neutral-50);
    border-bottom: 1px solid var(--admin-neutral-200);
    color: var(--admin-neutral-900) !important;
}

#route .full-width-section:last-child .modern-card-header h3,
#route .route-details-horizontal-card .modern-card-header h3 {
    font-size: 1rem;
    color: var(--admin-neutral-900) !important;
    text-shadow: none;
}

#route .full-width-section:last-child .modern-card-header i,
#route .route-details-horizontal-card .modern-card-header i {
    color: #b45309;
    filter: none;
    text-shadow: none;
}

#route .full-width-section:last-child .modern-action-btn,
#route .route-details-horizontal-card .modern-action-btn {
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
}

/* Distinct soft tones per action (was: all white — unreadable hierarchy) */
#route .full-width-section:last-child .modern-action-btn.primary,
#route .route-details-horizontal-card .modern-action-btn.primary {
    background: linear-gradient(180deg, var(--admin-blue-50) 0%, var(--admin-blue-100) 100%);
    color: #1e3a8a;
    border: 1px solid var(--admin-blue-300);
}

#route .full-width-section:last-child .modern-action-btn.secondary,
#route .route-details-horizontal-card .modern-action-btn.secondary {
    background: var(--admin-gray-50);
    color: #334155;
    border: 1px solid var(--admin-gray-300);
}

#route .full-width-section:last-child .modern-action-btn.success,
#route .route-details-horizontal-card .modern-action-btn.success {
    background: linear-gradient(180deg, var(--admin-green-50) 0%, var(--admin-green-100) 100%);
    color: var(--admin-green-800);
    border: 1px solid #6ee7b7;
}

#route .full-width-section:last-child .modern-action-btn:hover,
#route .route-details-horizontal-card .modern-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

#route .full-width-section:last-child .modern-action-btn.primary:hover,
#route .route-details-horizontal-card .modern-action-btn.primary:hover {
    background: linear-gradient(180deg, var(--admin-blue-100) 0%, var(--admin-blue-200) 100%);
    border-color: var(--admin-blue-500);
    color: #172554;
}

#route .full-width-section:last-child .modern-action-btn.secondary:hover,
#route .route-details-horizontal-card .modern-action-btn.secondary:hover {
    background: var(--admin-gray-100);
    border-color: var(--admin-gray-400);
    color: var(--admin-gray-900);
}

#route .full-width-section:last-child .modern-action-btn.success:hover,
#route .route-details-horizontal-card .modern-action-btn.success:hover {
    background: linear-gradient(180deg, var(--admin-green-100) 0%, var(--admin-green-200) 100%);
    border-color: var(--admin-green-400);
    color: #064e3b;
}

#route .full-width-section:last-child .modern-info-item,
#route .route-details-horizontal-card .modern-info-item {
    border-radius: 10px;
    background: var(--admin-white);
    border: 1px solid var(--admin-neutral-200);
    color: var(--admin-neutral-700);
}

/* Compact "Come arrivare" — Mappa e tracce / Servizi (horizontal cards only) */
#route .route-details-horizontal-card {
    gap: 1.25rem;
    margin-bottom: 1rem;
}

#route .route-details-horizontal-card .modern-card {
    margin-bottom: 0;
}

#route .route-details-horizontal-card .modern-card-header {
    padding: 0.65rem 1rem;
}

#route .route-details-horizontal-card .modern-card-header h3 {
    gap: 0.5rem;
}

#route .route-details-horizontal-card .modern-card-header i {
    font-size: 1.1rem;
}

#route .route-details-horizontal-card .modern-card-body {
    padding: 0.75rem 1rem 0.9rem;
}

#route .route-details-horizontal-card .modern-action-buttons {
    gap: 0.65rem;
}

#route .route-details-horizontal-card .modern-action-btn {
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.45rem;
    letter-spacing: 0.02em;
    border-radius: 6px;
}

#route .route-details-horizontal-card .modern-action-btn i {
    font-size: 1rem;
}

#route .full-width-section:last-child .modern-action-btn.primary i,
#route .route-details-horizontal-card .modern-action-btn.primary i {
    color: #2563eb;
}

#route .full-width-section:last-child .modern-action-btn.secondary i,
#route .route-details-horizontal-card .modern-action-btn.secondary i {
    color: var(--admin-gray-600);
}

#route .full-width-section:last-child .modern-action-btn.success i,
#route .route-details-horizontal-card .modern-action-btn.success i {
    color: var(--admin-green-600);
}

#route .route-details-horizontal-card .modern-info-content {
    gap: 0.5rem;
}

#route .route-details-horizontal-card .modern-info-item {
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    gap: 0.6rem;
}

#route .route-details-horizontal-card .modern-info-item:hover {
    transform: translateX(3px);
}

#route .route-details-horizontal-card .modern-info-item i {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    border-radius: 9px;
    padding: 0;
}

@media (max-width: 480px) {
    #route {
        padding: 2rem 0;
    }
    
    .section-content {
        padding: 0 0.5rem;
    }
    
    /* Enhanced Map Mobile */
    .map-container-full {
        height: 350px;
    }
    
    #gpx-map-container {
        margin: 1.5rem 0;
    }
    
    /* Mobile-optimized statistics display */
    .enhanced-stats {
        padding: 1.5rem;
        margin-top: 1rem;
    }
    
    .map-placeholder {
        padding: 2rem 1rem;
    }
    
    .map-placeholder i {
        font-size: 2rem;
    }
    
    .modern-card-header {
        padding: 1rem;
    }
    
    .modern-card-body {
        padding: 1rem;
    }
    
    .modern-timeline-item {
        margin-bottom: 2rem;
    }
    
    .modern-timeline-dot {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .timeline-title {
        font-size: 1.1rem;
    }
    
    .kilometer-badge {
        align-self: flex-start;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .modern-timeline-item {
        animation: none;
        opacity: 1;
    }
    
    .modern-timeline-dot:hover,
    .modern-timeline-content:hover,
    .modern-action-btn:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .modern-card,
    .modern-timeline-content {
        border: 2px solid #495057;
    }
    
    .modern-timeline-dot {
        border-width: 3px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    #route {
        padding: 1rem 0;
    }
    
    .modern-timeline::before {
        display: none;
    }
    
    .modern-timeline-dot {
        box-shadow: none;
        border: 2px solid var(--admin-night-900);
    }
    
    .modern-card,
    .modern-timeline-content {
        box-shadow: none;
        border: 1px solid var(--admin-night-900);
    }
    
    .modern-action-btn {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY & ANIMATIONS
   ============================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .full-width-section::before,
    .modern-card-header::before,
    .modern-action-btn::before,
    .full-width-section .section-title i {
        animation: none;
    }
    
    .modern-card:hover,
    .modern-action-btn:hover,
    .modern-info-item:hover {
        transform: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .full-width-section {
        background: var(--admin-white);
        border: 2px solid var(--admin-night-900);
    }
    
    .modern-card {
        border: 2px solid var(--admin-night-900);
        box-shadow: none;
    }
    
    .modern-card-header {
        background: var(--admin-night-900);
        color: var(--admin-white);
    }
    
    .modern-info-item {
        border: 1px solid var(--admin-night-900);
        background: var(--admin-white);
    }
    
    .modern-info-item i {
        background: var(--admin-night-900);
        color: var(--admin-white);
    }
}

/* Focus states for keyboard navigation */
.modern-action-btn:focus,
.modern-info-item:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* Enhanced loading states */
.modern-card.loading {
    opacity: 0.7;
    pointer-events: none;
}

.modern-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--admin-gray-200);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================================================================
   sections/css/eventi-footer.css
   ================================================================== */
/**
 * Eventi Page - Enhanced Footer Overrides
 * Ensures consistent and modern footer styling for event pages
 * Matches the main "Bright & Warm" design system with navy/gold theme
 */

/* ============================================
   EVENTI FOOTER CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Use the same color scheme as the main enhanced footer */
    --footer-navy-dark: var(--admin-navy-900);
    --footer-navy: var(--admin-ink);
    --footer-accent-gold: var(--admin-accent);
    --footer-accent-warm: #f59e0b;
    --footer-accent-light: #fcd34d;
}

/* ============================================
   EVENTI PAGE FOOTER ENHANCEMENTS
   ============================================ */

/* Target both old .site-footer and new .enhanced-footer for compatibility */
.events-page .site-footer,
.events-page .enhanced-footer {
    /* Use the same navy gradient as main footer - ensure it overrides any conflicting styles */
    background: var(--gradient-primary, linear-gradient(135deg, var(--admin-ink) 0%, var(--admin-navy-900) 100%)) !important;
    margin-top: 4rem;
    position: relative;
    color: var(--admin-white);
}

/* Ensure all text in footer is white */
.events-page .site-footer,
.events-page .site-footer *,
.events-page .enhanced-footer,
.events-page .enhanced-footer * {
    color: inherit;
}

/* Enhanced decorative elements for eventi pages - consistent with main footer */
.events-page .site-footer::before,
.events-page .enhanced-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 15% 50%, rgba(212, 168, 83, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Gold accent line - consistent with main footer */
.events-page .site-footer .footer-accent,
.events-page .enhanced-footer .footer-accent {
    height: 4px;
    background: var(--gradient-accent, linear-gradient(90deg, var(--admin-accent), #f59e0b, var(--admin-accent)));
}

/* Top accent bar if exists */
.events-page .site-footer::after,
.events-page .enhanced-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent, linear-gradient(90deg, var(--admin-accent), #f59e0b, var(--admin-accent)));
    z-index: 1;
}

/* Enhanced organization section for eventi - gold theme */
.events-page .org-info {
    background: rgba(212, 168, 83, 0.08);
    border: 1px solid rgba(212, 168, 83, 0.15);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(212, 168, 83, 0.1);
}

.events-page .org-info:hover {
    background: rgba(212, 168, 83, 0.12);
    border-color: rgba(212, 168, 83, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Enhanced contact methods for eventi - gold theme */
.events-page .contact-method {
    background: rgba(212, 168, 83, 0.06);
    border: 1px solid rgba(212, 168, 83, 0.12);
}

.events-page .contact-method:hover {
    background: rgba(212, 168, 83, 0.1);
    border-color: var(--footer-accent-gold, var(--admin-accent));
    box-shadow: 0 8px 25px rgba(212, 168, 83, 0.15);
}

/* Enhanced social icons for eventi - gold theme */
.events-page .social-icon {
    background: rgba(212, 168, 83, 0.08);
    border: 1px solid rgba(212, 168, 83, 0.15);
}

.events-page .social-icon:hover {
    background: var(--gradient-accent, linear-gradient(135deg, var(--admin-accent), #f59e0b));
    border-color: var(--footer-accent-gold, var(--admin-accent));
    box-shadow: 0 8px 25px rgba(212, 168, 83, 0.3);
    color: var(--footer-navy-dark, var(--admin-navy-900));
}

/* Enhanced links for eventi - gold accents */
.events-page .links-column a:hover::before,
.events-page .footer-links a:hover::before {
    background: var(--footer-accent-gold, var(--admin-accent)) !important;
}

.events-page .footer-links a:hover {
    color: var(--footer-accent-gold, var(--admin-accent)) !important;
}

.events-page .footer-section h3::after,
.events-page .footer-column h4::after {
    background: var(--gradient-accent, linear-gradient(90deg, var(--admin-accent), #f59e0b));
}

/* Enhanced legal links for eventi - gold accents */
.events-page .footer-legal-links a:hover {
    background: rgba(212, 168, 83, 0.15);
    color: var(--footer-accent-light, #fcd34d);
}

/* Footer bottom enhancement for eventi - consistent styling */
.events-page .footer-bottom {
    background: rgba(212, 168, 83, 0.05);
    border-top: 1px solid rgba(212, 168, 83, 0.15);
    backdrop-filter: blur(10px);
}

/* Social links in enhanced footer - ensure gold theme */
.events-page .enhanced-footer .social-link {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.events-page .enhanced-footer .social-link:hover {
    background: var(--gradient-accent, linear-gradient(135deg, var(--admin-accent), #f59e0b));
    border-color: var(--footer-accent-gold, var(--admin-accent));
    color: var(--footer-navy-dark, var(--admin-navy-900));
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.3);
}

/* Contact items in enhanced footer - gold icons */
.events-page .enhanced-footer .contact-icon {
    background: rgba(212, 168, 83, 0.12);
}

.events-page .enhanced-footer .contact-icon i {
    color: var(--footer-accent-gold, var(--admin-accent));
}

/* Column titles in enhanced footer - gold color */
.events-page .enhanced-footer .footer-column h4 {
    color: var(--footer-accent-gold, var(--admin-accent));
}

.events-page .enhanced-footer .footer-column h4::after {
    background: var(--footer-accent-gold, var(--admin-accent));
}

/* Footer links in enhanced footer - gold hover */
.events-page .enhanced-footer .footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.events-page .enhanced-footer .footer-links a:hover {
    color: var(--footer-accent-gold, var(--admin-accent));
    transform: translateX(4px);
}

.events-page .enhanced-footer .footer-links a:hover::before {
    background: var(--footer-accent-gold, var(--admin-accent));
    transform: scale(1.3);
}

/* Newsletter button in enhanced footer - gold gradient */
.events-page .enhanced-footer .newsletter-form button,
.events-page .enhanced-footer .newsletter-mini .newsletter-footer-widget button[type="submit"] {
    background: var(--gradient-accent, linear-gradient(135deg, var(--admin-accent), #f59e0b));
    color: var(--footer-navy-dark, var(--admin-navy-900));
}

.events-page .enhanced-footer .newsletter-form button:hover,
.events-page .enhanced-footer .newsletter-mini .newsletter-footer-widget button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 168, 83, 0.3);
}

/* Newsletter input focus - gold border */
.events-page .enhanced-footer .newsletter-form input:focus,
.events-page .enhanced-footer .newsletter-mini .newsletter-footer-widget input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--footer-accent-gold, var(--admin-accent));
}

/* Contact details links in enhanced footer */
.events-page .enhanced-footer .contact-details a {
    color: rgba(255, 255, 255, 0.85);
}

.events-page .enhanced-footer .contact-details a:hover {
    color: var(--footer-accent-gold, var(--admin-accent));
}

/* Legal links in enhanced footer - gold hover */
.events-page .enhanced-footer .footer-legal-links a {
    color: rgba(255, 255, 255, 0.5);
}

.events-page .enhanced-footer .footer-legal-links a:hover {
    color: var(--footer-accent-gold, var(--admin-accent));
}

/* Mobile optimizations for eventi footer */
@media (max-width: 768px) {
    .events-page .site-footer,
    .events-page .enhanced-footer {
        margin-top: 3rem;
    }
    
    .events-page .org-info {
        padding: 1.25rem;
    }
    
    .events-page .contact-method {
        padding: 0.875rem;
    }
    
    .events-page .social-icon {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 480px) {
    .events-page .site-footer,
    .events-page .enhanced-footer {
        margin-top: 2rem;
    }
}

/* Accessibility enhancements for eventi */
@media (prefers-reduced-motion: reduce) {
    .events-page .site-footer::before,
    .events-page .enhanced-footer::before {
        animation: none;
    }
    
    .events-page .org-info:hover,
    .events-page .contact-method:hover,
    .events-page .social-icon:hover {
        transform: none;
    }
}

/* High contrast support for eventi - navy/gold theme */
@media (prefers-contrast: high) {
    .events-page .site-footer,
    .events-page .enhanced-footer {
        background: var(--footer-navy-dark, var(--admin-navy-900)) !important;
        border-top: 2px solid var(--footer-accent-gold, var(--admin-accent));
    }
    
    .events-page .org-info,
    .events-page .contact-method {
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid var(--footer-accent-gold, var(--admin-accent));
    }
}

/* ==================================================================
   sections/css/gallery.css
   ================================================================== */
/**
 * Gallery Section Styles
 * Modern photo gallery with category filtering and responsive design
 * Enhanced with better animations and modal functionality
 */

/* ============================================
   Gallery Section Base
   ============================================ */
.gallery-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #dee2e6 50%, transparent 100%);
}

.gallery-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #dee2e6 50%, transparent 100%);
}

/* ============================================
   Section Header
   ============================================ */
.gallery-section .section-header {
    margin-bottom: 3rem;
    position: relative;
}

.gallery-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
}

.gallery-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 2px;
}

.gallery-section .section-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   Category Filter
   ============================================ */
.gallery-filter {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.filter-btn {
    background: white;
    border: 2px solid #e9ecef;
    color: #495057;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
}

.filter-btn.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #007bff;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.4);
}

.filter-btn .badge {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.filter-btn:not(.active) .badge {
    background: #e9ecef;
    color: #6c757d;
}

/* ============================================
   Gallery Grid
   ============================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}

/* For small galleries (≤3 photos), use centered layout */
.gallery-grid:not(:has(.gallery-item:nth-child(4))) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    max-width: 1000px;
    margin: 0 auto 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: fadeInUp 0.6s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }

.gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gallery-item-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.9);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-content {
    text-align: center;
    color: white;
    padding: 1.5rem;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover .gallery-overlay-content {
    transform: translateY(0);
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gallery-category {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    font-weight: 500;
}

.gallery-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
}

.gallery-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.gallery-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.gallery-actions .badge {
    background: rgba(255, 193, 7, 0.9);
    color: #212529;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
}

/* ============================================
   Enhanced Modal Styles
   ============================================ */
#galleryModal {
    backdrop-filter: blur(10px);
}

#galleryModal .modal-dialog {
    max-width: 95vw;
    max-height: 95vh;
    margin: 2.5vh auto;
}

#galleryModal .modal-content {
    background: rgba(0, 0, 0, 0.95);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

#galleryModal .modal-header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#galleryModal .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

#galleryModal .modal-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#galleryModal .modal-controls .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

#galleryModal .modal-controls .btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

#galleryModal .btn-close-white {
    filter: invert(1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

#galleryModal .btn-close-white:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

#galleryModal .modal-body {
    padding: 0;
    position: relative;
}

.gallery-modal-image-wrapper {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-night-900);
    overflow: hidden;
}

.gallery-modal-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#galleryModal .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    border-radius: 0 0 20px 20px;
    backdrop-filter: blur(10px);
}

#galleryModal .carousel-caption h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#galleryModal .carousel-caption p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

#galleryModal .photo-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

#galleryModal .carousel-control-prev:hover,
#galleryModal .carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

#galleryModal .carousel-indicators {
    bottom: 20px;
    gap: 0.5rem;
    margin: 0;
}

#galleryModal .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    margin: 0 0.25rem;
}

#galleryModal .carousel-indicators button:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

#galleryModal .carousel-indicators button.active {
    background: #007bff;
    border-color: #007bff;
    transform: scale(1.2);
}

#galleryModal .modal-footer {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

.gallery-modal-info {
    font-size: 0.875rem;
    opacity: 0.8;
}

.gallery-modal-counter,
.gallery-modal-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Keyboard Help Modal
   ============================================ */
#keyboardHelpModal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

#keyboardHelpModal .modal-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-radius: 15px 15px 0 0;
}

#keyboardHelpModal .modal-body {
    padding: 1.5rem;
}

#keyboardHelpModal kbd {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-family: monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   No Photos State
   ============================================ */
.no-photos-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.no-photos-icon {
    margin-bottom: 2rem;
}

.no-photos-state h4 {
    color: #6c757d;
    margin-bottom: 1rem;
    font-weight: 600;
}

.no-photos-state p {
    color: #868e96;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .gallery-section {
        padding: 3rem 0;
    }
    
    .gallery-section .section-title {
        font-size: 2rem;
    }
    
    .filter-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .filter-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .gallery-overlay-content {
        padding: 1rem;
    }
    
    .gallery-title {
        font-size: 1rem;
    }
    
    #galleryModal .modal-dialog {
        max-width: 98vw;
        margin: 1vh auto;
    }
    
    #galleryModal .modal-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    #galleryModal .modal-controls {
        width: 100%;
        justify-content: center;
    }
    
    #galleryModal .carousel-caption {
        padding: 1.5rem 1rem 1rem;
    }
    
    #galleryModal .carousel-caption h5 {
        font-size: 1.25rem;
    }
    
    #galleryModal .carousel-control-prev,
    #galleryModal .carousel-control-next {
        width: 50px;
        height: 50px;
        margin: 0 1rem;
    }
    
    .gallery-modal-image-wrapper {
        height: 60vh;
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .filter-btn .badge {
        font-size: 0.7rem;
    }
    
    .gallery-overlay-content {
        padding: 0.75rem;
    }
    
    .gallery-actions .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    #galleryModal .modal-dialog {
        max-width: 100vw;
        margin: 0;
        height: 100vh;
    }
    
    #galleryModal .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    
    .gallery-modal-image-wrapper {
        height: 70vh;
    }
    
    #galleryModal .carousel-caption {
        padding: 1rem;
    }
    
    #galleryModal .carousel-caption h5 {
        font-size: 1.1rem;
    }
    
    #galleryModal .carousel-caption p {
        font-size: 0.9rem;
    }
    
    .photo-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ============================================
   Accessibility & Performance
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .filter-btn,
    .gallery-image,
    .gallery-overlay,
    .gallery-overlay-content,
    #galleryModal .carousel-control-prev,
    #galleryModal .carousel-control-next,
    #galleryModal .carousel-indicators button {
        transition: none;
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .gallery-overlay {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .filter-btn {
        border-width: 3px;
    }
    
    .gallery-item {
        border: 2px solid var(--admin-night-900);
    }
    
    #galleryModal .carousel-control-prev,
    #galleryModal .carousel-control-next {
        border-width: 3px;
    }
}

/* ============================================
   Loading States
   ============================================ */
.gallery-item.loading {
    position: relative;
    overflow: hidden;
}

.gallery-item.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: spin 1.5s infinite;
}

@keyframes spin {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ============================================
   Enhanced Hover Effects
   ============================================ */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-item:hover::before {
    transform: translateX(100%);
}

/* ============================================
   Featured Photo Styling
   ============================================ */
/* Only apply featured spans when enough items exist */
.gallery-grid:has(.gallery-item:nth-child(4)) .gallery-item.featured:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.featured {
    /* Enhanced styling for featured items without grid spanning for small galleries */
    border: 2px solid #ffc107;
    box-shadow: 0 8px 30px rgba(255, 193, 7, 0.3);
}

/* Only increase height for featured items in larger galleries */
.gallery-grid:has(.gallery-item:nth-child(4)) .gallery-item.featured:first-child .gallery-item-wrapper {
    height: 400px;
}

.gallery-item.featured .gallery-item-wrapper {
    height: 280px; /* Consistent height for small galleries */
}

.gallery-item.featured .gallery-overlay-content {
    padding: 2rem;
}

.gallery-item.featured .gallery-title {
    font-size: 1.3rem;
}

@media (max-width: 768px) {
    .gallery-item.featured {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .gallery-item.featured .gallery-item-wrapper {
        height: 250px;
    }
    
    .gallery-item.featured .gallery-overlay-content {
        padding: 1.5rem;
    }
    
    .gallery-item.featured .gallery-title {
        font-size: 1.1rem;
    }
}

/* ============================================
   Focus States for Accessibility
   ============================================ */
.gallery-item:focus-within {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

.filter-btn:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

#galleryModal .btn:focus {
    outline: 3px solid var(--admin-white);
    outline-offset: 2px;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .gallery-section {
        background: white;
        padding: 1rem 0;
    }
    
    .gallery-filter,
    .gallery-overlay,
    #galleryModal {
        display: none !important;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .gallery-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ==================================================================
   sections/css/final-cta.css
   ================================================================== */
/**
 * Final Call-to-Action Section Styles - Refactored from final_cta.css
 * Modern final section with compelling registration CTA
 * 
 * @author: Senior Software Engineer
 * @version: 2.0.0
 * @description: Final section with animated CTA for event registration
 */

/* ============================================
   CSS VARIABLES - CONSISTENT WITH DESIGN SYSTEM
   ============================================ */
:root {
    /* Final CTA specific variables */
    --final-cta-primary: #2563eb;
    --final-cta-secondary: var(--admin-blue-500);
    --final-cta-accent: #f59e0b;
    --final-cta-success: #10b981;
    --final-cta-danger: var(--admin-red-500);
    --final-cta-dark: var(--admin-neutral-800);
    --final-cta-light: var(--admin-gray-50);
    --final-cta-white: var(--admin-white);
    
    /* Gradients for final CTA */
    --final-cta-gradient-primary: linear-gradient(135deg, #2563eb 0%, var(--admin-blue-500) 100%);
    --final-cta-gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, var(--admin-violet-600) 100%);
    --final-cta-gradient-accent: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    
    /* Shadows */
    --final-cta-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    --final-cta-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --final-cta-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Radius */
    --final-cta-radius: 0.75rem;
    --final-cta-radius-lg: 1rem;
    --final-cta-radius-xl: 1.5rem;
    --final-cta-radius-2xl: 2rem;
    --final-cta-radius-3xl: 3rem;
}

/* ============================================
   FINAL CTA SECTION BASE
   ============================================ */
.final-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(241, 245, 249, 0.5));
    position: relative;
    overflow: hidden;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.03'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
}

.final-cta-section .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   FINAL CTA CARD
   ============================================ */
.final-cta {
    background: var(--final-cta-gradient-primary);
    color: var(--final-cta-white);
    border-radius: var(--final-cta-radius-2xl);
    padding: 3.75rem 2rem;
    box-shadow: var(--final-cta-shadow-xl);
    text-align: center;
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.3s ease;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
    animation: shine 6s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.final-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--final-cta-shadow-xl);
}

/* ============================================
   CTA CONTENT
   ============================================ */
.final-cta .cta-body {
    position: relative;
    z-index: 1;
}

.final-cta .cta-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.025em;
}

.final-cta .cta-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.final-cta .cta-text {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   CTA HIGHLIGHTS
   ============================================ */
.cta-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: var(--final-cta-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cta-highlight:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cta-highlight i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--final-cta-accent);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.cta-highlight strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--final-cta-white);
}

.cta-highlight span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

/* ============================================
   CTA BUTTONS
   ============================================ */
.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--final-cta-white);
    color: var(--final-cta-primary);
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: var(--final-cta-radius-3xl);
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.025em;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, var(--admin-blue-500) 25%, #8b5cf6 50%, var(--admin-violet-600) 75%, #6366f1 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cta-button:hover::before {
    opacity: 1;
}

.cta-button:hover {
    background: linear-gradient(135deg, var(--admin-gray-800) 0%, #2563eb 25%, var(--admin-violet-600) 50%, #6d28d9 75%, #5b21b6 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4);
}

.cta-button i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.cta-button span {
    position: relative;
    z-index: 1;
}

.cta-button:hover i {
    transform: translateX(2px);
}

.cta-button-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--final-cta-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    font-weight: 600;
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

.cta-button-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--final-cta-white);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* ============================================
   URGENCY INDICATORS
   ============================================ */
.cta-urgency {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.urgency-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.urgency-text i {
    color: var(--final-cta-accent);
    font-size: 1rem;
    animation: pulse 2s infinite;
}

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

.urgency-counter {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: var(--final-cta-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* ============================================
   SOCIAL PROOF
   ============================================ */
.cta-social-proof {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.social-proof-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.social-proof-avatars {
    display: flex;
    justify-content: center;
    gap: -0.5rem;
    margin-bottom: 1rem;
}

.social-proof-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--final-cta-white);
    background: var(--final-cta-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--final-cta-white);
    margin-left: -0.5rem;
    position: relative;
    z-index: 1;
}

.social-proof-avatar:first-child {
    margin-left: 0;
}

.social-proof-stats {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-proof-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.social-proof-stat i {
    color: var(--final-cta-accent);
    font-size: 0.8rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 3rem 0;
    }
    
    .final-cta {
        padding: 2.5rem 1.5rem;
        border-radius: var(--final-cta-radius-xl);
    }
    
    .final-cta .cta-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .final-cta .cta-subtitle {
        font-size: 1rem;
    }
    
    .final-cta .cta-text {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .cta-highlights {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .cta-highlight {
        padding: 0.75rem;
    }
    
    .cta-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
    
    .cta-button-secondary {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .social-proof-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .final-cta-section {
        padding: 2rem 0;
    }
    
    .final-cta {
        padding: 2rem 1rem;
        border-radius: var(--final-cta-radius-lg);
    }
    
    .final-cta .cta-title {
        font-size: 1.75rem;
    }
    
    .final-cta .cta-text {
        font-size: 1rem;
    }
    
    .cta-highlights {
        margin-bottom: 1.5rem;
    }
    
    .cta-highlight {
        padding: 0.5rem;
    }
    
    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .cta-button-secondary {
        padding: 0.625rem 1.25rem;
        font-size: 0.85rem;
    }
    
    .social-proof-avatars {
        gap: -0.25rem;
    }
    
    .social-proof-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
        margin-left: -0.25rem;
    }
}

/* ============================================
   ACCESSIBILITY & MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .final-cta::before {
        animation: none;
    }
    
    .urgency-text i {
        animation: none;
    }
    
    .cta-button,
    .cta-button-secondary,
    .cta-highlight {
        transition: none;
    }
    
    .cta-button:hover,
    .cta-button-secondary:hover,
    .cta-highlight:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .final-cta {
        border: 2px solid var(--final-cta-white);
    }
    
    .cta-highlight {
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
    
    .cta-button {
        border: 2px solid var(--final-cta-primary);
    }
    
    .cta-button-secondary {
        border: 2px solid var(--final-cta-white);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .final-cta-section {
        padding: 1rem 0;
    }
    
    .final-cta {
        background: var(--final-cta-white) !important;
        color: var(--final-cta-dark) !important;
        box-shadow: none;
        border: 2px solid var(--final-cta-dark);
    }
    
    .final-cta::before {
        display: none;
    }
    
    .cta-highlights {
        display: none;
    }
    
    .social-proof-avatars {
        display: none;
    }
    
    .cta-button,
    .cta-button-secondary {
        background: var(--final-cta-white) !important;
        color: var(--final-cta-dark) !important;
        border: 2px solid var(--final-cta-dark) !important;
    }
    
    .urgency-text i {
        animation: none;
    }
}