/* ========================================
   Technikcamps Site-Specific Styles
   ======================================== */

:root {
    --color-space-deep: #060913;
    /* Deeper, more premium dark space */
    --color-space-light: #131B2F;
    /* Rich navy */
    --color-accent: #E9C46A;
    /* Premium Cyber Gold */
    --color-text: #F0F2F5;
    /* Crisp, readable off-white */

    /* Shared compatibility: shared_style.css references these */
    --color-blue: #38BDF8;
    /* Electric sky blue for readability on dark surfaces */
    --font-main: 'Outfit', sans-serif;
    --glass-bg: rgba(19, 27, 47, 0.5);
    --glass-border: rgba(233, 196, 106, 0.15);
    /* Gold tinted glass border */
    --color-sky-top: #060913;
    --color-sky-bottom: #131B2F;
}

body:not(.night-mode) {
    --color-space-deep: #F8F6F2;
    /* Cream/off-white background */
    --color-space-light: #FFFFFF;
    /* Pure white surfaces */
    --color-accent: #0F172A;
    /* Deep indigo/slate for premium accents */
    --color-text: #1E293B;
    /* Slate dark text */

    /* Shared compatibility: shared_style.css references these */
    --color-blue: #0F172A;
    /* Deep slate brand color */
    --glass-bg: rgba(255, 255, 255, 0.75);
    /* Frosted white glass */
    --glass-border: rgba(15, 23, 42, 0.08);
    /* Indigo/slate tinted glass border */
    --color-sky-top: #F1F5F9;
    --color-sky-bottom: #E2E8F0;
}

body {
    background-color: var(--color-space-deep);
    color: var(--color-text);
}

/* Space Canvas */
#space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Model Viewer Styles */
#earth-model {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform: scale(0.6);
}

.space-station-parallax {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.space-station-wrapper {
    position: absolute;
    top: 5%;
    right: -10%;
    width: 400px;
    height: 400px;
}

.space-station-model {
    width: 100%;
    height: 100%;
}

.astronaut-wrapper {
    position: fixed;
    width: 800px;
    height: 1600px;
    margin-top: -400px;
    z-index: 100;
    pointer-events: none;
    will-change: transform, opacity;
}

.astronaut-custom-model {
    width: 300px;
    height: 300px;
    margin: 400px auto 0 auto;
    display: block;
    object-fit: contain;
    animation: float 4s ease-in-out infinite;
    transform-origin: center center;
    transition: transform 0.5s ease;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1.5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.astronaut-custom-model.waving {
    animation: wave-body 1.5s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes wave-body {

    0%,
    100% {
        transform: rotate(0deg) translateY(-5px);
    }

    15% {
        transform: rotate(8deg) translateY(-8px);
    }

    30% {
        transform: rotate(-8deg) translateY(-5px);
    }

    45% {
        transform: rotate(8deg) translateY(-8px);
    }

    60% {
        transform: rotate(-8deg) translateY(-5px);
    }

    75% {
        transform: rotate(8deg) translateY(-8px);
    }
}

.astronaut-custom-model.somersaulting {
    animation: somersault-body 3s ease-in-out;
}

@keyframes somersault-body {
    0% {
        transform: translateY(0) rotate(0deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-40px) rotate(180deg) rotateY(180deg);
    }

    100% {
        transform: translateY(0) rotate(360deg) rotateY(360deg);
    }
}

/* Aurora Glows */
.aurora-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.aurora-glow-station {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #5BC0BE 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aurora-glow-astro {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 50;
    text-align: center;
    margin-bottom: 50px;
}

.hero-slogan-mask {
    width: clamp(250px, 50vw, 550px);
    aspect-ratio: 238 / 35;
    margin: 0 auto 20px;
    -webkit-mask-image: url('../assets/SloganWhite.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('../assets/SloganWhite.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.25));
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-info {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero-uni-logo {
    position: absolute;
    bottom: 40px;
    right: 40px;
    left: auto;
    z-index: 50;
}

.hero-uni-logo img {
    height: 60px;
    width: auto;
    opacity: 0.8;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    opacity: 0.6;
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0);
    }

    40% {
        transform: translate(-50%, -10px);
    }

    60% {
        transform: translate(-50%, -5px);
    }
}

/* Aurora Logo Masks */
.aurora-logo-mask {
    position: relative;
    overflow: hidden;
}

/* 3D Glass Logo */
.nav-logo-3d-container {
    perspective: 1000px;
    display: inline-block;
    cursor: pointer;
}

#nav-logo-canvas {
    width: 400px;
    height: 280px;
    display: block;
    cursor: pointer;
}

.footer-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    text-align: center;
}


