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

:root {
  --color-forest: #14472A;
  --color-forest-dark: #0B2B18;
  --color-forest-deep: #071E10;
  --color-leaf: #2E9B4F;
  --color-leaf-bright: #38B860;
  --color-emerald-glow: #10B981;
  --color-sun: #F5A524;
  --color-sun-light: #FFD166;
  --color-cream: #F7F3E3;
  --color-cream-light: #FDFAF2;
  --color-earth: #8A5A00;
}

/* Base Typography - Only Baloo 2 and Hind */
html {
  scroll-behavior: smooth;
  font-family: 'Hind', sans-serif;
  color: #1F2937;
  background-color: #FAFCF8;
}

body {
  overflow-x: hidden;
  font-family: 'Hind', sans-serif;
  background: radial-gradient(circle at 10% 20%, rgba(46, 155, 79, 0.04) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(245, 165, 36, 0.04) 0%, transparent 40%),
              #FAFCF8;
}

/* Headings use Baloo 2 */
h1, h2, h3, h4, h5, h6, .font-heading, .font-baloo {
  font-family: 'Baloo 2', cursive, sans-serif;
  letter-spacing: -0.01em;
}

.font-hind {
  font-family: 'Hind', sans-serif;
}

/* Exact Brand Typography specifications from Logo */
.brand-title-hi {
  font-family: 'Baloo 2', cursive, sans-serif;
  font-weight: 800; /* ExtraBold */
  letter-spacing: normal;
}

.brand-title-en {
  font-family: 'Baloo 2', cursive, sans-serif;
  font-weight: 700; /* Bold */
  letter-spacing: 0.12em;
}

.brand-tagline {
  font-family: 'Hind', sans-serif;
  font-weight: 600; /* SemiBold */
}

/* Custom glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(46, 155, 79, 0.15);
}

.glass-panel-dark {
  background: rgba(20, 71, 42, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(46, 155, 79, 0.2);
}

/* Gradients */
.bg-gradient-forest {
  background: linear-gradient(135deg, #0d351e 0%, #14472A 50%, #1b5b37 100%);
}

.bg-gradient-leaf {
  background: linear-gradient(135deg, #2E9B4F 0%, #1b7738 100%);
}

.bg-gradient-sun {
  background: linear-gradient(135deg, #F5A524 0%, #E08A10 100%);
}

.bg-hero-pattern {
  background-color: #0d351e;
  background-image: radial-gradient(rgba(46, 155, 79, 0.25) 1px, transparent 0),
                    radial-gradient(rgba(245, 165, 36, 0.15) 1px, transparent 0);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

/* Animations */
@keyframes floatLeaf {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes gentleGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(46, 155, 79, 0.25); }
  50% { box-shadow: 0 0 35px rgba(46, 155, 79, 0.5); }
}

.animate-float {
  animation: floatLeaf 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatLeaf 7s ease-in-out 2s infinite;
}

.animate-pulse-slow {
  animation: pulseSlow 4s ease-in-out infinite;
}

.animate-glow {
  animation: gentleGlow 3s ease-in-out infinite;
}

/* Custom Shadows */
.shadow-green-soft {
  box-shadow: 0 10px 25px -5px rgba(20, 71, 42, 0.12), 0 8px 10px -6px rgba(20, 71, 42, 0.08);
}

.shadow-green-lg {
  box-shadow: 0 20px 40px -10px rgba(20, 71, 42, 0.25);
}

.shadow-gold-glow {
  box-shadow: 0 10px 25px -5px rgba(245, 165, 36, 0.35);
}

/* Step timeline connectors */
.stepper-line {
  position: absolute;
  top: 24px;
  left: 32px;
  right: 32px;
  height: 3px;
  background: #E5E7EB;
  z-index: 1;
}

.stepper-progress {
  height: 100%;
  background: linear-gradient(90deg, #2E9B4F, #10B981);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom card hover lifts */
.card-hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.card-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 35px -10px rgba(20, 71, 42, 0.16);
  border-color: rgba(46, 155, 79, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #F1F5F0;
}
::-webkit-scrollbar-thumb {
  background: #2E9B4F;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #14472A;
}

/* Printable Certificate / Receipt styling */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-certificate, #printable-certificate * {
    visibility: visible;
  }
  #printable-certificate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
  }
}

/* Mobile Friendly & Touch Optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Smooth momentum scrolling on mobile */
  .overflow-y-auto, .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Stepper connector line centered on mobile circles */
  .stepper-line {
    top: 16px;
    left: 18px;
    right: 18px;
  }
}

@media (hover: hover) {
  .card-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 35px -10px rgba(20, 71, 42, 0.16);
    border-color: rgba(46, 155, 79, 0.4);
  }
}