/* ================================================================
   AyaSend Premium Fintech v2 — Component Library
   Covers: quick-action cards, tab switchers, step flow,
           operator rows, amount tiles, checkout, family hub,
           success/error screens, empty states, bottom nav.
   ================================================================ */

/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes iconPulse{0%,to{filter:drop-shadow(0 0 8px rgba(0,180,255,.4))}50%{filter:drop-shadow(0 0 12px rgba(0,180,255,.6))}}
@keyframes badgePop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeInCorridors{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardSlideIn{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fabBounceIn{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}

/* ─── Popular Corridor Cards ─────────────────────────────────── */
.popular-corridor-card{background:#fff;border:0;border-radius:18px;box-shadow:0 10px 25px rgba(15,23,42,.04);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out;font:inherit;text-align:left;outline:0;width:100%}.popular-corridor-card:focus,.popular-corridor-card:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(15,23,42,.08);outline:0}.pc-header{display:flex;flex-direction:column;gap:2px}.pc-flags{display:flex!important;align-items:center!important;gap:4px!important;font-size:18px;line-height:1.3;opacity:1!important;visibility:visible!important}.pc-flag-img{width:20px!important;height:15px!important;border-radius:2px!important;object-fit:cover!important;display:inline-block!important;box-shadow:0 1px 2px rgba(0,0,0,.1)!important;flex-shrink:0!important}.pc-arrow-text{font-size:12px!important;color:#94a3b8!important;font-weight:400!important;margin:0 2px!important}.pc-names{font-size:13px;color:#0f172a;font-weight:500;line-height:1.4}.pc-meta{margin-top:6px;display:flex;align-items:center;justify-content:space-between}.pc-pill{font-size:11px;padding:3px 8px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-weight:500;line-height:1.3}.pc-arrow{font-size:18px;color:#cbd5e1;line-height:1}html.dark .popular-corridor-card{background:#1e293b;box-shadow:0 10px 25px rgba(0,0,0,.3)}html.dark .popular-corridor-card:focus,html.dark .popular-corridor-card:hover{box-shadow:0 16px 35px rgba(0,0,0,.4)}html.dark .pc-names{color:#f1f5f9}

/* ─── Quick-Action Cards — Correct Gradients + Premium Depth ─── */
.quick-action-card {
  position: relative;
  overflow: hidden;
  transition: transform 160ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 160ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.quick-action-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}
.quick-action-card > * { position: relative; z-index: 1; }
.quick-action-card > span,
.quick-action-card span.text-sm {
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: #ffffff !important;
}
.quick-action-card:nth-child(1) {
  background: linear-gradient(140deg, #60a5fa 0%, #3b82f6 40%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,0.36), 0 2px 6px rgba(37,99,235,0.18),
              inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.quick-action-card:nth-child(2) {
  background: linear-gradient(140deg, #6ee7b7 0%, #10b981 40%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16,185,129,0.36), 0 2px 6px rgba(16,185,129,0.18),
              inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.quick-action-card:nth-child(3) {
  background: linear-gradient(140deg, #c4b5fd 0%, #8b5cf6 40%, #6d28d9 100%) !important;
  box-shadow: 0 6px 20px rgba(139,92,246,0.36), 0 2px 6px rgba(139,92,246,0.18),
              inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.quick-action-card:nth-child(4) {
  background: linear-gradient(140deg, #fde68a 0%, #f59e0b 40%, #b45309 100%) !important;
  box-shadow: 0 6px 20px rgba(245,158,11,0.36), 0 2px 6px rgba(245,158,11,0.18),
              inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.quick-action-card:hover { transform: translateY(-3px) scale(1.02); }
.quick-action-card:nth-child(1):hover { box-shadow: 0 14px 36px rgba(37,99,235,0.52), 0 4px 10px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important; }
.quick-action-card:nth-child(2):hover { box-shadow: 0 14px 36px rgba(16,185,129,0.52), 0 4px 10px rgba(16,185,129,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important; }
.quick-action-card:nth-child(3):hover { box-shadow: 0 14px 36px rgba(139,92,246,0.52), 0 4px 10px rgba(139,92,246,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important; }
.quick-action-card:nth-child(4):hover { box-shadow: 0 14px 36px rgba(245,158,11,0.52), 0 4px 10px rgba(245,158,11,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important; }
.quick-action-card:active { transform: translateY(0) scale(0.97) !important; box-shadow: none !important; }
.quick-action-card > div.w-10 {
  background: rgba(255,255,255,0.24) !important;
  backdrop-filter: blur(4px);
  color: #ffffff !important;
}

/* ─── Recharge / Data Tab Switcher ───────────────────────────── */
#recharge-page .flex.gap-1.mb-6,
#data-page .flex.gap-1.mb-6 {
  background: rgba(241,245,249,0.92) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: inset 0 1px 3px rgba(15,23,42,0.04);
}
html.dark #recharge-page .flex.gap-1.mb-6,
html.dark #data-page .flex.gap-1.mb-6 {
  background: rgba(30,41,59,0.85) !important;
  border-color: rgba(51,65,85,0.55) !important;
}
#recharge-page .flex.gap-1.mb-6 span,
#data-page .flex.gap-1.mb-6 span {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.09), 0 1px 2px rgba(15,23,42,0.05) !important;
  color: #15803d !important;
  font-weight: 700 !important;
}
html.dark #recharge-page .flex.gap-1.mb-6 span {
  background: rgba(51,65,85,0.9) !important;
  color: #34d399 !important;
}

/* ─── Step Cards (Recharge / Checkout flow) ──────────────────── */
#step-phone > div,
#operators-card,
#products-card,
#review-card,
#stripe-card-wrapper,
.max-w-2xl .bg-white.rounded-2xl {
  box-shadow: 0 4px 24px rgba(15,23,42,0.07), 0 1px 6px rgba(15,23,42,0.04) !important;
  border-color: rgba(226,232,240,0.78) !important;
  transition: box-shadow 200ms ease;
}
html.dark #step-phone > div,
html.dark #operators-card,
html.dark #products-card,
html.dark #stripe-card-wrapper {
  box-shadow: 0 4px 24px rgba(0,0,0,0.24), 0 1px 6px rgba(0,0,0,0.16) !important;
  border-color: rgba(51,65,85,0.55) !important;
}

/* Step labels */
#step-phone h2,
#operators-card h2,
#products-card h2,
#stripe-card-wrapper h2 {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  color: #94a3b8 !important;
}

/* ─── Operator List Rows ─────────────────────────────────────── */
#operators-card button {
  transition: transform 140ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 140ms ease,
              border-color 140ms ease,
              background-color 140ms ease !important;
}
#operators-card button:hover {
  border-color: rgba(16,185,129,0.50) !important;
  background-color: rgba(240,253,244,0.85) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.12) !important;
}
html.dark #operators-card button:hover {
  background-color: rgba(16,185,129,0.07) !important;
}
#operators-card button:active {
  transform: translateX(1px) scale(0.99) !important;
}
#operators-card button.border-green-400 {
  background: linear-gradient(135deg, rgba(240,253,244,0.9), rgba(220,252,231,0.7)) !important;
  box-shadow: 0 2px 12px rgba(16,185,129,0.14) !important;
}

/* ─── Amount / Product Tiles ─────────────────────────────────── */
#products-card button {
  transition: transform 130ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 130ms ease,
              border-color 130ms ease,
              background-color 130ms ease !important;
}
#products-card button:hover {
  border-color: rgba(16,185,129,0.55) !important;
  background-color: rgba(240,253,244,0.9) !important;
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 8px 20px rgba(16,185,129,0.16) !important;
}
html.dark #products-card button:hover {
  background-color: rgba(16,185,129,0.08) !important;
}
#products-card button:active {
  transform: scale(0.97) !important;
}
#products-card button span.-top-2 {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 2px 6px rgba(16,185,129,0.35) !important;
}

