@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Utility: Hide scrollbars but keep functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:root {
  /* 🎨 BRAND COLOR PALETTE SPECIFICATION (College Karo Ground Truth Tokens) */
  --color-primary: #1B6B44;        /* Deep Forest Green */
  --color-primary-hover: #14532D;  /* Dark Forest Green */
  --color-secondary: #228B53;      /* Vibrant Green Accent */
  --color-cream: #FAF7F0;          /* Strict Scope: Clickable & Interactive items ONLY */
  
  --color-bg-main: #FFFFFF;        /* Clean White Page Background */
  --color-bg-surface: #FFFFFF;     /* Clean White Surface */
  --color-border: #ECE6DC;         /* Crisp Light Border */
  --color-text-heading: #112217;   /* Deep Charcoal Green Heading */
  --color-text-body: #112217;      /* Clean Text */
  --color-text-muted: #788373;     /* Muted Green-Gray */
  
  --color-success: #1B6B44;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Legacy Aliases for Backwards Compatibility across existing webapp files */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-light: #E8F5E9;
  --secondary: var(--color-secondary);
  --text-dark: var(--color-text-heading);
  --text-main: var(--color-text-body);
  --text-muted: var(--color-text-muted);
  --text-dim: #94a3b8;
  --bg-color: var(--color-bg-main);
  --white: var(--color-bg-surface);
  --cream-card: var(--color-cream);
  --border-light: var(--color-border);
  --border-main: var(--color-border);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --primary-dark: #14532D;
  --accent-yellow: #fbbf24;

  /* Mobile Design System Tokens */
  --m-h-hero: 1.875rem; /* 30px */
  --m-h1: 1.5rem;      /* 24px */
  --m-h2: 1.25rem;     /* 20px */
  --m-h3: 1.125rem;    /* 18px */
  --m-body: 1rem;      /* 16px */
  --m-secondary: 0.875rem; /* 14px */
  --m-small: 0.75rem;   /* 12px */
  --m-nav-label: 0.7rem; /* 11-12px */

  --m-padding-x: 1rem; /* 16px */
  --m-section-gap: 1.25rem;  /* 20px */
  --m-card-padding: 0.8rem;   /* 13px */
  --m-element-gap: 0.5rem; /* 8px */
  
  --m-btn-height: 50px;
  --m-input-height: 48px;
  --m-radius-card: 14px;
  --m-radius-btn: 11px;
  --m-radius-input: 9px;
  
  --m-shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --m-nav-height: 62px;
  
  --m-avatar-sm: 36px;
  --m-avatar-md: 48px;
  --m-avatar-lg: 80px;
  --m-banner-height: 190px;
}

/* Dark Mode Configuration */
:root {
  --bg-dark: #0f172a;
  --card-dark: #1e293b;
  --text-dark-mode: #f8fafc;
  --text-muted-dark: #94a3b8;
  --border-dark: #334155;
}

.dark-theme {
  --color-bg-main: #0F1713;
  --color-bg-surface: #19241E;
  --color-cream: #19241E;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text-heading: #FFFFFF;
  --color-text-body: #FFFFFF;
  --color-text-muted: #CBD5E1;
  --bg-color: #0F1713;
  --white: #19241E;
  --text-dark: #FFFFFF;
  --text-main: #FFFFFF;
  --text-muted: #CBD5E1;
  --border-light: rgba(255, 255, 255, 0.12);
  --border-main: rgba(255, 255, 255, 0.18);
  color-scheme: dark;
}

body.dark-theme,
html.dark-theme {
  background-color: #0F1713 !important;
  color: #FFFFFF !important;
}

.dark-theme .navbar,
.dark-theme .app-header-nav {
  background: #19241E !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .bottom-nav-bar {
  background: #19241E !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .category-card-interactive,
.dark-theme .uni-list-card,
.dark-theme .course-inventory-card,
.dark-theme .premium-course-card,
.dark-theme .feature-card-premium,
.dark-theme .application-card,
.dark-theme .notification-card {
  background: #19241E !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.dark-theme .cat-icon-badge {
  background: #0F1713 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .brand-title-text,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4 {
  color: #FFFFFF !important;
}

.dark-theme .cat-pill {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.dark-theme .cat-pill.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dark-theme input, 
.dark-theme select, 
.dark-theme textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

.dark-theme input::placeholder {
  color: #64748b !important;
}

.dark-theme .modal-content {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
}

.dark-theme .btn-primary {
  box-shadow: 0 4px 15px rgba(136, 65, 193, 0.4);
  color: #ffffff !important;
}

.dark-theme .btn-primary svg,
.dark-theme .btn-primary span {
  color: #ffffff !important;
}

/* Fix for light background sections */
.dark-theme section[style*="background: white"],
.dark-theme div[style*="background: white"],
.dark-theme section[style*="background: #f8fafc"],
.dark-theme footer[style*="background: #f8fafc"],
.dark-theme .why-us-redesign {
  background: transparent !important;
}

/* Mobile-Specific Dark Mode Enhancements */
.dark-theme .bottom-nav-bar {
  background: #020617 !important; /* Pure dark for mobile nav */
  border-top: 1px solid #334155 !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
}

.dark-theme .bottom-nav-item {
  color: #e2e8f0 !important; /* Brightened from muted */
}

.dark-theme .bottom-nav-item svg {
  fill: #e2e8f0 !important;
}

.dark-theme .bottom-nav-item.active {
  color: #c084fc !important;
}

.dark-theme .bottom-nav-item.active svg {
  fill: #c084fc !important;
}

.dark-theme .mobile-search-bar {
  background: #0f172a !important;
  border: 1px solid #475569 !important;
}

.dark-theme .mobile-search-placeholder {
  color: #f8fafc !important; /* Pure white contrast */
}

.dark-theme .footer-link,
.dark-theme .app-footer a,
.dark-theme .app-footer div,
.dark-theme .app-footer p {
  color: #e2e8f0 !important;
}

.dark-theme .cat-pill {
  background: #1e293b !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}

.dark-theme .cat-pill:hover {
  background: #334155 !important;
}

.dark-theme .cat-pill.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

/* Ensure navbar links are white */
.dark-theme .navbar a,
.dark-theme .nav-brand span {
  color: #ffffff !important;
}

/* Fix for Log In button border/text in dark mode */
.dark-theme a[style*="color: var(--text-dark)"] {
  color: #ffffff !important;
  border-color: #475569 !important;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html {
  scroll-padding-top: 65px;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-dark);
  line-height: 1.5;
  font-size: var(--m-body);
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.nav-links a {
  margin-left: 2rem;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--primary);
}

.btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* College Vidya Inspired Hero Section */


.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 4rem 1rem;
  align-items: center;
}
@media(min-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
  }
}

.badge {
  display: inline-block;
  background: #fef3c7;
  color: #d97706; /* Amber - keep as is for specific badge or use a new var if preferred */
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Meta badge style */
.meta-badge { display:inline-block; background: var(--primary-light); color: var(--primary); padding:0.2rem 0.6rem; border-radius:12px; font-size:0.75rem; font-weight:600; margin-left:0.5rem; }

.hero-text h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  color: var(--text-dark);
}

.hero-text h1 span {
  color: var(--primary);
}

.hero-text p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.hero-stats div {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hero-stats strong {
  font-size: 1.4rem;
  color: var(--text-dark);
}

.hero-image {
  position: relative;
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.4);
}

.blob-accent {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px;
  height: 200px;
  background: var(--primary);
  opacity: 0.15;
  border-radius: 50%;
  filter: blur(30px);
  z-index: 1;
}

@keyframes horizontalScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

#horizontal-uni-scroll:hover {
  animation-play-state: paused;
}

/* Category grid */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.cat-pill {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 0.6rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
  white-space: nowrap;
}

.cat-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1);
}

.cat-pill.active-pill {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
}

/* Home Page Slider Specific Box Style (Corrected 3.5 Visibility) */
#dynamic-categories .cat-pill {
  flex: 0 0 28.5vw; /* Precision adjusted for exact 3.5 visibility */
  min-width: 95px;
  min-height: 100px;
  background: white;
  border: 1.5px solid #f1f5f9;
  padding: 0.8rem 0.4rem;
  border-radius: 18px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  word-wrap: break-word;
}

#dynamic-categories .active-pill {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.category-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 10px 1.2rem 20px 1.2rem; /* Strategic horizontal padding */
}

.category-grid > div:first-child {
  margin-left: 0 !important;
}

/* --- App Dashboard Theme (Reference Image Style) --- */
.app-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 1.2rem 0 0.5rem 1rem;
  letter-spacing: 0.2px;
}

.app-card-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 1rem 1.5rem 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Prevent slider navigation buttons from overlapping cards on desktop */
@media (min-width: 769px) {
  .app-card-slider {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .course-item {
    flex: 0 0 160px !important;
    width: 160px !important;
  }
  .course-item-label {
    font-size: 0.85rem !important;
  }
  .app-section-title {
    margin-left: 2rem !important;
    font-size: 1.4rem !important;
  }
}

.app-card-slider::-webkit-scrollbar {
  display: none;
}

.course-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 105px;
  width: 105px;
}

@media (max-width: 600px) {
  .course-item {
    flex: 0 0 28.5vw !important;
    width: 28.5vw !important;
  }
}

.course-item .app-dash-card {
  width: 100%;
  flex: none;
}

.course-item-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  line-height: 1.2;
  width: 100%;
  word-wrap: break-word;
}

.app-dash-card {
  flex: 0 0 95px;
  width: 95px;
  flex-shrink: 0;
  background: white;
  border-radius: 24px;
  padding: 0.8rem;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.03);
  border: 1px solid rgba(241, 245, 249, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 95px;
  height: 95px;
  transition: all 0.2s ease;
  overflow: hidden;
}

/* Curved Left Accent Design Matching Requested Theme */
.app-dash-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 5px;
  background: var(--primary);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 2;
}