.footer-logo img {
    margin-bottom: -10px !important;
}

.footer-slogan-mask {
    width: 156px;
    height: 50px;
    -webkit-mask-image: url('../assets/SloganWhite.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('../assets/SloganWhite.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.footer-uni-logo {
    height: 45px;
    width: auto;
}

.aurora-logo-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #5BC0BE, #3a7bd5, #00d2ff, #8a2be2, #FF00FF, #5BC0BE);
    background-size: 200% auto;
    animation: auroraGradient 6s linear infinite;
}

body:not(.night-mode) .aurora-logo-gradient {
    background: linear-gradient(120deg, #ff4a4a, #ff7e15, #ffaa00, #ffea00, #ff4a4a);
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Fix event grid for space theme */
.sky-section {
    background: transparent;
}

.intro-section h1 {
    color: var(--color-accent);
}

.event-card {
    background: #ffffff !important;
    color: #111 !important;
    border: none !important;
    border-radius: 4px !important;
    position: relative;
    overflow: visible;

    /* Transitions: Box shadow stays in CSS, but transform is now smoothed by JS Lerp */
    transition:
        box-shadow 0.4s ease !important;

    transform-style: preserve-3d;
    will-change: transform;

    background: radial-gradient(circle at var(--posx, 50%) var(--posy, 50%),
            #ffffff 0%,
            #f0f2f5 100%) top left / 100% calc(100% - 75px) no-repeat !important;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.05),
        0 10px 30px rgba(0, 0, 0, 0.08) !important;

    padding-bottom: 75px !important;
    /* Space for strips inside the element */

    /* Top and side ticket cutouts - Correctly composited */
    -webkit-mask-image:
        radial-gradient(circle at 50% 0%, transparent 35px, black 36px),
        radial-gradient(circle at 0% calc(100% - 75px), transparent 20px, black 21px),
        radial-gradient(circle at 100% calc(100% - 75px), transparent 20px, black 21px),
        radial-gradient(circle at 50% calc(100% - 75px), transparent 4px, black 5px);
    -webkit-mask-composite: source-in;
    /* Intersect all mask layers */
    mask-composite: intersect;
    -webkit-mask-size:
        100% 100%,
        100% 100%,
        100% 100%,
        calc(100% / 30) 100%;
    -webkit-mask-position:
        center,
        center,
        center,
        left center;
    -webkit-mask-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x;

    overflow: visible !important;
}

.event-card:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
    z-index: 100;
    cursor: default;
}

/* Moving Diagonal Shadow & Shine */
.event-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 75px;
    /* Constrain to card body */
    width: 300%;
    /* Wider for translation */
    left: -100%;
    background:
        /* The Dark Shadow Line - More realistic and subtle */
        linear-gradient(115deg,
            transparent calc(var(--posx, 50%) - 30%),
            rgba(0, 0, 0, 0.03) calc(var(--posx, 50%) - 15%),
            rgba(0, 0, 0, 0.12) var(--posx, 50%),
            rgba(0, 0, 0, 0.03) calc(var(--posx, 50%) + 15%),
            transparent calc(var(--posx, 50%) + 30%)),
        /* The Bright Shine Line - Narrower and sharper */
        linear-gradient(115deg,
            transparent calc(var(--posx, 50%) - 15%),
            rgba(255, 255, 255, 0.2) calc(var(--posx, 50%) - 2%),
            rgba(255, 255, 255, 1) var(--posx, 50%),
            rgba(255, 255, 255, 0.2) calc(var(--posx, 50%) + 2%),
            transparent calc(var(--posx, 50%) + 15%));

    /* Removed translateX because the gradient stops move instead */
    pointer-events: none;
    z-index: 3;
}

.event-card:hover::after {
    opacity: 1;
}

/* Holographic Logo Overlay for Ticket */
.event-card .holo-logo-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    background: #111;
    border-radius: 50%;
    margin-bottom: 15px;
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 75px;
    /* Constrain to card body */
    z-index: 4;
    /* Move on top of shine for synergy */
    pointer-events: none;

    /* Rainbow Base */
    --space: 5%;
    --red: hsl(0, 100%, 50%);
    --orange: hsl(30, 100%, 50%);
    --yellow: hsl(60, 100%, 50%);
    --green: hsl(120, 100%, 50%);
    --cyan: hsl(180, 100%, 50%);
    --blue: hsl(222, 100%, 50%);
    --purple: hsl(258, 100%, 50%);
    --magenta: hsl(300, 100%, 50%);
    background-image: repeating-linear-gradient(-45deg,
            var(--red) 0%,
            var(--orange) calc(var(--space) * 1),
            var(--yellow) calc(var(--space) * 2),
            var(--green) calc(var(--space) * 3),
            var(--cyan) calc(var(--space) * 4),
            var(--blue) calc(var(--space) * 5),
            var(--purple) calc(var(--space) * 6),
            var(--magenta) calc(var(--space) * 7),
            var(--red) calc(var(--space) * 8));
    background-size: 150vw 150vh;
    background-position: calc(var(--rx, 0deg) * -100) calc(var(--ry, 0deg) * -100);

    /* --- TICKET WATERMARK SETTINGS --- */
    --grid-width: 50px;
    --grid-height: 70px;

    /* HOLO-LIGHT SYNERGY: Moving mask that follows the shine */
    -webkit-mask-image:
        /* Layer 0: The Logo Grid (Base layer) */
        url('../assets/LogoWhite.svg'),
        /* Layer 1: The Moving Shine Mask (Controls Layer 2) */
        linear-gradient(115deg, transparent calc(var(--posx, 50%) - 20%), black var(--posx, 50%), transparent calc(var(--posx, 50%) + 20%)),
        /* Layer 2: Dimmed layer (0.1 alpha) */
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));

    /* Logic: (L1 source-over L2) creates a field of 0.1 alpha, peaking at 1.0 at the shine.
              Then L0 source-in (that field) applies the logos to it! */
    -webkit-mask-composite: source-in, source-over;
    mask-composite: intersect, add;

    -webkit-mask-size:
        var(--grid-width) var(--grid-height),
        100% 100%,
        100% 100%;

    -webkit-mask-position:
        0 0,
        0 0,
        0 0;

    -webkit-mask-repeat: repeat, no-repeat, no-repeat;

    /* Multiply works best to 'dye' a white background with rainbow colors */
    mix-blend-mode: multiply;
    opacity: calc(var(--o, 0) * 0.4);
    /* Higher base opacity when active */
    pointer-events: none;
    z-index: 4;
}

