/* ================================================================
   PACKER LEGENDS HOUSECALLS™ - PREMIUM LUXURY EXPERIENCE
   A World-Class Design for Discerning Packers Fans
   ================================================================ */

/* Body scroll lock for mobile menu */
body.menu-open {
    overflow: hidden;
}

/* ============================================
   PREMIUM COLOR PALETTE & DESIGN TOKENS
   ============================================ */
:root {
    /* Primary Packers Colors - Enriched */
    --packers-green: #1a3a2f;
    --packers-green-rich: #0d2a21;
    --packers-green-deep: #071812;
    --packers-gold: #d4a818;
    --packers-gold-bright: #f5c842;
    --packers-gold-pale: #ffeaa7;
    
    /* Luxury Accents */
    --champagne: #f7e7ce;
    --ivory: #fffff0;
    --platinum: #e5e4e2;
    --obsidian: #0a0a0a;
    
    /* Neutrals */
    --white: #ffffff;
    --off-white: #fafaf8;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    /* Feedback Colors */
    --success: #2d6a4f;
    --success-light: #d8f3dc;
    --warning: #b7791f;
    --warning-light: #fef3c7;
    --error: #9b2c2c;
    --error-light: #fed7d7;
    
    /* Premium Shadows - Layered Depth */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-gold: 0 4px 20px rgba(212, 168, 24, 0.3);
    --shadow-gold-lg: 0 8px 40px rgba(212, 168, 24, 0.4);
    --shadow-green: 0 4px 20px rgba(26, 58, 47, 0.3);
    
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    
    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
}

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: var(--gray-800);
    background: var(--off-white);
    font-size: 16px;
    overflow-x: hidden;
    position: relative;
    max-width: 100%;
}

/* Premium Background Texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(212, 168, 24, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(26, 58, 47, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, rgba(212, 168, 24, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ============================================
   PREMIUM TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--packers-green);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

p {
    margin-bottom: 1rem;
    color: var(--gray-700);
}

.hidden { display: none !important; }

/* ============================================
   PREMIUM HEADER & NAVIGATION
   ============================================ */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(180deg, 
        rgba(13, 42, 33, 0.9) 0%, 
        rgba(26, 58, 47, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 168, 24, 0.2);
    transition: var(--transition);
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 168, 24, 0.5) 50%, 
        transparent 100%);
}

.header-mobile-tagline {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--packers-gold);
    background: transparent;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.header-mobile-tagline.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .header-mobile-tagline {
        display: block;
    }
}

.navbar {
    padding: 1rem 0;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    position: relative;
}

.logo-icon {
    width: 73px;
    height: 73px;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: relative;
    animation: none;
}

@keyframes logoGlow {
    0%, 100% { box-shadow: 0 4px 15px rgba(212, 168, 24, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(212, 168, 24, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3); }
}

.logo-icon::before {
    content: none;
}

.logo-icon i {
    color: var(--packers-green);
    font-size: 1.4rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.logo-icon .logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.logo-text-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.logo-text-link:hover {
    opacity: 0.8;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 0 30px rgba(212, 168, 24, 0.3);
}

.logo-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

/* Hide mobile menu header on desktop */
.mobile-menu-header {
    display: none;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.9rem;
    padding: 10px 0;
    position: relative;
    letter-spacing: 0.5px;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright));
    transition: var(--transition);
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-link:hover::before {
    width: 100%;
}

.nav-link:hover {
    color: var(--packers-gold);
    text-shadow: 0 0 20px rgba(212, 168, 24, 0.5);
}

.nav-link-cta {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green) !important;
    padding: 12px 28px !important;
    border-radius: var(--radius-full);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.3);
    border: none;
}

.nav-link-cta::before { display: none; }

.nav-link-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 168, 24, 0.5);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.nav-toggle:hover {
    background: rgba(212, 168, 24, 0.1);
}

.bar {
    width: 26px;
    height: 3px;
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright));
    margin: 3px 0;
    transition: var(--transition);
    border-radius: var(--radius-full);
}

/* ============================================
   PREMIUM HERO SECTION - Cinematic Experience
   ============================================ */
.hero {
    background: 
        linear-gradient(135deg, 
            rgba(7, 24, 18, 0.97) 0%, 
            rgba(13, 42, 33, 0.95) 50%,
            rgba(26, 58, 47, 0.93) 100%),
        url('/back3.jpg') no-repeat center center;
    background-size: cover, 100% auto;
    color: var(--white);
    padding: 160px 0 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Animated Background Elements - Contained to prevent overflow */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 800px 800px at 20% 30%, rgba(212, 168, 24, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 600px 600px at 80% 70%, rgba(212, 168, 24, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 400px 400px at 40% 80%, rgba(245, 200, 66, 0.04) 0%, transparent 50%);
    animation: heroGlowPulse 15s ease-in-out infinite;
    pointer-events: none;
    overflow: hidden;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0' fill='%23d4a818' fill-opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(180deg, transparent 0%, rgba(7, 24, 18, 0.3) 100%);
    pointer-events: none;
}

/* Decorative Lines */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 24, 18, 0.5) 100%);
    pointer-events: none;
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.05) 100%);
    border: 1px solid rgba(212, 168, 24, 0.4);
    padding: 10px 24px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-8);
    font-size: 0.85rem;
    color: var(--packers-gold);
    backdrop-filter: blur(10px);
    animation: badgePulse 3s ease-in-out infinite;
    position: relative;
    overflow: visible;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background-image: url('wi3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero-badge::before {
        display: none;
    }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(212, 168, 24, 0.1); }
    50% { box-shadow: 0 0 30px rgba(212, 168, 24, 0.2); }
}

.hero-badge i {
    font-size: 0.8rem;
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.hero-title {
    color: var(--white);
    margin-bottom: var(--space-6);
    padding-top: 100px;
    font-family: 'Playfair Display', serif;
    line-height: 1.15;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 8px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    position: relative;
}

.hero-title::before {
    content: '';
    position: absolute;
    top: calc(50% + 50px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 270px;
    height: 270px;
    background-image: url('wi3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
}


.hero-title .title-lead {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

.hero-title .title-sub {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-top: 0.1em;
}

.hero-title .highlight {
    font-size: clamp(3.5rem, 9vw, 6.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    background: linear-gradient(135deg, 
        var(--packers-gold) 0%, 
        #fff6d4 30%,
        var(--packers-gold-bright) 50%, 
        #fff6d4 70%,
        var(--packers-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    background-size: 200% 100%;
    animation: goldShimmer 4s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(212, 168, 24, 0.4));
    text-shadow: none;
}

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

.hero-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5%;
    right: -5%;
    height: 6px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 168, 24, 0.6) 20%, 
        var(--packers-gold) 50%, 
        rgba(212, 168, 24, 0.6) 80%, 
        transparent 100%);
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(212, 168, 24, 0.5);
}

.hero-description {
    font-size: 1.35rem;
    margin-bottom: var(--space-10);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-description strong,
.hero-description em {
    color: var(--packers-gold);
    font-weight: 500;
}

.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
    padding: var(--space-8) var(--space-10);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--packers-gold-bright) 0%, var(--packers-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(212, 168, 24, 0.4), transparent);
}

/* Single Featured Stat - Dynamic Rectangular Design */
.hero-stats-single {
    display: flex;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
}

.stat-item-featured {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: visible;
    box-shadow: none;
}

.name-float-wrap {
    display: inline-block;
    animation: statFloat 4s ease-in-out infinite;
}

.name-float-wrap-last {
    position: relative;
}

.legend-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 260%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.27) 0%,
        rgba(255, 255, 255, 0.14) 25%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 75%
    );
    filter: blur(10px);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.6s ease-out;
}

.legend-last-name {
    position: relative;
    z-index: 1;
}

.stat-item-legend-names {
    align-items: center;
    gap: var(--space-3);
}

.stat-item-featured::before {
    display: none;
}

.stat-shine {
    position: absolute;
    top: -20%;
    width: var(--shine-width, 60%);
    height: 140%;
    background: linear-gradient(
        var(--shine-angle, 90deg), 
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(212, 168, 24, 0.12) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(212, 168, 24, 0.12) 55%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 80%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
    transform-origin: center;
    transform: scaleX(0.003) skewX(var(--shine-skew, 0deg));
    filter: blur(var(--shine-blur, 0px));
}

.stat-shine.animate-ltr {
    animation: statShineLTR var(--shine-duration, 1.2s) var(--shine-easing, ease-in-out) forwards;
}

.stat-shine.animate-rtl {
    animation: statShineRTL var(--shine-duration, 1.2s) var(--shine-easing, ease-in-out) forwards;
}

.stat-item-featured::after {
    display: none;
}

@keyframes statPulse {
    0%, 100% { 
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 0 60px rgba(212, 168, 24, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 12px 40px rgba(0, 0, 0, 0.5),
            0 0 80px rgba(212, 168, 24, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

@keyframes statFloat {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-8px);
    }
}

@keyframes statShineLTR {
    0%   { left: -80%;  opacity: 1; transform: scale(0.003); }
    50%  {             opacity: 1; transform: scale(1); }
    100% { left: 120%; opacity: 1; transform: scale(0.003); }
}

@keyframes statShineRTL {
    0%   { left: 120%;  opacity: 1; transform: scale(0.003); }
    50%  {             opacity: 1; transform: scale(1); }
    100% { left: -80%; opacity: 1; transform: scale(0.003); }
}

@keyframes statShineLTR-desktop {
    0%   { left: calc(-80% - 200px);  opacity: 1; transform: scale(0.003); }
    50%  {                            opacity: 1; transform: scale(1); }
    100% { left: calc(120% + 200px); opacity: 1; transform: scale(0.003); }
}

@keyframes statShineRTL-desktop {
    0%   { left: calc(120% + 200px);  opacity: 1; transform: scale(0.003); }
    50%  {                            opacity: 1; transform: scale(1); }
    100% { left: calc(-80% - 200px); opacity: 1; transform: scale(0.003); }
}

@media (min-width: 1024px) {
    .stat-shine.animate-ltr {
        animation-name: statShineLTR-desktop;
    }
    
    .stat-shine.animate-rtl {
        animation-name: statShineRTL-desktop;
    }
}

.stat-item-featured .stat-number {
    font-size: 2.5rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, 
        var(--packers-gold-bright) 0%, 
        var(--packers-gold) 40%,
        #c99a10 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 20px rgba(212, 168, 24, 0.5));
    animation: numberGlow 2s ease-in-out infinite alternate;
    opacity: 0; /* Initially hidden for random display */
}

@keyframes numberGlow {
    0% {
        filter: drop-shadow(0 4px 20px rgba(212, 168, 24, 0.4));
    }
    100% {
        filter: drop-shadow(0 6px 30px rgba(212, 168, 24, 0.7));
    }
}

.stat-item-featured .stat-label {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 4px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0; /* Initially hidden for random display */
}

.hero-cta {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
}

/* Hero Primary Button - Book Your Experience */
.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, 
        var(--packers-gold-bright) 0%, 
        var(--packers-gold) 50%,
        #c99a10 100%);
    color: var(--packers-green);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 6px 20px rgba(212, 168, 24, 0.4),
        0 10px 40px rgba(212, 168, 24, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-hero-primary::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.6s ease;
}

.btn-hero-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 10px 30px rgba(212, 168, 24, 0.5),
        0 15px 50px rgba(212, 168, 24, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.btn-hero-primary:hover::before {
    left: 100%;
}

.btn-hero-primary:active {
    transform: translateY(-2px) scale(1.01);
}

/* Hero Secondary Button - Meet Our Legends */
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 0 0 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.btn-hero-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%,
        rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-hero-secondary:hover {
    transform: translateY(-4px);
    border-color: var(--packers-gold);
    color: var(--packers-gold);
    box-shadow: 
        0 8px 25px rgba(212, 168, 24, 0.25),
        0 0 30px rgba(212, 168, 24, 0.15),
        inset 0 0 20px rgba(212, 168, 24, 0.05);
}

.btn-hero-secondary:hover::before {
    opacity: 1;
}

.btn-hero-secondary:active {
    transform: translateY(-2px);
}

/* Dark Mode - Hero Buttons */
body.dark-mode .btn-hero-primary {
    background: linear-gradient(135deg, 
        var(--dm-gold-bright) 0%, 
        var(--dm-gold) 50%,
        #b8860b 100%);
    color: var(--packers-gold);
    box-shadow: 
        0 6px 20px rgba(232, 184, 42, 0.35),
        0 10px 40px rgba(232, 184, 42, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

body.dark-mode .btn-hero-primary:hover {
    box-shadow: 
        0 10px 30px rgba(232, 184, 42, 0.45),
        0 15px 50px rgba(232, 184, 42, 0.25),
        0 0 40px rgba(232, 184, 42, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

body.dark-mode .btn-hero-secondary {
    border-color: rgba(232, 184, 42, 0.4);
    color: var(--dm-text-primary);
}

body.dark-mode .btn-hero-secondary:hover {
    border-color: var(--dm-gold);
    color: var(--dm-gold);
    box-shadow: 
        0 8px 25px rgba(232, 184, 42, 0.2),
        0 0 30px rgba(232, 184, 42, 0.1),
        inset 0 0 20px rgba(232, 184, 42, 0.03);
}

/* Mobile - Hero Buttons */
@media (max-width: 768px) {
    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 14px 24px;
        font-size: 0.85rem;
        letter-spacing: 1px;
    }
}

.hero-trust {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.trust-logos {
    display: flex;
    gap: var(--space-10);
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    transition: var(--transition);
}

.trust-item:hover {
    transform: translateY(-3px);
}

.trust-logo {
    max-height: 100px;
    width: auto;
    object-fit: contain;
    transition: var(--transition);
}

.trust-item:hover .trust-logo {
    transform: scale(1.05);
}

.trust-logo-stay-green {
    padding-left: 10px;
    padding-right: 10px;
}

.trust-logo-jamber {
    max-height: 90px;
}

.trust-name {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
}

.trust-item:hover .trust-name {
    color: var(--packers-gold);
}

.trust-item:hover .trust-logo-jamber {
    transform: scale(0.945);
}

@media (max-width: 768px) {
    .hero-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    
    .trust-text {
        align-self: flex-start;
    }
    
    .trust-logos {
        position: relative;
        min-height: 120px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .trust-item {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 1s ease-in-out;
        pointer-events: none;
    }
    
    .trust-item.trust-active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .trust-item:hover {
        transform: translate(-50%, -50%);
    }
}

.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.hero-scroll a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--packers-gold);
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0.7;
    transition: var(--transition);
}

.hero-scroll a:hover {
    opacity: 1;
    transform: translateY(-5px);
}

.hero-scroll a i {
    animation: scrollBounce 2s ease-in-out infinite;
}

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

/* ============================================
   PREMIUM BUTTONS - Luxury 3D Effects
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-md);
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 0.95rem;
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.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: var(--transition-slow);
}

.btn:hover::before {
    left: 100%;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

.btn-primary {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 50%, var(--packers-gold) 100%);
    background-size: 200% 200%;
    color: var(--packers-green);
    box-shadow: 
        0 4px 15px rgba(212, 168, 24, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

.btn-primary:hover {
    background-position: 100% 100%;
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px rgba(212, 168, 24, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(212, 168, 24, 0.6);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 168, 24, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--packers-green);
    border: 2px solid var(--packers-green);
    box-shadow: 0 2px 10px rgba(26, 58, 47, 0.1);
}

.btn-outline:hover {
    background: var(--packers-green);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 58, 47, 0.25);
}

.btn-outline-dark {
    background: transparent;
    color: var(--packers-green);
    border: 2px solid var(--packers-green);
}

.btn-outline-dark:hover {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 58, 47, 0.3);
}

.btn-package {
    width: 100%;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--white);
    margin-top: var(--space-6);
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.2);
}

.btn-package:hover {
    background: linear-gradient(135deg, var(--packers-green-rich) 0%, var(--packers-green-deep) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 58, 47, 0.35);
}

.btn-package.btn-primary {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
}

.btn-block {
    width: 100%;
}

/* ============================================
   MINI PROGRESS INDICATOR - 3D SPHERICAL BALLS
   ============================================ */
.mini-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 13px;
}

/* Large Desktop - 100% larger progress indicator */
@media (min-width: 1400px) {
    .mini-progress {
        margin-bottom: 28px;
        gap: 8px;
    }
    
    .mini-progress-step {
        gap: 10px;
    }
    
    .mini-progress-ball {
        width: 40px;
        height: 40px;
    }
    
    .mini-progress-ball::before {
        top: 6px;
        left: 10px;
        width: 14px;
        height: 8px;
    }
    
    .mini-progress-ball::after {
        bottom: 4px;
        right: 8px;
        width: 6px;
        height: 6px;
    }
    
    .mini-progress-label {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }
    
    .mini-progress-line {
        width: 80px;
        height: 4px;
        margin: 0 12px;
    }
}

/* Medium-Large Desktop - 50% larger */
@media (min-width: 1200px) and (max-width: 1399px) {
    .mini-progress {
        margin-bottom: 22px;
        gap: 4px;
    }
    
    .mini-progress-step {
        gap: 7px;
    }
    
    .mini-progress-ball {
        width: 30px;
        height: 30px;
    }
    
    .mini-progress-ball::before {
        top: 5px;
        left: 8px;
        width: 10px;
        height: 6px;
    }
    
    .mini-progress-label {
        font-size: 0.65rem;
        letter-spacing: 1.2px;
    }
    
    .mini-progress-line {
        width: 55px;
        height: 3px;
        margin: 0 8px;
    }
}

/* Standard Desktop */
@media (min-width: 769px) and (max-width: 1199px) {
    .mini-progress {
        margin-bottom: 16px;
    }
    
    .mini-progress-ball {
        width: 24px;
        height: 24px;
    }
    
    .mini-progress-line {
        width: 45px;
        margin: 0 6px;
    }
}

/* Mobile - Additional spacing adjustments for mini progress */
@media (max-width: 768px) {
    .mini-progress {
        margin-top: -20px;
        margin-bottom: 18px;
    }
}

.mini-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mini-progress-ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 30%),
        linear-gradient(145deg, var(--gray-200) 0%, var(--gray-300) 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.mini-progress-ball::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 7px;
    height: 5px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.mini-progress-ball::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 4px;
    width: 5px;
    height: 4px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.mini-progress-step.completed .mini-progress-ball {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 35%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 25%),
        linear-gradient(145deg, var(--packers-gold-bright) 0%, var(--packers-gold) 50%, #c99a10 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(212, 168, 24, 0.5),
        0 4px 12px rgba(212, 168, 24, 0.3),
        0 0 15px rgba(212, 168, 24, 0.2);
    animation: ballFillPulse 0.6s ease-out;
}

@keyframes ballFillPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mini-progress-step.completed .mini-progress-ball::before {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, transparent 60%);
}

.mini-progress-label {
    font-size: 0.5rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mini-progress-step.completed .mini-progress-label {
    color: var(--packers-green);
}

.mini-progress-line {
    width: 35px;
    height: 2px;
    background: var(--gray-200);
    margin: 0 6px;
    margin-bottom: 14px;
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}

.mini-progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    transition: width 0.5s ease-out;
}

.mini-progress-step.completed + .mini-progress-line::after {
    width: 100%;
}

/* Dark Mode - Mini Progress */
body.dark-mode .mini-progress-ball {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.3) 0%, transparent 30%),
        linear-gradient(145deg, #3a4550 0%, #2a3540 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

body.dark-mode .mini-progress-step.completed .mini-progress-ball {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7) 0%, transparent 35%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.25) 0%, transparent 25%),
        linear-gradient(145deg, var(--dm-gold-bright) 0%, var(--dm-gold) 50%, #b8860b 100%);
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(232, 184, 42, 0.5),
        0 4px 12px rgba(232, 184, 42, 0.3),
        0 0 20px rgba(232, 184, 42, 0.25);
}

body.dark-mode .mini-progress-label {
    color: var(--dm-text-muted);
}

body.dark-mode .mini-progress-step.completed .mini-progress-label {
    color: var(--dm-gold);
}

body.dark-mode .mini-progress-line {
    background: var(--dm-border);
}

body.dark-mode .mini-progress-line::after {
    background: linear-gradient(90deg, var(--dm-gold) 0%, var(--dm-gold-bright) 100%);
}

/* ============================================
   SECTION NAVIGATION BUTTONS - PREMIUM LUXURY
   ============================================ */
.section-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    perspective: 1000px;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
}

/* Large Desktop - 130% larger font, 100% larger buttons with more spacing */
@media (min-width: 1400px) {
    .section-nav {
        gap: 32px;
        margin-bottom: var(--space-12);
    }
    
    .section-nav-btn {
        padding: 20px 48px;
        font-size: 1.84rem;
        letter-spacing: 3px;
        border-width: 3px;
        box-shadow: 
            0 4px 16px rgba(212, 168, 24, 0.2),
            0 8px 32px rgba(212, 168, 24, 0.12),
            inset 0 2px 0 rgba(255, 255, 255, 1);
    }
}

/* Medium-Large Desktop - scaled down */
@media (min-width: 1200px) and (max-width: 1399px) {
    .section-nav {
        gap: 24px;
        margin-bottom: var(--space-10);
    }
    
    .section-nav-btn {
        padding: 16px 38px;
        font-size: 1.4rem;
        letter-spacing: 2.5px;
        border-width: 2.5px;
    }
}

/* Standard Desktop - scaled down */
@media (min-width: 1024px) and (max-width: 1199px) {
    .section-nav {
        gap: 18px;
    }
    
    .section-nav-btn {
        padding: 13px 30px;
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
}

/* Small Desktop / Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
    .section-nav {
        gap: 14px;
    }
    
    .section-nav-btn {
        padding: 10px 24px;
        font-size: 0.9rem;
        letter-spacing: 1.5px;
    }
}

.section-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 21px;
    background: linear-gradient(180deg, 
        #ffffff 0%, 
        #f8f9fa 100%);
    color: var(--packers-green);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid var(--packers-gold);
    border-radius: var(--radius-full);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
        0 2px 8px rgba(212, 168, 24, 0.15),
        0 4px 16px rgba(212, 168, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform-style: preserve-3d;
}

/* Inner gold shimmer layer */
.section-nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, 
        rgba(212, 168, 24, 0.08) 0%,
        transparent 50%,
        rgba(212, 168, 24, 0.05) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Shimmer sweep effect */
.section-nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%);
    z-index: 1;
    transition: left 0.5s ease;
}

.section-nav-btn:hover::before {
    opacity: 1;
}

.section-nav-btn:hover::after {
    left: 100%;
}

.section-nav-btn:hover {
    background: linear-gradient(180deg, 
        var(--packers-gold-bright) 0%, 
        var(--packers-gold) 100%);
    color: var(--packers-green);
    border-color: var(--packers-gold-bright);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(212, 168, 24, 0.35),
        0 16px 40px rgba(212, 168, 24, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    letter-spacing: 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.section-nav-btn:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

/* Active state - Inverted gold/green premium look */
.section-nav-btn.active {
    background: linear-gradient(180deg, 
        var(--packers-gold-bright) 0%, 
        var(--packers-gold) 50%,
        #c99a10 100%);
    color: var(--packers-green);
    border-color: var(--packers-gold-bright);
    box-shadow: 
        0 4px 16px rgba(212, 168, 24, 0.4),
        0 8px 32px rgba(212, 168, 24, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.section-nav-btn.active::before {
    opacity: 0;
}

.section-nav-btn.active::after {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    /* Animation controlled by JavaScript for random timing */
}

.section-nav-btn.active.shimmer-active::after {
    animation: shimmerOnce 0.5s ease-out forwards;
}

@keyframes shimmerOnce {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes activeGlowLight {
    0%, 100% { 
        box-shadow: 
            0 4px 16px rgba(212, 168, 24, 0.4),
            0 8px 32px rgba(212, 168, 24, 0.25),
            inset 0 2px 0 rgba(255, 255, 255, 0.35),
            inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    }
    50% { 
        box-shadow: 
            0 6px 24px rgba(212, 168, 24, 0.5),
            0 12px 40px rgba(212, 168, 24, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    }
}

@keyframes shimmerSweep {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Mobile - Flexible buttons that always fit on one line */
@media (max-width: 768px) {
    .section-nav {
        flex-wrap: nowrap;
        gap: 6.9px;
        width: 100%;
        max-width: 100%;
        padding: 0 8px;
    }
    
    .section-nav-btn {
        flex: 0 1 auto;
        min-width: 0;
        padding: 8px 12px;
        font-size: clamp(0.55rem, 2.8vw, 0.75rem);
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
}

/* Ripple effect on click */
.section-nav-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 168, 24, 0.4) 0%, transparent 70%);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg) translateY(-20px);
        opacity: 0;
    }
}

/* ============================================
   PREMIUM SECTION HEADERS
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
    position: relative;
}

.section-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-image: url('wi-counties.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.12) 0%, rgba(212, 168, 24, 0.05) 100%);
    color: var(--packers-gold);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-5);
    border: 1px solid rgba(212, 168, 24, 0.2);
}

.section-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--packers-green);
    margin-bottom: var(--space-4);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--packers-gold), transparent);
    border-radius: 2px;
}

.section-title.left-align {
    text-align: left;
}

.section-title.left-align::after {
    left: 0;
    transform: none;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--gray-600);
    max-width: 850px;
    margin: var(--space-6) auto 0;
    line-height: 1.8;
}

/* Package Preview Icons */
.package-preview-icons {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
    margin-bottom: -45px;
}

.package-preview-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: floatIcon 15s ease-in-out infinite;
}

.package-preview-icon:nth-child(1) {
    animation-delay: 0s;
}

.package-preview-icon:nth-child(2) {
    animation-delay: 0.5s;
}

.package-preview-icon:nth-child(3) {
    animation-delay: 1s;
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.package-preview-icon:hover {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 8px 20px rgba(212, 168, 24, 0.3));
}

@media (max-width: 768px) {
    .packages .section-header {
        display: flex;
        flex-direction: column;
    }

    .packages .section-title {
        order: 1;
    }

    .packages .package-preview-icons {
        order: 2;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        position: static;
        z-index: auto;
    }

    .packages .section-subtitle {
        order: 3;
        margin-top: 0;
    }
}

/* ============================================
   HOW IT WORKS SECTION - Premium Timeline Design
   ============================================ */
.hiw-section {
    padding: var(--space-20) 0 var(--space-24);
    background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 50%, var(--white) 100%);
    position: relative;
    overflow: hidden;
}

.hiw-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(26, 58, 47, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(212, 168, 24, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(26, 58, 47, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

/* Header */
.hiw-header {
    text-align: center;
    margin-bottom: var(--space-12);
    position: relative;
    z-index: 1;
}

.hiw-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.2);
}

.hiw-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--packers-green);
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Timeline Container */
.hiw-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 80px;
}

/* Timeline Track */
.hiw-timeline-track {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-200) 100%);
    border-radius: 2px;
}

.hiw-track-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        var(--packers-green) 0%, 
        var(--packers-gold) 50%, 
        var(--packers-gold-bright) 100%);
    border-radius: 2px;
    transform-origin: top;
    animation: trackGrow 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes trackGrow {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

/* Timeline Cards */
.hiw-card {
    position: relative;
    margin-bottom: var(--space-6);
    opacity: 0;
    transform: translateX(-20px);
    animation: cardSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hiw-card[data-step="1"] { animation-delay: 0.2s; }
.hiw-card[data-step="2"] { animation-delay: 0.4s; }
.hiw-card[data-step="3"] { animation-delay: 0.6s; }
.hiw-card[data-step="4"] { animation-delay: 0.8s; }

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Card Marker */
.hiw-card-marker {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hiw-marker-num {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 6px 20px rgba(26, 58, 47, 0.3),
        0 0 0 4px var(--white),
        0 0 0 6px rgba(26, 58, 47, 0.1);
    transition: all 0.3s ease;
}

.hiw-card:hover .hiw-marker-num {
    transform: scale(1.1);
    box-shadow: 
        0 8px 25px rgba(26, 58, 47, 0.4),
        0 0 0 4px var(--white),
        0 0 0 8px rgba(212, 168, 24, 0.2);
}

/* Card Body */
.hiw-card-body {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-card:hover .hiw-card-body {
    transform: translateX(8px);
    box-shadow: 
        0 10px 40px rgba(26, 58, 47, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: rgba(26, 58, 47, 0.15);
}

/* Card Icon */
.hiw-card-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, rgba(26, 58, 47, 0.08) 0%, rgba(26, 58, 47, 0.04) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hiw-card:hover .hiw-card-icon {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
}

.hiw-card-icon i {
    font-size: 1.6rem;
    color: var(--packers-green);
    transition: all 0.3s ease;
}

.hiw-card:hover .hiw-card-icon i {
    color: var(--packers-gold);
    transform: scale(1.1);
}

/* Card Text */
.hiw-card-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: var(--packers-green);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.hiw-card-text p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Final Card - We Handle the Rest */
.hiw-card-final {
    margin-top: var(--space-8);
    margin-bottom: 0;
}

.hiw-marker-final {
    width: 60px;
    height: 60px;
}

.hiw-marker-final i {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    font-size: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 6px 25px rgba(212, 168, 24, 0.4),
        0 0 0 4px var(--white),
        0 0 0 6px rgba(212, 168, 24, 0.15);
    transition: all 0.3s ease;
}

.hiw-card-final:hover .hiw-marker-final i {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 
        0 8px 30px rgba(212, 168, 24, 0.5),
        0 0 0 4px var(--white),
        0 0 0 8px rgba(212, 168, 24, 0.25);
}

.hiw-body-final {
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(26, 58, 47, 0.04) 100%);
    border: 2px solid rgba(212, 168, 24, 0.2);
    padding: var(--space-7);
}

.hiw-card-final:hover .hiw-body-final {
    border-color: var(--packers-gold);
    box-shadow: 
        0 15px 50px rgba(212, 168, 24, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.05);
}

.hiw-icon-final {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
}

.hiw-icon-final i {
    color: var(--packers-green);
}

.hiw-card-final:hover .hiw-icon-final {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
}

.hiw-card-final:hover .hiw-icon-final i {
    color: var(--packers-gold);
}

/* Final Card Features */
.hiw-final-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(212, 168, 24, 0.2);
}

.hiw-final-features span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--packers-green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hiw-final-features i {
    color: var(--packers-gold);
    font-size: 0.85rem;
}

/* Action Button */
.hiw-action {
    text-align: center;
    margin-top: var(--space-12);
    position: relative;
    z-index: 1;
}

.hiw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--white);
    padding: 0;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(26, 58, 47, 0.3);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(26, 58, 47, 0.4);
}

.hiw-btn-text {
    padding: 1.1rem 1.75rem 1.1rem 2rem;
    transition: all 0.3s ease;
}

.hiw-btn-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 4px;
    color: var(--packers-green);
    transition: all 0.3s ease;
}

.hiw-btn:hover .hiw-btn-icon {
    transform: translateX(3px);
}

.hiw-btn:hover .hiw-btn-text {
    padding-right: 1.5rem;
}

/* ============================================
   HOW IT WORKS - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hiw-section {
        padding: var(--space-16) 0 var(--space-20);
    }
    
    .hiw-title {
        font-size: 2.25rem;
    }
    
    .hiw-timeline {
        padding-left: 50px;
    }
    
    .hiw-timeline-track {
        left: 18px;
        width: 3px;
    }
    
    .hiw-card-marker {
        left: -50px;
        width: 40px;
        height: 40px;
    }
    
    .hiw-marker-num {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        box-shadow: 
            0 4px 12px rgba(26, 58, 47, 0.25),
            0 0 0 3px var(--white);
    }
    
    .hiw-marker-final i {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .hiw-card-body {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-5);
        gap: var(--space-4);
    }
    
    .hiw-card:hover .hiw-card-body {
        transform: translateX(4px);
    }
    
    .hiw-card-icon {
        width: 50px;
        height: 50px;
    }
    
    .hiw-card-icon i {
        font-size: 1.3rem;
    }
    
    .hiw-card-text h3 {
        font-size: 1.15rem;
    }
    
    .hiw-card-text p {
        font-size: 0.9rem;
    }
    
    .hiw-final-features {
        gap: 0.5rem;
    }
    
    .hiw-final-features span {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    
    .hiw-btn {
        font-size: 0.95rem;
    }
    
    .hiw-btn-text {
        padding: 0.9rem 1.25rem 0.9rem 1.5rem;
    }
    
    .hiw-btn-icon {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .hiw-section {
        padding: var(--space-12) 0 var(--space-16);
    }
    
    .hiw-header {
        margin-bottom: var(--space-8);
    }
    
    .hiw-label {
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }
    
    .hiw-title {
        font-size: 1.85rem;
    }
    
    .hiw-timeline {
        padding-left: 45px;
    }
    
    .hiw-timeline-track {
        left: 15px;
    }
    
    .hiw-card {
        margin-bottom: var(--space-4);
    }
    
    .hiw-card-marker {
        left: -45px;
        width: 34px;
        height: 34px;
    }
    
    .hiw-marker-num {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    
    .hiw-marker-final i {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    
    .hiw-card-body {
        padding: var(--space-4);
        gap: var(--space-3);
    }
    
    .hiw-card-icon {
        width: 44px;
        height: 44px;
    }
    
    .hiw-card-icon i {
        font-size: 1.1rem;
    }
    
    .hiw-card-text h3 {
        font-size: 1.05rem;
        margin-bottom: 0.25rem;
    }
    
    .hiw-card-text p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .hiw-body-final {
        padding: var(--space-5);
    }
    
    .hiw-final-features {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }
    
    .hiw-final-features span {
        font-size: 0.7rem;
        padding: 0.35rem 0.65rem;
    }
    
    .hiw-action {
        margin-top: var(--space-8);
    }
    
    .hiw-btn {
        width: 100%;
        max-width: 280px;
        justify-content: space-between;
    }
}

/* ============================================
   LEGENDS SECTION - Premium Card Design
   ============================================ */
.legends {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
    position: relative;
}

.legends::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.legends-filter {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
    padding: var(--space-8) var(--space-10);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}

.legends-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-gold), var(--packers-green));
    opacity: 0.6;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.filter-group label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--packers-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group label::before {
    content: '';
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--packers-gold), transparent);
}

.filter-group-sort label {
    justify-content: flex-end;
    text-align: right;
}

.filter-group-sort label::before {
    background: linear-gradient(90deg, transparent, var(--packers-gold));
}

.filter-group select {
    padding: 14px 20px;
    border: 2px solid rgba(212, 168, 24, 0.3);
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    background: var(--white);
    min-width: 200px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--packers-green);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-group select:hover {
    border-color: var(--packers-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 168, 24, 0.2);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--packers-gold);
    box-shadow: 0 0 0 4px rgba(212, 168, 24, 0.15), 0 4px 12px rgba(212, 168, 24, 0.2);
    transform: translateY(-2px);
}

.sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-direction-btn {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--packers-green);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sort-direction-btn:hover {
    border-color: var(--gray-300);
    transform: translateY(-1px);
}

.sort-direction-btn:focus {
    outline: none;
    border-color: var(--packers-gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 24, 0.1);
}

.sort-direction-btn i {
    font-size: 1rem;
}

.smart-recommendations {
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(26, 58, 47, 0.03) 100%);
    border: 1px solid rgba(212, 168, 24, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    backdrop-filter: blur(10px);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--packers-green);
    font-weight: 700;
    margin-bottom: var(--space-2);
    font-size: 0.95rem;
}

.recommendation-header i {
    color: var(--packers-gold);
    font-size: 1.2rem;
}

.legends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-8);
}

/* Desktop Show More Legends Button */
.legends-show-more-container {
    display: flex;
    justify-content: center;
    margin-top: var(--space-10);
    padding: var(--space-4) 0;
}

.legends-show-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 25px rgba(26, 58, 47, 0.35);
    position: relative;
    overflow: hidden;
}

.legends-show-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 24, 0.25), transparent);
    transition: left 0.6s ease;
}

.legends-show-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(26, 58, 47, 0.45);
}

.legends-show-more-btn:hover::before {
    left: 100%;
}

.legends-show-more-btn:active {
    transform: translateY(-1px);
}

.legends-show-more-btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.legends-show-more-btn:hover i {
    transform: translateY(3px);
}

