/* ==========================================================================
   Big Three Calculator — redesigned two-panel layout.
   Deliberately its own warm palette (cream / coral) rather than the site's
   green/navy theme — self-contained here so nothing else on the site
   depends on these tokens or class names.
   ========================================================================== */
:root{
  --bt-bg: #ffffff;
  --bt-card: #ffffff;
  --bt-ink: #17140f;
  --bt-muted: #857a6d;
  --bt-orange: #ef6c37;
  --bt-orange-dark: #d85a28;
  --bt-sun: #f9dcc4;
  --bt-sun-tag: #f3c8a4;
  --bt-moon: #dcefe0;
  --bt-moon-tag: #bfe4c6;
  --bt-rising: #e2ddf6;
  --bt-rising-tag: #cdc4ef;
  --bt-dark: #15171d;
  --bt-accuracy: #ece6fa;
  --bt-border: rgba(23,20,15,.08);
  --bt-radius: 1.1rem;
}

.vp-bt-page{ background: var(--bt-bg); }
.vp-bt-page .vp-breadcrumb{ display:none; }

.vp-bt-wrap{ padding: 2.5rem 0 4rem; }

/* ---------- left: form panel ---------- */
.vp-bt-form-card{
  background: var(--bt-card);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
  padding: 1.9rem 1.9rem 2.1rem;
  box-shadow: 0 1px 3px rgba(23,20,15,.05);
  position:relative;
}
.vp-bt-eyebrow{
  color: var(--bt-orange); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.vp-bt-icon-badge{
  position:absolute; top:1.7rem; right:1.7rem;
  width:38px; height:38px; border-radius:50%;
  background: rgba(31,214,122,.18); color:#1fa860;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.vp-bt-form-card h1{
  color: var(--bt-ink); font-weight:800; font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  margin: .35rem 0 .5rem;
}
.vp-bt-form-card > p{ color: var(--bt-muted); font-size:.88rem; margin-bottom:1.6rem; }

.vp-bt-field{ margin-bottom: 1.15rem; }
.vp-bt-field label{
  display:flex; align-items:center; gap:.4rem;
  color: var(--bt-ink); font-weight:600; font-size:.82rem; margin-bottom:.4rem;
}
.vp-bt-field label i{ color: var(--bt-orange); font-size:.85rem; }
.vp-bt-field .form-control,
.vp-bt-field .form-select{
  background: #fffdfb; border:1px solid var(--bt-border); color: var(--bt-ink);
  border-radius:.6rem; padding:.6rem .8rem; font-size:.9rem;
}
.vp-bt-field .form-control:focus,
.vp-bt-field .form-select:focus{
  border-color: var(--bt-orange); box-shadow: 0 0 0 3px rgba(239,108,55,.12);
}
.vp-bt-field-hint{ color: var(--bt-muted); font-size:.74rem; margin-top:.35rem; }

.vp-bt-actions{ display:flex; align-items:center; gap:.75rem; margin-top:1.6rem; }
.btn-bt-primary{
  background: var(--bt-orange); color:#fff; font-weight:700; border:none;
  border-radius:.6rem; padding:.7rem 1.4rem; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-bt-primary:hover{ background: var(--bt-orange-dark); color:#fff; }
.btn-bt-reset{
  background:transparent; border:1px solid var(--bt-border); color: var(--bt-ink);
  border-radius:.6rem; padding:.7rem 1.1rem; font-size:.88rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn-bt-reset:hover{ border-color: var(--bt-ink); }

/* ---------- right: results panel ---------- */
.vp-bt-results-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.4rem; flex-wrap:wrap; gap:1rem; }
.vp-bt-results-head h2{ color: var(--bt-ink); font-weight:800; font-size: clamp(1.7rem, 3vw, 2.2rem); margin:.3rem 0; }
.vp-bt-results-meta{ color: var(--bt-muted); font-size:.85rem; }
.btn-bt-save{
  background: var(--bt-card); border:1px solid var(--bt-border); color: var(--bt-ink);
  border-radius:.6rem; padding:.55rem 1rem; font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
}
.btn-bt-save:hover{ border-color: var(--bt-ink); }

.vp-bt-sign-card{
  border-radius: var(--bt-radius);
  padding: 1.3rem 1.3rem 1.5rem;
  height:100%;
}
.vp-bt-sign-card.sun{ background: var(--bt-sun); }
.vp-bt-sign-card.moon{ background: var(--bt-moon); }
.vp-bt-sign-card.rising{ background: var(--bt-rising); }
.vp-bt-sign-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.vp-bt-sign-label{ color: rgba(23,20,15,.6); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:.35rem; }
.vp-bt-sign-num{ color: rgba(23,20,15,.4); font-weight:700; font-size:.72rem; }
.vp-bt-sign-name{ color: var(--bt-ink); font-weight:800; font-size:1.7rem; margin-bottom:.5rem; line-height:1.1; }
.vp-bt-sign-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  padding:.25rem .6rem; border-radius:20px; color: var(--bt-ink);
}
.vp-bt-sign-card.sun .vp-bt-sign-tag{ background: var(--bt-sun-tag); }
.vp-bt-sign-card.moon .vp-bt-sign-tag{ background: var(--bt-moon-tag); }
.vp-bt-sign-card.rising .vp-bt-sign-tag{ background: var(--bt-rising-tag); }
.vp-bt-sign-text{ color: rgba(23,20,15,.72); font-size:.85rem; line-height:1.55; margin: .8rem 0 0; }

/* dark AI-reading card (repurposed "market session" slot) */
.vp-bt-dark-card{
  background: var(--bt-dark); border-radius: var(--bt-radius);
  padding: 1.5rem 1.6rem; color:#fff; height:100%;
}
.vp-bt-dark-eyebrow{
  color: var(--bt-orange); font-weight:700; font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; display:flex; align-items:center; justify-content:space-between;
}
.vp-bt-dark-card h3{ color:#fff; font-weight:800; font-size:1.3rem; margin:.6rem 0 .9rem; }
.vp-bt-dark-card p{ color: rgba(255,255,255,.78); font-size:.85rem; line-height:1.6; margin:0; }
.vp-bt-ai-loading{ display:flex; align-items:center; color: rgba(255,255,255,.65); font-size:.85rem; }
.vp-bt-ai-dot{ width:6px; height:6px; border-radius:50%; background: var(--bt-orange); display:inline-block; margin-right:4px; animation: btDotPulse 1.1s ease-in-out infinite; }
.vp-bt-ai-dot:nth-child(2){ animation-delay:.15s; }
.vp-bt-ai-dot:nth-child(3){ animation-delay:.3s; }
@keyframes btDotPulse{ 0%,80%,100%{ opacity:.25; transform:scale(.85); } 40%{ opacity:1; transform:scale(1); } }
.vp-bt-ai-text{ color: rgba(255,255,255,.85); white-space:pre-line; }

/* purple accuracy card */
.vp-bt-accuracy-card{
  background: var(--bt-accuracy); border-radius: var(--bt-radius);
  padding: 1.5rem 1.6rem; height:100%;
}
.vp-bt-accuracy-card .vp-bt-dark-eyebrow{ color:#6a4fc4; }
.vp-bt-accuracy-card h3{ color: var(--bt-ink); font-weight:800; font-size:1.25rem; margin:.6rem 0 .8rem; }
.vp-bt-accuracy-card p{ color: rgba(23,20,15,.68); font-size:.83rem; line-height:1.6; margin:0; }

@media (max-width: 991.98px){
  .vp-bt-wrap{ padding-top:1.5rem; }
}