.event-card .event-title {
    color: #111827 !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    filter: none !important;
    position: relative;
    z-index: 5;
}

.event-card .event-description {
    color: #111827 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    position: relative;
    z-index: 5;
}

.event-card .detail-item,
.event-card .detail-item span {
    color: #111827 !important;
    font-weight: 500 !important;
}

.event-card .detail-icon {
    stroke: #111827 !important;
}

/* Stamped Badges for Ticket Mode */
/* Stamped Badges for Ticket Mode */
.event-card .teamer-badge {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.event-card .submit-btn,
.event-card button.submit-btn {
    background: #f1f5f9 !important;
    border: 2px solid #e2e8f0 !important;
    color: #1e293b !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.event-card .submit-btn:hover,
.event-card button.submit-btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
    box-shadow: none !important;
    transform: none !important;
}

.event-card .event-actions {
    border-top: 2px dashed rgba(0, 0, 0, 0.1) !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
    position: relative;
}

/* Premium Ticket Tear-off Strips */
.ticket-strips {
    position: absolute;
    bottom: 15px;
    /* Moved up to perfectly touch the calc(100% - 75px) line */
    left: 0;
    /* Span full width to align perfectly with repeat-x mask */
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 20;
    gap: 0;
    /* Remove gap to ensure mathematical alignment of 10% widths */
}

.ticket-strip {
    flex: 1;
    height: 60px;
    background: #fdfdfd;
    border-bottom: 1px solid #d0d0d0;
    border-right: 1px dashed #d0d0d0;
    /* Perforation line between strips */
    position: relative;
    transition: all 0.8s cubic-bezier(0.5, 0, 0.1, 1);
    transform-origin: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The mask on .event-card cleanly cuts the top border, so we don't need a top border */
}

.ticket-strip:last-child {
    border-right: none;
}

/* Hide the old manual hole spans since we use unified transparent mask cutouts now */
.ticket-strip .tear-line {
    display: none;
}

.ticket-strip .strip-content {
    font-size: 8px;
    font-weight: 800;
    color: #888;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tearing Animation (Peel Downward) */
.ticket-strip.torn {
    transform: rotateX(-120deg) translateY(10px);
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
}

/* Matching Perforation on the Card itself */
.event-card::after {
    /* (Existing shine logic) */
}

/* Add jagged bottom edge to card */
.event-card .event-actions {
    position: relative;
}

/* Hide the old fake jagged bottom edge since we use the transparent mask now */
.event-card .event-actions::after {
    display: none;
}

/* SOLD OUT Stamp */
.event-card.sold-out::after {
    content: 'AUSVERKAUFT';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(239, 35, 60, 0.4);
    border: 5px solid rgba(239, 35, 60, 0.4);
    padding: 10px 20px;
    pointer-events: none;
    z-index: 100;
    text-transform: uppercase;
}

/* Remove KinderUni orange glow */
.event-card:hover .card-glow {
    display: none !important;
}

/* Removed old color overrides for event title and details to ensure consistent #111827 readability */

/* ========================================
   Overrides for Shared Styles
   Ensuring Kinderuni styles do not bleed through
   ======================================== */

/* Remove background from logos and images */
img,
.logo,
.event-card img {
    background: transparent !important;
}

/* Force Technikcamps buttons and links */
button:not(.hamburger):not(.logout-btn):not(.admin-tab):not(.theme-toggle-btn),
.btn,
.auth-submit-btn,
.button,
.scenery-action-btn,
.action-btn {
    background: var(--color-accent) !important;
    color: var(--color-space-deep) !important;
    border: 2px solid var(--color-accent) !important;
}

button:not(.hamburger):not(.logout-btn):not(.admin-tab):not(.theme-toggle-btn):hover,
.btn:hover,
.auth-submit-btn:hover,
.button:hover,
.scenery-action-btn:hover,
.action-btn:hover {
    background: var(--color-white) !important;
    color: var(--color-space-deep) !important;
    border-color: var(--color-white) !important;
}

a,
.link {
    color: var(--color-accent) !important;
}

/* Fix badges and tags to use Technikcamps colors with premium contrast and semantic differentiation */
.teamer-badge {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--color-text) !important;
}

.status-badge.status-confirmed {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #34D399 !important;
}

.status-badge.status-waiting {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #FBBF24 !important;
}

.status-badge.status-registered {
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38BDF8 !important;
}

.role-badge.role-admin {
    background: rgba(233, 196, 106, 0.15) !important;
    border: 1px solid rgba(233, 196, 106, 0.4) !important;
    color: #E9C46A !important;
}

.role-badge.role-parent {
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38BDF8 !important;
}

/* Overlay Panel Dark Mode Overrides */
.overlay-panel {
    background: #0d0f14 !important;
    color: #F0F2F5 !important;
    border-left: 1px solid rgba(91, 192, 190, 0.2) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 255, 200, 0.3) transparent !important;
}

