/* ==============================================
   TyLearn Africa - Green Theme Color System
   Based on HTML Mockup Design
   ============================================== */

:root {
  /* ========================================
     PRIMARY GREEN PALETTE (From Mockup)
     ======================================== */

  /* Primary Green - Main brand color (Emerald) */
  --primary: #10B981;                          /* Main green from mockup */
  --primary-hover: #059669;                    /* Darker green hover */
  --primary-light: #D1FAE5;                    /* Light green backgrounds */
  --primary-dark: #047857;                     /* Dark green variant */
  --accent-green: #34D399;                     /* Bright accent green */

  /* Primary with opacity variants */
  --primary-10: rgba(16, 185, 129, 0.1);
  --primary-20: rgba(16, 185, 129, 0.2);
  --primary-30: rgba(16, 185, 129, 0.3);
  --primary-40: rgba(16, 185, 129, 0.4);
  --primary-50: rgba(16, 185, 129, 0.5);
  --primary-75: rgba(16, 185, 129, 0.75);

  /* Legacy compatibility - map to green */
  --primary-green: #10B981;
  --primary-green-hover: #059669;
  --primary-green-light: #D1FAE5;

  /* ========================================
     SUPPORTING COLORS (From Mockup)
     ======================================== */

  /* Secondary - Keep for variety/accents */
  --secondary: #FF4667;                        /* Pink/Red accent */
  --secondary-hover: #FF2952;
  --secondary-10: rgba(255, 70, 103, 0.1);
  --secondary-30: rgba(255, 70, 103, 0.3);

  /* Blue accents */
  --secondary-blue: #0EA5E9;                   /* Sky blue */
  --secondary-blue-light: #E0F2FE;

  /* Orange accents */
  --accent-orange: #F59E0B;                    /* Amber/Orange */
  --accent-orange-light: #FEF3C7;

  /* Purple accents (for variety) */
  --accent-purple: #8B5CF6;
  --accent-purple-light: #EDE9FE;

  /* Pink accents */
  --accent-pink: #EC4899;
  --accent-pink-light: #FCE7F3;

  /* Success (already green) */
  --success: #03C95A;
  --success-light: #D1FAE5;
  --success-dark: #02A047;

  /* Info (purple) */
  --info: #5625E8;
  --info-light: #E0D9FF;
  --info-dark: #4318CC;

  /* Warning (amber) */
  --warning: #FFC107;
  --warning-light: #FFF3CD;
  --warning-dark: #E6A800;

  /* Danger/Error */
  --danger: #E70D0D;
  --danger-light: #FEE2E2;
  --danger-dark: #B00A0A;

  /* ========================================
     GRAYSCALE & NEUTRALS (From Mockup)
     ======================================== */

  /* White & Black */
  --white: #FFFFFF;
  --black: #000000;

  /* Light backgrounds */
  --light: #F8F8F8;
  --light-bg: #F9FAFB;
  --light-100: #FEFEFE;
  --light-200: #FCFCFD;
  --light-300: #FBFBFD;
  --light-400: #F9FAFC;
  --light-500: #F8FAFB;
  --light-600: #F7F9FB;
  --light-700: #F6F8FA;
  --light-800: #F5F7FA;
  --light-900: #F4F6F9;

  /* Gray scale (from mockup) */
  --gray-50: #F9FAFB;
  --gray-100: #E7E7E7;
  --gray-150: #E5E7EB;
  --gray-200: #D1D1D1;
  --gray-300: #B0B0B0;
  --gray-400: #888888;
  --gray-500: #6D6D6D;
  --gray-600: #5D5D5D;
  --gray-700: #4F4F4F;
  --gray-800: #3D3D3D;
  --gray-900: #191919;

  /* Dark - alias for legacy code */
  --dark: #000000;

  /* ========================================
     TEXT COLORS (From Mockup)
     ======================================== */

  --text-dark: #111827;           /* Headings, important text */
  --text-primary: #111827;        /* Alternative naming */
  --text-secondary: #374151;      /* Subheadings, labels */
  --text-medium: #374151;         /* Alternative naming */
  --text-body: #6B7280;           /* Body text, descriptions */
  --text-light: #6B7280;          /* Alternative naming */
  --text-muted: #9CA3AF;          /* Placeholder, disabled text */
  --text-white: #FFFFFF;          /* Text on dark backgrounds */

  /* ========================================
     BORDER COLORS (From Mockup)
     ======================================== */

  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --border-dark: #9CA3AF;
  --border-focus: #10B981;         /* Green focus state */

  /* ========================================
     UI COMPONENT COLORS
     ======================================== */

  /* Input fields */
  --input-bg: #F9FAFB;
  --input-border: #E5E7EB;
  --input-focus-border: #10B981;
  --input-text: #1F2937;
  --input-placeholder: #9CA3AF;

  /* Buttons */
  --btn-primary-bg: #10B981;
  --btn-primary-hover: #059669;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: #E5E7EB;
  --btn-secondary-text: #374151;

  /* Links */
  --link-color: #10B981;
  --link-hover: #059669;

  /* Cards & Containers */
  --card-bg: #FFFFFF;
  --card-border: #E5E7EB;
  --card-shadow: rgba(0, 0, 0, 0.08);

  /* ========================================
     GRADIENTS (From Mockup)
     ======================================== */

  --gradient-primary: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-accent: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  --gradient-hero: linear-gradient(135deg, #047857 0%, #10B981 100%);
  --gradient-light: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
  --gradient-overlay: radial-gradient(circle at 30% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);

  /* ========================================
     SHADOWS (From Mockup)
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 12px rgba(16, 185, 129, 0.3);
  --shadow-primary-hover: 0 6px 20px rgba(16, 185, 129, 0.4);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50px;
  --radius-circle: 50%;

  /* ========================================
     SPACING
     ======================================== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* ==============================================
   OVERRIDE LEGACY PURPLE WITH GREEN
   ============================================== */

/* Override all primary color references from purple to green */
.bg-primary,
.bg-primary-transparent,
.badge-primary,
.btn-primary {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
}

.bg-primary.bg-opacity-10 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.bg-primary.bg-opacity-25 {
  background-color: rgba(16, 185, 129, 0.25) !important;
}

.bg-primary.bg-opacity-50 {
  background-color: rgba(16, 185, 129, 0.5) !important;
}

.bg-primary.bg-opacity-75 {
  background-color: rgba(16, 185, 129, 0.75) !important;
}

.bg-primary.bg-opacity-100 {
  background-color: #10B981 !important;
}

/* Text colors */
.text-primary,
.text-secondary {
  color: #10B981 !important;
}

/* Border colors */
.border-primary {
  border-color: #10B981 !important;
}

/* Button hover states */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Links */
a {
  color: #10B981;
  transition: color 0.3s ease;
}

a:hover {
  color: #059669;
}

/* Selection */
::selection {
  background: #10B981;
  color: #FFFFFF;
  text-shadow: none;
}

/* ==============================================
   COMPONENT SPECIFIC OVERRIDES
   ============================================== */

/* Top Bar Icons */
.top-bar-left i,
.top-bar i.text-primary {
  color: #10B981 !important;
}

/* Navigation Active States */
.nav-links a::after,
.nav-links a.active::after {
  background: #10B981;
}

.nav-links a:hover,
.nav-links a.active {
  color: #10B981;
}

/* Cart Icon Hover */
.cart-icon:hover {
  color: #10B981;
}

/* Form Controls Focus */
.form-control:focus,
.form-control-lg:focus,
.form-select:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}

/* Checkboxes and Radios */
.form-check-input:checked {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
}

.form-check-input:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}

