/* ==========================================================================
   YLY (Youth Leading Youth / اتحاد شباب يدير شباب) - Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  --primary: #1034a8;
  --primary-dark: #1034a8;
  --primary-light: #233dff;
  --accent: #f59e0b;
  --accent-gold: #fbbf24;
  --bg-primary: #060d1f;
  --bg-secondary: #0a1628;
  --bg-card: rgba(255,255,255,0.07);
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.18);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.37);
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.75);
  --text-muted: rgba(255,255,255,0.45);
  --border-radius: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-family: 'Cairo', sans-serif;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --nav-bg: rgba(6, 13, 31, 0.72);
  --nav-bg-scrolled: rgba(6, 13, 31, 0.88);
  --nav-border: rgba(255, 255, 255, 0.12);
  --nav-border-scrolled: rgba(255, 255, 255, 0.18);
  --nav-text: #ffffff;
  --nav-active-bg: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  --nav-dur: 0.5s;
  --nav-lead-dur: 0.28s;
  --nav-trail-dur: 0.45s;
  --nav-trail-delay: 0.05s;
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-dur: 280ms;
}

/* Page Route Transitions (Soft cross-fade + subtle entrance) */
.page-route-transition-wrap {
  width: 100%;
  min-height: calc(100vh - 120px);
  will-change: opacity, transform;
}

.page-route-transition-wrap.stage-idle {
  opacity: 1;
  transform: none;
}

.page-route-transition-wrap.stage-exiting {
  opacity: 0.2;
  transform: scale(0.996);
  transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1), transform 120ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}