/* Custom Scrollbar for Overlay Panel in Space Theme */
.overlay-panel::-webkit-scrollbar {
    width: 6px !important;
}

.overlay-panel::-webkit-scrollbar-track {
    background: transparent !important;
}

.overlay-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, 0.3) !important;
    border-radius: 3px !important;
}

.overlay-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 200, 0.6) !important;
}

/* Contact Card Glassmorphic Premium Styles */
.contact-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    padding: 50px 40px !important;
    color: var(--color-text) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.contact-title {
    color: var(--color-text) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    text-align: center;
    margin-bottom: 10px;
}

.contact-text {
    color: var(--color-text) !important;
    opacity: 0.85;
    text-align: center;
    margin-bottom: 35px;
}

.contact-form input,
.contact-form textarea {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    font-family: var(--font-main) !important;
    padding: 15px 20px !important;
    transition: all 0.3s ease !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #64748b !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
    outline: none !important;
}

/* Dark mode specific contact form overrides */
body.night-mode .contact-form input,
body.night-mode .contact-form textarea {
    background: rgba(6, 9, 19, 0.45) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.night-mode .contact-form input::placeholder,
body.night-mode .contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.night-mode .contact-form input:focus,
body.night-mode .contact-form textarea:focus {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35) !important;
}

/* Hamburger & Auth Logo overrides */
.hamburger {
    background: transparent !important;
    border: none !important;
}