/* ─── CTA Buttons — Green (Recharge) ────────────────────────── */
#find-operators-btn,
#stripe-confirm-btn {
  background: linear-gradient(160deg, #34d399 0%, #10b981 55%, #059669 100%) !important;
  box-shadow: 0 5px 20px rgba(16,185,129,0.40), 0 1px 5px rgba(16,185,129,0.22),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
  letter-spacing: 0.025em !important;
  font-weight: 700 !important;
  transition: transform 150ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 150ms ease !important;
}
#find-operators-btn:hover,
#stripe-confirm-btn:hover {
  box-shadow: 0 10px 30px rgba(16,185,129,0.55), 0 2px 8px rgba(16,185,129,0.28),
              inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-1px) !important;
}
#find-operators-btn:active,
#stripe-confirm-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 10px rgba(16,185,129,0.28) !important;
}

/* ─── Checkout Page ──────────────────────────────────────────── */
.w-12.h-12.rounded-2xl.bg-gradient-to-br {
  box-shadow: 0 3px 10px rgba(99,102,241,0.18) !important;
}
#stripe-card-element {
  border: 1.5px solid rgba(99,102,241,0.28) !important;
  background: rgba(238,242,255,0.30) !important;
  border-radius: 14px !important;
  min-height: 52px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
#stripe-card-element:focus-within {
  border-color: rgba(99,102,241,0.55) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 4px 16px rgba(99,102,241,0.08) !important;
}
html.dark #stripe-card-element {
  background: rgba(30,41,59,0.5) !important;
  border-color: rgba(99,102,241,0.22) !important;
}

