/* =========================================
   MEMBERSHIP PAGE STYLES (membership.css)
========================================= */

.membership-hero {
  margin-top: 80px;
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.hero-bg-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 60vw;
  background: var(--glow-primary);
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.membership-hero h1 {
  font-size: 3rem;
  color: var(--color-primary);
  text-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.membership-container {
  padding: var(--spacing-xl) 5%;
  max-width: 1300px;
  margin: 0 auto;
}

/* --- Core Leadership Grid --- */
.section-title {
  text-align: center;
  color: var(--color-secondary);
}

.leadership-grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.leader-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  /* Use flex: 1 to fill available space, with min-width for readability and max-width to prevent over-stretching */
  flex: 1 1 280px;
  min-width: 280px;
  max-width: 360px;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Mobile/Tablet Responsive: <= 1070px - Column layout with specific ordering */
@media (max-width: 1071px) {
  .leadership-grid {
    flex-direction: column;
    align-items: stretch; /* Stretch cards to full width */
    gap: var(--spacing-md);
  }

  .leader-card {
    /* On mobile: full width, but capped at a reasonable max-width */
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Mobile order: Founder (1), President (2), General Secretary (3) */
  .founder-card {
    order: 1;
  }

  .president-card:not(.founder-card) {
    order: 2;
    transform: scale(1);
  }

  .president-card:not(.founder-card):hover {
    transform: translateY(-10px);
  }

  .secretary-card {
    order: 3;
  }
}

/* Desktop: >= 1071px - Row layout with President highlighted in center */
@media (min-width: 1071px) {
  .leadership-grid {
    align-items: flex-end;
  }

  .leader-card {
    /* On desktop: flex to fill space equally with min/max bounds */
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 360px;
  }

  /* Desktop order: President (1), Founder (2), General Secretary (3) */
  .president-card:not(.founder-card) {
    order: 1;
    transform: scale(1.05);
    border-color: rgba(255, 209, 102, 0.2);
    z-index: 2;
  }

  .president-card:not(.founder-card):hover {
    transform: scale(1.05) translateY(-10px);
  }

  .founder-card {
    order: 2;
    transform: scale(1);
  }

  .founder-card:hover {
    transform: translateY(-10px);
  }

  .secretary-card {
    order: 3;
  }
}

.leader-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.leader-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, #151b2b 0%, #0b0f19 100%);
  border: 3px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.leader-card h3 {
  font-size: 1.3rem;
  color: var(--text-main);
  margin-bottom: 5px;
}

.leader-role {
  color: var(--color-primary);
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

.read-speech-btn {
  font-size: 0.9rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================
   MODALS FOR SPEECHES (founder / secretary / president)
   Compact size, sticky close button, never clipped.
   ========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
}

/* Compact modal by default (applies to mobile AND desktop). */
.modal-content {
  background: var(--bg-dark);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent);
  width: 90%;
  max-width: 360px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  /* Lay out as a vertical column so the sticky close button can sit at
     the top edge above the heading/body. */
  display: flex;
  flex-direction: column;
}

.modal-overlay.show .modal-content {
  transform: translateY(0);
}

/* --- Close (x) button: sticky inside the modal so it stays at the top
   of the scroll viewport even when the body text is long. Solid
   background matches the modal card so it never visually clashes with
   body text underneath. Compact circular pill (32x32) is much smaller
   than the previous 2rem glyph. --- */
.close-modal {
  position: sticky !important;
  top: 6px !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-bottom: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: var(--bg-dark) !important;
  border: 1px solid rgba(255, 209, 102, 0.35) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast) !important;
  line-height: 1 !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
}

.close-modal:hover {
  color: var(--color-primary) !important;
  background: rgba(230, 57, 70, 0.12) !important;
  transform: scale(1.05) !important;
}

.modal-body p {
  margin-bottom: 12px !important;
  line-height: 1.55 !important;
  color: var(--text-main) !important;
  font-size: 0.92rem !important;
}

.modal-content h2 {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.modal-content h3 {
  font-size: 0.95rem !important;
  margin-bottom: 8px !important;
}

/* --- Big-screen (>=769px) overrides: keep speech boxes MUCH smaller and
   ensure the close (x) stays visible regardless of cascade order. --- */
@media (min-width: 769px) {
  .modal-content {
    max-width: 360px !important;
    max-height: min(560px, calc(100vh - 4rem)) !important;
    width: 90% !important;
    overflow-y: auto !important;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
  }

  /* Explicit per-modal override as a safety net for the three leadership
     speech boxes so the close (x) is never clipped regardless of cascade
     order. */
  #modal-president .modal-content,
  #modal-secretary .modal-content,
  #modal-treasurer .modal-content {
    max-width: 360px !important;
    max-height: min(560px, calc(100vh - 4rem)) !important;
    width: 90% !important;
    overflow-y: auto !important;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
  }
}

/* =========================================
   EXECUTIVE CAROUSEL - Fully Responsive
   ========================================= */

.executive-section {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* The main carousel stack - contains both rows and navigation */
.executive-carousel-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-md);
}

/* Container for both rows - ensures they move together */
.carousel-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-md);
}

