/* AstroLeaf Universal Theme - Tithi Calculator Styles */

:root {
  --tithi-bg: #FAF6F0;
  --tithi-card-bg: #FFFDF9;
  --tithi-input-bg: #FFFFFF;
  --tithi-text-dark: #1E293B;
  --tithi-text-muted: #64748B;
  --tithi-brand: #65250C;
  --tithi-saffron: #D97706;
  --tithi-saffron-dark: #9A3412;
  --tithi-emerald: #059669;
  --tithi-amber: #F59E0B;
  --tithi-border: rgba(217, 119, 6, 0.22);
  --tithi-border-light: #CBD5E1;
  --tithi-card-shadow: 0 8px 30px rgba(42, 21, 10, 0.05);
}

body, .tithi-calculator-container {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  background-color: #FAF6F0 !important;
  color: #1E293B !important;
}

/* Universal Hero Header */
.tithi-hero-section {
  background: linear-gradient(135deg, #65250C 0%, #4A1A08 100%) !important;
  color: #FFFFFF !important;
  padding: 46px 20px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 3px solid #FDB861 !important;
}

.tithi-hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 840px !important;
  margin: 0 auto !important;
}

.tithi-hero-badge {
  background: rgba(253, 184, 97, 0.15) !important;
  border: 1px solid #FDB861 !important;
  color: #FFBA5F !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.tithi-hero-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: #FFBA5F !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.25 !important;
}

.tithi-hero-title span {
  color: #FFFFFF !important;
}

.tithi-hero-desc {
  font-size: 1.02rem !important;
  color: #FFE2C2 !important;
  line-height: 1.6 !important;
  margin: 0 auto 24px auto !important;
  max-width: 760px !important;
}

/* Universal Container */
.ale-container {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Universal Form Card */
.tithi-form-card,
.vng-card-wrapper,
.ale-calc-workspace .tithi-form-card {
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  box-shadow: 0 8px 30px rgba(42, 21, 10, 0.05) !important;
  margin-bottom: 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.tithi-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.tithi-form-group label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #65250C !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tithi-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.tithi-form-card .ale-input,
.tithi-form-card input[type="date"],
.tithi-form-card input[type="text"] {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  line-height: 46px !important;
  padding: 0 14px 0 40px !important;
  margin: 0 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #1E293B !important;
  background-color: #FFFFFF !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.tithi-form-card .ale-input:focus,
.tithi-form-card input[type="date"]:focus,
.tithi-form-card input[type="text"]:focus {
  border-color: #D97706 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18) !important;
}

.tithi-btn-submit-purnima,
button.tithi-btn-submit-purnima,
.tithi-btn-submit,
button.tithi-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 50px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #F97316 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease !important;
}

.tithi-btn-submit-purnima:hover,
button.tithi-btn-submit-purnima:hover {
  background: #EA580C !important;
  transform: translateY(-1px) !important;
}

/* Results Panel Grid */
.tithi-results-panel {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
}

@media (max-width: 768px) {
  .tithi-results-panel {
    grid-template-columns: 1fr !important;
  }
}

.tithi-visualizer-card {
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  color: #1E293B !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 30px rgba(42, 21, 10, 0.05) !important;
}

.tithi-moon-container {
  width: 180px !important;
  height: 180px !important;
  position: relative !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tithi-moon-glow {
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.05) 60%, transparent 75%) !important;
  z-index: 1 !important;
}

.tithi-moon-container svg {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
}

.tithi-display-name {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  color: #65250C !important;
}

.tithi-display-paksha {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.04em !important;
}

.paksha-shukla {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1px solid #D97706 !important;
  color: #B45309 !important;
}

.paksha-krishna {
  background: #F1F5F9 !important;
  border: 1px solid #94A3B8 !important;
  color: #475569 !important;
}

/* Info Cards Grid */
.tithi-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

@media (max-width: 600px) {
  .tithi-info-grid {
    grid-template-columns: 1fr !important;
  }
}

.tithi-info-card {
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.16) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 4px 16px rgba(42, 21, 10, 0.04) !important;
}

.tithi-info-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
  color: #D97706 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.tithi-info-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.tithi-info-label {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #78350F !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.tithi-info-value {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.tithi-info-desc {
  font-size: 0.78rem !important;
  color: #64748B !important;
  line-height: 1.35 !important;
}

/* Guidelines Box */
.tithi-guidelines-box {
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  box-shadow: 0 8px 30px rgba(42, 21, 10, 0.05) !important;
  margin-bottom: 28px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.tithi-guidelines-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #65250C !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tithi-guidelines-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

@media (max-width: 650px) {
  .tithi-guidelines-grid {
    grid-template-columns: 1fr !important;
  }
}

.tithi-guideline-column {
  background: #FAF6F0 !important;
  border: 1px solid rgba(217, 119, 6, 0.15) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.tithi-guideline-header {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.tithi-guideline-header.recommended {
  color: #059669 !important;
}

.tithi-guideline-header.avoid {
  color: #DC2626 !important;
}

.tithi-guideline-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tithi-guideline-list li {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: #334155 !important;
  position: relative !important;
  padding-left: 18px !important;
}

.tithi-guideline-list li::before {
  content: "•" !important;
  position: absolute !important;
  left: 4px !important;
  color: #D97706 !important;
  font-weight: bold !important;
}

/* FAQ Section */
.pkr-faq-section {
  max-width: 860px !important;
  margin: 48px auto 60px auto !important;
  padding: 0 20px !important;
  text-align: center !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.pkr-section-header {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.pkr-pill-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(217, 119, 6, 0.1) !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  color: #B45309 !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
}

.pkr-section-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #65250C !important;
  margin: 0 0 8px 0 !important;
  text-align: center !important;
}

.pkr-section-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem !important;
  color: #64748B !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.pkr-faq-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.pkr-faq-item {
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(42, 21, 10, 0.03) !important;
}

.pkr-faq-question {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  text-align: left !important;
}

.pkr-faq-answer {
  display: none !important;
  padding: 0 20px 18px 20px !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.pkr-faq-item.active .pkr-faq-answer,
.pkr-faq-item.is-active .pkr-faq-answer {
  display: block !important;
}

.pkr-faq-item.active .faq-icon,
.pkr-faq-item.is-active .faq-icon {
  transform: rotate(45deg) !important;
}

/* Articles SEO Styling */
.wy-seo-content h2.wy-article-h2 {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #65250C !important;
  margin: 0 0 12px 0 !important;
}

.wy-seo-content p {
  color: #334155 !important;
  line-height: 1.7 !important;
  font-size: 0.95rem !important;
}

.wy-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 !important;
  background: #FFFDF9 !important;
  border: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.wy-table th {
  background: #FFF7ED !important;
  color: #78350F !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid rgba(217, 119, 6, 0.22) !important;
  text-align: left !important;
}

.wy-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(217, 119, 6, 0.1) !important;
  font-size: 0.9rem !important;
  color: #334155 !important;
}

.wy-table tr:last-child td {
  border-bottom: none !important;
}