.page-route-transition-wrap.stage-entering {
  animation: pageRouteSoftEnter 240ms var(--nav-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}

@keyframes pageRouteSoftEnter {
  0% {
    opacity: 0.2;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-route-transition-wrap,
  .page-route-transition-wrap.stage-exiting,
  .page-route-transition-wrap.stage-entering {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   1. Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
  font-family: var(--font-family);
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg-primary);
  background: linear-gradient(135deg, var(--bg-primary), #0c1836, var(--primary-dark));
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--primary);
  color: #fff;
}

/* Scrollbar hidden */
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html, body {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.75rem; }
h3 { font-size: 2.25rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
  font-weight: 800;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto 3rem auto;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ==========================================================================
   3. Navigation (.navbar)
   ========================================================================== */
.navbar:not(.navbar-floating) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1rem 2rem;
  background: rgba(10, 19, 48, 0.98) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar:not(.navbar-floating).scrolled {
  background: rgba(10, 19, 48, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.75rem 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.navbar-logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-logo img {
  height: 40px;
}

.navbar-menu {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.navbar-item {
  position: relative;
}

.navbar-link {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  padding: 0.5rem 0;
  position: relative;
}

.navbar-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-light);
  transform: scaleX(0);
  transition: var(--transition);
  transform-origin: right;
}

.navbar-link:hover::after,
.navbar-item.active .navbar-link::after {
  transform: scaleX(1);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-toggle,
.theme-toggle-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: #fff;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transition);
  outline: none;
  flex-shrink: 0;
}
.lang-toggle:hover,
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.navbar-mobile {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: var(--bg-secondary);
  box-shadow: -5px 0 15px rgba(0,0,0,0.5);
  transition: var(--transition);
  padding: 5rem 2rem 2rem;
  z-index: 999;
}
.navbar-mobile.active {
  right: 0;
}

/* ==========================================================================
   4. Hero Section (.hero)
   ========================================================================== */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5.5rem 2rem 2.5rem;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(15,52,96,0.8), rgba(26,86,219,0.5), rgba(0,180,216,0.4));
  z-index: 0;
  animation: gradient-shift 15s ease infinite alternate;
  background-size: 300% 300%;
}

.parallax-bg {
  position: absolute;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  background-image: url('../assets/hero-bg.jpg'); /* Example path */
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.hero-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.particle {
  position: absolute;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: particle 10s infinite linear;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 4rem 3rem;
  max-width: 900px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 1s ease forwards;
}

.hero-logo {
  margin-bottom: 2rem;
}
.hero-logo img {
  height: 100px;
  margin: 0 auto;
  animation: pulse-glow 3s infinite;
}

.hero-title {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

/* ==========================================================================
   5. News Ticker (.ticker-wrapper)
   ========================================================================== */
.ticker-wrapper {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  color: #fff;
  height: 50px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ticker-label {
  background: var(--accent-gold);
  color: #000;
  font-weight: 800;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
  white-space: nowrap;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: ticker-scroll-ar 30s linear infinite;
  white-space: nowrap;
  padding-right: 2rem;
}
body.lang-english .ticker-track {
  animation-name: ticker-scroll-en;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ticker-item::before {
  content: '•';
  color: var(--accent-gold);
}

/* ==========================================================================
   6. Animated Counters Section (.counters-section)
   ========================================================================== */
.counters-section {
  padding: 6rem 0;
}

.counters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.counter-card {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 3rem 2rem;
  text-align: center;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.counter-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--glass-shadow);
  border-color: rgba(255,255,255,0.3);
}

.counter-icon {
  font-size: 3rem;
  color: var(--primary-light);
  margin-bottom: 1rem;
}
.counter-icon svg {
  width: 60px; height: 60px; fill: currentColor;
}

.counter-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.5rem;
  display: block;
}

.counter-label {
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ==========================================================================
   7. About Section (.about-section)
   ========================================================================== */
.about-section {
  padding: 6rem 0;
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.feature-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-icon {
  background: rgba(26,86,219,0.2);
  color: var(--primary-light);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.about-visual {
  position: relative;
}
.about-visual img {
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* ==========================================================================
   8. Board Section (.board-section)
   ========================================================================== */
.board-section {
  padding: 6rem 0;
  background: rgba(0,0,0,0.2);
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.board-member-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.board-member-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(26,86,219,0.3);
  border-color: var(--primary);
}

.board-member-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  border: 3px solid transparent;
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
              linear-gradient(135deg, var(--primary), var(--primary-light)) border-box;
  object-fit: cover;
  transition: var(--transition);
}
.board-member-card:hover .board-member-img {
  transform: scale(1.05);
}

.board-member-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.board-member-role {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  padding: 0.25rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--accent-gold);
}

/* ==========================================================================
   9. Governorate Map Section (.map-section)
   ========================================================================== */
.map-section {
  padding: 6rem 0;
}

.map-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.map-tooltip {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 10;
  font-size: 0.875rem;
}

/* Off-canvas */
.off-canvas-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.off-canvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

.off-canvas-panel {
  position: fixed;
  top: 0;
  right: -400px; /* RTL sliding from right */
  width: 400px;
  max-width: 100%;
  height: 100vh;
  background: var(--bg-secondary);
  box-shadow: -5px 0 25px rgba(0,0,0,0.5);
  z-index: 1050;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.off-canvas-panel.active {
  right: 0;
}

.off-canvas-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.off-canvas-header h3 {
  margin: 0;
}
.off-canvas-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
}
.off-canvas-close:hover {
  color: #fff;
}

.off-canvas-content {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.gov-leader-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gov-leader-card img {
  width: 60px; height: 60px;
  border-radius: 50%;
}

/* ==========================================================================
   10. News Section (.news-section)
   ========================================================================== */
.news-section {
  padding: 6rem 0;
}

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.filter-tab {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}
.filter-tab:hover,
.filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.news-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--glass-shadow);
}

.news-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

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

.news-card-category {
  display: inline-block;
  background: rgba(26,86,219,0.2);
  color: var(--primary-light);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.news-card-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.news-card-excerpt {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.news-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.875rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
}

/* ==========================================================================
   11. Events Section (.events-section)
   ========================================================================== */
.events-section {
  padding: 6rem 0;
  background: rgba(0,0,0,0.2);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.event-card {
  display: flex;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
}
.event-card:hover {
  background: rgba(255,255,255,0.15);
  transform: translateX(-5px); /* RTL */
}

.event-date-box {
  background: var(--primary);
  color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
.event-date-box .day {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}
.event-date-box .month {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.event-details {
  padding: 1.5rem;
  flex: 1;
}
.event-details h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.event-meta {
  color: var(--text-secondary);
  font-size: 0.875rem;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.event-badge {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-gold);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ==========================================================================
   12. Footer (.footer)
   ========================================================================== */
.footer {
  background: #030812;
  padding: 4rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-logo img {
  height: 60px;
  margin-bottom: 1.5rem;
}
.footer-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
  max-width: 300px;
}

.footer-title {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: #fff;
  position: relative;
  padding-bottom: 0.5rem;
}
.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0; /* RTL */
  width: 40px;
  height: 2px;
  background: var(--primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-links a {
  color: var(--text-secondary);
  transition: var(--transition);
}
.footer-links a:hover {
  color: var(--primary-light);
  transform: translateX(-5px); /* RTL */
}

.footer-social {
  display: flex;
  gap: 1rem;
}
.social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: #fff;
}
.social-btn:hover {
  background: var(--primary);
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ==========================================================================
   13. Glassmorphism Components
   ========================================================================== */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.glass-btn {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 8px;
  transition: var(--transition);
}
.glass-btn:hover {
  background: rgba(255,255,255,0.2);
}

.glass-input {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(5px);
}
.glass-input:focus {
  background: rgba(0,0,0,0.4);
  border-color: var(--primary);
  outline: none;
}

.glass-badge {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.glass-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  margin: 2rem 0;
}

/* ==========================================================================
   14. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  gap: 0.5rem;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  box-shadow: 0 4px 15px rgba(26,86,219,0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26,86,219,0.6);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--primary);
  color: #fff;
}
.btn-secondary:hover {
  background: rgba(26,86,219,0.1);
}

.btn-accent {
  background: var(--accent-gold);
  color: #000;
  box-shadow: 0 4px 15px rgba(251,191,36,0.3);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(251,191,36,0.5);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: #dc2626;
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }

.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.loading::after {
  content: '';
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   15. Forms
   ========================================================================== */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-control, .form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-family: inherit;
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary-light);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(0,180,216,0.2);
}
.form-control::placeholder {
  color: var(--text-muted);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center; /* RTL */
  background-size: 1.2rem;
}
.form-select option {
  background: var(--bg-secondary);
  color: #fff;
}

.form-error {
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}
.form-success {
  color: var(--success);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* ==========================================================================
   16. Login Page (.login-page)
   ========================================================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-primary), var(--primary-dark));
  padding: 2rem;
}

.login-card {
  width: 100%;
  max-width: 450px;
  padding: 3rem;
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.login-logo img {
  height: 60px;
  margin: 0 auto;
}

.login-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.role-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   17. Dashboard Layout (.dashboard-layout)
   ========================================================================== */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary);
}

.dashboard-sidebar {
  width: 280px;
  background: rgba(6,13,31,0.95);
  border-left: 1px solid var(--glass-border); /* RTL */
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  z-index: 100;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0; /* RTL */
}

.sidebar-logo {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sidebar-logo img { height: 40px; }

.sidebar-nav {
  padding: 1.5rem 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav-item {
  margin-bottom: 0.25rem;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  color: var(--text-secondary);
  transition: var(--transition);
  border-right: 3px solid transparent; /* RTL */
}
.sidebar-nav-link:hover,
.sidebar-nav-item.active .sidebar-nav-link {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-right-color: var(--primary);
}

.dashboard-content {
  flex: 1;
  margin-right: 280px; /* RTL */
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-header {
  height: 70px;
  background: rgba(6,13,31,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 90;
}

.dashboard-body {
  padding: 2rem;
  flex: 1;
  overflow-y: auto;
}

.role-badge {
  background: var(--primary);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ==========================================================================
   18. Dashboard Components
   ========================================================================== */
.stat-card {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stat-card-info { flex: 1; }
.stat-card-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.stat-card-value {
  font-size: 1.75rem;
  font-weight: 800;
}
.stat-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(26,86,219,0.2);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.stat-card-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.stat-card-trend.up { color: var(--success); }
.stat-card-trend.down { color: var(--danger); }

/* Data Table */
.data-table-wrapper {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 1rem;
  text-align: right; /* RTL */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.data-table th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  background: rgba(255,255,255,0.02);
}
.data-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* Progress Bar */
.progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 1s ease;
}

/* Notifications */
.notification-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.notification-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 0.4rem;
}

/* Tasks */
.task-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.task-checkbox {
  width: 20px; height: 20px;
  cursor: pointer;
}
.task-priority.priority-high { color: var(--danger); }
.task-priority.priority-medium { color: var(--warning); }
.task-priority.priority-low { color: var(--success); }

/* Member List */
.member-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.member-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.member-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.member-status.status-active { color: var(--success); }
.member-status.status-pending { color: var(--warning); }

.chart-wrapper {
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* ==========================================================================
   19. Profile Page (.profile-page)
   ========================================================================== */
.profile-header {
  position: relative;
  padding: 3rem 2rem 0;
  margin-bottom: 4rem;
  background: linear-gradient(to bottom, rgba(26,86,219,0.2), transparent);
  border-radius: var(--border-radius);
}
.profile-avatar-wrapper {
  position: absolute;
  bottom: -3rem;
  right: 2rem; /* RTL */
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}
.profile-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  box-shadow: 0 0 20px rgba(26,86,219,0.5);
}
.profile-name {
  font-size: 1.75rem;
  margin: 0;
}
.profile-stats {
  display: flex;
  gap: 2rem;
  margin-top: 4rem;
  padding: 0 2rem;
}
.profile-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 2rem 0;
}
.profile-tab {
  padding: 1rem 0;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.profile-tab.active {
  color: #fff;
  border-bottom-color: var(--primary);
}
.activity-timeline {
  border-right: 2px solid rgba(255,255,255,0.1); /* RTL */
  padding-right: 1.5rem;
  margin-right: 1rem;
}
.activity-timeline .timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}
.activity-timeline .timeline-item::before {
  content: '';
  position: absolute;
  right: -1.85rem; /* RTL */
  top: 0.25rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg-primary);
}
.timeline-section .timeline-item::before {
  display: none !important;
}

/* ==========================================================================
   20. Skeleton Loaders
   ========================================================================== */
.skeleton {
  background: #0a1628;
  background: linear-gradient(110deg, #0a1628 8%, #1a365d 18%, #0a1628 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: 4px;
}
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-circle { width: 50px; height: 50px; border-radius: 50%; }
.skeleton-card { height: 200px; width: 100%; border-radius: var(--border-radius); }

/* ==========================================================================
   21. Animations & Keyframes
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { right: -100%; }
  to { right: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
  0% { filter: drop-shadow(0 0 10px rgba(26,86,219,0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(26,86,219,0.8)); }
  100% { filter: drop-shadow(0 0 10px rgba(26,86,219,0.4)); }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes particle {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-1000px) rotate(360deg); opacity: 0; }
}
@keyframes ticker-scroll-ar {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@keyframes ticker-scroll-en {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes shimmer {
  to { background-position-x: -200%; }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ring-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   22. Utility Classes
   ========================================================================== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.section-padding { padding: 6rem 0; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.flex-column { flex-direction: column; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

.text-center { text-align: center; }
.text-start { text-align: right; } /* RTL default start is right */
.text-end { text-align: left; }
.text-white { color: #fff; }
.text-primary { color: var(--primary); }

.mt-1 { margin-top: 0.25rem; } .mb-1 { margin-bottom: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }  .mb-2 { margin-bottom: 0.5rem; }
.mt-3 { margin-top: 1rem; }    .mb-3 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1.5rem; }  .mb-4 { margin-bottom: 1.5rem; }
.mt-5 { margin-top: 3rem; }    .mb-5 { margin-bottom: 3rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.hidden { display: none !important; }
.visible { display: block !important; }
.rtl-flip { transform: scaleX(-1); }

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-blue { background: rgba(26,86,219,0.2); color: var(--primary-light); }
.badge-gold { background: rgba(245,158,11,0.2); color: var(--accent-gold); }
.badge-green { background: rgba(16,185,129,0.2); color: var(--success); }
.badge-red { background: rgba(239,68,68,0.2); color: var(--danger); }

.divider {
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.1);
  margin: 2rem 0;
}

.scroll-reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.scroll-reveal.animate-in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   23. Responsive Media Queries
   ========================================================================== */
@media (max-width: 1200px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 992px) {
  h1 { font-size: 3rem; }
  .navbar-menu { display: none; }
  .navbar-toggle { display: block; }
  .about-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  
  .dashboard-sidebar {
    transform: translateX(100%); /* RTL hidden to the right */
  }
  .dashboard-sidebar.show {
    transform: translateX(0);
  }
  .dashboard-content { margin-right: 0; }
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; width: 100%; position: relative; }
  .container { padding: 0 1rem; }
  .navbar { padding: 0.5rem 1rem; }
  .navbar.scrolled { padding: 0.5rem 1rem; }
  
  .logo-text { display: none; }
  .navbar-actions { gap: 0.5rem; }
  .navbar-login-btn { padding: 6px 12px; font-size: 0.8rem; }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .section-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
  
  .hero { padding: 5rem 1rem 1rem; }
  .hero-content { 
    padding: 2rem 1.25rem; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    width: 100%;
    margin: 0 auto;
  }
  .hero::before { animation: none; background-size: cover; }
  .particle { display: none; } /* Improve mobile FPS */
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; margin-bottom: 2rem; }
  .hero-cta { flex-direction: column; gap: 1rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  
  .board-grid, .news-grid, .footer-grid, .counters-grid { grid-template-columns: 1fr !important; }
  
  .counters-section, .about-section, .board-section, .map-section, .news-section {
    padding: 3rem 0;
  }
  
  .counters-grid { grid-template-columns: 1fr; gap: 1rem; }
  .counter-card { padding: 1.5rem 1rem; }
  .counter-number { font-size: 2.5rem; }
  
  .board-grid { grid-template-columns: 1fr; gap: 1rem; }
  .news-grid { grid-template-columns: 1fr; gap: 1rem; }
  
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .footer-title::after { right: 50%; transform: translateX(50%); }
  .footer-social { justify-content: center; }
  
  .event-card { flex-direction: column; }
  .event-date-box { padding: 1rem; flex-direction: row; gap: 1rem; justify-content: center; border-radius: 12px 12px 0 0; }
  
  .off-canvas-panel { width: 100%; right: -100%; }
}

@media (max-width: 576px) {
  .hero-title { font-size: 1.75rem; }
  .hero-logo img { height: 70px; }
  .section-title { font-size: 1.5rem; }
  .login-card { padding: 1.5rem 1rem; }
  .profile-avatar-wrapper { flex-direction: column; align-items: center; text-align: center; right: 50%; transform: translateX(50%); }
  .profile-stats { flex-direction: column; align-items: center; margin-top: 8rem; }
  
  .filter-tabs { flex-direction: column; gap: 0.5rem; }
  .filter-tab { width: 100%; text-align: center; }
}

/* ==========================================================================
   24. SVG Map Styles (.egypt-map)
   ========================================================================== */
.egypt-map {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}
.map-region {
  fill: rgba(26,86,219,0.2);
  stroke: rgba(255,255,255,0.2);
  stroke-width: 1;
  transition: all 0.3s;
  cursor: pointer;
}
.map-region:hover {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(26,86,219,0.8));
}
.map-region.active {
  fill: var(--accent-gold);
  stroke: #fff;
  stroke-width: 2;
}
.map-region.has-data {
  fill: rgba(26,86,219,0.6);
}

/* ==========================================================================
   25. Bilingual Support
   ========================================================================== */
.lang-en { display: none; }
.lang-ar { display: block; }

body.lang-english {
  direction: ltr;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body.lang-english .lang-ar { display: none; }
body.lang-english .lang-en { display: block; }
body.lang-english .text-start { text-align: left; }
body.lang-english .text-end { text-align: right; }
body.lang-english .navbar-link::after { transform-origin: left; }
body.lang-english .form-select { background-position: right 1rem center; }
body.lang-english .off-canvas-panel { right: auto; left: -400px; transition: left 0.4s; }
body.lang-english .off-canvas-panel.active { left: 0; }
body.lang-english .dashboard-sidebar { right: auto; left: 0; border-left: none; border-right: 1px solid var(--glass-border); }
body.lang-english .dashboard-content { margin-right: 0; margin-left: 280px; }
body.lang-english .sidebar-nav-link { border-right: none; border-left: 3px solid transparent; }
body.lang-english .sidebar-nav-link:hover,
body.lang-english .sidebar-nav-item.active .sidebar-nav-link { border-left-color: var(--primary); }
body.lang-english .data-table th, 
body.lang-english .data-table td { text-align: left; }
body.lang-english .profile-avatar-wrapper { right: auto; left: 2rem; }
body.lang-english .activity-timeline { border-right: none; border-left: 2px solid rgba(255,255,255,0.1); padding-right: 0; padding-left: 1.5rem; margin-right: 0; margin-left: 1rem; }
body.lang-english .timeline-item::before { right: auto; left: -1.85rem; }
body.lang-english .footer-title::after { right: auto; left: 0; }
body.lang-english .event-card:hover { transform: translateX(5px); }

/* Additional Dashboard RTL/LTR overrides for small screens */
@media (max-width: 992px) {
  body.lang-english .dashboard-sidebar { transform: translateX(-100%); }
  body.lang-english .dashboard-sidebar.show { transform: translateX(0); }
  body.lang-english .dashboard-content { margin-left: 0; }
}
@media (max-width: 576px) {
  body.lang-english .profile-avatar-wrapper { left: 50%; transform: translateX(-50%); }
}

/* ==========================================================================
   SUPPLEMENTARY STYLES - Index Page Components
   ========================================================================== */

/* Hero Logo Wrapper */
.hero-logo-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ring-pulse 3s ease-in-out infinite;
}
.hero-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 4s ease-in-out infinite;
}

/* Hero Badge */
.hero-badge, .glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.9);
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-glow 2s infinite;
}

/* Hero Title */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/* Hero Buttons */
.hero-btn-primary, .hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  text-decoration: none;
}
.hero-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  box-shadow: 0 8px 25px rgba(26,86,219,0.5);
}
.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(26,86,219,0.7);
}
.hero-btn-secondary {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  backdrop-filter: blur(10px);
}
.hero-btn-secondary:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.5);
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  opacity: 0.6;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  animation: float 2s ease-in-out infinite;
}

