/**
 * =====================================================
 * SANREMO 2026 LOTTERY - HOMEPAGE SECTION (Light Theme)
 * =====================================================
 *
 * Light, warm theme to match the overall website design.
 * Conveys hope and positivity for mental health support.
 */

/* ===================================================
   LOTTERY CAMPAIGN CUSTOM PROPERTIES
   =================================================== */

:root {
    /* Enhanced color palette - more vibrant and contrasting */
    --lottery-gold: #e5b960;           /* Brightened from #d4a853 */
    --lottery-gold-light: #fcd34d;     /* Sunny yellow-gold */
    --lottery-gold-dark: #d97706;      /* Rich amber */
    --lottery-amber: #f59e0b;          /* Vibrant amber */
    --lottery-navy: #1e3a5f;           /* Brand navy */
    --lottery-navy-dark: #0f2744;      /* Deep navy */

    /* Gradients */
    --lottery-gradient-warm: linear-gradient(135deg, #fcd34d, #d97706);
    --lottery-gradient-gold: linear-gradient(135deg, #e5b960, #f59e0b);
    --lottery-gradient-shimmer: linear-gradient(90deg, #d4a853, #f59e0b, #d4a853);

    /* Spacing (compact mode) */
    --lottery-spacing-xs: 0.25rem;
    --lottery-spacing-sm: 0.5rem;
    --lottery-spacing-md: 0.75rem;
    --lottery-spacing-lg: 1rem;
    --lottery-spacing-xl: 1.25rem;
    --lottery-spacing-2xl: 1.5rem;

    /* Border radius */
    --lottery-radius-sm: 0.5rem;
    --lottery-radius-md: 0.75rem;
    --lottery-radius-lg: 1rem;
    --lottery-radius-xl: 1.5rem;
    --lottery-radius-full: 50px;

    /* Transitions */
    --lottery-transition-fast: 150ms ease-out;
    --lottery-transition-normal: 250ms ease-out;
    --lottery-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --lottery-shadow-sm: 0 2px 4px rgba(30, 58, 95, 0.06);
    --lottery-shadow-md: 0 4px 12px rgba(30, 58, 95, 0.08);
    --lottery-shadow-lg: 0 10px 24px rgba(30, 58, 95, 0.12);
    --lottery-shadow-gold: 0 4px 16px rgba(212, 168, 83, 0.3);
    --lottery-shadow-gold-lg: 0 8px 32px rgba(212, 168, 83, 0.4);
}

/* ===================================================
   SECTION BASE - LIGHT THEME
   =================================================== */

.sanremo-homepage-section.compact-mode {
    background: linear-gradient(135deg, var(--bg-primary, #ffffff) 0%, var(--bg-secondary, #faf8f5) 100%);
    padding: var(--section-padding-y, clamp(3rem, 8vh, 5rem)) 0 clamp(4rem, 12vh, 8rem);
    margin-top: 0;
    margin-bottom: var(--space-8, 2rem);
    position: relative;
    overflow: visible;
    min-height: fit-content;
}

/* Ensure container has proper spacing */
.sanremo-homepage-section.compact-mode .container {
    position: relative;
    z-index: 10;
    padding-bottom: var(--space-4, 1rem);
}

/* Top accent line */
.sanremo-homepage-section.compact-mode::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent, linear-gradient(90deg, #d4a853, #f59e0b, #d4a853));
}

/* ===================================================
   FLOATING MUSICAL NOTES - SAME AS SANREMO CAMPAIGN
   =================================================== */

/* Particle Container - Same structure as Sanremo Campaign */
.hp-particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Above background, below content */
    overflow: hidden;
    pointer-events: none;
}

/* Floating Music Icons - Same styling as Sanremo Campaign (adapted for light theme) */
.hp-floating-icon {
    position: absolute;
    font-size: 28px;
    color: rgba(212, 168, 83, 0.55);
    text-shadow: 
        0 0 30px rgba(212, 168, 83, 0.6),
        0 0 60px rgba(212, 168, 83, 0.4),
        0 0 90px rgba(212, 168, 83, 0.25);
    animation: hpFloatRise 20s infinite linear;
    will-change: transform, opacity;
    filter: blur(0px);
}

/* Musical note text characters */
.hp-musical-note {
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Music', sans-serif;
    font-weight: normal;
    line-height: 1;
    color: rgba(212, 168, 83, 0.6);
    text-shadow: 
        0 0 25px rgba(212, 168, 83, 0.7),
        0 0 50px rgba(212, 168, 83, 0.5);
}

/* Alternate colors for variety - More Visible (adapted for light theme) */
.hp-floating-icon:nth-child(3n) {
    color: rgba(30, 58, 95, 0.5);
    text-shadow:
        0 0 30px rgba(30, 58, 95, 0.6),
        0 0 60px rgba(30, 58, 95, 0.4);
}

.hp-floating-icon:nth-child(5n) {
    color: rgba(212, 168, 83, 0.45);
    text-shadow:
        0 0 25px rgba(212, 168, 83, 0.6),
        0 0 50px rgba(212, 168, 83, 0.4);
}

.hp-floating-icon:nth-child(7n) {
    color: rgba(245, 158, 11, 0.6);
    text-shadow:
        0 0 30px rgba(245, 158, 11, 0.7),
        0 0 60px rgba(245, 158, 11, 0.5);
}

@keyframes hpFloatRise {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
    95% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

/* ===================================================
   SECTION INTRODUCTION
   =================================================== */

.sanremo-section-intro.compact {
    text-align: center;
    margin-bottom: var(--space-6, 1.5rem);
    padding: 0 var(--space-5, 1.25rem);
    position: relative;
    z-index: 10;
}

.intro-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border: 1px solid rgba(212, 168, 83, 0.4);
    border-radius: var(--radius-full, 50px);
    background: rgba(212, 168, 83, 0.08);
    color: var(--color-primary, #1e3a5f);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-4, 1rem);
}

.note-icon {
    font-family: 'Segoe UI Symbol', sans-serif;
    font-size: 0.9rem;
    color: var(--color-accent, #d4a853);
}

.intro-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: var(--text-3xl, clamp(1.5rem, 4vw, 2rem));
    font-weight: var(--font-bold, 700);
    color: var(--text-primary, #1e293b);
    margin: 0 0 var(--space-3, 0.75rem);
}

.intro-description {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--text-secondary, #475569);
    max-width: 550px;
    margin: 0 auto;
    line-height: var(--leading-relaxed, 1.625);
}

.intro-description strong {
    color: var(--color-accent, #d4a853);
    font-weight: var(--font-semibold, 600);
}

/* ===================================================
   INFO STRIP
   =================================================== */

.sanremo-info-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;
    margin-bottom: var(--space-6, 1.5rem);
    padding: var(--space-2, 0.5rem);
    background: transparent;
    position: relative;
    z-index: 10;
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    background: linear-gradient(135deg, #ffffff 0%, #fefdfb 100%);
    border: 2px solid rgba(212, 168, 83, 0.2);
    border-radius: var(--radius-full, 50px);
    box-shadow:
        0 2px 8px rgba(30, 58, 95, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.1), transparent);
    transition: left 0.5s ease;
}

.info-item:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 168, 83, 0.4);
    box-shadow:
        0 6px 20px rgba(212, 168, 83, 0.15),
        0 3px 10px rgba(30, 58, 95, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.info-item:hover::before {
    left: 100%;
}

.info-icon-mini {
    color: var(--color-accent, #d4a853);
    font-size: var(--text-lg, 1.125rem);
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(245, 158, 11, 0.08));
    border-radius: var(--radius-full, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.info-item:hover .info-icon-mini {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    color: var(--color-primary-dark, #0f2744);
    transform: rotate(360deg) scale(1.1);
}

.info-text {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-primary, #1e293b);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.01em;
}

.info-divider {
    display: none; /* Remove static dividers in favor of individual cards */
}

/* ===================================================
   BACKGROUND EFFECTS - SUBTLE
   =================================================== */

.sanremo-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.sanremo-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.08;
}

.glow-1 {
    width: 250px;
    height: 250px;
    background: var(--color-accent, #d4a853);
    top: -50px;
    left: -50px;
}

.glow-2 {
    width: 200px;
    height: 200px;
    background: var(--color-primary, #1e3a5f);
    bottom: -50px;
    right: -50px;
}

/* ===================================================
   MAIN WIDGET CONTAINER
   =================================================== */

.sanremo-compact-widget {
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-xl, 1.5rem);
    overflow: visible;
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(30, 58, 95, 0.12));
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    position: relative;
    z-index: 10;
    margin-bottom: var(--space-6, 1.5rem);
}

.sanremo-compact-widget:hover {
    box-shadow: var(--shadow-xl, 0 16px 40px rgba(30, 58, 95, 0.15));
}

/* When drawer is open, add extra bottom margin to prevent cutoff */
.sanremo-compact-widget.drawer-open {
    margin-bottom: var(--space-12, 3rem);
    overflow: visible; /* Prevent nested scrolling */
}

.sanremo-compact-widget.drawer-open .payment-drawer.open {
    margin-bottom: 0;
    overflow-y: visible; /* Prevent nested scrolling - let page handle it */
}

/* When drawer is open, add more bottom margin to prevent cutoff */
.sanremo-compact-widget .payment-drawer.open {
    margin-bottom: 0;
    overflow-y: visible; /* Prevent nested scrolling */
}

/* Ensure widget doesn't create scroll issues */
.sanremo-compact-widget {
    overflow: visible;
    position: relative;
}

.sanremo-compact-widget.drawer-open {
    overflow: visible;
}

/* Widget needs enough bottom margin to accommodate drawer opening */
.sanremo-compact-widget {
    margin-bottom: var(--space-10, 2.5rem);
}

/* ===================================================
   TICKET SELECTOR
   =================================================== */

.widget-compact-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
    gap: var(--space-5, 1.25rem);
}

.ticket-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4, 1rem);
    width: 100%;
    padding: var(--space-5, 1.25rem);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.04) 0%, rgba(245, 158, 11, 0.02) 100%);
    border-radius: var(--radius-xl, 1.5rem);
    border: 1px solid rgba(212, 168, 83, 0.15);
}

.selector-label {
    font-family: var(--font-heading, 'Playfair Display', serif);
    color: var(--text-primary, #1e293b);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    text-align: center;
    margin-bottom: var(--space-3, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
}

.selector-label::before {
    content: '🎫';
    font-size: var(--text-xl, 1.25rem);
    filter: drop-shadow(0 2px 4px rgba(212, 168, 83, 0.3));
}

.ticket-buttons {
    display: flex;
    gap: var(--space-4, 1rem);
    justify-content: center;
}

.hp-ticket-btn {
    background: linear-gradient(135deg, #ffffff 0%, #fefdfb 100%);
    border: 3px solid transparent;
    border-radius: var(--radius-xl, 1.5rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: all var(--duration-normal, 250ms) cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    min-width: 130px;
    position: relative;
    box-shadow:
        0 4px 12px rgba(30, 58, 95, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-image:
        linear-gradient(135deg, rgba(212, 168, 83, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%),
        linear-gradient(to bottom, #ffffff, #fefdfb);
    background-blend-mode: overlay, normal;
}

/* Animated gradient border */
.hp-ticket-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(135deg, #d4a853 0%, #f59e0b 50%, #d97706 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-normal, 250ms) var(--ease-out, ease-out);
    pointer-events: none;
}

/* Shine effect */
.hp-ticket-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.hp-ticket-btn:hover {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(212, 168, 83, 0.25),
        0 6px 16px rgba(30, 58, 95, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hp-ticket-btn:hover::before {
    opacity: 1;
}

.hp-ticket-btn:hover::after {
    left: 100%;
}

.hp-ticket-btn.active {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    border-color: transparent;
    box-shadow:
        0 0 0 4px rgba(212, 168, 83, 0.25),
        0 12px 40px rgba(212, 168, 83, 0.4),
        0 6px 20px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-4px) scale(1.05);
    animation: activePulse 2s ease-in-out infinite;
}

.hp-ticket-btn.active::before {
    opacity: 0;
}

@keyframes activePulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(212, 168, 83, 0.25),
            0 12px 40px rgba(212, 168, 83, 0.4),
            0 6px 20px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(212, 168, 83, 0.15),
            0 16px 48px rgba(212, 168, 83, 0.5),
            0 8px 24px rgba(245, 158, 11, 0.4);
    }
}

.hp-ticket-btn.popular {
    border-color: rgba(212, 168, 83, 0.4);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
}

/* Ensure popular button when active has same styling as other active buttons */
.hp-ticket-btn.popular.active {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%) !important;
    border-color: transparent !important;
    box-shadow:
        0 0 0 4px rgba(212, 168, 83, 0.25),
        0 12px 40px rgba(212, 168, 83, 0.4),
        0 6px 20px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) scale(1.05) !important;
    animation: activePulse 2s ease-in-out infinite;
}

.hp-ticket-btn.popular.active .t-count {
    background: rgba(15, 39, 68, 0.2) !important;
    color: var(--color-primary-dark, #0f2744) !important;
    border-color: rgba(15, 39, 68, 0.3) !important;
    font-weight: 800;
}

.hp-ticket-btn.popular.active .t-amount {
    color: var(--color-primary-dark, #0f2744) !important;
    font-weight: 900;
    font-size: var(--text-3xl, 1.875rem);
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.hp-ticket-btn.popular.active .pop-tag {
    background: linear-gradient(135deg, #0f2744, #1e3a5f);
    color: #fcd34d;
    box-shadow:
        0 4px 12px rgba(15, 39, 68, 0.6),
        0 2px 6px rgba(30, 58, 95, 0.4);
}

.pop-tag {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    border-radius: var(--radius-full, 50px);
    font-size: 1.1rem;
    color: var(--color-primary-dark, #0f2744);
    font-family: 'Segoe UI Symbol', sans-serif;
    animation: popTagFloat 3s ease-in-out infinite;
    box-shadow:
        0 4px 12px rgba(212, 168, 83, 0.4),
        0 2px 6px rgba(30, 58, 95, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes popTagFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) rotate(-5deg);
    }
    75% {
        transform: translateY(-4px) rotate(5deg);
    }
}

.t-count {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(212, 168, 83, 0.15);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-full, 50px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    border: 1px solid rgba(212, 168, 83, 0.25);
}

.t-count::before {
    content: '🎫';
    font-size: 0.9rem;
}

.hp-ticket-btn.active .t-count {
    background: rgba(15, 39, 68, 0.2);
    color: var(--color-primary-dark, #0f2744);
    border-color: rgba(15, 39, 68, 0.3);
    font-weight: 800;
}

.t-amount {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-2xl, 1.5rem);
    color: var(--text-primary, #1e293b);
    line-height: 1;
    margin-top: var(--space-2, 0.5rem);
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.hp-ticket-btn:hover .t-amount {
    color: var(--color-accent-amber, #f59e0b);
    transform: scale(1.08);
}

.hp-ticket-btn.active .t-amount {
    color: var(--color-primary-dark, #0f2744);
    font-weight: 900;
    font-size: var(--text-3xl, 1.875rem);
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

/* Custom Quantity Selector - Light Theme Integration */
.ticket-custom-selector {
    width: 100%;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.06) 0%, rgba(245, 158, 11, 0.03) 100%);
    border: 2px dashed rgba(212, 168, 83, 0.3);
    border-radius: var(--radius-lg, 1rem);
    margin-top: var(--space-4, 1rem);
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    position: relative;
}

.ticket-custom-selector::before {
    content: '✨';
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--surface-elevated, #ffffff);
    padding: 0 var(--space-2, 0.5rem);
    font-size: 1rem;
}

.ticket-custom-selector:hover {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
    border-color: rgba(212, 168, 83, 0.5);
    border-style: solid;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.15);
}

.ticket-custom-selector:focus-within {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: var(--color-accent, #d4a853);
    border-style: solid;
    box-shadow:
        0 0 0 4px rgba(212, 168, 83, 0.15),
        0 4px 16px rgba(212, 168, 83, 0.25);
}

.custom-qty-label {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1e293b);
    margin-bottom: var(--space-3, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.custom-qty-label i {
    color: var(--color-accent, #d4a853);
    font-size: var(--text-base, 1rem);
}

.custom-qty-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.qty-btn {
    background: var(--surface-elevated, #ffffff);
    border: 2px solid rgba(212, 168, 83, 0.3);
    color: var(--color-accent, #d4a853);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg, 1rem);
    cursor: pointer;
    font-size: var(--text-lg, 1.125rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.06);
}

.qty-btn:hover {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: var(--color-accent, #d4a853);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.25);
}

.qty-btn:active {
    transform: translateY(0) scale(0.95);
}

.qty-btn i {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-bold, 700);
}

.qty-input {
    width: 80px;
    background: var(--surface-elevated, #ffffff);
    border: 2px solid rgba(212, 168, 83, 0.3);
    border-radius: var(--radius-lg, 1rem);
    color: var(--text-primary, #1e293b);
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
    text-align: center;
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-xl, 1.25rem);
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    flex-shrink: 0;
}

.qty-input:focus {
    outline: none;
    border-color: var(--color-accent, #d4a853);
    background: linear-gradient(to bottom, #ffffff, #fefdf9);
    box-shadow:
        0 0 0 4px rgba(212, 168, 83, 0.15),
        0 4px 12px rgba(212, 168, 83, 0.2);
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-amount {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-2xl, 1.5rem);
    background: var(--gradient-accent-warm, linear-gradient(135deg, #fcd34d, #d97706));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: right;
    margin-left: auto;
    flex-shrink: 0;
}

/* Mobile responsive for custom quantity */
@media (max-width: 768px) {
    .ticket-custom-selector {
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }

    .qty-btn {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-default, 0.5rem);
    }

    .qty-input {
        width: 70px;
        font-size: var(--text-lg, 1.125rem);
        padding: var(--space-2, 0.5rem);
    }

    .qty-amount {
        font-size: var(--text-xl, 1.25rem);
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .custom-qty-controls {
        gap: var(--space-2, 0.5rem);
    }

    .qty-btn {
        width: 44px;
        height: 44px;
    }

    .qty-input {
        width: 60px;
        font-size: var(--text-base, 1rem);
    }

    .qty-amount {
        font-size: var(--text-lg, 1.125rem);
        min-width: 55px;
    }
}

.hp-cta-link {
    /* Enhanced button-like appearance */
    color: var(--color-primary-dark, #0f2744);
    text-decoration: none;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    border: 2px solid transparent;
    border-radius: var(--radius-full, 50px);
    transition: all var(--duration-normal, 250ms) cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: var(--space-4, 1rem);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(212, 168, 83, 0.35),
        0 2px 8px rgba(245, 158, 11, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 160px;
    /* Shine effect background */
    background-image:
        linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Shine effect overlay */
.hp-cta-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

/* Icon styling */
.hp-cta-link i {
    font-size: var(--text-sm, 0.875rem);
    transition: transform var(--duration-normal, 250ms) var(--ease-out, ease-out);
    display: inline-flex;
    align-items: center;
}

/* Hover state - enhanced */
.hp-cta-link:hover {
    color: var(--color-primary-dark, #0f2744);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 8px 24px rgba(212, 168, 83, 0.5),
        0 4px 12px rgba(245, 158, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.hp-cta-link:hover::before {
    left: 100%;
}

.hp-cta-link:hover i {
    transform: translateX(4px);
}

/* Active/pressed state */
.hp-cta-link:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 4px 12px rgba(212, 168, 83, 0.4),
        0 2px 6px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Focus state for accessibility */
.hp-cta-link:focus-visible {
    outline: 3px solid rgba(212, 168, 83, 0.5);
    outline-offset: 3px;
}

/* Animation for attention */
@keyframes ctaPulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(212, 168, 83, 0.35),
            0 2px 8px rgba(245, 158, 11, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            0 6px 20px rgba(212, 168, 83, 0.45),
            0 3px 10px rgba(245, 158, 11, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
}

/* Subtle pulse animation */
.hp-cta-link {
    animation: ctaPulse 3s ease-in-out infinite;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hp-cta-link {
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
        min-width: 140px;
        gap: var(--space-2, 0.5rem);
    }
}

@media (max-width: 480px) {
    .hp-cta-link {
        width: 100%;
        max-width: 280px;
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }
}

/* ===================================================
   PAYMENT DRAWER
   =================================================== */

.payment-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, var(--bg-secondary, #faf8f5) 0%, var(--bg-primary, #ffffff) 100%);
    border-top: 2px solid rgba(212, 168, 83, 0.2);
    position: relative;
    /* Prevent nested scrolling */
    overflow-y: visible;
}

/* Top gold accent line on drawer */
.payment-drawer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent, linear-gradient(90deg, #d4a853, #f59e0b, #d4a853));
    background-size: 200% 100%;
    animation: shimmerGradient 3s ease-in-out infinite;
    z-index: 1;
}

.payment-drawer.open {
    max-height: none; /* Let content determine height */
    animation: drawerSlideIn 0.5s ease-out;
    overflow-y: visible; /* Prevent nested scrolling - let page handle it */
    overflow-x: hidden;
    padding-bottom: var(--space-4, 1rem);
}

/* Ensure drawer content doesn't get cut off - no nested scrolling */
.payment-drawer.open .drawer-content {
    padding: var(--space-8, 2rem) var(--space-8, 2rem) calc(var(--space-16, 4rem) + var(--space-8, 2rem)); /* Extra bottom padding for button spacing */
    min-height: fit-content;
    overflow: visible; /* Prevent nested scrolling */
    max-height: none;
}

/* No scrollbar needed - page handles scrolling */
.payment-drawer.open::-webkit-scrollbar {
    display: none;
}

.payment-drawer.open {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.drawer-content {
    padding: var(--space-8, 2rem) var(--space-8, 2rem) var(--space-10, 2.5rem);
    position: relative;
    z-index: 2;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.25rem);
    /* Prevent nested scrolling - let page handle scrolling */
    overflow: visible;
    max-height: none;
}

/* Ensure enough space for submit button at bottom */
.drawer-content form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.25rem);
    padding-bottom: var(--space-4, 1rem); /* Increased bottom padding for spacing */
    /* Prevent nested scrolling - let page handle scrolling */
    overflow: visible;
    max-height: none;
    position: relative;
}

/* Form rows - prevent nested scrolling */
.hp-form-row {
    display: flex;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.25rem);
    flex-wrap: wrap;
    overflow: visible;
}

/* Form groups - prevent nested scrolling */
.hp-form-group {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    overflow: visible;
}

.hp-form-group.wide {
    flex: 2;
    min-width: 200px;
    overflow: visible;
}

/* Ticket Numbers Display Section (if shown after purchase) */
.ticket-numbers-display {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px solid rgba(212, 168, 83, 0.3);
    border-radius: var(--radius-xl, 1.5rem);
    padding: var(--space-6, 1.5rem);
    margin-bottom: var(--space-6, 1.5rem);
    text-align: center;
}

.ticket-numbers-display h4 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1e293b);
    margin-bottom: var(--space-4, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
}

.ticket-numbers-display h4::before {
    content: '🎫';
    font-size: var(--text-xl, 1.25rem);
}

.ticket-numbers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

.ticket-number-badge {
    background: var(--gradient-accent-warm, linear-gradient(135deg, #fcd34d, #d97706));
    color: var(--color-primary-dark, #0f2744);
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--font-bold, 700);
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 
        0 4px 16px rgba(212, 168, 83, 0.3),
        0 2px 8px rgba(30, 58, 95, 0.1);
    min-width: 100px;
    text-align: center;
    letter-spacing: 0.1em;
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    position: relative;
    overflow: hidden;
}

.ticket-number-badge::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;
}

.ticket-number-badge:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 8px 24px rgba(212, 168, 83, 0.4),
        0 4px 12px rgba(30, 58, 95, 0.15);
}

.ticket-number-badge:hover::before {
    left: 100%;
}

.form-header-compact {
    text-align: center;
    margin-bottom: var(--space-6, 1.5rem);
    padding: var(--space-5, 1.25rem);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
    border-radius: var(--radius-xl, 1.5rem);
    border: 2px solid rgba(212, 168, 83, 0.2);
}

.selected-info {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-secondary, #475569);
    font-size: var(--text-base, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    flex-wrap: wrap;
}

.selected-info strong {
    font-family: var(--font-heading, 'Playfair Display', serif);
    background: var(--gradient-accent-warm, linear-gradient(135deg, #fcd34d, #d97706));
    color: var(--color-primary-dark, #0f2744);
    font-weight: var(--font-bold, 700);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-radius: var(--radius-full, 50px);
    font-size: var(--text-lg, 1.125rem);
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

/* Ticket icon in selected info */
.selected-info strong:first-of-type::before {
    content: '🎫';
    font-size: 1rem;
    margin-right: var(--space-1, 0.25rem);
}

/* Separator dot */
.selected-info::after {
    content: '•';
    color: var(--color-accent, #d4a853);
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-bold, 700);
    margin: 0 var(--space-2, 0.5rem);
}

/* ===================================================
   FORM FIELDS - ENHANCED WITH LABELS
   =================================================== */

.hp-form-row {
    display: flex;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.25rem);
    flex-wrap: wrap;
}

/* Form Group with Label */
.hp-form-group {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.hp-form-group.wide {
    flex: 2;
    min-width: 200px;
}

/* Form Labels - Colorful and Visible */
.hp-form-label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2, 0.5rem);
    position: relative;
    padding-left: var(--space-3, 0.75rem);
}

/* Gold accent line before label */
.hp-form-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: var(--gradient-accent, linear-gradient(135deg, #d4a853, #f59e0b));
    border-radius: var(--radius-full, 50px);
    box-shadow: 0 2px 4px rgba(212, 168, 83, 0.3);
}

/* Label icon */
.hp-form-label i {
    color: var(--color-accent, #d4a853);
    font-size: var(--text-base, 1rem);
    margin-right: var(--space-1, 0.25rem);
}

.hp-form-label.required::after {
    content: '*';
    color: var(--color-error, #dc2626);
    margin-left: 2px;
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-bold, 700);
}

/* Enhanced Input Fields - Colorful and Modern */
.hp-input {
    width: 100%;
    background: var(--surface-elevated, #ffffff);
    border: 2px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-lg, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-primary, #1e293b);
    font-size: var(--text-base, 1rem);
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    position: relative;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.04);
}

/* Input hover state */
.hp-input:hover {
    border-color: var(--border-default, #cbd5e1);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.08);
    transform: translateY(-1px);
}

/* Input focus state - Gold accent */
.hp-input:focus {
    outline: none;
    border-color: var(--color-accent, #d4a853);
    background: var(--surface-elevated, #ffffff);
    box-shadow: 
        0 0 0 4px rgba(212, 168, 83, 0.15),
        0 4px 12px rgba(212, 168, 83, 0.2),
        0 2px 4px rgba(30, 58, 95, 0.1);
    transform: translateY(-2px);
}

/* Input with value - subtle gold border */
.hp-input:not(:placeholder-shown) {
    border-color: rgba(212, 168, 83, 0.4);
    background: linear-gradient(to bottom, #ffffff, #fefdf9);
}

.hp-input-wide {
    flex: 2;
    min-width: 200px;
}

.hp-input::placeholder {
    color: var(--text-muted, #94a3b8);
    opacity: 0.7;
}

/* Input Error States */
.hp-input:invalid:not(:placeholder-shown) {
    border-color: var(--color-error, #dc2626);
    background: rgba(220, 38, 38, 0.05);
}

.hp-input:invalid:not(:placeholder-shown):focus {
    border-color: var(--color-error, #dc2626);
    box-shadow: 
        0 0 0 4px rgba(220, 38, 38, 0.15),
        0 4px 12px rgba(220, 38, 38, 0.1);
}

.hp-input:valid:not(:placeholder-shown) {
    border-color: var(--color-success, #059669);
    background: linear-gradient(to bottom, #ffffff, rgba(5, 150, 105, 0.02));
}

.hp-input:valid:not(:placeholder-shown):focus {
    border-color: var(--color-success, #059669);
    box-shadow: 
        0 0 0 4px rgba(5, 150, 105, 0.15),
        0 4px 12px rgba(5, 150, 105, 0.1);
}

/* Input icons (if needed) */
.hp-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hp-input-wrapper .hp-input-icon {
    position: absolute;
    left: var(--space-4, 1rem);
    color: var(--color-accent, #d4a853);
    font-size: var(--text-base, 1rem);
    pointer-events: none;
    z-index: 1;
}

.hp-input-wrapper .hp-input {
    padding-left: calc(var(--space-4, 1rem) + var(--space-5, 1.25rem) + var(--space-2, 0.5rem));
}

/* Field Hint Text */
.hp-field-hint {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #94a3b8);
    margin-top: var(--space-1, 0.25rem);
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    line-height: var(--leading-relaxed, 1.625);
}

.hp-field-hint i {
    color: var(--color-accent, #d4a853);
    font-size: 0.875rem;
}

/* ===================================================
   STRIPE CONTAINER - No Nested Scrolling
   =================================================== */

.hp-stripe-container {
    background: var(--surface-elevated, #ffffff);
    padding: var(--space-5, 1.25rem);
    border-radius: var(--radius-lg, 1rem);
    border: 2px solid var(--border-light, #e2e8f0);
    min-height: 200px;
    /* Prevent nested scrolling - let page handle scrolling */
    overflow: visible !important;
    max-height: none !important;
    margin-bottom: var(--space-6, 1.5rem);
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    position: relative;
}

/* Stripe mount point - no scrolling */
#hp-stripe-mount {
    overflow: visible !important;
    min-height: 280px;
    position: relative;
    width: 100%;
}

.hp-stripe-container:hover {
    border-color: var(--border-default, #cbd5e1);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.06);
}

.hp-stripe-container:focus-within {
    border-color: var(--color-accent, #d4a853);
    box-shadow: 0 0 0 4px rgba(212, 168, 83, 0.15);
    background: var(--surface-elevated, #ffffff);
}

/* Ensure Stripe Elements are properly styled */
.hp-stripe-container .StripeElement {
    padding: var(--space-3, 0.75rem);
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-default, 0.5rem);
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.hp-stripe-container .StripeElement--focus {
    border-color: var(--color-accent, #d4a853);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
}

.hp-stripe-container .StripeElement--invalid {
    border-color: var(--color-error, #dc2626);
}

.hp-stripe-container .StripeElement--complete {
    border-color: var(--color-success, #059669);
}

.hp-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    min-height: 120px;
    color: var(--text-muted, #94a3b8);
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
    padding: var(--space-5, 1.25rem);
    line-height: var(--leading-relaxed, 1.625);
}

.hp-loader i {
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-accent, #d4a853);
    opacity: 0.6;
}

.hp-loader i {
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-accent, #d4a853);
    opacity: 0.6;
}

/* ===================================================
   STRIPE PAYMENT CONTAINER
   =================================================== */

.hp-stripe-container {
    padding: var(--space-5, 1.25rem);
    background: var(--surface-elevated, #ffffff);
    border-radius: var(--radius-lg, 1rem);
    margin-bottom: var(--space-10, 2.5rem); /* Increased bottom margin for spacing from button */
    min-height: 200px;
    /* Prevent nested scrolling - let page handle scrolling */
    overflow: visible;
    position: relative;
}

#hp-stripe-mount {
    /* Ensure Stripe element container doesn't create scroll issues */
    overflow: visible;
    min-height: 280px;
    position: relative;
    width: 100%;
    margin-bottom: var(--space-4, 1rem); /* Extra margin before button */
}

/* Fix for Stripe Elements inside drawer - no nested scrolling */
.payment-drawer .hp-stripe-container {
    overflow: visible;
}

.payment-drawer #hp-stripe-mount {
    overflow: visible;
    /* Ensure Stripe element is visible and not clipped */
    min-height: 280px;
    margin-bottom: var(--space-6, 1.5rem); /* Extra margin before button in drawer */
}

/* Ensure Stripe Elements don't create their own scroll areas */
.payment-drawer .StripeElement,
.payment-drawer .StripeElement--focus,
.payment-drawer .StripeElement--complete,
.payment-drawer .StripeElement--invalid {
    overflow: visible !important;
}

/* Ensure Stripe iframe doesn't create scroll issues */
.payment-drawer .hp-stripe-container iframe,
.hp-stripe-container iframe {
    overflow: visible !important;
}

/* ===================================================
   ACTION BUTTONS
   =================================================== */

.hp-actions-compact {
    display: flex;
    gap: var(--space-4, 1rem);
    justify-content: center;
    align-items: center;
    padding-top: var(--space-8, 2rem); /* Increased top padding for spacing from Stripe */
    margin-top: var(--space-8, 2rem); /* Increased top margin for spacing from Stripe */
    border-top: 2px solid var(--border-light, #e2e8f0);
    position: relative;
    background: transparent;
    padding-bottom: var(--space-8, 2rem);
    margin-bottom: 0;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Sticky positioning for mobile - ensures button is always visible */
@media (max-width: 768px) {
    .hp-actions-compact {
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, var(--bg-secondary, #faf8f5) 95%, rgba(250, 248, 245, 0.98) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding-top: var(--space-5, 1.25rem);
        padding-bottom: var(--space-8, 2rem);
        margin-top: var(--space-5, 1.25rem);
        margin-left: calc(-1 * var(--space-4, 1rem));
        margin-right: calc(-1 * var(--space-4, 1rem));
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
        width: calc(100% + var(--space-8, 2rem));
        box-shadow: 
            0 -4px 16px rgba(30, 58, 95, 0.12),
            0 -2px 8px rgba(30, 58, 95, 0.08);
        border-top: 2px solid rgba(212, 168, 83, 0.2);
    }
    
    /* Ensure drawer content has enough bottom padding for sticky button */
    .drawer-content {
        padding-bottom: calc(var(--space-10, 2.5rem) + var(--space-20, 5rem)); /* Increased for better spacing */
    }
    
    .sanremo-compact-widget.drawer-open {
        margin-bottom: var(--space-16, 4rem);
    }
}

.hp-cancel-btn {
    background: var(--surface-elevated, #ffffff);
    border: 2px solid var(--border-light, #e2e8f0);
    color: var(--text-secondary, #475569);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full, 50px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-out, ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hp-cancel-btn:hover {
    background: var(--bg-secondary, #faf8f5);
    border-color: var(--border-default, #cbd5e1);
    color: var(--text-primary, #1e293b);
    transform: rotate(90deg);
}

.hp-cancel-btn i {
    font-size: var(--text-base, 1rem);
}

.hp-submit-btn {
    background: var(--gradient-accent-warm, linear-gradient(135deg, #fcd34d, #d97706));
    color: var(--color-primary-dark, #0f2744);
    border: none;
    padding: var(--space-4, 1rem) var(--space-8, 2rem);
    border-radius: var(--radius-full, 50px);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: var(--font-semibold, 600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-base, 1rem);
    transition: all var(--duration-normal, 250ms) var(--ease-out, ease-out);
    box-shadow: var(--shadow-accent, 0 4px 16px rgba(212, 168, 83, 0.3));
    flex: 1;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    min-height: 48px;
}

/* Shine effect on submit button */
.hp-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.hp-submit-btn:hover::before:not(:disabled) {
    left: 100%;
}

.hp-submit-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.4);
}

.hp-submit-btn:active:not(:disabled) {
    transform: translateY(-1px);
}

.hp-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.2);
}

.hp-submit-btn i {
    font-size: var(--text-base, 1rem);
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.hp-submit-btn:hover:not(:disabled) i {
    transform: translateX(2px);
}

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

@media (max-width: 992px) {
    .sanremo-info-strip {
        gap: var(--space-4, 1rem);
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }
    
    .info-text {
        font-size: var(--text-xs, 0.75rem);
    }
}

@media (max-width: 768px) {
    .sanremo-homepage-section.compact-mode {
        padding: var(--space-10, 2.5rem) 0;
    }

    .sanremo-section-intro.compact {
        margin-bottom: var(--space-4, 1rem);
    }

    .intro-badge {
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
        font-size: 0.65rem;
        margin-bottom: var(--space-3, 0.75rem);
    }

    .intro-title {
        font-size: var(--text-2xl, 1.5rem);
        margin-bottom: var(--space-2, 0.5rem);
    }

    .intro-description {
        font-size: var(--text-sm, 0.875rem);
    }

    .sanremo-info-strip {
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
        padding: var(--space-4, 1rem);
        border-radius: var(--radius-lg, 1rem);
    }

    .info-divider {
        display: none;
    }

    .widget-compact-row {
        flex-direction: column;
        gap: var(--space-4, 1rem);
        padding: var(--space-5, 1.25rem);
    }

    .ticket-selector {
        width: 100%;
        flex-direction: column;
        gap: var(--space-3, 0.75rem);
        padding: var(--space-4, 1rem);
    }
    
    .selector-label {
        font-size: var(--text-base, 1rem);
    }
    
    .ticket-buttons {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3, 0.75rem);
    }
    
    .hp-ticket-btn {
        flex: 1;
        padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
        min-width: 90px;
    }
    
    .t-amount {
        font-size: var(--text-lg, 1.125rem);
    }
    
    .hp-ticket-btn.active .t-amount {
        font-size: var(--text-xl, 1.25rem);
    }
    
    .t-count {
        font-size: 0.7rem;
        padding: 2px var(--space-1, 0.25rem);
    }
    
    .hp-form-row {
        flex-direction: column;
        gap: var(--space-4, 1rem);
    }
    
    .hp-form-group {
        width: 100%;
        min-width: 100%;
    }
    
    .hp-form-group.wide {
        width: 100%;
    }
    
    .hp-input, .hp-input-wide {
        width: 100%;
        min-width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .hp-form-label {
        font-size: var(--text-xs, 0.75rem);
        padding-left: var(--space-2, 0.5rem);
    }
    
    .hp-form-label i {
        font-size: var(--text-sm, 0.875rem);
    }
    
    .payment-drawer.open {
        max-height: 1000px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: var(--space-6, 1.5rem);
    }
    
    .drawer-content {
        padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
        padding-bottom: calc(var(--space-20, 5rem) + var(--space-10, 2.5rem));
        min-height: fit-content;
        gap: var(--space-4, 1rem);
    }
    
    .drawer-content form {
        padding-bottom: var(--space-6, 1.5rem);
        display: flex;
        flex-direction: column;
        gap: var(--space-5, 1.25rem);
    }
    
    /* Extra spacing for Stripe container on mobile */
    .hp-stripe-container {
        margin-bottom: var(--space-6, 1.5rem);
        max-height: 300px;
    }
    
    .form-header-compact {
        padding: var(--space-4, 1rem);
        margin-bottom: var(--space-5, 1.25rem);
    }
    
    .selected-info {
        font-size: var(--text-sm, 0.875rem);
        flex-direction: column;
        gap: var(--space-1, 0.25rem);
    }
    
    .selected-info strong {
        font-size: var(--text-base, 1rem);
        padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    }
    
    .selected-info::after {
        display: none;
    }
    
    .hp-form-row {
        margin-bottom: var(--space-5, 1.25rem);
    }
    
    .hp-stripe-container {
        padding: var(--space-4, 1rem);
        min-height: 140px;
        margin-bottom: var(--space-5, 1.25rem);
    }
    
    .hp-loader {
        min-height: 100px;
        padding: var(--space-4, 1rem);
    }
    
    /* Mobile-specific spacing for drawer when open */
    .sanremo-compact-widget.drawer-open {
        margin-bottom: var(--space-16, 4rem);
    }
    
    .hp-actions-compact {
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, var(--bg-secondary, #faf8f5) 95%, rgba(250, 248, 245, 0.98) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: var(--space-5, 1.25rem) var(--space-4, 1rem) var(--space-8, 2rem);
        margin-top: var(--space-5, 1.25rem);
        margin-bottom: 0;
        margin-left: calc(-1 * var(--space-4, 1rem));
        margin-right: calc(-1 * var(--space-4, 1rem));
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
        width: calc(100% + var(--space-8, 2rem));
        border-top: 2px solid rgba(212, 168, 83, 0.2);
        box-shadow: 
            0 -4px 16px rgba(30, 58, 95, 0.12),
            0 -2px 8px rgba(30, 58, 95, 0.08);
        gap: var(--space-3, 0.75rem);
    }
    
    .hp-submit-btn {
        padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
        font-size: var(--text-base, 1rem);
        min-height: 56px;
        width: 100%;
        max-width: 100%;
    }
    
    .hp-cancel-btn {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }
    
    /* Ensure section has enough space at bottom when drawer opens */
    .sanremo-homepage-section.compact-mode {
        padding-bottom: clamp(5rem, 15vh, 10rem);
        margin-bottom: var(--space-10, 2.5rem);
    }
    
    .sanremo-compact-widget {
        margin-bottom: var(--space-10, 2.5rem);
    }
    
    .sanremo-homepage-section.compact-mode .container {
        padding-bottom: var(--space-8, 2rem);
    }
    
    /* Extra padding for drawer content to accommodate sticky button */
    .drawer-content {
        padding-bottom: calc(var(--space-10, 2.5rem) + var(--space-16, 4rem));
    }
}

@media (max-width: 480px) {
    .payment-drawer.open {
        max-height: 900px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: var(--space-8, 2rem);
    }
    
    .drawer-content {
        padding: var(--space-5, 1.25rem) var(--space-3, 0.75rem);
        padding-bottom: calc(var(--space-24, 6rem) + var(--space-10, 2.5rem));
        gap: var(--space-4, 1rem);
        min-height: fit-content;
    }
    
    .drawer-content form {
        padding-bottom: var(--space-8, 2rem);
        gap: var(--space-5, 1.25rem);
    }
    
    /* Stripe container on very small screens */
    .hp-stripe-container {
        margin-bottom: var(--space-6, 1.5rem);
        max-height: 280px;
        padding: var(--space-4, 1rem);
    }
    
    .hp-actions-compact {
        padding: var(--space-5, 1.25rem) var(--space-3, 0.75rem) var(--space-10, 2.5rem);
        margin-left: calc(-1 * var(--space-3, 0.75rem));
        margin-right: calc(-1 * var(--space-3, 0.75rem));
        padding-left: var(--space-3, 0.75rem);
        padding-right: var(--space-3, 0.75rem);
        width: calc(100% + var(--space-6, 1.5rem));
        flex-direction: column-reverse;
        gap: var(--space-3, 0.75rem);
        box-shadow: 
            0 -6px 24px rgba(30, 58, 95, 0.15),
            0 -3px 12px rgba(30, 58, 95, 0.1);
        border-top: 2px solid rgba(212, 168, 83, 0.25);
    }
    
    .hp-submit-btn {
        width: 100%;
        order: -1;
        min-height: 56px;
        font-size: var(--text-base, 1rem);
        padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    }
    
    .hp-cancel-btn {
        align-self: flex-end;
        width: 48px;
        height: 48px;
    }
    
    .sanremo-homepage-section.compact-mode {
        padding-bottom: clamp(6rem, 20vh, 12rem);
        margin-bottom: var(--space-12, 3rem);
    }
    
    .sanremo-compact-widget {
        margin-bottom: var(--space-10, 2.5rem);
    }
    
    .sanremo-compact-widget.drawer-open {
        margin-bottom: var(--space-20, 5rem);
    }
    
    .sanremo-homepage-section.compact-mode {
        padding-bottom: clamp(7rem, 25vh, 14rem);
    }
    
    .sanremo-homepage-section.compact-mode .container {
        padding-bottom: var(--space-12, 3rem);
    }
    
    /* Ensure drawer has proper spacing on very small screens */
    .sanremo-compact-widget.drawer-open .payment-drawer.open {
        margin-bottom: 0;
    }
}

/* ===================================================
   FORM VALIDATION MESSAGES
   =================================================== */

.hp-field-error {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-error, #dc2626);
    margin-top: var(--space-1, 0.25rem);
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    font-weight: var(--font-medium, 500);
}

.hp-field-error i {
    font-size: 0.875rem;
}

.hp-field-success {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-success, #059669);
    margin-top: var(--space-1, 0.25rem);
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    font-weight: var(--font-medium, 500);
}

.hp-field-success i {
    font-size: 0.875rem;
}

/* ===================================================
   ACCESSIBILITY
   =================================================== */

@media (prefers-reduced-motion: reduce) {
    .hp-floating-icon,
    .hp-floating-note {
        animation: none;
    }
    
    .hp-ticket-btn,
    .hp-submit-btn,
    .hp-cancel-btn,
    .hp-input,
    .selected-info strong,
    .ticket-number-badge {
        transition: none;
        animation: none;
    }
    
    .hp-ticket-btn:hover,
    .ticket-number-badge:hover {
        transform: none;
    }
}

.hp-ticket-btn:focus-visible,
.hp-submit-btn:focus-visible,
.hp-cancel-btn:focus-visible,
.hp-input:focus-visible,
.hp-form-label:focus-visible,
.qty-btn:focus-visible {
    outline: 3px solid var(--color-accent, #d4a853);
    outline-offset: 3px;
    border-radius: var(--radius-lg, 1rem);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hp-ticket-btn,
    .qty-btn,
    .hp-submit-btn {
        border-width: 3px;
    }

    .hp-ticket-btn.active {
        border-width: 4px;
    }

    .info-item {
        border-width: 3px;
    }
}

/* Screen reader only content */
.live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}