/* Age Calculator Specific Styles - Fresh Design */

/* Extended Results Sections */
.extended-section {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.extended-section.show {
  opacity: 1;
  transform: translateY(0);
}

.extended-section h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-6);
  text-align: center;
  position: relative;
}

.extended-section h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border-radius: 2px;
}

/* Grid Layouts */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.info-item {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  transition: var(--transition-slow);
  border: 1px solid var(--gray-200);
}

.info-item:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* Enhanced calculator value colors with backgrounds */
.info-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  padding: var(--space-2);
  border-radius: 6px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.info-subvalue {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: var(--space-1);
}

/* Countdown Timer with Better Colors */
.countdown-section {
  background: white;
  border-radius: 4px;
  padding: var(--space-8);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  text-align: center;
}

.countdown-item {
  background: var(--gray-50);
  border-radius: 8px;
  padding: var(--space-4);
  text-align: center;
  border: 2px solid var(--gray-200);
  transition: all 0.3s ease;
}

.countdown-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.countdown-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  padding: var(--space-3);
  border-radius: 8px;
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Enhanced countdown colors with better visibility */
#countdownDays {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

#countdownHours {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

#countdownMinutes {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

#countdownSeconds {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Special Sections */
.planet-section {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: white;
}

.planet-section h3::after {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.moon-section {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
}

.moon-section h3::after {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.biological-section {
  background: linear-gradient(135deg, var(--success), #16a34a);
  color: white;
}

.biological-section h3::after {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}

/* Calculator Value Specific Colors */
#primaryAge {
  color: white;
}

#totalMonths {
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
  font-weight: 700;
}

#totalWeeks {
  background: linear-gradient(135deg, #fff7ed, #fed7aa) !important;
  color: #ea580c !important;
  border: 1px solid #fdba74;
  font-weight: 700;
}

#totalDays {
  background: linear-gradient(135deg, #fefce8, #fef3c7) !important;
  color: #ca8a04 !important;
  border: 1px solid #fde047;
  font-weight: 700;
}

#totalHours {
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
  font-weight: 700;
}

#totalMinutes {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0;
  font-weight: 700;
}

#totalSeconds {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  color: #2563eb !important;
  border: 1px solid #93c5fd;
  font-weight: 700;
}

#breaths {
  background: linear-gradient(135deg, #faf5ff, #e9d5ff) !important;
  color: #7c3aed !important;
  border: 1px solid #c4b5fd;
  font-weight: 700;
}

#heartbeats {
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
  font-weight: 700;
}

#laughing {
  color: #059669 !important;
  font-weight: 700;
} /* Emerald */

#sleeping {
  color: #4338ca !important;
  font-weight: 700;
} /* Indigo */

#blinks {
  color: #c2410c !important;
  font-weight: 700;
} /* Orange */

#wordsSpoken {
  color: #be185d !important;
  font-weight: 700;
} /* Pink */

#bloodPumped {
  color: #dc2626 !important;
  font-weight: 700;
} /* Red */

#mealsEaten {
  color: #16a34a !important;
  font-weight: 700;
} /* Green */

#mercuryAge {
  color: #f59e0b !important;
  font-weight: 700;
} /* Amber */

#venusAge {
  color: #ef4444 !important;
  font-weight: 700;
} /* Red */

#marsAge {
  color: #dc2626 !important;
  font-weight: 700;
} /* Dark Red */

#jupiterAge {
  color: #f97316 !important;
  font-weight: 700;
} /* Orange */

#saturnAge {
  color: #eab308 !important;
  font-weight: 700;
} /* Yellow */

#uranusAge {
  color: #06b6d4 !important;
  font-weight: 700;
} /* Cyan */

#neptuneAge {
  color: #3b82f6 !important;
  font-weight: 700;
} /* Blue */

#countdownDays {
  color: white !important;
  font-weight: 700;
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
} /* Red */

#countdownHours {
  color: white !important;
  font-weight: 700;
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
} /* Orange */

#countdownMinutes {
  color: white !important;
  font-weight: 700;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
} /* Green */

#countdownSeconds {
  color: white !important;
  font-weight: 700;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
} /* Blue */

#nextBirthday {
  color: #7c3aed !important;
  font-weight: 700;
} /* Purple */

#daysUntilBirthday {
  color: #dc2626 !important;
  font-weight: 700;
} /* Red */

#bornOn {
  color: #059669 !important;
  font-weight: 700;
} /* Emerald */

#leapYear {
  color: #2563eb !important;
  font-weight: 700;
} /* Blue */

#decades {
  color: #7c3aed !important;
  font-weight: 700;
} /* Purple */

#totalLeapYears {
  color: #ea580c !important;
  font-weight: 700;
} /* Orange */

#zodiacSign {
  color: #be185d !important;
  font-weight: 700;
} /* Pink */

#chineseZodiac {
  color: #dc2626 !important;
  font-weight: 700;
} /* Red */

#birthstone {
  color: #7c3aed !important;
  font-weight: 700;
} /* Purple */

#birthFlower {
  color: #059669 !important;
  font-weight: 700;
} /* Emerald */

#generation {
  color: #2563eb !important;
  font-weight: 700;
} /* Blue */

#lifePathNumber {
  color: #ea580c !important;
  font-weight: 700;
} /* Orange */

#skinCellsRegenerated {
  color: #16a34a !important;
  font-weight: 700;
} /* Green */

#redBloodCellsReplaced {
  color: #dc2626 !important;
  font-weight: 700;
} /* Red */

/* Fix z-index and positioning issues for input forms and buttons */
.form-input {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  width: 100%;
  cursor: pointer;
}

.form-input:focus {
  z-index: 15;
}

.calculate-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
}

.calculate-btn:hover {
  z-index: 15;
}

.calculate-btn:disabled {
  pointer-events: none;
}

/* Ensure form elements are fully clickable */
.form-group {
  position: relative;
  z-index: 5;
}

.calculator-form {
  position: relative;
  z-index: 5;
}

/* Fix any overlapping elements that might block clicks */
.hero-features {
  position: relative;
  z-index: 1;
}

.calculator-header {
  position: relative;
  z-index: 1;
}

/* Section Background Styles */
.section-white {
  background: white;
  padding: var(--space-8);
  margin: var(--space-6) 0;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.section-hero-bg {
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
  padding: var(--space-8);
  margin: var(--space-6) 0;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.section-hero-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230ea5e9' fill-opacity='0.03'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    repeat;
  z-index: 1;
}

.section-hero-bg > * {
  position: relative;
  z-index: 2;
}

/* Override existing extended-section styles to work with new classes */
.extended-section.section-white,
.extended-section.section-hero-bg {
  border-radius: 4px;
}

.facts-section.section-hero-bg {
  border-radius: 4px;
}

.content-sections.section-white,
.content-sections.section-hero-bg {
  border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .extended-section {
    padding: var(--space-6);
    margin: var(--space-4) var(--space-2);
  }

  .countdown-section {
    padding: var(--space-6);
    margin: var(--space-4) var(--space-2);
  }

  .section-white,
  .section-hero-bg {
    padding: var(--space-6);
    margin: var(--space-4) var(--space-2);
  }
}

@media (max-width: 480px) {
  .countdown-grid {
    grid-template-columns: 1fr;
  }

  .info-value {
    font-size: 1.125rem;
  }

  .countdown-value {
    font-size: 1.25rem;
  }

  .info-value {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  .countdown-value {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
}

/* Animation Delays */
.extended-section:nth-child(1) {
  transition-delay: 0.1s;
}
.extended-section:nth-child(2) {
  transition-delay: 0.2s;
}
.extended-section:nth-child(3) {
  transition-delay: 0.3s;
}
.extended-section:nth-child(4) {
  transition-delay: 0.4s;
}
.extended-section:nth-child(5) {
  transition-delay: 0.5s;
}
.extended-section:nth-child(6) {
  transition-delay: 0.6s;
}