/* Hero Orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  background: rgba(26,86,219,0.25);
  top: -100px; right: -150px;
  animation-delay: 0s;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: rgba(0,180,216,0.2);
  bottom: -100px; left: -100px;
  animation-delay: -4s;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  background: rgba(245,158,11,0.1);
  top: 50%; right: 10%;
  animation-delay: -2s;
}

/* Ticker wrapper fix */
.ticker-track-wrapper {
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Counter growth */
.counter-growth {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #10b981;
  margin-top: 0.75rem;
  font-weight: 600;
}

/* Section Header & Tags */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(26,86,219,0.15);
  border: 1px solid rgba(26,86,219,0.3);
  color: var(--primary-light);
  padding: 0.4rem 1.25rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

/* Section CTA */
.section-cta {
  text-align: center;
  margin-top: 3rem;
}

/* About feature list */
.about-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.feature-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #fff;
}
.feature-text p {
  font-size: 0.9rem;
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* About visual card stack */
.about-card-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about-visual-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  transition: var(--transition);
}
.about-visual-card:hover {
  transform: translateX(-5px);
  border-color: rgba(26,86,219,0.4);
}
body.lang-english .about-visual-card:hover {
  transform: translateX(5px);
}
.visual-card-icon {
  font-size: 2rem;
  line-height: 1;
}
.visual-card-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--accent-gold);
}
.visual-card-text p {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary);
}

/* Board preview */
.board-preview-section, .board-preview { padding: 6rem 0; }
.board-member-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-color, #1034a8), rgba(255,255,255,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  transition: var(--transition);
}
.board-member-card:hover .board-member-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--avatar-color, rgba(26,86,219,0.5));
}
.board-member-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.board-member-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.board-member-role {
  font-size: 0.8rem;
  color: var(--accent-gold);
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 50px;
  padding: 0.25rem 0.75rem;
}

/* News preview */
.news-preview-section { padding: 6rem 0; background: rgba(0,0,0,0.15); }
.news-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.news-card-img {
  height: 200px;
  position: relative;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}
.news-card-category {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(26,86,219,0.9);
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}
.category-event { background: rgba(124,58,237,0.9) !important; }
.category-gov { background: rgba(5,150,105,0.9) !important; }
.news-card-body { padding: 1.5rem; }
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.meta-date { display: flex; align-items: center; gap: 0.3rem; }
.meta-gov {
  background: rgba(255,255,255,0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.news-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}
.news-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary-light);
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--transition);
}
.news-read-more:hover { color: #fff; gap: 0.8rem; }

/* Join Section */
.join-section { padding: 6rem 0; }
.join-card {
  padding: 4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}
.join-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-gold);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.join-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.join-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.join-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.join-visual {}
.join-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.join-stat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}
.join-stat-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
}
.join-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Footer */
.footer {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 5rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.footer-logo-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.footer-logo-abbr {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.footer-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.footer-social { display: flex; gap: 0.75rem; }
.social-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition);
  cursor: pointer;
}
.social-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-3px);
}
.footer-col-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
}
body.lang-english .footer-col-title::after { right: auto; left: 0; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-links a::before {
  content: '›';
  color: var(--primary-light);
  font-size: 1.1rem;
  line-height: 1;
}
.footer-links a:hover { color: #fff; padding-right: 0.5rem; }
body.lang-english .footer-links a:hover { padding-right: 0; padding-left: 0.5rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.footer-contact li svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copyright { font-size: 0.875rem; color: var(--text-muted); }
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.footer-bottom-links a { color: var(--text-secondary); }
.footer-bottom-links a:hover { color: #fff; }
.footer-separator { color: var(--text-muted); }

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 48px; height: 48px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 999;
  box-shadow: 0 4px 15px rgba(26,86,219,0.5);
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { transform: translateY(-4px); background: var(--primary-light); }
body.lang-english .back-to-top { left: auto; right: 2rem; }

/* Navbar mobile link */
.navbar-mobile-link {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition);
}
.navbar-mobile-link:hover, .navbar-mobile-link.active { color: #fff; }
.navbar-login-btn { white-space: nowrap; }

/* Navbar inner */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-size: 1rem; font-weight: 800; color: #fff; }
.logo-abbr { font-size: 0.7rem; color: var(--primary-light); letter-spacing: 0.1em; }

/* Logo Image Styles */
.navbar-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  padding: 2px;
  filter: drop-shadow(0 0 8px rgba(26,86,219,0.6));
  transition: var(--transition);
}
.navbar-logo:hover .navbar-logo-img {
  filter: drop-shadow(0 0 14px rgba(0,180,216,0.8));
  transform: scale(1.05);
}
.hero-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  padding: 4px;
  filter: drop-shadow(0 0 20px rgba(0,180,216,0.7));
}
.footer-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  padding: 2px;
  filter: drop-shadow(0 0 10px rgba(26,86,219,0.5));
}



/* Navbar toggle hamburger */
.navbar-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: var(--transition);
}
.navbar-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar-toggle.active span:nth-child(2) { opacity: 0; }
.navbar-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Page hero (for inner pages) */
.page-hero {
  min-height: 35vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  background: linear-gradient(135deg, rgba(15,52,96,0.95), rgba(26,86,219,0.8));
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,180,216,0.2), transparent 70%);
}
.page-hero-content { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--primary-light); }
.breadcrumb a:hover { color: #fff; }
.page-hero-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 0.75rem;
}
.page-hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
}

