/* ============================================================
   MiDigi Growth Planner — Main Stylesheet
   Bootstrap 5 dark theme override + custom components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --ink:#050e2d;   --ink2:#0f2460;  --ink3:#1a3a8f;
  --gold:#f59e0b;  --gold-lt:#fcd34d;
  --blue:#378ADD;  --blue-lt:#60a5fa;
  --green:#1D9E75; --green-lt:#5DCAA5;
  --purple:#7F77DD;--purple-lt:#AFA9EC;
  --red:#ef4444;   --orange:#f97316;
  --surface:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.09);
  --muted:rgba(255,255,255,0.45);
  --muted2:rgba(255,255,255,0.25);
  --text:#f0f4ff;
  --sans:'Plus Jakarta Sans',sans-serif;
  --mono:'DM Mono',monospace;
  --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.12),0 4px 20px rgba(0,0,0,.08);
  --shadow-md:0 4px 24px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--ink); color:var(--text); font-size:13.5px; line-height:1.65; }
a { color:var(--gold); text-decoration:none; }
a:hover { color:var(--gold-lt); }
::placeholder { color:rgba(255,255,255,0.2) !important; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:4px; }

/* ── NAVBAR ── */
.mg-nav {
  background:rgba(5,14,45,0.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:1000;
}
.mg-nbtn {
  padding:6px 16px; border-radius:8px; font-size:11.5px; font-weight:700;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.7); cursor:pointer; transition:all .15s;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.mg-nbtn:hover { background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,.2); }
.mg-nbtn-gold { background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important; }
.mg-nbtn-gold:hover { background:var(--gold-lt) !important; transform:translateY(-1px); box-shadow:0 4px 14px rgba(245,158,11,.35); }

/* ── HERO ── */
.mg-hero {
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 55%,var(--ink3) 100%);
  position:relative; overflow:hidden;
}
.mg-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 75% 50%,rgba(37,99,235,.18) 0%,transparent 65%),
             radial-gradient(ellipse 35% 55% at 15% 80%,rgba(127,119,221,.12) 0%,transparent 55%);
}
.mg-hero .container { position:relative; z-index:1; }
.hero-eyebrow { font-family:var(--mono); font-size:10.5px; color:var(--blue-lt); text-transform:uppercase; letter-spacing:.12em; }
.hero-title { font-size:clamp(22px,4vw,32px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:#fff; }
.hero-title em { font-style:normal; color:var(--gold); }
.hero-sub { font-size:13px; color:rgba(255,255,255,0.5); max-width:520px; line-height:1.8; }
.hero-pill { padding:4px 15px; border-radius:20px; font-size:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); font-family:var(--mono); }
.hstat-val { font-family:var(--mono); font-size:17px; color:var(--gold-lt); font-weight:500; }
.hstat-lbl { font-size:10px; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

/* ── STEPS BAR ── */
.mg-steps-bar { background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); padding:0 1rem; }
.steps-inner { max-width:680px; margin:0 auto; display:flex; align-items:center; padding:.9rem 0; }
.step-item { display:flex; align-items:center; gap:7px; }
.step-dot {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0; transition:all .25s;
}
.step-active { background:var(--gold); color:var(--ink); }
.step-done   { background:var(--green); color:#fff; }
.step-idle   { background:rgba(255,255,255,.1); color:rgba(255,255,255,.35); }
.step-label  { font-size:11.5px; font-weight:600; color:rgba(255,255,255,.35); transition:color .2s; }
.step-label.active { color:#fff; }
.step-line   { flex:1; height:1px; background:var(--border); margin:0 10px; min-width:20px; }

/* ── CARDS ── */
.mg-card {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.mg-card-head {
  padding:.95rem 1.25rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.card-icon { font-size:16px; }
.card-title { font-size:13.5px; font-weight:700; color:#fff; flex:1; margin:0; }
.card-meta { font-size:10px; color:var(--muted2); font-family:var(--mono); }
.mg-card-body { padding:1.25rem; }

/* ── FORM ELEMENTS ── */
.mg-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:5px; }
.mg-input {
  display:block; width:100%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:9px 13px; color:var(--text); font-size:12.5px;
  outline:none; transition:border-color .15s; font-family:var(--sans);
  appearance:none;
}
.mg-input:focus { border-color:rgba(245,158,11,.45); background:rgba(255,255,255,.08); }
.mg-input option { background:#0f2460; color:#f0f4ff; }

/* ── BUTTONS ── */
.mg-btn {
  padding:10px 22px; border-radius:9px; font-size:12.5px; font-weight:800;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:all .18s; text-decoration:none; font-family:var(--sans); white-space:nowrap;
}
.mg-btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.mg-btn-gold { background:var(--gold); color:var(--ink); }
.mg-btn-gold:hover { background:var(--gold-lt); transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,158,11,.35); color:var(--ink); }
.mg-btn-outline { background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.13); color:rgba(255,255,255,.75); }
.mg-btn-outline:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3); }
.w-100 { width:100%; }
.justify-content-center { justify-content:center; }

/* ── GOALS ── */
.goals-wrap { display:flex; flex-wrap:wrap; gap:5px; }
.goal-chip {
  padding:5px 13px; border-radius:7px; font-size:11.5px; font-weight:600;
  border:1.5px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55); cursor:pointer; transition:all .15s; user-select:none;
}
.goal-chip:hover { border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.07); color:rgba(255,255,255,.85); }
.goal-chip.active { border-color:var(--gold); background:rgba(245,158,11,.12); color:var(--gold-lt); }

