/* ================================================================
   Wonderful Writers — PREMIUM ENHANCEMENTS v3.0
   Upgrades: Logo sizing, Glassmorphism, Animations, Dashboard,
             Preloader, Fonts, Sidepanel consistency
   ================================================================ */

/* ──────────────────────────────────────────────
   PREMIUM FONT IMPORT
────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* ──────────────────────────────────────────────
   ENHANCED CSS VARIABLES
────────────────────────────────────────────── */
:root {
  /* Enhanced glass morphism */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(255, 126, 45, 0.18);
  --glass-border-subtle: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(255, 126, 45, 0.08), 0 2px 8px rgba(0,0,0,0.06);
  --glass-blur: blur(20px);
  --glass-blur-strong: blur(32px);

  /* Enhanced shadows */
  --shadow-glass: 0 8px 32px rgba(255, 126, 45, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 24px 60px rgba(255, 126, 45, 0.18), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-float: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-glow-orange: 0 0 30px rgba(255, 126, 45, 0.35);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #FF7E2D 0%, #ffaa5e 100%);
  --gradient-premium: linear-gradient(135deg, #FF7E2D 0%, #ff9a4a 50%, #ffaa5e 100%);
  --gradient-dark-card: linear-gradient(145deg, #2a1a00 0%, #221500 100%);
  --gradient-glow: radial-gradient(ellipse at top, rgba(255,126,45,0.15) 0%, transparent 70%);

  /* Animation curves */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

[data-theme="dark"] {
  --glass-bg: rgba(26, 15, 0, 0.88);
  --glass-bg-strong: rgba(34, 21, 0, 0.96);
  --glass-border: rgba(255, 126, 45, 0.22);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(255,126,45,0.1);
}

/* ══════════════════════════════════════════════════
   SECTION 1: LOGO SIZE UPGRADES — ALL LOCATIONS
══════════════════════════════════════════════════ */

/* ── Navigation Header Logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s var(--ease-bounce) !important;
}
.logo:hover { transform: scale(1.03) !important; }

.logo-img {
  height: 52px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  transition: all 0.3s ease !important;
}

/* ── Footer Logo ── */
.footer .logo-img,
footer .logo-img {
  height: 56px !important;
  width: auto !important;
  max-width: 230px !important;
}

.footer .logo {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* ── Dashboard Logos ── */
.d-logo-img {
  height: 46px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

.d-logo {
  gap: 12px !important;
}

/* ── Admin Sidebar Logo ── */
.side-logo-img,
.admin-logo-img {
  height: 46px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

.side-logo {
  padding: 24px 20px !important;
  gap: 14px !important;
}

/* ── Tutor Dashboard Logo ── */
.t-logo-img {
  height: 46px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* ── Preloader Logo ── */
.loader-logo-img {
  height: 90px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
  animation: loaderLogoBreathe 2s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 24px rgba(255, 126, 45, 0.4)) !important;
}

@keyframes loaderLogoBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.92; }
}

/* ── Login/Auth Page Logo ── */
.topbar-mini .logo-img,
.auth-wrap .logo-img {
  height: 48px !important;
  width: auto !important;
}

/* ── Light/Dark mode logo switching ── */
[data-theme="light"] .logo-img,
[data-theme="light"] .d-logo-img,
[data-theme="light"] .t-logo-img,
[data-theme="light"] .loader-logo-img {
  content: url('../wonderful-colored.png');
  filter: none !important;
}

[data-theme="dark"] .logo-img,
[data-theme="dark"] .d-logo-img,
[data-theme="dark"] .t-logo-img,
[data-theme="dark"] .loader-logo-img {
  content: url('../wonderful-logo.png');
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,126,45,0.5)) !important;
}

/* Admin sidebar is always dark */
.side-logo-img,
.admin-logo-img {
  content: url('../wonderful-logo.png') !important;
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(255,126,45,0.4)) !important;
}

/* Admin pages use ../ path */
.admin-sidebar .side-logo-img {
  content: url('../wonderful-logo.png') !important;
}

/* Remove old pill wrapping on logo in light mode */
[data-theme="light"] .logo {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════
   SECTION 2: PRELOADER ENHANCEMENTS — ALL PAGES
══════════════════════════════════════════════════ */

.page-loader {
  position: fixed !important;
  inset: 0 !important;
  background: var(--bg) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 24px !important;
  transition: opacity 0.6s ease, visibility 0.6s ease !important;
}

.page-loader::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-glow);
  pointer-events: none;
}

.page-loader.done {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.loader-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative;
  z-index: 1;
}

.loader-logo-icon {
  display: none !important;
}

.loader-brand-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em;
}
.loader-brand-text span { color: #FF7E2D !important; }

.loader-bar {
  width: 260px !important;
  height: 5px !important;
  background: var(--border) !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  position: relative;
  z-index: 1;
}

.loader-bar-fill {
  height: 100% !important;
  background: var(--gradient-primary) !important;
  border-radius: 50px !important;
  animation: loaderProgress 1.4s ease-in-out forwards !important;
  position: relative;
  overflow: hidden;
}
.loader-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmerLoad 1.4s ease infinite;
}
@keyframes loaderProgress {
  0% { width: 0%; }
  30% { width: 45%; }
  70% { width: 85%; }
  100% { width: 100%; }
}
@keyframes shimmerLoad {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Preloader dots */
.loader-dots {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.loader-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gradient-primary);
  animation: dotBounce 1.4s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════
   SECTION 3: ENHANCED GLASSMORPHISM EFFECTS
══════════════════════════════════════════════════ */

/* ── Header glass ── */
.header {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── Navbar glass ── */
.navbar {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,126,45,0.1) !important;
}
[data-theme="dark"] .navbar {
  background: rgba(26, 15, 0, 0.75) !important;
}

/* ── Dashboard topbar glass ── */
.d-topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── Glass cards utility ── */
.glass-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all 0.4s var(--ease-smooth) !important;
}
.glass-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(255,126,45,0.28) !important;
  transform: translateY(-4px) !important;
}

