@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* SmoothPay Theme Custom Colors + UI */
:root {
  --sp-red: #ff5757;
  --sp-green: #56c035;
  --sp-dark: #414042;
  --sp-muted: rgba(255,255,255,0.08);
  --sp-card: rgba(255,255,255,0.04);
  --sp-bg: var(--sp-dark);
  --sp-text: #fff;
}


body.light-mode {
  --sp-bg: #f7f8fa;
  --sp-card: #fff;
  --sp-muted: #f1f3f7;
  --sp-text: #23272f;
  --sp-border: #d1d5db;
  --sp-input: #f1f3f7;
  --sp-placeholder: #8a929e;
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
}

.light-mode .glass-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
  box-shadow: 0 2px 12px rgba(86,192,53,0.04);
}
.light-mode .accent-btn {
  background: linear-gradient(90deg, var(--sp-green) 0%, #38b24a 100%);
  color: #fff;
  border: none;
}
.light-mode .quick-amount {
  background: linear-gradient(90deg, var(--sp-green) 0%, #38b24a 100%);
  color: #fff;
  border: 1px solid var(--sp-green);
}
.light-mode .quick-amount.active {
  border-color: var(--sp-green);
  color: #fff;
}
.light-mode .input-icon {
  background: var(--sp-input);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
}
.light-mode .input-icon input {
  color: var(--sp-text);
  background: transparent;
}
.light-mode .input-icon input::placeholder {
  color: var(--sp-placeholder);
  opacity: 1;
}
.light-mode .field-focus:focus {
  box-shadow: 0 0 0 3px rgba(86,192,53,0.14);
  border-color: rgba(86,192,53,0.3);
}
.light-mode .testimonial-card {
  background: #fff;
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
}
.light-mode .border-white\/8 {
  border-color: var(--sp-border) !important;
}
.light-mode .text-white {
  color: var(--sp-text) !important;
}
.light-mode .text-slate-200, .light-mode .text-slate-300, .light-mode .text-slate-400 {
  color: #4b5563 !important;
}
.light-mode .bg-transparent {
  background: var(--sp-input) !important;
}
.light-mode .bg-[var(--sp-dark)] {
  background: var(--sp-bg) !important;
}
.light-mode .border-white\/10 {
  border-color: var(--sp-border) !important;
}
.light-mode .border-white\/8 {
  border-color: var(--sp-border) !important;
}
.light-mode .bg-black\/90 {
  background: #f1f3f7 !important;
  color: var(--sp-text) !important;
}
.light-mode .bg-[var(--sp-green)]\/10 {
  background: #e6f9ea !important;
  color: var(--sp-green) !important;
}
.light-mode .bg-[var(--sp-red)]\/10 {
  background: #ffeaea !important;
  color: var(--sp-red) !important;
}
.light-mode .bg-[var(--sp-green)]\/12 {
  background: #e6f9ea !important;
  color: var(--sp-green) !important;
}
.light-mode .bg-[var(--sp-red)]\/12 {
  background: #ffeaea !important;
  color: var(--sp-red) !important;
}
.light-mode .bg-slate-700 {
  background: #e5e7eb !important;
}
.light-mode .bg-slate-900 {
  background: #23272f !important;
}
.light-mode .text-[var(--sp-green)] {
  color: var(--sp-green) !important;
}
.light-mode .text-[var(--sp-red)] {
  color: var(--sp-red) !important;
}
.light-mode .border-[var(--sp-green)]\/20 {
  border-color: #b7eac2 !important;
}
.light-mode .border-[var(--sp-red)]\/20 {
  border-color: #ffd6d6 !important;
}
.light-mode .border-[var(--sp-green)]\/8 {
  border-color: #b7eac2 !important;
}
.light-mode .border-[var(--sp-red)]\/8 {
  border-color: #ffd6d6 !important;
}
.light-mode .border-[var(--sp-green)]\/30 {
  border-color: #b7eac2 !important;
}
.light-mode .border-red-400 {
  border-color: #f87171 !important;
}
.light-mode .border-[var(--sp-green)] {
  border-color: var(--sp-green) !important;
}
.light-mode .border-[var(--sp-red)] {
  border-color: var(--sp-red) !important;
}
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Glass card */
.glass-card {
  background: var(--sp-card);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1rem;
}

/* Accent button */
.accent-btn {
  background: linear-gradient(90deg, var(--sp-green) 0%, #38b24a 100%);
  color: #fff;
  border-radius: .75rem;
  padding: .65rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(86,192,53,0.12);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.accent-btn:active { transform: translateY(1px); }
.accent-btn:disabled { opacity: .7; transform:none; }

/* Quick amount pills */
.quick-amount {
  background: linear-gradient(90deg, var(--sp-green) 0%, #38b24a 100%);
  color: #fff;
  border: 1px solid var(--sp-green);
  padding: .45rem .9rem;
  border-radius: .7rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(86,192,53,0.10);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.quick-amount:hover {
  background: linear-gradient(90deg, #38b24a 0%, var(--sp-green) 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px rgba(86,192,53,0.18);
}
.quick-amount.active {
  background: linear-gradient(90deg, var(--sp-green) 0%, #38b24a 100%);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 4px 16px rgba(86,192,53,0.22);
}

/* Form inputs */
.input-icon { display: inline-flex; align-items:center; gap:.6rem; }
.input-icon input { background: transparent; border: none; outline: none; color: #fff; }
.input-icon svg { opacity: .9; }

/* Tiny spinner */
@keyframes spintiny { to { transform: rotate(360deg);} }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.9); animation: spintiny .8s linear infinite; display:inline-block; }

/* Micro interactions */
.card-hero-accent { background: linear-gradient(135deg, rgba(86,192,53,0.12), rgba(255,87,87,0.06)); padding: .75rem; border-radius: .8rem; }

/* accessibility focus */

/* Mobile-first adjustments */
.quick-amount { min-height: 44px; display:inline-flex; align-items:center; justify-content:center; font-size:0.95rem; }
.input-icon input,
input[type="number"],
input[type="tel"] { min-height: 48px; }
.accent-btn { padding: .9rem 1rem; font-size: 1rem; }

@media (min-width: 640px) {
  .accent-btn { padding: .65rem 1.1rem; }
}

.field-focus:focus { box-shadow: 0 0 0 4px rgba(86,192,53,0.09); border-color: rgba(86,192,53,0.3); }
.field-focus:focus { box-shadow: 0 0 0 3px rgba(86,192,53,0.14); border-color: rgba(86,192,53,0.3); }

/* Step badges for checkout fields */
.step-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:9999px;
  background:var(--sp-green);
  color:#fff;
  font-weight:700;
  font-size:0.8rem;
  line-height:1;
}
.light-mode .step-badge { background:var(--sp-green); color:#fff; }
.label-with-step { display:flex; align-items:center; gap:0.5rem; }
.step-note { font-size:0.75rem; color:var(--sp-placeholder); margin-top:4px; }

/* Discount pill shown on checkout card */
.discount-pill {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.25rem 0.6rem;
  border-radius:9999px;
  background:rgba(86,192,53,0.06);
  color:var(--sp-green);
  font-weight:700;
  font-size:0.85rem;
}
.light-mode .discount-pill { background:rgba(86,192,53,0.06); color:var(--sp-green); }
/* ensure inputs stack nicely on small screens */
@media (max-width: 639px) {
  .checkout-stack-sm { flex-direction:column; align-items:stretch; }
}

/* Checkout step separators for clean interface */
.checkout-step {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 1.5rem;
}
.checkout-step:last-child {
  border-bottom: none;
}
.light-mode .checkout-step {
  border-bottom-color: rgba(0,0,0,0.08);
}

/* Testimonials */
.testimonial-card { transition: transform .18s ease, box-shadow .18s ease; }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }