/* 
 * Section Color Enhancement - v1
 * Adds vibrant, animated gradients and visual flair to every landing section
 * Loaded after main CSS to override/enhance existing section styles
 *
 * Color palette per section:
 *   Hero        → blue → teal → purple (already done in hero-enhancement.css)
 *   Doctors     → indigo → violet → purple
 *   Trust Stats → cyan → teal → emerald
 *   Classroom   → amber → orange → rose
 *   Chamber     → emerald → teal → cyan
 *   Appointments → violet → indigo → blue
 *   CV          → pink → rose → fuchsia
 *   Footer      → slate → navy with gradient accent
 */

/* ─── Shared Utility Animations ────────────────────────────────────────── */

@keyframes sectionGradientShift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes sectionShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes sectionFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sectionPulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255,255,255,0.1); }
  50%      { box-shadow: 0 0 30px rgba(255,255,255,0.25); }
}

/* ─── 1. HEADER / NAVBAR ENHANCEMENT ────────────────────────────────── */

header.sticky {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.95)) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

header.sticky nav button {
  color: rgba(255, 255, 255, 0.75) !important;
}

header.sticky nav button:hover {
  color: #fff !important;
  background: rgba(99, 102, 241, 0.2) !important;
}

/* ─── 2. DOCTORS / "Meet Our Consultants" SECTION ───────────────────── */

[id="home"] {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c0a3e 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle dot pattern overlay */
[id="home"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
}

/* Gradient glow orbs */
[id="home"]::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
  bottom: -200px;
  left: -200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: sectionPulseGlow 6s ease-in-out infinite;
}

[id="home"] > div {
  position: relative !important;
  z-index: 2 !important;
}

/* Section badge */
[id="home"] .inline-flex.items-center.gap-2.bg-primary\\/10 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25)) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #a5b4fc !important;
}

[id="home"] h2 {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 50%, #e9d5ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% auto !important;
  animation: sectionShimmer 4s linear infinite !important;
}

[id="home"] > div > p.text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Doctor cards in dark section */
[id="home"] .card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.4s ease !important;
}

[id="home"] .card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 8px 40px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-4px) !important;
}