.hamburger span,
.hamburger.active span {
    background-image: linear-gradient(120deg, #5BC0BE, #3a7bd5, #00d2ff, #8a2be2, #FF00FF, #5BC0BE) !important;
    background-size: 200% auto !important;
    animation: auroraGradient 6s linear infinite !important;
}

body:not(.night-mode) .hamburger span,
body:not(.night-mode) .hamburger.active span {
    background-image: linear-gradient(120deg, #ff4a4a, #ff7e15, #ffaa00, #ffea00, #ff4a4a) !important;
}

.auth-header {
    position: relative;
    z-index: 1;
}

.auth-header::before {
    content: '';
    position: absolute;
    top: 40%;
    /* Offset to the top */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    /* Larger */
    height: 160px;
    background: linear-gradient(120deg, #5BC0BE, #3a7bd5, #00d2ff, #8a2be2, #FF00FF, #5BC0BE);
    background-size: 200% auto;
    animation: auroraGradient 3s linear infinite;
    filter: blur(30px);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.5;
    /* Less opacity */
}

.auth-logo {
    content: url('../assets/LogoWhite.svg') !important;
    width: 100px !important;
    height: 100px !important;
    background: none !important;
    mask-image: none !important;
}

/* Admin Overlay Overrides for Space Theme */
.admin-panel {
    color: var(--color-text) !important;
}

.admin-section-title {
    color: var(--color-accent) !important;
    border-bottom-color: var(--color-accent) !important;
}

.admin-user-card,
.admin-event-card,
.child-row,
.reg-row,
.profile-card {
    background: rgba(28, 37, 65, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(91, 192, 190, 0.2) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.admin-user-card:hover,
.admin-event-card:hover {
    background: rgba(91, 192, 190, 0.15) !important;
    border-color: var(--color-accent) !important;
    transform: translateX(5px);
}

.admin-user-card strong,
.admin-event-card strong {
    color: var(--color-accent) !important;
}

.admin-user-email,
.admin-event-meta,
.meta,
.child-meta {
    color: rgba(255, 255, 255, 0.6) !important;
}

.admin-tabs {
    background: rgba(11, 19, 43, 0.5) !important;
    border: 1px solid var(--glass-border);
    padding: 4px;
    display: flex !important;
}

.admin-tab {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.admin-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.admin-tab.active {
    background: var(--color-accent) !important;
    color: var(--color-space-deep) !important;
}

.admin-tab.active:hover {
    background: var(--color-accent) !important;
    color: var(--color-space-deep) !important;
}

.admin-tab .tab-icon {
    position: static !important;
    transform: none !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
}

.logout-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-family: var(--font-main) !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.input-group {
    background: rgba(11, 19, 43, 0.8) !important;
    border-color: var(--glass-border) !important;
    color: #ffffff !important;
}

.input-group input,
.input-group select,
.input-group textarea {
    color: #ffffff !important;
}

.admin-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ADMIN PANEL BUTTON FIXES */
.admin-panel .auth-submit-btn,
.admin-panel .submit-btn,
.admin-panel button.submit-btn {
    color: #ffffff !important;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.admin-panel .auth-submit-btn:hover,
.admin-panel .submit-btn:hover,
.admin-panel button.submit-btn:hover {
    color: #111111 !important;
    background: #ffffff !important;
}

/* Premium Primary Buttons (Cyber Gold Accent in Dark Mode) */
.submit-btn,
.auth-submit-btn {
    background: var(--color-accent) !important;
    color: var(--color-space-deep) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.submit-btn:hover,
.auth-submit-btn:hover {
    background: #ffffff !important;
    color: var(--color-space-deep) !important;
}

/* Theme Toggle Button Styles */
.theme-toggle-btn {
    position: fixed;
    top: 25px;
    right: 85px;
    z-index: 2000;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(1.1) !important;
}

@media (max-width: 768px) {
    .theme-toggle-btn {
        top: 20px;
        right: 75px;
    }
}

#nav-logo-canvas {
    width: 400px;
    height: 280px;
    display: block;
}

@media (max-width: 768px) {
    #nav-logo-canvas {
        width: 300px;
        height: 200px;
    }
}

/* ==========================================================================
   CONSOLIDATED THEME OVERRIDES & EVENT CARD ENHANCEMENTS
   ========================================================================== */

/* --- Dark Theme Event Card Metallic Glow & Darker Surface --- */
body.night-mode .event-card {
    background: radial-gradient(circle at var(--posx, 50%) var(--posy, 50%),
            #171f38 0%,
            #090d1a 100%) top left / 100% calc(100% - 75px) no-repeat !important;
    color: #f0f2f5 !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05),
        0 10px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.night-mode .event-card::after {
    background:
        /* The Dark Shadow Line */
        linear-gradient(115deg,
            transparent calc(var(--posx, 50%) - 30%),
            rgba(0, 0, 0, 0.05) calc(var(--posx, 50%) - 15%),
            rgba(0, 0, 0, 0.25) var(--posx, 50%),
            rgba(0, 0, 0, 0.05) calc(var(--posx, 50%) + 15%),
            transparent calc(var(--posx, 50%) + 30%)),
        /* Aurora-colored specular highlights - softened */
        linear-gradient(115deg,
            transparent calc(var(--posx, 50%) - 18%),
            rgba(91, 192, 190, 0.1) calc(var(--posx, 50%) - 8%),
            rgba(255, 255, 255, 0.35) var(--posx, 50%),
            rgba(138, 43, 226, 0.1) calc(var(--posx, 50%) + 8%),
            transparent calc(var(--posx, 50%) + 18%)) !important;
}

body.night-mode .event-card:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(91, 192, 190, 0.10),
        0 0 60px rgba(138, 43, 226, 0.05) !important;
}

body.night-mode .event-card .event-title {
    color: #ffffff !important;
}

body.night-mode .event-card .event-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.night-mode .event-card .detail-item,
body.night-mode .event-card .detail-item span {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.night-mode .event-card .detail-icon {
    stroke: rgba(255, 255, 255, 0.85) !important;
}

body.night-mode .event-card .teamer-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.night-mode .ticket-strip {
    background: #0d1224 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 1px dashed rgba(255, 255, 255, 0.08) !important;
}

body.night-mode .ticket-strip .strip-content {
    color: rgba(255, 255, 255, 0.35) !important;
}

body.night-mode .event-card .submit-btn,
body.night-mode .event-card button.submit-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.night-mode .event-card .submit-btn:hover,
body.night-mode .event-card button.submit-btn:hover {
    background: #ffffff !important;
    color: var(--color-space-deep) !important;
    border-color: #ffffff !important;
}

body.night-mode .event-card .event-actions {
    border-top: 2px dashed rgba(255, 255, 255, 0.12) !important;
}

/* --- Light Theme Base Adjustments --- */
body:not(.night-mode) #space-canvas {
    opacity: 0.35 !important;
    background: radial-gradient(circle at center, #FFFFFF 0%, #F1F5F9 100%) !important;
}

body:not(.night-mode) .astronaut-custom-model {
    filter: drop-shadow(0 0 15px rgba(15, 23, 42, 0.12)) !important;
}

/* --- Light Theme Badges --- */
body:not(.night-mode) .teamer-badge {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: var(--color-text) !important;
}

body:not(.night-mode) .status-badge.status-confirmed {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #047857 !important;
}

body:not(.night-mode) .status-badge.status-waiting {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #B45309 !important;
}

body:not(.night-mode) .status-badge.status-registered {
    background: rgba(14, 165, 233, 0.1) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: #0369A1 !important;
}

body:not(.night-mode) .role-badge.role-admin {
    background: rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    color: #0F172A !important;
}

body:not(.night-mode) .role-badge.role-parent {
    background: rgba(79, 70, 229, 0.1) !important;
    border: 1px solid rgba(79, 70, 229, 0.3) !important;
    color: #4338CA !important;
}

/* --- Light Theme Overlay & Admin Overrides --- */
body:not(.night-mode) .overlay-panel {
    background: var(--color-space-deep) !important;
    color: var(--color-text) !important;
    border-left: 1px solid var(--glass-border) !important;
    scrollbar-color: rgba(15, 23, 42, 0.3) transparent !important;
}

body:not(.night-mode) .overlay-panel::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2) !important;
}

body:not(.night-mode) .overlay-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.4) !important;
}

body:not(.night-mode) .admin-user-card,
body:not(.night-mode) .admin-event-card,
body:not(.night-mode) .child-row,
body:not(.night-mode) .reg-row,
body:not(.night-mode) .profile-card {
    background: var(--color-space-light) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--color-text) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

body:not(.night-mode) .admin-user-card:hover,
body:not(.night-mode) .admin-event-card:hover {
    background: #ffffff !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

body:not(.night-mode) .admin-user-email,
body:not(.night-mode) .admin-event-meta,
body:not(.night-mode) .meta,
body:not(.night-mode) .child-meta {
    color: rgba(30, 41, 59, 0.7) !important;
}

body:not(.night-mode) .input-group {
    background: #ffffff !important;
    border-color: var(--glass-border) !important;
    color: var(--color-text) !important;
}

body:not(.night-mode) .input-group input,
body:not(.night-mode) .input-group select,
body:not(.night-mode) .input-group textarea {
    color: var(--color-text) !important;
}

body:not(.night-mode) .admin-search-input::placeholder {
    color: rgba(30, 41, 59, 0.4);
}

body:not(.night-mode) .admin-panel .auth-submit-btn,
body:not(.night-mode) .admin-panel .submit-btn,
body:not(.night-mode) .admin-panel button.submit-btn {
    color: #ffffff !important;
    background: var(--color-accent) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
}

body:not(.night-mode) .admin-panel .auth-submit-btn:hover,
body:not(.night-mode) .admin-panel .submit-btn:hover,
body:not(.night-mode) .admin-panel button.submit-btn:hover {
    color: var(--color-accent) !important;
    background: #ffffff !important;
    border-color: var(--color-accent) !important;
}

/* --- Light Theme Theme Toggle Button Adjustments --- */
body:not(.night-mode) .theme-toggle-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}

body:not(.night-mode) .theme-toggle-btn:hover {
    background: rgba(15, 23, 42, 0.12) !important;
}

/* --- Light Theme Primary Buttons --- */
body:not(.night-mode) .submit-btn,
body:not(.night-mode) .auth-submit-btn {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0EA5E9, #4F46E5) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25) !important;
}

body:not(.night-mode) .submit-btn:hover,
body:not(.night-mode) .auth-submit-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284C7, #3730A3) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4) !important;
}