/**
 * FinTech Trust & Speed Color Palette
 * Palette:
 * - Slate White: #F8FAFC (Clean background)
 * - Pure White:  #FFFFFF (Cards / Surfaces)
 * - Deep Indigo: #4F46E5 (Primary Brand / Nav / Icons)
 * - Indigo Dark: #4338CA (Brand Hover)
 * - Indigo Light:#EEF2FF (Pills / Badges)
 * - Emerald Green:#10B981 (CTA / Buy / Success)
 * - Emerald Dark: #059669 (CTA Hover)
 * - Amber Alert: #F59E0B (Remaining Time / Waiting Status)
 * - Slate 900:   #0F172A (High-contrast Body & Heading Text)
 * - Slate 600:   #475569 (Secondary Text)
 * - Slate 400:   #94A3B8 (Muted Text)
 * - Light Slate: #E2E8F0 (Card & Input Borders)
 */

:root {
  --fintech-bg: #F8FAFC;
  --fintech-card: #FFFFFF;
  --fintech-primary: #4F46E5;
  --fintech-primary-dark: #4338CA;
  --fintech-primary-light: #EEF2FF;
  --fintech-cta: #10B981;
  --fintech-cta-dark: #059669;
  --fintech-cta-light: #ECFDF5;
  --fintech-amber: #F59E0B;
  --fintech-amber-light: #FEF3C7;
  --fintech-text: #0F172A;
  --fintech-text-muted: #64748B;
  --fintech-border: #E2E8F0;
}

/* Base Body & Background */
body {
  background-color: var(--fintech-bg) !important;
  color: var(--fintech-text) !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Navbar & Header */
.header-top, .header-area, header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--fintech-border) !important;
}

.main-menu ul li a {
  color: var(--fintech-text) !important;
  font-weight: 600 !important;
  transition: color 0.15s ease-in-out;
}

.main-menu ul li a:hover,
.main-menu ul li.active > a {
  color: var(--fintech-primary) !important;
}

/* Top Alert Bar */
.bg-primary, .alert-primary {
  background-color: var(--fintech-primary) !important;
  border-color: var(--fintech-primary-dark) !important;
  color: #FFFFFF !important;
}

/* Hero Section */
.hero-area, .hero-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--fintech-bg) 100%) !important;
  color: var(--fintech-text) !important;
}

.hero-area h1, .hero-area h2, .hero-section h1 {
  color: var(--fintech-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.hero-area p, .hero-section p {
  color: var(--fintech-text-muted) !important;
}

/* CTA & Action Buttons */
.btn-primary, .theme-btn, .header-btn .btn, a.btn-primary {
  background-color: var(--fintech-primary) !important;
  border-color: var(--fintech-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

.btn-primary:hover, .theme-btn:hover {
  background-color: var(--fintech-primary-dark) !important;
  border-color: var(--fintech-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* Primary Conversion / Buy Buttons -> Emerald Green */
.btn-success, .btn-buy, .buy-btn, a.btn-success {
  background-color: var(--fintech-cta) !important;
  border-color: var(--fintech-cta) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.2s ease;
}

.btn-success:hover, .btn-buy:hover, a.btn-success:hover {
  background-color: var(--fintech-cta-dark) !important;
  border-color: var(--fintech-cta-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
}

/* Cards & Containers */
.card, .single-feature, .service-box, .pricing-box, .faq-item {
  background-color: var(--fintech-card) !important;
  border: 1px solid var(--fintech-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease-in-out;
}

.card:hover, .single-feature:hover {
  border-color: var(--fintech-primary) !important;
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.08) !important;
}

/* Feature Icons */
.feature-icon, .icon-box, .single-feature .icon {
  background-color: var(--fintech-primary-light) !important;
  color: var(--fintech-primary) !important;
  border-radius: 10px !important;
}

/* Headings and High Contrast text */
h1, h2, h3, h4, h5, h6 {
  color: var(--fintech-text) !important;
  font-weight: 700 !important;
}

p, span.text-muted, .text-secondary {
  color: var(--fintech-text-muted) !important;
}

/* Status Badges */
.badge-warning, .badge-amber {
  background-color: var(--fintech-amber-light) !important;
  color: #B45309 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

.badge-success {
  background-color: var(--fintech-cta-light) !important;
  color: var(--fintech-cta-dark) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

.badge-primary, .badge-indigo {
  background-color: var(--fintech-primary-light) !important;
  color: var(--fintech-primary) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* Form Controls & Inputs */
.form-control, .form-select {
  border: 1px solid var(--fintech-border) !important;
  border-radius: 8px !important;
  color: var(--fintech-text) !important;
  background-color: #FFFFFF !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--fintech-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* Footer Styling */
footer, .footer-area {
  background-color: #0F172A !important;
  color: #94A3B8 !important;
  border-top: 1px solid #1E293B !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #FFFFFF !important;
}

footer a {
  color: #94A3B8 !important;
}

footer a:hover {
  color: #FFFFFF !important;
}