/* Base Styles */
:root {
  --primary-color: #6c5ce7;
  --secondary-color: #a29bfe;
  --accent-color: #fd79a8;
  --dark-color: #2d3436;
  --light-color: #f5f6fa;
  --success-color: #00b894;
  --warning-color: #fdcb6e;
  --danger-color: #d63031;
  --text-color: #2d3436;
  --text-light: #636e72;
  --gradient: linear-gradient(135deg,
      var(--primary-color),
      var(--accent-color));
  --font-main: "Montserrat", sans-serif;
  --font-heading: "Playfair Display", serif;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  background-color: var(--light-color);
  background-color: var(--light-color);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Stars Background */
.stars-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1a1a2e, #16213e);
  background: linear-gradient(to bottom, #1a1a2e, #16213e);
  z-index: -2;
  overflow: hidden;
}

.stars-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="0.5" fill="white"/><circle cx="50" cy="30" r="0.8" fill="white"/><circle cx="80" cy="20" r="0.3" fill="white"/><circle cx="10" cy="50" r="0.5" fill="white"/><circle cx="40" cy="60" r="0.7" fill="white"/><circle cx="70" cy="70" r="0.4" fill="white"/><circle cx="90" cy="90" r="0.6" fill="white"/><circle cx="30" cy="80" r="0.5" fill="white"/><circle cx="60" cy="40" r="0.3" fill="white"/></svg>');
  opacity: 0.8;
  animation: twinkle 5s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.8;
  }
}

/* Slide animations for notifications */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* Text Gradient */
.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cosmic Navigation */
.cosmic-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 5%;
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.logo-icon {
  margin-right: 0.5rem;
  font-size: 1.8rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: white;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 0.3rem;
}

.nav-hamburger .line {
  width: 25px;
  height: 2px;
  background: white;
  transition: var(--transition);
}

/* Accessibility: Visible focus for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1001;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.12);
}

a:focus-visible,
button:focus-visible,
.nav-links a:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.12);
  transform: translateY(-2px);
  transition:
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Mobile menu link focus */
.nav-links a:focus-visible {
  background-color: rgba(0, 102, 204, 0.08);
  border-radius: 6px;
}

/* Ensure primary CTAs also have strong focus */
.hero-cta:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.12);
  transform: translateY(-2px);
}

/* Make the nav button look like a button and ensure it's keyboard-visible */
.mobile-menu-toggle {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0.25rem;
}

@media (max-width: 768px) {
  .nav-links a {
    display: block;
    padding: 0.6rem 0.8rem;
    width: 100%;
  }

  /* Language dropdown mobile adjustments */
  .language-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .language-menu {
    position: static;
    transform: none;
    margin-top: 8px;
  }

  .language-menu.active {
    transform: none;
  }
}

/* Hero Section */
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 5%;
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 600px;
  z-index: 1;
}

.hero-title {
  font-size: 3.5rem;
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: white;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  max-width: 80%;
}

.hero-cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--gradient);
  color: white;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.hero-planets {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  max-width: 500px;
}

.planet {
  position: absolute;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px rgba(253, 121, 168, 0.5));
}

.planet-1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 30%, #6c5ce7, #a29bfe);
  top: 0;
  right: 0;
  animation: float 6s ease-in-out infinite;
}

.planet-2 {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, #fd79a8, #ff9ff3);
  bottom: 50px;
  left: 50px;
  animation: float 4s ease-in-out infinite reverse;
}

.planet-3 {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #00cec9, #55efc4);
  top: 150px;
  left: 100px;
  animation: float 5s ease-in-out infinite 1s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Section Styles */
.section-title {
  font-size: 2.5rem;
  font-family: var(--font-heading);
  margin-bottom: 3rem;
  text-align: center;
  color: white;
}

/* Clubs Grid */
.clubs-section {
  padding: 6rem 5%;
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  margin: 2rem 5%;
}

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.club-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 2rem;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.club-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(253, 121, 168, 0.3);
}

/* Favorite Toggle (heart) */
.favorite-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

.favorite-toggle:hover {
  transform: scale(1.08);
  color: var(--accent-color);
}

.favorite-toggle .fa-heart {
  pointer-events: none;
}

.club-card.favorited {
  box-shadow: 0 18px 36px rgba(253, 121, 168, 0.12);
  border-color: rgba(253, 121, 168, 0.45);
}

.club-card.favorited .favorite-toggle {
  color: var(--accent-color);
}

.club-icon {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Club Card Section Styling */
.club-icon-section {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.club-title-section {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.club-title-section h3 {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}

.club-description-section {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.club-description-section p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

.club-tags-section {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.club-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

.club-tags span {
  background: rgba(253, 121, 168, 0.2);
  color: var(--accent-color);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.club-button-section {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legacy support for direct h3 and p elements */
.club-card h3 {
  font-size: 1.3rem;
  margin: 0;
}

.club-card p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.club-tags .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.club-tags .tags-list li {
  display: inline-flex;
}

.club-tags .tag {
  background: rgba(253, 121, 168, 0.2);
  color: var(--accent-color);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
}

.view-club-btn {
  background: var(--gradient);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  max-width: 200px;
}

.view-club-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(253, 121, 168, 0.3);
}

/* Testimonials Section */
.testimonials-section {
  padding: 6rem 5%;
  text-align: center;
  position: relative;
}

.testimonial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto 2rem;
  position: relative;
}

.testimonial-carousel {
  flex: 1;
  max-width: 800px;
  position: relative;
  height: 250px;
  overflow: hidden;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 2rem;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
}

.testimonial-slide blockquote {
  margin: 0;
  padding: 0;
}

.testimonial-slide p {
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 90%;
  color: rgba(255, 255, 255, 0.95);
  position: relative;
}

.testimonial-slide p::before {
  font-size: 3rem;
  color: var(--accent-color);
  position: absolute;
  top: -20px;
  left: -30px;
  opacity: 0.5;
}

.testimonial-author {
  font-weight: 600;
  font-size: 1rem;
}

.author-name {
  color: var(--accent-color);
  font-weight: 700;
}

.author-course {
  color: rgba(255, 255, 255, 0.8);
}

/* Navigation Arrows */
.testimonial-arrow {
  background: rgba(139, 92, 246, 0.2);
  border: 2px solid rgba(139, 92, 246, 0.5);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.testimonial-arrow:hover {
  background: rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.8);
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
}

.testimonial-arrow:active {
  transform: scale(0.95);
}

.testimonial-arrow:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Carousel Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.15);
}

.dot.active {
  background: var(--accent-color);
  width: 30px;
  border-radius: 7px;
}

.dot:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonial-container {
    gap: 1rem;
  }

  .testimonial-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1rem;
  }

  .testimonial-slide p {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .testimonial-carousel {
    height: 280px;
  }
}

@media (max-width: 576px) {
  .testimonial-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .testimonial-arrows-mobile {
    display: flex;
    gap: 1rem;
    order: 2;
  }

  .testimonial-arrow {
    position: static;
  }

  .testimonial-slide p {
    font-size: 1rem;
  }

  .testimonial-carousel {
    height: 300px;
  }
}

/* Light Mode Adjustments */
body.light-mode .testimonial-slide p,
body.light-mode .testimonial-author {
  color: #2d3436;
}

body.light-mode .author-course {
  color: #636e72;
}

body.light-mode .testimonial-arrow {
  background: rgba(108, 92, 231, 0.1);
  border-color: rgba(108, 92, 231, 0.3);
  color: #2d3436;
}

body.light-mode .testimonial-arrow:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: var(--primary-color);
}

body.light-mode .dot {
  background: rgba(0, 0, 0, 0.2);
}

body.light-mode .dot:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Footer */
.cosmic-footer {
  background: rgba(26, 26, 46, 0.9);
  color: white;
  padding: 4rem 5% 1rem;
  margin-top: 4rem;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-column h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--accent-color);
  text-transform: capitalize;
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.9);
  transition: var(--transition);
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--accent-color);
  transform: translateX(3px);
  display: inline-block;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* Events Page */
.events-hero,
.past-events-hero,
.registration-hero {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5%;
  position: relative;
}

.events-hero::before,
.past-events-hero::before,
.registration-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

/* Search Bar Styles */
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.search-input {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 50px 0 0 50px;
  border: none;
  font-size: 1rem;
  font-family: var(--font-main);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  /* Darker shadow for better visibility */
  outline: none;
  background: white;
  /* Added for visibility */
  color: var(--text-color);
  /* Ensure high contrast */
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.search-btn {
  background: var(--gradient);
  color: white;
  border: none;
  padding: 0 1.5rem;
  height: 54px;
  /* Matches input height (approx with padding) */
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-hover);
}