/* Individual row wrapper */
.carousel-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Track container - handles overflow and scrolling */
.carousel-track-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* The actual track that moves */
.carousel-track {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 5px 0;
  will-change: transform;
  transition: transform 0.4s ease-in-out;
}

/* Executive cards - width is controlled by CSS custom property set by JS */
.exec-card {
  flex: 0 0 var(--exec-card-width, auto);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-sizing: border-box;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.exec-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.exec-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-card);
  margin: 0 auto 10px;
  border: 2px solid var(--color-secondary);
  background-size: cover;
  background-position: center;
}

.exec-card h4 {
  color: var(--text-main);
  margin-bottom: 5px;
  font-size: 1rem;
}

.exec-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Navigation buttons - positioned outside the track container */
.executive-carousel-stack .pdsmg-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid rgba(255, 209, 102, 0.3);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 1;
  visibility: visible;
}

.executive-carousel-stack .pdsmg-carousel-nav:hover {
  background: var(--color-accent);
  color: var(--bg-dark);
  border-color: var(--color-accent);
}

.executive-carousel-stack .pdsmg-carousel-nav--prev {
  left: -64px;
}

.executive-carousel-stack .pdsmg-carousel-nav--next {
  right: -64px;
}

.executive-carousel-stack .pdsmg-carousel-nav__icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* Responsive breakpoints for card count */
/* >= 1100px: 5 cards per row (with navigation buttons) */
@media (min-width: 1100px) {
  .executive-carousel-stack .pdsmg-carousel-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 900px - 1099px: 4 cards per row WITH navigation buttons */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .executive-carousel-stack .pdsmg-carousel-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 600px - 899px: 3 cards per row, NO navigation buttons */
@media (min-width: 600px) and (max-width: 899.98px) {
  .executive-carousel-stack .pdsmg-carousel-nav {
    display: none !important;
  }
}

/* < 600px: 1 card per view, NO navigation buttons */
@media (max-width: 599.98px) {
  .executive-carousel-stack .pdsmg-carousel-nav {
    display: none !important;
  }

  /* Use transform-based carousel (same as desktop) for seamless infinite loop */
  .carousel-track-container {
    overflow-x: hidden; /* Clip off-screen cards */
    /* Remove scroll-snap for transform-based navigation */
  }

  .carousel-track {
    flex-wrap: nowrap;
    /* Allow transform transitions for smooth animation */
  }

  .exec-card {
    /* Remove scroll-snap properties */
    flex: 0 0 var(--exec-card-width); /* Use calculated card width */
  }
}

/* Ensure no horizontal overflow on page */
/* Note: .executive-carousel-stack allows overflow to show navigation buttons positioned outside at left:-64px/right:-64px */
/* .executive-section overflow-x: hidden was clipping the navigation buttons - REMOVED */
.executive-section {
  max-width: 100%;
  /* overflow-x: hidden;  <-- REMOVED: was clipping nav buttons at left:-64px/right:-64px */
}

.carousel-rows,
.carousel-wrapper,
.carousel-track-container {
  max-width: 100%;
  overflow-x: hidden;
}

.executive-carousel-stack {
  max-width: 100%;
  overflow-x: visible; /* Allow navigation buttons to be visible outside */
}

/* --- Secure Form Upload Section --- */
.form-wrapper {
  background: linear-gradient(
    145deg,
    var(--bg-card) 0%,
    rgba(11, 15, 25, 1) 100%
  );
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(230, 57, 70, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.secure-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
}
.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 5px;
  color: var(--text-main);
  font-size: 0.9rem;
}

.secure-form input[type="text"],
.secure-form input[type="email"],
.secure-form input[type="tel"],
.custom-select-style {
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-main);
}

