/* ========== AFRO RIDE — B/W readable, nothing hidden ========== */
:root {
    --primary: #ffffff;
    --primary-dark: #e5e5e5;
    --primary-light: rgba(255,255,255,0.12);
    --accent: #ffffff;
    --bg: #000000;
    --bg-card: #1c1c1c;
    --bg-soft: #242424;
    --bg-hover: #2e2e2e;
    --text: #ffffff;
    --text-muted: #b3b3b3;
    --radius: 16px;
    --nav-h: 68px;
}

/* NEVER hide content */
.reveal, .reveal-left, .reveal-right, .reveal-scale,
.stagger, .stagger > *, .will-reveal, .section-line {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

body, .eats-landing, .page-dark, body.landing {
    background: #000 !important;
    color: #fff !important;
}

.navbar, .u-nav {
    background: #000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

.card, .u-card, .eats-card-bs, .cart-panel {
    background: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.u-card h3, .card h3 { color: #fff !important; }
.u-card p, .text-muted, .text-secondary { color: #b3b3b3 !important; }

.u-card .details, .u-card a.details {
    display: inline-flex !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}

.btn-primary, .btn-solid, .u-btn-white, .nav-link.btn-solid {
    background: #fff !important;
    color: #000 !important;
}
.u-form-card .u-see-prices {
    background: #000 !important;
    color: #fff !important;
}
.u-see-prices {
    background: #fff !important;
    color: #000 !important;
}
.btn-secondary, .btn-outline-light {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}

.u-section, .eats-section, .eats-grid, .u-cards, .row {
    opacity: 1 !important;
    visibility: visible !important;
}
.u-section h2, .eats-section h2, h1, h2, h3 {
    color: #fff !important;
}

.eats-chip, .eats-cat {
    background: #242424 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}
.eats-chip.active, .eats-cat.active {
    background: #fff !important;
    color: #000 !important;
}

.avatar, .badge, .v-icon-badge {
    background: #fff !important;
    color: #000 !important;
}

.footer, .footer a, .footer p { color: #a3a3a3 !important; }
.footer a:hover { color: #fff !important; }

.u-hero-wrap { width: 100% !important; max-width: none !important; position: relative; }
.u-hero-wrap .u-hero { position: relative; z-index: 1; }

/* Ensure eats cards show */
.eats-card-bs, .col-12, .col-sm-6, .col-lg-4 {
    opacity: 1 !important;
    visibility: visible !important;
}
.eats-grid, .row.g-3 {
    display: grid !important; /* fallback if bootstrap missing on some pages */
}
/* Bootstrap row should remain flex/grid from bootstrap - don't break */
.eats-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ========== GLOBAL IMAGE FADE / ROTATE ========== */
.img-rotator { position: relative; overflow: hidden; background: #111; }
.img-rotator .img-slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity 1.1s ease-in-out; pointer-events: none;
}
.img-rotator .img-slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.img-rotator .img-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-rotator.hero-rotator { min-height: 280px; }
.img-rotator.card-rotator { height: 140px; border-radius: 16px 16px 0 0; }
.img-rotator.tile-rotator { position: absolute; inset: 0; border-radius: inherit; }
.u-card .img-rotator.card-rotator { height: 140px; width: 100%; }
.client-tile-rot { background-image: none !important; position: relative; overflow: hidden; }
.client-tile-rot .img-rotator { z-index: 0; }
.client-tile-rot > strong, .client-tile-rot > span { position: relative; z-index: 2; }
.client-tile-rot::before { z-index: 1; }
.client-hero .img-rotator.hero-rotator { position: absolute; inset: 0; min-height: 180px; }
.rest-hero .img-rotator { position: absolute; inset: 0; }
.img-rotator .img-slide.is-active img { animation: imgKen 12s ease-in-out infinite alternate; }
@keyframes imgKen { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
    .img-rotator .img-slide { transition: none; }
    .img-rotator .img-slide.is-active img { animation: none; }
}

/* ========== EVERY IMAGE: smooth presence ========== */
img {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
img.is-visible,
img.skip-fade,
.img-rotator .img-slide img,
.logo img,
.nav-links img,
.driver-avatar,
[class*="avatar"] img {
    opacity: 1;
}
img.is-visible {
    animation: imgSoftIn 0.75s ease forwards;
}
@keyframes imgSoftIn {
    from { opacity: 0; transform: scale(1.03); }
    to { opacity: 1; transform: scale(1); }
}

/* Background-image tiles fade via overlay pulse */
.client-tile,
.u-card,
.rest-hero,
.client-hero {
    transition: opacity 0.5s ease, transform 0.4s ease;
}
.client-tile:hover {
    transform: scale(1.02);
}

/* Auto-rotator shells created by JS */
.auto-img-rotator {
    position: relative;
    overflow: hidden;
    background: #111;
}
.auto-img-rotator > img.rot-base {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.auto-img-rotator .rot-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.auto-img-rotator .rot-layer.is-active {
    opacity: 1;
    z-index: 1;
}
.auto-img-rotator.has-layers > img.rot-base {
    opacity: 0;
    transition: opacity 1.2s ease;
}
.auto-img-rotator.has-layers > img.rot-base.is-under {
    opacity: 1;
    z-index: 0;
}


/* Live GPS on map */
.afro-gps-icon { background: transparent !important; border: none !important; }
.gps-pulse {
  width: 22px; height: 22px; position: relative;
}
.gps-dot {
  width: 14px; height: 14px; margin: 4px;
  background: #22c55e; border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: gpsPulse 1.8s ease-out infinite;
}
@keyframes gpsPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#gpsTrackStatus.is-live { color: #4ade80; font-size: 0.8rem; }

/* Nav route — keep SVG path vivid */
.leaflet-overlay-pane path.afro-route-line {
  stroke: #00C853 !important;
  stroke-opacity: 1 !important;
}

/* Map layer control */
.leaflet-control-layers {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}
.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
  background: #fff !important;
  color: #111 !important;
}
.leaflet-control-layers label {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}
.afro-map-sat-btn:active { transform: scale(0.96); }