/* Futuristic minimalist theme utilities */
:root {
  --accent: #98ea6c; /* neon green */
  --ink: #102216; /* dark ink */
  --bg-dark: #0A140D;
}

/* Light-mode default text color utility to match index */
.text-ink { color: var(--ink) !important; }

/* Light-mode enforcement helpers for chips and rate pill */
html:not(.dark) .force-light-chip {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
html:not(.dark) .force-light-chip:hover {
  background-color: #f9fafb !important; /* gray-50 */
}
html:not(.dark) .force-light-chip .material-symbols-outlined,
html:not(.dark) .force-light-chip span {
  color: #000000 !important;
}

html:not(.dark) .rate-pill {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

/* Ensure numeric amounts are visible in light mode */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important; /* Safari/WebKit */
}
html:not(.dark) #transferFeeDisplay,
html:not(.dark) #speedFeeDisplay,
html:not(.dark) #totalPay,
html:not(.dark) .speed-amount {
  color: #000000 !important;
}

/* Ensure balance value is visible in light mode */
html:not(.dark) #balanceValue {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/***** Glass + Neo edges *****/
.glass { background: rgba(255,255,255,0.6); backdrop-filter: saturate(120%) blur(14px); border: 1px solid rgba(255,255,255,0.35); }
.dark .glass { background: rgba(23, 33, 17, 0.5); border-color: rgba(255,255,255,0.08); }
.neo-edge { box-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 8px 30px -8px rgba(0,0,0,0.25); }
.neon-soft { box-shadow: 0 0 0 1px rgba(152, 234, 108, 0.28), 0 0 24px rgba(152, 234, 108, 0.2); }

/***** Buttons *****/
.btn-neo { border: 1px solid rgba(255,255,255,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); color: var(--ink); }
.dark .btn-neo { border-color: rgba(255,255,255,0.08); background: rgba(23,33,17,0.5); color: #EAF7E4; }
.btn-ghost { border: 1px solid rgba(255,255,255,0.25); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); }

/***** Background grid + orbs *****/
.grid-lines { background-image: linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.08) calc(100% - 1px)), linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.08) calc(100% - 1px)); background-size: 24px 24px, 24px 24px; background-position: top left, top left; }
.accent-glow { position: relative; }
.accent-glow:before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 1px rgba(152,234,108,0.2), 0 0 60px rgba(152,234,108,0.12) inset; }
.orb { position:absolute; width: 48vmin; height: 48vmin; border-radius: 9999px; filter: blur(40px); opacity: 0.22; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); }

/***** Motion *****/
@media (prefers-reduced-motion: no-preference) {
  .hover-rise { transition: transform 180ms ease, box-shadow 240ms ease, background 240ms ease; }
  .hover-rise:hover { transform: translateY(-2px); }
  .hover-press { transition: transform 180ms ease; }
  .hover-press:hover { transform: translateY(-1px) scale(1.01); }
}

/***** Focus ring *****/
.focus-ring { outline: none; box-shadow: 0 0 0 3px rgba(152, 234, 108, 0.35); }

/***** Subtle noise (optional add with ::after) *****/
.noise { position: relative; }
.noise:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.06; background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'140\' height=\'140\' viewBox=\'0 0 140 140\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>'); mix-blend-mode: overlay; }

