/* ================================================================
   AyaSend Premium Design System — v3.0 2026
   Loaded last → wins cascade. No !important abuse.
   Targets: provider cards, CTAs, badges, modals, nav, alerts,
            corridor cards, inputs, trust strip, interstitial.
   ================================================================ */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --aya-font: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aya-blue: #2563eb;
  --aya-blue-mid: #3b82f6;
  --aya-blue-dark: #1d4ed8;
  --aya-blue-light: #dbeafe;
  --aya-green: #10b981;
  --aya-slate: #0f172a;

  --aya-r-card: 22px;
  --aya-r-btn: 14px;
  --aya-r-badge: 24px;
  --aya-r-input: 16px;
  --aya-r-modal: 28px;

  --aya-shadow-card:    0 2px 12px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.03);
  --aya-shadow-card-md: 0 4px 20px rgba(15,23,42,.07), 0 1px 6px rgba(15,23,42,.04);
  --aya-shadow-card-best: 0 8px 40px rgba(37,99,235,.13), 0 2px 10px rgba(37,99,235,.07);
  --aya-shadow-card-hover: 0 14px 48px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.05);
  --aya-shadow-btn: 0 4px 16px rgba(37,99,235,.36), 0 1px 4px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.15);
  --aya-shadow-btn-hover: 0 6px 24px rgba(37,99,235,.48), 0 2px 6px rgba(37,99,235,.22);

  --aya-border-card: rgba(214,222,234,.80);
  --aya-border-card-best: rgba(59,130,246,.26);
  --aya-border-input: rgba(214,222,234,.90);
  --aya-bg-card: #ffffff;
  --aya-bg-subtle: #f8fafc;
  --aya-bg-input: #fafbff;
}

html.dark {
  --aya-border-card: rgba(51,65,85,.65);
  --aya-border-card-best: rgba(59,130,246,.30);
  --aya-border-input: rgba(51,65,85,.80);
  --aya-bg-card: #1e293b;
  --aya-bg-subtle: #0f172a;
  --aya-bg-input: rgba(30,41,59,.70);
  --aya-shadow-card:    0 2px 12px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.12);
  --aya-shadow-card-md: 0 4px 24px rgba(0,0,0,.28), 0 1px 6px rgba(0,0,0,.14);
  --aya-shadow-card-best: 0 8px 40px rgba(37,99,235,.18), 0 2px 10px rgba(37,99,235,.10);
  --aya-shadow-card-hover: 0 14px 52px rgba(0,0,0,.32), 0 2px 10px rgba(0,0,0,.16);
}

/* ─── Global Base ────────────────────────────────────────────── */
body {
  font-family: var(--aya-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Provider Cards ─────────────────────────────────────────── */
.rate-card-premium {
  background: var(--aya-bg-card);
  border: 1px solid var(--aya-border-card);
  border-radius: var(--aya-r-card);
  box-shadow: var(--aya-shadow-card);
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s cubic-bezier(.22,1,.36,1),
              border-color .18s ease;
  will-change: transform;
}

.rate-card-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--aya-shadow-card-hover);
  border-color: rgba(59,130,246,.20);
}

html.dark .rate-card-premium:hover {
  border-color: rgba(59,130,246,.25);
}

.rate-card-best {
  border: 1.5px solid var(--aya-border-card-best);
  box-shadow: var(--aya-shadow-card-best);
}

.rate-card-best:hover {
  box-shadow: 0 16px 56px rgba(37,99,235,.16), 0 4px 12px rgba(37,99,235,.08);
  border-color: rgba(59,130,246,.38);
}

.rate-card-indicative {
  opacity: .78;
}

/* ─── Unified "Send Now" CTA Buttons ────────────────────────── */
.send-now-btn,
.aya-cta-btn {
  background: linear-gradient(160deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: var(--aya-shadow-btn);
  border-radius: var(--aya-r-btn);
  color: #fff;
  font-family: var(--aya-font);
  font-weight: 700;
  letter-spacing: .025em;
  transition: transform .15s cubic-bezier(.22,1,.36,1),
              box-shadow .15s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color: transparent;
}

.send-now-btn:hover,
.aya-cta-btn:hover {
  box-shadow: var(--aya-shadow-btn-hover);
  transform: translateY(-1px);
}

.send-now-btn:active,
.aya-cta-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
}

/* Arrow micro-animation */
.aya-cta-arrow {
  transition: transform .15s cubic-bezier(.22,1,.36,1);
  display: inline-flex;
}
.send-now-btn:hover .aya-cta-arrow,
.aya-cta-btn:hover .aya-cta-arrow {
  transform: translateX(4px);
}