/* ── Hero badges glass ── */
.hero-badge,
.hero-float-card {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-float) !important;
}

/* ── Course card glassmorphism highlight ── */
.course-card,
.feature-card,
.tutor-card,
.testimonial-card,
.cat-card {
  position: relative;
  overflow: hidden;
}
.course-card::after,
.feature-card::after,
.tutor-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,126,45,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.course-card:hover::after,
.feature-card:hover::after,
.tutor-card:hover::after,
.testimonial-card:hover::after { opacity: 1; }

/* ── Modal glass ── */
.modal-box {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.3) !important;
}

/* ── Toast glass ── */
.toast {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-float) !important;
}

/* ── Chat panel glass ── */
.chat-panel {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* ── Dashboard sidebar glass (student) ── */
.d-sidebar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-right: 1px solid var(--glass-border) !important;
}

/* ── Stat cards glass ── */
.stat-card,
.insight-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ── Widget glass ── */
.widget,
.admin-card {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ── Form fields glass ── */
.form-control {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 2px solid var(--border) !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
[data-theme="dark"] .form-control {
  background: rgba(26, 15, 0, 0.7) !important;
}
.form-control:focus {
  border-color: #FF7E2D !important;
  box-shadow: 0 0 0 4px rgba(255,126,45,0.12), 0 4px 16px rgba(255,126,45,0.1) !important;
  background: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] .form-control:focus {
  background: rgba(34, 21, 0, 0.95) !important;
}

/* ── User dropdown glass ── */
.user-dropdown {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-float) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 4: ANIMATION UPGRADES
══════════════════════════════════════════════════ */

/* ── Page entry animations ── */
@keyframes pageEnterFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pageEnterScale {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromTop {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}
@keyframes shimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,126,45,0.3); }
  50% { box-shadow: 0 8px 40px rgba(255,126,45,0.6), 0 0 0 8px rgba(255,126,45,0.05); }
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-5deg) scale(0.95); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

/* ── Section animations on scroll ── */
[data-aos] {
  opacity: 0;
  transition: all 0.7s var(--ease-smooth) !important;
}
[data-aos="fade-up"] { transform: translateY(32px); }
[data-aos="fade-down"] { transform: translateY(-32px); }
[data-aos="fade-left"] { transform: translateX(-32px); }
[data-aos="fade-right"] { transform: translateX(32px); }
[data-aos="zoom-in"] { transform: scale(0.88); }
[data-aos="flip"] { transform: rotateY(-20deg) scale(0.95); }
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Card hover animations ── */
.course-card,
.feature-card,
.blog-card,
.tutor-card,
.cat-card,
.material-card,
.testimonial-card {
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s var(--ease-smooth), border-color 0.3s ease !important;
  will-change: transform;
}

