/* Lottie's Competitions - Magenta Pink & Black TikTok Theme */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    color: #fff;
    background: #000000;
    min-height: 100vh;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Main Content */
.main-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

/* Purchase Section */
.purchase-section {
    width: 100%;
    max-width: 100%;
}

.purchase-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Header */
.purchase-header {
    text-align: center;
    margin-bottom: 48px;
}

.logo h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #ff1493;
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.logo p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ticket Card */
.ticket-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
    border-radius: 24px;
    box-shadow: 
        0 10px 40px rgba(255, 20, 147, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 3px solid #ff1493;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.ticket-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Jellycat pattern */
        radial-gradient(circle at 15% 15%, rgba(255, 182, 193, 0.3) 8px, transparent 8px), /* Light Pink Jellycat */
        radial-gradient(circle at 35% 25%, rgba(173, 216, 230, 0.3) 6px, transparent 6px), /* Light Blue Jellycat */
        radial-gradient(circle at 55% 20%, rgba(144, 238, 144, 0.3) 7px, transparent 7px), /* Light Green Jellycat */
        radial-gradient(circle at 75% 30%, rgba(255, 218, 185, 0.3) 8px, transparent 8px), /* Peach Jellycat */
        radial-gradient(circle at 85% 15%, rgba(221, 160, 221, 0.3) 6px, transparent 6px), /* Plum Jellycat */
        radial-gradient(circle at 25% 45%, rgba(255, 255, 224, 0.3) 7px, transparent 7px), /* Light Yellow Jellycat */
        radial-gradient(circle at 45% 50%, rgba(250, 128, 114, 0.3) 8px, transparent 8px), /* Salmon Jellycat */
        radial-gradient(circle at 65% 40%, rgba(176, 196, 222, 0.3) 6px, transparent 6px), /* Light Steel Blue Jellycat */
        radial-gradient(circle at 80% 55%, rgba(152, 251, 152, 0.3) 7px, transparent 7px), /* Pale Green Jellycat */
        radial-gradient(circle at 20% 70%, rgba(255, 192, 203, 0.3) 8px, transparent 8px), /* Pink Jellycat */
        radial-gradient(circle at 40% 75%, rgba(230, 230, 250, 0.3) 6px, transparent 6px), /* Lavender Jellycat */
        radial-gradient(circle at 60% 65%, rgba(255, 228, 196, 0.3) 7px, transparent 7px), /* Bisque Jellycat */
        radial-gradient(circle at 85% 80%, rgba(175, 238, 238, 0.3) 8px, transparent 8px), /* Pale Turquoise Jellycat */
        radial-gradient(circle at 10% 85%, rgba(255, 160, 122, 0.3) 6px, transparent 6px), /* Light Salmon Jellycat */
        radial-gradient(circle at 30% 90%, rgba(240, 248, 255, 0.3) 7px, transparent 7px), /* Alice Blue Jellycat */
        radial-gradient(circle at 50% 85%, rgba(255, 182, 193, 0.3) 8px, transparent 8px), /* Light Pink Jellycat */
        radial-gradient(circle at 70% 90%, rgba(144, 238, 144, 0.3) 6px, transparent 6px), /* Light Green Jellycat */
        radial-gradient(circle at 90% 95%, rgba(255, 218, 185, 0.3) 7px, transparent 7px), /* Peach Jellycat */
        /* Gradient overlay */
        linear-gradient(135deg, rgba(255, 20, 147, 0.02) 0%, transparent 50%, rgba(255, 20, 147, 0.01) 100%);
    background-size: 
        80px 80px, 60px 60px, 70px 70px, 85px 85px, 55px 55px,
        75px 75px, 90px 90px, 65px 65px, 80px 80px, 85px 85px,
        60px 60px, 75px 75px, 90px 90px, 55px 55px, 70px 70px,
        80px 80px, 65px 65px, 75px 75px, 100% 100%;
    background-position:
        0 0, 20px 20px, 40px 10px, 60px 30px, 80px 15px,
        10px 40px, 30px 50px, 50px 35px, 70px 45px, 90px 55px,
        15px 65px, 35px 70px, 55px 60px, 75px 75px, 95px 85px,
        5px 80px, 25px 90px, 45px 85px, 0 0;
    animation: jellycatFloat 20s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes jellycatFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: translateY(-3px) rotate(0.5deg);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-1px) rotate(-0.5deg);
        opacity: 0.5;
    }
    75% { 
        transform: translateY(-2px) rotate(0.3deg);
        opacity: 0.6;
    }
}

