/* Betting App — custom CSS additions on top of Tailwind CDN */

/* ── Safe-area insets for iPhone home indicator ─────────────────────────────── */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bottom nav respects iPhone home-bar */
#bottom-nav {
  padding-bottom: max(8px, var(--safe-bottom));
}

/* Main content gets enough padding so content isn't hidden behind the nav */
#page-content {
  padding-bottom: calc(4rem + max(8px, var(--safe-bottom)));
}

/* ── Scrollbar styling (WebKit) ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}

/* ── Prevent text size adjustment on orientation change ─────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

/* ── Tap highlight colour ───────────────────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Filter pills (bets page) ───────────────────────────────────────────────── */
.filter-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #1e293b;     /* slate-800 */
  color: #94a3b8;          /* slate-400 */
  border: 1px solid #334155; /* slate-700 */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;          /* emerald-400 */
  border-color: rgba(16, 185, 129, 0.35);
}

/* ── Hide scrollbar (filter rows) ──────────────────────────────────────────── */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #1e293b;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}