/* ============================================================
   assets/css/app.css
   Global look & feel. Define brand tokens here ONCE - every page
   links this stylesheet and inherits them.
   ============================================================ */

:root {
  --brand: #0d6efd;
  --brand-dark: #0a58ca;
  --radius: 0.75rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* Tap/press feedback for anything marked data-tap */
[data-tap] {
  transition: transform 0.08s ease;
}
[data-tap]:active {
  transform: scale(0.96);
}

.spin-on-click.active i {
  animation: spin 0.5s ease;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.btn, .card, .form-control {
  border-radius: var(--radius);
}

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Offline banner (shown by app.js when navigator.onLine === false) */
.offline-banner {
  position: fixed;
  bottom: calc(1rem + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: #212529;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  z-index: 2000;
}

/* ============================================================
   Public marketing pages (index.php, about.php, contact.php)
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #5b3cd6 100%);
  color: #fff;
}
.hero .lead { color: rgba(255, 255, 255, 0.88); }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}
.hero-search {
  background: #fff;
  border-radius: calc(var(--radius) + 0.25rem);
  padding: 0.5rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}
.hero-search .form-control,
.hero-search .form-select { border: 0; box-shadow: none; }
.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.1);
  color: var(--brand);
  font-size: 1.4rem;
}
.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}
.lift { transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  .lift:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .lift, [data-tap] { transition: none; }
  .spin-on-click.active i { animation: none; }
}