.ticket-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 20px 60px rgba(255, 20, 147, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.12);
    border-color: #ff1493;
}

.ticket-info {
    padding: 40px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ticket-details h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.ticket-description {
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 32px;
    line-height: 1.5;
    font-weight: 500;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.ticket-serial {
    font-size: 0.875rem;
    color: #ff1493;
    font-family: 'Space Grotesk', monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.ticket-pricing {
    text-align: center;
    margin-bottom: 32px;
}

.price-main {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: #ff1493;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-shadow: 0 2px 4px rgba(255, 20, 147, 0.2);
}



.payment-badges-small {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.payment-badge-small {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    color: white;
    text-align: center;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.payment-badge-small:hover {
    opacity: 1;
}

.payment-badge-small.visa {
    background: linear-gradient(135deg, #1a1f71 0%, #2d4de0 100%);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    min-width: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(26, 31, 113, 0.3);
}

.payment-badge-small.mastercard {
    background: linear-gradient(135deg, #eb001b 0%, #ff5f00 50%, #f79e1b 100%);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    min-width: 55px;
    font-size: 0.7rem;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 8px rgba(235, 0, 27, 0.3);
}

.payment-badge-small.amex {
    background: linear-gradient(135deg, #006fcf 0%, #0099e0 100%);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    min-width: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(0, 111, 207, 0.3);
}

.payment-badge-small.apple-pay {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    font-size: 1.2rem;
    min-width: 45px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.payment-badge-small.google-pay {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 25%, #fbbc04 50%, #ea4335 75%, #4285f4 100%);
    font-size: 1.1rem;
    min-width: 45px;
    box-shadow: 0 3px 8px rgba(66, 133, 244, 0.3);
}

.stripe-powered {
    margin-top: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stripe-logo {
    background: linear-gradient(135deg, #635bff 0%, #4f46e5 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.5px;
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.3);
    transition: all 0.3s ease;
}

.stripe-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.4);
}

.stripe-text {
    text-transform: lowercase;
    font-style: italic;
    position: relative;
}

.stripe-text::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    width: 2px;
    height: 12px;
    background: white;
    transform: translateY(-50%) skew(-15deg);
    opacity: 0.8;
}

.powered-text {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Prominent Purchase Button */
.prominent-purchase-section {
    padding: 0;
    margin: 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, #ff1493 0%, #ff0080 100%);
    position: relative;
    box-shadow: 
        0 8px 32px rgba(255, 20, 147, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: prominentGlow 4s ease-in-out infinite;
}

@keyframes prominentGlow {
    0%, 100% { 
        box-shadow: 
            0 8px 32px rgba(255, 20, 147, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% { 
        box-shadow: 
            0 12px 48px rgba(255, 20, 147, 0.6),
            0 0 20px rgba(255, 20, 147, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

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

.prominent-purchase-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: 0;
    background: linear-gradient(135deg, #ff1493, #ff0080, #ff1493);
    background-size: 200% 200%;
    border-radius: 26px 26px 0 0;
    z-index: -1;
    animation: borderPulse 3s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes borderPulse {
    0%, 100% { 
        background-position: 0% 50%;
        opacity: 0.3;
    }
    50% { 
        background-position: 100% 50%;
        opacity: 0.6;
    }
}

.prominent-buy-btn {
    width: 100%;
    background: none;
    border: none;
    color: white;
    padding: 24px 32px;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.prominent-buy-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.6s ease;
}

.prominent-buy-btn:hover::before {
    left: 100%;
}

.prominent-buy-btn:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.prominent-buy-btn:active {
    transform: scale(0.98);
}

.btn-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.prominent-buy-btn:hover .btn-icon {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(5deg) scale(1.1);
}

.btn-content {
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
}

.btn-main-text {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.btn-arrow {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.prominent-buy-btn:hover .btn-arrow {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
}

/* Old buy ticket button - now hidden/removed */
.buy-ticket-btn {
    display: none;
}

.buy-ticket-btn:active {
    transform: translateY(0);
}

/* Payment Section */
.payment-section {
    min-height: 100vh;
    padding: 40px 0;
    background: #000000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.payment-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.payment-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
}

.back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #ff1493;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    padding: 10px 16px;
    border-radius: 8px;
}

.back-btn:hover {
    background: #ff1493;
    transform: translateY(-50%) translateX(-2px);
}

.payment-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #ff1493;
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.payment-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    font-weight: 500;
}

.payment-form-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

.form-section {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid #ff1493;
}

.form-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff1493;
    margin-bottom: 24px;
    letter-spacing: -0.025em;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: white;
    transition: all 0.3s ease;
    color: #1a1a1a;
    font-weight: 500;
}

.form-group input:focus {
    outline: none;
    border-color: #ff1493;
    box-shadow: 0 0 0 4px rgba(255, 20, 147, 0.1);
    transform: translateY(-1px);
}

.form-group input:hover {
    border-color: #ff1493;
    transform: translateY(-1px);
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    overflow: hidden;
}

.payment-option:hover {
    border-color: #ff1493;
    background: rgba(255, 20, 147, 0.02);
    transform: translateX(4px);
}

.payment-option:has(input[type="radio"]:checked) {
    border-color: #ff1493;
    background: rgba(255, 20, 147, 0.05);
}

.payment-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    flex-shrink: 0;
    min-width: 120px;
}

.payment-logo {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    text-align: center;
    min-width: 35px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visa-logo {
    background: linear-gradient(135deg, #1a1f71 0%, #2d4de0 100%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(26, 31, 113, 0.3);
}

.mastercard-logo {
    background: linear-gradient(135deg, #eb001b 0%, #ff5f00 50%, #f79e1b 100%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(235, 0, 27, 0.3);
}

.amex-logo {
    background: linear-gradient(135deg, #006fcf 0%, #0099e0 100%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 111, 207, 0.3);
}

.apple-pay-logo {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    color: white;
    font-size: 1.2rem;
    width: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.google-pay-logo {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 25%, #fbbc04 50%, #ea4335 75%, #4285f4 100%);
    color: white;
    font-size: 1rem;
    width: 40px;
    box-shadow: 0 2px 6px rgba(66, 133, 244, 0.3);
}

.paypal-logo {
    background: linear-gradient(135deg, #0070ba 0%, #009cde 100%);
    color: white;
    font-size: 1rem;
    width: 40px;
    box-shadow: 0 2px 6px rgba(0, 112, 186, 0.3);
}

.klarna-logo {
    background: linear-gradient(135deg, #ffb3c7 0%, #ff8fab 100%);
    color: #0d0d0d;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: lowercase;
    box-shadow: 0 2px 6px rgba(255, 179, 199, 0.4);
}

.afterpay-logo {
    background: linear-gradient(135deg, #b2fce4 0%, #8ffcd3 100%);
    color: #00a68f;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: capitalize;
    box-shadow: 0 2px 6px rgba(178, 252, 228, 0.4);
}

.payment-info {
    flex: 1;
}

.payment-info span {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 2px;
}

.payment-info small {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.payment-radio {
    display: flex;
    align-items: center;
}

.payment-radio input[type="radio"] {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    margin: 0;
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.payment-radio input[type="radio"]:checked {
    border-color: #ff1493;
    background: #ff1493;
    box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.2);
}

.payment-radio input[type="radio"]:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.payment-radio label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Order Summary - Raffle Ticket Style */
.order-summary {
    background: #fff;
    border: 3px solid #ff1493;
    border-radius: 0;
    padding: 24px;
    position: sticky;
    top: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: visible;
    clip-path: polygon(
        0% 0%, 
        calc(0% + 15px) 0%, 
        calc(0% + 15px) 10px, 
        calc(0% + 30px) 10px,
        calc(0% + 30px) 0%,
        100% 0%, 
        100% 100%, 
        calc(0% + 30px) 100%,
        calc(0% + 30px) calc(100% - 10px), 
        calc(0% + 15px) calc(100% - 10px),
        calc(0% + 15px) 100%,
        0% 100%
    );
}

.order-summary::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        #ff1493 0px,
        #ff1493 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.4;
}

.order-summary::after {
    content: 'ADMIT ONE';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ff1493;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ticket-number {
    position: absolute;
    top: 8px;
    right: 16px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ff1493;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.order-summary h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ff1493;
    margin-bottom: 20px;
    margin-top: 24px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.summary-content {
    margin-bottom: 32px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    color: #333;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

.summary-divider {
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #ff1493 0px,
        #ff1493 10px,
        transparent 10px,
        transparent 20px
    );
    margin: 16px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-weight: 800;
    font-size: 1.4rem;
    color: #ff1493;
    border-top: 2px solid #ff1493;
    margin-top: 16px;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.complete-purchase-btn {
    width: 100%;
    background: #ff1493;
    color: white;
    border: 2px solid #ff1493;
    padding: 16px 24px;
    border-radius: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 20px;
    box-shadow: 0 3px 6px rgba(255, 20, 147, 0.3);
}

.complete-purchase-btn:hover {
    transform: translateY(-3px);
    background: #ff1493;
    box-shadow: 0 12px 30px rgba(255, 20, 147, 0.4);
}

.complete-purchase-btn:active {
    transform: translateY(-1px);
}

.security-badges {
    margin-top: 20px;
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.security-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.security-text i {
    color: #10b981;
    font-size: 1rem;
}

.stripe-powered-large {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.stripe-logo-large {
    background: linear-gradient(135deg, #635bff 0%, #4f46e5 100%);
    color: white;
    padding: 6px 20px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
    box-shadow: 0 3px 10px rgba(99, 91, 255, 0.3);
    transition: all 0.3s ease;
}

.stripe-logo-large:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(99, 91, 255, 0.4);
}

.stripe-text-large {
    text-transform: lowercase;
    font-style: italic;
    position: relative;
}

.stripe-text-large::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 3px;
    height: 16px;
    background: white;
    transform: translateY(-50%) skew(-15deg);
    opacity: 0.9;
}



/* Utility Classes */
.hidden {
    display: none !important;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-content p {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 32px;
    color: #ff1493;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #ff1493;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 32px;
}

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

/* Success Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.modal-content {
    background: white;
    padding: 48px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid #ff1493;
}

.modal-header {
    margin-bottom: 32px;
}

.success-icon {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.3));
}

.modal-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ff1493;
    letter-spacing: -0.025em;
}

.modal-body p {
    margin-bottom: 16px;
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
}

.modal-body p:first-child {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1.2rem;
}

.modal-btn {
    background: #ff1493;
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 32px;
    font-size: 1.1rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.modal-btn:hover {
    transform: translateY(-2px);
    background: #ff1493;
    box-shadow: 0 10px 30px rgba(255, 20, 147, 0.4);
}

.modal-btn.secondary {
    background: #6b7280;
    color: white;
}

.modal-btn.secondary:hover {
    background: #4b5563;
    box-shadow: 0 10px 30px rgba(107, 114, 128, 0.4);
}

.modal-btn.primary {
    background: #ff1493;
    color: white;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    transition: color 0.3s ease;
}

.modal-close-btn:hover {
    color: #ff1493;
}

.customer-icon {
    font-size: 3rem;
    color: #ff1493;
    margin-bottom: 1rem;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* Quick Form Styles */
.quick-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.quick-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: white;
    transition: all 0.3s ease;
    color: #1a1a1a;
    font-weight: 500;
}

.quick-form-group input:focus {
    outline: none;
    border-color: #ff1493;
    box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.1);
    transform: translateY(-1px);
}

.quick-form-group input:hover {
    border-color: #ff1493;
}

.quick-form-group input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Error states for quick form */
.quick-form-group input.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.quick-form-group .error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 4px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .payment-form-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .order-summary {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .logo h1 {
        font-size: 2.5rem;
    }
    
    .ticket-info {
        padding: 24px;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .ticket-pricing {
        text-align: center;
    }
    
    .price-main {
        font-size: 2.25rem;
    }
    
    .payment-header h2 {
        font-size: 1.75rem;
    }
    
    .back-btn {
        position: static;
        transform: none;
        justify-content: flex-start;
        margin-bottom: 24px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-section {
        padding: 24px;
    }
    
    .order-summary {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 20px 0;
    }
    
    .purchase-header {
        margin-bottom: 32px;
    }
    
    .logo h1 {
        font-size: 2rem;
    }
    
    .logo p {
        font-size: 1rem;
    }
    
    .ticket-info {
        padding: 20px;
    }
    
    .ticket-details h2 {
        font-size: 1.5rem;
    }
    
    .price-main {
        font-size: 2rem;
    }
    
    .payment-container {
        padding: 0;
    }
    
    .payment-form-container {
        gap: 24px;
    }
    
    .modal-content {
        padding: 32px 24px;
        margin: 16px;
    }
    
    .form-section {
        padding: 20px;
    }
    
    .order-summary {
        padding: 20px;
    }
}

/* Error States */
.form-group input.error {
    border-color: #ff1493 !important;
    box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.2) !important;
}

.error-message {
    color: #ff1493;
    font-size: 0.875rem;
    margin-top: 6px;
    font-weight: 600;
}

/* Focus states for accessibility */
button:focus-visible,
input:focus-visible {
    outline: 2px solid #ff1493;
    outline-offset: 2px;
}