/* =============================================================
   CURA CAPITAL — Calculators Page Styles (calculators.css)
   Sections: tab nav, calculator panels, sliders, result box
   ============================================================= */

/* ─── CALCULATOR LAYOUT ───────────────────────────────────── */

.calculators-wrap {
  max-width: 860px;
  margin-inline: auto;
}

/* ─── TAB NAVIGATION ──────────────────────────────────────── */

.calc-tabs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.calc-tab-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-primary);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  border-radius: var(--border-radius-btn) var(--border-radius-btn) 0 0;
}

.calc-tab-btn:hover {
  color: var(--color-primary);
}

.calc-tab-btn.active,
.calc-tab-btn[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

[data-theme="dark"] .calc-tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ─── CALCULATOR PANELS ───────────────────────────────────── */

.calc-panel {
  display: none;
}

.calc-panel.active {
  display: block;
}

.calc-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 767px) {
  .calc-panel-inner { grid-template-columns: 1fr; }
}

/* ─── SLIDER GROUP ────────────────────────────────────────── */

.slider-group {
  margin-bottom: var(--space-lg);
}

.slider-group:last-child { margin-bottom: 0; }

.slider-group__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.slider-group__label label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-body);
}

/* Number input + unit wrapper (replaces old __value span) */
.slider-group__num-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
}

.slider-group__num {
  width: 72px;
  padding: 3px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-btn);
  background: var(--bg-base);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: right;
  -moz-appearance: textfield;
  transition: border-color var(--transition-fast), outline var(--transition-fast);
}

.slider-group__num::-webkit-outer-spin-button,
.slider-group__num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider-group__num:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: transparent;
}

[data-theme="dark"] .slider-group__num {
  background: var(--bg-card);
  color: var(--color-accent);
}

.slider-group__unit {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

[data-theme="dark"] .slider-group__unit { color: var(--color-accent); }

/* Reset button */
.calc-reset-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
  transition: color var(--transition-fast);
}

.calc-reset-btn:hover,
.calc-reset-btn:focus-visible {
  color: var(--color-primary);
  outline: none;
  text-decoration: underline;
}

/* Range input */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--color-accent) 0%,
    var(--color-accent) var(--fill-pct, 50%),
    var(--border-color) var(--fill-pct, 50%),
    var(--border-color) 100%
  );
  outline: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

input[type="range"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 2px var(--color-accent);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 3px solid var(--bg-base);
  cursor: pointer;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(61, 155, 233, 0.25);
  transform: scale(1.1);
}

.slider-group__limits {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.slider-group__limits span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── RESULT BOX ──────────────────────────────────────────── */

.calc-result {
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-card);
  padding: var(--space-lg);
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.calc-result__headline {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.calc-result__big {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

[data-theme="dark"] .calc-result__big { color: var(--color-accent); }

.calc-result__big-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.calc-result__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-md);
}

.calc-result__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.calc-result__row span:first-child { color: var(--text-muted); }
.calc-result__row span:last-child  { font-weight: 700; color: var(--text-heading); }

/* SVG Donut Chart */
.calc-donut {
  display: block;
  width: 120px;
  height: 120px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.calc-donut__bg { fill: none; stroke: var(--border-color); stroke-width: 10; }
.calc-donut__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 100;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.6s ease;
}

.calc-result__cta { width: 100%; }

/* ─── CALCULATOR TABS — MOBILE OVERRIDES ─────────────────── */
/* Desktop retains the underline-tab style above.
   On mobile the four tabs collapse into a 2×2 pill-button grid
   so each option is clearly tappable and equally sized.          */

@media (max-width: 767px) {
  .calc-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    border-bottom: none;                /* remove desktop rule line — not needed for grid layout */
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .calc-tab-btn {
    padding: 10px 8px;
    text-align: center;
    font-size: 0.85rem;
    /* Replace desktop underline style with visible pill-button */
    border: 1.5px solid var(--border-color);
    border-bottom: 1.5px solid var(--border-color); /* reset the desktop -2px margin trick */
    border-radius: var(--border-radius-btn);
    margin-bottom: 0;                   /* reset desktop offset */
    background-color: var(--bg-card);
    color: var(--text-body);
    width: 100%;                        /* fill grid cell */
  }

  .calc-tab-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
  }

  /* Active / selected tab: filled pill */
  .calc-tab-btn.active,
  .calc-tab-btn[aria-selected="true"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    color: #fff;
  }

  [data-theme="dark"] .calc-tab-btn {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-body);
  }

  [data-theme="dark"] .calc-tab-btn.active,
  [data-theme="dark"] .calc-tab-btn[aria-selected="true"] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--bg-base);
  }
}

/* ─── SEBI DISCLAIMER ─────────────────────────────────────── */

.calc-disclaimer {
  margin-top: var(--space-md);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-sm);
}