/* ============================================================
   Sagittarius Calculator X — Frontend Styles v2.0
   Author: Eddie-Designs Pro
   ============================================================ */

/* ── Google Font: Gobold via @import fallback (hosted CDN) ── */
@import url('https://fonts.cdnfonts.com/css/gobold');

/* ── CSS Variables ─────────────────────────────────────────── */
.scx-calculator-wrapper {
  --scx-primary:      #1e3f75;
  --scx-secondary:    #264f93;
  --scx-btn-text:     #ffffff;
  --scx-radius:       12px;
  --scx-radius-lg:    18px;
  --scx-radius-sm:    8px;
  --scx-shadow:       0 4px 24px rgba(30,63,117,.13);
  --scx-shadow-lg:    0 8px 40px rgba(30,63,117,.18);
  --scx-border:       #e2e8f3;
  --scx-bg:           #f7f9fd;
  --scx-card:         #ffffff;
  --scx-text:         #1a2540;
  --scx-text-muted:   #6b7a9c;
  --scx-input-bg:     #f0f4fb;
  --scx-input-border: #c9d4e8;
  --scx-success:      #22c55e;
  --scx-warning:      #f59e0b;
  --scx-chart-1:      #1e3f75;
  --scx-chart-2:      #264f93;
  --scx-chart-3:      #3b70c4;
  --scx-chart-4:      #64a0e8;
  --scx-chart-5:      #a5c3f0;
  --scx-transition:   all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ───────────────────────────────────────────────── */
.scx-calculator-wrapper {
  font-family: 'Lora', Georgia, serif;
  color: var(--scx-text);
  background: var(--scx-bg);
  border-radius: var(--scx-radius-lg);
  box-shadow: var(--scx-shadow-lg);
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

/* ── Group Navigation ──────────────────────────────────────── */
.scx-group-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--scx-primary);
  padding: 10px 12px 0;
  border-bottom: none;
}

.scx-group-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: var(--scx-radius) var(--scx-radius) 0 0;
  color: rgba(255,255,255,.75);
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: var(--scx-transition);
  white-space: nowrap;
  position: relative;
  bottom: 0;
}

.scx-group-tab:hover {
  background: rgba(255,255,255,.2);
  color: #ffffff;
  transform: translateY(-2px);
}

.scx-group-tab.is-active {
  background: var(--scx-card);
  color: var(--scx-primary);
  box-shadow: 0 -2px 0 var(--scx-secondary) inset;
  font-weight: 700;
}

.scx-tab-icon { font-size: 16px; }
.scx-tab-label { font-size: 11.5px; }

/* ── Group Panel ───────────────────────────────────────────── */
.scx-group-panel {
  display: none;
  background: var(--scx-card);
  border-radius: 0 0 var(--scx-radius-lg) var(--scx-radius-lg);
  animation: scxFadeIn .3s ease;
}
.scx-group-panel.is-active { display: block; }

@keyframes scxFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Calc Sub-nav ──────────────────────────────────────────── */
.scx-calc-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--scx-border);
  background: #fafbff;
}

.scx-calc-tab {
  padding: 7px 14px;
  font-family: 'Lora', Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--scx-text-muted);
  background: var(--scx-input-bg);
  border: 1.5px solid var(--scx-input-border);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--scx-transition);
  white-space: nowrap;
}
.scx-calc-tab:hover {
  border-color: var(--scx-secondary);
  color: var(--scx-secondary);
  background: rgba(38,79,147,.07);
}
.scx-calc-tab.is-active {
  background: var(--scx-primary);
  border-color: var(--scx-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(30,63,117,.25);
}

/* ── Calculator Frame ──────────────────────────────────────── */
.scx-calc-frame {
  display: none;
  animation: scxFadeIn .25s ease;
}
.scx-calc-frame.is-active { display: block; }

.scx-frame-header {
  background: linear-gradient(135deg, var(--scx-primary) 0%, var(--scx-secondary) 100%);
  padding: 22px 28px 18px;
}
.scx-frame-title {
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: .3px;
}

.scx-frame-body { padding: 24px 28px; }

/* ── Inputs Area ───────────────────────────────────────────── */
.scx-inputs-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.scx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scx-field label {
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--scx-primary);
}

