@import url("../free-invoice-generator/style.css");

:root {
  --p: #6A0BE4;
  --p-h: #5a09c4;
  --p-lt: #ede9fe;
  --p-llt: #f5f3ff;
  --shadow-md: 0 4px 16px rgba(106,11,228,0.08), 0 1px 4px rgba(15,10,30,0.06);
}

#hero {
  background: linear-gradient(175deg, #030110 0%, #0c0530 50%, #1f0a5a 100%);
}
#hero::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 150%, rgba(106,11,228,0.8) 0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 70% 5%, rgba(120,80,255,0.07) 0%, transparent 55%);
}
.hero-chip { background: rgba(150,110,255,0.14); border-color: rgba(150,110,255,0.28); color: #ddd6fe; }
#hero h1 span { color: #e9d5ff; }

#outputCard {
  border-color: rgba(106,11,228,0.25);
  box-shadow: 0 8px 32px rgba(106,11,228,0.2), 0 2px 8px rgba(3,1,16,0.18);
}
.output-header { background: linear-gradient(135deg, #030110 0%, #1f0a5a 100%); }
.output-title svg { color: #e9d5ff; }
.output-status-badge { color: rgba(233,213,255,0.9); }
.output-actions-bar { background: #f7f4ff; }
#previewBtn .btn-icon { background: #ede9fe; color: #6A0BE4; }
#previewBtn .btn-label { color: #6A0BE4; }
#previewBtn:hover { background: #ede9fe; }
#previewBtn:hover .btn-icon { box-shadow: 0 4px 14px rgba(106,11,228,0.3); }
#downloadBtn { background: linear-gradient(160deg, #1f0a5a 0%, #6A0BE4 100%); }
#downloadBtn:hover { background: linear-gradient(160deg, #2d1070 0%, #7c3aed 100%); }

.totals-total { background: linear-gradient(135deg, #6A0BE4 0%, #5a09c4 100%); }
#generateBtn { background: linear-gradient(135deg, #6A0BE4 0%, #5a09c4 100%); box-shadow: 0 4px 20px rgba(106,11,228,0.45); }
#whyBanner { background: linear-gradient(175deg, #030110 0%, #0c0530 50%, #1f0a5a 100%); }
.why-cta-btn { background: #e9d5ff; color: #030110; }
.why-cta-btn:hover { background: #f3e8ff; }

/* ─── Form Style: Outlined step indicators ─── */
.form-topbar { background: #1a0842; border-bottom: none; }
.form-topbar-title { color: #e0d0ff; }
.form-topbar-title span { color: #c084fc; }
.form-step.active .step-num { background: transparent !important; border: 2.5px solid #6A0BE4; }
.form-step.active .step-num-text { color: #6A0BE4; }
.tpl-tabs { background: rgba(106,11,228,0.08); border-radius: 8px; padding: 3px; }