/* Responsive additions for new components */
@media (max-width: 1024px) {
  .join-card { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .news-grid-3 { grid-template-columns: 1fr 1fr; }
  .join-card { padding: 2.5rem 2rem; }
  .join-actions { flex-direction: column; }
  .about-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .counters-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { flex-direction: column; align-items: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 576px) {
  .news-grid-3 { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
  .section-title { font-size: 1.75rem; }
  .counters-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .board-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .board-member-card { padding: 1.5rem 1rem; }
  .join-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Interactive Layer Styles
   ========================================================================== */

/* Custom cursor overlay — does NOT hide the real cursor */
#cursor-dot, #cursor-glow { pointer-events: none; }
@media (pointer: coarse) {
  #cursor-dot, #cursor-glow { display: none !important; }
}

/* ==========================================================================
   Timeline Collapsed & Expanded Interactive States
   ========================================================================== */

/* Collapsed state by default (before click) */
.timeline-content-wrap:not(.tl-expanded) {
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 170px !important;
  position: relative;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.timeline-content-wrap:not(.tl-expanded)::after {
  content: 'اضغط لعرض التفاصيل';
  display: inline-block;
  font-size: 0.8rem;
  color: #233dff;
  opacity: 0.9;
  margin-top: 1.2rem;
  font-weight: 700;
  background: rgba(35, 61, 255, 0.12);
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px dashed rgba(35, 61, 255, 0.45);
  animation: pulseHint 2s infinite ease-in-out;
}
html[lang="en"] .timeline-content-wrap:not(.tl-expanded)::after,
body.lang-english .timeline-content-wrap:not(.tl-expanded)::after {
  content: 'Click to explore';
}
@keyframes pulseHint {
  0%, 100% { opacity: 0.65; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-3px) scale(1.04); }
}

.timeline-content-wrap:not(.tl-expanded) .timeline-title {
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.timeline-content-wrap:not(.tl-expanded) .timeline-year-tag {
  font-size: 1.1rem !important;
  padding: 6px 20px !important;
  margin-bottom: 0.8rem !important;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.timeline-content-wrap:not(.tl-expanded) .timeline-desc {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, opacity 0.3s ease !important;
}

/* Expanded state (.tl-expanded) */
.timeline-item.tl-expanded .timeline-content-wrap,
.timeline-content-wrap.tl-expanded {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: right !important;
  min-height: auto !important;
}
.timeline-item:nth-child(even).tl-expanded .timeline-content-wrap {
  align-items: flex-end !important;
  text-align: left !important;
}
html[dir="ltr"] .timeline-item:nth-child(odd).tl-expanded .timeline-content-wrap {
  align-items: flex-start !important;
  text-align: left !important;
}
html[dir="ltr"] .timeline-item:nth-child(even).tl-expanded .timeline-content-wrap {
  align-items: flex-end !important;
  text-align: right !important;
}

@media (max-width: 900px) {
  .timeline-item.tl-expanded .timeline-content-wrap,
  .timeline-content-wrap.tl-expanded,
  .timeline-item:nth-child(even).tl-expanded .timeline-content-wrap {
    align-items: flex-start !important;
    text-align: right !important;
  }
  html[dir="ltr"] .timeline-item.tl-expanded .timeline-content-wrap,
  html[dir="ltr"] .timeline-content-wrap.tl-expanded,
  html[dir="ltr"] .timeline-item:nth-child(even).tl-expanded .timeline-content-wrap {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

.timeline-item.tl-expanded .timeline-title,
.timeline-content-wrap.tl-expanded .timeline-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
  transition: all 0.5s ease !important;
}

.timeline-item.tl-expanded .timeline-year-tag,
.timeline-content-wrap.tl-expanded .timeline-year-tag {
  font-size: 0.85rem !important;
  padding: 4px 14px !important;
  margin-bottom: 0.8rem !important;
  transition: all 0.5s ease !important;
}

.timeline-item.tl-expanded .timeline-desc,
.timeline-content-wrap.tl-expanded .timeline-desc {
  max-height: 600px !important;
  opacity: 1 !important;
  margin-top: 0.6rem !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.95rem !important;
  transition: max-height 0.6s ease, opacity 0.5s ease !important;
}
body.theme-light .timeline-item.tl-expanded .timeline-desc,
body.theme-light .timeline-content-wrap.tl-expanded .timeline-desc,
body.theme-light .timeline-desc,
body.theme-light .timeline-desc span {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* Smooth transitions on interactive elements */
.alumni-card,
.achievement-card,
.about-vision-card,
.video-card-main,
.video-card-side,
.partner-logo {
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s ease, background 0.3s ease !important;
  will-change: transform;
}

/* FAB hover effects */
#fab-container button:hover {
  transform: scale(1.15) !important;
}

/* Scroll reveal base state (handled by JS but need base) */
.scroll-reveal {
  opacity: 1; /* Fallback if JS doesn't load */
}

/* Active glow on stat items */
.stat-item:hover .stat-number-new {
  color: #233dff;
  transition: color 0.3s ease;
}
.stat-item:hover .stat-icon-wrap {
  transform: scale(1.05);
  transition: transform 0.2s ease-out;
}

/* Achievement card hover accent glow */
.achievement-card:hover::before {
  height: 4px;
  filter: brightness(1.3);
}

/* Partner logo hover glow */
.partner-logo:hover .partner-logo-text {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 20px rgba(59,130,246,0.5);
}

/* Alumni card hover quote color */
.alumni-card:hover .alumni-quote {
  color: rgba(255,255,255,0.85);
  transition: color 0.3s ease;
}

/* Smooth all anchor transitions */
a, button {
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Navbar active link indicator */
.navbar-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #233dff;
  box-shadow: 0 0 8px #233dff;
}
.navbar-link { position: relative; }

/* Floating badge pulse */
.about-badge-float {
  animation: float-badge 3s ease-in-out infinite;
}
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Hero pill pulse */
.hero-pill-dot {
  position: relative;
}
.hero-pill-dot::after {
  content: '';
  position: absolute;
  inset: -3px; border-radius: 50%;
  background: rgba(34,197,94,0.3);
  animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  75%,100% { transform: scale(2); opacity: 0; }
}

/* Video card play button pulse on hover */
.video-card-main:hover .video-play-btn,
.video-card-side:hover .video-play-btn {
  animation: play-pulse 1s ease-in-out infinite;
}
@keyframes play-pulse {
  0%,100% { box-shadow: 0 0 0 12px rgba(37,99,235,0.2); }
  50% { box-shadow: 0 0 0 20px rgba(37,99,235,0.1); }
}

/* Timeline item hover */
.timeline-item:hover .timeline-dot {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Scroll reveal glide-in from sides */
.scroll-reveal:nth-child(even) {
  transition-delay: 0.08s;
}
.scroll-reveal:nth-child(3n) {
  transition-delay: 0.16s;
}

/* Page transition flash */
@keyframes page-flash {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
body {
  animation: page-flash 0.5s ease forwards;
}

/* Glowing border on focused inputs */
.join-form-input:focus,
.join-form-select:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
}

/* Partner section subtle grid */
.partners-section {
  background-image: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.03) 0%, transparent 60%);
}

body.theme-light .theme-icon-dark { display: none !important; }
body.theme-light .theme-icon-light { display: inline-flex !important; }

/* ==========================================================================
   MODERN LIGHT / PEARL THEME WITH ROYAL BLUE ACCENTS (الوضع النهاري الفاخر)
   ========================================================================== */

/* ── 1. Custom Properties for Light Mode ── */
body.theme-light, [data-theme="light"], html.theme-light {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --accent: #2563eb;
  --accent-gold: #f59e0b;
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.82);
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(226, 232, 240, 0.85);
  --glass-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
}

/* ── 2. Atmospheric Pearl Canvas & Top Light Orb ── */
body.theme-light, html.theme-light, [data-theme="light"] body {
  background: radial-gradient(circle at 50% -120px, rgba(37, 99, 235, 0.09) 0%, rgba(241, 245, 249, 0) 65%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%) !important;
  background-attachment: fixed !important;
  color: #0f172a !important;
}

/* ── 3. Typography Hierarchy ── */
/* Main Canvas Titles & Headings on Light Background: Deep Navy / Slate #0f172a */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .section-title,
body.theme-light .hero-title,
body.theme-light .hero-title-new,
body.theme-light .page-hero-title,
body.theme-light .detail-title,
body.theme-light .footer-col h3,
body.theme-light .footer-title,
body.theme-light .modal-title,
body.theme-light .join-modal-title,
body.theme-light .dash-topbar-title,
body.theme-light .article-title,
body.theme-light .hero-title-rec,
body.theme-light .section-heading-new {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Canvas Subtitles, Paragraphs & Descriptions: Refined Slate #475569 */
body.theme-light p,
body.theme-light .hero-subtitle,
body.theme-light .hero-subtitle-new,
body.theme-light .section-subtitle,
body.theme-light .page-hero-subtitle,
body.theme-light .section-desc,
body.theme-light .detail-content,
body.theme-light .detail-content p,
body.theme-light .article-body,
body.theme-light .article-body p,
body.theme-light .about-desc,
body.theme-light .form-label,
body.theme-light .join-form-label,
body.theme-light .join-modal-subtitle,
body.theme-light .join-modal-note,
body.theme-light .join-success-text,
body.theme-light .partners-label,
body.theme-light .footer-desc,
body.theme-light .footer-text,
body.theme-light .hero-subtitle-rec,
body.theme-light .section-sub-new,
body.theme-light .join-sub-rec {
  color: #475569 !important;
}

/* ── High-Contrast Light Mode: Card Titles & Names Inside Dark Cards (#ffffff) ── */
body.theme-light .timeline-title,
body.theme-light .timeline-content-wrap .timeline-title,
body.theme-light .timeline-content-wrap.tl-expanded .timeline-title,
body.theme-light .news-card-title,
body.theme-light .news-card-title a,
body.theme-light .news-card .card-title,
body.theme-light .news-card .featured-title,
body.theme-light .event-title,
body.theme-light .event-title a,
body.theme-light .committee-card-title,
body.theme-light .gov-card-title,
body.theme-light .feature-title,
body.theme-light .alumni-name,
body.theme-light .story-author h4,
body.theme-light .board-member-name,
body.theme-light .board-title,
body.theme-light .video-title,
body.theme-light .video-card-info .video-title,
body.theme-light .achievement-label,
body.theme-light .about-vision-title,
body.theme-light .about-val-title,
body.theme-light .card-rec-title,
body.theme-light .partner-logo-text,
body.theme-light .join-title,
body.theme-light .join-card-title {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* ── High-Contrast Light Mode: Card Descriptions & Excerpts (Light Gray / White 85%) ── */
body.theme-light .timeline-desc,
body.theme-light .timeline-content-wrap .timeline-desc,
body.theme-light .timeline-item.tl-expanded .timeline-desc,
body.theme-light .timeline-content-wrap.tl-expanded .timeline-desc,
body.theme-light .timeline-desc span,
body.theme-light .news-card-excerpt,
body.theme-light .news-card-excerpt span,
body.theme-light .news-card .card-excerpt,
body.theme-light .news-card .featured-excerpt,
body.theme-light .event-desc,
body.theme-light .committee-card-desc,
body.theme-light .gov-card-desc,
body.theme-light .feature-desc,
body.theme-light .alumni-role,
body.theme-light .alumni-quote,
body.theme-light .alumni-now,
body.theme-light .alumni-desc,
body.theme-light .story-text,
body.theme-light .board-member-role,
body.theme-light .board-desc,
body.theme-light .about-vision-text,
body.theme-light .about-val-desc,
body.theme-light .achievement-sub,
body.theme-light .card-rec-desc,
body.theme-light .join-desc,
body.theme-light .join-card-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Metadata & Small Text: Slate #64748b */
body.theme-light .meta-date,
body.theme-light .meta-gov,
body.theme-light .event-meta,
body.theme-light .event-meta span,
body.theme-light .story-date,
body.theme-light .footer-links a,
body.theme-light .footer-bottom p,
body.theme-light .breadcrumb,
body.theme-light .breadcrumb a,
body.theme-light .article-meta,
body.theme-light .detail-meta,
body.theme-light .card-rec-sub,
body.theme-light .stat-label-rec {
  color: #64748b !important;
}
body.theme-light .footer-links a:hover,
body.theme-light .breadcrumb a:hover {
  color: #2563eb !important;
}

/* Key Metrics & Numbers: Signature Royal Blue #2563eb */
body.theme-light .counter-number,
body.theme-light .stat-number,
body.theme-light .stat-number-new,
body.theme-light .stat-val,
body.theme-light .about-val,
body.theme-light .about-badge-float-num,
body.theme-light .achievement-num,
body.theme-light .stat-number-rec {
  color: #2563eb !important;
  text-shadow: none !important;
}

/* ── 4. Badges, Pills & Indicators (Royal Blue Accents) ── */
body.theme-light .section-tag,
body.theme-light .hero-pill,
body.theme-light .hero-badge,
body.theme-light .about-badge-float,
body.theme-light .video-tag,
body.theme-light .hero-reg-tag,
body.theme-light .tag-rec-blue {
  background: rgba(37, 99, 235, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06) !important;
}
body.theme-light .hero-pill-dot {
  background: #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.8) !important;
}

/* ── 5. Buttons & Interactive Elements ── */
/* Primary Royal Blue Buttons */
body.theme-light .btn-primary,
body.theme-light .hero-btn-primary,
body.theme-light .join-submit-btn,
body.theme-light .login-btn,
body.theme-light .navbar-login-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.3s ease !important;
}
body.theme-light .btn-primary:hover,
body.theme-light .hero-btn-primary:hover,
body.theme-light .join-submit-btn:hover,
body.theme-light .login-btn:hover,
body.theme-light .navbar-login-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Secondary / Outline Buttons */
body.theme-light .btn-outline,
body.theme-light .btn-secondary,
body.theme-light .hero-btn-explore,
body.theme-light .hero-cta .btn:not(.btn-primary),
body.theme-light .btn-details-rec,
body.theme-light .btn-card-save {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}
body.theme-light .btn-outline:hover,
body.theme-light .btn-secondary:hover,
body.theme-light .hero-btn-explore:hover,
body.theme-light .hero-cta .btn:not(.btn-primary):hover,
body.theme-light .btn-details-rec:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* ── 6. Navbar (Pearl Glass with Royal Blue Accents) ── */
body.theme-light .navbar,
html.theme-light .navbar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}
body.theme-light .navbar.scrolled,
html.theme-light .navbar.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.85) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08) !important;
}
body.theme-light .navbar-link,
html.theme-light .navbar-link {
  color: #1e293b !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}
body.theme-light .navbar-link:hover,
body.theme-light .navbar-item.active .navbar-link,
body.theme-light .navbar-link.active,
html.theme-light .navbar-link:hover,
html.theme-light .navbar-item.active .navbar-link,
html.theme-light .navbar-link.active {
  color: #2563eb !important;
  text-shadow: 0 0 12px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .navbar-link::after,
html.theme-light .navbar-link::after {
  background: #2563eb !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5) !important;
}
body.theme-light .navbar-logo,
body.theme-light .navbar-logo span,
html.theme-light .navbar-logo,
html.theme-light .navbar-logo span {
  color: #0f172a !important;
}
body.theme-light .lang-toggle,
body.theme-light .theme-toggle-btn,
html.theme-light .lang-toggle,
html.theme-light .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
body.theme-light .lang-toggle:hover,
body.theme-light .theme-toggle-btn:hover,
html.theme-light .lang-toggle:hover,
html.theme-light .theme-toggle-btn:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2) !important;
}
.theme-icon-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-icon-light {
  display: none;
  align-items: center;
  justify-content: center;
}
body.theme-light .theme-icon-dark,
html.theme-light .theme-icon-dark {
  display: none !important;
}
body.theme-light .theme-icon-light,
html.theme-light .theme-icon-light {
  display: inline-flex !important;
  color: #2563eb !important;
}
body.theme-light .navbar-mobile,
html.theme-light .navbar-mobile {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important;
}
body.theme-light .navbar-mobile-link,
html.theme-light .navbar-mobile-link {
  color: #1e293b !important;
}
body.theme-light .navbar-mobile-link:hover,
body.theme-light .navbar-mobile-link.active,
html.theme-light .navbar-mobile-link:hover,
html.theme-light .navbar-mobile-link.active {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .navbar-toggle span,
html.theme-light .navbar-toggle span {
  background-color: #0f172a !important;
}

/* UserMenu in Light Mode — glass only, never opaque white blocks */
body.theme-light .user-menu-btn,
html.theme-light .user-menu-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
body.theme-light .user-menu-btn:hover,
html.theme-light .user-menu-btn:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}
body.theme-light .user-menu-btn svg,
html.theme-light .user-menu-btn svg {
  color: #0f172a !important;
}
body.theme-light .user-menu-trigger-name,
html.theme-light .user-menu-trigger-name {
  color: #0f172a !important;
}

/* ── 7. Glassmorphic Cards & Containers (High-Contrast Royal Navy in Light Mode) ── */
body.theme-light .counter-card,
body.theme-light .stat-card,
body.theme-light .glass-card,
body.theme-light .news-card,
body.theme-light .news-card-normal,
body.theme-light .news-card-featured,
body.theme-light .event-card,
body.theme-light .committee-card,
body.theme-light .gov-card,
body.theme-light .about-val-card,
body.theme-light .feature-card,
body.theme-light .alumni-card,
body.theme-light .story-card,
body.theme-light .detail-card,
body.theme-light .board-member-card,
body.theme-light .board-section-card,
body.theme-light .login-card,
body.theme-light .join-card,
body.theme-light .achievement-card,
body.theme-light .video-card-main,
body.theme-light .video-card-side,
body.theme-light .partner-logo,
body.theme-light .about-photo-card,
body.theme-light .about-vision-card,
body.theme-light .gallery-card,
body.theme-light .card-rec,
body.theme-light .join-card-rec {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.theme-light .counter-card:hover,
body.theme-light .stat-card:hover,
body.theme-light .glass-card:hover,
body.theme-light .news-card:hover,
body.theme-light .news-card-normal:hover,
body.theme-light .news-card-featured:hover,
body.theme-light .event-card:hover,
body.theme-light .committee-card:hover,
body.theme-light .gov-card:hover,
body.theme-light .about-val-card:hover,
body.theme-light .feature-card:hover,
body.theme-light .alumni-card:hover,
body.theme-light .story-card:hover,
body.theme-light .detail-card:hover,
body.theme-light .board-member-card:hover,
body.theme-light .board-section-card:hover,
body.theme-light .achievement-card:hover,
body.theme-light .video-card-main:hover,
body.theme-light .video-card-side:hover,
body.theme-light .partner-logo:hover,
body.theme-light .gallery-card:hover,
body.theme-light .timeline-content-wrap:hover,
body.theme-light .card-rec:hover {
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.28), rgba(255, 255, 255, 0.04) 40%, transparent 70%), linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.38), 0 0 35px rgba(37, 99, 235, 0.25) !important;
}

