/* === FuFu Gadi Theme (load after Bootstrap) === */
:root{
  /* Brand palette */
  --fg-brand:       #0ea5e9;   /* Cyan-500 */
  --fg-brand-dark:  #0284c7;   /* Cyan-700 */
  --fg-brand-100:   #eaf6ff;
  --fg-brand-200:   #d6eeff;

  /* Map Bootstrap variables to brand (so .btn-primary/.nav-pills pick it up) */
  --bs-primary:                   var(--fg-brand);
  --bs-primary-rgb:              14,165,233;
  --bs-link-color-rgb:           var(--bs-primary-rgb);
  --bs-link-hover-color-rgb:     2,132,199;

  /* (Optional) If you used .btn-success a lot and want it to match brand too: */
  --bs-success:                  var(--fg-brand);
  --bs-success-rgb:              14,165,233;
}

/* Generic brand buttons (use these going forward) */
.btn-brand{
  background-color: var(--fg-brand);
  border-color: var(--fg-brand);
  color:#fff;
  font-weight:600;
}
.btn-brand:hover{
  background-color: var(--fg-brand-dark);
  border-color: var(--fg-brand-dark);
  color:#fff;
}
.btn-outline-brand{
  color: var(--fg-brand);
  border-color: var(--fg-brand);
}
.btn-outline-brand:hover{
  background-color: var(--fg-brand);
  border-color: var(--fg-brand);
  color:#fff;
}

/* Nav pills for Fleet toggle */
.fleet-pills .nav-link{
  border:1px solid #dfe3e8;
  border-radius:.6rem;
  color:#344054;
  background:#fff;
  font-weight:500;
  transition:all .2s ease;
}
.fleet-pills .nav-link:hover{
  border-color: var(--fg-brand);
  color: var(--fg-brand);
  background: #f8fbff;
}
.fleet-pills .nav-link.active{
  background-color: var(--fg-brand);
  border-color: var(--fg-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 .25rem .5rem rgba(2,132,199,.25);
}

/* Coupon/Why section alignment with brand */
.coupon-head,
.why-head{
  background: linear-gradient(135deg, var(--fg-brand-100) 0%, #ffffff 100%);
  border-bottom:1px solid var(--fg-brand-200);
}
.coupon-icon,
.why-icon{
  background: var(--fg-brand-100);
  color: var(--fg-brand);
}
.copy-btn.btn-outline-primary{
  border-color: var(--fg-brand);
  color: var(--fg-brand);
}
.copy-btn.btn-outline-primary:hover{
  background: var(--fg-brand);
  border-color: var(--fg-brand);
  color:#fff;
}

/* Optional: make .btn-primary look like brand (if you prefer using Bootstrap classes) */
.btn-primary{
  --bs-btn-bg: var(--fg-brand);
  --bs-btn-border-color: var(--fg-brand);
  --bs-btn-hover-bg: var(--fg-brand-dark);
  --bs-btn-hover-border-color: var(--fg-brand-dark);
  --bs-btn-active-bg: var(--fg-brand-dark);
  --bs-btn-active-border-color: var(--fg-brand-dark);
}
.btn-outline-primary{
  --bs-btn-color: var(--fg-brand);
  --bs-btn-border-color: var(--fg-brand);
  --bs-btn-hover-bg: var(--fg-brand);
  --bs-btn-hover-border-color: var(--fg-brand);
  --bs-btn-hover-color:#fff;
}
