/* ============================================================================
   GLOSS · FinWise edition — supplement to Tailwind
   ============================================================================ */

:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --svh: 1vh;
}

* { -webkit-tap-highlight-color: transparent; }
*::selection { background: #2EE6A8; color: #0B1A1F; }

html { scroll-behavior: smooth; }
html, body { font-feature-settings: 'cv05', 'cv11'; }

/* iOS prevent zoom on input focus by using 16px min */
input, textarea, select { font-size: 16px; }
input::placeholder, textarea::placeholder { color: #A5B0B5; }

/* Hide scrollbar but keep functional */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe-area utilities (Tailwind v3 doesn't ship these by default) */
.pt-safe   { padding-top: max(env(safe-area-inset-top), 0px); }
.pb-safe   { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.pl-safe   { padding-left: max(env(safe-area-inset-left), 0px); }
.pr-safe   { padding-right: max(env(safe-area-inset-right), 0px); }
.mb-safe   { margin-bottom: max(env(safe-area-inset-bottom), 0px); }
.h-svh     { height: 100vh; height: 100dvh; }
.min-h-svh { min-height: 100vh; min-height: 100dvh; }

/* Active state for taps — used on cards and buttons */
.tap { transition: transform 160ms cubic-bezier(.4,0,.2,1); }
.tap:active { transform: scale(0.97); }
.tap-soft:active { transform: scale(0.985); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #D9E8DC 0%, #EAF7EE 50%, #D9E8DC 100%);
  background-size: 1000px 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }

/* Number tabular for currency / counts */
.tabular { font-variant-numeric: tabular-nums; }

/* Tap ripple for buttons */
.btn-ripple { position: relative; overflow: hidden; }

/* Backdrop blur fallback */
.backdrop-blur-glass {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* Hide horizontal scrollbars on chip rows */
.scrollx { overflow-x: auto; }
.scrollx::-webkit-scrollbar { display: none; }
.scrollx { scrollbar-width: none; }

/* Hero balance pattern */
.hero-pattern {
  background-image:
    radial-gradient(circle at 85% -10%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(7,131,87,0.45), transparent 60%);
}

/* Card glass for floating elements */
.glass-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* iOS bounce fix — only scroll content, not body */
body { overscroll-behavior-y: contain; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Custom number font weight for big balances */
.numeric-display {
  font-feature-settings: 'tnum', 'lnum';
  letter-spacing: -0.04em;
}

/* Flash messages slide-down */
.flash-enter {
  animation: flashIn .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slot picker tile selected pulse */
.slot-selected {
  background: #0B1A1F !important;
  color: #FFFFFF !important;
  border-color: #0B1A1F !important;
}

/* Mint primary button focus */
.btn-mint:focus-visible {
  outline: 3px solid rgba(46,230,168,0.4);
  outline-offset: 2px;
}

/* Bottom-sheet handle */
.sheet-handle {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: #BCD3C0;
  margin: 0 auto 16px;
}

/* Stagger animation helper — only hide if JS is ready (avoids invisible content if JS fails) */
html.js [data-fx]:not(.is-shown) { opacity: 0; transform: translateY(18px); }
html.js [data-fx].is-shown { animation: fadeUp .65s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Pill toggle active state for filter chips */
.chip-active { background: #0B1A1F !important; color: #FFFFFF !important; }