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

* { font-family: "Inter", system-ui, sans-serif; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Mobile bottom nav spacing */
@media (max-width: 767px) {
  main { padding-bottom: 3.5rem; }
}

/* Slider */
.slider { position: relative; overflow: hidden; border-radius: 0.75rem; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slider-track > * { flex: 0 0 100%; min-width: 100%; }
.slider img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/7; }
@media (max-width: 767px) { .slider img { aspect-ratio: 16/9; } }
.slider-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
.slider-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.3s; }
.slider-dot.active { background: white; transform: scale(1.3); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: white; border: none; padding: 0.75rem; cursor: pointer; border-radius: 50%; backdrop-filter: blur(4px); transition: background 0.3s; }
.slider-btn:hover { background: rgba(0,0,0,0.5); }
.slider-prev { left: 0.5rem; }
.slider-next { right: 0.5rem; }

/* Cards */
.card { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }

/* Quick action buttons */
.quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.25rem 0.75rem; background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); text-align: center; transition: all 0.2s; cursor: pointer; text-decoration: none; color: inherit; }
.quick-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.quick-btn svg { width: 2rem; height: 2rem; }
.quick-btn span { font-size: 0.75rem; font-weight: 600; line-height: 1.2; }

/* Bottom nav active state */
.bottom-nav-item.active { color: #1e3a6e; }
.bottom-nav-item.active svg { stroke-width: 2.5; }

/* Loading spinner */
.spinner { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #1e3a6e; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in animation */
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Form inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem;
  font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; background: white;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #1e3a6e; box-shadow: 0 0 0 3px rgba(30,58,110,0.1); }

/* Sponsor strip */
.sponsor-strip { display: flex; gap: 2rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: none; }
.sponsor-strip::-webkit-scrollbar { display: none; }
.sponsor-strip img { height: 3rem; width: auto; object-fit: contain; opacity: 0.7; transition: opacity 0.3s; flex-shrink: 0; }
.sponsor-strip img:hover { opacity: 1; }

/* Tabs */
.tab-btn { padding: 0.5rem 1rem; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.2s; cursor: pointer; white-space: nowrap; }
.tab-btn.active { border-bottom-color: #1e3a6e; color: #1e3a6e; }