/* ─── Provider Logo Container ────────────────────────────────── */
.provider-logo-container {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fafc, #f1f5f9);
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

html.dark .provider-logo-container {
  background: linear-gradient(145deg, rgba(30,41,59,.9), rgba(15,23,42,.7));
  border-color: rgba(51,65,85,.6);
}

/* ─── Intelligence / Recommendation Card ─────────────────────── */
.aya-intelligence-card {
  background: linear-gradient(160deg, #fcfeff 0%, #f4f9ff 45%, #eaf4ff 100%);
  border: 1.5px solid rgba(59,130,246,.18);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(37,99,235,.08), 0 1px 6px rgba(37,99,235,.04);
  animation: ayaCardReveal 300ms cubic-bezier(.22,1,.36,1) forwards;
}

html.dark .aya-intelligence-card {
  background: linear-gradient(160deg, rgba(30,41,59,.95) 0%, rgba(23,37,84,.50) 100%);
  border-color: rgba(59,130,246,.22);
  box-shadow: 0 4px 28px rgba(37,99,235,.14), 0 1px 6px rgba(0,0,0,.18);
}

@keyframes ayaCardReveal {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Confidence / Source Badges ─────────────────────────────── */
/* Live — green */
.aya-badge-live {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--aya-r-badge);
  font-size: 9px; font-weight: 700;
  background: rgba(220,252,231,.75); color: #15803d;
  border: 1px solid rgba(134,239,172,.45);
}
/* Checked — amber */
.aya-badge-checked {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--aya-r-badge);
  font-size: 9px; font-weight: 700;
  background: rgba(255,237,213,.80); color: #c2410c;
  border: 1px solid rgba(251,146,60,.35);
}
/* Estimated — yellow */
.aya-badge-estimated {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--aya-r-badge);
  font-size: 9px; font-weight: 600;
  background: rgba(254,243,199,.75); color: #92400e;
  border: 1px solid rgba(253,211,77,.40);
}

/* ─── Receive Amount Typography ──────────────────────────────── */
.rc-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Popular Corridor Cards ─────────────────────────────────── */
.popular-corridor-card {
  background: var(--aya-bg-card);
  border: 1px solid var(--aya-border-card);
  border-radius: 18px;
  box-shadow: var(--aya-shadow-card);
  transition: transform .16s cubic-bezier(.22,1,.36,1),
              box-shadow .16s cubic-bezier(.22,1,.36,1);
}
.popular-corridor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--aya-shadow-card-md);
}
.popular-corridor-card:active {
  transform: translateY(-1px);
}

/* ─── Global Navigation Header ───────────────────────────────── */
header, nav.site-nav, .site-header {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ─── Alert / Price Alert Modal ──────────────────────────────── */
#alert-modal .alert-modal-card,
.alert-modal-inner {
  border-radius: var(--aya-r-modal);
  box-shadow: 0 24px 80px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
}

html.dark #alert-modal .alert-modal-card,
html.dark .alert-modal-inner {
  box-shadow: 0 24px 80px rgba(0,0,0,.48), 0 4px 16px rgba(0,0,0,.24);
}

/* Threshold buttons */
.threshold-btn {
  font-family: var(--aya-font);
  transition: all .14s ease;
}
.threshold-btn.active,
.threshold-btn[data-active="true"] {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: var(--aya-blue);
  color: var(--aya-blue-dark);
  box-shadow: 0 2px 8px rgba(37,99,235,.14);
}

/* ─── Form Inputs — Premium Refinement ───────────────────────── */
input[type="number"],
input[type="email"],
input[type="text"],
select {
  font-family: var(--aya-font);
}

/* ─── Best Rate Badge (top ribbon) ──────────────────────────── */
.best-rate-ribbon {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.32);
  border-radius: 0 0 14px 14px;
  padding: 5px 18px;
}

/* ─── Savings / Insight Rows ─────────────────────────────────── */
.best-savings-msg {
  border-radius: 14px;
}

/* ─── Delivery Badge Chip ────────────────────────────────────── */
.delivery-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: #475569;
}
.delivery-chip svg { color: #3b82f6; }

/* ─── Smart Provider Badges ──────────────────────────────────── */
.smart-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .03em;
}
.smart-badge-fastest {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #4338ca;
}
.smart-badge-trending {
  background: #dcfce7; color: #15803d;
}
.smart-badge-dropping {
  background: #fee2e2; color: #b91c1c;
}

