/* Calculators (/calculators/*). Previously these pages loaded only
   content.css and borrowed .sign-hero (built for zodiac sign pages) plus raw
   Bootstrap defaults everywhere else - this is their own stylesheet, in the
   same dusk-gradient language as panchang.css so the family reads as a
   distinct FutureBatao product rather than a generic article page. */

.calc-hero {
  position: relative; overflow: hidden; color: #fff;
  padding-block: var(--s-5) clamp(2.75rem, 6vw, 4rem);
  background: var(--g-dusk);
}
.calc-hero > .container-fb { position: relative; z-index: 2; }
.calc-hero .astro-tag { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .92); }
.calc-hero__name { color: #fff; }
.calc-hero__dates { color: rgba(255, 255, 255, .82); max-width: 60ch; }

/* Result panel  -  a real component instead of a raw <table> in a beige box. */
#calcResult {
  background: #fff !important;
  border: 1px solid var(--c-line) !important;
  box-shadow: 0 10px 30px rgba(43, 20, 60, .08);
}
#calcResult #resBadge { background: var(--c-yellow-400) !important; }
#calcResult table th, #calcResult table td { border-color: var(--c-line); }
#calcResult #resRemediesWrap { border-color: var(--c-line) !important; background: var(--c-yellow-50, #FFF6E6) !important; }

/* FAQ  -  native <details>/<summary>, no JS dependency (the old Bootstrap
   accordion markup here never worked: bootstrap.bundle.js is not loaded
   anywhere on the site, so data-bs-toggle="collapse" was inert and every FAQ
   answer was permanently invisible). */
.calc-faq-list { display: flex; flex-direction: column; gap: var(--s-2, .5rem); }
.calc-faq {
  border: 1px solid var(--c-line); border-radius: var(--r-md, 12px);
  background: #fff; overflow: hidden;
}
.calc-faq summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-weight: 600; color: var(--c-plum-900, #2B2C33);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.calc-faq summary::-webkit-details-marker { display: none; }
.calc-faq summary::after {
  content: "+"; font-size: 1.3rem; line-height: 1; color: var(--c-ink-soft, #5A5B64);
  transition: transform .15s ease;
}
.calc-faq[open] summary::after { transform: rotate(45deg); }
.calc-faq__body {
  padding: 0 18px 16px; color: var(--c-ink-soft, #5A5B64); font-size: var(--fs-sm, .9rem);
}