.legends-show-more-btn .btn-count {
    background: rgba(212, 168, 24, 0.3);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.legends-show-more-btn.hidden,
.legends-show-more-container.hidden {
    display: none;
}

/* Desktop Legends Navigation Button (Split Above/Below) */
.legends-nav-container {
    display: none;
    justify-content: center;
    margin-top: var(--space-10);
    padding: var(--space-4) 0;
}

.legends-nav-container.visible {
    display: flex;
}

.legends-nav-split-btn {
    display: flex;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(26, 58, 47, 0.4);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.legends-nav-split-btn:hover {
    box-shadow: 0 12px 40px rgba(26, 58, 47, 0.5);
    transform: translateY(-2px);
}

.legends-nav-half {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.legends-nav-half::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.legends-nav-half:hover::before {
    left: 100%;
}

/* Above (Left) Half - Gold theme */
.legends-nav-above {
    background: linear-gradient(135deg, var(--packers-gold) 0%, #e8c547 100%);
    color: var(--packers-green-rich);
    border-right: 2px solid rgba(26, 58, 47, 0.2);
}

.legends-nav-above:hover {
    background: linear-gradient(135deg, #e8c547 0%, var(--packers-gold) 100%);
}

.legends-nav-above i {
    transition: transform 0.3s ease;
}

.legends-nav-above:hover i {
    transform: translateY(-3px);
}

/* Divider */
.legends-nav-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: linear-gradient(180deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-size: 1.2rem;
    font-weight: 300;
}

/* Below (Right) Half - Green theme */
.legends-nav-below {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    border-left: 2px solid rgba(212, 168, 24, 0.3);
}

.legends-nav-below:hover {
    background: linear-gradient(135deg, var(--packers-green-rich) 0%, var(--packers-green) 100%);
}

.legends-nav-below i {
    transition: transform 0.3s ease;
}

.legends-nav-below:hover i {
    transform: translateY(3px);
}

/* Count badges */
.legends-nav-half .nav-count {
    font-size: 0.85rem;
    font-weight: 800;
    opacity: 0.9;
}

.legends-nav-above .nav-count {
    color: var(--packers-green);
}

.legends-nav-below .nav-count {
    color: var(--packers-gold);
}

/* Label styling */
.legends-nav-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .legends-nav-container {
        display: none !important;
    }
}

/* Inline navigation buttons between legend groups */
.legends-nav-inline {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: var(--space-6) 0;
    margin: var(--space-4) 0;
}

/* Hide inline nav buttons when they have the hidden class (desktop only) */
@media (min-width: 769px) {
    .legends-nav-inline.legend-card-hidden {
        display: none;
    }
}

.legends-nav-inline .legends-nav-split-btn {
    transform: scale(0.95);
}

.legends-nav-inline .legends-nav-half {
    padding: 12px 24px;
    font-size: 0.9rem;
}

/* Hide inline nav on mobile */
@media (max-width: 768px) {
    .legends-nav-inline {
        display: none !important;
    }
}

/* Dark mode for navigation button */
body.dark-mode .legends-nav-split-btn {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .legends-nav-above {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #d4a818 100%);
    color: var(--dm-bg-primary);
}

body.dark-mode .legends-nav-below {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
}

body.dark-mode .legends-nav-divider {
    background: linear-gradient(180deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
}

/* Desktop legend card visibility states */
@media (min-width: 769px) {
    .legend-card-hidden {
        display: none;
    }
    
    .legend-card-revealing {
        animation: legendCardRevealDesktop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    
    @keyframes legendCardRevealDesktop {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* Dark mode support */
body.dark-mode .legends-show-more-btn {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

body.dark-mode .legends-show-more-btn:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

/* Hide on mobile */
@media (max-width: 768px) {
    .legends-show-more-container {
        display: none;
    }
}

/* Mobile Accordion - Hidden on desktop */
.legends-mobile-accordion {
    display: none;
}

/* ============================================
   MOBILE LEGENDS ACCORDION
   ============================================ */
@media (max-width: 768px) {
    .legends-grid {
        display: none;
    }
    
    .legends-mobile-accordion {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--gray-200);
    }
    
    .mobile-legend-item {
        background: var(--white);
        border-bottom: 1px solid var(--gray-200);
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .mobile-legend-item.scroll-revealed {
        animation: mobileLegendReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    
    .mobile-legend-item:nth-child(2).scroll-revealed { animation-delay: 0.05s; }
    .mobile-legend-item:nth-child(3).scroll-revealed { animation-delay: 0.1s; }
    .mobile-legend-item:nth-child(4).scroll-revealed { animation-delay: 0.15s; }
    .mobile-legend-item:nth-child(5).scroll-revealed { animation-delay: 0.2s; }
    .mobile-legend-item:nth-child(6).scroll-revealed { animation-delay: 0.25s; }
    
    @keyframes mobileLegendReveal {
        0% {
            opacity: 0;
            transform: translateX(-20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .mobile-legend-item:last-child {
        border-bottom: none;
    }
    
    .mobile-legend-header {
        display: flex;
        align-items: center;
        padding: 16px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        gap: 14px;
    }
    
    .mobile-legend-header:hover {
        background: var(--gray-50);
    }
    
    .mobile-legend-header:active {
        background: var(--gray-100);
    }
    
    .mobile-legend-number {
        min-width: 50px;
        height: 50px;
        background: linear-gradient(135deg, var(--packers-green), var(--packers-green-rich));
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Bebas Neue', cursive;
        font-size: 1.3rem;
        color: var(--packers-gold);
        font-weight: 700;
        flex-shrink: 0;
    }

    .mobile-legend-hash {
        color: var(--white);
        margin-right: 2px;
        opacity: 0.95;
    }
    
    .mobile-legend-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    
    .mobile-legend-name {
        font-weight: 700;
        font-size: 1rem;
        color: var(--gray-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-legend-position {
        font-size: 0.85rem;
        color: var(--packers-green);
        font-weight: 500;
    }
    
    .mobile-legend-toggle {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-400);
        transition: transform 0.3s ease, color 0.2s ease;
        flex-shrink: 0;
    }
    
    .mobile-legend-item.open .mobile-legend-toggle {
        transform: rotate(180deg);
        color: var(--packers-green);
    }
    
    .mobile-legend-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-legend-item.open .mobile-legend-content {
        max-height: 500px;
    }
    
    .mobile-legend-details {
        padding: 0 16px 20px 16px;
        border-top: 1px solid var(--gray-100);
        background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
    }
    
    .mobile-legend-era {
        padding-top: 16px;
        font-size: 0.9rem;
        color: var(--gray-600);
        margin-bottom: 12px;
    }
    
    .mobile-legend-era i {
        color: var(--packers-gold);
        margin-right: 6px;
    }
    
    .mobile-legend-era .era-badge {
        background: var(--packers-green);
        color: var(--white);
        padding: 2px 8px;
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        margin-left: 8px;
    }
    
    .mobile-legend-description {
        font-size: 0.9rem;
        color: var(--gray-700);
        line-height: 1.6;
        margin-bottom: 14px;
    }
    
    .mobile-legend-achievements {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
    }
    
    .mobile-legend-achievements .achievement-tag {
        background: linear-gradient(135deg, rgba(212, 168, 24, 0.15), rgba(212, 168, 24, 0.05));
        color: var(--gray-700);
        padding: 6px 10px;
        border-radius: var(--radius-md);
        font-size: 0.8rem;
        border-left: 2px solid var(--packers-gold);
    }
    
    .mobile-legend-achievements .achievement-tag i {
        color: var(--packers-gold);
        margin-right: 5px;
        font-size: 0.7rem;
    }
    
    .mobile-legend-actions {
        display: flex;
        gap: 10px;
    }
    
    .mobile-legend-actions .btn {
        flex: 1;
        padding: 12px 16px;
        font-size: 0.9rem;
        justify-content: center;
    }
    
    .mobile-legend-actions .btn i {
        margin-right: 6px;
    }
    
    /* Highlight open item */
    .mobile-legend-item.open .mobile-legend-header {
        background: linear-gradient(90deg, rgba(26, 58, 47, 0.03), rgba(212, 168, 24, 0.05));
    }
    
    .mobile-legend-item.open .mobile-legend-number {
        box-shadow: 0 4px 12px rgba(26, 58, 47, 0.3);
    }
    
    /* ============================================
       MOBILE LEGENDS PAGINATION
       ============================================ */
    
    .mobile-legends-page {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-legends-page.collapsed {
        max-height: 0 !important;
        opacity: 0;
        margin: 0;
        padding: 0;
    }
    
    .mobile-legends-page.expanding {
        animation: pageExpand 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    
    .mobile-legends-page.collapsing {
        animation: pageCollapse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes pageExpand {
        0% {
            max-height: 0;
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            max-height: 2000px;
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes pageCollapse {
        0% {
            max-height: 2000px;
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(0.98);
        }
        100% {
            max-height: 0;
            opacity: 0;
            transform: scale(0.95);
        }
    }
    
    /* Pagination Navigation Buttons */
    .mobile-legends-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 18px 24px;
        margin: 16px 0;
        background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
        color: var(--packers-gold);
        border: none;
        border-radius: 16px;
        font-size: 1.05rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 6px 20px rgba(26, 58, 47, 0.3);
        position: relative;
        overflow: hidden;
    }
    
    .mobile-legends-nav-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(212, 168, 24, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .mobile-legends-nav-btn:hover::before {
        left: 100%;
    }
    
    .mobile-legends-nav-btn:active {
        transform: scale(0.98);
    }
    
    .mobile-legends-nav-btn i {
        font-size: 1.1rem;
        transition: transform 0.3s ease;
    }
    
    .mobile-legends-nav-btn:hover i.fa-arrow-down {
        animation: bounceDown 0.6s ease infinite;
    }
    
    .mobile-legends-nav-btn:hover i.fa-arrow-up {
        animation: bounceUp 0.6s ease infinite;
    }
    
    @keyframes bounceDown {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(4px); }
    }
    
    @keyframes bounceUp {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }
    
    /* Previous page button (collapsed state) */
    .mobile-legends-prev-btn {
        background: linear-gradient(135deg, var(--packers-gold) 0%, #e8c547 100%);
        color: var(--packers-green);
        box-shadow: 0 6px 20px rgba(212, 168, 24, 0.35);
    }
    
    .mobile-legends-prev-btn .btn-count {
        background: var(--packers-green);
        color: var(--packers-gold);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    /* Next page button */
    .mobile-legends-next-btn {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    
    .mobile-legends-next-btn.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mobile-legends-next-btn .btn-emoji {
        font-size: 1.3rem;
    }
    
    .mobile-legends-next-btn .btn-count {
        background: rgba(212, 168, 24, 0.3);
        color: var(--white);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    /* Page indicator */
    .mobile-legends-page-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
        margin-bottom: 8px;
    }
    
    .page-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gray-300);
        transition: all 0.3s ease;
    }
    
    .page-dot.active {
        background: var(--packers-green);
        transform: scale(1.3);
        box-shadow: 0 0 8px rgba(26, 58, 47, 0.4);
    }
    
    .page-dot.completed {
        background: var(--packers-gold);
    }
    
    /* Hide pagination on desktop */
    .mobile-legends-pagination {
        display: none;
    }
    
    .mobile-legends-pagination.active {
        display: block;
    }
}

.legend-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    position: relative;
    opacity: 0;
    transform: translateY(30px) scale(0.97);
}

.legend-card.scroll-revealed {
    animation: legendCardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Desktop 3-column grid: randomized timing per column and row */
/* Row 1 */
.legend-card:nth-child(1).scroll-revealed { animation-delay: 0s; }
.legend-card:nth-child(2).scroll-revealed { animation-delay: 0.12s; }
.legend-card:nth-child(3).scroll-revealed { animation-delay: 0.05s; }
/* Row 2 */
.legend-card:nth-child(4).scroll-revealed { animation-delay: 0.22s; }
.legend-card:nth-child(5).scroll-revealed { animation-delay: 0.28s; }
.legend-card:nth-child(6).scroll-revealed { animation-delay: 0.18s; }
/* Row 3 */
.legend-card:nth-child(7).scroll-revealed { animation-delay: 0.35s; }
.legend-card:nth-child(8).scroll-revealed { animation-delay: 0.42s; }
.legend-card:nth-child(9).scroll-revealed { animation-delay: 0.38s; }
/* Row 4 */
.legend-card:nth-child(10).scroll-revealed { animation-delay: 0.48s; }
.legend-card:nth-child(11).scroll-revealed { animation-delay: 0.55s; }
.legend-card:nth-child(12).scroll-revealed { animation-delay: 0.52s; }
/* Row 5 */
.legend-card:nth-child(13).scroll-revealed { animation-delay: 0.6s; }
.legend-card:nth-child(14).scroll-revealed { animation-delay: 0.68s; }
.legend-card:nth-child(15).scroll-revealed { animation-delay: 0.62s; }
/* Row 6+ */
.legend-card:nth-child(n+16).scroll-revealed { animation-delay: 0.7s; }

@keyframes legendCardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.legend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-gold));
    opacity: 0;
    transition: var(--transition);
}

.legend-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.legend-card:hover::before {
    opacity: 1;
}

.legend-card.recommended {
    border: 2px solid var(--packers-gold);
    box-shadow: var(--shadow-gold);
}

/* Premium Legend Header Showcase - 3D Design */
.legend-header-showcase {
    height: 180px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 50%, var(--packers-green-deep) 100%);
}

/* Position-specific shades of Packers Green */
.legend-header-showcase.pos-bg-qb {
    background: linear-gradient(135deg, #1e4d3d 0%, #173d30 50%, #0f2b22 100%);
}
.legend-header-showcase.pos-bg-rb {
    background: linear-gradient(135deg, #1a4535 0%, #143828 50%, #0d281c 100%);
}
.legend-header-showcase.pos-bg-wr {
    background: linear-gradient(135deg, #225540 0%, #1a4432 50%, #123024 100%);
}
.legend-header-showcase.pos-bg-te {
    background: linear-gradient(135deg, #1c4a38 0%, #153c2c 50%, #0e2c20 100%);
}
.legend-header-showcase.pos-bg-ol {
    background: linear-gradient(135deg, #204f3f 0%, #184030 50%, #102e22 100%);
}
.legend-header-showcase.pos-bg-defense {
    background: linear-gradient(135deg, #163f32 0%, #103225 50%, #0a2419 100%);
}
.legend-header-showcase.pos-bg-db {
    background: linear-gradient(135deg, #1b4839 0%, #143a2b 50%, #0c2a1e 100%);
}
.legend-header-showcase.pos-bg-lb {
    background: linear-gradient(135deg, #1f5242 0%, #174233 50%, #0f3025 100%);
}
.legend-header-showcase.pos-bg-dl {
    background: linear-gradient(135deg, #18423a 0%, #12352c 50%, #0b261f 100%);
}
.legend-header-showcase.pos-bg-k {
    background: linear-gradient(135deg, #235845 0%, #1a4736 50%, #123428 100%);
}
.legend-header-showcase.pos-bg-fb {
    background: linear-gradient(135deg, #1d4c3c 0%, #153e2e 50%, #0e2d21 100%);
}
.legend-header-showcase.pos-bg-dt {
    background: linear-gradient(135deg, #163f32 0%, #103225 50%, #0a2419 100%);
}
.legend-header-showcase.pos-bg-de {
    background: linear-gradient(135deg, #18423a 0%, #12352c 50%, #0b261f 100%);
}
.legend-header-showcase.pos-bg-ot {
    background: linear-gradient(135deg, #204f3f 0%, #184030 50%, #102e22 100%);
}
.legend-header-showcase.pos-bg-og {
    background: linear-gradient(135deg, #1c4a38 0%, #153c2c 50%, #0e2c20 100%);
}
.legend-header-showcase.pos-bg-c {
    background: linear-gradient(135deg, #1a4535 0%, #143828 50%, #0d281c 100%);
}
.legend-header-showcase.pos-bg-cb {
    background: linear-gradient(135deg, #1b4839 0%, #143a2b 50%, #0c2a1e 100%);
}
.legend-header-showcase.pos-bg-s {
    background: linear-gradient(135deg, #1f5242 0%, #174233 50%, #0f3025 100%);
}

.legend-header-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* Gradient variations for visual variety */
.legend-card:nth-child(2) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 75% 25%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(3) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 30% 70%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(4) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 65% 60%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(5) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 15% 50%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(6) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 80% 40%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 65%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(7) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 40% 20%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 85%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(8) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 55% 75%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(9) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 25% 45%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(10) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 70% 35%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(11) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 35% 65%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(12) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 60% 50%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(13) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 45% 80%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(14) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 85% 55%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 35%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(15) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 20% 60%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(16) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 50% 15%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(17) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 75% 70%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(18) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 35% 25%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 65%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(19) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 65% 45%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(20) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 15% 35%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(21) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 80% 60%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 35% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(22) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 40% 55%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(23) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 55% 20%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 85%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(24) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 70% 75%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(25) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 25% 55%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(26) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 60% 30%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(27) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 85% 45%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(28) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 30% 80%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(29) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 50% 65%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(30) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 75% 50%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 35% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(31) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 40% 40%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 65%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(32) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 65% 80%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 45%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(33) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-card:nth-child(34) .legend-header-showcase::before {
    background: 
        radial-gradient(ellipse at 55% 35%, rgba(212, 168, 24, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.legend-header-showcase::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* 3D Jersey Number - Large and Impactful */
.legend-jersey-3d {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
    white-space: nowrap;
}

.jersey-hash {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: var(--white);
    opacity: 0.9;
    position: relative;
    margin-right: 5px;
    top: 0;
    line-height: 1;
    text-shadow: 
        1px 1px 0 rgba(0,0,0,0.4),
        2px 2px 0 rgba(0,0,0,0.3),
        0 0 10px rgba(255, 255, 255, 0.35);
}

.jersey-number {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 5px;
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 40%, #d0d0d0 60%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.jersey-number::before {
    content: attr(data-number);
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: -1;
    background: linear-gradient(180deg, var(--packers-green-deep) 0%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legend-card:hover .jersey-number {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(212, 168, 24, 0.3));
    transition: all 0.3s ease;
}

/* Position Letters Display - Large Fancy Text */
.legend-position-display {
    position: absolute;
    left: 23px;
    bottom: -2px;
    z-index: 3;
}

.position-letters {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(180deg, #ffffff 0%, var(--packers-gold) 40%, var(--packers-gold-bright) 60%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 10px rgba(212, 168, 24, 0.4));
    transition: all 0.3s ease;
}

.legend-card:hover .position-letters {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 15px rgba(212, 168, 24, 0.6));
}

.silhouette-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, rgba(26, 58, 47, 0.9), rgba(7, 24, 18, 0.95));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(212, 168, 24, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    transform: perspective(200px) rotateX(8deg) rotateY(-3deg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(212, 168, 24, 0.3);
    position: relative;
    overflow: hidden;
}

.silhouette-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0) 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.position-silhouette {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 8px rgba(212, 168, 24, 0.4));
    transition: all 0.4s ease;
    z-index: 2;
    position: relative;
}

.silhouette-body {
    transition: all 0.4s ease;
}

.legend-card:hover .silhouette-wrapper {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg) scale(1.1);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),
        0 8px 25px rgba(212, 168, 24, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border-color: rgba(212, 168, 24, 0.6);
    animation: silhouetteGlow 3s infinite alternate;
}

.legend-card:hover .silhouette-wrapper::after {
    opacity: 1;
    animation: silhouetteShineSweep 3s infinite;
}

.legend-card:hover .position-silhouette {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 15px rgba(212, 168, 24, 0.6));
    animation: silhouettePulse 3s infinite alternate;
}

@keyframes silhouetteGlow {
    0%, 100% {
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 8px 25px rgba(212, 168, 24, 0.5),
            inset 0 1px 2px rgba(255, 255, 255, 0.15),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 12px 35px rgba(0, 0, 0, 0.6),
            0 8px 25px rgba(212, 168, 24, 0.8),
            inset 0 1px 2px rgba(255, 255, 255, 0.3),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }
}

@keyframes silhouetteShineSweep {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes silhouettePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6))
                drop-shadow(0 0 15px rgba(212, 168, 24, 0.6));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7))
                drop-shadow(0 0 20px rgba(212, 168, 24, 0.8));
    }
}

.position-code {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--packers-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Star Badge for Fan Favorites */
.legend-star-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg, #ffd700, #ffec8b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
    animation: starPulse 2s ease-in-out infinite;
    z-index: 5;
}

.legend-star-badge i {
    font-size: 1rem;
    color: var(--packers-green-deep);
}

@keyframes starPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(255, 215, 0, 0.7);
    }
}

/* Showcase Glow Effect */
.legend-showcase-glow {
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--packers-gold) 20%, 
        var(--packers-gold-bright) 50%, 
        var(--packers-gold) 80%, 
        transparent 100%);
    opacity: 0.8;
}

.legend-card:hover .legend-showcase-glow {
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

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

/* ============================================
   LEGEND DETAIL MODAL
   ============================================ */
.legend-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.legend-detail-modal.active {
    display: flex;
}

.legend-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 58, 47, 0.85);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.legend-detail-content {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 550px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(212, 168, 24, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

/* Custom Scrollbar for Legend Detail Modal */
.legend-detail-content::-webkit-scrollbar {
    width: 8px;
}

.legend-detail-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.legend-detail-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--packers-gold) 0%, #b8941a 100%);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.legend-detail-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e6c02a 0%, var(--packers-gold) 100%);
    background-clip: padding-box;
}

/* Firefox scrollbar */
.legend-detail-content {
    scrollbar-width: thin;
    scrollbar-color: var(--packers-gold) rgba(0, 0, 0, 0.05);
}

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

.legend-detail-close {
    position: absolute;
    top: 70px;
    right: 16px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.legend-detail-close:hover {
    background: var(--packers-green);
    border-color: var(--packers-green);
    color: var(--white);
    transform: translateY(-50%) rotate(90deg);
}

.legend-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.legend-detail-jersey {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 90px;
    height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(212, 168, 24, 0.5);
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.legend-detail-jersey .jersey-hash {
    font-size: 1.43rem;
    color: var(--white);
    font-weight: 700;
    line-height: 1;
    margin-top: 5px;
    align-self: flex-start;
    margin-right: 1px;
}

.legend-detail-jersey .jersey-num {
    font-size: 3.64rem;
    font-family: 'Bebas Neue', cursive;
    color: var(--packers-gold);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-left: -3px;
}

.legend-detail-jersey .jersey-num.single-digit {
    margin-left: -2px;
}

.legend-detail-title h2 {
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: var(--space-1);
    font-weight: 700;
}

.legend-detail-position {
    color: var(--packers-gold);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-3);
}

.legend-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.legend-detail-meta .meta-era {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.legend-detail-meta .meta-era i {
    margin-right: 4px;
    color: var(--packers-gold);
}

.legend-detail-meta .meta-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-detail-meta .meta-tier {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-detail-meta .meta-tier.tier-premium {
    background: linear-gradient(135deg, var(--packers-gold), var(--packers-gold-bright));
    color: var(--packers-green);
}

.legend-detail-meta .meta-tier.tier-mid {
    background: rgba(212, 168, 24, 0.3);
    color: var(--packers-gold);
    border: 1px solid var(--packers-gold);
}

.legend-detail-meta .meta-tier.tier-standard {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.legend-detail-body {
    padding: var(--space-8);
}

.legend-detail-description {
    font-size: 1.05rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.legend-detail-achievements {
    margin-bottom: var(--space-6);
}

.legend-detail-achievements h4,
.legend-detail-tags h4 {
    font-size: 1rem;
    color: var(--packers-green);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-detail-achievements h4 i,
.legend-detail-tags h4 i {
    color: var(--packers-gold);
}

.legend-detail-achievements ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legend-detail-achievements li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(212, 168, 24, 0.03) 100%);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--gray-700);
    border-left: 3px solid var(--packers-gold);
}

.legend-detail-achievements li i {
    color: var(--packers-gold);
    font-size: 0.8rem;
}

.legend-detail-tags .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.legend-detail-tags .event-tag {
    background: var(--packers-green);
    color: var(--white);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.legend-detail-footer {
    padding: var(--space-6) var(--space-8);
    background: var(--gray-100);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    display: flex;
    justify-content: center;
}

.legend-detail-footer .btn {
    min-width: 200px;
}

/* ============================================
   PROFESSIONAL PLAYER CARD STYLES
   ============================================ */
.legend-detail-content.player-card {
    max-width: 640px;
    border-radius: var(--radius-xl);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Player Card Header - Condensed Professional Design */
.player-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, #1a3a2a 0%, #0f2821 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--packers-gold);
}

.player-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 0% 0%, rgba(212, 168, 24, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(35, 75, 55, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.player-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    gap: 6px;
    align-items: center;
}

.player-card-badge .badge-position {
    background: var(--packers-gold);
    color: var(--packers-green);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.player-card-jersey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(145deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.05) 100%);
    border-radius: 12px;
    border: 2px solid rgba(212, 168, 24, 0.6);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.player-card-jersey .jersey-hash {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    line-height: 1;
    margin-bottom: -2px;
}

.player-card-jersey .jersey-num {
    font-size: 2.5rem;
    font-family: 'Bebas Neue', cursive;
    color: var(--packers-gold);
    line-height: 0.9;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.player-card-jersey .jersey-num.single-digit {
    font-size: 2.8rem;
}

.player-card-name {
    flex: 1;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.player-card-name h2 {
    font-size: 1.4rem;
    color: var(--white);
    font-weight: 800;
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-name .player-position {
    color: var(--packers-gold);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.player-card-era-badge {
    position: absolute;
    top: 8px;
    right: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Quick Stats Bar - Compact Design */
.player-card-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(35, 75, 55, 0.1);
}

.player-card-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 50px;
    padding: 0 var(--space-2);
}

.player-card-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--packers-green);
}

.player-card-stats .stat-label {
    font-size: 0.55rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.player-card-stats .stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(35, 75, 55, 0.15);
}

.player-card-stats .tier-indicator .stat-value {
    color: var(--packers-gold);
}

.player-card-stats .tier-indicator.tier-premium .stat-label {
    color: var(--packers-gold);
    font-weight: 700;
}

/* Career Headlines - Compact */
.player-card-headlines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid rgba(35, 75, 55, 0.08);
}

.player-card-headlines .headline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--packers-green) 0%, #1a3a2a 100%);
    color: var(--white);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
}

.player-card-headlines .headline-badge i {
    color: var(--packers-gold);
    font-size: 0.55rem;
}

/* Biography Section - Compact */
.player-card-bio {
    padding: var(--space-4) var(--space-5);
    background: var(--white);
}

.player-card-bio .bio-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--packers-gold);
}

.player-card-bio .bio-header i {
    color: var(--packers-gold);
    font-size: 1.1rem;
}

.player-card-bio .bio-header h4 {
    font-size: 1rem;
    color: var(--packers-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.player-card-bio .bio-content p {
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--space-4);
    text-align: justify;
}

.player-card-bio .bio-content p:last-child {
    margin-bottom: 0;
}

/* Achievements Grid */
.player-card-achievements {
    padding: var(--space-6) var(--space-8);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.player-card-achievements .achievements-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.player-card-achievements .achievements-header i {
    color: var(--packers-gold);
    font-size: 1rem;
}

.player-card-achievements .achievements-header h4 {
    font-size: 0.9rem;
    color: var(--packers-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.player-card-achievements .achievements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.player-card-achievements .achievement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--packers-gold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.player-card-achievements .achievement-item i {
    color: var(--packers-green);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.player-card-achievements .achievement-item span {
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.5;
}

/* Booking Footer */
.player-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    background: linear-gradient(180deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border-top: 1px solid var(--gray-300);
}

.player-card-footer .footer-tagline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-600);
    font-size: 0.85rem;
}

.player-card-footer .footer-tagline i {
    color: var(--packers-green);
}

.player-card-footer .btn-book-legend {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--white);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.3);
}

.player-card-footer .btn-book-legend:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 47, 0.4);
}

.player-card-footer .btn-book-legend i {
    margin-right: var(--space-2);
}

/* Player Card Responsive - Condensed Design */
@media (max-width: 600px) {
    .player-card-header {
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    
    .player-card-badge {
        top: 6px;
        right: 6px;
    }
    
    .player-card-era-badge {
        display: none;
    }
    
    .player-card-jersey {
        width: 60px;
        height: 60px;
    }
    
    .player-card-jersey .jersey-num {
        font-size: 2rem;
    }
    
    .player-card-jersey .jersey-num.single-digit {
        font-size: 2.2rem;
    }
    
    .player-card-name h2 {
        font-size: 1.2rem;
    }
    
    .player-card-name .player-position {
        font-size: 0.65rem;
    }
    
    .player-card-stats {
        padding: var(--space-2) var(--space-3);
    }
    
    .player-card-stats .stat-divider {
        height: 20px;
    }
    
    .player-card-stats .stat-item {
        min-width: 45px;
        padding: 0 var(--space-1);
    }
    
    .player-card-stats .stat-value {
        font-size: 0.95rem;
    }
    
    .player-card-stats .stat-label {
        font-size: 0.5rem;
    }
    
    .player-card-bio,
    .player-card-achievements {
        padding: var(--space-4);
    }
    
    .player-card-bio .bio-content p {
        text-align: left;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .player-card-headlines {
        padding: var(--space-2) var(--space-3);
        gap: 4px;
    }
    
    .player-card-headlines .headline-badge {
        padding: 3px 8px;
        font-size: 0.6rem;
    }
    
    .player-card-footer .btn-book-legend {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .legend-detail-header {
        flex-direction: column;
        text-align: center;
        padding: var(--space-6);
    }
    
    .legend-detail-title h2 {
        font-size: 1.5rem;
    }
    
    .legend-detail-meta {
        justify-content: center;
    }
    
    .legend-detail-body {
        padding: var(--space-6);
    }
    
    .legend-detail-close {
        top: 70px;
        right: 16px;
        width: 36px;
        height: 36px;
    }
}

/* Position Title Styling */
.legend-position-title {
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-info {
    padding: var(--space-6);
}

.legend-name {
    font-size: 1.4rem;
    margin-bottom: var(--space-1);
    color: var(--packers-green);
    font-weight: 700;
}

.legend-position {
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-era {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
    font-weight: 500;
}

.legend-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-5);
}

.legend-tag {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    color: var(--gray-700);
    font-weight: 600;
    border: 1px solid var(--gray-200);
}

.legend-cta {
    display: flex;
    gap: 10px;
}

.legend-cta .btn {
    flex: 1;
    padding: 12px;
    font-size: 0.85rem;
}

/* Featured Achievement Badge - 3D Premium Design */
.legend-featured-achievement {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: perspective(500px) rotateX(2deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 4;
    background: linear-gradient(145deg, 
        rgba(20, 45, 35, 0.95) 0%, 
        rgba(10, 30, 22, 0.98) 50%,
        rgba(5, 20, 15, 0.95) 100%);
    color: var(--packers-gold);
    border: 1px solid rgba(212, 168, 24, 0.4);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px rgba(212, 168, 24, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: default;
    text-align: center;
    max-width: calc(100% - 20px);
}

.legend-featured-achievement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

.legend-featured-achievement i {
    font-size: 0.85rem;
    color: var(--packers-gold);
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.5));
    animation: achievementIconPulse 3s ease-in-out infinite;
}

.legend-featured-achievement span {
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.legend-card:hover .legend-featured-achievement {
    transform: perspective(500px) rotateX(0deg) translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 0 30px rgba(212, 168, 24, 0.25);
    border-color: rgba(212, 168, 24, 0.6);
}

.legend-card:hover .legend-featured-achievement i {
    animation: achievementIconGlow 1.5s ease-in-out infinite;
}

@keyframes achievementIconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.05); }
}

@keyframes achievementIconGlow {
    0%, 100% { 
        filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.5)); 
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 2px 8px rgba(212, 168, 24, 0.8)) drop-shadow(0 0 12px rgba(212, 168, 24, 0.6)); 
        transform: scale(1.1);
    }
}

/* Legend Era Badge */
.legend-era {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.legend-era i {
    color: var(--packers-gold);
    font-size: 0.75rem;
}

.era-badge {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Legend Description */
.legend-description {
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Legend Achievements */
.legend-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-5);
}

.achievement-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.1) 0%, rgba(212, 168, 24, 0.05) 100%);
    border: 1px solid rgba(212, 168, 24, 0.2);
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    color: var(--gray-700);
    font-weight: 600;
}

.achievement-tag i {
    color: var(--packers-gold);
    font-size: 0.6rem;
}

/* ============================================
   WHY CHOOSE US - Premium Feature Cards
   ============================================ */
.why-us {
    padding: var(--space-24) 0;
    background: 
        linear-gradient(135deg, var(--packers-green-deep) 0%, var(--packers-green-rich) 50%, var(--packers-green) 100%);
    position: relative;
    overflow: hidden;
}

.why-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(212, 168, 24, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(212, 168, 24, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.why-us .section-tag {
    background: rgba(212, 168, 24, 0.15);
    border-color: rgba(212, 168, 24, 0.3);
}

.why-us .section-title {
    color: var(--white);
}

.why-us .section-title::after {
    background: linear-gradient(90deg, transparent, var(--packers-gold), transparent);
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    position: relative;
    z-index: 1;
}

.why-us-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.why-us-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright), var(--packers-gold));
    opacity: 0;
    transition: var(--transition);
}

.why-us-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 168, 24, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.why-us-card:hover::before {
    opacity: 1;
}

.why-us-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    box-shadow: 
        0 8px 30px rgba(212, 168, 24, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
}

.why-us-icon::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 2px solid rgba(26, 58, 47, 0.2);
}

.why-us-icon i {
    font-size: 2rem;
    color: var(--packers-green);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.why-us-card h3 {
    font-size: 1.35rem;
    margin-bottom: var(--space-4);
    color: var(--white);
    font-family: 'Playfair Display', serif;
}

.why-us-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.7;
}

/* ============================================
   PACKAGES SECTION - Premium Pricing Cards
   ============================================ */
.packages {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 50%, var(--off-white) 100%);
    position: relative;
}

.packages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-8);
    align-items: stretch;
}

.package-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 0;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(50px) rotateX(8deg);
    transform-origin: center bottom;
}

.package-card.scroll-revealed {
    animation: packageCardReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.package-card.tier-good.scroll-revealed { animation-delay: 0s; }
.package-card.tier-better.scroll-revealed { animation-delay: 0.15s; }
.package-card.tier-best.scroll-revealed { animation-delay: 0.3s; }

@keyframes packageCardReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateX(8deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-8px) rotateX(-2deg);
    }
    75% {
        transform: translateY(4px) rotateX(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-green-rich));
    transition: var(--transition);
}

.package-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-2xl);
}

.package-card:hover::before {
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright));
}

.package-card.featured {
    border: 2px solid var(--packers-gold);
    transform: scale(1.03);
    box-shadow: var(--shadow-gold-lg);
    z-index: 2;
}

.package-card.featured::before {
    height: 6px;
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright), var(--packers-gold));
}

.package-card.featured:hover {
    transform: scale(1.03) translateY(-12px);
    box-shadow: 
        0 25px 60px rgba(212, 168, 24, 0.3),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

.package-badge {
    position: absolute;
    top: 24px;
    right: -60px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 220px;
    padding: 10px 0;
    box-sizing: border-box;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    transform: rotate(45deg);
    transform-origin: center center;
    box-shadow: 0 2px 10px rgba(212, 168, 24, 0.3);
}

.package-badge.premium {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
}

.package-badge i {
    margin-right: 0;
}

/* Package Tier Labels */
.package-tier-label {
    text-align: center;
    padding: 10px 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--gray-100);
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* TIER: Good (Entry Level) */
.package-card.tier-good {
    border-color: #4a7c6a;
}

.package-card.tier-good::before {
    background: linear-gradient(90deg, #4a7c6a, #5a8c7a);
}

.package-card.tier-good .btn-package {
    background: linear-gradient(135deg, #4a7c6a 0%, #5a8c7a 100%);
    color: var(--white);
}

.package-card.tier-good .btn-package:hover {
    background: linear-gradient(135deg, #3d6a5a 0%, #4a7c6a 100%);
}

.package-card.tier-good .package-tier-label {
    background: var(--gray-100);
    color: var(--gray-600);
}

.package-card.tier-good .package-icon {
    background: transparent;
}

.package-card.tier-good .package-icon i {
    color: var(--white);
}

.package-card.tier-good:hover::before {
    background: linear-gradient(90deg, var(--packers-green), var(--packers-green-rich));
}

/* TIER: Better (Most Popular - Best Value) */
.package-card.tier-better {
    border: 3px solid var(--packers-gold);
    transform: scale(1.05);
    z-index: 3;
}

.package-card.tier-better::before {
    height: 8px;
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-gold-bright), var(--packers-gold));
}

.package-card.tier-better .package-tier-label {
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.08) 100%);
    color: var(--packers-green);
    font-weight: 900;
}

.package-card.tier-better .package-header {
    background: linear-gradient(180deg, rgba(212, 168, 24, 0.08) 0%, var(--white) 100%);
}

.package-card.tier-better .package-icon {
    background: transparent;
    box-shadow: none;
}

.package-card.tier-better .package-icon i {
    color: var(--packers-green);
}

.package-card.tier-better:hover {
    transform: scale(1.05) translateY(-12px);
    box-shadow: 
        0 30px 70px rgba(212, 168, 24, 0.35),
        0 15px 30px rgba(0, 0, 0, 0.15);
}

/* TIER: Best (Premium/Ultimate) */
.package-card.tier-best {
    border: 2px solid var(--packers-green);
    background: linear-gradient(180deg, var(--white) 0%, rgba(26, 58, 47, 0.02) 100%);
}

.package-card.tier-best::before {
    height: 6px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-gold), var(--packers-green));
}

.package-card.tier-best .package-tier-label {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-weight: 900;
}

.package-card.tier-best .package-header {
    background: linear-gradient(180deg, rgba(26, 58, 47, 0.06) 0%, var(--white) 100%);
}

.package-card.tier-best .package-icon {
    background: transparent;
    box-shadow: none;
}

.package-card.tier-best .package-icon i {
    color: var(--packers-gold);
}

.package-card.tier-best .package-badge.premium {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
}

.package-card.tier-best:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 25px 60px rgba(26, 58, 47, 0.25),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

.package-card.tier-best:hover::before {
    background: linear-gradient(90deg, var(--packers-gold), var(--packers-green), var(--packers-gold));
}

/* Package Includes Label */
.package-includes {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--packers-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid rgba(212, 168, 24, 0.3);
}

/* Premium Button Style */
.btn-package.btn-premium {
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(26, 58, 47, 0.3);
}

.btn-package.btn-premium:hover {
    background: linear-gradient(135deg, var(--packers-green-rich) 0%, var(--packers-green-deep) 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 58, 47, 0.4);
}

.btn-package.btn-premium i {
    margin-right: 6px;
}

/* Feature highlights for premium tiers */
.package-card.tier-better .package-features li i.fa-star,
.package-card.tier-best .package-features li i.fa-crown,
.package-card.tier-best .package-features li i.fa-gift {
    color: var(--packers-gold);
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.4));
}

.package-features li strong {
    color: var(--packers-green);
}

.package-header {
    text-align: center;
    padding: var(--space-10) var(--space-8) var(--space-6);
    background: 
        linear-gradient(180deg, var(--gray-100) 0%, var(--white) 100%);
    position: relative;
}

.package-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.package-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -15px auto 0;
    padding: 0 0 20px 0;
    position: relative;
    line-height: 0;
}

.package-icon::after {
    content: none;
}

.package-icon i {
    font-size: 1.6rem;
    color: var(--packers-gold);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.package-tier-image {
    display: block;
    width: 170px;
    height: 170px;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    border-radius: 50%;
    /* Medallion 3D effect - layered shadows for depth */
    filter: 
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15))
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.08))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.05));
    transform: translateY(0) scale(1);
    /* 75ms delay when returning to resting position */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 75ms,
                filter 0.4s ease 75ms;
}