.app-dash-card.diploma { background: white; border: 1px solid var(--border-light); }
.app-dash-card.diploma::before { background: #f59e0b; }

.app-dash-card.online { background: white; border: 1px solid var(--border-light); }
.app-dash-card.online::before { background: #10b981; }

.app-dash-card.ug { background: white; border: 1px solid var(--border-light); }
.app-dash-card.ug::before { background: #3b82f6; }

.app-dash-card.pg { background: white; border: 1px solid var(--border-light); }
.app-dash-card.pg::before { background: #8b5cf6; }

.course-inventory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  background: var(--cream-card, #FAF7F0);
  border: 1.2px solid var(--border-light, #ECE6DC);
  min-width: 260px;
  max-width: 300px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .course-inventory-card {
    min-width: 380px;
    padding: 1.5rem;
    gap: 20px;
    border-radius: 24px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  }
  .inventory-card-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }
  .inventory-card-icon img {
    width: 42px !important;
    height: 42px !important;
  }
  .inventory-card-title {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
  }
  .inventory-card-meta {
    flex-direction: row !important;
    gap: 15px !important;
    font-size: 0.8rem !important;
  }
  .app-section-title {
    font-size: 1.5rem !important;
    margin: 2.5rem 0 1rem 4.5rem !important;
    color: var(--text-dark) !important;
  }
}

.course-inventory-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--primary-light, #E8F5E9);
}

.course-inventory-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 2;
}

.course-inventory-card.diploma::before { background: #f59e0b; }
.course-inventory-card.diploma { background: var(--cream-card, #FAF7F0); }

.course-inventory-card.online::before { background: #1B6B44; }
.course-inventory-card.online { background: var(--cream-card, #FAF7F0); }

.course-inventory-card.ug::before { background: #228B53; }
.course-inventory-card.ug { background: var(--cream-card, #FAF7F0); }

.course-inventory-card.pg::before { background: #14532D; }
.course-inventory-card.pg { background: var(--cream-card, #FAF7F0); }

.inventory-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
}

.inventory-card-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.inventory-card-info {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.inventory-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.course-inventory-card:hover .inventory-card-arrow {
  background: var(--primary);
  color: white;
  transform: translateX(3px);
}

.inventory-card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.inventory-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 0.65rem;
  color: #64748b;
}

.inventory-card-meta span strong {
  color: #475569;
}

.app-dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.05);
  background: white;
}

/* Align any remaining inline-flex card wrappers identically to .course-item */
.app-card-slider > div[style*="display:flex"] {
  flex: 0 0 105px;
  width: 105px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.app-card-slider > div[style*="display:flex"] > div[style*="font-size"] {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 105px;
  word-wrap: break-word;
}

.app-card-count {
  display: none !important;
}

.app-card-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}
.app-card-icon-wrap img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.app-card-label {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
  text-align: center;
}

/* Why Us Section */
.why-us {
  background: var(--secondary);
  padding: 4rem 1rem;
  margin-top: 4rem;
}

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

.feature-card {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.feature-card .icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Static Course Grid Custom Layout */
.courses-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  perspective: 1500px; /* 3D Environment */
}
@media (min-width: 768px) {
  .courses-showcase {
    grid-template-columns: repeat(4, 1fr);
  }
}
.course-card-custom {
  background: var(--primary);
  border-radius: 20px;
  position: relative;
  text-align: center;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: white;
  transition: all 0.4s cubic-bezier(0.3, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), inset 0 2px 4px rgba(255,255,255,0.8);
  border: 1px solid #f1f5f9;
  transform-style: preserve-3d;
}

@media (max-width: 768px) {
  .course-card-custom {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(136, 65, 193, 0.15) !important;
    border: none !important;
    background: var(--primary) !important;
    color: white !important;
  }
  .course-card-custom::after {
    content: '›';
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    margin-left: 0.5rem;
  }
  .course-card-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    flex: 1;
    color: white !important;
    transform: none !important;
  }
}
.course-card-custom:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 40px -10px rgba(79, 70, 229, 0.15), 0 0 0 3px rgba(79, 70, 229, 0.1);
  border-color: transparent;
}
.course-card-badge {
  position: absolute;
  top: 0; left: 0; width: 100%;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.35rem 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transform: translateZ(20px); /* 3D Extrusion */
}
.badge-green { background: #bbf7d0; color: #166534; font-weight: 700; }
.badge-red { background: #fecaca; color: #991b1b; font-weight: 700; }
.badge-dark-green { background: #166534; color: #ffffff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.badge-theme {
  background: linear-gradient(135deg, var(--primary), #ec4899);
  color: white;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 4px 10px -2px rgba(26,86,219,0.4);
}
.course-card-icon {
  display: none;
}
.course-card-badge {
  display: none;
}
.course-card-custom:hover .course-card-icon {
  transform: translateZ(50px) scale(1.15);
}
.course-card-title {
  font-weight: 900; 
  font-size: 1.15rem;
  color: white; 
  line-height: 1.3;
  transform: translateZ(25px); 
}

/* Minimalist Course Page Grid (Screenshot styling) */
.mini-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .mini-courses-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1024px) {
  .mini-courses-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.course-mini-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(0,0,0,0.02);
}
.course-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  background: white;
}
.mini-icon {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
  line-height: 1;
}
.mini-title {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-muted);
}
.mini-category-title {
  font-size: 1.25rem;
  color: var(--text-dark);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}
.cat-heading-line {
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 2px;
  margin-left: 10px;
}

/* Featured Universities */
.container {
  max-width: 1400px;
  margin: 4rem auto;
  padding: 0 1rem;
}

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

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

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.card .category {
  font-size: 0.85rem;
  background: var(--secondary);
  color: var(--primary-hover);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 1rem;
}

.card p {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Modal (Mobile Optimized Bottom Sheet) */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end; /* Mobile default: bottom aligned */
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--white);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  padding: 1.5rem 1.2rem 2rem 1.2rem;
  border-radius: 24px 24px 0 0; /* Rounded top for bottom sheet */
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(100%); /* Slide up from bottom */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
}

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

/* Drag Handle for Mobile */
.modal-content::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .modal-overlay {
    align-items: center; /* Center on desktop */
  }
  .modal-content {
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    transform: scale(0.9) translateY(30px);
    padding: 1.8rem;
  }
  .modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
  }
  .modal-content::before { display: none; }
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: var(--border-light);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.close-btn:active {
  transform: scale(0.9) rotate(90deg);
  background: var(--border-main);
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.9rem;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 0.75rem 1rem; /* Compact for better sizing */
  border: 2px solid var(--border-light);
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--bg-color);
  color: var(--text-main);
  transition: all 0.2s;
}

.form-group input:focus, .form-group select:focus {
  border-color: var(--primary);
  background: var(--white);
  outline: none;
  box-shadow: 0 0 0 4px rgba(88, 28, 135, 0.15);
}

.hidden {
  display: none !important;
}

/* Form slider */
input[type=range] {
  width: 100%;
}

.course-nav-tab {
  padding-bottom: 0.8rem; 
  color: var(--text-muted); 
  font-weight: 500; 
  text-decoration: none; 
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.course-nav-tab:hover {
  color: var(--primary);
}

.course-nav-tab.active-tab {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 3px solid var(--primary);
}

/* --- Premium Hero Banner --- */
.hero-banner-container {
  background: linear-gradient(135deg, #0f172a, #059669, #10b981);
  border-radius: 24px;
  padding: 3.5rem 3rem;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: none; /* Shadow removed */
}

.hero-banner-title {
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  letter-spacing: -1.5px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.sticky-cat-nav {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.05);
  padding-top: 1.2rem;
  border-bottom: 1px solid #e5e7eb;
}

/* --- App Dashboard Aesthetic (Inspired by UNPIX Mobile) --- */
.app-dash-header {
  background: var(--primary);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  margin-bottom: 0; /* Default */
}

@media (min-width: 1024px) {
  .app-dash-header {
    margin-bottom: 3.5rem;
    min-height: 320px !important; 
    padding: 1rem 0 !important; 
  }
  .header-banner-slider-container {
    height: 280px !important;
  }
  .header-banner-slider {
    width: 900px !important;
    height: 280px !important;
  }
}

/* --- Banner Slider (Global One-by-One) --- */
.header-banner-slider-container {
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 1rem;
  overflow: visible !important;
}

.header-banner-slider {
  width: 460px;
  height: 220px;
  position: relative;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: none !important;
  overflow: visible !important;
}

.header-banner-slider-container .banner-card,
.header-banner-slider .banner-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
  z-index: 1;
  border-radius: 0 !important; /* Edge to edge blend */
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important; /* Transparent background for perfect blend */
}

.header-banner-slider-container .banner-card.active,
.header-banner-slider .banner-card.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

/* Fallback for first slide */
.header-banner-slider-container .banner-card:first-child,
.header-banner-slider .banner-card:first-child {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .header-banner-slider-container {
    height: 180px;
  }
  .header-banner-slider {
    width: 85vw;
    height: 180px;
  }
  .header-banner-slider-container .banner-card,
  .header-banner-slider .banner-card {
    border-radius: 16px;
  }
}

.header-banner-slider-container .banner-card:hover,
.header-banner-slider .banner-card:hover {
  transform: scale(1.02);
}

.header-banner-slider-container .banner-card img,
.header-banner-slider .banner-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes headerAutoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--banner-scroll-width, -1410px)); }
}

@media (max-width: 768px) {
  .header-banner-slider {
    gap: 12px;
    padding: 0.5rem;
    animation-duration: 20s;
    --banner-scroll-width: calc(-3 * (85vw + 12px));
  }
}

/* Hide mobile-specific top bar on desktop */
@media (min-width: 769px) {
  .header-top-bar {
    display: none !important;
  }
}

.header-top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 5%;
  background: white;
  border-bottom: 1px solid var(--border-light);
  width: 100%;
}

@media (max-width: 768px) {
  .header-top-bar {
    padding: 0.8rem 3%;
  }
  .header-brand-center {
    font-size: 1.1rem !important;
    gap: 0.5rem !important;
  }
  .user-greeting {
    font-size: 0.75rem !important;
  }
}

.user-greeting {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.header-brand-center {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primary);
  letter-spacing: -1px;
}

.header-logo-img, .dynamic-app-logo, img[src*="icon.png"], img[src*="adaptive_foreground.png"] {
  object-fit: contain !important;
  max-width: 100%;
  max-height: 100%;
}

.header-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-light);
  padding: 3px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
}

