/* Imports: Use a modern, sharp font pair (Poppins for body, Montserrat for headers) */
/* The Montserrat link remains for future use, but Poppins is applied everywhere below per request. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap');

/* --- COLOR PALETTE AND SHADOWS --- */
:root {
  /* Dark Mode Default */
  --bg-dark: #171a26; /* Deep charcoal background */
  --bg-light: #f9f9fb; /* Light card/content background */
  --card-dark: rgba(255, 255, 255, 0.08); /* Translucent dark card */
  --text-primary: #e6e9f2; /* Light text */
  --text-secondary: #9aa2b1; /* Muted gray text */
  --accent-blue: #007bff; /* Primary vibrant blue */
  --accent-purple: #9d4edd; /* Secondary vibrant accent */
  --border: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(12px); /* Increased blur for visual impact */
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.dark-mode {
  --bg-dark: #171a26;
  --bg-light: #1e2130;
  --card-dark: rgba(255, 255, 255, 0.05);
  --text-primary: #f1f4ff;
  --text-secondary: #a4abc2;
  --border: rgba(255, 255, 255, 0.1);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.light-mode {
  --bg-dark: #f9f9fb;
  --bg-light: #f9f9fb;
  --card-dark: rgba(255, 255, 255, 0.85); /* Semi-opaque light card */
  --text-primary: #10121a;
  --text-secondary: #5a6270;
  --border: rgba(0, 0, 0, 0.1);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- BASE STYLING --- */
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Applying Poppins system-wide as requested */
  font-family: 'Poppins', sans-serif;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4 {
  /* Overriding Montserrat to use Poppins as requested ("all system wide") */
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
h1 { font-size: 3rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }

/* Ensure event titles respond to theme colors */
.event-card h4,
.event-card h5,
.event-card h6 {
  color: var(--text-primary) !important;
  transition: color 0.4s ease;
}
.event-card p,
.event-card .text-secondary {
  color: var(--text-secondary) !important;
  transition: color 0.4s ease;
}
/* --- NAVBAR LINK COLORS (THEME-AWARE) --- */
.navbar a,
.navbar .nav-link,
.navbar-brand {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}
/* Hide floating shapes in dark mode */
body.dark-mode .floating-shapes {
  display: none !important;
}

/* Show them in light mode */
body.light-mode .floating-shapes {
  display: block !important;
}
/* --- LOGIN FORM THEME-AWARE STYLING --- */
#login-form {
  color: var(--text-primary);
  /*background-color: var(--card-dark);*/
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

#login-form .form-label {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

#login-form .form-control {
  /*background-color: var(--card-dark) !important;*/
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* --- PLACEHOLDERS --- */
#login-form .form-control::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8;
  transition: color 0.3s ease;
}
#login-form .form-control::-webkit-input-placeholder {
  color: var(--text-secondary) !important;
}
#login-form .form-control:-ms-input-placeholder {
  color: var(--text-secondary) !important;
}
#login-form .form-control::-ms-input-placeholder {
  color: var(--text-secondary) !important;
}
/* --- FOOTER / COPYRIGHT TEXT --- */
.site-footer-text small {
  color: var(--text-secondary);
  transition: color 0.4s ease;
}

/* Optional hover or active states if there are links */
.site-footer-text a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer-text a:hover {
  color: var(--accent-purple);
  text-decoration: underline;
}

/* --- FOCUS STAT*

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

/* Optional: make secondary/muted links respond too */
.navbar .text-secondary {
  color: var(--text-secondary) !important;
}

/* Optional: active or focused state */
/*.navbar .nav-link.active,*/
/*.navbar .nav-link:focus {*/
/*  color: var(--accent-purple) !important;*/
/*}*/

/* --- INPUT PLACEHOLDERS (THEME-AWARE) --- */
::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8;
  transition: color 0.3s ease;
}

/* Vendor-prefixed versions for full browser support */
::-webkit-input-placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8;
}
:-ms-input-placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8;
}
::-ms-input-placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8;
}

.container { max-width: 1280px; }

/* --- GLASS CARD (CORE UI ELEMENT) --- */
.glass-card {
  background-color: var(--card-dark);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- NAVBAR --- */
.hero-container { padding: 0 1rem; }

.navbar {
  /* Default Dark Mode Styles (Glass/Shadow) */
  /*background-color: var(--card-dark) !important;*/
  /*backdrop-filter: var(--glass-blur);*/
  /*border: 1px solid var(--border);*/
  /*border-radius: 12px;*/
  margin-top: 1rem;
  /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
}

/* Light Mode Overrides for NAVBAR - REMOVE SHADOW, BACKGROUND, FILTER, BORDER */
body.light-mode .navbar {
  background-color: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
}

@media (min-width: 992px) {
  .navbar { margin-left: 1rem; margin-right: 1rem; }
}

/* Ensure nav text/buttons are visible in both modes, especially fixing dark mode contrast */
.navbar-brand,
.navbar-nav .nav-link,
.navbar #theme-toggle,
.navbar #theme-toggle i {
    /*color: var(--text-primary) !important;*/
    border-color: var(--border) !important; /* Keep border color consistent for buttons */
}
.navbar-nav .nav-link:hover { color: var(--accent-blue) !important; }