/* Medallion lift effect on card hover - 75ms delay */
.package-card:hover .package-tier-image {
    transform: translateY(-8px) scale(1.02);
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.08))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.06))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.04))
        drop-shadow(0 0 20px rgba(212, 168, 24, 0.25));
    /* 75ms delay when lifting */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 75ms,
                filter 0.4s ease 75ms;
}

/* Tier-specific medallion glow accents */
.package-card.tier-good:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.08))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.06))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.04))
        drop-shadow(0 0 15px rgba(74, 124, 106, 0.3));
}

.package-card.tier-better:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.08))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.06))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.04))
        drop-shadow(0 0 25px rgba(212, 168, 24, 0.4));
}

.package-card.tier-best:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.08))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.06))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.04))
        drop-shadow(0 0 20px rgba(26, 58, 47, 0.3))
        drop-shadow(0 0 30px rgba(212, 168, 24, 0.2));
}

@media (max-width: 768px) {
    .package-icon {
        margin: -10px auto 0;
        padding: 0 0 12px 0;
    }
}

.package-header h3 {
    font-size: 1.5rem;
    color: var(--packers-green);
    margin-bottom: var(--space-2);
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
}

.package-duration {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    margin-bottom: var(--space-5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.package-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-from {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-1);
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
    line-height: 1;
}

.price-currency {
    font-size: 1.5rem;
    vertical-align: top;
    line-height: 1;
}

.package-content {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.package-features {
    list-style: none;
    margin-bottom: var(--space-6);
    flex: 1;
}

.package-features li {
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
}

.package-features li:last-child {
    border-bottom: none;
}

.package-features i {
    color: var(--packers-gold);
    margin-top: 2px;
    font-size: 0.9rem;
}

.package-ideal {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(212, 168, 24, 0.03) 100%);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--gray-700);
    border: 1px solid rgba(212, 168, 24, 0.15);
}

.package-ideal i {
    color: var(--packers-gold);
    font-size: 1rem;
}

/* ============================================
   OTHER LEGEND EXPERIENCES
   ============================================ */
.other-legend-experiences {
    margin-top: var(--space-12);
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-12);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.other-legend-experiences::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.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
}

.ole-icon {
    width: 105px;
    height: 105px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.ole-icon i {
    font-size: 1.8rem;
    color: var(--packers-green);
}

.ole-icon .ole-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ole-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    position: relative;
    z-index: 1;
}

.ole-header-text {
    flex: 1;
    text-align: left;
}

.ole-icon {
    flex-shrink: 0;
    margin: 0;
}

.other-legend-experiences h3 {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: var(--space-2);
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

.ole-header-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    margin-bottom: 0;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.ole-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

.ole-item {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.ole-item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ole-item-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--packers-gold), var(--packers-gold-bright));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ole-item-icon i {
    font-size: 1.2rem;
    color: var(--packers-green);
}

.ole-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ole-item-content strong {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
}

.ole-item-content span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ole-cta {
    color: var(--packers-gold) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    margin-top: var(--space-4);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .other-legend-experiences {
        padding: var(--space-8) var(--space-5);
    }
    
    .ole-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }
    
    .ole-header-text {
        text-align: center;
    }
    
    .ole-icon {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }
    
    .ole-icon i {
        font-size: 1.5rem;
    }
    
    .other-legend-experiences h3 {
        font-size: 1.6rem;
    }
    
    .other-legend-experiences > p {
        font-size: 1rem;
    }
    
    .ole-items {
        grid-template-columns: 1fr;
    }
    
    .ole-item {
        padding: var(--space-4);
    }
}

/* ============================================
   TESTIMONIALS - Premium Social Proof
   ============================================ */
.testimonials {
    padding: var(--space-24) 0;
    background: 
        linear-gradient(180deg, var(--gray-100) 0%, var(--off-white) 100%);
    position: relative;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.testimonial-card {
    background: var(--white);
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    border: 1px solid var(--gray-200);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: var(--space-6);
    right: var(--space-8);
    font-size: 6rem;
    font-family: Georgia, serif;
    color: var(--packers-gold);
    opacity: 0.1;
    line-height: 1;
}

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

.testimonial-card.featured {
    border: 2px solid var(--packers-gold);
    background: linear-gradient(135deg, var(--white) 0%, rgba(212, 168, 24, 0.02) 100%);
    box-shadow: var(--shadow-gold);
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-5);
}

.testimonial-rating i {
    color: var(--packers-gold);
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(212, 168, 24, 0.3));
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--gray-700);
    margin-bottom: var(--space-6);
    font-style: italic;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--gray-200);
}

.author-avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.2);
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name {
    font-weight: 700;
    color: var(--packers-green);
    font-size: 1rem;
}

.author-event {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* ============================================
   PRO SHOP SECTION - Light Retail Theme
   ============================================ */
.proshop-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #f8f6f0 0%, #fffef9 50%, #f5f3eb 100%);
    position: relative;
    overflow: hidden;
}

.proshop-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(35, 75, 55, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(212, 168, 24, 0.05) 0%, transparent 40%),
        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='%23234b37' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

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

/* Pro Shop Header */
.proshop-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.proshop-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #234b37 0%, #1a3a2a 100%);
    padding: 1.25rem 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(35, 75, 55, 0.25), 0 0 0 1px rgba(212, 168, 24, 0.2);
}

.proshop-logo-badge .proshop-logo {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(212, 168, 24, 0.3));
}

.proshop-tagline {
    display: inline-block;
    background: linear-gradient(135deg, #234b37 0%, #2d5a45 100%);
    color: var(--packers-gold);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.proshop-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #234b37;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.proshop-subtitle {
    font-size: 1.1rem;
    color: #5a6b5f;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Features Bar */
.proshop-features-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.proshop-feature-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #234b37;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(35, 75, 55, 0.1);
}

.proshop-feature-pill i {
    color: var(--packers-gold);
    font-size: 0.9rem;
}

/* Categories Section */
.proshop-categories {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(35, 75, 55, 0.08);
    margin-bottom: 2rem;
}

.proshop-categories-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #234b37;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(35, 75, 55, 0.1);
}

.proshop-categories-title i {
    color: var(--packers-gold);
}

/* Pro Shop Grid */
.proshop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.proshop-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, #fafaf8 0%, #f5f5f2 100%);
    border: 1px solid rgba(35, 75, 55, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.proshop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(35, 75, 55, 0.12);
    border-color: var(--packers-gold);
    background: linear-gradient(145deg, #fffef9 0%, #faf9f4 100%);
}

.proshop-card-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, #234b37 0%, #1a3a2a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.proshop-card-icon i {
    font-size: 1.5rem;
    color: var(--packers-gold);
}

.proshop-card-content {
    flex: 1;
}

.proshop-card-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #234b37;
    margin-bottom: 0.25rem;
}

.proshop-card-content p {
    font-size: 0.8rem;
    color: #6b7c70;
    margin: 0;
}

.proshop-card-action {
    width: 36px;
    height: 36px;
    background: rgba(212, 168, 24, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.proshop-card-action i {
    font-size: 0.9rem;
    color: var(--packers-gold);
}

.proshop-card:hover .proshop-card-action {
    background: var(--packers-gold);
}

.proshop-card:hover .proshop-card-action i {
    color: #234b37;
}

/* Coming Soon */
.proshop-coming-soon {
    text-align: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(35, 75, 55, 0.03) 0%, rgba(212, 168, 24, 0.03) 100%);
    border-radius: 12px;
    border: 1px dashed rgba(35, 75, 55, 0.15);
}

.coming-soon-label {
    display: inline-block;
    background: linear-gradient(135deg, #234b37 0%, #2d5a45 100%);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.coming-soon-items {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.coming-soon-items span {
    font-size: 0.85rem;
    color: #6b7c70;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.coming-soon-items i {
    color: rgba(212, 168, 24, 0.6);
    font-size: 0.8rem;
}

/* Promo Banner */
.proshop-promo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #234b37 0%, #1a3a2a 100%);
    padding: 1.25rem 2rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(35, 75, 55, 0.3);
}

.promo-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 168, 24, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-icon i {
    font-size: 1.25rem;
    color: var(--packers-gold);
}

.promo-text {
    display: flex;
    flex-direction: column;
}

.promo-text strong {
    font-size: 1.1rem;
    color: var(--packers-gold);
}

.promo-text span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Pro Shop Responsive */
@media (max-width: 768px) {
    .proshop-title {
        font-size: 1.75rem;
    }
    
    .proshop-grid {
        grid-template-columns: 1fr;
    }
    
    .proshop-features-bar {
        gap: 0.5rem;
    }
    
    .proshop-feature-pill {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .coming-soon-items {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .proshop-promo-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .package-preview-icons {
        display: flex;
        position: relative;
        z-index: 10;
    }
}

/* Legacy memorabilia styles kept for compatibility */
.memorabilia {
    padding: var(--space-24) 0;
    background: 
        linear-gradient(135deg, var(--packers-green-deep) 0%, var(--packers-green-rich) 50%, var(--packers-green) 100%);
    position: relative;
    overflow: hidden;
}

.memorabilia::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 80% 20%, rgba(212, 168, 24, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(212, 168, 24, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.memorabilia-wrapper {
    display: block;
    max-width: 700px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.memorabilia-text .section-tag {
    background: rgba(212, 168, 24, 0.15);
    color: var(--packers-gold);
    border-color: rgba(212, 168, 24, 0.3);
}

/* Pro Shop Logo */
.proshop-logo-container {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 var(--space-6) 0;
}

.proshop-logo {
    width: 225px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(212, 168, 24, 0.3));
}

.memorabilia-text .section-title {
    color: var(--white);
}

.memorabilia-text .section-title::after {
    left: 0;
    transform: none;
}

.memorabilia-description {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
    line-height: 1.8;
}

.memorabilia-items-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.memo-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--white);
    transition: var(--transition);
}

.memo-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 168, 24, 0.3);
    transform: translateX(5px);
}

.memo-item i {
    color: var(--packers-gold);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.3));
}

.memorabilia-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.memo-showcase {
    width: 245px;
    height: 245px;
    background: 
        linear-gradient(135deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.05) 100%);
    border: 2px solid rgba(212, 168, 24, 0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
    backdrop-filter: blur(20px);
    position: relative;
    animation: showcaseFloat 6s ease-in-out infinite;
}

@keyframes showcaseFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.memo-showcase::before {
    content: '';
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    border: 1px solid rgba(212, 168, 24, 0.2);
}

.memo-showcase::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 168, 24, 0.15);
    animation: rotateSlow 30s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.memo-showcase i {
    font-size: 5rem;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-5);
    filter: drop-shadow(0 4px 10px rgba(212, 168, 24, 0.3));
}

.memo-showcase span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.memo-showcase .memo-helmet {
    width: 72%;
    height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
    animation: helmetFloat 6.5s ease-in-out infinite;
    animation-delay: 200ms;
}

@keyframes helmetFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (max-width: 768px) {
    .memo-showcase {
        width: 175px;
        height: 175px;
    }
    
    .memo-showcase i {
        font-size: 3.5rem;
    }

    .memo-showcase .memo-helmet {
        width: 76%;
        height: 76%;
    }
}

/* ============================================
   BOOKING SECTION - Premium Form Experience
   ============================================ */
.booking-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
    position: relative;
}

.booking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.booking-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-10);
    align-items: start;
}

.booking-form-wrapper {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-12);
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}

.selected-legend-header {
    padding: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.selected-legend-header.hidden {
    display: none;
}

/* Ticket Actions Container - Right Side */
.ticket-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding-left: var(--space-2);
}

.ticket-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--packers-green);
    font-size: 0.9rem;
    opacity: 0.6;
}

.ticket-arrow i {
    animation: pulseArrow 1.5s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(3px); opacity: 1; }
}

/* Booking Selection Steps */
.booking-selection-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.selection-step {
    position: relative;
}

/* Selection Step Button - Premium Design */
.selection-step-btn {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-5) var(--space-6);
    background: 
        linear-gradient(135deg, #f8f3e8 0%, #f5edd8 50%, #f2e8cc 100%);
    border: 2px solid rgba(139, 109, 56, 0.3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.selection-step-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-gold), var(--packers-green));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.selection-step-btn:hover {
    border-color: var(--packers-gold);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(26, 58, 47, 0.15),
        0 4px 12px rgba(212, 168, 24, 0.15);
}

.selection-step-btn:hover::before {
    opacity: 1;
}

.step-btn-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: 50%;
    color: var(--packers-gold);
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 
        0 4px 12px rgba(26, 58, 47, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.step-btn-content {
    flex: 1;
}

.step-btn-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--packers-gold-dark);
    font-weight: 600;
    margin-bottom: 4px;
}

.step-btn-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--packers-green);
}

.step-btn-arrow {
    color: var(--packers-green);
    font-size: 1.2rem;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.selection-step-btn:hover .step-btn-arrow {
    opacity: 1;
    transform: translateX(4px);
    color: var(--packers-gold);
}

.selection-step-btn.hidden {
    display: none;
}

/* Ticket Badge Row */
.ticket-badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0;
}

/* Ticket Number Badge */
.ticket-number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: 50%;
    color: var(--packers-gold);
    font-family: 'Bebas Neue', cursive;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
    box-shadow: 0 2px 6px rgba(26, 58, 47, 0.3);
}

/* Ticket Checkmark Overlay - Independent, overlaps right edge of ticket */
.ticket-checkmark-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--packers-green);
    font-size: 3.15rem;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.ticket-checkmark-overlay.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(50%) scale(1);
}

.ticket-checkmark-overlay.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(50%) scale(0.5);
}

.ticket-checkmark-overlay i {
    font-weight: 900;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Ensure header containers have relative positioning for checkmark overlay */
.selected-legend-header,
.selected-package-header {
    position: relative;
}

/* Ticket Change Button */
.ticket-change-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(26, 58, 47, 0.1);
    border: 1px solid rgba(26, 58, 47, 0.2);
    color: var(--packers-green);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ticket-change-btn i {
    animation: spinPulse 2s ease-in-out infinite;
}

@keyframes spinPulse {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

.ticket-change-btn:hover {
    background: var(--packers-green);
    color: var(--packers-gold);
    border-color: var(--packers-green);
}

.ticket-change-btn:hover i {
    animation: none;
    transform: rotate(180deg);
}

/* Selected Package Header (new step 2) */
.selected-package-header {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.selected-package-header.hidden {
    display: none;
}

@media (max-width: 768px) {
    .selection-step-btn {
        padding: var(--space-4);
        gap: var(--space-4);
    }
    
    .step-btn-number {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .step-btn-title {
        font-size: 1.1rem;
    }
    
    .step-btn-label {
        font-size: 0.65rem;
    }
    
    .ticket-number-badge {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }
    
    /* Smaller checkmark overlay on mobile */
    .ticket-checkmark-overlay {
        font-size: 2.2rem;
    }
    
    .ticket-actions {
        gap: var(--space-1);
        padding-left: var(--space-1);
    }
    
    .ticket-arrow {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }
    
    .ticket-change-btn {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Ticket Style Layout - Vintage Parchment Look */
.legend-ticket {
    display: flex;
    align-items: stretch;
    background: 
        linear-gradient(135deg, #f5e6c8 0%, #e8d4a8 50%, #f0dbb8 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        0 6px 24px rgba(139, 109, 56, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(139, 109, 56, 0.2);
    position: relative;
    border: 1px solid rgba(139, 109, 56, 0.3);
}

.legend-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0' fill='%238b6d38' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.ticket-left {
    flex: 0 0 200px;
    width: 200px;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(26, 58, 47, 0.12) 0%, rgba(26, 58, 47, 0.06) 100%);
}

.ticket-label {
    font-size: 0.95rem;
    color: var(--packers-green);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    line-height: 1.2;
    width: 80px;
    text-align: left;
}

.ticket-stub {
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 6px,
        rgba(139, 109, 56, 0.4) 6px,
        rgba(139, 109, 56, 0.4) 12px
    );
    position: relative;
}

.ticket-stub::before,
.ticket-stub::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--off-white);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ticket-stub::before {
    top: -8px;
}

.ticket-stub::after {
    bottom: -8px;
}

.ticket-right {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ticket-player-info {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
}

.ticket-number {
    font-family: 'Bebas Neue', cursive;
    font-size: 2.8rem;
    color: var(--packers-green);
    line-height: 1;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.ticket-details {
    flex: 1;
}

.ticket-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--packers-green);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.ticket-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ticket-position {
    font-size: 0.8rem;
    color: var(--packers-gold-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-divider {
    color: var(--gray-400);
    font-size: 0.7rem;
}

.ticket-seasons {
    font-size: 0.8rem;
    color: var(--gray-700);
    font-weight: 600;
}

@media (max-width: 768px) {
    .legend-ticket {
        flex-direction: row;
        align-items: center;
    }
    
    .ticket-left {
        flex: 0 0 auto;
        width: auto;
        min-width: 50px;
        padding: var(--space-3);
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
    
    .ticket-left .ticket-badge-row {
        flex-direction: row;
    }
    
    .ticket-label {
        display: none;
    }
    
    .ticket-stub {
        width: 2px;
        height: auto;
        align-self: stretch;
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            rgba(139, 109, 56, 0.35) 4px,
            rgba(139, 109, 56, 0.35) 8px
        );
    }
    
    .ticket-stub::before,
    .ticket-stub::after {
        width: 12px;
        height: 12px;
    }
    
    .ticket-stub::before {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .ticket-stub::after {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .ticket-right {
        flex: 1;
        padding: var(--space-2) var(--space-3);
    }
    
    .ticket-player-info {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
    
    .ticket-number {
        font-size: 1.5rem;
        min-width: 48px;
    }
    
    .ticket-details {
        flex: 1;
        min-width: 0;
    }
    
    .ticket-name {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .ticket-meta {
        font-size: 0.7rem;
    }
    
    .ticket-position,
    .ticket-seasons {
        font-size: 0.65rem;
    }
    
    .ticket-change-btn {
        width: 28px;
        height: 28px;
    }
    
    .ticket-change-btn i {
        font-size: 0.7rem;
    }
}

/* Choose Next Buttons */
.choose-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.3);
}

.choose-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 47, 0.4);
}

.choose-next-btn.hidden {
    display: none;
}

.choose-next-text {
    flex: 1;
    text-align: left;
}

.choose-next-icons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.choose-next-thumb {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.15);
    padding: 3px;
    transition: transform 0.2s ease;
}

.choose-next-btn:hover .choose-next-thumb {
    transform: scale(1.1);
}

.choose-next-arrow {
    font-size: 1.1rem;
    margin-left: var(--space-2);
    transition: transform 0.3s ease;
}

.choose-next-btn:hover .choose-next-arrow {
    transform: translateX(4px);
}

.choose-legend-btn {
    margin-top: var(--space-4);
}

@media (max-width: 768px) {
    .choose-next-btn {
        flex-wrap: wrap;
        padding: var(--space-3) var(--space-4);
        font-size: 0.85rem;
        gap: var(--space-3);
    }
    
    .choose-next-text {
        text-align: center;
        width: 100%;
        order: 1;
    }
    
    .choose-next-icons {
        order: 2;
    }
    
    .choose-next-arrow {
        order: 3;
    }
    
    .choose-next-thumb {
        width: 24px;
        height: 24px;
    }
}

/* Sticky Floating Windows */
.sticky-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(245, 230, 200, 0.95) 0%, rgba(232, 212, 168, 0.95) 100%);
    border: 1px solid rgba(139, 109, 56, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(139, 109, 56, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    z-index: 1000;
    animation: floatFadeIn 0.5s ease-out;
    max-width: fit-content;
    width: auto;
}

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

.sticky-float.hidden {
    display: none;
}

.sticky-float-label {
    font-size: 0.65rem;
    color: var(--packers-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-align: center;
}

.sticky-float-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sticky-float-number {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.8rem;
    color: var(--packers-green);
    line-height: 1;
}

.sticky-float-name {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--packers-green);
    font-weight: 700;
    line-height: 1.2;
}

.sticky-float-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .sticky-float {
        bottom: 10px;
        right: 10px;
        left: auto;
        max-width: fit-content;
        width: auto;
        padding: var(--space-2) var(--space-3);
    }
    
    .sticky-float-number {
        font-size: 1.5rem;
    }
    
    .sticky-float-name {
        font-size: 0.9rem;
    }
    
    .sticky-float-img {
        width: 30px;
        height: 30px;
    }
}

.booking-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--packers-green), var(--packers-gold), var(--packers-green));
}

.booking-form {
    margin-bottom: var(--space-8);
}

.form-step {
    display: none;
    animation: fadeInStep 0.4s ease-out;
}

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

.form-step.active {
    display: block;
}

/* Selected Package Display - Ticket Style */
.selected-package-display {
    margin-bottom: var(--space-6);
}

.selected-package-display.hidden {
    display: none;
}

/* Package Ticket Layout - Vintage Style */
.package-ticket {
    display: flex;
    align-items: stretch;
    background: 
        linear-gradient(135deg, #f5e6c8 0%, #e8d4a8 50%, #f0dbb8 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        0 6px 24px rgba(139, 109, 56, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(139, 109, 56, 0.2);
    position: relative;
    border: 1px solid rgba(139, 109, 56, 0.3);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.package-ticket.package-switching {
    opacity: 0.7;
    transform: scale(0.98);
}

.package-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0' fill='%238b6d38' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.package-ticket-left {
    flex: 0 0 200px;
    width: 200px;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(26, 58, 47, 0.12) 0%, rgba(26, 58, 47, 0.06) 100%);
}

.package-ticket-label {
    font-size: 0.9rem;
    color: var(--packers-green);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    line-height: 1.2;
    width: 90px;
    text-align: left;
}

.package-ticket-stub {
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 6px,
        rgba(139, 109, 56, 0.4) 6px,
        rgba(139, 109, 56, 0.4) 12px
    );
    position: relative;
}

.package-ticket-stub::before,
.package-ticket-stub::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--off-white);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.package-ticket-stub::before {
    top: -8px;
}

.package-ticket-stub::after {
    bottom: -8px;
}

.package-ticket-right {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

.package-ticket-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.package-ticket-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-ticket-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.package-ticket-details {
    flex: 1;
}

.package-ticket-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--packers-green);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.package-ticket-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.package-ticket-duration {
    font-size: 0.8rem;
    color: var(--gray-700);
    font-weight: 600;
}

.package-ticket-divider {
    color: var(--gray-400);
    font-size: 0.7rem;
}

.package-ticket-price {
    font-size: 0.8rem;
    color: var(--packers-gold-dark);
    font-weight: 700;
}

.package-change-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26, 58, 47, 0.3);
}

.package-change-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.package-change-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(26, 58, 47, 0.4);
}