.bell-icon-3d {
  font-size: 1.2rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}

.bell-icon-3d:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


.app-dash-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  animation: rotateHeader 20s linear infinite;
  pointer-events: none;
}

@keyframes rotateHeader {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.app-dash-header h2 {
  font-size: 1.15rem;
  opacity: 0.95;
  font-weight: 700;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.app-dash-header .brand-main {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
}

.action-grid-card {
  background: white;
  margin: -5.5rem auto 2.5rem auto;
  width: 92%;
  max-width: 500px;
  border-radius: 28px;
  padding: 1.8rem 1.2rem;
  box-shadow: none; /* Shadow removed */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem 0.5rem;
  position: relative;
  z-index: 10;
  border: 1px solid var(--border-light);
}

/* Match Stats Card (Inspired by Catatan Keuangan) */
.match-stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  margin-bottom: 1.5rem;
}

.stat-box {
  padding: 1.5rem;
  text-align: center;
  border-right: 1px solid #f1f5f9;
}

.stat-box:last-child {
  border-right: none;
}

.stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  display: block;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  padding: 0.8rem 0.4rem;
  border-radius: 16px;
  transition: all 0.2s;
}

.action-item.diploma { background: white; border: 1px solid #fef3c7; }
.action-item.online { background: white; border: 1px solid #ecfdf5; }
.action-item.ug { background: white; border: 1px solid #eff6ff; }
.action-item.pg { background: white; border: 1px solid #f5f3ff; }

.action-item:hover {
  transform: translateY(-3px);
  filter: brightness(0.98);
}

.action-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  background: white;
}
.action-icon-circle img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.action-item.diploma .action-icon-circle { background: #fffbeb; border: 1px solid #fef3c7; }
.action-item.online .action-icon-circle { background: #f0fdf4; border: 1px solid #dcfce7; }
.action-item.ug .action-icon-circle { background: #f0f9ff; border: 1px solid #e0f2fe; }
.action-item.pg .action-icon-circle { background: #f5f3ff; border: 1px solid #ede9fe; }

.action-item:hover .action-icon-circle {
  background: #e0e7ff;
  color: var(--primary);
  transform: translateY(-3px);
}

.action-label {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Global App Footer */
.app-footer {
  background: #fdfcff;
  padding: 4rem 1.5rem 8rem 1.5rem; /* Extra bottom padding for bottom-nav-bar */
  text-align: center;
  border-top: 1px solid var(--border-light);
  margin-top: 4rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}

.footer-link:hover {
  color: var(--primary);
}

.footer-copyright {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.3rem 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  border-top: 1px solid #ECE6DC;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #64748B;
  gap: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
}

.bottom-nav-item.active {
  color: var(--color-primary);
  font-weight: 700;
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
}

.bottom-nav-item:hover {
  color: var(--color-primary);
}

.wa-circle, .qr-circle {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #228B53 0%, #1B6B44 100%);
  border-radius: 50%;
  margin-top: -1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(27, 107, 68, 0.35);
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-circle:hover, .qr-circle:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 20px rgba(27, 107, 68, 0.45);
}

/* Hide desktop navbar on mobile if needed */
@media (max-width: 768px) {
  .navbar {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .bottom-nav-bar {
    display: none !important;
  }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .hero-banner-container {
    padding: 2rem 1.2rem;
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    border-radius: 16px;
  }
  
  .hero-banner-title {
    font-size: 1.8rem !important;
    letter-spacing: -0.5px;
  }
  
  .hero-banner-container p {
    font-size: 0.95rem !important;
  }

  .hero-banner-container a {
    width: 50px;
    height: 50px;
    margin-top: 0.5rem;
  }


  /* Sticky Nav on Mobile */
  .sticky-cat-nav {
    padding-top: 0.8rem;
  }
  .sticky-cat-nav .container {
    gap: 1rem !important;
    padding: 0 0.8rem !important;
  }
  .course-nav-tab {
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
  }

  /* Adjust Modal for mobile */
  .modal-content {
    width: 92% !important;
    padding: 1.5rem !important;
    margin: 10px;
    border-radius: 20px;
  }

  .modal-content h2 {
    font-size: 1.5rem !important;
  }

  /* Why Us Section - COMPRESSED MOBILE SLIDER */
  .why-us {
    padding: 2.5rem 0 !important; /* Edge to edge for slider */
    background: #fdfaff !important;
    margin-top: 1rem !important;
  }
  
  .why-us .section-title {
    text-align: left !important;
    font-size: 1.3rem !important;
    margin-bottom: 1.2rem !important;
    padding-left: 1.5rem;
    font-weight: 900;
  }

  .why-us .features-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .why-us .features-grid::-webkit-scrollbar { display: none; }

  .why-us .feature-card {
    flex: 0 0 260px !important; /* Fixed width for horizontal cards */
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    padding: 1.5rem !important;
    gap: 0.8rem !important;
    background: white !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
    border-radius: 24px !important;
  }

  .why-us .feature-card .icon {
    font-size: 1.8rem !important;
    background: #f5f3ff !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }

  .why-us .feature-card h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    color: var(--text-main);
  }

  .why-us .feature-card p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
  }

  .section-title {
    font-size: 1.6rem;
    margin-bottom: 2rem;
    color: var(--primary-dark);
    font-weight: 800;
  }

  /* Responsive Spacing */
  .container {
    padding: 0 1rem;
    margin: 2rem auto;
  }
  
  /* Course Categories on Home */
  .category-grid {
    gap: 0.5rem;
  }
  
  .cat-pill {
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
  }
}

/* --- High-Fidelity Click Feedback System --- */
.btn:active, 
.app-dash-card:active, 
.action-item:active, 
.course-card-custom:active,
.bottom-nav-item:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:active {
  background: #3b0764 !important; /* Extremely deep purple on click */
}

.app-dash-card:active {
  background: var(--secondary);
  border-color: var(--primary);
}

.action-item:active .action-icon-circle {
  transform: scale(1.1);
  background: rgba(88, 28, 135, 0.2) !important;
}
/* --- Smart Match Premium Popup Architecture --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8); /* Deep Navy Overlay */
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000; /* Ensure it covers everything including bottom nav */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 420px; 
  max-width: 95%;
  max-height: 90vh; 
  background: white;
  border-radius: 32px;
  box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
  position: relative;
  overflow: visible; 
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(30px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
}

.modal-body-wrapper {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.modal-body-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.modal-body-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* --- THEME-AWARE PREMIUM POPUP REDESIGN --- */
/* Base (Light Theme) */
.premium-modal {
  background: var(--white) !important;
  border-radius: 32px !important;
  padding: 2.5rem !important;
  color: var(--text-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  border: 1px solid var(--border-light) !important;
}

/* Dark Theme Override */
.dark-theme .premium-modal {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #f1f5f9;
  border: none;
  color: #64748b;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme .close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.close-btn:hover {
  background: #e2e8f0;
  color: var(--primary);
  transform: rotate(90deg) scale(1.1);
}

.dark-theme .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.close-btn:active {
  transform: scale(0.9);
}

.premium-modal .modal-premium-header {
  background: transparent !important;
  padding: 2rem 1.5rem 1rem 1.5rem !important; 
  text-align: center !important;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.asymmetric-header .align-top-left {
  align-self: flex-start !important;
  text-align: left !important;
  margin-bottom: -2px !important;
}

.asymmetric-header .align-center-main {
  align-self: center !important;
  text-align: center !important;
}

.asymmetric-header .align-bottom-right {
  align-self: flex-end !important;
  text-align: right !important;
  margin-top: -2px !important;
}

/* New Rectangular Enclosure for Text */
.premium-modal .modal-premium-header::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 0.5rem;
  left: 2rem;
  right: 2rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  z-index: -1;
}

.dark-theme .premium-modal .modal-premium-header::after {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.premium-modal .header-icon-float {
  font-size: 1.2rem !important;
  margin-bottom: 0.3rem !important;
  opacity: 1 !important;
  position: static !important;
  z-index: 2;
}

.premium-modal .premium-msg {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  z-index: 2;
}

.dark-theme .premium-modal .premium-msg {
  color: rgba(255, 255, 255, 0.7) !important;
}

.premium-modal .align-center-main {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: var(--text-dark) !important;
  margin: 0.2rem 0 !important;
  letter-spacing: -0.5px;
  z-index: 2;
}

.dark-theme .premium-modal .align-center-main {
  color: white !important;
}

.premium-modal .premium-highlight {
  color: var(--primary) !important;
}

.dark-theme .premium-modal .premium-highlight {
  color: var(--accent-yellow) !important;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.2) !important;
}

/* --- Modal Search Bar Theme --- */
.modal-search-title {
  color: var(--text-muted);
}
.dark-theme .modal-search-title {
  color: rgba(255, 255, 255, 0.65);
}

.modal-search-input {
  background: white !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-dark) !important;
}
.dark-theme .modal-search-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}
.modal-search-input::placeholder {
  color: #94a3b8 !important;
}
.dark-theme .modal-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.modal-search-input:focus {
  background: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(136, 65, 193, 0.1) !important;
}
.dark-theme .modal-search-input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05) !important;
}

.modal-search-icon {
  color: var(--text-muted) !important;
}
.dark-theme .modal-search-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

.modal-search-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--primary) !important;
}
.modal-search-btn span {
  color: var(--primary) !important;
}
.dark-theme .modal-search-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}
.dark-theme .modal-search-btn span {
  color: white !important;
}

.premium-modal .form-container-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.dark-theme .premium-modal .form-container-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-modal .form-group-premium {
  margin-bottom: 0 !important;
}

.premium-modal .form-group-premium label {
  color: var(--text-main) !important;
}

.dark-theme .premium-modal .form-group-premium label {
  color: rgba(255, 255, 255, 0.8) !important;
}

.premium-modal .form-group-premium input {
  background: white !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--text-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 1rem 1.2rem !important;
  border-radius: 14px !important;
}

.dark-theme .premium-modal .form-group-premium input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.premium-modal .form-group-premium input::placeholder {
  color: #94a3b8 !important;
}

.dark-theme .premium-modal .form-group-premium input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.premium-modal .form-group-premium input:focus {
  background: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(136, 65, 193, 0.1) !important;
}

.dark-theme .premium-modal .form-group-premium input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05) !important;
}

.premium-modal .country-prefix {
  color: var(--text-dark) !important;
  border-right-color: #e2e8f0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

.dark-theme .premium-modal .country-prefix {
  color: white !important;
  border-right-color: rgba(255, 255, 255, 0.2) !important;
}

.premium-modal .course-select-custom-wrapper input {
  background: white !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--text-dark) !important;
  font-family: 'Poppins', sans-serif !important;
}

.dark-theme .premium-modal .course-select-custom-wrapper input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.premium-modal .dropdown-chevron {
  color: var(--text-muted) !important;
}

.dark-theme .premium-modal .dropdown-chevron {
  color: rgba(255,255,255,0.6) !important;
}

.premium-modal .btn-smart-submit {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  background: var(--primary) !important;
  color: white !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  height: 56px !important;
  font-size: 1.1rem !important;
  margin-top: 1rem !important;
  box-shadow: 0 10px 25px rgba(136, 65, 193, 0.3) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s;
}

.premium-modal .btn-smart-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(136, 65, 193, 0.4) !important;
}