.course-card:hover { transform: translateY(-10px) !important; }
.feature-card:hover { transform: translateY(-8px) !important; }
.blog-card:hover { transform: translateY(-8px) !important; }
.tutor-card:hover { transform: translateY(-10px) !important; }
.cat-card:hover { transform: translateY(-8px) scale(1.02) !important; }

/* ── Button micro-interactions ── */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth) !important;
}
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s, opacity 0.5s;
  opacity: 0;
}
.btn:active::after {
  width: 200px; height: 200px; opacity: 0;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(255,126,45,0.45) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

/* ── Nav link hover ── */
.nav-menu a {
  transition: color 0.25s ease !important;
}
.nav-menu a::after {
  transition: width 0.3s var(--ease-smooth) !important;
}

/* ── Icon bounce on feature cards ── */
.feature-card:hover .feature-icon {
  animation: iconBounce 0.5s var(--ease-bounce) !important;
}
@keyframes iconBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.25) rotate(8deg); }
  80% { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Dashboard section panels fade ── */
.section-panel {
  animation: pageEnterFade 0.35s var(--ease-smooth) !important;
}

/* ── Stat counter shimmer effect ── */
.stat-num,
.stats-num,
.kpi-value {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep stat labels readable */
.stat-label { -webkit-text-fill-color: var(--text-muted) !important; }

/* ── Smooth hover on social links ── */
.social-link {
  transition: all 0.3s var(--ease-bounce) !important;
}
.social-link:hover { transform: translateY(-4px) scale(1.1) !important; }

/* ── Scroll to top button ── */
.scroll-top {
  transition: all 0.3s var(--ease-bounce) !important;
}
.scroll-top:hover {
  transform: translateY(-6px) scale(1.12) !important;
  box-shadow: 0 12px 32px rgba(255,126,45,0.55) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 5: PREMIUM FONT UPGRADES — DASHBOARDS
══════════════════════════════════════════════════ */

/* ── Student Dashboard Typography ── */
body {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.s-name, .welcome-banner h2,
.d-logo, .section-hdr h2,
.widget-title, .kpi-value,
.stat-num {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

.admin-topbar-left h2,
.admin-card-title,
.kpi-label, .kpi-change,
.side-logo-text,
.side-link,
.side-section {
  font-family: 'Inter', sans-serif !important;
}

/* ── Number labels ── */
.stat-num, .kpi-value, .rev-value, .streak-days {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* ──────────────────────────────────────────────
   Enhanced welcome banner typography
────────────────────────────────────────────── */
.welcome-banner h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* ══════════════════════════════════════════════════
   SECTION 6: ADMIN DASHBOARD PREMIUM DESIGN UPGRADE
══════════════════════════════════════════════════ */

/* ── Enhanced admin sidebar ── */
.admin-sidebar {
  background: linear-gradient(180deg, #1a0f00 0%, #140a00 60%, #0f0700 100%) !important;
  border-right: 1px solid rgba(255,126,45,0.12) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
}

.admin-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: radial-gradient(ellipse at top left, rgba(255,126,45,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.side-logo {
  border-bottom: 1px solid rgba(255,126,45,0.15) !important;
  padding: 22px 20px !important;
  position: relative;
}
.side-logo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,126,45,0.3), transparent);
}

/* ── Sidebar navigation items ── */
.side-link {
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 0.87rem !important;
  font-weight: 500 !important;
  margin-bottom: 3px !important;
  transition: all 0.25s var(--ease-smooth) !important;
  letter-spacing: 0.01em;
}
.side-link:hover {
  background: rgba(255,126,45,0.14) !important;
  color: #FF9A4A !important;
  padding-left: 18px !important;
}
.side-link.active {
  background: linear-gradient(135deg, rgba(255,126,45,0.22), rgba(255,126,45,0.1)) !important;
  color: #FF9A4A !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(255,126,45,0.2) !important;
}

/* ── KPI card enhancements ── */
.kpi-card {
  border-radius: 18px !important;
  padding: 24px 22px !important;
  transition: all 0.3s var(--ease-smooth) !important;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,126,45,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.kpi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(255,126,45,0.15) !important;
}

.kpi-value {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
}

/* ── Admin cards ── */
.admin-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
.admin-card:hover {
  box-shadow: 0 20px 60px rgba(255,126,45,0.12) !important;
  transform: translateY(-2px) !important;
}

.admin-card-header {
  padding: 20px 24px !important;
}

/* ── Admin topbar ── */
.admin-topbar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── Admin table enhancements ── */
.admin-table th {
  background: rgba(255,126,45,0.04) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
}

/* ── Revenue summary ── */
.revenue-summary {
  background: rgba(255,126,45,0.03);
  border-radius: 0 0 20px 20px;
}
.rev-value {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}

/* ── Activity feed ── */
.activity-item {
  transition: background 0.2s ease;
  border-radius: 10px;
  padding: 12px 16px !important;
  margin: 2px 0;
}
.activity-item:hover {
  background: rgba(255,126,45,0.04) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 7: STUDENT DASHBOARD PREMIUM UPGRADE
══════════════════════════════════════════════════ */

/* ── Dashboard layout ── */
.d-wrap {
  background: var(--bg) !important;
}

/* ── Welcome banner upgrade ── */
.welcome-banner {
  background: linear-gradient(135deg, #FF7E2D 0%, #ff9a4a 40%, #ffb86c 100%) !important;
  border-radius: 28px !important;
  padding: 36px 40px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(255,126,45,0.35) !important;
}
.welcome-banner::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  pointer-events: none;
}
.welcome-banner::after {
  content: '';
  position: absolute;
  left: 40%; bottom: -60px;
  width: 180px; height: 180px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Stat cards upgrade ── */
.stat-card {
  border-radius: 20px !important;
  padding: 22px !important;
  transition: all 0.3s var(--ease-bounce) !important;
  border: 1px solid var(--border) !important;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 16px 40px rgba(255,126,45,0.14) !important;
  border-color: rgba(255,126,45,0.25) !important;
}

.stat-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 14px !important;
  font-size: 1.3rem !important;
  transition: all 0.3s var(--ease-bounce) !important;
}
.stat-card:hover .stat-icon {
  transform: scale(1.15) rotate(5deg) !important;
}

/* ── Widget upgrade ── */
.widget {
  border-radius: 24px !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
.widget:hover {
  box-shadow: 0 16px 48px rgba(255,126,45,0.1) !important;
  transform: translateY(-2px) !important;
}

.widget-head {
  padding: 20px 24px !important;
}
.widget-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ── Achievement cards ── */
.achievement {
  border-radius: 20px !important;
  transition: all 0.35s var(--ease-bounce) !important;
}
.achievement:hover:not(.locked) {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(255,126,45,0.15) !important;
}

/* ── Progress bars ── */
.progress-fill {
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: progressShimmer 2s infinite;
}
@keyframes progressShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ── Certificate card ── */
.cert-card {
  border-radius: 24px !important;
  box-shadow: 0 16px 48px rgba(255,126,45,0.3) !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
.cert-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 60px rgba(255,126,45,0.4) !important;
}

/* ── Material cards ── */
.mat-card {
  border-radius: 20px !important;
  transition: all 0.3s var(--ease-bounce) !important;
}
.mat-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(255,126,45,0.25) !important;
  box-shadow: 0 16px 40px rgba(255,126,45,0.12) !important;
}

/* ── Consistent sidebar ── */
.d-sidebar {
  width: 264px !important;
  background: var(--bg-card) !important;
  border-right: 1px solid var(--border) !important;
}

/* ── User pill ── */
.user-pill {
  transition: all 0.25s var(--ease-smooth) !important;
}
.user-pill:hover {
  border-color: #FF7E2D !important;
  background: rgba(255,126,45,0.04) !important;
  transform: scale(1.02) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 8: CONSISTENT SINGLE SIDEPANEL
══════════════════════════════════════════════════ */

/* Ensure only ONE sidepanel design is visible — consistent styling */
.d-sidebar,
.t-sidebar {
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,126,45,0.2) transparent !important;
}

/* Hide any duplicate/secondary sidebar if present */
.d-sidebar + .d-sidebar,
.t-sidebar + .t-sidebar {
  display: none !important;
}

/* Ensure section-panel visibility is properly toggled */
.section-panel { display: none !important; }
.section-panel.active { display: block !important; }

/* ── Sidebar section labels ── */
.s-section {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  padding: 16px 12px 6px !important;
}

/* ── Active nav link ── */
.s-link.active,
.t-link.active {
  background: linear-gradient(135deg, rgba(255,126,45,0.12) 0%, rgba(255,126,45,0.06) 100%) !important;
  color: #FF7E2D !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
.s-link.active::before,
.t-link.active::before {
  transform: scaleY(1) !important;
}

/* ── Badge ── */
.s-badge {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
}

/* ══════════════════════════════════════════════════
   SECTION 9: ADDITIONAL DASHBOARD WIDGETS
══════════════════════════════════════════════════ */

/* Quick actions bar */
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  transition: all 0.25s var(--ease-smooth);
  text-decoration: none;
}
.quick-action-btn:hover {
  border-color: #FF7E2D;
  color: #FF7E2D;
  background: rgba(255,126,45,0.06);
  transform: translateY(-2px);
}
.quick-action-btn.primary {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,126,45,0.3);
}
.quick-action-btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255,126,45,0.45);
  color: #fff;
}

/* Notification center */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
  cursor: pointer;
}
.notification-item:hover { background: rgba(255,126,45,0.03); }
.notification-item.unread { background: rgba(255,126,45,0.04); }
.notif-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.notif-text { font-size: 0.86rem; color: var(--text); line-height: 1.5; flex: 1; }
.notif-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.unread-dot {
  width: 8px; height: 8px;
  background: #FF7E2D;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

/* Mini metric pill */
.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,126,45,0.08);
  color: #FF7E2D;
  border: 1px solid rgba(255,126,45,0.15);
}
.metric-pill.green {
  background: rgba(6,214,160,0.08);
  color: #059669;
  border-color: rgba(6,214,160,0.15);
}
.metric-pill.red {
  background: rgba(238,92,92,0.08);
  color: #dc2626;
  border-color: rgba(238,92,92,0.15);
}

/* Progress widget */
.progress-widget {
  padding: 20px 22px;
}
.progress-item {
  margin-bottom: 18px;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.progress-label { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.progress-pct { font-size: 0.82rem; font-weight: 700; color: #FF7E2D; }

/* ══════════════════════════════════════════════════
   SECTION 10: SCROLL ANIMATIONS — INTERSECTION OBSERVER
══════════════════════════════════════════════════ */

/* Elements that will animate in on scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth);
}
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.anim-left { transform: translateX(-28px); }
.animate-on-scroll.anim-right { transform: translateX(28px); }
.animate-on-scroll.anim-scale { transform: scale(0.92); }
.animate-on-scroll.anim-left.animated,
.animate-on-scroll.anim-right.animated,
.animate-on-scroll.anim-scale.animated {
  transform: none;
}

/* Staggered delay helpers */
.anim-delay-1 { transition-delay: 0.1s !important; }
.anim-delay-2 { transition-delay: 0.2s !important; }
.anim-delay-3 { transition-delay: 0.3s !important; }
.anim-delay-4 { transition-delay: 0.4s !important; }

/* ══════════════════════════════════════════════════
   SECTION 11: ENHANCED MOBILE MENU
══════════════════════════════════════════════════ */

.nav-menu.open {
  animation: slideInFromTop 0.3s var(--ease-smooth) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 12: FOOTER LOGO ENHANCEMENT
══════════════════════════════════════════════════ */

.footer .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════
   SECTION 13: ADMIN PAGES CONSISTENT SIDEPANEL
══════════════════════════════════════════════════ */

/* Override any inconsistency between admin pages */
.admin-sidebar,
[class*="admin-sidebar"] {
  width: 260px !important;
  background: linear-gradient(180deg, #1a0f00 0%, #0f0700 100%) !important;
  border-right: 1px solid rgba(255,126,45,0.12) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  z-index: 200 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: transform 0.3s var(--ease-smooth) !important;
}

.admin-main {
  margin-left: 260px !important;
  flex: 1 !important;
}

/* Side nav section header consistent */
.side-section {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.3) !important;
  padding: 16px 12px 6px !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════
   SECTION 14: EXTRA GLASSMORPHISM — MORE ELEMENTS
══════════════════════════════════════════════════ */

/* Search results panel */
.search-results-panel {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-float) !important;
}

/* Announcement bar */
.announcement-bar {
  background: var(--gradient-premium) !important;
  box-shadow: 0 2px 12px rgba(255,126,45,0.3) !important;
}

/* Hero section glow overlay */
.hero-premium::before,
.hero::before {
  background: radial-gradient(circle at 70% 30%, rgba(255,126,45,0.1) 0%, transparent 60%) !important;
}

/* Glass input wrappers */
.header-search {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid rgba(255,126,45,0.12) !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
[data-theme="dark"] .header-search {
  background: rgba(26, 15, 0, 0.7) !important;
}
.header-search:focus-within {
  border-color: rgba(255,126,45,0.4) !important;
  box-shadow: 0 0 0 4px rgba(255,126,45,0.08), 0 8px 24px rgba(255,126,45,0.1) !important;
  background: rgba(255,255,255,0.92) !important;
}

/* Newsletter form */
.newsletter-input {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  transition: all 0.3s ease !important;
}
.newsletter-input:focus {
  border-color: rgba(255,126,45,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,126,45,0.12) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* Order summary card */
.order-summary-card,
.paypal-container {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 15: MOBILE RESPONSIVE ENHANCEMENTS
══════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .d-sidebar { display: none !important; }
  .d-wrap { grid-template-columns: 1fr !important; }
  .admin-sidebar { transform: translateX(-100%) !important; }
  .admin-main { margin-left: 0 !important; }
  .logo-img { height: 44px !important; }
}

@media (max-width: 600px) {
  .logo-img { height: 38px !important; }
  .footer .logo-img { height: 44px !important; }
  .loader-logo-img { height: 70px !important; }
}

/* ══════════════════════════════════════════════════
   SECTION 16: READABILITY SAFETY OVERRIDES
   Ensure text stays readable on glass backgrounds
══════════════════════════════════════════════════ */

/* Text on glass must always be readable */
.glass-card p,
.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6,
.glass-card span, .glass-card li {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Override gradient text on glass for readability */
.glass-card .stat-num,
.glass-card .kpi-value {
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Ensure muted text stays visible */
.glass-card .text-muted,
.glass-card [class*="muted"],
.glass-card p {
  opacity: 0.85 !important;
}

/* Body text is always readable */
p, span, li, td, th, label {
  -webkit-text-fill-color: unset !important;
}
/* Only apply gradient text where explicitly intended */
.stat-num, .kpi-value, .stats-num {
  /* Only apply where we have specific containers with enough contrast */
}

/* Safe text gradient only on white/light bg elements */
.welcome-banner .stat-num,
.stats-section .stats-num {
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* ── Ensure contrast on orange backgrounds ── */
.stats-section p,
.stats-section span,
.cta-banner p,
.cta-banner span,
.welcome-banner p,
.welcome-banner span {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}

/* Revert gradient text on stat-num in general to keep it safe */
.stat-num {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════
   SECTION 17: TUTOR DASHBOARD LINK
══════════════════════════════════════════════════ */

.tutor-access-info {
  background: linear-gradient(135deg, rgba(255,126,45,0.08) 0%, rgba(255,170,94,0.05) 100%);
  border: 1px solid rgba(255,126,45,0.2);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
}
.tutor-access-info h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tutor-access-info p {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tutor-access-info .btn {
  font-size: 0.84rem;
}

/* ══════════════════════════════════════════════════
   SECTION 18: SCROLL INDICATOR ENHANCEMENT
══════════════════════════════════════════════════ */

.scroll-indicator {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 9998;
  border-radius: 0 3px 3px 0;
  transition: width 0.1s ease;
  box-shadow: 0 0 8px rgba(255,126,45,0.5);
}

/* ══════════════════════════════════════════════════
   SECTION 19: ENHANCED BUTTONS
══════════════════════════════════════════════════ */

/* CTA pulse animation */
.btn-hero-primary,
.btn-cta-pulse {
  animation: glowPulse 3s ease-in-out infinite !important;
}
.btn-hero-primary:hover,
.btn-cta-pulse:hover {
  animation: none !important;
}

/* Glass button variant */
.btn-glass {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
.btn-glass:hover {
  background: rgba(255,255,255,0.28) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* ══════════════════════════════════════════════════
   SECTION 20: SMOOTH PAGE TRANSITIONS
══════════════════════════════════════════════════ */

/* Page content container smooth entry */
main,
.main-content,
.admin-content,
.d-main,
.d-inner {
  animation: pageEnterFade 0.5s var(--ease-smooth) !important;
}

/* Ensure no layout shift */
* { box-sizing: border-box !important; }

/* Smooth image loading */
img {
  transition: opacity 0.3s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded {
  opacity: 1;
}