/* ══════════════════════════════════════════
   All Calculators: Layout & Panel Switching
   ══════════════════════════════════════════ */

.bs-all-calculators {
  font-family: Inter, sans-serif;
  max-width: 100%;
  margin: 20px auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #D0D5DD;
  background: #fff;
}

/* ── Override mc-wrapper inside all-calculators ── */
.bs-all-calculators .mc-wrapper {
  border-radius: 0;
}

/* Restore form panel top padding — switcher is now inside the form */
.bs-all-calculators .mc-form-panel {
  padding-top: 40px;
}

/* ── Panels (show/hide with smooth crossfade) ── */
.bs-calculators-panels {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bs-calculator-panel {
  display: none;
}

.bs-calculator-panel.is-active {
  display: block;
}


/* ── Standalone calculator margin suppression ── */
.bs-all-calculators .bs-calculator {
  margin: 0;
}

/* ══════════════════════════════════════════
   Mobile: Standard flex column layout
   (replaces display:contents approach)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .bs-all-calculators {
    display: flex;
    flex-direction: column;
  }

  .bs-all-calculators .mc-wrapper {
    flex-direction: column;
  }

}