body.theme-light .join-modal-content,
body.theme-light .modal-content,
body.theme-light .job-modal-box {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
}


/* ── 8. Hero Section & Slideshow (Pearl Ambient Lighting) ── */
body.theme-light .hero-slideshow {
  background: #f8fafc !important;
}
body.theme-light .hero-slide-1 {
  background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}
body.theme-light .hero-slide-2 {
  background: radial-gradient(circle at 70% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}
body.theme-light .hero-slide-3 {
  background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}
body.theme-light .hero-overlay {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.3) 0%, rgba(241, 245, 249, 0.6) 50%, rgba(226, 232, 240, 0.95) 100%) !important;
}
body.theme-light .hero-overlay-pattern {
  background-image: radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 50% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%) !important;
}
body.theme-light .hero-shape {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body.theme-light .hero-shape-1 {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(99, 102, 241, 0.08)) !important;
}
body.theme-light .hero-shape-2 {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(59, 130, 246, 0.08)) !important;
}
body.theme-light .hero-shape-3 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08)) !important;
}
body.theme-light .hero-shape-4 {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.08)) !important;
}
body.theme-light .hero-logo-ring {
  border: 2px solid rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .hero-logo-ring::before {
  background: #2563eb !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.7) !important;
}
body.theme-light .hero-dot {
  background: rgba(15, 23, 42, 0.25) !important;
}
body.theme-light .hero-dot.active {
  background: #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important;
}
body.theme-light .scroll-mouse {
  border-color: #2563eb !important;
}
body.theme-light .scroll-mouse-ball {
  background: #2563eb !important;
}

/* ── 8b. Modern 4-Box Statistics Section ("المربعات الأربعة") in Light Mode ── */
body.theme-light .stats-bar,
html.theme-light .stats-bar {
  background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 70%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding: 2.5rem 0 !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04) !important;
}
body.theme-light .stats-bar::before,
html.theme-light .stats-bar::before {
  background: linear-gradient(90deg, transparent, #2563eb, #3b82f6, transparent) !important;
}
body.theme-light .stats-grid,
html.theme-light .stats-grid {
  gap: 1.25rem !important;
  padding: 0.5rem 0 !important;
}
body.theme-light .stat-item,
html.theme-light .stat-item {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body.theme-light .stat-item:hover,
html.theme-light .stat-item:hover {
  background: linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  transform: translateY(-4px) translateZ(0) !important;
}
body.theme-light .stat-icon-wrap,
html.theme-light .stat-icon-wrap {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  padding: 0.75rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2) !important;
  margin-bottom: 0.75rem !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.theme-light .stat-icon-wrap svg,
html.theme-light .stat-icon-wrap svg {
  stroke: #60a5fa !important;
}
body.theme-light .stat-number-new,
html.theme-light .stat-number-new {
  color: #60a5fa !important;
  font-weight: 900 !important;
  font-size: clamp(1.875rem, 3vw, 2.25rem) !important;
  line-height: 1.1 !important;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.3) !important;
}
body.theme-light .stat-label-new,
html.theme-light .stat-label-new,
body.theme-light .stat-label-new span,
html.theme-light .stat-label-new span {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
}
@media (max-width: 768px) {
  body.theme-light .stats-grid,
  html.theme-light .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 480px) {
  body.theme-light .stats-grid,
  html.theme-light .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. Videos Section ── */
body.theme-light .videos-section {
  background: transparent !important;
}
body.theme-light .video-play-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.5) !important;
}
body.theme-light .video-play-btn svg {
  fill: #ffffff !important;
}
body.theme-light .video-duration {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
}