.package-change-btn:hover i {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .package-ticket {
        flex-direction: row;
        align-items: center;
    }
    
    .package-ticket-left {
        flex: 0 0 auto;
        width: auto;
        min-width: 50px;
        padding: var(--space-3);
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
    
    .package-ticket-left .ticket-badge-row {
        flex-direction: row;
    }
    
    .package-ticket-label {
        display: none;
    }
    
    .package-ticket-stub {
        width: 2px;
        height: auto;
        align-self: stretch;
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            rgba(139, 109, 56, 0.35) 4px,
            rgba(139, 109, 56, 0.35) 8px
        );
    }
    
    .package-ticket-stub::before,
    .package-ticket-stub::after {
        width: 12px;
        height: 12px;
    }
    
    .package-ticket-stub::before {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .package-ticket-stub::after {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .package-ticket-right {
        flex: 1;
        padding: var(--space-2) var(--space-3);
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
    
    .package-ticket-info {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        flex: 1;
        min-width: 0;
    }
    
    .package-ticket-img {
        width: 40px;
        height: 40px;
    }
    
    .package-ticket-details {
        flex: 1;
        min-width: 0;
    }
    
    .package-ticket-name {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .package-ticket-meta {
        flex-wrap: nowrap;
    }
    
    .package-ticket-duration,
    .package-ticket-price {
        font-size: 0.65rem;
    }
    
    .package-ticket-divider {
        font-size: 0.55rem;
    }
    
    .package-change-btn,
    .package-ticket-right .ticket-change-btn {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    
    .package-change-btn i,
    .package-ticket-right .ticket-change-btn i {
        font-size: 0.7rem;
    }
}

.step-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 1.5rem;
    margin-bottom: var(--space-8);
    margin-left: 15px;
    color: var(--packers-green);
    font-family: 'Playfair Display', serif;
}

.step-number {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.3);
    font-family: 'Roboto', sans-serif;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--gray-700);
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    transition: var(--transition);
    background: var(--white);
    color: var(--gray-800);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--gray-300);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--packers-gold);
    box-shadow: 0 0 0 4px rgba(212, 168, 24, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Package Selector in Form */
.package-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.package-option {
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    background: var(--white);
}

.package-option:hover {
    border-color: var(--packers-gold);
    background: rgba(212, 168, 24, 0.02);
}

.package-option input {
    width: auto;
    margin-right: var(--space-5);
    accent-color: var(--packers-gold);
    transform: scale(1.2);
}

.package-option-content {
    flex: 1;
}

.package-option .package-name {
    display: block;
    font-weight: 700;
    color: var(--packers-green);
    font-size: 1rem;
}

.package-option .package-details {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.package-option .package-tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: var(--space-2);
}

.package-option.recommended {
    border-color: var(--packers-gold);
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.05) 0%, rgba(212, 168, 24, 0.02) 100%);
    box-shadow: var(--shadow-gold);
}

/* Legend Selector */
.legend-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--packers-gold) var(--gray-100);
}

.legend-selector::-webkit-scrollbar {
    width: 6px;
}

.legend-selector::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.legend-selector::-webkit-scrollbar-thumb {
    background: var(--packers-gold);
    border-radius: 3px;
}

.legend-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    background: var(--white);
}

.legend-option:hover {
    border-color: var(--packers-gold);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.legend-option.selected {
    border-color: var(--packers-gold);
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(212, 168, 24, 0.02) 100%);
    box-shadow: var(--shadow-gold);
}

.legend-option-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.2);
}

.legend-option-icon i {
    color: var(--packers-gold);
    font-size: 1.2rem;
}

.legend-option-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--packers-green);
}

.legend-option-pos {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

/* Booking Recommendations */
.booking-recommendations {
    margin-bottom: var(--space-5);
}

.recommendation-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.08) 0%, rgba(26, 58, 47, 0.03) 100%);
    border: 1px solid rgba(212, 168, 24, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.recommendation-box i {
    color: var(--packers-gold);
    font-size: 1.4rem;
    margin-top: 2px;
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.3));
}

.recommendation-content p {
    margin: var(--space-1) 0 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* Checkbox Styles */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.checkbox-label input {
    width: 22px;
    height: 22px;
    accent-color: var(--packers-gold);
    cursor: pointer;
}

.link {
    color: var(--packers-gold);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

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

/* Step Buttons */
.step-buttons {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.step-buttons .btn-primary {
    padding-top: calc(var(--space-4) + 10px);
}

/* Form Progress */
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--gray-200);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.progress-number {
    width: 36px;
    height: 36px;
    background: var(--gray-200);
    color: var(--gray-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: var(--transition);
}

.progress-step.active .progress-number,
.progress-step.completed .progress-number {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.3);
}

.progress-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.progress-step.active .progress-label,
.progress-step.completed .progress-label {
    color: var(--packers-green);
}

.progress-line {
    width: 70px;
    height: 3px;
    background: var(--gray-200);
    margin: 0 var(--space-3);
    margin-bottom: 22px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.progress-step.completed + .progress-line {
    background: var(--packers-gold);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--gray-200);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(26, 58, 47, 0.05) 0%, rgba(26, 58, 47, 0.02) 100%);
    border: 1px solid rgba(26, 58, 47, 0.1);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.trust-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 58, 47, 0.1);
    border-color: var(--packers-green);
}

.trust-badge-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-badge-icon i {
    color: var(--packers-gold);
    font-size: 1.1rem;
}

.trust-badge-icon-pro {
    background: transparent !important;
    width: 50px;
    height: 50px;
}

.badge-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.trust-badge:hover .badge-svg {
    transform: scale(1.05);
}

.trust-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trust-badge-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--packers-green);
}

.trust-badge-desc {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0 var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.payment-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.payment-icons {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.payment-icons i {
    font-size: 2rem;
    color: var(--gray-400);
    transition: all 0.3s ease;
}

.payment-icons i:hover {
    color: var(--packers-green);
    transform: scale(1.1);
}

.payment-icons .fa-cc-visa:hover { color: #1a1f71; }
.payment-icons .fa-cc-mastercard:hover { color: #eb001b; }
.payment-icons .fa-cc-amex:hover { color: #006fcf; }
.payment-icons .fa-cc-discover:hover { color: #ff6000; }
.payment-icons .fa-cc-apple-pay:hover { color: #000000; }
.payment-icons .fa-cc-paypal:hover { color: #003087; }

/* Responsive Trust Badges */
@media (max-width: 576px) {
    .trust-badges {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .trust-badge {
        justify-content: flex-start;
    }
    
    .payment-icons i {
        font-size: 1.6rem;
    }
}

/* Booking Sidebar */
.booking-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.sidebar-card {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
}

.sidebar-card h4 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 1rem;
    margin-bottom: var(--space-3);
    color: var(--packers-green);
    font-family: 'Playfair Display', serif;
}

.sidebar-card h4 i {
    color: var(--packers-gold);
    font-size: 1.1rem;
}

.sidebar-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

/* Sidebar Card Promo Styles */
.sidebar-card-promo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfcf8 0%, #f8f5ed 100%);
    border: 2px solid var(--packers-gold);
    transition: all 0.3s ease;
}

.sidebar-card-promo:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 30px rgba(26, 58, 47, 0.15),
        0 4px 10px rgba(212, 168, 24, 0.2);
    border-color: var(--packers-green);
}

.sidebar-card-badge {
    position: absolute;
    top: 16px;
    right: -32px;
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 40px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(26, 58, 47, 0.3);
    text-align: center;
    min-width: 140px;
}

/* Individual ribbon font styles */
.sidebar-card:nth-child(1) .sidebar-card-badge {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    display: none; /* Hide Legends Pro Shop ribbon */
}

.sidebar-card:nth-child(2) .sidebar-card-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: none; /* Hide Beyond the Party ribbon */
}

.sidebar-card:nth-child(3) .sidebar-card-badge {
    font-family: 'Georgia', serif;
    font-weight: 600;
    font-style: normal;
}

.sidebar-card:nth-child(4) .sidebar-card-badge {
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.sidebar-card:nth-child(5) .sidebar-card-badge {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: none; /* Hide Jamber ribbon */
}

/* Individual card background gradients - Light Mode */
/* Card 1: Legends Pro Shop - Green gradient, darker at top */
.sidebar-card-promo:nth-child(1) {
    background: linear-gradient(to bottom, rgba(26, 58, 47, 0.35) 0%, rgba(26, 58, 47, 0.25) 20%, rgba(26, 58, 47, 0.05) 100%);
}

/* Card 2: Beyond the Party - Green gradient, darker at top */
.sidebar-card-promo:nth-child(2) {
    background: linear-gradient(to bottom, rgba(26, 58, 47, 0.35) 0%, rgba(26, 58, 47, 0.25) 20%, rgba(26, 58, 47, 0.05) 100%);
}

/* Card 3: Wisconsin Getaways - Yellow/Gold gradient */
.sidebar-card-promo:nth-child(3) {
    background: linear-gradient(to bottom, rgba(212, 168, 24, 0.4) 0%, rgba(212, 168, 24, 0.3) 20%, rgba(255, 215, 0, 0.08) 100%);
}

/* Card 4: Stay Green Bay - Green from Stay Green Bay logo */
.sidebar-card-promo:nth-child(4) {
    background: linear-gradient(to bottom, rgba(0, 128, 0, 0.35) 0%, rgba(0, 128, 0, 0.25) 20%, rgba(34, 139, 34, 0.05) 100%);
}

/* Card 5: Jamber - Grayscale */
.sidebar-card-promo:nth-child(5) {
    background: linear-gradient(to bottom, rgba(80, 80, 80, 0.3) 0%, rgba(80, 80, 80, 0.2) 20%, rgba(160, 160, 160, 0.06) 100%);
}

.sidebar-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.sidebar-logo-img {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

/* Light/Dark mode logo switching */
.sidebar-logo-light {
    display: block;
}

.sidebar-logo-dark {
    display: none;
}

body.dark-mode .sidebar-logo-light {
    display: none;
}

body.dark-mode .sidebar-logo-dark {
    display: block;
}

/* Card 1: Legends Pro Shop - 10% larger */
.sidebar-card-promo:nth-child(1) .sidebar-logo-img {
    width: 132px;
    max-height: 88px;
}

/* Card 2: Beyond the Party - 10% larger */
.sidebar-card-promo:nth-child(2) .sidebar-logo-img {
    width: 132px;
    max-height: 88px;
}

.sidebar-card-promo:hover .sidebar-logo-img {
    transform: scale(1.05);
}

.sidebar-card-promo h4 {
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
}

.sidebar-card-promo p {
    text-align: center;
    margin-bottom: var(--space-4);
}

.sidebar-card-promo p strong {
    color: var(--packers-green);
}

.sidebar-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 100%);
    color: var(--packers-gold);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-cta-link:hover {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    transform: translateX(4px);
}

.sidebar-cta-link i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.sidebar-cta-link:hover i {
    transform: translateX(4px);
}

/* ============================================
   FOOTER - Premium Dark Section
   ============================================ */
.footer {
    background: 
        linear-gradient(180deg, var(--packers-green-deep) 0%, var(--obsidian) 100%);
    color: var(--white);
    padding: var(--space-20) 0 var(--space-10);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--packers-gold), transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer-logo-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity 0.3s ease;
}

.footer-logo-link:hover {
    opacity: 0.8;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.footer-logo i {
    color: var(--packers-gold);
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.3));
}

.footer-logo .footer-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.footer-logo span {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-bottom: var(--space-6);
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
}

.footer-social a:hover {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 168, 24, 0.3);
}

.footer-links h4,
.footer-contact h4 {
    color: var(--packers-gold);
    font-size: 0.85rem;
    margin-bottom: var(--space-6);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--space-3);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.9rem;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--packers-gold);
    transform: translateX(5px);
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
}

.footer-contact i {
    color: var(--packers-gold);
    width: 18px;
    font-size: 0.9rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-8);
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin-bottom: var(--space-2);
}

.footer-disclaimer {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   MODALS - Premium Overlay Design
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 24, 18, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.modal.active {
    display: flex;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 450px;
    width: 100%;
    padding: var(--space-12);
    position: relative;
    text-align: center;
    box-shadow: var(--shadow-2xl);
    animation: modalSlideIn 0.4s ease-out;
}

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

.modal-close {
    position: absolute;
    top: calc(var(--space-5) + 30px);
    right: calc(var(--space-5) + 30px);
    background: var(--gray-100);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--gray-600);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.modal-header h2 {
    margin-bottom: var(--space-2);
    color: var(--packers-green);
}

.modal-header p {
    color: var(--gray-600);
}

.modal-body {
    margin-top: var(--space-6);
}

.modal-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* Booking Entry Modal - Premium Vintage Design */
.booking-entry-modal {
    max-width: 580px;
    padding: 0;
    background: 
        linear-gradient(135deg, #f8f3e8 0%, #f5edd8 50%, #f2e8cc 100%);
    border: 1px solid rgba(139, 109, 56, 0.3);
    overflow: hidden;
    position: relative;
}

.booking-entry-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, 
        var(--packers-green) 0%, 
        var(--packers-gold) 50%, 
        var(--packers-green) 100%);
}

/* Corner accents */
.modal-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--packers-gold);
    opacity: 0.6;
}

.modal-corner-tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.modal-corner-tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
}

.modal-corner-bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
}

.modal-corner-br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

.booking-entry-content {
    padding: var(--space-10) var(--space-8);
    position: relative;
    z-index: 1;
}

.booking-entry-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.entry-logo-img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(26, 58, 47, 0.2));
}

.booking-entry-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--packers-green);
    text-align: center;
    margin-bottom: var(--space-2);
    letter-spacing: -0.5px;
}

.booking-entry-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
    text-align: center;
    margin-bottom: var(--space-6);
}

.entry-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8);
    position: relative;
}

.entry-divider::before,
.entry-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 109, 56, 0.4), transparent);
}

.entry-divider-icon {
    padding: 0 var(--space-4);
    color: var(--packers-gold);
    font-size: 0.9rem;
}

.booking-entry-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.entry-choice-btn {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--white) 0%, #faf8f3 100%);
    border: 2px solid rgba(139, 109, 56, 0.2);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.entry-choice-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--packers-green);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.entry-choice-btn:hover {
    border-color: var(--packers-gold);
    box-shadow: 
        0 8px 24px rgba(26, 58, 47, 0.15),
        0 4px 12px rgba(212, 168, 24, 0.1);
    transform: translateY(-2px);
}

.entry-choice-btn:hover::before {
    transform: scaleY(1);
}

.entry-choice-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--packers-green-deep) 0%, var(--packers-green) 100%);
    border-radius: var(--radius-md);
    color: var(--packers-gold);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26, 58, 47, 0.3);
}

.entry-choice-content {
    flex: 1;
    text-align: left;
}

.entry-choice-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--packers-gold-dark);
    font-weight: 600;
    margin-bottom: 2px;
}

.entry-choice-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--packers-green);
    margin-bottom: 4px;
}

.entry-choice-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.entry-choice-arrow {
    color: var(--packers-green);
    font-size: 1.1rem;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.entry-choice-btn:hover .entry-choice-arrow {
    opacity: 1;
    transform: translateX(4px);
}

.booking-entry-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(139, 109, 56, 0.2);
    text-align: center;
}

.booking-entry-footer p {
    font-size: 0.8rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.booking-entry-footer i {
    color: var(--packers-gold);
}

@media (max-width: 640px) {
    .booking-entry-modal {
        max-width: 95%;
        margin: var(--space-4);
    }
    
    .booking-entry-content {
        padding: var(--space-8) var(--space-5);
    }
    
    .booking-entry-title {
        font-size: 1.6rem;
    }
    
    .modal-corner {
        width: 25px;
        height: 25px;
    }
    
    .modal-corner-tl,
    .modal-corner-tr {
        top: 12px;
    }
    
    .modal-corner-bl,
    .modal-corner-br {
        bottom: 12px;
    }
    
    .modal-corner-tl,
    .modal-corner-bl {
        left: 12px;
    }
    
    .modal-corner-tr,
    .modal-corner-br {
        right: 12px;
    }
    
    .entry-choice-btn {
        padding: var(--space-4);
    }
    
    .entry-choice-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .entry-choice-title {
        font-size: 1.1rem;
    }
}

.success-modal {
    max-width: 520px;
}

.success-icon {
    margin-bottom: var(--space-5);
}

.success-icon i {
    font-size: 5rem;
    color: var(--success);
    filter: drop-shadow(0 4px 10px rgba(45, 106, 79, 0.3));
}

.success-details {
    background: var(--gray-100);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    text-align: left;
    border: 1px solid var(--gray-200);
}

/* ============================================
   AVAILABILITY CALENDAR - Premium Design
   ============================================ */
.calendar-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.calendar-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    margin-bottom: var(--space-5);
    color: var(--gray-700);
    font-size: 0.95rem;
}

.calendar-label i {
    color: var(--packers-gold);
    font-size: 1.1rem;
}

.availability-calendar {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.calendar-month {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--packers-green);
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.calendar-nav {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--gray-600);
}

.calendar-nav:hover {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    color: var(--packers-green);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.3);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: var(--space-2);
}

.calendar-weekdays span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    padding: var(--space-2) 0;
    letter-spacing: 1px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    font-size: 1.3rem;
}

.calendar-day:hover:not(.disabled):not(.empty) {
    background: rgba(212, 168, 24, 0.15);
    transform: scale(1.1);
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-day.available {
    background: rgba(45, 106, 79, 0.12);
    color: var(--success);
}

.calendar-day.limited {
    background: rgba(183, 121, 31, 0.12);
    color: var(--warning);
}

.calendar-day.booked {
    background: rgba(155, 44, 44, 0.08);
    color: var(--error);
}

.calendar-day.selected {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%) !important;
    color: var(--packers-green) !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(212, 168, 24, 0.4);
}

.calendar-day.peak {
    border: 2px solid var(--packers-gold);
}

.peak-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--packers-gold);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(212, 168, 24, 0.5);
}

.day-number {
    font-weight: 600;
}

@media (max-width: 768px) {
    .calendar-day {
        font-size: 1.05rem;
    }
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--gray-200);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.825rem;
    color: var(--gray-500);
    font-weight: 500;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
}

.legend-dot.available {
    background: rgba(45, 106, 79, 0.3);
}

.legend-dot.limited {
    background: rgba(183, 121, 31, 0.3);
}

.legend-dot.booked {
    background: rgba(155, 44, 44, 0.2);
}

.legend-dot.peak {
    background: var(--white);
    border: 2px solid var(--packers-gold);
}

.selected-date-display {
    background: var(--gray-100);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-5);
    border: 1px solid var(--gray-200);
}

.peak-warning {
    color: var(--packers-gold);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Available Legends List */
.available-legends-list {
    background: var(--gray-100);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.available-count {
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
    color: var(--gray-700);
}

.available-legends-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.available-legend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.available-legend-chip.available {
    background: rgba(45, 106, 79, 0.12);
    color: var(--success);
}

.available-legend-chip.limited {
    background: rgba(183, 121, 31, 0.12);
    color: var(--warning);
}

.available-legend-chip i:first-child {
    font-size: 0.7rem;
}

.text-muted {
    color: var(--gray-500);
    font-size: 0.9rem;
}

.text-warning {
    color: var(--warning);
    font-size: 0.9rem;
}

/* ============================================
   PRICE ESTIMATE - Premium Calculation
   ============================================ */
.price-estimate {
    background: 
        linear-gradient(135deg, var(--packers-green) 0%, var(--packers-green-rich) 50%, var(--packers-green-deep) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-5);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.price-estimate::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(212, 168, 24, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.estimate-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.estimate-header i {
    color: var(--packers-gold);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(212, 168, 24, 0.3));
}

.estimate-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--packers-gold);
    font-family: 'Playfair Display', serif;
}

.estimate-breakdown {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    backdrop-filter: blur(10px);
}

.estimate-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.estimate-row:last-of-type {
    border-bottom: none;
}

.estimate-row.modifier {
    color: var(--packers-gold);
}

.estimate-total {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-4);
    margin-top: var(--space-3);
    border-top: 2px solid var(--packers-gold);
    font-size: 1.1rem;
    font-weight: 700;
}