.secure-form input:focus,
.custom-select-style:focus {
  outline: none;
  border-color: var(--color-primary);
}

.file-upload-wrapper input[type="file"] {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.file-upload-wrapper input[type="file"]:hover {
  background: rgba(255, 255, 255, 0.05);
}

.file-upload-wrapper input[type="file"]:focus,
.file-upload-wrapper input[type="file"]:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
}

.file-upload-wrapper input[type="file"]::file-selector-button {
  background: var(--color-accent);
  color: var(--bg-dark);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}

.file-upload-wrapper input[type="file"]::file-selector-button:hover {
  background: var(--color-secondary);
}

/* --- Custom Membership Type Dropdown --- */
.custom-dropdown-container {
  position: relative;
  width: 100%;
}

.hidden-select {
  display: none;
}

.custom-select-trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.custom-select-trigger:hover,
.custom-dropdown-container.open .custom-select-trigger {
  border-color: var(--color-primary, #d32f2f);
}

.custom-select-arrow {
  transition: transform 0.3s ease;
}

.custom-dropdown-container.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--bg-dark);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  z-index: 99;
}

.custom-dropdown-container.open .custom-select-options {
  max-height: 250px;
  opacity: 1;
  overflow-y: auto;
}

.custom-option {
  padding: 14px 16px;
  font-size: 16px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

.custom-option:hover,
.custom-option.selected {
  background-color: #f9eaea;
  color: var(--color-primary, #d32f2f);
  font-weight: 600;
  padding-left: 20px;
}

/* =========================================
   POST-SUBMISSION FOLLOW-UP NOTICE
   ========================================= */
.followup-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--spacing-md);
  padding: 14px 18px;
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.55;
}

.followup-notice i {
  color: var(--color-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.followup-notice p {
  margin: 0;
  color: var(--text-main);
}

.followup-notice strong {
  color: var(--color-accent);
}

/* =========================================
   TERMS & CONDITIONS ACCORDION
   ========================================= */
.application-section {
  position: relative;
}

.terms-accordion {
  margin-top: var(--spacing-lg);
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: border-color var(--transition-base);
}

.terms-accordion[open] {
  border-color: rgba(255, 209, 102, 0.35);
}

.terms-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  background: linear-gradient(
    145deg,
    var(--bg-card) 0%,
    rgba(11, 15, 25, 1) 100%
  );
  transition: background-color var(--transition-fast);
}

.terms-summary::-webkit-details-marker {
  display: none;
}

.terms-summary:hover {
  background-color: rgba(255, 209, 102, 0.04);
}

.terms-summary-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 600;
}

.terms-summary-text i {
  color: var(--color-accent);
  font-size: 1.3rem;
}

.terms-chevron {
  color: var(--color-secondary);
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.terms-accordion[open] .terms-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.terms-content {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  animation: termsFadeIn 0.35s ease;
}

@keyframes termsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The conduct section, intro & closing reuse the look from code-of-conduct.css,
   but we redefine them locally to keep this dropdown self-contained. */
.terms-content .conduct-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-main);
  text-align: center;
  max-width: 820px;
  margin: var(--spacing-lg) auto var(--spacing-lg);
}

.terms-content .conduct-section {
  margin-bottom: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.terms-content .conduct-section:last-of-type {
  margin-bottom: var(--spacing-md);
}

.terms-content .section-title {
  color: var(--color-secondary);
  text-align: center;
  font-size: 1.15rem;
  margin: 0 0 var(--spacing-md);
}

.terms-content .conduct-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-content .conduct-section ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  line-height: 1.65;
  font-size: 0.95rem;
  color: var(--text-main);
}

.terms-content .conduct-section ul li:last-child {
  margin-bottom: 0;
}

.terms-content .conduct-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px rgba(255, 209, 102, 0.45);
}

.terms-content .conduct-section ul li strong {
  color: var(--color-accent);
  font-weight: 600;
  margin-right: 0.25rem;
}

.terms-content .conduct-closing {
  margin-top: var(--spacing-md);
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.terms-content .terms-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-style: normal;
  font-weight: 600;
}