/* ── 10. Timeline Section (High-Contrast Dark Royal Navy Cards) ── */
body.theme-light .timeline-section {
  background: transparent !important;
}
body.theme-light .timeline-section::before {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%) !important;
}
body.theme-light .timeline-content-wrap {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.theme-light .timeline-content-wrap:hover,
body.theme-light .timeline-item.tl-expanded .timeline-content-wrap {
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.28), rgba(255, 255, 255, 0.04) 40%, transparent 70%), linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.38), 0 0 35px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .timeline-title,
body.theme-light .timeline-content-wrap .timeline-title,
body.theme-light .timeline-content-wrap.tl-expanded .timeline-title {
  color: #ffffff !important;
}
body.theme-light .timeline-desc,
body.theme-light .timeline-content-wrap .timeline-desc,
body.theme-light .timeline-item.tl-expanded .timeline-desc,
body.theme-light .timeline-content-wrap.tl-expanded .timeline-desc,
body.theme-light .timeline-desc span {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.theme-light .timeline-year-tag {
  background: rgba(37, 99, 235, 0.25) !important;
  border: 1px solid rgba(96, 165, 250, 0.5) !important;
  color: #93c5fd !important;
}
body.theme-light .timeline-content-wrap:not(.tl-expanded)::after {
  color: #60a5fa !important;
  background: rgba(37, 99, 235, 0.25) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}
body.theme-light .timeline-dot {
  background: #2563eb !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.6) !important;
}
body.theme-light .timeline-line {
  background: linear-gradient(180deg, #2563eb, rgba(37, 99, 235, 0.25)) !important;
}

/* ── 11. Page Hero & Detail Headers ── */
body.theme-light .page-hero,
body.theme-light .detail-header,
body.theme-light .banner-section {
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
              linear-gradient(180deg, #f8fafc 0%, #f1f5f9 60%, #e2e8f0 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body.theme-light .page-hero::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(37, 99, 235, 0.06), transparent 70%) !important;
}

/* ── 11b. Global Sections Polish (About, Achievements, Alumni, CTA, Ticker) ── */
body.theme-light .about-section-new,
html.theme-light .about-section-new,
body.theme-light .achievements-section,
html.theme-light .achievements-section,
body.theme-light .alumni-section,
html.theme-light .alumni-section,
body.theme-light .partners-section,
html.theme-light .partners-section,
body.theme-light .join-section,
html.theme-light .join-section,
body.theme-light .news-section-new,
html.theme-light .news-section-new,
body.theme-light #news-preview,
html.theme-light #news-preview {
  background: transparent !important;
}
body.theme-light .partners-section,
html.theme-light .partners-section {
  border-top-color: rgba(226, 232, 240, 0.8) !important;
}

/* About Section Elements */
body.theme-light .about-heading,
html.theme-light .about-heading {
  color: #0f172a !important;
}
body.theme-light .about-desc,
html.theme-light .about-desc {
  color: #475569 !important;
}
body.theme-light .about-badge-new,
html.theme-light .about-badge-new {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  color: #2563eb !important;
}
body.theme-light .about-vision-card,
html.theme-light .about-vision-card,
[data-theme="light"] .about-vision-card {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.theme-light .about-vision-card:hover,
html.theme-light .about-vision-card:hover,
[data-theme="light"] .about-vision-card:hover {
  background: linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.28), 0 0 30px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-4px) !important;
}
body.theme-light .about-vision-icon,
html.theme-light .about-vision-icon,
[data-theme="light"] .about-vision-icon {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
}
body.theme-light .about-vision-icon svg,
html.theme-light .about-vision-icon svg,
[data-theme="light"] .about-vision-icon svg {
  stroke: #60a5fa !important;
}
body.theme-light .about-vision-title,
html.theme-light .about-vision-title,
[data-theme="light"] .about-vision-title {
  color: #ffffff !important;
}
body.theme-light .about-vision-text,
html.theme-light .about-vision-text,
[data-theme="light"] .about-vision-text {
  color: #cbd5e1 !important;
}
body.theme-light .about-photo-placeholder,
html.theme-light .about-photo-placeholder {
  background: #0f172a !important;
  color: #94a3b8 !important;
}
body.theme-light .about-badge-float,
html.theme-light .about-badge-float {
  background: linear-gradient(135deg, #0b1528, #101d3b) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3) !important;
}
body.theme-light .about-badge-float-num,
html.theme-light .about-badge-float-num {
  color: #60a5fa !important;
}
body.theme-light .about-badge-float-label,
html.theme-light .about-badge-float-label {
  color: #e2e8f0 !important;
}

/* Achievements Section Elements */
body.theme-light .achievement-card,
html.theme-light .achievement-card,
[data-theme="light"] .achievement-card {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.theme-light .achievement-card:hover,
html.theme-light .achievement-card:hover,
[data-theme="light"] .achievement-card:hover {
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.28), rgba(255, 255, 255, 0.04) 40%, transparent 70%), linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.38), 0 0 35px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .achievement-icon,
html.theme-light .achievement-icon,
[data-theme="light"] .achievement-icon {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
}
body.theme-light .achievement-icon svg,
html.theme-light .achievement-icon svg,
[data-theme="light"] .achievement-icon svg {
  stroke: #60a5fa !important;
}
body.theme-light .achievement-num,
html.theme-light .achievement-num,
[data-theme="light"] .achievement-num {
  color: #60a5fa !important;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.35) !important;
}
body.theme-light .achievement-label,
html.theme-light .achievement-label,
[data-theme="light"] .achievement-label {
  color: #ffffff !important;
}
body.theme-light .achievement-sub,
html.theme-light .achievement-sub,
[data-theme="light"] .achievement-sub {
  color: #cbd5e1 !important;
}

/* Alumni Stories Elements */
body.theme-light .alumni-card,
html.theme-light .alumni-card,
[data-theme="light"] .alumni-card {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.theme-light .alumni-card:hover,
html.theme-light .alumni-card:hover,
[data-theme="light"] .alumni-card:hover {
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.28), rgba(255, 255, 255, 0.04) 40%, transparent 70%), linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.38), 0 0 35px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .alumni-name,
html.theme-light .alumni-name,
[data-theme="light"] .alumni-name {
  color: #ffffff !important;
}
body.theme-light .alumni-role,
html.theme-light .alumni-role,
[data-theme="light"] .alumni-role {
  color: #93c5fd !important;
}
body.theme-light .alumni-now,
html.theme-light .alumni-now,
[data-theme="light"] .alumni-now {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}
body.theme-light .alumni-now svg,
html.theme-light .alumni-now svg,
[data-theme="light"] .alumni-now svg {
  stroke: #86efac !important;
}
body.theme-light .alumni-quote,
html.theme-light .alumni-quote,
[data-theme="light"] .alumni-quote {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.theme-light .alumni-year-tag,
html.theme-light .alumni-year-tag,
[data-theme="light"] .alumni-year-tag {
  background: rgba(37, 99, 235, 0.25) !important;
  border: 1px solid rgba(96, 165, 250, 0.5) !important;
  color: #93c5fd !important;
}

/* Join CTA Section Elements */
body.theme-light .join-card,
html.theme-light .join-card,
[data-theme="light"] .join-card {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.35), 0 0 30px rgba(37, 99, 235, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.theme-light .join-card:hover,
html.theme-light .join-card:hover,
[data-theme="light"] .join-card:hover {
  background: linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  box-shadow: 0 25px 55px -10px rgba(15, 23, 42, 0.4), 0 0 40px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-4px) !important;
}
body.theme-light .join-title,
html.theme-light .join-title,
[data-theme="light"] .join-title {
  color: #ffffff !important;
}
body.theme-light .join-subtitle,
html.theme-light .join-subtitle,
[data-theme="light"] .join-subtitle {
  color: #cbd5e1 !important;
}
body.theme-light .join-badge,
html.theme-light .join-badge,
[data-theme="light"] .join-badge {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  color: #93c5fd !important;
}
body.theme-light .join-badge svg,
html.theme-light .join-badge svg,
[data-theme="light"] .join-badge svg {
  stroke: #60a5fa !important;
}
body.theme-light .join-stat,
html.theme-light .join-stat,
[data-theme="light"] .join-stat {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
body.theme-light .join-stat-num,
html.theme-light .join-stat-num,
[data-theme="light"] .join-stat-num {
  color: #60a5fa !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.3) !important;
}
body.theme-light .join-stat-label,
html.theme-light .join-stat-label,
[data-theme="light"] .join-stat-label {
  color: #e2e8f0 !important;
}
body.theme-light .join-card .btn-secondary,
html.theme-light .join-card .btn-secondary,
[data-theme="light"] .join-card .btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(10px) !important;
}
body.theme-light .join-card .btn-secondary:hover,
html.theme-light .join-card .btn-secondary:hover,
[data-theme="light"] .join-card .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* Ticker Bar */
body.theme-light .ticker-wrapper,
html.theme-light .ticker-wrapper {
  background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.theme-light .ticker-label,
html.theme-light .ticker-label {
  background: #f59e0b !important;
  color: #0f172a !important;
}

/* ==========================================================================
   12. BOARD & GOVERNORATES (High-Contrast Dark Navy Cards)
   ========================================================================== */
body.theme-light .board-member-card,
body.theme-light .board-section-card,
html.theme-light .board-member-card,
html.theme-light .board-section-card,
[data-theme="light"] .board-member-card,
[data-theme="light"] .board-section-card {
  background: linear-gradient(135deg, #0b1528 0%, #101d3b 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.theme-light .board-member-card:hover,
html.theme-light .board-member-card:hover,
[data-theme="light"] .board-member-card:hover {
  background: linear-gradient(135deg, #0e1b34 0%, #16284f 100%) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  box-shadow: 0 20px 45px -5px rgba(37, 99, 235, 0.28), 0 0 30px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-4px) !important;
}
body.theme-light .board-member-name,
body.theme-light .board-member-name span,
html.theme-light .board-member-name,
html.theme-light .board-member-name span {
  color: #ffffff !important;
}
body.theme-light .board-member-role,
body.theme-light .board-member-role span,
html.theme-light .board-member-role,
html.theme-light .board-member-role span {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  color: #93c5fd !important;
}
body.theme-light .board-member-img {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25) !important;
}

/* Governorate Map Section */
body.theme-light .map-section {
  background: transparent !important;
}
body.theme-light .map-container {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important;
}
body.theme-light .map-region {
  fill: rgba(37, 99, 235, 0.08) !important;
  stroke: rgba(37, 99, 235, 0.3) !important;
  stroke-width: 1.2px !important;
  transition: all 0.25s ease !important;
}
body.theme-light .map-region:hover {
  fill: #2563eb !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5)) !important;
}
body.theme-light .map-region.active {
  fill: #1d4ed8 !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 12px rgba(29, 78, 216, 0.6)) !important;
}
body.theme-light #map-tooltip,
body.theme-light .map-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important;
}
body.theme-light #map-tooltip #tooltip-title,
body.theme-light #map-tooltip h3,
body.theme-light .map-tooltip h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}
body.theme-light #map-tooltip #tooltip-desc,
body.theme-light #map-tooltip span,
body.theme-light .map-tooltip span {
  color: #475569 !important;
}
body.theme-light #gov-side-panel,
body.theme-light .off-canvas-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: -10px 0 30px rgba(15, 23, 42, 0.08) !important;
}
body.theme-light #gov-side-panel #panel-gov-name,
body.theme-light #gov-side-panel h2,
body.theme-light #gov-side-panel h3,
body.theme-light #gov-side-panel h4,
body.theme-light .off-canvas-panel h2,
body.theme-light .off-canvas-panel h3,
body.theme-light .off-canvas-panel h4 {
  color: #0f172a !important;
}
body.theme-light #gov-side-panel p,
body.theme-light #gov-side-panel span:not(.badge),
body.theme-light #gov-side-panel div,
body.theme-light .off-canvas-panel p {
  color: #334155 !important;
}
body.theme-light #gov-side-panel .badge,
body.theme-light #gov-side-panel span[style*="background"] {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}
body.theme-light #gov-side-panel div[style*="background"] {
  background: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}