/* Badges */
.badge-primary,
.badge.bg-primary {
  background-color: #10B981 !important;
}

/* Progress Bars */
.progress-bar {
  background-color: #10B981 !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: #10B981 !important;
  color: #047857 !important;
}

/* ==============================================
   CATEGORY & HOVER EFFECTS
   ============================================== */

/* Category Items Hover - Change from Purple to Green */
.categories-item-two:hover,
.categories-item-five:hover,
.categories-item-six:hover {
  background: #10B981 !important;
  border-color: #10B981 !important;
}

.categories-item-six .categories-icon .icon-bg {
  background: #10B981 !important;
}

.categories-item-six .view-icon {
  background: #10B981 !important;
}

.categories-item-six:hover .icon-bg,
.categories-item-six:hover .view-icon {
  background: #059669 !important;
}

/* Hero Title Spans */
.banner-content h1 span {
  color: #10B981 !important;
}

/* Counter Stats Text Colors */
.text-purple {
  color: #8B5CF6 !important;
}

.text-skyblue {
  color: #0EA5E9 !important;
}

.text-success {
  color: #03C95A !important;
}

/* ==============================================
   BUTTON STYLES (Updated)
   ============================================== */

.btn-primary,
.btn-secondary {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
  font-weight: 600;
  padding: 12px 28px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0);
}

.btn-outline {
  border: 2px solid #E5E7EB;
  color: #374151;
  background: transparent;
}

.btn-outline:hover {
  border-color: #10B981;
  color: #10B981;
  background: rgba(16, 185, 129, 0.05);
}

/* ==============================================
   SECTION HEADERS & BADGES
   ============================================== */

.section-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
}

.section-header h2 {
  color: #111827;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-top: 12px;
  margin-bottom: 16px;
}

.section-subtitle,
.section-header p {
  color: #6B7280;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ==============================================
   CARDS & CONTAINERS
   ============================================== */

.card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* ==============================================
   TESTIMONIALS & RATINGS
   ============================================== */

.testimonial-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  border-color: #10B981;
  box-shadow: 0 10px 15px rgba(16, 185, 129, 0.1);
}

.testimonial-rating {
  color: #F59E0B;
}

.verified-badge {
  background: #10B981;
  color: #FFFFFF;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* ==============================================
   FAQ SECTION
   ============================================== */

.faq-item {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item.active {
  border-color: #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.faq-question {
  padding: 20px;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-toggle {
  width: 32px;
  height: 32px;
  background: #10B981;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

/* ==============================================
   FOOTER
   ============================================== */

.footer {
  background: #111827;
  color: #D1D5DB;
  padding: 60px 0 30px;
}

.footer h4 {
  color: #FFFFFF;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer a {
  color: #D1D5DB;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #10B981;
}

.newsletter-form button {
  background: #10B981 !important;
  border-color: #10B981 !important;
}

.newsletter-form button:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

.social-links a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: #10B981;
  color: #FFFFFF;
}

/* ==============================================
   UTILITY CLASSES
   ============================================== */

/* Background colors */
.bg-primary-light { background-color: #D1FAE5 !important; }
.bg-primary-10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-accent-green { background-color: #34D399 !important; }
.bg-gray { background-color: #F9FAFB !important; }

/* Text colors */
.text-green { color: #10B981 !important; }
.text-dark { color: #111827 !important; }
.text-muted { color: #9CA3AF !important; }
.text-white { color: #FFFFFF !important; }

/* Border colors */
.border-green { border-color: #10B981 !important; }
.border-light { border-color: #E5E7EB !important; }

/* Hover states */
.hover-primary:hover { color: #059669 !important; }
.hover-bg-primary:hover { background-color: #059669 !important; }

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 991.98px) {
  .section-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .section-header h2 {
    font-size: 1.75rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 10px 20px;
    font-size: 14px;
  }
}