.estimate-total span:last-child {
    background: linear-gradient(135deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 1px;
}

.estimate-note {
    margin: var(--space-4) 0 0;
    font-size: 0.75rem;
    opacity: 0.6;
    text-align: center;
}

/* ============================================
   RESPONSIVE DESIGN - Premium Mobile Experience
   ============================================ */
@media (max-width: 1024px) {
    .booking-container {
        grid-template-columns: 1fr;
    }
    
    .booking-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .sidebar-card {
        flex: 1;
        min-width: 220px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .hero-stats {
        padding: var(--space-6);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: 0;
        top: 0;
        flex-direction: column;
        background: linear-gradient(160deg, 
            rgba(7, 24, 18, 0.98) 0%, 
            rgba(13, 42, 33, 0.97) 30%,
            rgba(26, 58, 47, 0.96) 60%,
            rgba(20, 48, 38, 0.97) 100%);
        width: 100%;
        height: 100vh;
        text-align: center;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        padding: var(--space-8) var(--space-6);
        padding-top: var(--space-16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 999;
        overflow-y: auto;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 30% 20%, rgba(212, 168, 24, 0.15) 0%, transparent 40%),
            radial-gradient(circle at 70% 80%, rgba(212, 168, 24, 0.12) 0%, transparent 35%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        animation: menuGlowPulse 10s ease-in-out infinite;
        pointer-events: none;
        overflow: hidden;
    }
    
    @keyframes menuGlowPulse {
        0%, 100% { 
            opacity: 1;
        }
        50% { 
            opacity: 0.75;
        }
    }
    
    .nav-menu::after {
        content: '';
        display: none;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* Mobile Menu Header Styling */
    .mobile-menu-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        padding-bottom: var(--space-8);
        margin-bottom: var(--space-6);
        border-bottom: 2px solid rgba(212, 168, 24, 0.4);
        width: 100%;
        max-width: 300px;
        position: relative;
    }
    
    .mobile-menu-header::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--packers-gold), transparent);
        box-shadow: 0 0 10px rgba(212, 168, 24, 0.5);
    }
    
    .mobile-menu-logo {
        width: 90px;
        height: 90px;
        background: linear-gradient(135deg, 
            rgba(212, 168, 24, 0.25) 0%, 
            rgba(212, 168, 24, 0.15) 50%,
            rgba(212, 168, 24, 0.2) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.4),
            0 0 0 4px rgba(212, 168, 24, 0.5),
            0 0 0 8px rgba(212, 168, 24, 0.2),
            inset 0 2px 12px rgba(255, 255, 255, 0.15);
        /* Animation controlled by JS - runs once on open, then randomly every 30s */
        position: relative;
    }
    
    .mobile-menu-logo::before {
        content: '';
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        background: conic-gradient(from 0deg, 
            transparent, 
            rgba(212, 168, 24, 0.3), 
            transparent 120deg);
        /* Animation controlled by JS */
        opacity: 0.6;
    }
    
    @keyframes logoGlow {
        0%, 100% { 
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.4),
                0 0 0 4px rgba(212, 168, 24, 0.5),
                0 0 0 8px rgba(212, 168, 24, 0.2),
                inset 0 2px 12px rgba(255, 255, 255, 0.15);
        }
        50% { 
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.4),
                0 0 0 5px rgba(212, 168, 24, 0.7),
                0 0 0 10px rgba(212, 168, 24, 0.3),
                0 0 30px rgba(212, 168, 24, 0.4),
                inset 0 2px 12px rgba(255, 255, 255, 0.15);
        }
    }
    
    @keyframes logoRotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* JS-triggered animation classes */
    .mobile-menu-logo.animate-glow {
        animation: logoGlow 1.5s ease-in-out 1;
    }
    
    .mobile-menu-logo.animate-glow::before {
        animation: logoRotate 1.5s linear 1;
    }
    
    .mobile-menu-logo-img {
        width: 55px;
        height: 55px;
        object-fit: contain;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
        position: relative;
        z-index: 1;
    }
    
    .mobile-menu-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }
    
    .mobile-menu-name {
        font-family: 'Bebas Neue', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    
    .mobile-menu-main {
        font-size: 2.2rem;
        color: var(--packers-gold);
        letter-spacing: 3px;
        text-transform: uppercase;
        text-shadow: 
            0 2px 10px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(212, 168, 24, 0.3);
    }
    
    .mobile-menu-sub {
        font-size: 1.4rem;
        color: white;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-shadow: 
            0 2px 10px rgba(0, 0, 0, 0.5),
            0 0 15px rgba(255, 255, 255, 0.2);
    }
    
    .mobile-menu-tagline {
        font-family: 'Playfair Display', serif;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
        font-style: italic;
        letter-spacing: 0.8px;
        text-align: center;
        line-height: 1.5;
        max-width: 260px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    
    
    .nav-menu li {
        opacity: 0;
        transform: translateX(-50px) rotateY(-20deg);
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .nav-menu.active li {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
    
    .nav-menu.active li:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu.active li:nth-child(2) { transition-delay: 0.2s; }
    .nav-menu.active li:nth-child(3) { transition-delay: 0.3s; }
    .nav-menu.active li:nth-child(4) { transition-delay: 0.4s; }
    .nav-menu.active li:nth-child(5) { transition-delay: 0.5s; }
    .nav-menu.active li:nth-child(6) { transition-delay: 0.6s; }
    
    .nav-menu .nav-link {
        font-size: 1.4rem;
        font-weight: 600;
        letter-spacing: 3px;
        padding: var(--space-5) var(--space-10);
        display: block;
        position: relative;
        color: var(--white);
        text-transform: uppercase;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: var(--radius-md);
        background: linear-gradient(90deg, transparent, rgba(212, 168, 24, 0.05), transparent);
        background-size: 200% 100%;
        background-position: 100% 0;
    }
    
    .nav-menu .nav-link::before {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 50%;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent,
            var(--packers-gold), 
            var(--packers-gold-bright),
            var(--packers-gold),
            transparent);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(-50%);
        border-radius: var(--radius-full);
        box-shadow: 0 0 10px rgba(212, 168, 24, 0.6);
    }
    
    .nav-menu .nav-link:hover::before {
        width: 70%;
    }
    
    .nav-menu .nav-link:hover {
        color: var(--packers-gold);
        transform: scale(1.08) translateY(-2px);
        text-shadow: 
            0 0 20px rgba(212, 168, 24, 0.6),
            0 2px 10px rgba(0, 0, 0, 0.5);
        background-position: 0 0;
    }
    
    .nav-menu .nav-link-cta {
        margin-top: var(--space-8);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 3px;
        padding: var(--space-5) var(--space-12);
        background: linear-gradient(135deg, 
            var(--packers-gold) 0%, 
            var(--packers-gold-bright) 50%,
            var(--packers-gold) 100%);
        background-size: 200% 100%;
        color: var(--packers-green-deep);
        border-radius: var(--radius-full);
        box-shadow: 
            0 10px 35px rgba(212, 168, 24, 0.5),
            0 0 0 3px rgba(212, 168, 24, 0.3),
            inset 0 2px 8px rgba(255, 255, 255, 0.3);
        /* Animation controlled by JS - runs once on load, then randomly every 30s */
        position: relative;
        overflow: hidden;
    }
    
    .nav-menu .nav-link-cta::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .nav-menu .nav-link-cta::before {
        display: none;
    }
    
    .nav-menu .nav-link-cta:hover {
        color: var(--packers-green-deep);
        transform: scale(1.12) translateY(-3px);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        background-position: 100% 0;
        box-shadow: 
            0 15px 45px rgba(212, 168, 24, 0.7),
            0 0 0 4px rgba(212, 168, 24, 0.4),
            inset 0 2px 8px rgba(255, 255, 255, 0.4);
    }
    
    .nav-menu .nav-link-cta:hover::after {
        width: 300px;
        height: 300px;
    }
    
    @keyframes pulseGold {
        0%, 100% { 
            box-shadow: 
                0 10px 35px rgba(212, 168, 24, 0.5),
                0 0 0 3px rgba(212, 168, 24, 0.3),
                inset 0 2px 8px rgba(255, 255, 255, 0.3);
        }
        50% { 
            box-shadow: 
                0 15px 45px rgba(212, 168, 24, 0.7),
                0 0 0 4px rgba(212, 168, 24, 0.5),
                0 0 25px rgba(212, 168, 24, 0.4),
                inset 0 2px 8px rgba(255, 255, 255, 0.3);
        }
    }
    
    /* JS-triggered animation class for Book Now button */
    .nav-menu .nav-link-cta.animate-pulse {
        animation: pulseGold 1s ease-in-out 1;
    }

    .nav-toggle {
        display: flex;
        z-index: 1001;
        position: relative;
    }
    
    .nav-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-6px, 6px);
    }
    
    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    
    .nav-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-6px, -6px);
    }
    
    .bar {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-link-cta {
        margin-top: var(--space-4);
    }

    .hero {
        padding: 140px 0 100px;
        background: linear-gradient(135deg, 
            rgba(7, 24, 18, 0.97) 0%, 
            rgba(13, 42, 33, 0.95) 50%,
            rgba(26, 58, 47, 0.93) 100%) !important;
    }

    .hero-content {
        padding: 0 var(--space-5);
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-title {
        padding-top: 85px;
    }

    .hero-title::before {
        top: calc(50% + 50px);
    }

    .hero-title .title-lead {
        font-size: clamp(0.85rem, 2.5vw, 1.1rem);
        letter-spacing: 0.25em;
    }
    
    .hero-title .highlight {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
    
    .hero-title .title-sub {
        font-size: clamp(1rem, 3.5vw, 1.4rem);
    }

    /* Mobile: hide both description parts by default, JS will show one randomly */
    .hero-desc-part1,
    .hero-desc-part2 {
        display: none;
    }
    
    .hero-stats {
        gap: var(--space-6);
        padding: var(--space-5);
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-divider {
        display: none;
    }
    
    /* Legend Names - Mobile */
    .stat-item-featured {
        gap: var(--space-2);
        padding: 0;
    }
    
    .stat-item-featured .stat-number {
        font-size: 1.75rem;
    }
    
    .stat-item-featured .stat-label {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }
    
    .hero-stats {
        padding: var(--space-4) var(--space-6);
    }

    .section-title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
    }
    
    .section-title::after {
        width: 60px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .legends-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .package-card.featured,
    .package-card.tier-better {
        transform: scale(1);
    }
    
    .package-card.featured:hover,
    .package-card.tier-better:hover {
        transform: translateY(-8px);
    }
    
    .package-card.tier-better {
        border-width: 2px;
    }
    
    /* Package Card Mobile Condensed Styling - 30% reduction */
    .package-header {
        padding: var(--space-6) var(--space-5) var(--space-4);
    }
    
    .package-tier-label {
        padding: 7px 14px;
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }
    
    .package-tier-image {
        width: 120px;
        height: 120px;
        /* Enhanced shadows for mobile viewing */
        filter: 
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
            drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16))
            drop-shadow(0 6px 6px rgba(0, 0, 0, 0.12))
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1))
            drop-shadow(0 16px 16px rgba(0, 0, 0, 0.08));
    }
    
    .package-card:hover .package-tier-image {
        filter: 
            drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18))
            drop-shadow(0 6px 6px rgba(0, 0, 0, 0.14))
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.12))
            drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
            drop-shadow(0 24px 24px rgba(0, 0, 0, 0.08))
            drop-shadow(0 0 25px rgba(212, 168, 24, 0.3));
    }
    
    .package-icon {
        margin: -8px auto 0;
        padding: 0 0 10px 0;
    }
    
    .package-header h3 {
        font-size: 1.3rem;
        margin-bottom: var(--space-1);
    }
    
    .package-duration {
        font-size: 0.75rem;
        margin-bottom: var(--space-3);
    }
    
    .price-amount {
        font-size: 2.4rem;
    }
    
    .package-content {
        padding: var(--space-5);
    }
    
    .package-includes {
        font-size: 0.7rem;
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-1);
    }
    
    .package-features {
        margin-bottom: var(--space-4);
    }
    
    .package-features li {
        padding: 7px 0;
        gap: 10px;
        font-size: 0.9rem;
    }
    
    .package-features li i {
        font-size: 0.85rem;
    }
    
    .btn-package {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    
    .packages-grid {
        gap: var(--space-5);
    }
    
    .memorabilia-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .memorabilia-image {
        display: none;
    }
    
    .memo-showcase {
        width: 250px;
        height: 250px;
    }
    
    .memo-showcase i {
        font-size: 3.5rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .legends-filter {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        padding: var(--space-5);
        gap: var(--space-3);
        margin-bottom: var(--space-8);
    }
    
    .filter-group {
        gap: 6px;
        flex: 1;
        min-width: calc(50% - var(--space-3) / 2);
    }
    
    .filter-group label {
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }
    
    .filter-group label::before {
        width: 12px;
    }
    
    .filter-group select {
        min-width: 100%;
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .legends-filter .btn-outline {
        width: 100%;
        padding: 10px;
        font-size: 0.85rem;
        margin-top: var(--space-2);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-8);
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-contact p {
        justify-content: center;
    }
    
    .why-us-grid {
        gap: var(--space-6);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    .hero-title .title-lead {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
    }
    
    .hero-title .highlight {
        font-size: clamp(2rem, 14vw, 3rem);
    }
    
    .hero-title .title-sub {
        font-size: 0.9rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 8px 16px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }

    .section-title {
        font-size: 1.6rem;
    }
    
    /* Further Package Condensing for Small Mobile */
    .package-header {
        padding: var(--space-5) var(--space-4) var(--space-3);
    }
    
    .package-tier-label {
        padding: 6px 12px;
        font-size: 0.55rem;
    }
    
    .package-tier-image {
        width: 100px;
        height: 100px;
    }
    
    .package-header h3 {
        font-size: 1.15rem;
    }
    
    .package-duration {
        font-size: 0.7rem;
        margin-bottom: var(--space-2);
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .package-content {
        padding: var(--space-4);
    }
    
    .package-features li {
        padding: 6px 0;
        font-size: 0.85rem;
    }
    
    .btn-package {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .packages-grid {
        gap: var(--space-4);
    }
    
    /* Section Spacing Refinements */
    section {
        padding: var(--space-10) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-6);
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }

    .btn {
        padding: 14px 24px;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 16px 28px;
    }
    
    .booking-form-wrapper {
        padding: var(--space-6);
    }
    
    .memorabilia-items-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .memo-item {
        flex-direction: column;
        text-align: center;
        padding: var(--space-3);
        gap: var(--space-2);
    }
    
    .memo-item i {
        font-size: 1.1rem;
    }
    
    .memo-item span {
        font-size: 0.8rem;
    }
    
    .legend-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .progress-line {
        width: 40px;
    }
    
    .package-header {
        padding: var(--space-8) var(--space-6) var(--space-5);
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
}

/* ============================================
   PREMIUM ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

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

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* ============================================
   PREMIUM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--packers-green-deep);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--packers-gold) 0%, var(--packers-gold-bright) 100%);
    border-radius: 5px;
    border: 2px solid var(--packers-green-deep);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--packers-gold-bright);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--packers-gold) var(--packers-green-deep);
}

/* ============================================
   SELECTION & FOCUS STATES
   ============================================ */
::selection {
    background: var(--packers-gold);
    color: var(--packers-green);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--packers-gold);
    outline-offset: 3px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1rem; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .header,
    .hero-scroll,
    .btn,
    .nav-toggle,
    .footer-social {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .hero {
        min-height: auto;
        padding: 2rem 0;
    }
}

/* ============================================
   DARK MODE
   ============================================ */
body.dark-mode {
    --dm-bg-primary: #0a0f0d;
    --dm-bg-secondary: #121a16;
    --dm-bg-tertiary: #1a251f;
    --dm-bg-card: #151d18;
    --dm-bg-input: #1a251f;
    --dm-text-primary: #e8e8e8;
    --dm-text-secondary: #b0b8b4;
    --dm-text-muted: #7a857f;
    --dm-border: #2a3a32;
    --dm-border-light: #3a4a42;
    --dm-gold: #e8b82a;
    --dm-gold-dim: rgba(232, 184, 42, 0.15);
    --dm-green: #2d5a47;
    --dm-green-light: #3a7a5f;
    
    background: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

body.dark-mode::before {
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(232, 184, 42, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(45, 90, 71, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 80%, rgba(232, 184, 42, 0.03) 0%, transparent 50%);
}

/* Dark Mode - Logo click indicator */
body.dark-mode .logo-icon {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

body.dark-mode .logo-icon:hover {
    transform: scale(1.05);
}

/* Dark Mode - Header */
body.dark-mode .header {
    background: linear-gradient(180deg, 
        rgba(10, 15, 13, 0.98) 0%, 
        rgba(18, 26, 22, 0.95) 100%);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .header::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(232, 184, 42, 0.4) 50%, 
        transparent 100%);
}

body.dark-mode .header-mobile-tagline {
    color: var(--dm-gold);
}

/* Dark Mode - Navigation */
body.dark-mode .nav-link {
    color: var(--dm-text-secondary);
}

body.dark-mode .nav-link:hover {
    color: var(--dm-gold);
}

body.dark-mode .nav-link-cta {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a020 100%);
    color: var(--dm-bg-primary);
}

body.dark-mode .nav-menu {
    background: linear-gradient(160deg, 
        rgba(10, 15, 13, 0.98) 0%, 
        rgba(15, 25, 20, 0.97) 30%,
        rgba(20, 35, 28, 0.96) 60%,
        rgba(18, 30, 24, 0.97) 100%);
}

body.dark-mode .nav-menu::before {
    background: 
        radial-gradient(circle at 30% 20%, rgba(232, 184, 42, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(232, 184, 42, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

body.dark-mode .bar {
    background: var(--dm-text-primary);
}

/* Dark Mode - Mobile Menu */
body.dark-mode .mobile-menu-header {
    border-bottom-color: rgba(232, 184, 42, 0.3);
}

body.dark-mode .mobile-menu-header::after {
    background: linear-gradient(90deg, transparent, var(--dm-gold), transparent);
    box-shadow: 0 0 10px rgba(232, 184, 42, 0.4);
}

body.dark-mode .mobile-menu-logo {
    background: linear-gradient(135deg, 
        rgba(232, 184, 42, 0.2) 0%, 
        rgba(232, 184, 42, 0.12) 50%,
        rgba(232, 184, 42, 0.18) 100%);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(232, 184, 42, 0.4),
        0 0 0 8px rgba(232, 184, 42, 0.15),
        inset 0 2px 12px rgba(255, 255, 255, 0.1);
}

body.dark-mode .mobile-menu-main {
    color: var(--dm-gold);
}

body.dark-mode .mobile-menu-sub {
    color: var(--dm-text-primary);
}

body.dark-mode .mobile-menu-tagline {
    color: var(--dm-text-secondary);
}

body.dark-mode .nav-menu .nav-link {
    color: var(--dm-text-primary);
    background: linear-gradient(90deg, transparent, rgba(232, 184, 42, 0.04), transparent);
}

body.dark-mode .nav-menu .nav-link:hover {
    color: var(--dm-gold);
}

body.dark-mode .nav-menu .nav-link-cta {
    background: linear-gradient(135deg, 
        var(--dm-gold) 0%, 
        #c9a020 50%,
        var(--dm-gold) 100%);
    color: var(--dm-bg-primary);
}

/* Dark Mode - Hero Section */
body.dark-mode .hero {
    background: linear-gradient(135deg, 
        rgba(10, 15, 13, 0.98) 0%, 
        rgba(18, 26, 22, 0.96) 50%,
        rgba(26, 37, 31, 0.94) 100%),
        url('/back3.jpg') no-repeat center center;
}

body.dark-mode .hero-description {
    color: var(--dm-text-secondary);
}

body.dark-mode .hero-badge {
    background: var(--dm-gold-dim);
    border-color: rgba(232, 184, 42, 0.3);
}

body.dark-mode .trust-text {
    color: var(--dm-text-muted);
}

body.dark-mode .trust-name {
    color: var(--dm-text-muted);
}

body.dark-mode .trust-item:hover .trust-name {
    color: var(--dm-gold);
}

/* Dark Mode - Stat Box */
body.dark-mode .stat-item-featured {
    background: transparent;
    border: none;
}

body.dark-mode .stat-item-featured .stat-number {
    background: linear-gradient(180deg, 
        #d4a818 0%, 
        #c9a020 40%,
        #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 25px rgba(212, 168, 24, 0.6));
}

/* Dark Mode - How It Works Section */
body.dark-mode .hiw-section {
    background: linear-gradient(180deg, #151f1a 0%, #131b17 50%, #151f1a 100%);
}

body.dark-mode .hiw-bg-pattern {
    background: 
        radial-gradient(circle at 10% 20%, rgba(232, 184, 42, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(26, 58, 47, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(232, 184, 42, 0.02) 0%, transparent 50%);
}

body.dark-mode .hiw-label {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 0 4px 15px rgba(232, 184, 42, 0.25);
}

body.dark-mode .hiw-title {
    color: var(--dm-text-primary);
}

body.dark-mode .hiw-timeline-track {
    background: var(--dm-border);
}

body.dark-mode .hiw-track-progress {
    background: linear-gradient(180deg, 
        var(--dm-green) 0%, 
        var(--dm-gold) 50%, 
        #c9a520 100%);
}

body.dark-mode .hiw-marker-num {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-rich) 100%);
    color: var(--dm-gold);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 0 4px var(--dm-bg),
        0 0 0 6px rgba(232, 184, 42, 0.1);
}

body.dark-mode .hiw-card:hover .hiw-marker-num {
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 0 0 4px var(--dm-bg),
        0 0 0 8px rgba(232, 184, 42, 0.2);
}

body.dark-mode .hiw-card-body {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hiw-card:hover .hiw-card-body {
    border-color: rgba(232, 184, 42, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .hiw-card-icon {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.12) 0%, rgba(232, 184, 42, 0.06) 100%);
}

body.dark-mode .hiw-card:hover .hiw-card-icon {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-rich) 100%);
}

body.dark-mode .hiw-card-icon i {
    color: var(--dm-gold);
}

body.dark-mode .hiw-card-text h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .hiw-card-text p {
    color: var(--dm-text-secondary);
}

body.dark-mode .hiw-marker-final i {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 
        0 6px 25px rgba(232, 184, 42, 0.35),
        0 0 0 4px var(--dm-bg),
        0 0 0 6px rgba(232, 184, 42, 0.15);
}

body.dark-mode .hiw-body-final {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.1) 0%, rgba(26, 58, 47, 0.08) 100%);
    border-color: rgba(232, 184, 42, 0.25);
}

body.dark-mode .hiw-card-final:hover .hiw-body-final {
    border-color: var(--dm-gold);
    box-shadow: 0 15px 50px rgba(232, 184, 42, 0.1);
}

body.dark-mode .hiw-icon-final {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
}

body.dark-mode .hiw-icon-final i {
    color: var(--dm-green-deep);
}

body.dark-mode .hiw-final-features {
    border-top-color: rgba(232, 184, 42, 0.2);
}

body.dark-mode .hiw-final-features span {
    background: var(--dm-bg);
    color: var(--dm-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hiw-final-features i {
    color: var(--dm-gold);
}

body.dark-mode .hiw-btn {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-rich) 100%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .hiw-btn:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .hiw-btn-icon {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
}

/* Dark Mode - Legends Section Background */
body.dark-mode .legends {
    background: linear-gradient(180deg, #151f1a 0%, #131b17 100%);
}

/* Dark Mode - Packages Section Background */
body.dark-mode .packages {
    background: linear-gradient(180deg, #151f1a 0%, #131b17 100%);
}

/* Dark Mode - Section Headers */
body.dark-mode .section-title {
    color: #d4d4d4;
}

body.dark-mode .section-subtitle {
    color: var(--dm-text-secondary);
}

body.dark-mode .section-tag {
    background: var(--dm-gold-dim);
    color: var(--dm-gold);
    border-color: rgba(232, 184, 42, 0.25);
}

/* Dark Mode - Premium Section Navigation Buttons */
body.dark-mode .section-nav-btn {
    background: linear-gradient(135deg, 
        rgba(30, 35, 40, 0.95) 0%, 
        rgba(25, 30, 35, 0.98) 50%,
        rgba(30, 35, 40, 0.95) 100%);
    color: var(--dm-text-secondary);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

body.dark-mode .section-nav-btn::before {
    background: linear-gradient(135deg, 
        rgba(232, 184, 42, 0.4) 0%,
        rgba(232, 184, 42, 0.15) 25%,
        rgba(45, 55, 50, 0.3) 50%,
        rgba(232, 184, 42, 0.15) 75%,
        rgba(232, 184, 42, 0.4) 100%);
}

body.dark-mode .section-nav-btn::after {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(232, 184, 42, 0.2) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(232, 184, 42, 0.2) 75%,
        transparent 100%);
}

body.dark-mode .section-nav-btn:hover {
    background: linear-gradient(135deg, 
        var(--dm-green) 0%, 
        var(--dm-green-dark) 50%,
        var(--dm-green) 100%);
    color: var(--dm-gold);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 15px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(232, 184, 42, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 15px rgba(232, 184, 42, 0.4);
}

body.dark-mode .section-nav-btn:hover::before {
    background: linear-gradient(135deg, 
        var(--dm-gold) 0%,
        var(--dm-gold-bright) 25%,
        var(--dm-gold) 50%,
        var(--dm-gold-bright) 75%,
        var(--dm-gold) 100%);
}

body.dark-mode .section-nav-btn.active {
    background: linear-gradient(135deg, 
        var(--dm-green) 0%, 
        var(--dm-green-dark) 40%,
        rgba(20, 40, 35, 1) 100%);
    color: var(--dm-gold);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 12px 35px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(232, 184, 42, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 10px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 25px rgba(232, 184, 42, 0.6);
}

body.dark-mode .section-nav-btn.active::before {
    background: linear-gradient(135deg, 
        var(--dm-gold) 0%,
        var(--dm-gold-bright) 50%,
        var(--dm-gold) 100%);
}

/* Dark Mode - Legend Cards */
body.dark-mode .legend-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .legend-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 184, 42, 0.1);
}

body.dark-mode .legend-name {
    color: var(--dm-text-primary);
}

body.dark-mode .legend-position {
    color: var(--dm-text-secondary);
}

body.dark-mode .legend-era {
    color: var(--dm-text-muted);
}

body.dark-mode .legend-description {
    color: var(--dm-text-secondary);
}

body.dark-mode .achievement-tag {
    background: var(--dm-gold-dim);
    color: var(--dm-gold);
}

body.dark-mode .legend-badge {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
}

/* Dark Mode - Mobile Legend Items */
body.dark-mode .mobile-legends-accordion {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

body.dark-mode .mobile-legend-item {
    background: var(--dm-bg-card);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .mobile-legend-name {
    color: var(--dm-text-primary);
}

body.dark-mode .mobile-legend-position {
    color: var(--dm-text-secondary);
}

body.dark-mode .mobile-legend-details {
    background: linear-gradient(180deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-card) 100%);
    border-top-color: var(--dm-border);
}

body.dark-mode .mobile-legend-description {
    color: var(--dm-text-secondary);
}

body.dark-mode .mobile-legend-era {
    color: var(--dm-text-muted);
}

body.dark-mode .mobile-legend-toggle {
    color: var(--dm-text-muted);
}

/* Dark Mode - Mobile Legends Pagination */
body.dark-mode .mobile-legends-page-indicator .page-dot {
    background: var(--dm-border);
}

body.dark-mode .mobile-legends-page-indicator .page-dot.active {
    background: var(--dm-green);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

body.dark-mode .mobile-legends-page-indicator .page-dot.completed {
    background: var(--dm-gold);
}

body.dark-mode .mobile-legends-nav-btn {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .mobile-legends-prev-btn {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #d4a818 100%);
    color: var(--dm-bg-primary);
}

body.dark-mode .mobile-legends-prev-btn .btn-count {
    background: var(--dm-bg-primary);
    color: var(--dm-gold);
}

/* Dark Mode - Legends Filter */
body.dark-mode .legends-filter {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: var(--shadow-md);
}

body.dark-mode .filter-select,
body.dark-mode .filter-input {
    background: var(--dm-bg-input);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .filter-select:focus,
body.dark-mode .filter-input:focus {
    border-color: var(--dm-gold);
}

body.dark-mode .filter-label {
    color: #8fb89f;
}

body.dark-mode .filter-group label {
    color: #8fb89f;
}

/* Dark Mode - Package Cards */
body.dark-mode .package-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .package-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .package-card.featured,
body.dark-mode .package-card.tier-better {
    border-color: var(--dm-gold);
    box-shadow: 0 4px 30px rgba(232, 184, 42, 0.2);
}

/* Dark Mode - Tier Good (Green Bay Hello) - Add gradient background */
body.dark-mode .package-card.tier-good .package-header {
    background: linear-gradient(180deg, rgba(74, 124, 106, 0.25) 0%, var(--dm-bg-card) 100%);
}

/* Dark Mode - Tier Better (Green & Gold Experience) - Add gradient background */
body.dark-mode .package-card.tier-better .package-header {
    background: linear-gradient(180deg, rgba(232, 184, 42, 0.25) 0%, var(--dm-bg-card) 100%);
}

/* Dark Mode - Tier Best (Legendary Locker Room) - Add gradient background */
body.dark-mode .package-card.tier-best .package-header {
    background: linear-gradient(180deg, rgba(74, 124, 106, 0.25) 0%, var(--dm-bg-card) 100%);
}

/* Dark Mode - Medallion Tier Images */
body.dark-mode .package-tier-image {
    filter: 
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
        drop-shadow(0 0 8px rgba(232, 184, 42, 0.15));
}

body.dark-mode .package-card:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.08))
        drop-shadow(0 0 30px rgba(232, 184, 42, 0.35));
}

body.dark-mode .package-card.tier-good:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.08))
        drop-shadow(0 0 25px rgba(139, 184, 159, 0.4));
}

body.dark-mode .package-card.tier-better:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.08))
        drop-shadow(0 0 35px rgba(232, 184, 42, 0.5));
}

body.dark-mode .package-card.tier-best:hover .package-tier-image {
    filter: 
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14))
        drop-shadow(0 16px 16px rgba(0, 0, 0, 0.1))
        drop-shadow(0 24px 24px rgba(0, 0, 0, 0.08))
        drop-shadow(0 0 25px rgba(139, 184, 159, 0.35))
        drop-shadow(0 0 40px rgba(232, 184, 42, 0.3));
}

body.dark-mode .package-header h3 {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark-mode .package-duration {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .package-price .price-from {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .package-price .price-amount {
    color: #f5f5f5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    -webkit-text-fill-color: #f5f5f5;
}

body.dark-mode .package-content {
    background: var(--dm-bg-card);
}

/* Dark Mode - Specific Feature Highlights */
body.dark-mode .package-features li strong {
    color: #8fb89f;
    font-weight: 700;
}

body.dark-mode .package-includes {
    color: var(--dm-text-secondary);
}

body.dark-mode .package-features li {
    color: var(--dm-text-secondary);
}

body.dark-mode .package-features li i {
    color: var(--dm-gold);
}

/* Dark Mode - Other Legend Experiences */
body.dark-mode .other-legend-experiences {
    background: var(--dm-bg-secondary);
}

body.dark-mode .ole-grid-item {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
}

body.dark-mode .ole-grid-item strong {
    color: var(--dm-text-primary);
}

body.dark-mode .ole-grid-item span {
    color: var(--dm-text-secondary);
}

body.dark-mode .ole-cta {
    color: var(--dm-text-muted);
}

/* Dark Mode - Memorabilia / Pro Shop */
body.dark-mode .memorabilia {
    background: linear-gradient(135deg, 
        var(--dm-bg-primary) 0%, 
        var(--dm-bg-secondary) 100%);
}

body.dark-mode .memorabilia-description {
    color: var(--dm-text-secondary);
}

body.dark-mode .memo-item {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

/* Dark Mode - Pro Shop Section */
body.dark-mode .proshop-section {
    background: linear-gradient(180deg, #0d1410 0%, #111916 50%, #0d1410 100%);
}

body.dark-mode .proshop-bg-pattern {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(232, 184, 42, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(35, 75, 55, 0.06) 0%, transparent 40%),
        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='%23e8b82a' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

body.dark-mode .proshop-logo-badge {
    background: linear-gradient(145deg, #1a2e25 0%, #152420 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(232, 184, 42, 0.25);
}

body.dark-mode .proshop-tagline {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.2) 0%, rgba(232, 184, 42, 0.1) 100%);
    color: var(--dm-gold);
}

body.dark-mode .proshop-title {
    color: var(--dm-text-primary);
}

body.dark-mode .proshop-subtitle {
    color: var(--dm-text-secondary);
}

body.dark-mode .proshop-feature-pill {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.dark-mode .proshop-feature-pill i {
    color: var(--dm-gold);
}

body.dark-mode .proshop-categories {
    background: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .proshop-categories-title {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .proshop-categories-title i {
    color: var(--dm-gold);
}

body.dark-mode .proshop-card {
    background: linear-gradient(145deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-secondary) 100%);
    border-color: var(--dm-border);
}

body.dark-mode .proshop-card:hover {
    background: linear-gradient(145deg, #1e2f28 0%, #1a2822 100%);
    border-color: var(--dm-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .proshop-card-icon {
    background: linear-gradient(145deg, var(--dm-green) 0%, #1a3a2a 100%);
}

body.dark-mode .proshop-card-icon i {
    color: var(--dm-gold);
}

body.dark-mode .proshop-card-content h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .proshop-card-content p {
    color: var(--dm-text-muted);
}

body.dark-mode .proshop-card-action {
    background: rgba(232, 184, 42, 0.15);
}

body.dark-mode .proshop-card-action i {
    color: var(--dm-gold);
}

body.dark-mode .proshop-card:hover .proshop-card-action {
    background: var(--dm-gold);
}

body.dark-mode .proshop-card:hover .proshop-card-action i {
    color: var(--dm-bg-primary);
}

body.dark-mode .proshop-coming-soon {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.05) 0%, rgba(35, 75, 55, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .coming-soon-label {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-bg-primary);
}

body.dark-mode .coming-soon-items span {
    color: var(--dm-text-muted);
}

body.dark-mode .coming-soon-items i {
    color: rgba(232, 184, 42, 0.5);
}

body.dark-mode .proshop-promo-banner {
    background: linear-gradient(135deg, #1a2e25 0%, #152420 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .promo-icon {
    background: rgba(232, 184, 42, 0.15);
}

body.dark-mode .promo-icon i {
    color: var(--dm-gold);
}

body.dark-mode .promo-text strong {
    color: var(--dm-gold);
}

body.dark-mode .promo-text span {
    color: var(--dm-text-secondary);
}

/* Dark Mode - Booking Section */
body.dark-mode .booking-section {
    background: var(--dm-bg-primary);
}

/* Dark Mode - Sidebar Cards (Quick Response, Secure Booking, Need Help) */
body.dark-mode .sidebar-card {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .sidebar-card h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .sidebar-card h4 i {
    color: var(--dm-gold);
}

body.dark-mode .sidebar-card p {
    color: var(--dm-text-secondary);
}

/* Dark Mode - Sidebar Card Promo */
body.dark-mode .sidebar-card-promo {
    background: linear-gradient(135deg, #1a2e25 0%, #152420 100%);
    border-color: var(--dm-gold);
}

body.dark-mode .sidebar-card-promo:hover {
    border-color: var(--dm-gold);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 4px 10px rgba(232, 184, 42, 0.2);
}

body.dark-mode .sidebar-card-badge {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
}

body.dark-mode .sidebar-logo-img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) brightness(1.05);
}

body.dark-mode .sidebar-card-promo h4 {
    color: var(--white);
}

body.dark-mode .sidebar-card-promo p {
    color: var(--dm-text-secondary);
}

body.dark-mode .sidebar-card-promo p strong {
    color: var(--dm-gold);
}

body.dark-mode .sidebar-cta-link {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .sidebar-cta-link:hover {
    background: linear-gradient(135deg, #1a3a2f 0%, #0f2419 100%);
    color: var(--dm-gold);
}

body.dark-mode .booking-form-wrapper {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .booking-form-wrapper::before {
    background: linear-gradient(90deg, var(--dm-green), var(--dm-gold), var(--dm-green));
}

/* Dark Mode - Trust Badges */
body.dark-mode .trust-badges {
    border-top-color: var(--dm-border);
}

body.dark-mode .trust-badge {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.08) 0%, rgba(232, 184, 42, 0.03) 100%);
    border-color: var(--dm-border);
}

body.dark-mode .trust-badge:hover {
    border-color: var(--dm-gold);
    box-shadow: 0 4px 15px rgba(232, 184, 42, 0.15);
}

body.dark-mode .trust-badge-icon {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
}

body.dark-mode .trust-badge-icon i {
    color: var(--dm-green-deep);
}

body.dark-mode .trust-badge-title {
    color: var(--dm-text-primary);
}

body.dark-mode .trust-badge-desc {
    color: var(--dm-text-muted);
}

/* Dark Mode - Payment Methods */
body.dark-mode .payment-methods {
    border-top-color: var(--dm-border);
}

body.dark-mode .payment-label {
    color: var(--dm-text-muted);
}

body.dark-mode .payment-icons i {
    color: var(--dm-text-muted);
}

body.dark-mode .payment-icons i:hover {
    color: var(--dm-gold);
}

body.dark-mode .step-title {
    color: var(--dm-text-primary);
}

body.dark-mode .step-number {
    background: var(--dm-green);
    color: var(--dm-text-primary);
}

body.dark-mode .form-label {
    color: var(--white);
}

body.dark-mode .form-group label {
    color: var(--white);
}

body.dark-mode .calendar-label {
    color: var(--white);
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
    background: var(--dm-bg-input);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-textarea:focus {
    border-color: var(--dm-gold);
    box-shadow: 0 0 0 3px rgba(232, 184, 42, 0.15);
}

body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
    color: var(--dm-text-muted);
}

/* Dark Mode - Selection Step Buttons */
body.dark-mode .selection-step-btn {
    background: linear-gradient(135deg, #1a2e25 0%, #152420 50%, #1a2e25 100%);
    border-color: rgba(232, 184, 42, 0.3);
}

body.dark-mode .selection-step-btn:hover {
    border-color: var(--dm-gold);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(232, 184, 42, 0.15);
}

body.dark-mode .selection-step-btn::before {
    background: linear-gradient(90deg, var(--dm-gold), var(--dm-green-rich), var(--dm-gold));
}

body.dark-mode .step-btn-number {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 0 4px 12px rgba(232, 184, 42, 0.3);
}

body.dark-mode .step-btn-label {
    color: var(--dm-gold);
}

body.dark-mode .step-btn-title {
    color: var(--white);
}

body.dark-mode .step-btn-arrow {
    color: var(--dm-gold);
}

body.dark-mode .selection-step-btn:hover .step-btn-arrow {
    color: var(--dm-gold);
}

body.dark-mode .ticket-number-badge {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
}

body.dark-mode .ticket-checkmark-overlay {
    color: var(--dm-green);
}

body.dark-mode .ticket-checkmark-overlay i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

body.dark-mode .ticket-arrow {
    color: var(--dm-gold);
    opacity: 0.7;
}

body.dark-mode .ticket-change-btn {
    background: rgba(232, 184, 42, 0.1);
    border-color: rgba(232, 184, 42, 0.3);
    color: var(--dm-gold);
}

body.dark-mode .ticket-change-btn:hover {
    background: var(--dm-gold);
    color: var(--dm-green-deep);
    border-color: var(--dm-gold);
}

/* Dark Mode - Selected Legend Ticket */
body.dark-mode .legend-ticket {
    background: 
        linear-gradient(135deg, #2a3d35 0%, #1f2e28 50%, #253830 100%);
    border-color: rgba(232, 184, 42, 0.3);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .legend-ticket::before {
    background: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0' fill='%23e8b82a' fill-opacity='0.03'/%3E%3C/svg%3E");
}

body.dark-mode .ticket-left {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.1) 0%, rgba(232, 184, 42, 0.05) 100%);
}

body.dark-mode .ticket-label {
    color: var(--dm-gold);
}

body.dark-mode .ticket-stub {
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 6px,
        rgba(232, 184, 42, 0.3) 6px,
        rgba(232, 184, 42, 0.3) 12px
    );
}

body.dark-mode .ticket-stub::before,
body.dark-mode .ticket-stub::after {
    background: var(--dm-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .ticket-number {
    color: var(--dm-gold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .ticket-name {
    color: var(--dm-text);
}

body.dark-mode .ticket-position {
    color: var(--dm-gold);
}

body.dark-mode .ticket-divider {
    color: var(--dm-text-muted);
}

body.dark-mode .ticket-seasons {
    color: var(--dm-text-secondary);
}

@media (max-width: 768px) {
    body.dark-mode .ticket-stub {
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            rgba(232, 184, 42, 0.3) 4px,
            rgba(232, 184, 42, 0.3) 8px
        );
    }
}

/* Dark Mode - Choose Next Buttons */
body.dark-mode .choose-next-btn {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 0 4px 15px rgba(232, 184, 42, 0.3);
}

body.dark-mode .choose-next-btn:hover {
    box-shadow: 0 6px 20px rgba(232, 184, 42, 0.4);
}

body.dark-mode .choose-next-thumb {
    background: rgba(0, 0, 0, 0.2);
}

/* Dark Mode - Sticky Floating Windows */
body.dark-mode .sticky-float {
    background: linear-gradient(135deg, rgba(42, 61, 53, 0.95) 0%, rgba(31, 46, 40, 0.95) 100%);
    border-color: rgba(232, 184, 42, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .sticky-float-label {
    color: var(--dm-gold);
}

body.dark-mode .sticky-float-number {
    color: var(--dm-gold);
}

body.dark-mode .sticky-float-name {
    color: var(--dm-text);
}

/* Dark Mode - Selected Package Ticket */
body.dark-mode .package-ticket {
    background: 
        linear-gradient(135deg, #2a3d35 0%, #1f2e28 50%, #253830 100%);
    border-color: rgba(232, 184, 42, 0.3);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .package-ticket::before {
    background: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0' fill='%23e8b82a' fill-opacity='0.03'/%3E%3C/svg%3E");
}

body.dark-mode .package-ticket-left {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.1) 0%, rgba(232, 184, 42, 0.05) 100%);
}

body.dark-mode .package-ticket-label {
    color: var(--dm-gold);
}

body.dark-mode .package-ticket-stub {
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 6px,
        rgba(232, 184, 42, 0.3) 6px,
        rgba(232, 184, 42, 0.3) 12px
    );
}

body.dark-mode .package-ticket-stub::before,
body.dark-mode .package-ticket-stub::after {
    background: var(--dm-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .package-ticket-name {
    color: var(--dm-text);
}

body.dark-mode .package-ticket-duration {
    color: var(--dm-text-secondary);
}

body.dark-mode .package-ticket-divider {
    color: var(--dm-text-muted);
}

body.dark-mode .package-ticket-price {
    color: var(--dm-gold);
}

body.dark-mode .package-change-btn {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 0 2px 8px rgba(232, 184, 42, 0.3);
}

body.dark-mode .package-change-btn:hover {
    box-shadow: 0 4px 12px rgba(232, 184, 42, 0.5);
}

@media (max-width: 768px) {
    body.dark-mode .package-ticket-stub {
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            rgba(232, 184, 42, 0.3) 4px,
            rgba(232, 184, 42, 0.3) 8px
        );
    }
}

body.dark-mode .selected-package-label {
    color: var(--dm-text-muted);
}

body.dark-mode .selected-package-name {
    color: var(--dm-text-primary);
}

/* Dark Mode - Legend Selector */
body.dark-mode .legend-selector-grid {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .legend-selector-item {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

body.dark-mode .legend-selector-item:hover {
    border-color: var(--dm-gold);
}

body.dark-mode .legend-selector-item.selected {
    background: var(--dm-green);
    border-color: var(--dm-gold);
}

/* Dark Mode - Package Selection Cards */
body.dark-mode .package-option {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .package-option:hover {
    border-color: var(--dm-gold);
}

body.dark-mode .package-option.selected {
    background: var(--dm-green);
    border-color: var(--dm-gold);
}

body.dark-mode .package-option-name {
    color: var(--dm-text-primary);
}

body.dark-mode .package-option-price {
    color: var(--dm-gold);
}

/* Dark Mode - Calendar */
body.dark-mode .calendar-wrapper {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}

body.dark-mode .calendar-header {
    color: var(--dm-text-primary);
}

body.dark-mode .calendar-day {
    color: var(--dm-text-secondary);
    background: var(--dm-bg-card);
}

body.dark-mode .calendar-day:hover:not(.disabled) {
    background: var(--dm-green);
    color: var(--dm-text-primary);
}

body.dark-mode .calendar-day.selected {
    background: var(--dm-gold);
    color: var(--dm-bg-primary);
}

body.dark-mode .calendar-day.disabled {
    color: var(--dm-text-muted);
    opacity: 0.4;
}

body.dark-mode .calendar-day-header {
    color: var(--dm-text-muted);
}

/* Dark Mode - Buttons */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-light) 100%);
    color: var(--dm-text-primary);
}

body.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, var(--dm-green-light) 0%, var(--dm-green) 100%);
}

body.dark-mode .btn-secondary {
    background: transparent;
    border-color: var(--dm-gold);
    color: var(--dm-gold);
}

body.dark-mode .btn-secondary:hover {
    background: var(--dm-gold);
    color: var(--dm-bg-primary);
}

body.dark-mode .btn-outline {
    background: transparent;
    border-color: var(--dm-border-light);
    color: var(--dm-text-secondary);
}

body.dark-mode .btn-outline:hover {
    border-color: var(--dm-gold);
    color: var(--dm-gold);
}

body.dark-mode .btn-package {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}

body.dark-mode .btn-package:hover {
    background: var(--dm-green);
    border-color: var(--dm-green-light);
}

/* Dark Mode - Smart Recommendations */
body.dark-mode .smart-recommendations {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-gold);
}

body.dark-mode .recommendation-header {
    color: var(--dm-gold);
}

body.dark-mode .recommendation-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
}

/* Dark Mode - Footer */
body.dark-mode .footer {
    background: linear-gradient(180deg, var(--dm-bg-secondary) 0%, var(--dm-bg-primary) 100%);
    border-top-color: var(--dm-border);
}

body.dark-mode .footer-title {
    color: var(--dm-text-primary);
}

body.dark-mode .footer-text,
body.dark-mode .footer-link {
    color: var(--dm-text-secondary);
}

body.dark-mode .footer-link:hover {
    color: var(--dm-gold);
}

body.dark-mode .footer-bottom {
    border-top-color: var(--dm-border);
    color: var(--dm-text-muted);
}

body.dark-mode .footer-social a {
    background: var(--dm-bg-tertiary);
    color: var(--dm-text-secondary);
    border-color: var(--dm-border);
}

body.dark-mode .footer-social a:hover {
    background: var(--dm-gold);
    color: var(--dm-bg-primary);
    border-color: var(--dm-gold);
}

/* Dark Mode - Modals */
body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .modal-content {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .modal-header h2 {
    color: var(--dm-text-primary);
}

body.dark-mode .modal-close {
    color: var(--dm-text-muted);
}

body.dark-mode .modal-close:hover {
    color: var(--dm-text-primary);
}

/* Dark Mode - Booking Entry Modal */
body.dark-mode .booking-entry-modal {
    background: linear-gradient(135deg, #1a2e25 0%, #152420 50%, #1a2e25 100%);
    border-color: rgba(232, 184, 42, 0.3);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 15px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(232, 184, 42, 0.1);
}

body.dark-mode .booking-entry-modal .modal-close {
    color: var(--white);
    background: rgba(232, 184, 42, 0.1);
    border: 1px solid rgba(232, 184, 42, 0.3);
}

body.dark-mode .booking-entry-modal .modal-close:hover {
    background: var(--dm-gold);
    color: var(--dm-green-deep);
    border-color: var(--dm-gold);
}

body.dark-mode .entry-logo-img {
    filter: drop-shadow(0 4px 12px rgba(232, 184, 42, 0.3)) brightness(1.1);
}

body.dark-mode .booking-entry-modal::before {
    background: linear-gradient(90deg, 
        var(--dm-gold) 0%, 
        var(--dm-green-rich) 50%, 
        var(--dm-gold) 100%);
}

body.dark-mode .modal-corner {
    border-color: var(--dm-gold);
    opacity: 0.4;
}

body.dark-mode .booking-entry-title {
    color: var(--white);
}

body.dark-mode .booking-entry-subtitle {
    color: var(--dm-text-muted);
}

body.dark-mode .entry-divider::before,
body.dark-mode .entry-divider::after {
    background: linear-gradient(90deg, transparent, rgba(232, 184, 42, 0.3), transparent);
}

body.dark-mode .entry-divider-icon {
    color: var(--dm-gold);
}

body.dark-mode .entry-choice-btn {
    background: linear-gradient(135deg, #1f3029 0%, #1a2923 100%);
    border-color: rgba(232, 184, 42, 0.2);
}

body.dark-mode .entry-choice-btn:hover {
    border-color: var(--dm-gold);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(232, 184, 42, 0.15);
}

body.dark-mode .entry-choice-btn::before {
    background: var(--dm-gold);
}

body.dark-mode .entry-choice-icon {
    background: linear-gradient(135deg, var(--dm-gold) 0%, #c9a520 100%);
    color: var(--dm-green-deep);
    box-shadow: 0 4px 12px rgba(232, 184, 42, 0.3);
}

body.dark-mode .entry-choice-icon i {
    color: var(--dm-green-deep);
}

body.dark-mode .entry-choice-label {
    color: var(--dm-gold);
}

body.dark-mode .entry-choice-title {
    color: var(--white);
}

body.dark-mode .entry-choice-desc {
    color: var(--dm-text-muted);
}

body.dark-mode .entry-choice-arrow {
    color: var(--dm-gold);
}

body.dark-mode .booking-entry-footer {
    border-top-color: rgba(232, 184, 42, 0.2);
}

body.dark-mode .booking-entry-footer p {
    color: var(--dm-text-muted);
}

body.dark-mode .booking-entry-footer i {
    color: var(--dm-gold);
}

/* Dark Mode - Legend Detail Modal */
body.dark-mode .legend-detail-overlay {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .legend-detail-content {
    background: var(--dm-bg-card);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

body.dark-mode .legend-detail-close {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

body.dark-mode .legend-detail-close:hover {
    background: var(--dm-gold);
    border-color: var(--dm-gold);
    color: var(--dm-bg-primary);
}

body.dark-mode .legend-detail-header {
    background: linear-gradient(135deg, 
        var(--dm-bg-tertiary) 0%, 
        var(--dm-bg-secondary) 100%);
}

body.dark-mode .legend-detail-title h2 {
    color: var(--dm-text-primary);
}

body.dark-mode .legend-detail-position {
    color: var(--dm-gold);
}

body.dark-mode .legend-detail-meta .meta-era {
    color: var(--dm-text-secondary);
}

body.dark-mode .legend-detail-meta .meta-badge {
    background: rgba(232, 184, 42, 0.15);
    color: var(--dm-text-primary);
}

body.dark-mode .legend-detail-body {
    background: var(--dm-bg-card);
}

body.dark-mode .legend-detail-description {
    color: var(--dm-text-secondary);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .legend-detail-achievements h4,
body.dark-mode .legend-detail-tags h4 {
    color: var(--dm-gold);
}

body.dark-mode .legend-detail-achievements li {
    background: linear-gradient(135deg, rgba(232, 184, 42, 0.08) 0%, rgba(232, 184, 42, 0.03) 100%);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-gold);
}

body.dark-mode .legend-detail-tags .event-tag {
    background: var(--dm-green);
    color: var(--dm-text-primary);
}

body.dark-mode .legend-detail-footer {
    background: var(--dm-bg-tertiary);
}

/* Dark Mode - Professional Player Card */
body.dark-mode .player-card-header {
    background: linear-gradient(135deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-secondary) 50%, #0a0f12 100%);
}

body.dark-mode .player-card-badge .badge-position {
    background: var(--dm-gold);
    color: var(--dm-bg-primary);
}

body.dark-mode .player-card-jersey {
    background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(232, 184, 42, 0.4);
}

body.dark-mode .player-card-jersey .jersey-hash {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .player-card-jersey .jersey-num {
    color: var(--dm-gold);
}

body.dark-mode .player-card-name h2 {
    color: var(--dm-text-primary);
}

body.dark-mode .player-card-name .player-position {
    color: var(--dm-gold);
}

body.dark-mode .player-card-era-badge {
    background: rgba(232, 184, 42, 0.15);
    color: var(--dm-text-primary);
}

body.dark-mode .player-card-stats {
    background: linear-gradient(180deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-card) 100%);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .player-card-stats .stat-value {
    color: var(--dm-gold);
}

body.dark-mode .player-card-stats .stat-label {
    color: var(--dm-text-muted);
}

body.dark-mode .player-card-stats .stat-divider {
    background: var(--dm-border);
}

body.dark-mode .player-card-headlines {
    background: var(--dm-bg-card);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .player-card-headlines .headline-badge {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-dark) 100%);
}

body.dark-mode .player-card-headlines .headline-badge i {
    color: var(--dm-gold);
}

body.dark-mode .player-card-bio {
    background: var(--dm-bg-card);
}

body.dark-mode .player-card-bio .bio-header {
    border-bottom-color: var(--dm-gold);
}

body.dark-mode .player-card-bio .bio-header i {
    color: var(--dm-gold);
}

body.dark-mode .player-card-bio .bio-header h4 {
    color: var(--dm-gold);
}

body.dark-mode .player-card-bio .bio-content p {
    color: var(--dm-text-secondary);
}

body.dark-mode .player-card-achievements {
    background: var(--dm-bg-tertiary);
    border-top-color: var(--dm-border);
}

body.dark-mode .player-card-achievements .achievements-header i {
    color: var(--dm-gold);
}

body.dark-mode .player-card-achievements .achievements-header h4 {
    color: var(--dm-gold);
}

body.dark-mode .player-card-achievements .achievement-item {
    background: var(--dm-bg-card);
    border-left-color: var(--dm-gold);
}

body.dark-mode .player-card-achievements .achievement-item i {
    color: var(--dm-green-light);
}

body.dark-mode .player-card-achievements .achievement-item span {
    color: var(--dm-text-secondary);
}

body.dark-mode .player-card-footer {
    background: linear-gradient(180deg, var(--dm-bg-tertiary) 0%, var(--dm-bg-secondary) 100%);
    border-top-color: var(--dm-border);
}

body.dark-mode .player-card-footer .footer-tagline {
    color: var(--dm-text-muted);
}

body.dark-mode .player-card-footer .footer-tagline i {
    color: var(--dm-gold);
}

body.dark-mode .player-card-footer .btn-book-legend {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-dark) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .player-card-footer .btn-book-legend:hover {
    box-shadow: 0 6px 20px rgba(232, 184, 42, 0.2);
}

/* Dark Mode - Success Modal */
body.dark-mode .success-modal-content {
    background: var(--dm-bg-card);
}

body.dark-mode .success-icon {
    color: var(--dm-gold);
}

/* Dark Mode - Scroll Indicator */
body.dark-mode .hero-scroll a {
    color: var(--dm-text-muted);
}

body.dark-mode .hero-scroll a:hover {
    color: var(--dm-gold);
}

/* Dark Mode - Selection text */
body.dark-mode ::selection {
    background: var(--dm-gold);
    color: var(--dm-bg-primary);
}

/* Dark Mode - Scrollbar */
body.dark-mode::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--dm-bg-secondary);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--dm-border-light);
    border-radius: 5px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--dm-gold);
}

/* Dark Mode Toggle Indicator */
.logo-icon {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.logo-icon:hover {
    transform: scale(1.05);
}

.logo-icon::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 6px;
    height: 6px;
    background: var(--packers-gold);
    border-radius: 50%;
    transition: transform 0.3s ease;
    opacity: 0;
}

body.dark-mode .logo-icon::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ============================================
   UX REVIEW NOTES MODAL
   ============================================ */
.ux-review-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    overflow-y: auto;
    padding: 40px 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ux-review-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    opacity: 1;
}

.ux-review-content {
    background: linear-gradient(180deg, #1a1f24 0%, #0f1318 100%);
    border: 1px solid rgba(212, 168, 24, 0.3);
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(212, 168, 24, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: uxModalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.ux-review-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.ux-review-close:hover {
    background: rgba(212, 168, 24, 0.3);
    border-color: var(--packers-gold);
    transform: rotate(90deg);
}

.ux-review-header {
    text-align: center;
    padding: 40px 40px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(212, 168, 24, 0.08) 0%, transparent 100%);
}

.ux-review-badge {
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, var(--packers-gold) 0%, #c99a10 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 
        0 8px 25px rgba(212, 168, 24, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.ux-review-badge i {
    font-size: 1.8rem;
    color: var(--packers-green);
}

.ux-review-header h2 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.ux-review-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ux-review-body {
    padding: 30px 40px;
}

.ux-section {
    margin-bottom: 35px;
}

.ux-section:last-child {
    margin-bottom: 0;
}

.ux-section h3 {
    color: var(--packers-gold);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ux-section h3 i {
    font-size: 1rem;
    opacity: 0.8;
}

.ux-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ux-list li {
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.ux-list li:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ux-list.success li {
    border-left-color: #22c55e;
}

.ux-list.numbered {
    counter-reset: item;
}

.ux-list.numbered li {
    border-left-color: var(--packers-gold);
    counter-increment: item;
    position: relative;
    padding-left: 45px;
}

.ux-list.numbered li::before {
    content: counter(item);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--packers-gold);
    color: var(--packers-green);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ux-list.mobile li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ux-list.mobile li.success {
    border-left-color: #22c55e;
}

.ux-list.mobile li.warning {
    border-left-color: #f59e0b;
}

.ux-list.mobile li i {
    width: 20px;
    text-align: center;
}

.ux-list.future li {
    border-left-color: #6366f1;
}

.ux-list li strong {
    color: #fff;
}

.ux-table {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-table-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

.ux-table-issue,
.ux-table-rec {
    padding: 16px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.ux-table-issue {
    background: rgba(239, 68, 68, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: #fca5a5;
}

.ux-table-rec {
    background: rgba(34, 197, 94, 0.05);
}

.ux-architecture {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-arch-row {
    margin-bottom: 16px;
}

.ux-arch-row:last-child {
    margin-bottom: 0;
}

.ux-arch-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.ux-arch-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ux-arch-flow span {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 14px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

.ux-arch-flow i {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
}

.ux-arch-flow .ux-arch-issue {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.ux-arch-flow.recommended span {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.ux-arch-flow .ux-arch-addon {
    background: rgba(212, 168, 24, 0.2);
    border: 1px solid rgba(212, 168, 24, 0.4);
    color: var(--packers-gold);
}

.ux-review-footer {
    text-align: center;
    padding: 25px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.ux-review-footer p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ux-review-footer i {
    color: var(--packers-gold);
}

/* UX Review Modal - Scrollbar */
.ux-review-content::-webkit-scrollbar {
    width: 8px;
}

.ux-review-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.ux-review-content::-webkit-scrollbar-thumb {
    background: rgba(212, 168, 24, 0.4);
    border-radius: 4px;
}

.ux-review-content::-webkit-scrollbar-thumb:hover {
    background: var(--packers-gold);
}

/* Footer logo clickable for UX modal */
.footer-logo-link {
    cursor: pointer;
}

/* UX Review Modal - Mobile Responsive */
@media (max-width: 768px) {
    .ux-review-modal {
        padding: 20px 10px;
    }
    
    .ux-review-content {
        border-radius: 12px;
    }
    
    .ux-review-header {
        padding: 30px 20px 25px;
    }
    
    .ux-review-header h2 {
        font-size: 1.4rem;
    }
    
    .ux-review-body {
        padding: 20px;
    }
    
    .ux-section h3 {
        font-size: 1rem;
    }
    
    .ux-table-row {
        grid-template-columns: 1fr;
    }
    
    .ux-table-issue {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .ux-arch-flow {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ux-arch-flow i {
        transform: rotate(90deg);
    }
    
    .ux-review-footer {
        padding: 20px;
    }
}

/* ================================================
   PRO SHOP MODAL & BASKET STYLES
   ================================================ */

/* Pro Shop Item Hover Effect */
.proshop-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.proshop-item:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, var(--packers-green) 0%, #2a5a4a 100%) !important;
}

.proshop-item-hover {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--packers-gold);
    color: var(--packers-green);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.proshop-item:hover .proshop-item-hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.proshop-item-price {
    margin-left: auto;
    font-weight: 700;
    color: var(--packers-gold);
    font-size: 0.9rem;
}

.proshop-discount-hint {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.05) 100%);
    border: 1px solid rgba(212, 168, 24, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.proshop-discount-hint i {
    color: var(--packers-gold);
}

.proshop-discount-hint strong {
    color: var(--packers-gold);
}

.proshop-hint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.proshop-hint i {
    color: var(--packers-gold);
    animation: pointPulse 1.5s ease-in-out infinite;
}

@keyframes pointPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Pro Shop Modal */
.proshop-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}

.proshop-modal.active {
    display: flex;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.proshop-modal-content {
    background: linear-gradient(145deg, #1a3a2f 0%, #0f2821 100%);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 168, 24, 0.2);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.proshop-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.proshop-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.proshop-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}

/* Left Column */
.proshop-modal-left {
    background: linear-gradient(145deg, #1a3a2f 0%, #0f2821 100%);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.proshop-modal-icon-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    background: linear-gradient(145deg, rgba(212, 168, 24, 0.15) 0%, rgba(212, 168, 24, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(212, 168, 24, 0.3);
}

.proshop-modal-icon-wrap i {
    font-size: 4rem;
    color: var(--packers-gold);
    filter: drop-shadow(0 4px 12px rgba(212, 168, 24, 0.4));
}

.proshop-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(212, 168, 24, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.proshop-modal-badge {
    background: linear-gradient(135deg, var(--packers-gold) 0%, #e8c547 100%);
    color: var(--packers-green);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.proshop-modal-category {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.proshop-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.proshop-modal-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.proshop-modal-price .price-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--packers-gold);
}

.proshop-modal-price .price-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.proshop-modal-left .proshop-modal-features {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.proshop-modal-left .proshop-feature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.proshop-modal-left .proshop-feature i {
    color: var(--packers-gold);
    width: 18px;
    font-size: 0.85rem;
}

/* Right Column */
.proshop-modal-right {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #162e26 0%, #0d1f1a 100%);
}

.proshop-modal-section {
    margin-bottom: 1.5rem;
}

.proshop-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--packers-gold);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(212, 168, 24, 0.2);
}

.proshop-modal-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.7;
}

.proshop-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.proshop-modal-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.proshop-form-row {
    margin-bottom: 1rem;
}

.proshop-form-row:last-child {
    margin-bottom: 0;
}

.proshop-form-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.proshop-form-row label .optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.proshop-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.proshop-quantity .qty-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proshop-quantity .qty-btn:hover {
    background: var(--packers-gold);
    color: var(--packers-green);
}

.proshop-quantity input {
    width: 60px;
    height: 44px;
    border: none;
    background: transparent;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* Textarea styling - works for both .proshop-modal-form and .proshop-modal-section */
.proshop-form-row textarea,
.proshop-modal-form textarea,
.proshop-modal-section textarea,
#proShopNotes {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
    max-height: 150px;
    transition: all 0.3s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

.proshop-form-row textarea::placeholder,
.proshop-modal-form textarea::placeholder,
.proshop-modal-section textarea::placeholder,
#proShopNotes::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.proshop-form-row textarea:focus,
.proshop-modal-form textarea:focus,
.proshop-modal-section textarea:focus,
#proShopNotes:focus {
    outline: none;
    border-color: var(--packers-gold);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 3px rgba(212, 168, 24, 0.15);
}

.proshop-discount-msg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.proshop-discount-msg i {
    font-size: 1rem;
}

.proshop-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(212, 168, 24, 0.1);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.proshop-modal-total span:first-child {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.proshop-modal-total span:last-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--packers-gold);
}

.proshop-add-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--packers-gold) 0%, #e8c547 100%);
    color: var(--packers-green);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(212, 168, 24, 0.3);
}

.proshop-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 168, 24, 0.4);
}

/* Pro Shop Basket Ticket */
.proshop-basket-ticket {
    background: linear-gradient(135deg, #1a3a2f 0%, #0f2821 100%);
    border-radius: 16px;
    border: 2px solid rgba(212, 168, 24, 0.3);
    margin-top: 0.9rem;
    overflow: hidden;
    animation: basketSlideIn 0.4s ease;
}

.proshop-basket-ticket.hidden {
    display: none;
}

@keyframes basketSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.proshop-basket-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: rgba(212, 168, 24, 0.1);
    border-bottom: 1px solid rgba(212, 168, 24, 0.2);
}

.proshop-basket-badge {
    background: var(--packers-gold);
    color: var(--packers-green);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.proshop-basket-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
}

.proshop-basket-logo {
    height: 28px;
}

.proshop-basket-title span {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
}

.proshop-basket-clear {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.proshop-basket-clear:hover {
    background: #ef4444;
    color: white;
}

.proshop-basket-items {
    padding: 0.65rem 1.1rem;
    max-height: 200px;
    overflow-y: auto;
}

.proshop-basket-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.proshop-basket-item-icon {
    width: 36px;
    height: 36px;
    background: rgba(212, 168, 24, 0.15);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--packers-gold);
    font-size: 0.95rem;
}

.proshop-basket-item-details {
    flex: 1;
}

.proshop-basket-item-name {
    font-weight: 600;
    color: white;
    font-size: 0.86rem;
}

.proshop-basket-item-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
}

.proshop-basket-item-price {
    font-weight: 700;
    color: var(--packers-gold);
    font-size: 0.95rem;
}

.proshop-basket-item-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.proshop-basket-item-remove:hover {
    color: #ef4444;
}

.proshop-basket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.proshop-basket-total {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.proshop-basket-total span:first-child {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.proshop-basket-total span:last-child {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--packers-gold);
}

.proshop-add-more {
    padding: 7px 14px;
    background: rgba(212, 168, 24, 0.2);
    border: 1px solid rgba(212, 168, 24, 0.4);
    border-radius: 20px;
    color: var(--packers-gold);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.proshop-add-more:hover {
    background: var(--packers-gold);
    color: var(--packers-green);
}

/* Pro Shop Modal Responsive */
@media (max-width: 768px) {
    .proshop-modal-content {
        max-height: 95vh;
        margin: 10px;
        border-radius: 16px;
        overflow-y: auto;
    }
    
    .proshop-modal-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    /* Condensed Left Column - Horizontal Layout */
    .proshop-modal-left {
        padding: 1rem 1.25rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }
    
    .proshop-modal-icon-wrap {
        width: 60px;
        height: 60px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .proshop-modal-icon-wrap i {
        font-size: 1.75rem;
    }
    
    .proshop-icon-glow {
        display: none;
    }
    
    .proshop-modal-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        margin-bottom: 0;
        padding: 4px 10px;
        font-size: 0.6rem;
    }
    
    .proshop-modal-category {
        display: none;
    }
    
    /* Title and Price inline */
    .proshop-modal-left > .proshop-modal-title,
    .proshop-modal-left > .proshop-modal-price {
        flex: 1 1 auto;
    }
    
    .proshop-modal-title {
        font-size: 1.1rem;
        margin-bottom: 0;
        min-width: 120px;
    }
    
    .proshop-modal-price {
        flex-direction: row;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
        align-items: baseline;
        margin-left: auto;
    }
    
    .proshop-modal-price .price-value {
        font-size: 1.35rem;
    }
    
    .proshop-modal-price .price-label {
        font-size: 0.65rem;
    }
    
    /* Features - Compact horizontal */
    .proshop-modal-left .proshop-modal-features {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.25rem;
    }
    
    .proshop-modal-left .proshop-feature {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        flex: 0 1 auto;
        background: rgba(212, 168, 24, 0.08);
    }
    
    .proshop-modal-left .proshop-feature i {
        width: 14px;
        font-size: 0.7rem;
    }
    
    /* Condensed Right Column */
    .proshop-modal-right {
        padding: 1rem 1.25rem;
    }
    
    .proshop-modal-section {
        margin-bottom: 1rem;
    }
    
    .proshop-section-title {
        font-size: 0.8rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.5rem;
    }
    
    .proshop-modal-desc {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    /* Order Details - Condensed */
    .proshop-form-row {
        margin-bottom: 0.75rem;
    }
    
    .proshop-form-row label {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
    }
    
    .proshop-quantity {
        gap: 0.5rem;
    }
    
    .proshop-quantity .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .proshop-quantity input {
        width: 40px;
        font-size: 0.9rem;
    }
    
    .proshop-form-row textarea,
    .proshop-modal-section textarea,
    #proShopNotes {
        padding: 10px 12px;
        font-size: 0.8rem;
        min-height: 60px;
    }
    
    /* Footer - Condensed */
    .proshop-modal-footer {
        padding-top: 1rem;
    }
    
    .proshop-modal-total {
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .proshop-modal-total span:first-child {
        font-size: 0.85rem;
    }
    
    .proshop-modal-total span:last-child {
        font-size: 1.25rem;
    }
    
    .proshop-add-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .proshop-basket-header {
        flex-wrap: wrap;
    }
    
    .proshop-basket-footer {
        flex-direction: column;
        gap: 0.9rem;
    }
    
    .proshop-add-more {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   LIGHT MODE - Pro Shop Modal
   Clean white/cream background with green accents
   ============================================ */
body:not(.dark-mode) .proshop-modal {
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(12px);
}

body:not(.dark-mode) .proshop-modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.15), 
        0 0 0 1px rgba(35, 75, 55, 0.12),
        0 0 60px rgba(212, 168, 24, 0.08);
}

body:not(.dark-mode) .proshop-modal-close {
    background: white;
    border: 1px solid rgba(35, 75, 55, 0.15);
    color: #234b37;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body:not(.dark-mode) .proshop-modal-close:hover {
    background: #234b37;
    border-color: #234b37;
    color: white;
}

body:not(.dark-mode) .proshop-modal-left {
    background: linear-gradient(145deg, #234b37 0%, #1a3a2a 100%);
    border-right: 1px solid rgba(35, 75, 55, 0.15);
}

body:not(.dark-mode) .proshop-modal-right {
    background: linear-gradient(145deg, #fafbfc 0%, #f5f6f7 100%);
}

body:not(.dark-mode) .proshop-section-title {
    color: #234b37;
    border-bottom-color: rgba(35, 75, 55, 0.15);
}

body:not(.dark-mode) .proshop-modal-desc {
    color: #4a5568;
}

body:not(.dark-mode) .proshop-form-row label {
    color: #234b37;
}

body:not(.dark-mode) .proshop-form-row label .optional {
    color: #718096;
}

body:not(.dark-mode) .proshop-quantity {
    background: white;
    border: 1px solid rgba(35, 75, 55, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

body:not(.dark-mode) .proshop-quantity .qty-btn {
    background: rgba(35, 75, 55, 0.05);
    color: #234b37;
}

body:not(.dark-mode) .proshop-quantity .qty-btn:hover {
    background: var(--packers-gold);
    color: #234b37;
}

body:not(.dark-mode) .proshop-quantity input {
    color: #234b37;
    background: transparent;
}

body:not(.dark-mode) .proshop-form-row textarea,
body:not(.dark-mode) #proShopNotes {
    background: white;
    border: 1px solid rgba(35, 75, 55, 0.2);
    color: #2d3748;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

body:not(.dark-mode) .proshop-form-row textarea::placeholder,
body:not(.dark-mode) #proShopNotes::placeholder {
    color: #a0aec0;
}

body:not(.dark-mode) .proshop-form-row textarea:focus,
body:not(.dark-mode) #proShopNotes:focus {
    border-color: #234b37;
    box-shadow: 0 0 0 3px rgba(35, 75, 55, 0.1);
    background: white;
}

body:not(.dark-mode) .proshop-discount-msg {
    background: rgba(35, 75, 55, 0.05);
    border: 1px solid rgba(35, 75, 55, 0.1);
}

body:not(.dark-mode) .proshop-modal-total {
    background: linear-gradient(135deg, rgba(35, 75, 55, 0.08) 0%, rgba(212, 168, 24, 0.08) 100%);
    border: 1px solid rgba(35, 75, 55, 0.1);
}

body:not(.dark-mode) .proshop-modal-total span:first-child {
    color: #4a5568;
}

body:not(.dark-mode) .proshop-modal-total span:last-child {
    color: #234b37;
}

body:not(.dark-mode) .proshop-modal-footer {
    border-top: 1px solid rgba(35, 75, 55, 0.1);
}

/* Pro Shop Basket Ticket - Light Mode */
body:not(.dark-mode) .proshop-basket-ticket {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid rgba(35, 75, 55, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

body:not(.dark-mode) .proshop-basket-header {
    background: rgba(35, 75, 55, 0.05);
    border-bottom: 1px solid rgba(35, 75, 55, 0.1);
}

body:not(.dark-mode) .proshop-basket-title span {
    color: #234b37;
}

body:not(.dark-mode) .proshop-basket-clear {
    background: rgba(35, 75, 55, 0.08);
    color: #6b7280;
}

body:not(.dark-mode) .proshop-basket-clear:hover {
    background: #ef4444;
    color: white;
}

body:not(.dark-mode) .proshop-basket-item {
    border-bottom-color: rgba(35, 75, 55, 0.08);
}

body:not(.dark-mode) .proshop-basket-item-icon {
    background: rgba(212, 168, 24, 0.12);
    color: #234b37;
}

body:not(.dark-mode) .proshop-basket-item-name {
    color: #234b37;
}

body:not(.dark-mode) .proshop-basket-item-meta {
    color: #6b7280;
}

body:not(.dark-mode) .proshop-basket-item-price {
    color: #234b37;
}

body:not(.dark-mode) .proshop-basket-item-remove {
    color: #9ca3af;
}

body:not(.dark-mode) .proshop-basket-footer {
    background: rgba(35, 75, 55, 0.03);
    border-top: 1px solid rgba(35, 75, 55, 0.08);
}

body:not(.dark-mode) .proshop-basket-total span:first-child {
    color: #6b7280;
}

body:not(.dark-mode) .proshop-basket-total span:last-child {
    color: #234b37;
}

body:not(.dark-mode) .proshop-add-more {
    background: rgba(35, 75, 55, 0.08);
    border-color: rgba(35, 75, 55, 0.2);
    color: #234b37;
}

body:not(.dark-mode) .proshop-add-more:hover {
    background: #234b37;
    color: white;
}

/* ============================================
   LIGHT MODE - Legend Detail Modal (Premium)
   Refined shadows, gold/green accents
   ============================================ */
body:not(.dark-mode) .legend-detail-overlay {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
}

body:not(.dark-mode) .legend-detail-content {
    background: #ffffff;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.12), 
        0 0 0 1px rgba(35, 75, 55, 0.1),
        0 0 80px rgba(212, 168, 24, 0.08);
}

body:not(.dark-mode) .legend-detail-content.player-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

body:not(.dark-mode) .legend-detail-close {
    background: white;
    border: 2px solid rgba(35, 75, 55, 0.15);
    color: #234b37;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body:not(.dark-mode) .legend-detail-close:hover {
    background: var(--packers-gold);
    border-color: var(--packers-gold);
    color: #234b37;
    box-shadow: 0 6px 20px rgba(212, 168, 24, 0.35);
}

body:not(.dark-mode) .legend-detail-header {
    background: linear-gradient(135deg, #234b37 0%, #1a3a2a 50%, #0f2821 100%);
    box-shadow: inset 0 -1px 0 rgba(212, 168, 24, 0.2);
}

body:not(.dark-mode) .legend-detail-body {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

body:not(.dark-mode) .legend-detail-description {
    color: #374151;
    border-bottom: 1px solid rgba(35, 75, 55, 0.1);
}

body:not(.dark-mode) .legend-detail-achievements h4,
body:not(.dark-mode) .legend-detail-tags h4 {
    color: #234b37;
}

body:not(.dark-mode) .legend-detail-achievements li {
    background: linear-gradient(135deg, rgba(212, 168, 24, 0.1) 0%, rgba(35, 75, 55, 0.05) 100%);
    color: #374151;
    border-left: 3px solid var(--packers-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body:not(.dark-mode) .legend-detail-tags .event-tag {
    background: linear-gradient(135deg, #234b37 0%, #1a3a2a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(35, 75, 55, 0.2);
}

body:not(.dark-mode) .legend-detail-footer {
    background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f3 100%);
    border-top: 1px solid rgba(35, 75, 55, 0.08);
}

/* Player Card Light Mode - Premium Feel */
body:not(.dark-mode) .player-card-header {
    background: linear-gradient(135deg, #234b37 0%, #1a3a2a 50%, #0f2821 100%);
}

body:not(.dark-mode) .player-card-stats {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(35, 75, 55, 0.08);
}

body:not(.dark-mode) .player-card-stats .stat-value {
    color: #234b37;
}

body:not(.dark-mode) .player-card-stats .stat-label {
    color: #6b7280;
}

body:not(.dark-mode) .player-card-stats .stat-divider {
    background: rgba(35, 75, 55, 0.15);
}

body:not(.dark-mode) .player-card-headlines {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid rgba(35, 75, 55, 0.08);
}

body:not(.dark-mode) .player-card-headlines .headline-badge {
    background: linear-gradient(135deg, #234b37 0%, #1a3a2a 100%);
    box-shadow: 0 4px 12px rgba(35, 75, 55, 0.2);
}

body:not(.dark-mode) .player-card-bio {
    background: #ffffff;
}

body:not(.dark-mode) .player-card-bio .bio-header {
    border-bottom: 2px solid var(--packers-gold);
}

body:not(.dark-mode) .player-card-bio .bio-header h4 {
    color: #234b37;
}

body:not(.dark-mode) .player-card-bio .bio-content p {
    color: #4b5563;
}

body:not(.dark-mode) .player-card-achievements {
    background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f3 100%);
}

body:not(.dark-mode) .player-card-achievements .achievements-header h4 {
    color: #234b37;
}

body:not(.dark-mode) .player-card-achievements .achievement-item {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body:not(.dark-mode) .player-card-achievements .achievement-item span {
    color: #4b5563;
}

body:not(.dark-mode) .player-card-footer {
    background: linear-gradient(180deg, #f5f6f7 0%, #eef0f2 100%);
    border-top: 1px solid rgba(35, 75, 55, 0.08);
}

body:not(.dark-mode) .player-card-footer .footer-tagline {
    color: #6b7280;
}