/* BillForge Landing (Bootstrap-based) */

:root{
  --bf-border: rgba(15, 23, 42, 0.10);
  --bf-muted: rgba(15, 23, 42, 0.65);
  --bf-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
  --bf-bg: #ffffff;
  --bf-text: #0f172a;
}

/* Dark mode */
html.dark-mode {
  --bf-border: rgba(255, 255, 255, 0.15);
  --bf-muted: rgba(255, 255, 255, 0.70);
  --bf-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  --bf-bg: #1a1f35;
  --bf-text: #f5f7fa;
}

/* Brand logo sizing used in headers */


body { color: var(--bf-text); background: var(--bf-bg); overflow-x: hidden; transition: background 0.3s, color 0.3s; }

.section-hero{
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(13, 110, 253, 0.12), transparent 60%),
    radial-gradient(700px 360px at 80% 20%, rgba(25, 135, 84, 0.10), transparent 55%),
    linear-gradient(#ffffff, #ffffff);
}

/* Dark mode hero background */
html.dark-mode .section-hero{
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(13, 110, 253, 0.15), transparent 60%),
    radial-gradient(700px 360px at 80% 20%, rgba(25, 135, 84, 0.12), transparent 55%),
    linear-gradient(#1a1f35, #1a1f35);
}

.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

.brand-mark{
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(13,110,253,1), rgba(25,135,84,1));
  box-shadow: 0 6px 16px rgba(13,110,253,0.25);
}

.dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(25,135,84,1);
  box-shadow: 0 0 0 4px rgba(25,135,84,0.12);
}

.icon-badge{
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bf-border);
  border-radius: 8px;
  background: var(--bf-bg);
}

.preview-card{
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-bg);
  overflow: hidden;
}

.preview-topbar{
  background: rgba(2,6,23,0.02);
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--bf-border);
  background: var(--bf-bg);
}

.totals{
  width: min(320px, 100%);
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(2,6,23,0.015);
}

.feature-card{
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 18px;
  background: var(--bf-bg);
  box-shadow: var(--bf-shadow);
}

.feature-icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bf-border);
  background: rgba(13,110,253,0.06);
  margin-bottom: 10px;
  font-size: 18px;
}

.template-card{
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-bg);
  overflow: hidden;
}

.template-preview{
  height: 160px;
  border-bottom: 1px solid var(--bf-border);
}

.bg-grid{
  background-image:
    linear-gradient(to right, rgba(2,6,23,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,6,23,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: rgba(2,6,23,0.01);
}

.bg-lines{
  background-image:
    linear-gradient(to bottom, rgba(2,6,23,0.08) 1px, transparent 1px);
  background-size: 100% 18px;
  background-color: rgba(2,6,23,0.01);
}

.bg-blocks{
  background:
    linear-gradient(90deg, rgba(13,110,253,0.10), transparent 60%),
    linear-gradient(0deg, rgba(25,135,84,0.08), transparent 55%),
    rgba(2,6,23,0.01);
}

.list-item{
  padding: 10px 12px;
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  background: var(--bf-bg);
  margin-bottom: 10px;
}

.price-card{
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 18px;
  background: var(--bf-bg);
  box-shadow: var(--bf-shadow);
}

.price-card-pro{
  border-color: rgba(13,110,253,0.35);
}

.check::before{
  content: "✓";
  display: inline-block;
  width: 1.4em;
  color: rgba(25,135,84,1);
  font-weight: 700;
}
.muted{
  color: rgba(15,23,42,0.55);
  padding-left: 1.4em;
  position: relative;
}
.muted::before{
  content: "•";
  position: absolute;
  left: 0.5em;
  color: rgba(15,23,42,0.35);
}

a { text-underline-offset: 3px; }

html { scroll-behavior: smooth; }

/* Dark mode toggle */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s;
}

.dark-mode-toggle:hover { transform: scale(1.1); }

/* Dark mode card/section background */
.card,
.preview-card,
.feature-card,
.template-card,
.price-card,
.signin-card {
  background: var(--bf-bg);
  border-color: var(--bf-border);
}

html.dark-mode header {
  background: #0f1419;
  border-color: var(--bf-border);
}

html.dark-mode .bg-light {
  background: #2a2f45 !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select {
  background: #252b3f;
  border-color: var(--bf-border);
  color: var(--bf-text);
}

html.dark-mode .form-control::placeholder {
  color: var(--bf-muted);
}

html.dark-mode .btn-outline-secondary {
  color: var(--bf-text);
  border-color: var(--bf-border);
}

html.dark-mode .btn-outline-secondary:hover {
  background: var(--bf-border);
  border-color: var(--bf-border);
}

html.dark-mode .text-muted {
  color: var(--bf-muted) !important;
}

html.dark-mode .bg-white {
  background: #252b3f !important;
}

html.dark-mode a {
  color: #4da6ff;
}

html.dark-mode .link-secondary {
  color: #999 !important;
}

html.dark-mode .link-secondary:hover {
  color: #bbb !important;
}

/* Ensure primary buttons have readable text in dark mode */
html.dark-mode .btn-primary,
html.dark-mode .btn-primary:focus,
html.dark-mode .btn-primary:hover {
  color: #fff !important;
}

/* Accordion / FAQ in dark mode */
html.dark-mode .accordion-item,
html.dark-mode .accordion-body {
  background: var(--bf-bg) !important;
  border-color: var(--bf-border) !important;
  color: var(--bf-text) !important;
}

/* Reserve vertical scrollbar to avoid page-width shift when navigating */
html { overflow-y: scroll; }

/* Sticky header always visible on scroll */
header.sticky-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* Add padding to body to account for fixed header */
body {
  padding-top: 64px;
}

/* Ensure wrapper doesn't block positioning */
[data-include="header"] {
  display: contents;
}

/* Ensure invoice form and preview text is always readable */
.invoice-form,
.invoice-form *,
.preview-card,
.preview-card * {
  color: var(--bf-text) !important;
}

/* Specific tweaks for small, labels and table text */
.invoice-form .form-label,
.invoice-form .small,
.invoice-form .fw-semibold,
.preview-card .small,
.preview-card .fw-semibold {
  color: var(--bf-text) !important;
}

/* Line totals and totals box should contrast */
.line-total,
#.totals,
.totals {
  color: var(--bf-text) !important;
}

/* Tables: make headers and cells use theme background and borders */
.table,
.table-responsive .table {
  background: var(--bf-bg) !important;
  border-color: var(--bf-border) !important;
}
.table thead th {
  background: transparent !important;
  color: var(--bf-text) !important;
  border-bottom: 1px solid var(--bf-border) !important;
}
.table tbody td,
.table tbody th {
  background: transparent !important;
  color: var(--bf-text) !important;
  border-top: 1px solid rgba(0,0,0,0.03) !important;
}

/* FAQ / Accordion: ensure question headers match theme */
.accordion-item {
  background: var(--bf-bg);
  border: 1px solid var(--bf-border);
}
.accordion-button {
  background: var(--bf-bg) !important;
  color: var(--bf-text) !important;
  border-bottom: 0 !important;
}
.accordion-button:not(.collapsed) {
  background: var(--bf-bg) !important;
  box-shadow: none !important;
}

/* Small adjustments for preview table within preview-card */
.preview-card .table thead th,
.preview-card .table tbody td {
  color: var(--bf-text);
}