.premium-modal .btn-smart-submit span {
  color: white !important;
}

.premium-modal .btn-smart-submit svg {
  stroke: white !important;
}

/* Consent Section Theme-Aware Styling */
.premium-modal .consent-wrapper {
  margin-top: 1rem !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}

.dark-theme .premium-modal .consent-wrapper {
  color: rgba(255, 255, 255, 0.7) !important;
}

.premium-modal .consent-wrapper label {
  color: var(--text-muted) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

.dark-theme .premium-modal .consent-wrapper label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.premium-modal .consent-wrapper a {
  color: var(--primary) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.dark-theme .premium-modal .consent-wrapper a {
  color: var(--accent-yellow) !important;
}

/* Success Message Box inside Premium Modal */
.premium-modal .success-content {
  text-align: center !important;
  padding: 2rem 1rem !important;
}

.premium-modal .success-content .success-icon {
  font-size: 4rem !important;
  margin-bottom: 1rem !important;
  animation: popScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popScale {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.premium-modal .success-content h3 {
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  color: var(--text-dark) !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
}

.dark-theme .premium-modal .success-content h3 {
  color: white !important;
}

.premium-modal .success-content p {
  color: var(--text-muted) !important;
  font-size: 0.95rem !important;
  margin-top: 0.5rem !important;
  line-height: 1.5 !important;
}

.dark-theme .premium-modal .success-content p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.premium-modal .success-content .btn-success-close {
  margin-top: 1.8rem !important;
  width: 100% !important;
  background: var(--primary) !important;
  color: white !important;
  border: none !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(136, 65, 193, 0.2) !important;
  transition: all 0.3s !important;
}

.premium-modal .success-content .btn-success-close:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(136, 65, 193, 0.35) !important;
}

.dark-theme .premium-modal .success-content .btn-success-close {
  background: var(--accent-yellow) !important;
  color: #1e1b4b !important;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.25) !important;
}

.dark-theme .premium-modal .success-content .btn-success-close:hover {
  box-shadow: 0 12px 24px rgba(251, 191, 36, 0.4) !important;
}


/* --- DESKTOP OPTIMIZED MODAL --- */
@media (min-width: 769px) {
  .modal-content.premium-modal {
    width: 700px !important;
    max-width: 90% !important;
  }

  .premium-modal .modal-premium-header {
    padding: 2.5rem 3rem 1.5rem 3rem !important;
  }

  .premium-modal .modal-body-wrapper {
    padding: 1.5rem 3rem 2.5rem 3rem !important;
  }

  .premium-modal .form-container-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
  }

  .premium-modal .form-group-premium {
    margin-bottom: 0 !important;
  }

  .premium-modal .form-container-box .full-width-col {
    grid-column: span 2;
  }

  /* Make search pill wider on desktop */
  #modal-search-container .search-pill-wrapper {
    max-width: 100%;
  }
}

/* --- MOBILE OPTIMIZED MODAL (BOTTOM-SHEET) --- */
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-end !important;
  }

  .modal-content.premium-modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    transform: translateY(100%);
    padding: 0.5rem 1.1rem 1.5rem 1.1rem !important;
    height: auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Drag handle indicator */
  .modal-content.premium-modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 4px;
    margin: 0.7rem auto 1rem auto;
    flex-shrink: 0;
  }
  
  .dark-theme .modal-content.premium-modal::before {
    background: rgba(255, 255, 255, 0.3);
  }

  .modal-content.premium-modal::-webkit-scrollbar {
    display: none;
  }

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

  .premium-modal .modal-premium-header {
    padding: 0.4rem 0.5rem !important;
  }

  .premium-modal .premium-msg {
    font-size: 0.75rem !important;
  }

  .premium-modal .align-center-main {
    font-size: 1rem !important;
    white-space: normal !important;
  }

  .premium-modal .form-group-premium label {
    font-size: 0.65rem !important;
    margin-bottom: 0.3rem !important;
  }

  .premium-modal .form-group-premium input {
    padding: 0.9rem 1rem !important;
    font-size: 1rem !important; /* Prevents iOS auto-zoom */
    border-radius: 12px !important;
    height: 50px !important;
  }

  .dark-theme .premium-modal .form-group-premium input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
  }
  
  .dark-theme .premium-modal .form-group-premium input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }

  .premium-modal .form-container-box {
    padding: 0.7rem !important;
    gap: 0.5rem !important;
    margin-bottom: 0.7rem !important;
    border-radius: 16px !important;
  }

  .premium-modal .btn-smart-submit {
    height: 52px !important;
    font-size: 1rem !important;
    margin-top: 0.3rem !important;
    border-radius: 14px !important;
    width: 100% !important;
  }

  .close-btn {
    top: 0.8rem !important;
    right: 0.8rem !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dark-theme .close-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    backdrop-filter: blur(4px) !important;
  }

  .modal-body-wrapper {
    padding: 0 0.5rem 0.5rem 0.5rem !important;
    overflow: visible !important; /* Prevent clipping of dropdowns */
  }

  /* Make dropdowns push content instead of overlapping if they are too long on mobile */
  .course-dropdown-list {
    position: relative !important;
    top: 0 !important;
    margin-top: 5px !important;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
  }
}


/* --- Trending Chips UI --- */
.trending-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trending-chip {
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid transparent;
}

.trending-chip:hover {
  background: #e2e8f0;
  color: var(--primary);
  transform: translateY(-1px);
}

.trending-chip.active-chip {
  background: #eef2ff;
  border-color: var(--primary);
  color: var(--primary);
}

/* --- Custom Course Dropdown --- */
.course-select-custom-wrapper {
  position: relative;
  width: 100%;
}

.dropdown-chevron {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  color: var(--text-dim);
  pointer-events: none;
  transition: transform 0.3s;
}

.course-select-custom-wrapper input[readonly] {
  cursor: pointer;
  padding-right: 3rem !important;
}

.course-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border: 1px solid #f1f5f9;
  z-index: 999999; /* Highest priority */
  max-height: 250px;
  overflow-y: auto;
  padding: 0.5rem;
}

.course-dropdown-list.hidden {
  display: none;
}

.dropdown-item {
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: #f8fafc;
  color: var(--primary);
  padding-left: 1.2rem;
}

.dark-theme .course-dropdown-list {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-theme .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: white !important;
}

/* Scrollbar styling for dropdown */
.course-dropdown-list::-webkit-scrollbar {
  display: none;
}
.course-dropdown-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* --- Slider Navigation System --- */
.slider-wrapper {
  position: relative;
  width: 100%;
}

.slider-nav-btn {
  position: absolute;
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50%;
  color: var(--primary);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

@media (max-width: 768px) {
  .slider-nav-btn { display: none !important; }
}

.slider-nav-btn:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 15px 30px rgba(88, 28, 135, 0.2);
}

.slider-nav-btn.prev {
  left: 0;
}

.slider-nav-btn.next {
  right: 0;
}

/* Missing Course Item Layout Rules */
.course-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 90px;
  cursor: pointer;
  transition: transform 0.2s;
}

.course-item:hover {
  transform: translateY(-2px);
}

.course-item .app-dash-card {
  margin-bottom: 0;
  width: 100%;
}

.course-item-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.2;
}

/* --- PREMIUM FOOTER SYSTEM --- */
.main-footer {
  background: #0f172a;
  color: #f8fafc;
  padding: 5rem 0 2rem 0;
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

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

.footer-brand h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #fff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-desc {
  color: #94a3b8;
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.footer-section h4 {
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.9rem;
}

.footer-links a {
  color: #64748b;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: white;
  transform: translateX(5px);
}

.contact-item {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

.footer-bottom {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.copyright {
  color: #475569;
  font-size: 0.85rem;
}

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.5rem; }
  .main-footer { padding-top: 4rem; padding-bottom: 6rem; }
}


/* Course Page Specific Styles */
.sticky-cat-nav { position: sticky; top: 0; z-index: 100; padding: 1rem 0; }
.course-nav-tab {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}
.course-nav-tab:hover, .course-nav-tab.active-tab {
  color: var(--primary);
  border-bottom-color: var(--primary);
  border-bottom-width: 3px;
  font-weight: 800;
}
.mini-category-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; position: relative; display: inline-block; }
.cat-heading-line { display: block; height: 4px; width: 40px; background: rgba(255, 255, 255, 0.3); margin-top: 0.5rem; border-radius: 2px; }