body.theme-light .gov-leader-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

/* ==========================================================================
   13. FILTER TABS, CHIPS & SEARCH CONTROLS
   ========================================================================== */
body.theme-light .filter-tab,
body.theme-light .filter-chip,
body.theme-light .filter-chip-new,
body.theme-light .tab-btn,
body.theme-light .category-tab {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.theme-light .filter-tab:hover,
body.theme-light .filter-chip:hover,
body.theme-light .filter-chip-new:hover,
body.theme-light .tab-btn:hover,
body.theme-light .category-tab:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}
body.theme-light .filter-tab.active,
body.theme-light .filter-chip.active,
body.theme-light .filter-chip-new.active,
body.theme-light .tab-btn.active,
body.theme-light .category-tab.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35) !important;
}

/* Search Wrapper & Form Inputs */
body.theme-light .search-wrapper,
body.theme-light .hero-search-box {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}
body.theme-light .search-wrapper:focus-within,
body.theme-light .hero-search-box:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 10px 30px rgba(37, 99, 235, 0.1) !important;
}
body.theme-light .search-wrapper .search-input,
body.theme-light .hero-search-box input,
body.theme-light input.form-input,
body.theme-light textarea.form-input {
  background: transparent !important;
  color: #0f172a !important;
}
body.theme-light .search-wrapper .search-input::placeholder,
body.theme-light .hero-search-box input::placeholder,
body.theme-light input.form-input::placeholder,
body.theme-light textarea.form-input::placeholder {
  color: #94a3b8 !important;
}
body.theme-light .search-wrapper .search-icon {
  fill: #2563eb !important;
  color: #2563eb !important;
}

