/* ==========================================================================
   Dr. Athira's Nethra Sanjeevani - Ayurvedic Design System & Stylesheet
   Color Identity: Teal (#007D82), Radiant Gold (#FFC904), Herbal Cream (#FAF7F2)
   ========================================================================== */

:root {
  --color-primary: #007D82;
  --color-primary-dark: #004D50;
  --color-primary-deep: #003638;
  --color-primary-light: #E6F4F5;
  --color-primary-subtle: #F0F9F9;
  
  --color-gold: #FFC904;
  --color-gold-dark: #D9A800;
  --color-gold-deep: #9B7600;
  --color-gold-light: #FFF9E6;
  --color-gold-glow: rgba(255, 201, 4, 0.28);
  
  --color-cream: #FAF7F2;
  --color-cream-tint: #F3EEE4;
  --color-card-bg: #FFFFFF;
  --color-dark: #142224;
  --color-dark-soft: #233739;
  --color-body: #4A5D60;
  --color-border: #E8E2D5;
  --color-border-teal: #C2E4E6;

  --font-serif: 'Playfair Display', 'Cinzel', 'Marcellus', Georgia, serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Marcellus', 'Cinzel', serif;
  --font-cursive: 'Alex Brush', 'Great Vibes', cursive;
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--color-body);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  background-color: var(--color-cream);
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-serif);
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

.font-accent {
  font-family: var(--font-accent);
}

.font-display {
  font-family: var(--font-display);
}

.font-cursive {
  font-family: var(--font-cursive);
}

/* Hero Typography Enhancements */
.hero-tagline-badge {
  background: linear-gradient(135deg, rgba(20, 34, 36, 0.75) 0%, rgba(0, 125, 130, 0.45) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 201, 4, 0.35);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.hero-title-friendly {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}

.hero-title-display {
  font-family: 'Marcellus', 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
  line-height: 1.15;
}

.hero-title-playfair {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

.hero-highlight-gold {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, #FFF5D1 0%, #FFC904 40%, #FFE885 70%, #E5B200 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
  line-height: 1.15;
}

.hero-highlight-cursive {
  font-family: 'Alex Brush', 'Great Vibes', cursive;
  font-weight: 400;
  background: linear-gradient(135deg, #FFF9E6 0%, #FFC904 50%, #FFD74D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
  font-size: 1.25em;
  line-height: 1.0;
}

.hero-highlight-emerald {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, #A7F3D0 0%, #34D399 35%, #FFC904 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
}

/* Ayurvedic Motif Backgrounds */
.bg-mandala-pattern {
  background-color: var(--color-cream);
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 125, 130, 0.04) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0c2 10 10 18 20 20-10 2-18 10-20 20-2-10-10-18-20-20 10-2 18-10 20-20z' fill='%23007D82' fill-opacity='0.025' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-dark-mandala {
  background-color: var(--color-dark);
  background-image: radial-gradient(circle at 20% 20%, rgba(0, 125, 130, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 201, 4, 0.12) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0 C45 18 62 35 80 40 C62 45 45 62 40 80 C35 62 18 45 0 40 C18 35 35 18 40 0 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
}

.bg-teal-gradient {
  background: linear-gradient(135deg, #005E63 0%, #007D82 60%, #048C92 100%);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #FFC904 0%, #F5B300 100%);
}

/* Ayurvedic Ornamental Dividers */
.ayurveda-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem 0;
}

.ayurveda-divider::before,
.ayurveda-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(0, 125, 130, 0.25), transparent);
}

.ayurveda-divider.gold::before,
.ayurveda-divider.gold::after {
  background: linear-gradient(90deg, transparent, rgba(255, 201, 4, 0.4), transparent);
}

/* Ayurvedic Pill Tag */
.ayur-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  background: var(--color-gold);
  color: #142224;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(255, 201, 4, 0.25);
}

.ayur-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.775rem;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 600;
  padding: 0.875rem 1.875rem;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 125, 130, 0.25);
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 125, 130, 0.35);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--color-gold);
  color: #142224;
  font-weight: 700;
  padding: 0.875rem 1.875rem;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(255, 201, 4, 0.35);
  text-decoration: none;
}

.btn-gold:hover {
  background-color: #f0be00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 201, 4, 0.45);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: 600;
  padding: 0.775rem 1.75rem;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Card hover animations & shadows */
.ayur-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  border: 1px solid var(--color-border);
  transition: all 0.35s ease;
  overflow: hidden;
}

.ayur-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 125, 130, 0.3);
  box-shadow: 0 16px 32px -8px rgba(0, 77, 80, 0.1);
}

/* Floating animation for leaf/herbal elements */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

.animate-float {
  animation: floatGentle 5s ease-in-out infinite;
}

@keyframes pulseGoldGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 201, 4, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 201, 4, 0);
  }
}

.pulse-gold {
  animation: pulseGoldGlow 2.5s infinite;
}

/* Sticky Navbar Glassmorphism */
.navbar-glass {
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 226, 213, 0.8);
  transition: all 0.3s ease;
}

.navbar-scrolled {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

/* Modal Styles */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.modal-content {
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #F1ECE2;
}
::-webkit-scrollbar-thumb {
  background: #007D82;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #004D50;
}

/* Tab active indicator */
.therapy-tab.active {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 125, 130, 0.25);
}

/* Floating Action Buttons */
.floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.floating-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.floating-btn:hover {
  transform: scale(1.1);
}

.floating-btn.whatsapp {
  background: #25D366;
}

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

.floating-btn.top {
  background: var(--color-dark);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.floating-btn.top.show {
  opacity: 1;
  pointer-events: auto;
}