/* ==========================================================================
   BORROWBOX - Custom Styles
   Branding: Primary Green #6AA84F, Light Green #C2E0C6
   ========================================================================== */

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

:root {
  --bb-green:      #6AA84F;
  --bb-green-soft: #C2E0C6;
  --bb-green-dark: #4d7a38;
  --bb-ink:        #1f2937;
  --bb-muted:      #6b7280;
  --bb-bg:         #f9fafb;
}

/* ---- Global ---- */
body {
  color: var(--bb-ink);
  background: var(--bb-bg);
  font-family: 'DM Sans', sans-serif;
}

/* ---- Navbar & Nav Links ---- */
.navbar { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.navbar-nav .nav-link {
  position: relative;
  font-weight: 500;
  color: var(--bb-ink);
  padding-bottom: 4px;
  transition: color 0.2s;
}
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--bb-green);
  transition: width 0.25s ease;
}
.navbar-nav .nav-link:hover { color: var(--bb-green); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { width: 100%; }
.navbar-nav .nav-link.active { color: var(--bb-green); }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(120deg, rgba(194,224,198,0.6), rgba(255,255,255,0.95));
  border-radius: 1.25rem;
}

/* ---- Buttons ---- */
.btn-bb {
  background: var(--bb-green);
  border-color: var(--bb-green);
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-bb:hover {
  background: var(--bb-green-dark);
  border-color: var(--bb-green-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(106,168,79,0.35);
}
.btn-outline-success {
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-outline-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(106,168,79,0.25);
}

/* ---- Cards ---- */
.card { border-radius: 1rem; border: 1px solid rgba(0,0,0,0.07); }
.shadow-soft { box-shadow: 0 6px 20px rgba(0,0,0,0.07); }

.card.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.11);
}

/* ---- Trust chips ---- */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(106,168,79,0.35);
  background: rgba(194,224,198,0.35);
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
}

/* ---- Step circles (How It Works) ---- */
.step-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bb-green-soft);
  color: var(--bb-green-dark);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Form validation feedback ---- */
.form-control.is-invalid,
.form-select.is-invalid { border-color: #dc3545; }
.form-control.is-valid,
.form-select.is-valid   { border-color: var(--bb-green); }

.invalid-feedback { display: none; font-size: .8rem; color: #dc3545; margin-top: 3px; }
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback { display: block; }

/* ---- Success toast ---- */
#form-success {
  display: none;
  background: rgba(194,224,198,0.5);
  border: 1px solid var(--bb-green);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  color: var(--bb-green-dark);
  font-weight: 600;
}

/* ---- Float & clear (CSS requirement) ---- */
.faq-badge-gif {
  float: left;
  margin: 0 16px 8px 0;
  width: 40px;
  height: 40px;
}
.bb-clear { clear: both; }

/* ---- Image styling ---- */
img.img-fluid { max-width: 100%; height: auto; display: block; }
.card img { border-radius: 0; }

/* ---- Table styling ---- */
table { border-collapse: collapse; width: 100%; }
table th { font-weight: 500; color: var(--bb-ink); border-bottom: 2px solid var(--bb-green-soft); padding: 8px 12px; }
table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
table tbody tr:last-child td { border-bottom: none; }

/* ---- Page header band ---- */
.page-header {
  background: linear-gradient(120deg, rgba(194,224,198,0.45), rgba(255,255,255,0.9));
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}