/* Tron Theme Overrides */
:root {
    --tron-bg: #0b0c10;
    --tron-cyan: #66fcf1;
    --tron-dark-cyan: #45a29e;
    --tron-gray: #c5c6c7;
    --tron-dark-gray: #1f2833;
    --tron-blue: #00f3ff;
    --tron-pink: #ff00ff;
}

body.tron-body {
    background-color: var(--tron-bg) !important;
    color: var(--tron-gray) !important;
    font-family: 'Orbitron', 'Poppins', sans-serif;
}

/* Header */
header {
    background-color: #000 !important;
    border-bottom: 2px solid var(--tron-blue) !important;
    box-shadow: 0 0 15px var(--tron-blue) !important;
}

header a,
header button {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 5px var(--tron-cyan);
}

header button {
    background-color: transparent !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: 0 0 10px var(--tron-cyan) inset !important;
}

header button:hover {
    background-color: var(--tron-cyan) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--tron-cyan) !important;
}

/* Sections */
section,
.slider_area,
.program_details_area {
    background-color: var(--tron-bg) !important;
    background-image: none !important;
}

.section_title h3,
h3,
h4,
h1,
h2,
span {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 8px var(--tron-cyan) !important;
}

p,
li,
b {
    color: var(--tron-gray) !important;
}

/* Overrides for hardcoded colors */
[style*="color: rgb(4, 4, 85)"],
[style*="color: #000000;"],
[style*="color: rgb(10, 10, 136);"] {
    color: var(--tron-gray) !important;
    text-shadow: none !important;
}

b[style*="color: #000000;"] {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 3px var(--tron-cyan) !important;
}

/* Cards / Events */
.bg-gray-800 {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid var(--tron-dark-cyan) !important;
    box-shadow: 0 0 10px var(--tron-dark-cyan) !important;
}

.bg-gray-700 {
    background-color: rgba(11, 12, 16, 0.9) !important;
    border: 1px solid var(--tron-blue) !important;
    box-shadow: 0 0 8px var(--tron-blue) inset !important;
    transition: all 0.3s ease;
}

.bg-gray-700:hover {
    box-shadow: 0 0 15px var(--tron-blue), 0 0 20px var(--tron-blue) inset !important;
    transform: scale(1.05);
    cursor: pointer;
}

.bg-gray-700 h3 {
    color: #fff !important;
    text-shadow: 0 0 5px var(--tron-blue) !important;
}

/* Modals */
.modal-content {
    background-color: var(--tron-dark-gray) !important;
    border: 2px solid var(--tron-cyan) !important;
    box-shadow: 0 0 20px var(--tron-cyan) !important;
    color: var(--tron-gray);
}

.modal-content h3,
.modal-content h4 {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 8px var(--tron-cyan) !important;
}

table,
th,
td {
    border-color: var(--tron-dark-cyan) !important;
    color: var(--tron-gray) !important;
}

th {
    background-color: rgba(69, 162, 158, 0.2) !important;
}

/* Specific Event Buttons */
.custom-btn {
    background: transparent !important;
    border: 2px solid var(--tron-blue) !important;
    color: var(--tron-blue) !important;
    text-shadow: 0 0 5px var(--tron-blue) !important;
    box-shadow: 0 0 8px var(--tron-blue) inset !important;
}

.custom-btn:hover {
    background: var(--tron-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--tron-blue) !important;
    text-shadow: none !important;
}

/* Schedule Area */
.single_propram .inner_wrap {
    background-color: rgba(31, 40, 51, 0.8) !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: 0 0 10px var(--tron-cyan) !important;
    border-radius: 10px;
}

.porgram_top span,
.porgram_top h3 {
    color: var(--tron-cyan) !important;
}

.circle_img {
    border-color: var(--tron-pink) !important;
    box-shadow: 0 0 10px var(--tron-pink) !important;
}

/* Input Fields inside Modal */
input,
textarea,
select {
    background-color: #000 !important;
    border: 1px solid var(--tron-cyan) !important;
    color: #fff !important;
}

input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 10px var(--tron-cyan) !important;
    outline: none;
}


body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span:not(.fa):not(.bx):not(.ti),
div,
input,
button,
textarea,
select {
    font-family: 'Orbitron', sans-serif !important;
}
/* Additional Schedule Theming */
.program_details_area .program_detail_wrap::before {
    background: var(--tron-cyan) !important;
    box-shadow: 0 0 10px var(--tron-cyan) !important;
    width: 2px !important;
}

.program_details_area .program_detail_wrap .single_propram .circle_img {
    background-color: var(--tron-pink) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 15px var(--tron-pink), 0 0 5px #fff inset !important;
}

.program_details_area .program_detail_wrap .single_propram .thumb {
    overflow: hidden !important;
    border-radius: 10px !important;
    max-height: 220px !important;
}

.program_details_area .program_detail_wrap .single_propram .thumb img {
    border: 2px solid var(--tron-blue) !important;
    box-shadow: 0 0 15px var(--tron-blue) !important;
    border-radius: 10px !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Remove Gradient from Schedule Section */
.overlay2::before, .overlay::before {
    background: transparent !important;
}

.program_details_area .program_detail_wrap::before {
    background: var(--tron-cyan) !important;
    box-shadow: 0 0 10px var(--tron-cyan) !important;
    width: 2px !important;
    background-image: none !important;
}
.program_details_area, .detials_bg_1, .overlay2 {
    background-image: none !important;
    background: var(--tron-bg) !important;
}
/* Disable WOW animations for Schedule Section to stop any other slide/fade effects on scroll */
#schedule .wow {
    visibility: visible !important;
    animation-name: none !important;
    -webkit-animation-name: none !important;
}