/* ─── Rate Trend Sparkline Row ───────────────────────────────── */
#trend-sparkline-row {
  border-radius: 14px;
  background: var(--aya-bg-subtle);
  border: 1px solid var(--aya-border-card);
}

/* ─── Mobile Optimizations ───────────────────────────────────── */
@media (max-width: 390px) {
  .rate-card-premium {
    border-radius: 18px;
  }
  .send-now-btn,
  .aya-cta-btn {
    font-size: 12px;
    padding: 10px 18px;
  }
  .rc-amount {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .aya-intelligence-card {
    border-radius: 18px;
  }
}

/* ─── Scroll Reveal Lift ─────────────────────────────────────── */
@keyframes cardLiftIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Trust / Compliance Strip ───────────────────────────────── */
.trust-strip {
  border-top: 1px solid var(--aya-border-card);
}

/* ─── Interstitial / Handoff Page ────────────────────────────── */
.handoff-premium-card {
  background: #ffffff;
  border: 1px solid rgba(214,222,234,.70);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(15,23,42,.10), 0 4px 16px rgba(15,23,42,.06);
}

html.dark .handoff-premium-card {
  background: #1e293b;
  border-color: rgba(51,65,85,.60);
  box-shadow: 0 24px 80px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.20);
}

.handoff-corridor-pill {
  background: linear-gradient(135deg, #f8faff, #f0f5ff);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 20px;
}

html.dark .handoff-corridor-pill {
  background: linear-gradient(135deg, rgba(30,41,59,.80), rgba(23,37,84,.40));
  border-color: rgba(59,130,246,.20);
}

.handoff-amount-display {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 18px;
}

html.dark .handoff-amount-display {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(29,78,216,.08));
  border-color: rgba(59,130,246,.20);
}

/* ─── Country Picker Modal Upgrades ──────────────────────────── */
.country-picker-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Widget / B2B Embed ─────────────────────────────────────── */
.widget-embed-card {
  border-radius: var(--aya-r-card);
  box-shadow: var(--aya-shadow-card-md);
  border: 1px solid var(--aya-border-card);
}

/* ─── Dark Mode Provider Card ────────────────────────────────── */
html.dark .rate-card-premium {
  background: rgba(30,41,59,.96);
}
html.dark .rate-card-best {
  background: linear-gradient(160deg, rgba(30,41,59,.98) 0%, rgba(23,37,84,.20) 100%);
}

/* ─── Section Divider Label ──────────────────────────────────── */
.providers-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ─── All-Providers Send-Now Buttons — Unified Blue ──────────── */
/* Override the dark-slate send now button with blue for all cards */
.rate-card-premium .send-now-btn {
  background: linear-gradient(160deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: var(--aya-shadow-btn);
}
.rate-card-premium .send-now-btn:hover {
  box-shadow: var(--aya-shadow-btn-hover);
}

/* ─── Personalized Banner ────────────────────────────────────── */
#aya-personalized-banner > div {
  background: var(--aya-bg-subtle);
  border-color: var(--aya-border-card);
  border-radius: 14px;
  font-family: var(--aya-font);
}

html.dark #aya-personalized-banner > div {
  background: rgba(30,41,59,.60);
}

/* ─── Timing Insight Strip ───────────────────────────────────── */
#aya-timing-strip {
  font-family: var(--aya-font);
  border-radius: 12px;
}

/* ─── Alert Button (Create Rate Alert) ───────────────────────── */
.alert-trigger-btn {
  font-family: var(--aya-font);
  font-weight: 600;
  transition: all .15s ease;
}

/* ─── Parity Result / Re-quote Modal ────────────────────────── */
#rate-changed-modal,
.rate-parity-modal {
  border-radius: var(--aya-r-modal);
  box-shadow: 0 24px 80px rgba(15,23,42,.20);
}

/* ─── Conversion Prompt (Post-Handoff) ───────────────────────── */
.conversion-prompt-card {
  border-radius: var(--aya-r-card);
  box-shadow: var(--aya-shadow-card-md);
}

/* ─── SEO / Corridor Landing Upgrade ────────────────────────── */
.corridor-hero-card {
  border-radius: 24px;
  box-shadow: var(--aya-shadow-card-md);
}

/* ─── Smooth page entry ──────────────────────────────────────── */
.htmx-settling .rate-card-premium,
.htmx-settling .aya-intelligence-card {
  animation: cardLiftIn 220ms cubic-bezier(.22,1,.36,1) forwards;
}