.terms-content .terms-link:hover {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .form-row {
    flex-direction: column;
  }

  .leader-card {
    width: 100%;
  }

  .carousel-wrapper {
    position: relative;
    width: 100%;
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }

  .modal-content {
    padding: 20px;
  }

  .modal-content h2 {
    font-size: medium;
  }

  /* -----------------------------------
       7. FORM TWEAKS (Membership & Contact Pages)
       ----------------------------------- */

  /* Reduce the massive desktop padding so inputs can stretch out */
  .form-wrapper {
    padding: var(--spacing-lg);
  }

  /* Slightly reduce the font size of the title so it doesn't break awkwardly */
  .form-wrapper h2 {
    font-size: 1.5rem;
  }

  /* Follow-up notice & Terms accordion tweaks on small screens */
  .followup-notice {
    font-size: 0.9rem;
    padding: 12px 14px;
  }

  .terms-summary {
    padding: 14px 16px;
  }

  .terms-summary-text {
    font-size: 0.95rem;
  }

  .terms-content {
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }

  .terms-content .conduct-section {
    padding: var(--spacing-md);
  }
}

/* =========================================
   LIGHT THEME OVERRIDES
   ========================================= */

/* Leader / exec cards: switch the dark gradient backgrounds to white panels. */
[data-theme="light"] .leader-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .leader-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

/* President card (not founder) - highlighted on desktop */
@media (min-width: 1071px) {
  [data-theme="light"] .president-card:not(.founder-card) {
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.1) !important;
    transform: scale(1.05);
    z-index: 2;
  }
  [data-theme="light"] .president-card:not(.founder-card):hover {
    transform: scale(1.05) translateY(-10px) !important;
  }

  /* Founder card - normal card styling on desktop */
  [data-theme="light"] .founder-card {
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    transform: scale(1);
  }
  [data-theme="light"] .founder-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  }
}
/* Keep the original background on leader/exec photos so the actual member
   photos remain visible. The .<name> class on each .leader-photo / .exec-photo
   sets the background-image via member-pfp.css; replacing the background here
   with the `background` shorthand would reset background-image to none and
   hide the photo. We only override borders and shadows for light theme. */
[data-theme="light"] .leader-photo {
  border: 3px solid var(--color-accent) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15) !important;
}
[data-theme="light"] .exec-photo {
  border: 2px solid var(--color-secondary) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15) !important;
}
[data-theme="light"] .exec-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Modal content uses var(--bg-dark) so it blends into the page background in
   light mode. Switch to a light card. */
[data-theme="light"] .modal-content {
  background: #ffffff !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
/* Close button: in light theme the solid background must match the new
   white modal card, otherwise it would show through as a dark circle. */
[data-theme="light"] .close-modal {
  background: #ffffff !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Custom dropdown options use var(--bg-dark) - in light theme they would
   blend into the page. Switch to white. */
[data-theme="light"] .custom-select-options {
  background-color: #ffffff !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .custom-option {
  color: var(--text-main) !important;
}
[data-theme="light"] .custom-option:hover,
[data-theme="light"] .custom-option.selected {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--color-primary) !important;
}
[data-theme="light"] .custom-select-trigger {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-main) !important;
}
[data-theme="light"] .custom-select-trigger:hover,
[data-theme="light"] .custom-dropdown-container.open .custom-select-trigger {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}
[data-theme="light"] .secure-form input[type="text"],
[data-theme="light"] .secure-form input[type="email"],
[data-theme="light"] .secure-form input[type="tel"],
[data-theme="light"] .custom-select-style {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-main) !important;
}
[data-theme="light"] .secure-form input:focus,
[data-theme="light"] .custom-select-style:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15) !important;
}
[data-theme="light"] .file-upload-wrapper input[type="file"] {
  background: rgba(239, 68, 68, 0.05) !important;
  border: 1px dashed var(--color-accent) !important;
  color: var(--text-main) !important;
}

/* Terms accordion / conduct sections */
[data-theme="light"] .terms-accordion {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .terms-accordion[open] {
  border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .terms-summary {
  background: linear-gradient(145deg, #ffffff 0%, #fef9c3 100%) !important;
}
[data-theme="light"] .terms-summary:hover {
  background-color: rgba(239, 68, 68, 0.05) !important;
}
[data-theme="light"] .terms-content .conduct-section {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .form-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .followup-notice {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-left: 4px solid var(--color-accent) !important;
  color: var(--text-main) !important;
}