/* --- Shared button utilities to match index --- */
.btn-primary {
  background-color: #9FE870;
  color: #102216;
  border-radius: 9999px;
  font-weight: 600;
  padding: 0.9rem 1.25rem;
  transition: background-color 180ms ease, transform 150ms ease, box-shadow 180ms ease;
}
.btn-primary:hover { background-color: #8BD45F; }
.btn-primary:active { background-color: #102216; color: #9FE870; }

.btn-dark {
  background-color: #163300;
  color: #9FE870;
  border-radius: 9999px;
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  transition: background-color 180ms ease, transform 150ms ease, box-shadow 180ms ease;
}
.btn-dark:hover { background-color: #1E3A00; }
.btn-dark:active { background-color: #9FE870; color: #163300; }

.btn-liquid { 
  background: rgba(255, 255, 255, 0.14);
  color: #102216;
  border: none;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.18);
  transition: background 180ms ease, box-shadow 220ms ease, transform 160ms ease;
  position: relative; overflow: hidden;
}
.btn-liquid:hover { 
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 28px rgba(0,0,0,0.22);
}
.btn-liquid::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.04)); opacity: 0.0; transition: opacity 200ms ease; }
.btn-liquid:hover::before { opacity: 1; }
.dark .btn-liquid {
  background: rgba(23, 33, 17, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35);
  color: #EAF7E4;
}
.dark .btn-liquid:hover { background: rgba(23, 33, 17, 0.55); }

.btn-liquid-item { position: relative; border: none; background: transparent; -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); transition: background 160ms ease, box-shadow 200ms ease; }
.btn-liquid-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); opacity: 0; transition: opacity 160ms ease; }
.btn-liquid-item:hover::before { opacity: 1; }
.dark .btn-liquid-item::before { background: rgba(23,33,17,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

/* Inputs and numeric animation helpers */
.input-glow { transition: box-shadow 180ms ease, background-color 180ms ease; }
.input-glow:focus { outline: none; box-shadow: 0 0 0 3px rgba(159, 232, 112, 0.45); background-color: rgba(159, 232, 112, 0.06); }
.number-tween { transition: color 240ms ease; }
.flash-updated { color: #163300 !important; background: linear-gradient(transparent 60%, rgba(159,232,112,0.35)); border-radius: 4px; }
@keyframes squishY { 0% { transform: scaleY(0.98); } 100% { transform: scaleY(1); } }
.squish-once { animation: squishY 180ms ease-out; }
@keyframes micro-bounce { 0% { transform: scale(1); } 25% { transform: scale(1.08); } 60% { transform: scale(0.98); } 100% { transform: scale(1); } }
.bounce-once { animation: micro-bounce 420ms cubic-bezier(.2,.8,.2,1); }
.rotate-tilt { transform: rotate(8deg); }

/* Light green highlight for selected speed (more visible than primary/10) */
html:not(.dark) .speed-green {
  background-color: rgba(159, 232, 112, 0.18) !important; /* ~18% */
}
.dark .speed-green {
  background-color: rgba(159, 232, 112, 0.20) !important; /* slight bump in dark */
}

/* Force dropdown menus to be light in light mode */
html:not(.dark) #paymentMethodMenu,
html:not(.dark) #collectionMethodMenu,
html:not(.dark) #sendCurrencyMenu,
html:not(.dark) #receiveCurrencyMenu {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
}
/* Light-mode dropdown item hover */
html:not(.dark) .btn-liquid-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Keyboard focus visibility for speed cards (accessibility) */
.speed-option:focus-visible {
  outline: 2px solid rgba(159, 232, 112, 0.35);
  outline-offset: 2px;
}
html:not(.dark) #paymentMethodMenu .material-symbols-outlined,
html:not(.dark) #collectionMethodMenu .material-symbols-outlined,
html:not(.dark) #sendCurrencyMenu .material-symbols-outlined,
html:not(.dark) #receiveCurrencyMenu .material-symbols-outlined,
html:not(.dark) #paymentMethodMenu span,
html:not(.dark) #collectionMethodMenu span,
html:not(.dark) #sendCurrencyMenu span,
html:not(.dark) #receiveCurrencyMenu span,
html:not(.dark) #paymentMethodMenu .btn-liquid-item,
html:not(.dark) #collectionMethodMenu .btn-liquid-item,
html:not(.dark) #sendCurrencyMenu .btn-liquid-item,
html:not(.dark) #receiveCurrencyMenu .btn-liquid-item {
  color: #000 !important;
}