/* Hide original background shapes */
.shape_1, .shape_2 {
    display: none !important;
}


/* Schedule Enhancements - Animations and Hover Effects */

/* 1. Pulsing Energy Nodes */
@keyframes neonPulse {
    0% { box-shadow: 0 0 5px var(--tron-pink), 0 0 2px #fff inset; transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 20px var(--tron-pink), 0 0 10px #fff inset; transform: translateX(-50%) scale(1.2); }
    100% { box-shadow: 0 0 5px var(--tron-pink), 0 0 2px #fff inset; transform: translateX(-50%) scale(1); }
}

@media (min-width: 768px) {
    .program_details_area .program_detail_wrap .single_propram .circle_img {
        animation: neonPulse 2s infinite ease-in-out;
    }
}

/* 2. Interactive Glowing Schedule Cards */
.program_details_area .program_detail_wrap .single_propram .inner_wrap {
    transition: all 0.4s ease;
    border: 1px solid rgba(102, 252, 241, 0.3) !important;
}

.program_details_area .program_detail_wrap .single_propram .inner_wrap:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 25px var(--tron-cyan), 0 0 10px var(--tron-cyan) inset !important;
    border-color: var(--tron-cyan) !important;
    z-index: 10;
}

.program_details_area .program_detail_wrap .single_propram .inner_wrap:hover img {
    border-color: var(--tron-cyan) !important;
    box-shadow: 0 0 25px var(--tron-cyan) !important;
}

/* 3. Scrolling Laser Timeline Effect (CSS Math Trick) */
.program_details_area .program_detail_wrap::before {
    background: linear-gradient(to bottom, var(--tron-blue), var(--tron-pink), var(--tron-cyan)) !important;
    background-size: 100% 200% !important;
    animation: laserFlow 3s linear infinite !important;
}

@keyframes laserFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}


/* Animated Tron Grid Background */
body.tron-body {
    position: relative;
    overflow-x: hidden;
}


/* 4. Fix Overlay and Container for Grid */
.tron-body {
    background-color: transparent !important;
}

#home,
.slider_area,
.program_details_area,
section {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* Base static background behind the grid */
html {
    background-color: var(--tron-bg);
}


/* 5. Grid container - full animated perspective grid */
.bg-grid {
    position: fixed;
    top: 50%;
    left: 0;
    width: 200vw;
    height: 200vh;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(102, 252, 241, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 252, 241, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center bottom;
    transform: perspective(600px) rotateX(60deg) translate(-50%, -50%);
    box-shadow: 0 -30vh 50px 0 var(--tron-bg) inset;
    animation: gridScroll 15s linear infinite;
}

@keyframes gridScroll {
    0%   { transform: perspective(600px) rotateX(60deg) translate(-50%, -50%) translateY(0); }
    100% { transform: perspective(600px) rotateX(60deg) translate(-50%, -50%) translateY(50px); }
}


/* 6. Theming Event Cards (overrides for bg-gray utility classes used on cards) */
.bg-gray-800 {
    background-color: rgba(11, 12, 16, 0.85) !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.2) !important;
    backdrop-filter: blur(4px);
}

.bg-gray-700 {
    background-color: rgba(102, 252, 241, 0.05) !important;
    border: 1px solid rgba(102, 252, 241, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(102, 252, 241, 0.1), 0 0 5px rgba(102, 252, 241, 0.2) !important;
    transition: all 0.3s ease !important;
}

.bg-gray-700:hover {
    background-color: rgba(102, 252, 241, 0.15) !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: inset 0 0 20px rgba(102, 252, 241, 0.5), 0 0 25px var(--tron-cyan) !important;
    transform: scale(1.05) translateY(-2px) !important;
}


/* 7. Tron-themed Event Detail Modal */
#eventDetailsModal {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
}

#eventDetailsModal .modal-content,
.modal .modal-content {
    background: #0b0c10 !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.4), 0 0 60px rgba(102, 252, 241, 0.1) !important;
    color: var(--tron-cyan) !important;
    max-height: 80vh;
    overflow-y: auto;
}

#eventDetailsModal .modal-body,
.modal .modal-body {
    background: transparent !important;
}

#eventDetailsModal #eventTitle,
.modal #eventTitle {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 10px var(--tron-cyan) !important;
    text-align: center;
    border-bottom: 1px solid var(--tron-cyan);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#eventDetailsModal .modal-text,
#eventDetailsModal .modal-text-container,
#eventDetailsModal strong,
#eventDetailsModal span,
#eventDetailsModal p {
    color: #e0e0e0 !important;
}

#eventDetailsModal strong.modal-text,
#eventDetailsModal strong {
    color: var(--tron-cyan) !important;
}

#eventDetailsModal span.modal-text {
    color: var(--tron-blue) !important;
}

#eventDetailsModal .close,
.modal .close {
    color: var(--tron-cyan) !important;
    text-shadow: 0 0 8px var(--tron-cyan) !important;
}

#eventDetailsModal .close:hover,
.modal .close:hover {
    color: var(--tron-pink) !important;
    text-shadow: 0 0 12px var(--tron-pink) !important;
}

.custom-btn2 {
    background: transparent !important;
    color: var(--tron-cyan) !important;
    border: 1px solid var(--tron-cyan) !important;
    box-shadow: 0 0 8px rgba(102, 252, 241, 0.4) !important;
    transition: all 0.3s ease !important;
}

.custom-btn2:hover {
    background: var(--tron-cyan) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--tron-cyan) !important;
}

/* Fix the stray nested body gradient that was showing as card background */
.procyon-map-wrapper {
    background: transparent !important;
}