/* ============================================================
   VoraPay — native-app UI polish
   Loaded on every page via shared/preloader.php (after page CSS)
   Design language mirrors a modern native wallet app:
   soft hairlines, 12-20px radii, 600/700/800 weights, tactile
   press states, frosted sticky bars, no desktop-y scrollbars.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
}

a, button, .qa-item, .feat-banner, .ov-pill, .txn-item {
  touch-action: manipulation;
}

img { -webkit-user-drag: none; }

::selection { background: rgba(10, 102, 71, .16); }

/* ── Frosted sticky topbar (shared by every page) ── */
.topbar {
  background: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .05);
}

/* ── Native form controls ── */
input[type=text],
input[type=tel],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=url],
select,
textarea {
  font-size: 16px; /* >=16px stops iOS Safari focus-zoom */
  color: #0D1F16;
  background: #F8F9FC;
  border: 1.5px solid #E4E7EF;
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--p, #0A6647);
  box-shadow: 0 0 0 4px rgba(10, 102, 71, .10);
}

textarea { line-height: 1.5; resize: vertical; }

button { font-family: inherit; }

/* ── Tactile press states ── */
.topbar .back-btn,
.icon-btn,
.qa-item,
.ov-pill,
.kb-btn,
.wc-btn,
.nav-item,
.promo-btn,
.modal-btn {
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.topbar .back-btn:active,
.icon-btn:active,
.qa-item:active,
.ov-pill:active,
.kb-btn:active,
.wc-btn:active {
  transform: scale(.95);
}

/* ── Cards: soft native shadow ── */
.txn-card,
.t-card,
.card,
.wt-card {
  box-shadow: 0 1px 3px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .04);
}

/* ── Bottom nav float ── */
.bottom-nav {
  box-shadow: 0 -8px 28px rgba(17, 24, 39, .07);
}

/* ── Slim scrollbars (desktop only; hidden rails stay hidden) ── */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .16); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .28); }
html { scrollbar-width: thin; scrollbar-color: rgba(17, 24, 39, .18) transparent; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}