/* ── DURATION GRID ── */
.dur-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dur-card {
  padding:.9rem 1rem; border-radius:10px; border:2px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02); cursor:pointer; text-align:center; transition:all .18s;
}
.dur-card:hover { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.05); }
.dur-card.active { border-color:var(--gold); background:rgba(245,158,11,.1); }
.dur-val { font-size:13px; font-weight:800; color:#fff; transition:color .15s; }
.dur-card.active .dur-val { color:var(--gold-lt); }
.dur-tag { font-size:9px; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }

/* ── ESTIMATE BAR ── */
.est-bar { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:1rem 1.25rem; border-top:1px solid var(--border); background:rgba(0,0,0,.12); }
.est-item { text-align:center; padding:.75rem; border-radius:9px; }
.est-purple { background:rgba(127,119,221,.1); }
.est-green  { background:rgba(29,158,117,.1); }
.est-val { font-weight:800; font-size:18px; }
.est-purple .est-val { color:var(--purple-lt); }
.est-green  .est-val { color:var(--green-lt); }
.est-lbl { font-size:10px; color:var(--muted2); margin-top:3px; }

/* ── STEP PANELS ── */
.step-panel { display:none; animation:fadeUp .25s ease; }
.step-panel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── TRUST CARDS ── */
.trust-card { padding:.9rem; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:10px; }
.trust-icon { font-size:22px; margin-bottom:5px; }
.trust-title { font-size:11.5px; font-weight:700; color:#fff; }
.trust-sub { font-size:10.5px; color:var(--muted2); margin-top:2px; }

/* ── FOOTER ── */
.mg-footer { background:rgba(5,14,45,.85); border-top:1px solid var(--border); padding:1.5rem; text-align:center; font-size:11.5px; color:var(--muted2); }
.mg-footer a { color:rgba(255,255,255,.45); }
.mg-footer a:hover { color:var(--gold); }

/* ── TOAST ── */
.toast { background:rgba(29,158,117,.9); }

/* ── PRINT ── */
@media print {
  .mg-nav, .steps-bar, .no-print, footer, .mg-footer { display:none !important; }
  body, html { background:#fff !important; color:#000 !important; }
  .mg-hero { display:none !important; }
  .plan-hero-card { background:#f0f4ff !important; color:#000 !important; }
}

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .dur-grid { grid-template-columns:1fr 1fr; }
  .est-bar  { grid-template-columns:1fr; }
  .hero-title { font-size:22px; }
}
@media(max-width:480px) {
  .dur-grid { grid-template-columns:1fr 1fr; }
  .steps-inner { overflow-x:auto; padding-bottom:.5rem; }
}