/* --- MOBILE DESIGN SYSTEM OVERRIDES (MAX 600PX) --- */
@media (max-width: 600px) {
  /* General rules */
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Content Wrapper - Full width for better utilization */
  .container, section, .navbar, .main-footer, .app-dash-header, .action-grid-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }


  .container {
    padding-left: var(--m-padding-x) !important;
    padding-right: var(--m-padding-x) !important;
    margin-top: var(--m-section-gap) !important;
    margin-bottom: var(--m-section-gap) !important;
  }

  /* Typography */
  h1, .hero-text h1 {
    font-size: var(--m-h1) !important;
    font-weight: 700 !important;
  }
  
  .app-dash-header h2 {
    font-size: var(--m-h-hero) !important;
    font-weight: 700 !important;
  }

  h2, .section-title {
    font-size: var(--m-h2) !important;
    font-weight: 600 !important;
  }

  h3, .app-section-title {
    font-size: var(--m-h3) !important;
    font-weight: 600 !important;
  }

  p, body {
    font-size: var(--m-body) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  .text-secondary, .footer-desc {
    font-size: var(--m-secondary) !important;
    font-weight: 400 !important;
  }

  .text-small, .course-item-label {
    font-size: var(--m-small) !important;
    font-weight: 400 !important;
  }

  /* Buttons */
  .btn, .btn-primary, .btn-smart-submit {
    height: var(--m-btn-height) !important;
    border-radius: var(--m-radius-btn) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important; /* Full width on mobile */
    min-height: 48px; /* Tap target */
    padding: 0 16px !important;
  }

  /* Input Fields */
  input, select, .form-group-premium input, .form-group input {
    height: var(--m-input-height) !important;
    border-radius: var(--m-radius-input) !important;
    font-size: 16px !important; /* Prevents auto-zoom */
    padding: 12px 16px !important;
  }

  /* Cards */
  .card, .feature-card, .app-dash-card, .course-mini-card, .course-card-custom {
    border-radius: var(--m-radius-card) !important;
    padding: var(--m-card-padding) !important;
    box-shadow: var(--m-shadow-card) !important;
    margin-bottom: 12px !important;
  }

  /* Icons */
  .nav-icon, .bottom-nav-item svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .feature-card .icon, .large-icon {
    font-size: 40px !important;
  }

  /* Avatars/Images */
  .avatar-sm { width: var(--m-avatar-sm); height: var(--m-avatar-sm); }
  .avatar-md { width: var(--m-avatar-md); height: var(--m-avatar-md); }
  .avatar-lg { width: var(--m-avatar-lg); height: var(--m-avatar-lg); }
  
  .hero-banner-container, .banner-image, .app-dash-header {
    height: var(--m-banner-height) !important;
    min-height: var(--m-banner-height) !important;
  }

  /* Bottom Navigation */
  .bottom-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0; /* Align to left */
    transform: none; /* Remove transform */
    width: 100%; /* Full width */
    max-width: none; /* Remove restriction */
    height: 70px !important;
    background: var(--primary) !important; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.15);
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px 24px 0 0; /* Modern sheet look */
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    gap: 4px;
    flex: 1;
    height: 100%;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative; /* Necessary for active pill positioning */
  }

  .bottom-nav-item.active {
    color: white !important;
  }
  
  /* Active Pill Background */
  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%; /* Perfect circle/pill shape */
    z-index: -1;
  }

  .wa-circle, .qr-circle {
    width: 54px !important;
    height: 54px !important;
    background: #25D366 !important; /* WhatsApp Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -30px;
    border: 3px solid white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 2001;
  }
  
  .wa-circle svg, .qr-circle svg {
    fill: white !important;
    width: 26px !important;
  }

  /* Spacing and Grid */
  .grid {
    gap: 12px !important;
  }
  
  section {
    margin-top: var(--m-section-gap) !important;
    margin-bottom: var(--m-section-gap) !important;
  }
  
  .app-dash-header {
    height: auto !important;
    min-height: 220px !important; /* Calibrated for 180px banner */
    background: var(--primary) !important;
    border-radius: 0 0 40px 40px !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important; /* Removed padding to allow flex-center to work */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    z-index: 1;
  }
  
  .app-dash-header::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
    z-index: -1;
  }

  .header-banner-slider-container {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100vw !important;
    margin: 0 !important; /* Removed top margin for perfect centering */
    overflow: hidden !important;
    border: none !important;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
  }

  .header-banner-slider {
    width: 100% !important;
    height: 180px !important;
    animation: none !important;
  }

  .header-banner-slider .banner-card {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important; /* Edge to edge */
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  .action-grid-card {
    background: white !important;
    margin: -1.5rem auto 1.5rem auto !important;
    border-radius: 20px !important;
    padding: 0.8rem 0.4rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    position: relative;
    z-index: 10;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
    border: 1px solid var(--border-main) !important;
    width: calc(100% - 2rem) !important;
    max-width: 500px !important;
  }

  .action-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    margin-bottom: 0.4rem !important;
  }

  .action-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
  }

  .app-section-title {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    margin-left: 1rem !important;
  }

  @keyframes headerAutoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-315px * 3)); } /* (300 + 15) * 3 */
  }

  .header-top-bar {
    padding: 0.5rem 1rem;
    max-width: 100% !important;
    margin: 0 !important;
    border-bottom: none !important;
    background: white !important; /* Ensure solid background for stacking */
    position: sticky;
    top: 0;
    z-index: 120; /* Highest priority */
  }

  .user-greeting {
    font-size: 0.7rem;
  }

  .header-brand-center {
    font-size: 1.2rem;
    gap: 0.4rem;
    color: var(--primary);
  }

  .header-logo-img {
    width: 26px;
    height: 26px;
  }

  .bell-icon-3d {
    font-size: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
}

/* --- Modal System (Lead Funnel) --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: flex-start; /* Better for tall content on mobile */
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  overflow-y: auto; /* Allow overlay to scroll if content is too tall */
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: white;
  width: 100%;
  max-width: 450px;
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  margin: auto 0;
  transform: scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 0.5rem; /* Less padding on overlay to give modal more room */
  }
  .modal-content {
    padding: 1rem;
    margin-top: 5vh;
    margin-bottom: 2vh;
    border-radius: 16px;
    width: 100%;
  }
  .premium-modal {
    padding: 1.5rem 1rem !important;
  }
  .form-group-premium {
    margin-bottom: 0.8rem; /* Tighter spacing on mobile */
  }
  .btn-smart-submit {
    padding: 0.9rem; /* Slightly smaller button on mobile */
  }
}

@media (min-width: 1024px) {
  .modal-content {
    max-width: 550px;
    padding: 2.5rem;
  }
  .premium-modal {
    padding: 3rem 2.5rem !important;
  }
}

.premium-modal {
  background: linear-gradient(165deg, #1e1b4b 0%, #312e81 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2rem 1.5rem !important;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.close-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: rotate(90deg);
}

.modal-body-wrapper {
  position: relative;
  z-index: 5;
}

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

.form-group-premium input, 
.form-group-premium select {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  transition: all 0.2s;
}

.form-group-premium input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #a78bfa;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}

.btn-smart-submit {
  width: 100%;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 1.1rem;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  margin-top: 1rem;
}

.btn-smart-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(136, 65, 193, 0.3);
  filter: brightness(1.1);
}

.btn-smart-submit:active {
  transform: translateY(0);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}


.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.form-group-modal {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group-modal label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 6px;
}

.form-group-modal input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 2px solid #f1f5f9;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.form-group-modal input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(136, 65, 193, 0.1);
}

.custom-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 2100;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  margin-top: 8px;
}

.dropdown-item {
  padding: 10px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.dropdown-item:hover {
  background: #f8fafc;
  color: var(--primary);
}

.hidden {
  display: none !important;
}

/* Responsive University Showcase Grid */
.uni-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 0.8rem;
  padding: 0.5rem 0 0.2rem 0;
  width: 100%;
}

@media (max-width: 450px) {
  .uni-showcase-grid {
    grid-template-columns: 1fr 1fr; /* Force 2 columns on small phones unless extremely narrow */
    gap: 0.8rem;
  }
}

