/* Manish Taxi Service — Crimson Obsidian Design System */

:root {
  --primary: #E30613;
  --on-primary: #ffffff;

  /* Dark surface hierarchy */
  --surface: #111111;
  --on-surface: #e5e2e1;
  --surface-container: #1c1b1b;
  --surface-container-low: #161515;
  --surface-container-lowest: #0e0e0e;
  --surface-container-high: #2a2a2a;
  --inverse-surface: #e5e2e1;
  --on-surface-variant: #e9bcb6;
  --outline-variant: #5e3f3b;
}

/* ── Global base ──────────────────────────────────────────────────── */
body {
  background: #111111 !important;
  color: #e5e2e1 !important;
  font-family: 'Manrope', sans-serif;
}

/* ── Typography ──────────────────────────────────────────────────── */
.font-headline { font-family: "Manrope", sans-serif; }
.font-body     { font-family: "Manrope", sans-serif; }

/* ── Override Tailwind light classes ─────────────────────────────── */
.bg-white, .bg-white\/90 {
  background-color: #1c1b1b !important;
}
.bg-slate-50, .bg-gray-50 {
  background-color: #161515 !important;
}
.bg-slate-100, .bg-gray-100 {
  background-color: #1c1b1b !important;
}

/* Text overrides */
.text-slate-900, .text-gray-900, .text-on-surface { color: #e5e2e1 !important; }
.text-slate-700, .text-gray-700 { color: #c8c6c5 !important; }
.text-slate-600, .text-gray-600 { color: #a09e9d !important; }
.text-slate-500, .text-gray-500 { color: #787676 !important; }
.text-slate-400, .text-gray-400 { color: #5e5c5b !important; }

/* Border overrides */
.border-gray-100, .border-gray-200, .border-slate-200 {
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Nav ──────────────────────────────────────────────────────────── */
nav {
  background: rgba(17,17,17,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px);
}
nav a { color: rgba(255,255,255,0.75) !important; }
nav a:hover { color: #fff !important; }
nav a.text-primary { color: #E30613 !important; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card, .rounded-xl, .rounded-2xl, .rounded-lg {
  background-color: #1c1b1b;
}

/* White cards inside dark sections stay dark */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg {
  background-color: #1c1b1b !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Pricing section overrides ────────────────────────────────────── */
.border-slate-200 { border-color: rgba(255,255,255,0.06) !important; }
.shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; }
.shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }

/* ── Form inputs ──────────────────────────────────────────────────── */
input, select, textarea {
  background: #1c1b1b !important;
  color: #e5e2e1 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.25) !important; }
input:focus, select:focus, textarea:focus {
  border-color: #E30613 !important;
  box-shadow: 0 0 0 2px rgba(227,6,19,0.15) !important;
}

/* ── Material Icons ────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.animate-bounce-subtle { animation: bounce-subtle 3s ease-in-out infinite; }

@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(227,6,19,0);   }
  100% { box-shadow: 0 0 0 0   rgba(227,6,19,0);   }
}
.pulse-airport { animation: pulse-red 2s infinite; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}
.loading { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ── Map ────────────────────────────────────────────────────────────── */
#map { width:100%; height:100%; border-radius:0.5rem; }
.map-container, .suriname-map-bg { background-size:cover; background-position:center; }

/* ── Progress ────────────────────────────────────────────────────────── */
.progress-line {
  background: linear-gradient(90deg,#E30613 0%,#E30613 var(--progress),rgba(255,255,255,0.1) var(--progress),rgba(255,255,255,0.1) 100%);
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge {
  font-size:.75rem; font-weight:600; padding:.25rem .75rem;
  border-radius:9999px; text-transform:uppercase; letter-spacing:.05em;
}
.status-en-route  { background:#1e3a5f; color:#60a5fa; }
.status-arrived   { background:#14532d; color:#4ade80; }
.status-completed { background:#4a1d96; color:#c4b5fd; }
.status-pending   { background:#78350f; color:#fbbf24; }

/* ── Vehicle cards (booking form) ───────────────────────────────────── */
.ride-card { transition:all 0.3s ease; }
.ride-card:hover { background-color:#2a2a2a; transform:translateY(-2px); }
.driver-marker { cursor:pointer; transition:transform 0.2s ease; }
.driver-marker:hover { transform:scale(1.2); }

/* ── Focus states ────────────────────────────────────────────────────── */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline: 2px solid #E30613;
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
button, a.btn, input[type="submit"] {
  font-weight:600; border-radius:.75rem;
  transition:all 0.2s ease; cursor:pointer;
}
button:active, a.btn:active { transform:scale(0.98); }
button:disabled { opacity:0.5; cursor:not-allowed; }

/* ── Map pin tooltip ─────────────────────────────────────────────────── */
.map-pin:hover .pin-tooltip {
  opacity:1; transform:translateY(-10px) translateX(-50%); pointer-events:auto;
}

/* ── Responsive typography ───────────────────────────────────────────── */
@media (max-width:768px) {
  h1 { font-size:clamp(1.5rem,5vw,3rem); line-height:1.1; }
  h2 { font-size:clamp(1.25rem,4vw,2rem); }
  h3 { font-size:clamp(1rem,3vw,1.5rem); }
  body { font-size:16px; }
}

.section-padding { padding:clamp(2rem,5vw,6rem) clamp(1rem,5vw,2rem); }