/* ================================================
   Lipa Wakala Brand Theming - Minimal & Clean
   ================================================ */

:root {
  /* Lipa Wakala Brand Colors */
  --lw-brand-primary: #21ad81;
  --lw-brand-secondary: #20c997;
  --lw-brand-dark: #1a8a6b;
  --lw-brand-light: #4dd4a8;
}

/* ================================================
   Global Primary Color Overrides
   (Make Bootstrap “primary” use Lipa Wakala green,
   remove default blue from buttons and primary accents)
   ================================================ */

/* Solid primary buttons - default state */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:disabled,
.btn-primary:focus-visible {
  background-color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(33, 173, 129, 0.3);
  transition: all 0.2s ease-in-out;
}

/* Hover state stays brand-colored */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lw-brand-dark) !important;
  border-color: var(--lw-brand-dark) !important;
}

/* Active / selected state: white button, brand text & border */
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  background-color: #ffffff !important;
  border-color: var(--lw-brand-primary) !important;
  color: var(--lw-brand-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(33, 173, 129, 0.35);
}

/* Outline primary buttons */
.btn-outline-primary {
  color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  background-color: transparent !important;
  transition: all 0.2s ease-in-out;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background-color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(33, 173, 129, 0.25);
}

/* Link-style primary buttons & links */
.btn-link.text-primary,
.btn-link.link-primary,
.text-primary,
.link-primary {
  color: var(--lw-brand-primary) !important;
}

.btn-link.text-primary:hover,
.btn-link.link-primary:hover,
.text-primary:hover,
.link-primary:hover {
  color: var(--lw-brand-dark) !important;
}

/* Background, border, and badge primary utilities */
.bg-primary,
.badge.bg-primary {
  background-color: var(--lw-brand-primary) !important;
}

.bg-primary-subtle {
  background-color: rgba(33, 173, 129, 0.1) !important;
}

.border-primary {
  border-color: var(--lw-brand-primary) !important;
}

/* Treat all “info” accents as secondary brand (no Bootstrap blue) */
.text-info {
  color: var(--lw-brand-secondary) !important;
}

.bg-info,
.badge.bg-info {
  background-color: var(--lw-brand-secondary) !important;
}

/* ================================================
   Button Theming - Lipa Wakala specific variants
   (used in places where custom classes are applied)
   ================================================ */

/* White buttons with brand color text - hover shows brand background with white text */
.btn-white-lw {
  background-color: white !important;
  border-color: var(--lw-brand-primary) !important;
  color: var(--lw-brand-primary) !important;
  transition: all 0.3s ease;
}

.btn-white-lw:hover {
  background-color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 173, 129, 0.3);
}

/* Brand color buttons - white text on brand background */
.btn-lw-primary {
  background-color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  color: white !important;
  transition: all 0.3s ease;
}

.btn-lw-primary:hover {
  background-color: var(--lw-brand-dark) !important;
  border-color: var(--lw-brand-dark) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 173, 129, 0.3);
}

/* ================================================
   Button Click Premium Press Animation
   (smooth, expensive-feel microinteraction)
   ================================================ */

@keyframes lw-button-press {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 12px rgba(33, 173, 129, 0.35);
  }
  35% {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  }
  70% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 24px rgba(33, 173, 129, 0.45);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 12px rgba(33, 173, 129, 0.35);
  }
}

/* Utility class applied briefly on click */
.btn-lw-press {
  animation: lw-button-press 210ms cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center center;
  will-change: transform, box-shadow;
}

/* ================================================
   Text Colors - Only for specific elements
   ================================================ */

.text-lw-primary {
  color: var(--lw-brand-primary) !important;
}

.text-lw-secondary {
  color: var(--lw-brand-secondary) !important;
}

/* ================================================
   Background Colors - Only for specific elements
   ================================================ */

.bg-lw-primary {
  background-color: var(--lw-brand-primary) !important;
}

.bg-lw-secondary {
  background-color: var(--lw-brand-secondary) !important;
}

/* ================================================
   Border Colors - Only for specific elements
   ================================================ */

.border-lw-primary {
  border-color: var(--lw-brand-primary) !important;
}

/* ================================================
   Utilities - Only for specific Lipa Wakala elements
   ================================================ */

.lw-brand-color {
  color: var(--lw-brand-primary) !important;
}

.lw-brand-bg {
  background-color: var(--lw-brand-primary) !important;
}

.lw-brand-border {
  border-color: var(--lw-brand-primary) !important;
}

/* ================================================
   Footer Copyright - Specific styling
   ================================================ */

.footer .text-lw-primary {
  color: var(--lw-brand-primary) !important;
  font-weight: 600;
}

/* Footer links (e.g. support email) - use brand colors, not browser blue */
.footer a {
  color: var(--lw-brand-primary) !important;
}

.footer a:hover {
  color: var(--lw-brand-dark) !important;
}

/* ================================================
   Assistant Specific - Only for assistant elements
   ================================================ */

.lwa-assistant .btn-lw-primary {
  background-color: var(--lw-brand-primary) !important;
  border-color: var(--lw-brand-primary) !important;
  color: white !important;
}

.lwa-assistant .btn-lw-primary:hover {
  background-color: var(--lw-brand-dark) !important;
  border-color: var(--lw-brand-dark) !important;
  color: white !important;
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 768px) {
  .btn-lw-responsive {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }
}