/* ========================================================================
   MyGiftCards Balance — Overrides
   Pattern: Minimal Single Column · Flat Design · Inter
   Goals: lighten dark form header, tighten layout, fix hierarchy
   ======================================================================== */

/* ─── Form: dark header → clean light ──────────────────────────────────── */
[class*="from-surface-900"][class*="to-surface-900"] {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[class*="from-surface-900"] h2.text-white {
  color: #0f172a !important;
  font-size: 17px !important;
}
@media (min-width: 640px) {
  [class*="from-surface-900"] h2.text-white {
    font-size: 18px !important;
  }
}
[class*="from-surface-900"] p.text-white\/40 {
  color: #64748b !important;
}
[class*="from-surface-900"] .bg-white\/10 {
  background: #f1f5f9 !important;
}
[class*="from-surface-900"] .text-white\/60 {
  color: #475569 !important;
}
[class*="from-surface-900"] .text-white\/30 {
  color: #94a3b8 !important;
}
[class*="from-surface-900"] .text-emerald-300 {
  color: #047857 !important;
}
[class*="from-surface-900"] .text-emerald-300\/60 {
  color: #047857 !important;
}
[class*="from-surface-900"] .bg-emerald-500\/30 {
  background: #d1fae5 !important;
}
/* Hide decorative dot pattern + blue glow in header (designed for dark bg) */
[class*="from-surface-900"] [style*="radial-gradient(circle at 1px 1px, white"],
[class*="from-surface-900"] .bg-primary-500\/10 {
  display: none !important;
}
[class*="from-surface-900"] .border-white\/10,
[class*="from-surface-900"] .bg-white\/10.w-4 {
  background: #e2e8f0 !important;
}

/* ─── Hero heading: bigger, more presence on desktop ───────────────────── */
@media (min-width: 1024px) {
  h1.animate-fade-in-up.font-extrabold {
    font-size: 56px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }
}

/* ─── Trust badges row above hero (Secure / Encrypted / No Storage) ──── */
.flex.items-center.gap-3.text-\[11px\],
.flex.items-center.gap-3.text-\[12px\] {
  gap: 16px !important;
}

/* ─── "Three simple steps" cards: bigger on desktop ────────────────────── */
@media (min-width: 1024px) {
  /* Generic card-elevated bigger min-height */
  .card-elevated {
    padding: 28px 24px !important;
  }
}

/* ─── Section spacing: tighter, more cohesive ──────────────────────────── */
section {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: clamp(48px, 6vw, 72px) !important;
}
@media (max-width: 640px) {
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ─── CTA section dark button: brand color instead of black ───────────── */
button.bg-surface-950,
a.bg-surface-950 {
  background-color: #2b5cfc !important;
}
button.bg-surface-950:hover,
a.bg-surface-950:hover {
  background-color: #1e47d1 !important;
}

/* ─── Testimonials cards: cleaner, less grey ──────────────────────────── */
.bg-white\/60 {
  background: #ffffff !important;
}

/* ─── Footer: tighter ──────────────────────────────────────────────────── */
footer {
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}

/* ─── Reduced motion: respect user preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Form fields: cleaner focus ring ──────────────────────────────────── */
input:focus,
select:focus,
button:focus-visible {
  outline: 2px solid #2b5cfc !important;
  outline-offset: 2px !important;
}

/* ─── Provider grid (homepage Supported Providers): bigger cards ──────── */
@media (min-width: 1024px) {
  section .grid.grid-cols-2,
  section .grid.sm\:grid-cols-3,
  section .grid.sm\:grid-cols-4 {
    gap: 16px !important;
  }
}