/* ==========================================================================
   14. NEWS, EVENTS & ARTICLES
   ========================================================================== */
body.theme-light .news-card,
body.theme-light .news-card-normal,
body.theme-light .news-card-featured,
html.theme-light .news-card,
html.theme-light .news-card-normal,
html.theme-light .news-card-featured,
body.theme-light .event-card,
html.theme-light .event-card {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08) !important;
}
body.theme-light .news-card:hover,
body.theme-light .news-card-normal:hover,
body.theme-light .news-card-featured:hover,
html.theme-light .news-card:hover,
html.theme-light .news-card-normal:hover,
html.theme-light .news-card-featured:hover,
body.theme-light .event-card:hover,
html.theme-light .event-card:hover {
  background: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-4px) !important;
}
body.theme-light .news-section-new .section-cta a,
html.theme-light .news-section-new .section-cta a {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}
body.theme-light .news-section-new .section-cta a:hover,
html.theme-light .news-section-new .section-cta a:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
}
body.theme-light .news-card-title,
body.theme-light .news-card-title a,
body.theme-light .event-title {
  color: #0f172a !important;
}
body.theme-light .news-card:hover .news-card-title,
body.theme-light .news-card:hover .news-card-title a,
body.theme-light .news-card-normal:hover .card-title,
body.theme-light .news-card-featured:hover .featured-title,
body.theme-light .event-card:hover .event-title {
  color: #2563eb !important;
}
body.theme-light .news-card-excerpt,
body.theme-light .card-excerpt,
body.theme-light .featured-excerpt,
body.theme-light .event-meta,
body.theme-light .event-meta span {
  color: #475569 !important;
}
body.theme-light .news-card-meta,
body.theme-light .meta-date {
  color: #64748b !important;
}
body.theme-light .news-card-category {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}
body.theme-light .news-read-more {
  color: #2563eb !important;
  font-weight: 600 !important;
}
body.theme-light .event-date-box {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  color: #2563eb !important;
}
body.theme-light .event-date-box .event-day,
body.theme-light .event-date-box .event-month {
  color: #2563eb !important;
  font-weight: 700 !important;
}
body.theme-light .event-badge {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

/* Detail & Article Pages */
body.theme-light .detail-hero h1,
body.theme-light .article-title {
  color: #0f172a !important;
}
body.theme-light .detail-meta,
body.theme-light .article-meta {
  color: #64748b !important;
}
body.theme-light .article-body,
body.theme-light .article-body p,
body.theme-light .detail-content,
body.theme-light .detail-content p {
  color: #334155 !important;
  line-height: 1.8 !important;
}
body.theme-light .share-btns a,
body.theme-light .tag-item {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #2563eb !important;
}
body.theme-light .share-btns a:hover,
body.theme-light .tag-item:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* ==========================================================================
   15. RECRUITMENT PORTAL
   ========================================================================== */
body.theme-light .hero-title-rec {
  color: #0f172a !important;
  text-shadow: none !important;
}
body.theme-light .hero-subtitle-rec {
  color: #475569 !important;
}
body.theme-light .hero-reg-tag {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08) !important;
}
body.theme-light .hero-reg-text {
  color: #0f172a !important;
}
body.theme-light .hero-reg-highlight {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.1) !important;
}
body.theme-light .stat-number-rec {
  color: #2563eb !important;
}
body.theme-light .stat-label-rec {
  color: #475569 !important;
}
body.theme-light .section-heading-new {
  color: #0f172a !important;
}
body.theme-light .section-sub-new {
  color: #475569 !important;
}
body.theme-light .card-rec {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06) !important;
}
body.theme-light .card-rec:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 20px 35px -5px rgba(37, 99, 235, 0.12), 0 0 18px rgba(37, 99, 235, 0.08) !important;
  transform: translateY(-4px) !important;
}
body.theme-light .card-rec-title {
  color: #0f172a !important;
}
body.theme-light .card-rec:hover .card-rec-title {
  color: #2563eb !important;
}
body.theme-light .card-rec-sub {
  color: #64748b !important;
}
body.theme-light .card-rec-desc {
  color: #334155 !important;
}
body.theme-light .card-rec-avatar {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.2)) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
}
body.theme-light .card-rec:hover .card-rec-avatar {
  border-color: #2563eb !important;
  color: #2563eb !important;
}
body.theme-light .tag-rec-blue {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  color: #2563eb !important;
}
body.theme-light .tag-rec-blue:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
body.theme-light .tag-rec-green {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #059669 !important;
}
body.theme-light .tag-rec-green:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}
body.theme-light .skill-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
body.theme-light .skill-pill:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}
body.theme-light .card-rec-foot {
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}
body.theme-light .card-rec-deadline {
  color: #64748b !important;
}
body.theme-light .btn-details-rec {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
body.theme-light .btn-details-rec:hover {
  background: #e2e8f0 !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}
body.theme-light .btn-card-save {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}
body.theme-light .btn-card-save:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
body.theme-light .btn-company-jobs {
  background: #ffffff !important;
  border: 1px solid #2563eb !important;
  color: #2563eb !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.1) !important;
}
body.theme-light .btn-company-jobs:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3) !important;
}
body.theme-light .join-card-rec {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}
body.theme-light .join-title-rec {
  color: #0f172a !important;
}
body.theme-light .join-sub-rec {
  color: #475569 !important;
}
body.theme-light .join-input-rec {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
body.theme-light .join-input-rec:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}
body.theme-light .job-modal-box {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
}

/* ==========================================================================
   16. FOOTER & SUB-FOOTER
   ========================================================================== */
body.theme-light .footer,
body.theme-light footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #475569 !important;
}
body.theme-light .footer-title,
body.theme-light .footer h3,
body.theme-light .footer h4 {
  color: #0f172a !important;
}
body.theme-light .footer-link,
body.theme-light .footer a:not(.btn) {
  color: #475569 !important;
  transition: color 0.2s ease !important;
}
body.theme-light .footer-link:hover,
body.theme-light .footer a:not(.btn):hover {
  color: #2563eb !important;
}
body.theme-light .footer-desc,
body.theme-light .footer p {
  color: #475569 !important;
}
body.theme-light .footer-social-link,
body.theme-light .social-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.25s ease !important;
}
body.theme-light .footer-social-link:hover,
body.theme-light .social-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-2px) !important;
}
body.theme-light .footer-bottom,
body.theme-light .copyright-bar {
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #64748b !important;
}

/* ==========================================================================
   17. LOGO SWITCHING & IMAGERY IN LIGHT MODE
   ========================================================================== */
body.theme-light .theme-logo-dark,
body.theme-light .logo-dark {
  display: none !important;
}
body.theme-light .theme-logo-light,
body.theme-light .logo-light {
  display: inline-block !important;
}

/* 18. FLOATING LIQUID GLASS NAVBAR - LIGHT THEME VARIABLES */
:root[data-theme="light"],
html.theme-light,
body.theme-light {
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(226, 232, 240, 0.85);
  --nav-border-scrolled: rgba(203, 213, 225, 0.95);
  --nav-text: #0f172a;
  --nav-active-bg: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}


/* ==========================================================================
   DESKTOP SCROLL INTEGRITY & HERO SCROLL CUE SUPPRESSION
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

@media (min-width: 768px) {
  .hero-scroll-cue,
  #hero-scroll-cue {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media (max-width: 767px) {
  .hero-scroll-cue,
  #hero-scroll-cue {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Guarantee logo visibility across all languages and themes */
body.lang-english .navbar-logo-img,
html[dir="ltr"] .navbar-logo-img,
html[lang="en"] .navbar-logo-img,
body.lang-english .hero-logo-img,
html[dir="ltr"] .hero-logo-img,
html[lang="en"] .hero-logo-img,
body.lang-english .footer-logo-img,
html[dir="ltr"] .footer-logo-img,
html[lang="en"] .footer-logo-img,
.navbar-logo-img,
.hero-logo-img,
.footer-logo-img {
  content: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent public registration closed popup from showing inside dashboard */
body:has(#dashboard-root) #join-closed-overlay,
body:has(#dashboard-root) #join-modal-overlay,
body:has(aside) #join-closed-overlay,
body:has(aside) #join-modal-overlay,
.dashboard-page #join-closed-overlay,
.dashboard-page #join-modal-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}