@media (max-width: 350px) {
  .uni-showcase-grid {
    grid-template-columns: 1fr;
  }
}
/* --- Premium University Identity Card --- */
.uni-list-card {
  background: var(--cream-card, #FAF7F0);
  border-radius: 20px;
  padding: 0.9rem 1rem;
  border: 1.2px solid var(--border-light, #ECE6DC);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  overflow: hidden;
  position: relative;
  min-height: 140px;
}

.uni-list-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(#ECE6DC 0.5px, transparent 0.5px);
  background-size: 10px 10px;
  opacity: 0.25;
  pointer-events: none;
}

.uni-list-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 25px -5px rgba(27, 107, 68, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--primary-light, #E8F5E9);
}

.uni-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.uni-logo-wrapper {
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border: 1.5px solid #fff;
  padding: 5px;
  position: relative;
  z-index: 2;
}

.uni-logo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.uni-badge-text {
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uni-center-content {
  margin: 0;
}

.uni-course-count {
  font-size: 1.2rem;
  font-weight: 900;
  color: #0f172a;
  display: block;
  letter-spacing: -0.3px;
  margin-bottom: -2px;
}

.uni-course-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.uni-list-card h2 {
  font-size: 0.8rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
  width: 100%;
  word-wrap: break-word;
}

@media (max-width: 600px) {
  .uni-list-card {
    min-height: 120px;
    padding: 0.5rem;
    gap: 0.15rem;
  }
  .uni-course-count {
    font-size: 1rem;
  }
  .uni-list-card h2 {
    font-size: 0.7rem;
    line-height: 1.1;
  }
}

/* Responsive Grid Utilities */
.responsive-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.8rem !important;
}

@media (max-width: 600px) {
  .responsive-trust-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .responsive-trust-grid > div {
    padding: 0.8rem 0.3rem !important;
    border-radius: 14px !important;
  }
  .responsive-trust-grid div[style*="font-size: 0.7rem"] {
    font-size: 0.6rem !important;
  }
  .responsive-trust-grid div[style*="font-size: 1.5rem"] {
    font-size: 1.2rem !important;
  }
}


/* --- Premium Course Page Redesign --- */

.courses-hero {
  position: relative;
  padding: 4rem 1.5rem 6rem 1.5rem;
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  color: white;
}

.courses-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.courses-hero h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  color: white;
}

.courses-hero p {
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.modern-search-wrapper {
  background: white;
  border: 1px solid var(--border-main);
  border-radius: 100px; /* Pill shape for premium search */
  padding: 0.4rem;
  display: flex;
  gap: 0.5rem;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
}

.modern-search-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 10px 50px rgba(136, 65, 193, 0.15);
  transform: translateY(-2px) scale(1.01);
}

.modern-search-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.8rem 1.2rem;
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 500;
}

.modern-search-input::placeholder {
  color: #64748b;
}

.modern-search-input:focus {
  outline: none;
}

.modern-search-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 0 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modern-search-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.02);
}

/* Category Pills Refined */
.sticky-cat-nav {
  margin-top: -2.5rem;
  z-index: 100;
}

.cat-nav-container {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 100px;
  padding: 0.2rem;
  display: flex;
  gap: 0.2rem;
  box-shadow: none;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.premium-nav-pill {
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.premium-nav-pill.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(136, 65, 193, 0.25);
}

.premium-nav-pill:not(.active):hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* Premium Course Cards */
.course-grid-redesign {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 0;
}

.premium-course-card {
  background: white;
  border-radius: 24px;
  padding: 1.8rem;
  border: 1px solid var(--border-light);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* Curved Left Accent Design Matching Requested Theme */
.premium-course-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 6px;
  background: var(--primary);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 2;
}

.premium-course-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
}

.premium-course-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
  border-color: rgba(136, 65, 193, 0.2);
}

.card-icon-box {
  width: 56px;
  height: 56px;
  background: var(--primary-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  transition: all 0.4s;
  position: relative;
  z-index: 2;
}

.premium-course-card:hover .card-icon-box {
  background: var(--primary);
  color: white;
  transform: rotate(-5deg) scale(1.1);
}

.card-title-redesign {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
  transition: color 0.4s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.premium-course-card:hover .card-title-redesign {
  color: var(--primary);
}

.card-meta-redesign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

.card-arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.4s;
  z-index: 2;
  opacity: 0;
  transform: translateX(-10px);
}

.premium-course-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--primary);
  color: white;
}

/* Mesh Background for Sections */
.category-section-wrapper {
  padding: 4rem 0;
  position: relative;
}

.section-bg-accent {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 100% 100%, var(--primary-light) 0%, transparent 20%);
  pointer-events: none;
  z-index: -1;
}

/* App Footer Refined */
.app-footer {
  background: #f8fafc;
  padding: 1rem 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

/* Extra padding for Home Page to ensure bottom nav doesn't cover content */
.home-page-bottom-padding {
  height: 100px;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 90px !important; /* Space for the 70px bottom nav */
  }
  body.modal-open .bottom-nav-bar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .courses-hero h1 { font-size: 2rem; }
  .courses-hero p { font-size: 1rem; }
  .modern-search-wrapper { flex-direction: column; padding: 0.4rem; border-radius: 16px; }
  .modern-search-btn { padding: 0.8rem; justify-content: center; }
  .cat-nav-container { 
    max-width: 100%; 
    border-radius: 0; 
    border-left: none; border-right: none;
    overflow-x: auto;
    padding: 0.8rem 1rem;
    scrollbar-width: none;
  }
}

/* Why feegraph.ai Redesign - Premium Style */
.why-us-redesign {
  padding: 0.5rem 0 1rem 0;
  background: #fdfbff;
  position: relative;
  overflow: hidden;
}

.why-us-redesign .section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 3rem;
  letter-spacing: -1px;
}

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

.feature-card-premium {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 32px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.feature-card-premium:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px -12px rgba(136, 65, 193, 0.12);
  border-color: rgba(136, 65, 193, 0.2);
}

.feature-icon-wrapper {
  width: 64px;
  height: 64px;
  background: var(--primary-light);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--primary);
  transition: all 0.4s;
}

.feature-card-premium:hover .feature-icon-wrapper {
  background: var(--primary);
  color: white;
  transform: rotate(-5deg) scale(1.1);
}

.feature-card-premium h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.feature-card-premium p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 992px) {
  .features-grid-premium {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .feature-card-premium {
    padding: 2rem;
  }
}

/* --- Premium Search UI (Google Inspired) --- */
.search-container-google {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.search-box-pill {
  width: 100%;
  background: white;
  border-radius: 50px;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border: 1px solid var(--border-main);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.search-box-pill:focus-within {
  box-shadow: 0 8px 24px rgba(136, 65, 193, 0.12);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.search-magnifier {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.search-box-pill input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-dark);
  background: transparent;
}

.search-box-pill input::placeholder {
  color: var(--text-dim);
}

.search-clear-btn {
  padding: 8px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.search-clear-btn:hover {
  background: var(--border-light);
  color: var(--secondary);
}

.search-hint {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.2px;
}

@media (max-width: 600px) {
  .search-box-pill {
    height: 50px;
  }
  .search-box-pill input {
    font-size: 0.95rem;
  }
}
/* --- Search Bar Component --- */
.search-pill-container {
  margin: 1.5rem auto;
  padding: 0 var(--m-padding-x);
  width: 100%;
  max-width: 600px;
}

.search-pill-wrapper {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 1.1rem 8rem 1.1rem 3.5rem; /* Increased right padding for SEARCH button */
  border-radius: 50px;
  border: 1px solid var(--border-main);
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  font-weight: 600;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s;
  color: var(--text-dark);
}

.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(136,65,193,0.15);
}

.search-input::placeholder {
  color: #94a3b8;
  opacity: 1; /* Ensure Firefox visibility */
}

/* Specific fix for search placeholders on dark/premium backgrounds */
.premium-modal .search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.search-icon-box {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  display: flex;
  align-items: center;
}

.search-submit-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.7rem 1.4rem;
  border-radius: 40px;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(136,65,193,0.3);
  transition: all 0.3s;
  letter-spacing: 0.5px;
}

/* --- Mobile-Friendly Home Search Section --- */
.mobile-search-section {
  padding: 0.8rem var(--m-padding-x, 1rem) 0.6rem;
  width: 100%;
  box-sizing: border-box;
}

.mobile-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1.5px solid #e8e0f0;
  border-radius: 16px;
  padding: 0 1rem 0 1rem;
  height: 56px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(136,65,193,0.08);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}

.mobile-search-bar:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(136,65,193,0.12);
  border-color: var(--primary);
}

