@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Rajdhani:wght@500;700&display=swap');

:root {
    --primary: #00f2ff;
    /* Cyan Neon */
    --secondary: #bd00ff;
    /* Purple Neon */
    --accent: #2d55ff;
    /* Deep Blue */
    --bg-dark: #050510;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #a0a0c0;
    --success: #00ff9d;
    --error: #ff4d4d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(45, 85, 255, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(189, 0, 255, 0.2) 0%, transparent 40%);
}

/* Background Animation */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove 20s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px) translateZ(-200px);
    }
}

.container {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    margin: 2rem 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 3rem;
}

h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

h1 span {
    color: #fff;
    /* Tech Blaze '26 */
    -webkit-text-fill-color: #fff;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.date-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid var(--primary);
    border-radius: 50px;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

/* Glass Form */
.registration-form {
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.form-group {
    margin-bottom: 2rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

/* Event Selection Grid */
.events-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
}

.category-title {
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-title i {
    color: var(--secondary);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-checkbox:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.checkbox-wrapper input:checked~.custom-checkbox {
    background: rgba(189, 0, 255, 0.2);
    border-color: var(--secondary);
    box-shadow: 0 0 15px rgba(189, 0, 255, 0.2);
}

.checkmark {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checkbox-wrapper input:checked~.custom-checkbox .checkmark {
    background: var(--secondary);
    border-color: var(--secondary);
}

.checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    display: none;
}

.checkbox-wrapper input:checked~.custom-checkbox .checkmark::after {
    display: block;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 1.2rem;
    background: linear-gradient(45deg, var(--accent), var(--secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(189, 0, 255, 0.4);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #444;
}

/* Loading Animation */
.loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success/Error Messages */
#status-message {
    margin-top: 2rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-align: center;
    display: none;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

.success {
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
}

.error {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
}

/* Responsive */
@media (max-width: 600px) {
    h1 {
        font-size: 3rem;
    }

    .registration-form {
        padding: 1.5rem;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    /* Responsive Button Group */
    .btn-group {
        flex-direction: column-reverse;
        /* Stack buttons, Confirm on top of Back if preferred, or just column for standard order */
        gap: 1rem !important;
        /* Ensure gap is maintained */
        margin-top: 1.5rem !important;
    }

    .btn-group .submit-btn {
        width: 100%;
        margin-top: 0;
        /* Override default margin */
    }

    /* Ensure Back button looks like a secondary action */
    #backBtn {
        margin-top: 0;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* QR Code Container - Global */
.qr-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

/* QR Code Container - Desktop Effects */
/* Default Mobile Style (Clean, no blur) */
.qr-image {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 2px solid white;
    transition: all 0.3s ease;
}

.qr-overlay {
    display: none;
    /* Hide overlay on mobile */
}

.qr-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 500px;
    border-radius: 12px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 50px rgba(0, 242, 255, 0.3);
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* Close Button */
.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

.modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
}


/* Desktop Only Effects (Min Width 1024px) */
@media (min-width: 1024px) {
    .qr-container {
        /* Desktop specific hover effects can stay or be global? Let's just keep the hover effects here if we want, but the layout MUST be global. 
           Actually, the instruction is to move the container logic OUT. 
           So I will delete it here and add it above.
        */
    }

    .qr-image {
        /* Initial Blur */
        filter: blur(8px);
        width: 100%;
        height: 100%;
    }

    .qr-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        color: white;
        font-weight: bold;
        opacity: 1;
        /* Always visible to indicate action, or 0 to show on hover */
        transition: opacity 0.3s ease;
        text-align: center;
        font-size: 0.9rem;
        gap: 5px;
    }

    .qr-container:hover .qr-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .qr-container:hover .qr-image {
        transform: scale(1.1);
    }
}

/* Interactive UPI Link */
.upi-link {
    color: var(--primary);
    cursor: pointer;
    border-bottom: 1px dashed var(--primary);
    transition: all 0.3s ease;
    padding-bottom: 2px;
}

.upi-link:hover {
    color: #fff;
    border-bottom-style: solid;
    text-shadow: 0 0 10px var(--primary);
}

.upi-link i {
    margin-left: 5px;
    font-size: 0.9em;
}

.dis-con {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}