[id="home"] .card h2 {
  background: linear-gradient(135deg, #e2e8f0, #c7d2fe) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[id="home"] .card .text-muted-foreground {
  color: rgba(255, 255, 255, 0.55) !important;
}

[id="home"] .card .text-primary {
  color: #818cf8 !important;
}

/* ─── 3. TRUST SIGNALS / STATS SECTION ──────────────────────────────── */

[data-ocid="landing.trust_signals.section"] {
  background: linear-gradient(-45deg, #0f766e, #0d9488, #059669, #0891b2, #0e7490) !important;
  background-size: 400% 400% !important;
  animation: sectionGradientShift 12s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Geometric pattern overlay */
[data-ocid="landing.trust_signals.section"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  pointer-events: none;
  z-index: 1;
}

[data-ocid="landing.trust_signals.section"] > div {
  position: relative !important;
  z-index: 2 !important;
}

/* Stats cards with glassmorphism */
[data-ocid="landing.trust_signals.section"] .grid > div {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-ocid="landing.trust_signals.section"] .grid > div:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-ocid="landing.trust_signals.section"] .grid > div .text-blue-700 {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-ocid="landing.trust_signals.section"] .grid > div .text-muted-foreground {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Description text */
[data-ocid="landing.trust_signals.section"] .max-w-2xl {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* Affiliation badges with glassmorphism */
[data-ocid="landing.trust_signals.section"] span.px-3 {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

[data-ocid="landing.trust_signals.section"] span.px-3:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Specialty badges */
[data-ocid="landing.trust_signals.section"] .rounded-full.text-primary {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: white !important;
  backdrop-filter: blur(8px) !important;
}

/* ─── 4. CLASSROOM SECTION ──────────────────────────────────────────── */

[data-ocid="landing.classroom.section"] {
  background: linear-gradient(135deg, #1c1917 0%, #292524 30%, #1c1917 60%, #292524 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Warm amber glow */
[data-ocid="landing.classroom.section"]::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
  animation: sectionPulseGlow 7s ease-in-out infinite;
}

[data-ocid="landing.classroom.section"] > div {
  position: relative !important;
  z-index: 2 !important;
}

[data-ocid="landing.classroom.section"] h2 {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% auto !important;
  animation: sectionShimmer 4s linear infinite !important;
}

[data-ocid="landing.classroom.section"] .text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Classroom tabs */
[data-ocid="landing.classroom.section"] [role="tablist"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

[data-ocid="landing.classroom.section"] [role="tab"] {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

[data-ocid="landing.classroom.section"] [role="tab"][data-state="active"] {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

[data-ocid="landing.classroom.section"] [role="tab"]:hover:not([data-state="active"]) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Classroom content cards */
[data-ocid="landing.classroom.section"] .card {
  background: linear-gradient(145deg, rgba(41, 37, 36, 0.95), rgba(28, 25, 23, 0.95)) !important;
  border-color: rgba(251, 191, 36, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(8px) !important;
}

/* ─── 5. CHAMBER SECTION ────────────────────────────────────────────── */

#chamber {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 30%, #022c22 60%, #065f46 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Emerald light effect */
#chamber::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
  bottom: -150px;
  left: -150px;
  border-radius: 50%;
  pointer-events: none;
  animation: sectionPulseGlow 8s ease-in-out infinite;
}

#chamber > div {
  position: relative !important;
  z-index: 2 !important;
}

#chamber h2 {
  background: linear-gradient(135deg, #6ee7b7 0%, #34d399 50%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% auto !important;
  animation: sectionShimmer 4s linear infinite !important;
}

#chamber .text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Chamber cards - the gradient headers are already colorful, enhance the card body */
#chamber .card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.4s ease !important;
}

#chamber .card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Chamber "Find Near Me" button */
#chamber Button.gap-2 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

#chamber Button.gap-2:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.35)) !important;
}

/* ─── 6. APPOINTMENTS / BOOKING SECTION (unchanged, kept as default) ── */

/* ─── 7. CV SECTION ─────────────────────────────────────────────────── */

[id="cv"] {
  background: linear-gradient(135deg, #1f0f1f 0%, #2d1b2e 30%, #1f0f1f 60%, #3b1f3b 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Fuschia/pink glow */
[id="cv"]::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(232, 121, 249, 0.08) 0%, transparent 70%);
  top: -80px;
  right: -80px;
  border-radius: 50%;
  pointer-events: none;
  animation: sectionPulseGlow 6s ease-in-out infinite;
}

[id="cv"] > div {
  position: relative !important;
  z-index: 2 !important;
}

[id="cv"] h2 {
  background: linear-gradient(135deg, #f5d0fe 0%, #e879f9 50%, #d946ef 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% auto !important;
  animation: sectionShimmer 4s linear infinite !important;
}

[id="cv"] .text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* CV tabs */
[id="cv"] [role="tablist"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[id="cv"] [role="tab"] {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

[id="cv"] [role="tab"][data-state="active"] {
  background: linear-gradient(135deg, #d946ef, #e879f9) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3) !important;
}

/* CV card */
[id="cv"] .card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(217, 70, 239, 0.15) !important;
  transition: all 0.4s ease !important;
}

[id="cv"] .card:hover {
  border-color: rgba(217, 70, 239, 0.3) !important;
  box-shadow: 0 8px 30px rgba(217, 70, 239, 0.1) !important;
}

[id="cv"] .card .text-foreground {
  color: rgba(255, 255, 255, 0.9) !important;
}

[id="cv"] .card .text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}

[id="cv"] .card .border-rose-200 {
  border-color: rgba(244, 114, 182, 0.25) !important;
}

/* ─── 8. FOOTER ENHANCEMENT ─────────────────────────────────────────── */

[data-ocid="landing.footer.section"] {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #0f172a 50%, #1e293b 75%, #0f172a 100%) !important;
  background-size: 200% 200% !important;
  animation: sectionGradientShift 20s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle top glow line */
[data-ocid="landing.footer.section"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.5), transparent);
}

/* Blue accent for footer heading */
[data-ocid="landing.footer.section"] .bg-blue-600 {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}

/* Footer quick links hover */
[data-ocid="landing.footer.section"] button.text-slate-300,
[data-ocid="landing.footer.section"] a.text-slate-300 {
  transition: all 0.3s ease !important;
}

[data-ocid="landing.footer.section"] button.text-slate-300:hover,
[data-ocid="landing.footer.section"] a.text-slate-300:hover {
  color: #a5b4fc !important;
  transform: translateX(4px) !important;
}

/* Footer social links */
[data-ocid="landing.footer.section"] a.text-blue-300 {
  transition: all 0.3s ease !important;
}

[data-ocid="landing.footer.section"] a.text-blue-300:hover {
  color: #fbbf24 !important;
  transform: translateY(-2px) !important;
}

/* ─── 9. WHATSAPP FAB BUTTON ────────────────────────────────────────── */

.fixed.bottom-4.right-4.z-50 {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4) !important;
  animation: sectionPulseGlow 3s ease-in-out infinite !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.fixed.bottom-4.right-4.z-50:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 30px rgba(5, 150, 105, 0.5) !important;
}

/* ─── 10. BOOK APPOINTMENT BUTTONS - ORANGE/RED THEME ──────────────── */

/* Hero primary CTA (Book Appointment) */
[data-ocid="hero.book_appointment.primary_button"] {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  animation: heroGlow 3s ease-in-out infinite !important;
}

[data-ocid="hero.book_appointment.primary_button"]:hover {
  background: linear-gradient(135deg, #c2410c, #ea580c) !important;
  box-shadow: 0 8px 32px rgba(234, 88, 12, 0.45) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

[data-ocid="hero.book_appointment.primary_button"] svg {
  color: white !important;
}

/* Doctor card "Book Appointment" buttons */
[id="home"] .card button:not([data-ocid]) {
  /* These are the Book Appointment / View CV buttons in doctor cards */
}

[id="home"] .card .flex-1.text-center.py-2.rounded-lg.text-sm.font-semibold:first-child,
[id="home"] .card button:has(> svicns:first-child) {
  /* General targeting for doctor action buttons */
}

[id="home"] .card .rounded-lg.text-sm.font-semibold {
  /* Make all doctor card action buttons more visible */
}

/* Specifically target the Book Appointment text inside doctor cards */
[id="home"] .card button:has(svg + span) {
  /* Book Appointment buttons inside doctor cards */
}

[id="home"] .card button:nth-child(1).flex-1 {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.25) !important;
  transition: all 0.3s ease !important;
}

[id="home"] .card button:nth-child(1).flex-1:hover {
  background: linear-gradient(135deg, #c2410c, #ea580c) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ─── 10. RESPONSIVE TWEAKS ─────────────────────────────────────────── */

@media (max-width: 640px) {
  [data-ocid="landing.classroom.section"],
  #chamber,
  [id="booking-section"],
  [id="cv"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [data-ocid="landing.trust_signals.section"] .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}