.events-main,
.past-events-main,
.registration-main {
  padding: 4rem 5%;
  color: white;
}

/* Calendar Section */
.calendar-section {
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.calendar-nav {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.calendar-nav:hover {
  background: var(--accent-color);
}

/* Calendar Date Picker */
.calendar-jump-picker {
  background: rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-jump-picker label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.95rem;
}

.calendar-jump-picker select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main);
}

.calendar-jump-picker select:hover {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
}

.calendar-jump-picker select:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
}

.calendar-jump-picker select option {
  background: #1a1a2e !important;
  color: #ffffff !important;
  padding: 0.5rem;
}

.calendar-jump-btn {
  background: var(--gradient);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-jump-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
}

.calendar-jump-btn.today {
  background: rgba(0, 184, 148, 0.6);
  border: 1px solid rgba(0, 184, 148, 0.8);
}

.calendar-jump-btn.today:hover {
  background: rgba(0, 184, 148, 0.8);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-header {
  text-align: center;
  font-weight: 600;
  padding: 0.5rem;
  color: var(--accent-color);
}

.calendar-day {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.8rem;
  min-height: 80px;
  transition: var(--transition);
  border: 1px solid transparent;
}

.calendar-day:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
}

.calendar-day.empty {
  background: transparent;
  border: none;
}