.navbar-toggler { border-color: var(--border) !important; }

    /* Buttons */
    .btn-primary {
     background:   linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border-radius: 12px;
      padding: 0.6rem 1.2rem;
      font-weight: 700;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-outline-secondary {
      border-radius: 12px;
      padding: 0.6rem 1.2rem;
      font-weight: 700;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-primary:hover, .btn-outline-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

/* --- HERO SECTION --- */
.hero { padding: 8rem 0; text-align: center; }
.hero h1 {
    background: black;
  -webkit-background-clip: text;
  /*-webkit-text-fill-color: transparent;*/
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.header-name {
    background:  linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    /* text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); */
    font-family: fantasy;
}

/* --- FEATURE CARDS --- */
.feature-card { padding: 2rem; height: 100%; text-align: center; }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.feature-card span {

  font-size: 3.5rem;
  margin-bottom: 1rem;
}

/* --- EVENT CARDS --- */
.event-card {
  padding: 1.5rem;
  height: 100%;
  border-left: 5px solid var(--accent-blue);
}
.event-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent-purple);
}

/* --- FORMS & INPUTS --- */
.form-control {
  background-color: var(--card-dark) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.form-control:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}
.login-card { padding: 2.5rem; }

/* --- FOOTER --- */
footer {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

/* --- GLOBAL LOADING OVERLAY (NEW) --- */
#loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
  pointer-events: none; /* Allows clicks underneath when opacity is low */
}

#loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Shimmer Animation */
.shimmer-text {
  font-family: 'Poppins', sans-serif; /* Changed to Poppins */
  font-size: 4rem;
  font-weight: 800;
  color: var(--text-primary);
  opacity: 0.8;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 10px rgba(157, 77, 237, 0.5);
}

.shimmer-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: shimmer 2.5s infinite linear;
}

@keyframes shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

    .event-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      background-color: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      overflow: hidden;
      padding: 20px;
    }

    .event-sidebar {
      flex: 0 0 250px;
      background-color: #f4f4f2;
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .event-sidebar .info-box {
      background-color: #fff;
      border-radius: 12px;
      text-align: center;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .event-main {
      flex: 1;
    }

    .event-image {
      width: 100%;
      height: 350px;
      border-radius: 16px;
      object-fit: cover;
      margin-bottom: 20px;
    }

    .participate-btn {
      width: 100%;
      background-color: #007bff;
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 12px;
      transition: background-color 0.3s ease;
    }

    .participate-btn:hover {
      background-color: #0056b3;
    }

    .map-container {
      margin-top: 30px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    h1.event-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      .event-container {
        flex-direction: column;
      }
      .event-sidebar {
        flex: 1 1 100%;
      }
    }
    
        
.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
}

.floating-shapes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    width: 100%;
}

.floating-shapes li {
    position: absolute;
    width: 20px;
    height: 20px;
    filter: blur(14px);
    opacity: 0.7;
    animation: float 30s linear infinite;
}

/* Random starting positions and sizes for each shape */
.floating-shapes li:nth-child(1){ top: 40%; left: 50%; width: 60px; height: 60px; background: rgba(255,0,0,0.1); border-radius:25%; animation-duration:15s;}
.floating-shapes li:nth-child(2){ top: 20%; left: 20%; width: 30px; height: 30px; background: rgba(0,255,0,0.1); border-radius:0; animation-duration:8s;}
.floating-shapes li:nth-child(3){ top: 50%; left: 30%; width: 50px; height: 50px; background: rgba(0,0,255,0.08); border-radius:18%; animation-duration:20s;}
.floating-shapes li:nth-child(4){ top: 70%; left: 40%; width: 20px; height: 20px; background: rgba(255,255,0,0.05); border-radius:0; animation-duration:10s;}
.floating-shapes li:nth-child(5){ top: 30%; left: 60%; width: 80px; height: 80px; background: rgba(255,0,255,0.07); border-radius:50%; animation-duration:13s;}
.floating-shapes li:nth-child(6){ top: 60%; left: 75%; width: 40px; height: 40px; background: rgba(0,255,255,0.1); border-radius:19%; animation-duration:12s;}
.floating-shapes li:nth-child(7){ top: 15%; left: 85%; width: 100px; height: 100px; background: rgba(200,100,255,0.05); border-radius:50%; animation-duration:15s;}
.floating-shapes li:nth-child(8){ top: 80%; left: 10%; width: 30px; height: 30px; background: rgba(100,200,255,0.08); border-radius:0; animation-duration:8s;}
.floating-shapes li:nth-child(9){ top: 45%; left: 50%; width: 70px; height: 70px; background: rgba(255,150,50,0.07); border-radius:50%; animation-duration:9s;}
.floating-shapes li:nth-child(10){ top: 60%; left: 90%; width: 50px; height: 50px; background: rgba(50,255,150,0.05); border-radius:39%; animation-duration:14s;}

.floating-shapes li:nth-child(11){ top: 30%; left: 30%; width: 50px; height: 50px; background: rgba(0,0,255,0.08); border-radius:50%; animation-duration:20s;}
.floating-shapes li:nth-child(12){ top: 50%; left: 10%; width: 30px; height: 30px; background: rgba(100,200,255,0.08); border-radius:25%; animation-duration:8s;}
.floating-shapes li:nth-child(13){ top: 90%; left: 90%; width: 80px; height: 80px; background: rgba(255,0,255,0.07); border-radius:50%; animation-duration:13s;}
.floating-shapes li:nth-child(14){ top: 10%; left: 75%; width: 40px; height: 40px; background: rgba(0,255,255,0.1); border-radius:12%; animation-duration:12s;}
.floating-shapes li:nth-child(15){ top: 50%; left: 90%; width: 50px; height: 50px; background: rgba(50,255,150,0.05); border-radius:0; animation-duration:14s;}
/* Add more if needed */

/* Animation - slow floating in X/Y */
@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, -40px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}