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

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

#hero {
  background: linear-gradient(145deg, #0e0e1e 0%, #1e1040 50%, #3a0890 100%);
}
#hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 50% 120%, rgba(106,11,228,0.5) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 5% 5%, rgba(190,160,255,0.06) 0%, transparent 60%);
}
.hero-chip { background: rgba(190,160,255,0.12); border-color: rgba(190,160,255,0.24); color: #a78bfa; }
#hero h1 span { color: #a78bfa; }

#outputCard {
  border-color: rgba(106,11,228,0.2);
  box-shadow: 0 8px 32px rgba(106,11,228,0.14), 0 2px 8px rgba(14,14,30,0.1);
}
.output-header { background: linear-gradient(135deg, #0e0e1e 0%, #1e1040 50%, #3a0890 100%); }
.output-title svg { color: #a78bfa; }
.output-status-badge { color: rgba(167,139,250,0.9); }
.output-actions-bar { background: #f7f4ff; }
#previewBtn .btn-icon { background: #f0ebff; color: #6A0BE4; }
#previewBtn .btn-label { color: #6A0BE4; }
#previewBtn:hover { background: #f0ebff; }
#previewBtn:hover .btn-icon { box-shadow: 0 4px 14px rgba(106,11,228,0.28); }
#downloadBtn { background: linear-gradient(160deg, #1e1040 0%, #6A0BE4 100%); }
#downloadBtn:hover { background: linear-gradient(160deg, #3a0890 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.35); }
#whyBanner { background: linear-gradient(145deg, #0e0e1e 0%, #1e1040 50%, #3a0890 100%); }
.why-cta-btn { background: #a78bfa; color: #0e0e1e; }
.why-cta-btn:hover { background: #c4b5fd; }

/* ─── Form Style: Underline tabs ─── */
.form-topbar { background: #fff; border-bottom: 1.5px solid rgba(106,11,228,0.08); }
.tpl-tabs { background: transparent !important; border-radius: 0 !important; padding: 0 !important; border: none !important; border-bottom: 1.5px solid rgba(106,11,228,0.12) !important; gap: 2px; }
.tpl-tab { border-radius: 0 !important; border: none !important; padding: 8px 14px; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; box-shadow: none !important; }
.tpl-tab.active { background: transparent !important; border-color: transparent !important; border-bottom: 2.5px solid #6A0BE4 !important; color: #6A0BE4 !important; box-shadow: none !important; }
.tpl-tab:hover { background: transparent !important; color: #6A0BE4 !important; }