.day-number {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.day-event {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.day-event.tech {
  background: rgba(108, 92, 231, 0.3);
  border-left: 3px solid #6c5ce7;
}

.day-event.arts {
  background: rgba(253, 121, 168, 0.3);
  border-left: 3px solid #fd79a8;
}

.day-event.debate {
  background: rgba(0, 184, 148, 0.3);
  border-left: 3px solid #00b894;
}

.day-event.music {
  background: rgba(255, 234, 167, 0.3);
  border-left: 3px solid #ffeaa7;
}

.day-event.sports {
  background: rgba(255, 118, 117, 0.3);
  border-left: 3px solid #ff7675;
}

.day-event.science {
  background: rgba(116, 185, 255, 0.3);
  border-left: 3px solid #74b9ff;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

.legend-color.tech {
  background: #6c5ce7;
}

.legend-color.arts {
  background: #fd79a8;
}

.legend-color.debate {
  background: #00b894;
}

.legend-color.music {
  background: #ffeaa7;
}

.legend-color.sports {
  background: #ff7675;
}

.legend-color.science {
  background: #74b9ff;
}

/* Conflict Event Styles */
.day-event.conflict {
  border: 2px solid var(--danger-color);
  background: rgba(214, 48, 49, 0.25);
  position: relative;
}

.day-event.conflict::before {
  content: "⚠️";
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 0.6rem;
}

.day-event.near-conflict {
  border: 2px solid var(--warning-color);
  background: rgba(253, 203, 110, 0.2);
  position: relative;
}

.day-event.near-conflict::before {
  content: "⚡";
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 0.6rem;
}

/* Event Details */
.event-details-section {
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-event-selected {
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.no-event-selected i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.event-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.event-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.event-club-badge {
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
}

.event-club-badge.tech {
  background: rgba(108, 92, 231, 0.2);
  color: #6c5ce7;
}

.event-club-badge.arts {
  background: rgba(253, 121, 168, 0.2);
  color: #fd79a8;
}

.event-club-badge.debate {
  background: rgba(0, 184, 148, 0.2);
  color: #00b894;
}

.event-club-badge.music {
  background: rgba(255, 234, 167, 0.2);
  color: #fdcb6e;
}

.event-club-badge.sports {
  background: rgba(255, 118, 117, 0.2);
  color: #ff7675;
}

.event-club-badge.science {
  background: rgba(116, 185, 255, 0.2);
  color: #74b9ff;
}

.event-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.event-date-time {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.event-description {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.event-actions {
  display: flex;
  gap: 1rem;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  transition: var(--transition);
}

.action-button:hover {
  background: var(--accent-color);
  transform: translateY(-3px);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.modal-content {
  background: rgba(26, 26, 46, 0.95);
  border-radius: 15px;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.1);
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--primary-color, #4a90e2);
  ;
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color, #357abd);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: 0.3s;
}

.close-modal:hover {
  color: var(--accent-color, #ff4757);

  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.modal-content {
  background: rgba(26, 26, 46, 0.95);
  border-radius: 15px;
  padding: 2rem;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.1);
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--primary-color, #4a90e2);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color, #357abd);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: 0.3s;
}

.close-modal:hover {
  color: var(--accent-color, #ff4757);

}

/* Form Styles */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-family: var(--font-main);
  transition: var(--transition);
}

/* Fix: Year of Study dropdown option visibility */
.form-group select option {
  color: #2d3436;
  background-color: #ffffff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
}

/* Form Validation Styles */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: var(--danger-color);
  background: rgba(214, 48, 49, 0.1);
}

.form-group input.error:focus,
.form-group select.error:focus,
.form-group textarea.error:focus {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.2);
}

.form-error {
  color: var(--danger-color);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  animation: slideDown 0.3s ease-out;
}

.form-error::before {
  content: "⚠";
  font-size: 1rem;
}

.form-success {
  background: rgba(0, 184, 148, 0.2);
  border: 1px solid rgba(0, 184, 148, 0.5);
  color: var(--success-color);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideDown 0.3s ease-out;
}

.form-success::before {
  content: "✓";
  font-size: 1.25rem;
  font-weight: bold;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.conflict-comparison {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.conflict-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.column-header {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.conflict-arrow {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: bold;
}

.conflict-timeline {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.timeline-container {
  position: relative;
  height: 80px;
}

.timeline-track {
  position: relative;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.timeline-event {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.timeline-event.existing {
  background: rgba(214, 48, 49, 0.6);
  border: 2px solid rgba(214, 48, 49, 0.9);
}

.timeline-event.new {
  background: rgba(108, 92, 231, 0.6);
  border: 2px solid rgba(108, 92, 231, 0.9);
}

.timeline-event:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.event-time {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.timeline-legend {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-item.existing .legend-dot {
  background: rgba(214, 48, 49, 0.6);
  border: 2px solid rgba(214, 48, 49, 0.9);
}

.legend-item.new .legend-dot {
  background: rgba(108, 92, 231, 0.6);
  border: 2px solid rgba(108, 92, 231, 0.9);
}

.overlap-info {
  background: rgba(253, 203, 110, 0.1);
  padding: 1rem;
  border-left: 4px solid #fdcb6e;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.alternatives-section h3 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.alternative-event {
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 4px solid var(--primary-color);
  transition: var(--transition);
}

.alternative-event:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(5px);
}

.alt-header {
  margin-bottom: 0.5rem;
}

.alt-header h4 {
  color: #fff;
  margin: 0;
  font-size: 1rem;
}

.alternative-event p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

.swap-button {
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.swap-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.4);
}

.no-alternatives {
  background: rgba(253, 203, 110, 0.1);
  padding: 1rem;
  border-left: 4px solid #fdcb6e;
  border-radius: 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.conflict-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Conflict Modal Text Visibility */
#conflict-details p,
#conflict-details h2,
#conflict-details h3,
#conflict-details h4 {
  color: rgba(255, 255, 255, 0.95);
}

#conflict-details p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

#conflict-details strong {
  color: #fff;
  font-weight: 600;
}

#alternative-suggestions p {
  color: rgba(255, 255, 255, 0.9);
}

/* Past Events */
.timeline-section {
  position: relative;
  padding: 3rem 0;
}

.timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}

.timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.timeline-item {
  padding: 1rem 2rem;
  position: relative;
  width: 50%;
  margin-bottom: 3rem;
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 2rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  z-index: 1;
}

.timeline-item.left {
  left: 0;
}

.timeline-item.left::after {
  right: -10px;
}

.timeline-item.right {
  left: 50%;
}

.timeline-item.right::after {
  left: -10px;
}

.timeline-content {
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.timeline-item:hover .timeline-content {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(253, 121, 168, 0.3);
}

.timeline-date {
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-event {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.timeline-description {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.timeline-club {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.timeline-club.tech {
  background: rgba(108, 92, 231, 0.2);
  color: #6c5ce7;
}

.timeline-club.arts {
  background: rgba(253, 121, 168, 0.2);
  color: #fd79a8;
}

.timeline-club.debate {
  background: rgba(0, 184, 148, 0.2);
  color: #00b894;
}

.timeline-club.music {
  background: rgba(255, 234, 167, 0.2);
  color: #fdcb6e;
}

.timeline-club.sports {
  background: rgba(255, 118, 117, 0.2);
  color: #ff7675;
}

.timeline-club.science {
  background: rgba(116, 185, 255, 0.2);
  color: #74b9ff;
}

.timeline-gallery {
  margin-top: 1.5rem;
  overflow: hidden;
}

.gallery-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}

.gallery-scroll img {
  scroll-snap-align: start;
  min-width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  transition: var(--transition);
}

.gallery-scroll img:hover {
  transform: scale(1.05);
}

.timeline-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Highlights Section */
.highlights-section {
  margin-top: 4rem;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.highlight-card {
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.highlight-media {
  height: 250px;
  position: relative;
  overflow: hidden;
}

.highlight-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-slider {
  position: relative;
  height: 100%;
}

.image-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-slider img.active {
  opacity: 1;
}

.highlight-content {
  padding: 1.5rem;
}

.highlight-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.highlight-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.highlight-stats {
  display: flex;
  gap: 1.5rem;
  color: var(--accent-color);
  font-size: 0.9rem;
}

.highlight-stats span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Registration Page */
.registration-tabs {
  background: rgba(26, 26, 46, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-button {
  flex: 1;
  padding: 1rem;
  text-align: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.tab-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent-color);
  transition: var(--transition);
}

.tab-button.active {
  color: white;
}

.tab-button.active::after {
  width: 100%;
}

.tab-content {
  padding: 2rem;
  display: none;
}

.tab-content.active {
  display: block;
}

.registration-form {
  max-width: 800px;
  margin: 0 auto;
}

/* Checkbox group layout */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Single checkbox row */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.2;
  user-select: none;
}

/* Hide native checkbox */
.checkbox-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox box */
/* Checkbox box */
.checkmark {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.2s ease;
}

/* Tick */
.checkmark::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

/* Checked state */
.checkbox-item input:checked+.checkmark {
  background: #fd79a8;
  border-color: #fd79a8;
}

.checkbox-item input:checked+.checkmark::after {
  display: block;
}

/* Label text */
.checkbox-text {
  display: flex;
  align-items: center;
}

.checkbox-container:hover input~.checkmark {
  background: rgba(255, 255, 255, 0.2);
}

.checkbox-container input:checked~.checkmark {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

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

.checkbox-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.submit-button {
  padding: 0.8rem 2rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.cancel-button {
  padding: 0.8rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.cancel-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Event Selection */
.event-selection {
  background: rgba(26, 26, 46, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-filters {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.filter-group {
  flex: 1;
}

.filter-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.filter-group select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-family: var(--font-main);
}

.event-list {
  display: grid;
  gap: 1.5rem;
}

.event-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 1.5rem;
  transition: var(--transition);
  border: 1px solid transparent;
}

.event-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.event-club {
  padding: 0.2rem 0.8rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

.event-club.tech {
  background: rgba(108, 92, 231, 0.2);
  color: #6c5ce7;
}

.event-club.arts {
  background: rgba(253, 121, 168, 0.2);
  color: #fd79a8;
}

.event-club.debate {
  background: rgba(0, 184, 148, 0.2);
  color: #00b894;
}

.event-club.music {
  background: rgba(255, 234, 167, 0.2);
  color: #fdcb6e;
}

.event-club.sports {
  background: rgba(255, 118, 117, 0.2);
  color: #ff7675;
}

.event-club.science {
  background: rgba(116, 185, 255, 0.2);
  color: #74b9ff;
}

.event-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.event-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.event-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.event-details {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.register-button {
  padding: 0.6rem 1.5rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.register-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.hidden {
  display: none;
}

/* Admin Login */
.admin-login-container {
  max-width: 500px;
  margin: 5rem auto;
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.admin-login-title {
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  font-family: var(--font-heading);
  font-size: 2rem;
}

.admin-login-form .form-group {
  margin-bottom: 1.5rem;
}

.admin-login-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.admin-login-form input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-family: var(--font-main);
}

.admin-login-form button {
  width: 100%;
  padding: 1rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
}

.admin-login-form button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Responsive Styles */
@media (max-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }

  .timeline-item {
    width: 100%;
    padding-left: 4rem;
    padding-right: 0;
  }

  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 20px;
  }

  .timeline-item.right {
    left: 0;
  }

  .timeline-line {
    left: 40px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-planets {
    display: none;
  }

  .event-details {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .calendar-day {
    min-height: 60px;
    padding: 0.5rem;
  }

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

  .tab-buttons {
    flex-direction: column;
  }
}

/* Club Card Hover Animation */
.club-card:hover {
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }

  100% {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}

/* Gallery Scroll Animation */
.gallery-scroll {
  scroll-behavior: smooth;
}

.gallery-scroll img {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.gallery-scroll img:hover {
  transform: scale(1.05) rotate(1deg);
  opacity: 0.9;
}

/* Timeline Animation */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button Hover Animation */
.action-button:hover,
.submit-button:hover,
.register-button:hover {
  animation: buttonGlow 1.5s infinite alternate;
}

@keyframes buttonGlow {
  0% {
    box-shadow: 0 0 10px rgba(253, 121, 168, 0.5);
  }

  100% {
    box-shadow: 0 0 20px rgba(253, 121, 168, 0.8);
  }
}

/* Modal Entrance Animation */
.modal-content {
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Testimonial Slide Animation */
.testimonial-slide {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.testimonial-slide.next {
  transform: translateX(100%);
}

.testimonial-slide.prev {
  transform: translateX(-100%);
}

.testimonial-slide.active {
  transform: translateX(0);
}

/* Floating Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

/* Twinkling Stars */
.twinkle {
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* Rotating Animation */
.rotate {
  animation: rotate 10s linear infinite;
}

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

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

/* Bounce Animation */
.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {

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

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

/* Fade In Animation */
.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slide Up Animation */
.slide-up {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pulse Animation */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Gradient Border Animation */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #6c5ce7, #fd79a8, #00cec9);
  z-index: -1;
  border-radius: inherit;
  background-size: 200% 200%;
  animation: gradientMove 3s ease infinite;
}

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

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

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

/* Calendar Specific Styles */
.calendar-container {
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.calendar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
}

.calendar-nav-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.calendar-nav-button:hover {
  background: var(--accent-color);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-weekday {
  text-align: center;
  padding: 0.5rem;
  font-weight: 600;
  color: var(--accent-color);
}

.calendar-day {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.8rem;
  min-height: 100px;
  transition: var(--transition);
  border: 1px solid transparent;
}

.calendar-day:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
}

.calendar-day.empty {
  background: transparent;
  border: none;
}

.day-number {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.day-number.today {
  color: var(--accent-color);
  font-weight: 700;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.day-event {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.day-event.tech {
  background: rgba(108, 92, 231, 0.3);
  border-left: 3px solid #6c5ce7;
}

.day-event.arts {
  background: rgba(253, 121, 168, 0.3);
  border-left: 3px solid #fd79a8;
}

.day-event.debate {
  background: rgba(0, 184, 148, 0.3);
  border-left: 3px solid #00b894;
}

.day-event.music {
  background: rgba(255, 234, 167, 0.3);
  border-left: 3px solid #ffeaa7;
}

.day-event.sports {
  background: rgba(255, 118, 117, 0.3);
  border-left: 3px solid #ff7675;
}

.day-event.science {
  background: rgba(116, 185, 255, 0.3);
  border-left: 3px solid #74b9ff;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: white;
}

.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

.legend-color.tech {
  background: #6c5ce7;
}

.legend-color.arts {
  background: #fd79a8;
}

.legend-color.debate {
  background: #00b894;
}

.legend-color.music {
  background: #ffeaa7;
}

.legend-color.sports {
  background: #ff7675;
}

.legend-color.science {
  background: #74b9ff;
}

/* Event Details Popup */
.event-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.event-popup.active {
  opacity: 1;
  visibility: visible;
}

.event-popup-content {
  background: rgba(26, 26, 46, 0.95);
  border-radius: 15px;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(-20px);
  transition: var(--transition);
}

.event-popup.active .event-popup-content {
  transform: translateY(0);
}

.event-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: var(--transition);
}

.event-popup-close:hover {
  color: var(--accent-color);
}

.event-popup-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: white;
}

.event-popup-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.event-popup-description {
  margin-bottom: 2rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.event-popup-actions {
  display: flex;
  gap: 1rem;
}

.event-popup-button {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.event-popup-button.primary {
  background: var(--gradient);
  color: white;
}

.event-popup-button.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.event-popup-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Admin Login Styles */
.admin-login-container {
  display: flex;
  min-height: calc(100vh - 80px);
  padding: 2rem 5%;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  margin-top: 80px;
}

.admin-login-card {
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(253, 121, 168, 0.2);
  z-index: 1;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.admin-login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.admin-login-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(253, 121, 168, 0.1);
  border: 2px solid rgba(253, 121, 168, 0.3);
}

.admin-login-title {
  font-size: 2.5rem;
  font-family: var(--font-heading);
  color: white;
  margin-bottom: 0.5rem;
}

.admin-login-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-with-icon {
  position: relative;
}

.input-with-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
}

.input-with-icon input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 3rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-family: var(--font-main);
  transition: var(--transition);
}

.input-with-icon input:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
}

.toggle-password {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition);
}

.toggle-password,
.toggle-confirm-password {
  color: var(--accent-color);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -0.5rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
}

.remember-me input {
  opacity: 0;
  position: absolute;
}

.checkmark {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transition: var(--transition);
}

.remember-me input:checked~.checkmark {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.remember-me input:checked~.checkmark:after {
  display: block;
}

.forgot-password {
  color: var(--accent-color);
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-button {
  padding: 1rem;
  background: var(--gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.login-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.4);
}

.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  margin-top: 1.5rem;
}

.login-security i {
  color: var(--success-color);
}

.admin-login-footer {
  text-align: center;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.admin-login-footer a {
  color: var(--accent-color);
  text-decoration: none;
}

.admin-login-footer a:hover {
  text-decoration: underline;
}

/* Admin Login Graphics */
.admin-login-graphics {
  position: relative;
  width: 400px;
  height: 400px;
  display: none;
  /* Hidden on mobile */
  display: none;
  /* Hidden on mobile */
}

.graphic-planet {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6c5ce7, #a29bfe);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float 6s ease-in-out infinite;
  box-shadow: 0 0 50px rgba(108, 92, 231, 0.5);
}

.graphic-astronaut {
  position: absolute;
  width: 120px;
  height: 180px;
  top: 40%;
  left: 60%;
  animation: float 4s ease-in-out infinite reverse;
  transform-style: preserve-3d;
}

.astronaut-helmet {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  top: 0;
  left: 20px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.astronaut-helmet::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 40px;
  background: rgba(26, 26, 46, 0.7);
  border-radius: 20px;
  top: 20px;
  left: 10px;
}

.astronaut-body {
  position: absolute;
  width: 70px;
  height: 100px;
  background: white;
  border-radius: 20px;
  top: 70px;
  left: 25px;
}

/* Responsive Styles */
@media (min-width: 992px) {
  .admin-login-graphics {
    display: block;
  }
}

@media (max-width: 768px) {
  .admin-login-container {
    padding: 2rem;
  }

  .admin-login-card {
    padding: 2rem;
  }
}

@media (max-width: 576px) {
  .admin-login-title {
    font-size: 2rem;
  }

  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* =====================================================
   FIX: Add New Event Modal – Form Visibility & Contrast
   Issue #35 | SWoC 2026
   ===================================================== */

/* Modal title visibility */
#modal-title {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Form labels – brighter & clearer */
.modal-content .form-group label {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  opacity: 1;
}

/* Input, select & textarea text visibility */
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Placeholder styling (different from user text) */
.modal-content .form-group input::placeholder,
.modal-content .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Focus state – strong visual feedback */
.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(253, 121, 168, 0.3);
}

/* Select dropdown arrow visibility (dark mode) */
.modal-content select option {
  background: #1a1a2e;
  color: #ffffff;
}

/* Improve spacing between form elements */
.modal-content .form-group {
  margin-bottom: 1.8rem;
}

/* Buttons clarity */
.modal-content .modal-button {
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

/* Delete button better contrast */
.modal-content .modal-button.danger {
  background: rgba(214, 48, 49, 0.25);
  color: #ff7675;
  border: 1px solid rgba(214, 48, 49, 0.6);
}

/* =========================
   FAQ SECTION
========================= */
.faq-wrapper {
  padding: 100px 20px;
  min-height: 100vh;
  text-align: center;
}

.faq-wrapper h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.faq-subtitle {
  color: #cbd5f5;
  margin-bottom: 50px;
}

.faq-grid {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.faq-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.faq-card:hover {
  transform: translateY(-5px);
}

.faq-card h3 {
  color: white;
  margin-bottom: 12px;
}

/* ✅ ANSWERS ALWAYS VISIBLE */
.faq-answer {
  display: block;
  /* changed from none */
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.12);
  padding: 15px;
  border-radius: 8px;
  line-height: 1.6;
  font-size: 0.95rem;
}


/* ❌ removed .faq-card.active logic */


/* ================= CHATBOT FIX ================= */

.chatbot-icon {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
  color: white;
  padding: 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99999;
  /* 🔥 VERY IMPORTANT */
  box-shadow: 0 0 15px rgba(253, 121, 168, 0.6);
}

/* Chatbox */
.chatbot-box {
  position: fixed;
  bottom: 90px;
  right: 25px;
  width: 320px;
  background: #0f172a;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  z-index: 99999;
  /* 🔥 FIX */
  overflow: hidden;
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
  padding: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  color: white;
}

/* Body */
.chat-body {
  height: 220px;
  overflow-y: auto;
  padding: 10px;
  color: white;
}

.chat-body .bot {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.chat-body .user {
  background: #fd79a8;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-align: right;
}

/* Input */
.chat-input {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-input input {
  flex: 1;
  padding: 8px;
  border: none;
  outline: none;
}

.chat-input button {
  background: #6c5ce7;
  color: white;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
}

/* =========================
   RESPONSIVE
*/
@media (max-width: 768px) {
  .faq-wrapper h1 {
    font-size: 2.3rem;
  }
}


/* ===========================
   FAQ VISIBILITY FIX
 */

.faq-wrapper {
  background: transparent;
  color: white;
}

.faq-wrapper h1 {
  color: white;
}

.faq-subtitle {
  color: #cbd5f5;
}

.faq-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  color: white;
}

.faq-card h3 {
  color: white;
}

.faq-answer {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.12);
}

.navbar {
  background: rgba(15, 23, 42, 0.9);
}

.nav-links a {
  color: white !important;
}

.nav-links a.active {
  border-bottom: 2px solid #fd79a8;
}

/* Club Details Page */
.club-details-section {
  padding: 6rem 5%;
  min-height: 60vh;
}

.club-details-container {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.club-header {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.club-icon-large {
  font-size: 4rem;
  margin-right: 2rem;
}

.club-info h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.club-info p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.club-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.club-activities,
.club-membership,
.club-contact {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.club-activities h3,
.club-membership h3,
.club-contact h3 {
  color: var(--accent-color);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.club-activities ul,
.club-membership ul {
  list-style: none;
  padding: 0;
}

.club-activities li,
.club-membership li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.club-activities li:last-child,
.club-membership li:last-child {
  border-bottom: none;
}

.club-contact p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.club-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.join-club-btn,
.back-btn {
  background: var(--gradient);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.join-club-btn:hover,
.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(253, 121, 168, 0.3);
}

.back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-btn:hover {

  background: rgba(255, 255, 255, 0.2);

}

.contact-wrapper {
  min-height: 100vh;
  padding: 120px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
  color: white;
}

.contact-subtitle {
  color: #cbd5f5;
  margin-bottom: 40px;
}

.contact-card {
  max-width: 500px;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  padding: 30px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: none;
  outline: none;
}

.contact-form button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6a5acd, #8a7cfb);
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* Scroll Button Smaller */
#scrollTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg);
  color: var(--deep-navy);
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35);
  display: none;
  transition: all 0.35s ease;
  z-index: 999;
}

/* Realistic Theme Switch Button */
.theme-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
  backdrop-filter: blur(5px);
}

.theme-btn:hover {
  transform: scale(1.1) rotate(15deg);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
}

.theme-btn i {
  font-size: 1.2rem;
  color: #ffd700;
  /* Gold for sun/moon */
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.theme-btn:active {
  transform: scale(0.95);
}

/* Language Dropdown Styles */
.language-dropdown {
  position: relative;
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(108, 92, 231, 0.3);
  border-radius: 12px;
  padding: 8px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10001;
  pointer-events: none;
}

.language-menu.active {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-main);
  font-size: 0.95rem;
}

.language-option:hover {
  background: rgba(108, 92, 231, 0.2);
  color: #fff;
  transform: translateX(4px);
}

.language-option:active {
  transform: scale(0.98);
}

.language-option.selected {
  background: rgba(108, 92, 231, 0.3);
  color: #fff;
  border-left: 3px solid #6c5ce7;
}

.lang-flag {
  font-size: 1.4rem;
  line-height: 1;
}

.lang-name {
  font-weight: 500;
}

/* ===========================
   EVENT FEEDBACK MODAL STYLES
   =========================== */

/* Base Styles (Cosmic Dark Theme) */
.feedback-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.feedback-modal-content {
  background: rgba(15, 23, 42, 0.95);
  padding: 30px;
  width: 420px;
  max-width: 90%;
  border-radius: 16px;
  color: #fff;
  border: 1px solid rgba(108, 92, 231, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.feedback-close-btn {
  float: right;
  cursor: pointer;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.7);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.feedback-close-btn:hover {
  color: #fd79a8;
  transform: scale(1.1);
}

.feedback-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: white;
}

.feedback-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.feedback-form-field {
  width: 100%;
  padding: 12px;
  margin: 6px 0 12px 0;
  background: rgba(108, 92, 231, 0.1) !important;
  border: 1px solid rgba(108, 92, 231, 0.3) !important;
  color: white !important;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.feedback-form-field:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  background: rgba(108, 92, 231, 0.2) !important;
}

.feedback-form-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.feedback-textarea {
  height: 100px;
  resize: vertical;
}

.feedback-submit-btn {
  margin-top: 16px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.feedback-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

.feedback-response {
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
}

/* Feedback Success Card */
.success-card {
  display: none;
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.success-card.show-success {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: slideUpFadeIn 0.4s ease forwards;
}

.success-card-content {
  background: linear-gradient(135deg, #00b894, #55efc4);
  color: #1a1a2e;
  padding: 1rem 2rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 184, 148, 0.4);
  font-weight: 600;
  font-size: 1.05rem;
}

.success-card-content .success-icon {
  font-size: 1.4rem;
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ===========================
   Light Mode - Feedback Modal
   =========================== */
body.light-mode .feedback-modal-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #2d3436;
  border: 1px solid rgba(108, 92, 231, 0.2);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .feedback-close-btn {
  color: #636e72;
}

body.light-mode .feedback-close-btn:hover {
  color: #d63031;
}

body.light-mode .feedback-title {
  color: #2d3436;
}

body.light-mode .feedback-label {
  color: #2d3436;
}

body.light-mode .feedback-form-field {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #2d3436 !important;
}

body.light-mode .feedback-form-field:focus {
  border-color: var(--primary-color) !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

body.light-mode .feedback-form-field::placeholder {
  color: #b2bec3;
}

/* ===========================
   OLED Mode - Feedback Modal
   =========================== */
body.oled-mode .feedback-modal-content {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

body.oled-mode .feedback-form-field {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.oled-mode .feedback-form-field:focus {
  background: #222 !important;
  border-color: var(--accent-color) !important;
}

/* ===========================
   THEME MODES
   1. Original (Default) - Cosmic Dark
   2. Light Mode - Creamy
   3. OLED Mode - Pitch Black
   =========================== */

/* --- Light Mode (Creamy) --- */
/* Clouds and Sun for Light Mode */
body.light-mode .stars-background {
  opacity: 1;
  visibility: visible;
  background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 30%, #fcfbf7 60%);
  overflow: hidden;
}

body.light-mode .stars-background::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 80px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffd700 0%, #ffa500 50%, transparent 70%);
  border-radius: 50%;
  box-shadow:
    0 0 60px 20px rgba(255, 215, 0, 0.4),
    0 0 100px 40px rgba(255, 165, 0, 0.2);
  animation: none;
  filter: none;
  opacity: 1;
}

/* Cloud animations container */
body.light-mode .stars-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><ellipse cx="50" cy="35" rx="25" ry="12" fill="white" opacity="0.9"/><ellipse cx="35" cy="30" rx="18" ry="10" fill="white" opacity="0.9"/><ellipse cx="65" cy="32" rx="15" ry="9" fill="white" opacity="0.9"/><ellipse cx="45" cy="25" rx="12" ry="8" fill="white" opacity="0.9"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40"><ellipse cx="40" cy="28" rx="20" ry="10" fill="white" opacity="0.85"/><ellipse cx="28" cy="24" rx="14" ry="8" fill="white" opacity="0.85"/><ellipse cx="52" cy="25" rx="12" ry="7" fill="white" opacity="0.85"/><ellipse cx="38" cy="20" rx="10" ry="6" fill="white" opacity="0.85"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><ellipse cx="60" cy="42" rx="30" ry="14" fill="white" opacity="0.8"/><ellipse cx="42" cy="36" rx="22" ry="12" fill="white" opacity="0.8"/><ellipse cx="78" cy="38" rx="18" ry="10" fill="white" opacity="0.8"/><ellipse cx="55" cy="30" rx="15" ry="9" fill="white" opacity="0.8"/></svg>');
  background-size:
    200px 100px,
    150px 75px,
    250px 125px;
  background-position:
    0% 10%,
    25% 25%,
    60% 5%;
  background-repeat: repeat-x;
  animation: floatClouds 60s linear infinite;
  opacity: 1;
  filter: none;
  pointer-events: none;
}

@keyframes floatClouds {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

body.light-mode {
  background-color: #fcfbf7;
  /* Creamy White */
  color: #2d3436;
}

body.light-mode .cosmic-nav {
  background: rgba(252, 251, 247, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* FIX: Override !important from earlier CSS */
body.light-mode .nav-logo,
body.light-mode .nav-links a {
  color: #2d3436 !important;
}

body.light-mode .nav-hamburger .line {
  background: #2d3436;
}

body.light-mode .hero-title,
body.light-mode .section-title,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #2d3436;
  /* Ensure all headings are dark */
}

body.light-mode .hero-subtitle,
body.light-mode .club-card p,
body.light-mode p {
  color: #636e72;
}

body.light-mode .club-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #2d3436;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .club-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-color);
}

body.light-mode .club-tags span {
  background: rgba(108, 92, 231, 0.1);
  color: var(--primary-color);
}

body.light-mode .favorite-toggle {
  color: #b2bec3;
}

body.light-mode .favorite-toggle:hover {
  color: var(--accent-color);
}

body.light-mode .cosmic-footer {
  background: #f1f2f6;
  color: #2d3436;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .footer-column a {
  color: #636e72 !important;
}

body.light-mode .footer-column a:hover {
  color: var(--primary-color) !important;
}

body.light-mode .footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #b2bec3;
}

/* Form Elements Light Mode */
body.light-mode input:not([type="submit"]),
body.light-mode textarea,
body.light-mode select {
  background: white !important;
  color: #2d3436 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: #b2bec3;
}

/* Admin Dashboard & Tables Light Mode */
body.light-mode .admin-sidebar {
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .admin-sidebar .profile-info h3,
body.light-mode .admin-sidebar .profile-info p {
  color: #2d3436;
}

body.light-mode .admin-menu li a {
  color: #636e72;
}

body.light-mode .admin-menu li.active a,
body.light-mode .admin-menu li a:hover {
  background: rgba(108, 92, 231, 0.1);
  color: var(--primary-color);
}

body.light-mode .stat-card,
body.light-mode .chart-container,
body.light-mode .dashboard-grid>div {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #2d3436;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.light-mode .admin-table {
  background: white;
  color: #2d3436;
}

body.light-mode .admin-table th {
  background: #f1f2f6;
  color: #2d3436;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .admin-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #2d3436;
}

body.light-mode .admin-table tr:hover {
  background: #f8f9fa;
}

/* Button & Icon Colors for Light Mode */
body.light-mode .theme-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .theme-btn i {
  color: #f39c12;
  /* Sun */
}

/* Language dropdown light mode */
body.light-mode .language-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light-mode .language-option {
  color: #2d3436;
}

body.light-mode .language-option:hover {
  background: rgba(108, 92, 231, 0.1);
  color: var(--primary-color);
}

/* FIX: Timeline & Event Actions in Light Mode */
body.light-mode .timeline-line {
  background: rgba(45, 52, 54, 0.3) !important;
}

body.light-mode .timeline-content {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #2d3436 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .timeline-description {
  color: #636e72 !important;
}

body.light-mode .timeline-date {
  color: var(--primary-color) !important;
}

body.light-mode .action-button {
  background: white;
  color: #2d3436;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.light-mode .action-button:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .highlight-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #2d3436;
}

body.light-mode .highlight-content p {
  color: #636e72;
}

/* FIX: Universal Light Mode Text Visibility */
body.light-mode .tab-button {
  color: #636e72;
}

body.light-mode .tab-button.active {
  color: var(--primary-color);
}

body.light-mode .checkbox-item {
  color: #2d3436;
}

body.light-mode .form-group label {
  color: #2d3436;
}

body.light-mode .event-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.light-mode .event-date {
  color: #636e72;
}

body.light-mode .event-title {
  color: #2d3436;
}

body.light-mode .event-description {
  color: #636e72;
}

/* FIX: Timeline Event Title in Light Mode */
body.light-mode .timeline-date {
  color: var(--primary-color) !important;
}

body.light-mode .timeline-event {
  color: #2d3436 !important;
}

body.light-mode .highlight-content h3 {
  color: #2d3436 !important;
}

body.light-mode .event-details {
  color: #636e72;
}

body.light-mode .no-event-selected {
  color: rgba(255, 255, 255, 0.9);
}

body.light-mode .calendar-header {
  color: #2d3436;
  font-weight: bold;
}

body.light-mode .calendar-day {
  background: rgba(0, 0, 0, 0.02);
  color: #2d3436;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .calendar-day:hover {
  background: rgba(108, 92, 231, 0.1);
}

body.light-mode .calendar-day.empty {
  background: transparent;
  border: none;
}

body.light-mode .modal-content {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #2d3436;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

body.light-mode .close-modal {
  color: #636e72;
}

body.light-mode .close-modal:hover {
  color: #2d3436;
}

body.light-mode .modal-header h2,
body.light-mode #modal-title {
  color: #2d3436;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-mode textarea {
  background: white !important;
  color: #2d3436 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* FAQ Light Mode Fixes */
body.light-mode .faq-wrapper h1 {
  color: #2d3436;
}

body.light-mode .faq-subtitle {
  color: #636e72;
}

body.light-mode .faq-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .faq-card h3 {
  color: #2d3436;
}

body.light-mode .faq-answer {
  background: #f1f2f6;
  color: #2d3436;
}

/* --- OLED Mode (Pitch Black) --- */
/* --- OLED Mode (Pitch Black) --- */
/* FIX: Show Stars in OLED Mode, but ensure background is black */
body.oled-mode .stars-background {
  opacity: 1;
  visibility: visible;
  /* Use simple black background for OLED, removing the gradient but keeping stars */
  background: #000000;
}

/* Ensure the ::before pseudo element (which has the SVG stars) is visible */
body.oled-mode .stars-background::before {
  opacity: 1;
  /* Make stars fully opaque for better visibility */
  filter: none;
  /* Ensure no inversion */
}

body.oled-mode {
  background-color: #000000;
  color: #ffffff;
}

body.oled-mode .cosmic-nav {
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* OLED Mode Cards - Slight lift from pure black to be visible */
body.oled-mode .clubs-section,
body.oled-mode .club-card,
body.oled-mode .event-card,
body.oled-mode .highlight-card,
body.oled-mode .timeline-content,
body.oled-mode .testimonials-section,
body.oled-mode .calendar-section,
body.oled-mode .event-details-section,
body.oled-mode .registration-tabs,
body.oled-mode .event-selection,
body.oled-mode .calendar-container,
body.oled-mode .event-popup-content,
body.oled-mode .admin-login-card,
body.oled-mode .faq-card,
body.oled-mode .admin-login-container,
body.oled-mode .modal-content,
body.oled-mode .login-container .modal-content,
body.oled-mode .cosmic-footer {
  background: #000000;
  /* Pitch black for OLED */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

body.oled-mode .club-card:hover,
body.oled-mode .event-card:hover,
body.oled-mode .highlight-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 15px rgba(253, 121, 168, 0.2);
  transform: translateY(-5px);
  background: #111;
}

/* OLED Mode Inputs - Make them distinct from card background */
body.oled-mode input,
body.oled-mode textarea,
body.oled-mode select {
  background: #1a1a1a !important;
  /* Visible dark grey input background */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.oled-mode input::placeholder,
body.oled-mode textarea::placeholder {
  color: #888;
}

body.oled-mode input:focus,
body.oled-mode textarea:focus,
body.oled-mode select:focus {
  border-color: var(--accent-color) !important;
  background: #222 !important;
}

body.oled-mode .theme-btn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #111;
}

body.oled-mode .theme-btn i {
  color: #ffffff;
  /* Moon */
}

/* Ensure timeline dates and headers are white/bright in OLED */
body.oled-mode .timeline-date {
  color: var(--accent-color) !important;
}

body.oled-mode .timeline-event {
  color: white !important;
}


.error-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.error-popup-content {
  background: #1e1e2f;
  padding: 25px 35px;
  border-radius: 12px;
  text-align: center;
  color: white;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

.error-popup-content button {
  margin-top: 15px;
  padding: 6px 15px;
  border: none;
  border-radius: 6px;
  background: #ff4d4d;
  color: white;
  cursor: pointer;
}

.logo-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Blog Styles */
.small-hero {
  height: 50vh;
  min-height: 400px;
  justify-content: center;
  text-align: center;
  padding-top: 100px;
}

.blog-container {
  padding: 2rem 5%;
  max-width: 1400px;
  margin: 0 auto;
}

.blog-controls {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-wrapper input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(5px);
  font-size: 1rem;
}

.search-wrapper i {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--gradient);
  border-color: transparent;
}

.blog-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-post-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.blog-post-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
}

.post-image {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.post-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.post-title {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: white;
}

.post-excerpt {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  flex: 1;
}

.post-tags span {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-right: 4px;
}

.post-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-btn:hover {
  color: var(--accent-color);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(5px);
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: #1a1a2e;
  /* Fallback */
  background: rgba(26, 26, 46, 0.95);
  padding: 2rem;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-family: inherit;
}

/* FAB */
.fab-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.fab-float:hover {
  transform: scale(1.1);
}

/* Light mode adjustments override */
body.light-mode .blog-post-card {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-color);
}

body.light-mode .post-title {
  color: var(--text-color);
}

body.light-mode .post-excerpt,
body.light-mode .post-meta {
  color: var(--text-light);
}

body.light-mode .like-btn {
  color: var(--text-color);
}

body.light-mode .search-wrapper input {
  background: white;
  color: black;
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .filter-btn {
  color: var(--text-color);
  border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .modal-content {
  background: white;
  color: black;
}

body.light-mode .form-group input,
body.light-mode .form-group textarea,
body.light-mode .form-group select {
  background: #f5f6fa;
  color: black;
  border-color: #ddd;
}

body.light-mode .close-modal {
  color: black;
}


/* Blog Theme Fixes for Campus Voices */
body.light-mode .small-hero .hero-title {
  color: #2d3436 !important;
}

body.light-mode .small-hero .hero-subtitle {
  color: #636e72 !important;
}

body.oled-mode .small-hero .hero-title {
  color: #ffffff !important;
}

body.oled-mode .small-hero .hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure gradient text works in all modes */
.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}


/* Creative Button Style */
.cta-button {
  background: var(--gradient);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(253, 121, 168, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.cta-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(253, 121, 168, 0.6);
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Fix Scrollbar Color */
.modal-content {
  scrollbar-color: var(--accent-color) rgba(255, 255, 255, 0.1) !important;
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--accent-color) !important;
  border-radius: 10px;
  border: 2px solid rgba(26, 26, 46, 0.8);
  /* Optional contrast border */
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color) !important;
}

/* Footer Install Button Theme Adjustments */
#footer-install-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: normal !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-top: 0 !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  text-align: left !important;
  height: auto !important;
  line-height: normal !important;
}

#footer-install-btn i {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
}

#footer-install-btn:hover {
  color: var(--accent-color) !important;
  transform: translateX(3px) !important;
}

body.light-mode #footer-install-btn {
  color: var(--text-color) !important;
}

body.light-mode #footer-install-btn i {
  color: var(--text-color) !important;
}

/* Scroll to Top Button Style */
#scrollTopBtn,
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  border: none;
  cursor: pointer;
  display: none;
  /* Controlled by JS */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}

#scrollTopBtn:hover,
#backToTop:hover {
  transform: translateY(-5px);
  filter: brightness(1.1);
}

/* Ensure no space at bottom */
html,
body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Nav Login Button Style */
.nav-login-btn {
  background: var(--gradient);
  color: white !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
}

.nav-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.5);
}

.nav-login-btn::after {
  display: none !important;
}

/* ============================================================
   DISCUSSION FORUM STYLES
   ============================================================ */

/* --- Stats Bar --- */
.forum-stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 5%;
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.stat-item i {
  font-size: 1.1rem;
  color: var(--accent-color);
}

.stat-item span:first-of-type {
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Forum Container --- */
.forum-container {
  padding: 2rem 5%;
  max-width: 1400px;
  margin: 0 auto;
}

/* --- Forum Controls --- */
.forum-controls {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}

.forum-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sort-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.sort-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sort-select:hover {
  border-color: var(--accent-color);
}

.sort-select option {
  background: #1a1a2e;
  color: white;
}

/* --- Forum Layout --- */
.forum-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .forum-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Forum Topics List --- */
.forum-topics-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Topic Card --- */
.forum-topic-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.forum-topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.03), rgba(253, 121, 168, 0.03));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.forum-topic-card:hover {
  transform: translateY(-3px);
  border-color: rgba(253, 121, 168, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(253, 121, 168, 0.1);
}

.forum-topic-card:hover::before {
  opacity: 1;
}

.forum-topic-card.pinned {
  border-color: rgba(253, 121, 168, 0.3);
  background: rgba(253, 121, 168, 0.04);
}

.pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pinned-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--accent-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(253, 121, 168, 0.15);
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
}

/* --- Topic Card Main --- */
.topic-card-main {
  display: flex;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.topic-avatar {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  flex-shrink: 0;
}

.topic-info {
  flex: 1;
  min-width: 0;
}

.topic-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.topic-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.topic-category-badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.7rem;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.topic-card-excerpt {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.topic-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.topic-card-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.topic-card-meta i {
  font-size: 0.72rem;
}

.meta-upvotes i {
  color: var(--success-color);
}

.topic-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.topic-tag {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  background: rgba(162, 155, 254, 0.12);
  color: var(--secondary-color);
  border-radius: 6px;
  font-weight: 500;
}

/* --- Empty State --- */
.forum-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, 0.7);
}

.forum-empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.forum-empty-state h3 {
  color: white;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.forum-empty-state p {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Sidebar --- */
.forum-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.sidebar-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.3rem;
  transition: border-color 0.3s ease;
}

.sidebar-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-card h3 {
  font-size: 0.95rem;
  color: white;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-card h3 i {
  color: var(--accent-color);
  font-size: 0.9rem;
}

/* --- Trending --- */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.trending-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.trending-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.trending-rank {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-color);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.trending-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trending-title {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-stats {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.trending-stats i {
  font-size: 0.65rem;
}

/* --- Contributors --- */
.contributors-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contributor-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}

.contributor-medal {
  font-size: 1rem;
  width: 22px;
  text-align: center;
}

.contributor-avatar {
  font-size: 1.2rem;
}

.contributor-info {
  display: flex;
  flex-direction: column;
}

.contributor-name {
  font-size: 0.82rem;
  color: white;
  font-weight: 600;
}

.contributor-stats {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

/* --- Guidelines --- */
.guidelines-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guidelines-card li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  padding: 0.35rem 0;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.5;
}

.guidelines-card li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-size: 0.6rem;
  top: 0.5rem;
}

/* --- Thread View --- */
.thread-topic-header {
  margin-bottom: 1.5rem;
}

.thread-topic-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.thread-title {
  font-size: 1.6rem;
  font-family: var(--font-heading);
  color: white;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.thread-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.thread-avatar {
  font-size: 1.2rem;
}

.thread-author {
  font-weight: 600;
  color: var(--accent-color);
}

.thread-topic-body {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.thread-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

.thread-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.45rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.thread-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.thread-action-btn.upvoted {
  background: rgba(0, 184, 148, 0.15);
  border-color: rgba(0, 184, 148, 0.3);
  color: var(--success-color);
}

.thread-action-btn.upvoted:hover {
  background: rgba(0, 184, 148, 0.25);
}

/* --- Replies --- */
.thread-replies-section {
  margin-top: 0;
}

.replies-heading {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.replies-heading i {
  color: var(--accent-color);
}

.replies-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.no-replies-text {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 2rem 0;
}

.reply-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1rem;
  transition: border-color 0.3s ease;
}

.reply-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.reply-card.nested {
  margin-left: 0;
  background: rgba(108, 92, 231, 0.04);
  border-color: rgba(108, 92, 231, 0.1);
}

.nested-replies {
  margin-top: 0.6rem;
  margin-left: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(108, 92, 231, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.reply-main {
  display: flex;
  gap: 0.8rem;
}

.reply-avatar {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  flex-shrink: 0;
}

.reply-body {
  flex: 1;
  min-width: 0;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.reply-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.reply-time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.reply-content {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.reply-content .mention {
  color: var(--accent-color);
  font-weight: 600;
  background: rgba(253, 121, 168, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.reply-actions {
  display: flex;
  gap: 0.5rem;
}

.reply-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-family: inherit;
}

.reply-action-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.reply-action-btn.upvoted {
  color: var(--success-color);
}

/* --- Reply Form --- */
.reply-form-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
}

.reply-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.reply-to-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--secondary-color);
  background: rgba(162, 155, 254, 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
}

.cancel-reply-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}

.cancel-reply-btn:hover {
  color: var(--danger-color);
}

/* --- Char Count --- */
.char-count {
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.2rem;
}

/* --- Form Actions Row --- */
.form-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* --- Toast Notification --- */
.forum-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 3000;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.forum-toast:not(.hidden) {
  transform: translateX(-50%) translateY(0);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.5rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.toast-success .toast-content {
  background: rgba(0, 184, 148, 0.2);
  border: 1px solid rgba(0, 184, 148, 0.4);
  color: #55efc4;
}

.toast-error .toast-content {
  background: rgba(214, 48, 49, 0.2);
  border: 1px solid rgba(214, 48, 49, 0.4);
  color: #ff7675;
}

.toast-warning .toast-content {
  background: rgba(253, 203, 110, 0.2);
  border: 1px solid rgba(253, 203, 110, 0.4);
  color: #ffeaa7;
}

/* --- Light Mode Forum --- */
body.light-mode .forum-stats-bar {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .stat-item {
  color: var(--text-color);
}

body.light-mode .stat-label {
  color: var(--text-light);
}

body.light-mode .forum-topic-card {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .forum-topic-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

body.light-mode .topic-card-title {
  color: var(--text-color);
}

body.light-mode .topic-card-excerpt {
  color: var(--text-light);
}

body.light-mode .topic-card-meta {
  color: var(--text-light);
}

body.light-mode .topic-avatar,
body.light-mode .reply-avatar {
  background: rgba(0, 0, 0, 0.04);
}

body.light-mode .sidebar-card {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .sidebar-card h3 {
  color: var(--text-color);
}

body.light-mode .trending-title {
  color: var(--text-color);
}

body.light-mode .trending-stats {
  color: var(--text-light);
}

body.light-mode .contributor-name {
  color: var(--text-color);
}

body.light-mode .contributor-stats {
  color: var(--text-light);
}

body.light-mode .guidelines-card li {
  color: var(--text-light);
}

body.light-mode .sort-select {
  background: white;
  color: var(--text-color);
  border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .sort-select option {
  background: white;
  color: var(--text-color);
}

body.light-mode .sort-label {
  color: var(--text-light);
}

body.light-mode .thread-title {
  color: var(--text-color);
}

body.light-mode .thread-topic-body {
  color: var(--text-color);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .thread-meta {
  color: var(--text-light);
}

body.light-mode .thread-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-light);
}

body.light-mode .thread-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-color);
}

body.light-mode .reply-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .reply-author {
  color: var(--primary-color);
}

body.light-mode .reply-content {
  color: var(--text-color);
}

body.light-mode .reply-time {
  color: var(--text-light);
}

body.light-mode .reply-action-btn {
  color: var(--text-light);
}

body.light-mode .reply-form-container {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .no-replies-text {
  color: var(--text-light);
}

body.light-mode .topic-tag {
  background: rgba(108, 92, 231, 0.08);
  color: var(--primary-color);
}

body.light-mode .reply-to-indicator {
  background: rgba(108, 92, 231, 0.08);
  color: var(--primary-color);
}

body.light-mode .char-count {
  color: var(--text-light);
}

body.light-mode .forum-empty-state {
  color: var(--text-light);
}

body.light-mode .forum-empty-state h3 {
  color: var(--text-color);
}

/* --- OLED Mode Forum --- */
body.oled-mode .forum-topic-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

body.oled-mode .sidebar-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

body.oled-mode .forum-stats-bar {
  background: rgba(0, 0, 0, 0.5);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .forum-stats-bar {
    gap: 1rem;
    padding: 1rem 3%;
  }

  .stat-item span:first-of-type {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .forum-container {
    padding: 1.5rem 3%;
  }

  .topic-card-main {
    flex-direction: column;
    gap: 0.6rem;
  }

  .topic-avatar {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }

  .topic-card-title {
    font-size: 1rem;
  }

  .topic-card-meta {
    gap: 0.6rem;
    font-size: 0.72rem;
  }

  .thread-title {
    font-size: 1.3rem;
  }

  .thread-actions {
    gap: 0.4rem;
  }

  .thread-action-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }

  .nested-replies {
    margin-left: 0.8rem;
    padding-left: 0.6rem;
  }

  .reply-main {
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .forum-stats-bar {
    gap: 0.5rem;
    justify-content: space-between;
  }

  .stat-item {
    flex-direction: column;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.8rem;
  }

  .forum-topic-card {
    padding: 1rem;
  }
}

.feedback-submit-btn,
#feedbackBtn{
  width: auto;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  display: block;
  margin: 0; /* removes centering */
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(26, 26, 46, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  .nav-hamburger {
    display: flex;
    z-index: 1000;
  }
}

/* ============================================================
   E-Certificate Generator Styles
   ============================================================ */

.cert-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.cert-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.cert-form-section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.cert-form .form-group label i {
  margin-right: 0.5rem;
  color: var(--accent-color);
  opacity: 0.8;
}

.cert-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cert-preview-btn {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
}

.cert-preview-btn:hover {
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4) !important;
}

.cert-generate-btn {
  background: linear-gradient(135deg, #00b894, #55efc4) !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
}

.cert-generate-btn:disabled {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.cert-generate-btn:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4) !important;
}

/* Preview Section */
.cert-preview-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  animation: certFadeIn 0.5s ease;
}

@keyframes certFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cert-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cert-preview-header h3 {
  color: white;
  font-size: 1.2rem;
  font-family: var(--font-heading);
}

.cert-preview-header h3 i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.cert-preview-actions {
  display: flex;
  gap: 0.6rem;
}

.cert-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cert-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cert-action-btn i {
  font-size: 0.9rem;
}

#cert-download-png { color: #55efc4; border-color: rgba(85, 239, 196, 0.3); }
#cert-download-png:hover { background: rgba(85, 239, 196, 0.15); border-color: rgba(85, 239, 196, 0.5); }

#cert-download-pdf { color: #fd79a8; border-color: rgba(253, 121, 168, 0.3); }
#cert-download-pdf:hover { background: rgba(253, 121, 168, 0.15); border-color: rgba(253, 121, 168, 0.5); }

.cert-canvas-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cert-canvas-wrapper canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Certificate History */
.cert-history-section {
  max-width: 1100px;
  margin: 2.5rem auto 0;
  animation: certFadeIn 0.5s ease 0.1s both;
}

.cert-history-title {
  color: white;
  font-size: 1.3rem;
  font-family: var(--font-heading);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cert-history-title i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.cert-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.cert-history-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.2rem;
  transition: all 0.3s ease;
  cursor: default;
}

.cert-history-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.cert-history-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(253, 121, 168, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-history-icon i {
  font-size: 1.4rem;
  color: #ffd166;
}

.cert-history-info {
  flex: 1;
  min-width: 0;
}

.cert-history-info h4 {
  color: white;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-history-id {
  color: rgba(255, 215, 100, 0.8);
  font-size: 0.8rem;
  font-family: monospace;
  letter-spacing: 0.5px;
  margin-bottom: 0.15rem;
}

.cert-history-date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.cert-history-view-btn {
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid rgba(108, 92, 231, 0.3);
  color: #a29bfe;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.cert-history-view-btn:hover {
  background: rgba(108, 92, 231, 0.4);
  border-color: rgba(108, 92, 231, 0.6);
  color: white;
  transform: scale(1.1);
}

/* Verification Section */
.cert-verify-section {
  max-width: 700px;
  margin: 3rem auto 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

.cert-verify-section h3 {
  color: white;
  font-family: var(--font-heading);
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
}

.cert-verify-section h3 i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.cert-verify-form {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cert-verify-form input {
  flex: 1;
  min-width: 220px;
  max-width: 380px;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 0.95rem;
  font-family: monospace;
  letter-spacing: 0.5px;
  outline: none;
  transition: all 0.3s ease;
}

.cert-verify-form input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(253, 121, 168, 0.15);
}

.cert-verify-form input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.cert-verify-btn {
  padding: 0.8rem 1.8rem !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
}

.cert-verify-result {
  margin-top: 1.5rem;
  animation: certFadeIn 0.4s ease;
}

.cert-verify-loading {
  color: rgba(255, 255, 255, 0.7);
  padding: 1rem;
}

.cert-verify-loading i {
  margin-right: 0.5rem;
}

.cert-verify-valid {
  background: rgba(0, 184, 148, 0.1);
  border: 1px solid rgba(0, 184, 148, 0.3);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
}

.cert-verify-valid .verify-icon {
  font-size: 2.5rem;
  color: #00b894;
  margin-bottom: 0.8rem;
}

.cert-verify-valid h4 {
  color: #55efc4;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.verify-details {
  text-align: left;
  display: inline-block;
}

.verify-details p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0.35rem 0;
  font-size: 0.92rem;
}

.verify-details p strong {
  color: rgba(255, 215, 100, 0.9);
  margin-right: 0.4rem;
}

.cert-verify-invalid,
.cert-verify-error {
  background: rgba(214, 48, 49, 0.1);
  border: 1px solid rgba(214, 48, 49, 0.3);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
}

.cert-verify-invalid .verify-icon {
  font-size: 2.5rem;
  color: #d63031;
  margin-bottom: 0.8rem;
}

.cert-verify-invalid h4 {
  color: #ff7675;
  font-size: 1.1rem;
}

.cert-verify-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #fdcb6e;
  font-size: 0.95rem;
}

.cert-verify-error i {
  font-size: 1.2rem;
}

/* Toast Notification */
.cert-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  padding: 1rem 1.6rem;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 420px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.cert-toast-show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cert-toast i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cert-toast-success {
  background: rgba(0, 184, 148, 0.2);
  border: 1px solid rgba(0, 184, 148, 0.4);
  color: #55efc4;
}

.cert-toast-warning {
  background: rgba(253, 203, 110, 0.2);
  border: 1px solid rgba(253, 203, 110, 0.4);
  color: #fdcb6e;
}

.cert-toast-error {
  background: rgba(214, 48, 49, 0.2);
  border: 1px solid rgba(214, 48, 49, 0.4);
  color: #ff7675;
}

.cert-toast-info {
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid rgba(108, 92, 231, 0.4);
  color: #a29bfe;
}

/* Responsive */
@media (max-width: 768px) {
  .cert-container {
    padding: 0 0.5rem;
  }

  .cert-form-section {
    padding: 1.2rem;
  }

  .cert-actions {
    flex-direction: column;
  }

  .cert-actions button {
    width: 100%;
  }

  .cert-preview-header {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  .cert-history-grid {
    grid-template-columns: 1fr;
  }

  .cert-verify-form {
    flex-direction: column;
    align-items: stretch;
  }

  .cert-verify-form input {
    max-width: 100%;
  }

  .cert-toast {
    left: 15px;
    right: 15px;
    bottom: 15px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .cert-preview-actions {
    width: 100%;
    justify-content: center;
  }

  .cert-action-btn {
    flex: 1;
    justify-content: center;
  }

  .cert-history-card {
    padding: 1rem;
  }

  .cert-history-icon {
    width: 42px;
    height: 42px;
  }
}

/* ✅ LIGHT MODE MOBILE NAV FIX */
@media (max-width: 768px) {
  body.light-mode .cosmic-nav .nav-links a {
    color: #2d3436;
  }

  body.light-mode .nav-hamburger .line {
    background: #2d3436;
  }

  body.light-mode .nav-links a {
    color: #ffffff !important;
  }

}