.mobile-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.mobile-search-placeholder {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-search-badge {
  flex-shrink: 0;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 0.9rem;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* Desktop: keep it compact */
@media (min-width: 769px) {
  .mobile-search-section {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem;
  }
  .mobile-search-bar {
    max-width: 800px;
    height: 64px;
    border-radius: 50px;
    padding: 0 1.5rem;
    box-shadow: 0 10px 30px rgba(136, 65, 193, 0.08);
  }
  .mobile-search-placeholder {
    font-size: 1.05rem;
  }
  .mobile-search-badge {
    padding: 0.6rem 2rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .search-pill-container {
    margin: 1.2rem auto 1.5rem auto;
    padding: 0 1rem;
  }

  
  .search-input {
    padding: 1rem 3.8rem 1rem 3rem !important; /* Increased buffers for button/icon */
    font-size: 0.9rem;
    height: 54px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    text-overflow: ellipsis;
  }

  .search-submit-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    right: 0.5rem;
    background: linear-gradient(135deg, var(--primary), #a855f7);
    color: transparent;
    overflow: hidden;
    z-index: 5; /* Ensure it stays above text */
  }
  
  .search-submit-btn span {
    display: none !important;
    visibility: hidden;
  }
  
  .search-submit-btn::after {
    content: '';
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }

  .search-icon-box {
    left: 1rem;
    z-index: 5;
  }

  .search-icon-box svg {
    width: 18px;
    height: 18px;
  }
}

/* --- Google-Style Autocomplete Dropdown --- */
.search-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  border: 1px solid var(--border-main);
  z-index: 1000;
  max-height: 160px; /* Shows approx 2 items, then scrolls */
  overflow-y: auto;
  padding: 8px;
  animation: slideInDown 0.2s ease-out;
}

.search-autocomplete-dropdown.hidden {
  display: none;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.autocomplete-item:hover {
  background: var(--primary-light);
  border-color: rgba(136,65,193,0.1);
}

.autocomplete-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 1.1rem;
}

.autocomplete-info {
  flex: 1;
}

.autocomplete-name {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.autocomplete-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}

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

@media (max-width: 600px) {
  .search-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border-radius: 16px;
    max-height: 124px !important; /* Strictly 2 items (62px * 2) */
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
    padding: 0 !important; /* Remove padding to avoid height math errors */
  }
  .autocomplete-item {
    height: 62px !important; /* Fixed height for consistency */
    padding: 8px 16px !important;
  }
  /* On courses page hero (dark bg), style dropdown clearly */
  .courses-hero .search-autocomplete-dropdown {
    top: calc(100% + 6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    max-height: 45vh;
  }
}
/* --- Courses Page Premium Redesign --- */
.courses-hero {
  background: var(--primary);
  padding: 5rem 1.2rem 6rem 1.2rem;
  text-align: center;
  color: white;
  position: relative;
  /* overflow: hidden removed to prevent search dropdown clipping */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* New container for the aura to prevent it from bleeding out while allowing dropdown to show */
.courses-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.courses-hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}

.courses-hero h1 {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 1.2rem;
  letter-spacing: -1px;
  line-height: 1.1;
  text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.courses-hero p {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.sticky-cat-nav {
  position: sticky;
  top: 60px;
  z-index: 1010;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 6px 1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  overflow-x: hidden;
}

.courses-page .sticky-cat-nav {
  top: 0; /* No header, stick to absolute top */
  z-index: 1010;
  background: white; /* Solid background to block dropdown bleed-through */
}

.course-grid-redesign {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 0 1.2rem;
}

.premium-course-card {
  background: white;
  border-radius: 18px;
  padding: 0.8rem;
  border: 1px solid var(--border-main);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

.premium-course-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--primary);
  box-shadow: 0 15px 40px rgba(136,65,193,0.12);
}

.card-icon-box {
  width: 42px;
  height: 42px;
  background: #f8fafc;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.premium-course-card:hover .card-icon-box {
  background: var(--primary-light);
}

.card-title-redesign {
  font-weight: 800;
  color: var(--text-dark);
  font-size: 0.92rem;
  margin-bottom: 0px;
  line-height: 1.2;
}

.card-meta-redesign {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.card-meta-redesign strong {
  color: var(--text-dark);
}

.card-arrow {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
  color: var(--primary);
  transition: all 0.3s;
}

.premium-course-card:hover .card-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 600px) {
  .courses-hero {
    padding: 1.8rem 1rem 2.5rem 1rem;
  }
  .courses-hero h1 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    text-shadow: none;
  }

  /* Mobile-first search bar inside hero */
  .courses-hero .search-pill-wrapper {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 0.8rem;
    height: 52px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    gap: 0.5rem;
    margin: 0 !important;
  }

  .courses-hero .search-icon-box {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
    color: var(--primary) !important;
    display: flex;
    align-items: center;
  }

  .courses-hero .search-input {
    flex: 1;
    border: none !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    height: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  .courses-hero .search-submit-btn {
    position: static !important;
    transform: none !important;
    height: 38px !important;
    width: auto !important;
    padding: 0 1rem !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    background: var(--primary) !important;
    color: white !important;
    letter-spacing: 0.3px;
  }

  .courses-hero .search-submit-btn::after {
    display: none !important;
  }

  .courses-hero .search-submit-btn span {
    display: inline !important;
    visibility: visible !important;
  }

  .course-grid-redesign {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .premium-course-card {
    padding: 0.6rem;
    border-radius: 14px;
    gap: 0.5rem;
  }
  .card-icon-box {
    width: 36px;
    height: 36px;
  }
  .card-title-redesign {
    font-size: 1rem;
  }
}

/* --- Executive Visiting Card Profile --- */
.visiting-card-container {
  display: flex;
  justify-content: center;
  perspective: 1000px;
}
.visiting-card {
  width: 100%;
  max-width: 900px; /* Wider Rectangular Format */
  min-height: 280px; 
  background: white;
  border-radius: 12px; /* Sharper rectangular corners */
  display: flex;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08), 0 5px 20px rgba(136,65,193,0.04);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.4s ease;
}

/* Card Left Side (Brand) */
.card-brand-side {
  width: 180px; /* Increased for Desktop */
  background: linear-gradient(180deg, #8841c1 0%, #3b0764 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
  position: relative;
  flex-shrink: 0;
}

.brand-logo-mini {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.brand-logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  color: white;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 4px;
  margin-top: 2rem;
  opacity: 0.6;
}

.verified-stamp {
  position: absolute;
  bottom: 2rem;
  color: #22c55e;
  font-size: 0.5rem;
  font-weight: 900;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Card Right Side (Details) */
.card-details-side {
  flex-grow: 1;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #f8f9fa;
  padding-bottom: 1rem;
}

.student-main-meta h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.5px;
}

.designation {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.student-avatar-small {
  width: 70px;
  height: 70px;
}

.student-avatar-small img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #f8f9fa;
  object-fit: cover;
}

.card-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns for wide rectangular */
  gap: 0.8rem 1.2rem;
  flex-grow: 1;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item.full-width {
  grid-column: span 2;
}

.info-item label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #adb5bd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #495057;
}

.accent-text {
  color: var(--primary) !important;
}

.card-footer-row {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-id-badge {
  font-size: 0.7rem;
  font-family: monospace;
  font-weight: 700;
  color: #ced4da;
}

.btn-manage-card {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-manage-card:hover {
  background: var(--primary);
  color: white;
}

.search-btn-mini:hover {
  transform: scale(1.15) rotate(5deg);
  background: #3b0764 !important;
  box-shadow: 0 4px 12px rgba(136, 65, 193, 0.3);
}

/* Mobile Horizontal Rectangular Profile */
@media (max-width: 768px) {
  .visiting-card {
    flex-direction: row;
    width: 98%; 
    margin: 0 auto;
    min-height: 140px; 
    height: auto;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden; 
  }
  
  .card-brand-side {
    width: 14%; 
    padding: 0.6rem 0;
  }
  
  .brand-logo-mini {
    width: 32px;
    height: 32px;
    padding: 5px;
  }
  
  .brand-name-vertical {
    font-size: 0.55rem;
    letter-spacing: 2px;
  }
  
  .card-details-side {
    padding: 0.8rem 1rem;
  }
  
  .student-main-meta {
    margin-bottom: 0.4rem;
  }

  .student-main-meta h2 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  
  .student-main-meta p {
    font-size: 0.6rem;
  }
  
  .card-info-grid {
    grid-template-columns: repeat(3, 1fr); 
    gap: 0.3rem 0.5rem;
  }
  
  .info-item {
    min-width: 0; 
    padding: 2px; /* Add slight padding for better touch target */
  }

  .info-item label {
    font-size: 0.42rem;
    margin-bottom: 1px;
    white-space: nowrap;
  }
  
  .info-item span {
    font-size: 0.62rem;
    display: block;
    min-height: 1.2em; /* Ensure it stays clickable even if empty */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Allow wrapping for Address specifically */
  .info-item:nth-child(6) span {
    white-space: normal !important;
    text-overflow: initial !important;
    line-height: 1.2;
  }
  
  .student-avatar-small {
    width: 45px;
    height: 45px;
  }
  
  .search-pill-wrapper {
    height: 34px !important; 
  }
  
  .search-pill-wrapper input {
    font-size: 0.7rem !important;
    padding-left: 2rem !important;
  }

  .search-pill-wrapper .search-icon-box svg {
    width: 12px;
    height: 12px;
  }

  .search-pill-wrapper .search-submit-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    right: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--primary) 0%, #3b0764 100%) !important;
    box-shadow: 0 2px 6px rgba(136, 65, 193, 0.4) !important;
    padding: 0 !important;
  }

  .search-pill-wrapper .search-submit-btn span {
    display: none !important; /* Hide 'SEARCH' text on mobile */
  }

  .search-pill-wrapper .search-submit-btn::after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }

  .card-footer-row {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
  }
  
  .btn-manage-card {
    padding: 0.2rem 0.4rem;
    font-size: 0.5rem;
  }
}



/* University Showcase Grid - Mobile & Desktop Optimized */
.uni-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards in one row on mobile */
  gap: 0.5rem; /* Smaller gap on mobile */
  margin-top: 1rem;
}

@media (min-width: 601px) {
  .uni-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .uni-showcase-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 1.5rem;
  }
}

.uni-list-card {
  background: white;
  border-radius: 12px; /* Smaller radius on mobile */
  padding: 0.75rem; /* Reduced padding for mobile */
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Tighter gap */
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Adjust text size for 3-column mobile view */
@media (max-width: 600px) {
  .uni-list-card h2 {
    font-size: 0.65rem !important;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .uni-course-count {
    font-size: 0.55rem !important;
  }
  .uni-course-label {
    font-size: 0.45rem !important;
  }
  .uni-logo-wrapper {
    width: 32px !important;
    height: 32px !important;
  }
  .uni-logo-wrapper img {
    width: 24px !important;
  }
}

@media (min-width: 601px) {
  .uni-list-card {
    border-radius: 20px;
    padding: 1.5rem;
    gap: 1rem;
  }
}

.uni-list-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(136, 65, 193, 0.1);
  border-color: rgba(136, 65, 193, 0.2);
}
.uni-view-all-btn {
  grid-column: 1 / -1;
  background: #f5f3ff;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  text-align: center;
  cursor: pointer;
  font-weight: 800;
  color: #8841c1;
  border: 1px dashed rgba(136, 65, 193, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.uni-view-all-btn:hover {
  background: #ede9fe;
  transform: translateY(-2px);
  border-color: #8841c1;
}

@media (max-width: 600px) {
  .uni-view-all-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.65rem;
    border-radius: 8px;
    margin-top: 0.25rem;
  }
  .uni-view-all-btn svg {
    width: 12px;
    height: 12px;
  }
}

@media (min-width: 1024px) {

  .uni-view-all-btn {
    width: fit-content;
    justify-self: center; /* Center within the grid span */
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
    border-radius: 50px; /* More rounded on desktop */
    margin-top: 1.5rem;
    box-shadow: 0 4px 12px rgba(136, 65, 193, 0.1);
  }
}

/* ==========================================================
   GLOBAL MOBILE OPTIMIZER (ALL PAGES)
   ========================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal scroll globally and ensure content stays within bounds */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
  }

  /* Universal Container Reset - Force all main wrappers to stay within viewport */
  .container, .content-wrapper, .fee-dashboard, .contact-container, .legal-card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero Section Scalers - Compact for mobile readability */
  .hero-split, .courses-hero, .legal-hero, .contact-hero {
    padding: 2.5rem 1rem !important;
    text-align: center;
    border-radius: 0 !important;
  }

  .hero-text h1, .courses-hero h1, .legal-hero h1, .contact-hero h1 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  .hero-text p, .hero-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    white-space: normal !important; /* Force wrap for long subtitles */
    margin-top: 0.5rem !important;
  }

  /* Feature & Info Cards - Stack vertically with better spacing */
  .features-grid-premium, .features-grid, .uni-grid-container, .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .feature-card-premium, .stat-card, .legal-card, .info-card {
    padding: 1.2rem !important;
    border-radius: 16px !important;
    width: 100% !important;
  }

  /* Image Responsiveness - Ensure logos and banners never overflow */
  img, svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Footer & Navigation - Improved accessibility */
  .app-footer {
    padding: 3rem 1.2rem 8rem 1.2rem !important;
  }

  .footer-links {
    gap: 0.8rem !important;
    flex-direction: column;
    align-items: center;
    display: flex !important;
  }

  .footer-link {
    font-size: 0.85rem !important;
    padding: 0.4rem 0 !important;
  }

  /* Modal/Popup Responsive Fixes */
  .modal-content {
    width: calc(100% - 2rem) !important;
    margin: 1.5vh auto !important;
    padding: 1.5rem 1rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Fee Comparison Table/Card Adjustments - Stack fee items */
  .fee-card {
    padding: 1rem !important;
    border-radius: 20px !important;
    margin-bottom: 1rem !important;
  }

  .fee-comparison-row, .card-grid, .card-bottom-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .fee-value {
    font-size: 1.2rem !important;
  }

  /* Section Title Adjustments */
  .section-title {
    font-size: 1.3rem !important;
    padding: 0 1rem !important;
    text-align: center !important;
  }

  /* Search Pills & Inputs - Full width touch targets */
  .search-pill-wrapper {
    width: 100% !important;
    margin-top: 1rem !important;
    max-width: none !important;
  }

  .search-input {
    font-size: 0.9rem !important;
    padding: 0.7rem 1rem !important;
    width: 100% !important;
  }

  /* WhatsApp Float Position - Avoid overlap with bottom nav */
  .wa-circle {
    bottom: 85px !important;
    right: 15px !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* Specific Fix for Extra Small Devices (iPhone SE, etc.) */
@media (max-width: 400px) {
  .hero-text h1, .courses-hero h1 {
    font-size: 1.5rem !important;
  }
  
  .btn, .btn-smart-submit {
    padding: 0.8rem !important;
    font-size: 0.85rem !important;
  }

  .action-grid-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }
}

/* Theme Toggle Component */
.theme-toggle { 
  background: #f1f5f9; 
  border: 1px solid #cbd5e1; 
  border-radius: 50px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  padding: 4px; 
  position: relative; 
  width: 64px; /* Slightly wider */
  height: 32px; /* Slightly taller */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  margin-left: 0.5rem; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.dark-theme .theme-toggle { 
  background: #334155; 
  border-color: #475569; 
}

.theme-toggle-thumb { 
  background: white; 
  border-radius: 50%; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
  width: 24px; 
  height: 24px; 
  position: absolute; 
  left: 4px; 
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 2;
}

.dark-theme .theme-toggle-thumb { 
  left: 36px; 
  background: var(--primary); 
  color: white; 
}

.theme-toggle:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.theme-toggle-icons { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  padding: 0 6px; 
  font-size: 14px; 
  opacity: 0.8; 
  position: relative;
  z-index: 1;
}

.theme-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 768px) { .theme-toggle { width: 44px; height: 22px; padding: 2px; } .theme-toggle-thumb { width: 18px; height: 18px; left: 2px; } .dark-theme .theme-toggle-thumb { left: 24px; } .theme-toggle-icons { font-size: 10px; padding: 0 4px; } }


/* --- NUCLEAR DARK MODE OVERRIDES (ABSOLUTE VISIBILITY) --- */
html.dark-theme { scrollbar-color: #334155 #020617; }

/* Force ALL text to be high-contrast by default in dark mode */
html.dark-theme body,
html.dark-theme div,
html.dark-theme span,
html.dark-theme p,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme li,
html.dark-theme label,
html.dark-theme td,
html.dark-theme th,
html.dark-theme strong,
html.dark-theme b,
html.dark-theme i,
html.dark-theme em,
html.dark-theme small {
    color: #f8fafc !important;
}

/* Ensure links are a visible, vibrant purple */
html.dark-theme a {
    color: #c084fc !important;
}

/* Form inputs and placeholders */
html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea {
    color: #ffffff !important;
    background-color: #1e1e1e !important;
    border-color: #404040 !important;
}
html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: #94a3b8 !important;
}

/* Maintain primary colors where needed */
html.dark-theme .text-primary,
html.dark-theme .course-nav-tab.active,
html.dark-theme .course-nav-tab.active-tab,
html.dark-theme .cat-pill.active {
    color: var(--primary) !important;
}

html.dark-theme .sticky-cat-nav,
html.dark-theme .courses-page .sticky-cat-nav {
    background-color: #121212 !important; /* Page background dark */
    border-bottom: 1px solid #2c2c2c !important;
}

/* Subtext / Muted text */
html.dark-theme .text-muted,
html.dark-theme .hero-subtitle,
html.dark-theme .designation,
html.dark-theme .card-id-badge,
html.dark-theme .course-nav-tab {
    color: #cbd5e1 !important;
}

/* Specific component fixes that might resist the global override due to inline styles */
html.dark-theme .modal-content,
html.dark-theme .fee-dashboard,
html.dark-theme .fee-card,
html.dark-theme .uni-card,
html.dark-theme .uni-list-card,
html.dark-theme .course-inventory-card,
html.dark-theme .action-grid-card,
html.dark-theme .action-item,
html.dark-theme .app-dash-card,
html.dark-theme .visiting-card,
html.dark-theme .legal-card,
html.dark-theme .feature-card,
html.dark-theme .feature-card-premium,
html.dark-theme .card,
html.dark-theme .course-mini-card,
html.dark-theme .course-card-custom,
html.dark-theme .premium-course-card,
html.dark-theme .contact-card,
html.dark-theme .uni-view-all-btn,
html.dark-theme .search-autocomplete-dropdown {
    background-color: #2c2c2c !important; /* GREY CARD CONTAINER */
    border-color: #404040 !important;
}

/* Badge Fixes for search results */
html.dark-theme .exact-match-badge {
    background-color: rgba(22, 101, 52, 0.3) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
}

/* Hover states for interactive items */
html.dark-theme .search-autocomplete-item:hover,
html.dark-theme .uni-card:hover,
html.dark-theme .uni-list-card:hover,
html.dark-theme .uni-view-all-btn:hover,
html.dark-theme .action-item:hover,
html.dark-theme .course-inventory-card:hover {
    background-color: #3d3d3d !important;
}

html.dark-theme .btn-secondary, 
html.dark-theme .btn-outline { 
    border-color: #475569 !important; 
    color: #ffffff !important; 
}

html.dark-theme .bell-icon-3d { 
    color: #ffffff !important; 
}

/* Custom Dropdown Fix (State Selection) */
html.dark-theme .course-dropdown-list {
    background-color: #1e1e1e !important;
    border-color: #404040 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
html.dark-theme .dropdown-item {
    color: #ffffff !important;
}
html.dark-theme .dropdown-item:hover {
    background-color: #333333 !important;
}
html.dark-theme .dropdown-group-header {
    background-color: #121212 !important;
    color: #cbd5e1 !important;
}



/* Dark Mode Select Options Fix */
html.dark-theme select option {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Universal Responsive Header & Navigation System (College Karo)
   ========================================================================== */
.landing-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-crisp, #ECE6DC);
  width: 100%;
}
.nav-inner {
  width: 100%;
  margin: 0;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
}
.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-height: 44px;
}
.brand-badge-college {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  padding: 3px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
  display: inline-block;
  line-height: 1.2;
}
.brand-text-karo {
  color: #0F172A;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.brand-verified-icon {
  width: 17px;
  height: 17px;
  fill: #059669;
  flex-shrink: 0;
  margin-left: -2px;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.nav-menu a {
  text-decoration: none;
  color: #0F172A;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.nav-menu a:hover {
  color: #00875A;
}
.nav-menu a.active {
  color: #00875A !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #00875A !important;
}
.mobile-menu-btn {
  display: none;
  background: #FAF7F0;
  border: 1px solid #ECE6DC;
  font-size: 1.35rem;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0F172A;
  font-weight: 800;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
  background: #E3FCEF;
}
.mobile-drawer {
  display: none;
  background: #FFFFFF;
  border-bottom: 1.5px solid #ECE6DC;
  padding: 0.75rem 1.25rem 1rem 1.25rem;
  flex-direction: column;
  gap: 0.35rem;
}
.mobile-drawer.open {
  display: flex;
}
.mobile-drawer a {
  text-decoration: none;
  color: #0F172A;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-drawer a:hover,
.mobile-drawer a:active {
  background: #FAF7F0;
  color: #00875A;
}
.mobile-drawer a.active {
  color: #00875A !important;
  font-weight: 800 !important;
  background: #E3FCEF !important;
}
@media (max-width: 768px) {
  .nav-menu { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
}

/* DPDP Data Rights Deletion & Google Auth Verification Styles */
.btn-disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(80%);
}
.google-verify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: #3C4043;
  border: 1.5px solid #DADCE0;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 1px 3px rgba(60,64,67,0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 48px;
  margin-bottom: 0.8rem;
}
.google-verify-btn:hover {
  background: #F8FAFC;
  border-color: #4285F4;
  box-shadow: 0 2px 6px rgba(66,133,244,0.18);
}
.google-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.verification-badge-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  border: 1.5px solid #6EE7B7;
  color: #047857;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.verification-badge-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  color: #B91C1C;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}