/* ─── Stripe Payment Request Button ──────────────────────────── */
#payment-request-btn {
  border-radius: 14px !important;
  overflow: hidden;
}

/* ─── Family Hub — Add Button & FAB ──────────────────────────── */
#family-hub-page button.bg-gradient-to-r {
  box-shadow: 0 4px 16px rgba(37,99,235,0.34), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  transition: transform 150ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 150ms ease !important;
}
#family-hub-page button.bg-gradient-to-r:hover {
  box-shadow: 0 8px 24px rgba(37,99,235,0.50), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px) !important;
}
#family-hub-page .fixed.rounded-full {
  background: linear-gradient(140deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 8px 28px rgba(37,99,235,0.48), 0 2px 8px rgba(37,99,235,0.24) !important;
  animation: fabBounceIn 420ms cubic-bezier(0.175,0.885,0.32,1.275) both;
}

/* Empty-state dashed borders */
[class*="border-dashed"],
.border-dashed {
  border: 1.5px dashed rgba(148,163,184,0.55) !important;
  background: rgba(248,250,252,0.7) !important;
  transition: border-color 160ms ease, background 160ms ease;
}
html.dark [class*="border-dashed"] {
  border-color: rgba(71,85,105,0.55) !important;
  background: rgba(15,23,42,0.5) !important;
}
[class*="border-dashed"]:hover {
  border-color: rgba(59,130,246,0.45) !important;
  background: rgba(239,246,255,0.6) !important;
}

/* ─── Bottom Navigation Tab Bar ──────────────────────────────── */
.fixed.bottom-0.inset-x-0.z-40,
.fixed.bottom-0.left-0.right-0 {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-top: 1px solid rgba(226,232,240,0.75) !important;
  box-shadow: 0 -4px 24px rgba(15,23,42,0.06), 0 -1px 4px rgba(15,23,42,0.03) !important;
}
html.dark .fixed.bottom-0.inset-x-0.z-40,
html.dark .fixed.bottom-0.left-0.right-0 {
  background: rgba(10,15,28,0.94) !important;
  border-top-color: rgba(51,65,85,0.5) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.32), 0 -1px 4px rgba(0,0,0,0.18) !important;
}

/* ─── Sandbox / Info Banners ─────────────────────────────────── */
.bg-amber-50.border-amber-200,
div.bg-amber-50 {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: rgba(251,191,36,0.35) !important;
  border-radius: 14px !important;
}
html.dark div.bg-amber-50 {
  background: rgba(120,53,15,0.15) !important;
}

/* ─── Section Labels ─────────────────────────────────────────── */
.text-sm.font-semibold.text-slate-700.dark\:text-slate-300.uppercase,
.text-sm.font-semibold.uppercase.tracking-wide {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
}
html.dark .text-sm.font-semibold.text-slate-700.dark\:text-slate-300.uppercase {
  color: #64748b !important;
}