.scx-field input,
.scx-field select {
  padding: 11px 14px;
  background: var(--scx-input-bg);
  border: 1.5px solid var(--scx-input-border);
  border-radius: var(--scx-radius-sm);
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  color: var(--scx-text);
  transition: var(--scx-transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.scx-field input:focus,
.scx-field select:focus {
  border-color: var(--scx-secondary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(38,79,147,.12);
}

.scx-field input::placeholder { color: #b0bbd4; }

.scx-field-hint {
  font-size: 11px;
  color: var(--scx-text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* ── Action Bar (Buttons) ──────────────────────────────────── */
.scx-action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

.scx-btn {
  padding: 13px 32px;
  border: none;
  border-radius: var(--scx-radius);
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;
  transition: var(--scx-transition);
  position: relative;
  overflow: hidden;
}

.scx-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .2s;
}
.scx-btn:active::after { opacity: 1; }

.scx-btn-calculate {
  background: var(--scx-primary);
  color: var(--scx-btn-text);
  box-shadow: 0 4px 14px rgba(30,63,117,.3);
  flex: 1;
}
.scx-btn-calculate:hover {
  background: var(--scx-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(38,79,147,.35);
}
.scx-btn-calculate:active {
  background: var(--scx-primary);
  transform: translateY(0);
}

.scx-btn-reset {
  background: #ffffff;
  color: var(--scx-primary);
  border: 2px solid var(--scx-input-border);
  box-shadow: none;
}
.scx-btn-reset:hover {
  border-color: var(--scx-primary);
  background: var(--scx-input-bg);
  transform: translateY(-2px);
}

/* ── Results Area ──────────────────────────────────────────── */
.scx-results-area {
  margin-top: 24px;
  animation: scxFadeIn .3s ease;
}

.scx-results-explanation {
  background: linear-gradient(135deg, rgba(30,63,117,.05) 0%, rgba(38,79,147,.08) 100%);
  border-left: 4px solid var(--scx-primary);
  border-radius: 0 var(--scx-radius) var(--scx-radius) 0;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--scx-text);
}
.scx-results-explanation h4 {
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--scx-primary);
  margin: 0 0 8px;
  text-transform: uppercase;
}

/* ── Summary Cards ─────────────────────────────────────────── */
.scx-results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.scx-summary-card {
  background: var(--scx-card);
  border: 1.5px solid var(--scx-border);
  border-radius: var(--scx-radius);
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(30,63,117,.07);
  transition: var(--scx-transition);
  animation: scxCardIn .3s ease both;
}
.scx-summary-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--scx-shadow);
  border-color: var(--scx-secondary);
}

@keyframes scxCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scx-summary-card:nth-child(1) { animation-delay: .05s; }
.scx-summary-card:nth-child(2) { animation-delay: .10s; }
.scx-summary-card:nth-child(3) { animation-delay: .15s; }
.scx-summary-card:nth-child(4) { animation-delay: .20s; }
.scx-summary-card:nth-child(5) { animation-delay: .25s; }

.scx-summary-label {
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--scx-text-muted);
  margin-bottom: 6px;
}
.scx-summary-value {
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--scx-primary);
  line-height: 1.1;
}
.scx-summary-sub {
  font-size: 11px;
  color: var(--scx-text-muted);
  margin-top: 3px;
}

/* ── Chart ─────────────────────────────────────────────────── */
.scx-chart-wrapper {
  background: var(--scx-card);
  border: 1.5px solid var(--scx-border);
  border-radius: var(--scx-radius);
  padding: 20px;
  margin-top: 6px;
  animation: scxFadeIn .4s ease;
}
.scx-chart-canvas {
  max-height: 280px;
  width: 100% !important;
}

/* ── Disclaimer ────────────────────────────────────────────── */
.scx-disclaimer {
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  padding: 10px 28px;
  font-size: 11.5px;
  color: #92400e;
  font-style: italic;
  border-radius: 0 0 var(--scx-radius-lg) var(--scx-radius-lg);
}

/* ── Loading Spinner ───────────────────────────────────────── */
.scx-calculating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--scx-text-muted);
  font-size: 14px;
}
.scx-spinner {
  width: 20px; height: 20px;
  border: 3px solid var(--scx-input-border);
  border-top-color: var(--scx-primary);
  border-radius: 50%;
  animation: scxSpin .7s linear infinite;
}
@keyframes scxSpin { to { transform: rotate(360deg); } }

/* ── Amortization Table ────────────────────────────────────── */
.scx-amort-table-wrap {
  margin-top: 16px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: var(--scx-radius);
  border: 1.5px solid var(--scx-border);
}
.scx-amort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.scx-amort-table th {
  background: var(--scx-primary);
  color: #fff;
  font-family: 'Gobold', 'Arial Black', sans-serif;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: right;
  position: sticky; top: 0;
}
.scx-amort-table th:first-child { text-align: left; }
.scx-amort-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--scx-border);
}
.scx-amort-table td:first-child { text-align: left; font-weight: 600; }
.scx-amort-table tr:hover td { background: var(--scx-input-bg); }
.scx-amort-table tr:last-child td { border-bottom: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scx-group-nav { padding: 8px 8px 0; gap: 2px; }
  .scx-group-tab { padding: 8px 10px; font-size: 11px; }
  .scx-tab-label { display: none; }
  .scx-tab-icon  { font-size: 18px; }
  .scx-frame-header { padding: 16px 18px; }
  .scx-frame-title  { font-size: 16px; }
  .scx-frame-body   { padding: 16px 18px; }
  .scx-inputs-area  { grid-template-columns: 1fr; }
  .scx-action-bar   { flex-direction: column; }
  .scx-btn-calculate, .scx-btn-reset { width: 100%; }
  .scx-results-summary { grid-template-columns: repeat(2, 1fr); }
  .scx-calc-subnav { padding: 10px 14px; }
  .scx-calc-tab    { font-size: 11.5px; padding: 6px 10px; }
}

@media (max-width: 480px) {
  .scx-results-summary { grid-template-columns: 1fr 1fr; }
  .scx-summary-value   { font-size: 17px; }
  .scx-frame-title     { font-size: 14px; }
}