/*
 * DriveAxis Kenya — Targeted Overrides
 * Drop this AFTER your main index.css
 * Covers: 1. Coloured SVG icons
 *         2. Premium card redesign
 *         3. Cars for Hire section overhaul
 * ─────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════
   1. COLOURED SVG ICONS
══════════════════════════════════════════════════ */

/* ── Nav icons ── */
.nav-link svg {
  color: rgba(255, 255, 255, 0.55);
  transition: color 200ms ease;
}
.nav-link:hover svg  { color: #fff; }
.mob-link svg        { color: rgba(255, 255, 255, 0.55); transition: color 200ms ease; }
.mob-link:hover svg  { color: #fff; }

/* ── Hero badge shield ── */
.hero-badge svg { color: #C0392B; }

/* ── Search magnifier ── */
.search-icon     { color: #9a9890; }

/* ── Trust check-marks (green) ── */
.trust-item svg  { color: #1B6B3A; flex-shrink: 0; }

/* ── Section heading icons ── */
#carsTitle  svg  { color: #C0392B; }   /* red  — cars   */
#bikesTitle svg  { color: #7c3aed; }   /* purple — bikes */
#hireTitle  svg  { color: #C0392B; }   /* blue — hire   */

/* ── Feature card icons — each child gets its own accent ── */
.feature-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  transition: background 200ms ease, transform 200ms ease;
}
.feature-card:nth-child(1) .feature-icon { background: rgba(192,57,43,.10); color: #C0392B; }
.feature-card:nth-child(2) .feature-icon { background: rgba(37,211,102,.10); color: #1a9c4f; }
.feature-card:nth-child(3) .feature-icon { background: rgba(124,58,237,.10); color: #7c3aed; }
.feature-card:nth-child(4) .feature-icon { background: rgba(37,99,235,.10);  color: #2563eb; }

.feature-card:hover .feature-icon            { transform: scale(1.08) rotate(-4deg); }
.feature-card:nth-child(1):hover .feature-icon { background: #C0392B; color: #fff; }
.feature-card:nth-child(2):hover .feature-icon { background: #1a9c4f; color: #fff; }
.feature-card:nth-child(3):hover .feature-icon { background: #7c3aed; color: #fff; }
.feature-card:nth-child(4):hover .feature-icon { background: #2563eb; color: #fff; }

/* ── How-it-works icons (hire tab) ── */
.hiw-icon { color: #2563eb; }

/* ── Filter clear ── */
.filter-clear svg { color: #C0392B; }

/* ── Contact email icon ── */
.contact-email svg { color: #C0392B; }

/* ── WhatsApp icon (already white on green bg, keep it) ── */
.contact-wa svg { color: #fff; }

/* ── Footer heart / globe ── */
.footer-copy svg { color: rgba(255,255,255,.35); vertical-align: middle; }

/* ── Scroll-to-top ── */
.scroll-top svg { color: #fff; }

/* ── Setup banner close & warning icons ── */
.banner-icon,
.banner-close svg { color: #856404; }


/* ══════════════════════════════════════════════════
   2. IMPROVED CARD STYLES
══════════════════════════════════════════════════ */

.card {
  background: #fff;
  border: 1px solid #e9e7e2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display: flex; flex-direction: column;
  position: relative;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 16px 48px rgba(0,0,0,.08);
  border-color: #C0392B;
}

/* ── Image wrapper ── */
.card-img {
  position: relative;
  height: 215px; overflow: hidden;
  background: #f0ede7;
  flex-shrink: 0;
}
.card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease;
}
.card:hover .card-img img { transform: scale(1.06); }

/* No-photo placeholder */
.no-photo {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem; color: #b0aea8;
  background: linear-gradient(135deg, #f4f3ef, #e8e6e0);
  font-size: 2.75rem;
}
.no-photo p { font-size: .78rem; color: #b0aea8; margin: 0; }

/* Badges */
.card-badge {
  position: absolute; top: 11px; left: 11px;
  font-size: .64rem; font-weight: 800;
  padding: .28em .72em; border-radius: 6px;
  letter-spacing: .05em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.badge-new    { background: #1B6B3A; color: #fff; }
.badge-latest { background: #1B6B3A; color: #fff; }
.badge-bike   { background: #7c3aed; color: #fff; }
.badge-hire,
.card-badge--hire { background: #2563eb; color: #fff; }
.badge-featured   { background: #C0392B; color: #fff; }

/* Photo count */
.photo-count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.62); color: #fff;
  font-size: .64rem; font-weight: 700;
  padding: .22em .6em; border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* ── Card body ── */
.card-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; flex: 1;
}

/* Price */
.card-price {
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.025em; line-height: 1;
  margin-bottom: .3rem;
}
.price-car  { color: #C0392B; }
.price-bike { color: #7c3aed; }
.price-new  { color: #1B6B3A; }
.price-hire { color: #2563eb; }

/* Title */
.card-title {
  font-weight: 600; font-size: .95rem;
  color: #111; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .65rem;
}

/* Spec tags */
.card-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tag {
  font-size: .7rem; font-weight: 500;
  background: #f4f3ef; border: 1px solid #e5e3dc;
  color: #6b6960;
  padding: .2em .6em; border-radius: 5px;
}

/* Location */
.card-location {
  font-size: .8rem; color: #6b6960; font-weight: 500;
  margin-bottom: .85rem;
}

/* Actions row */
.card-actions {
  display: flex; gap: .45rem; flex-wrap: wrap;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid #f0ede7;
}
.btn-wa {
  flex: 1; min-width: 80px;
  background: #25D366; color: #fff;
  border: none; border-radius: 8px;
  padding: .52rem .75rem;
  font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  transition: all 200ms ease; white-space: nowrap; cursor: pointer;
}
.btn-wa:hover {
  background: #1da851; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,211,102,.3);
}
.btn-call {
  flex: 1; min-width: 64px;
  background: #111; color: #fff;
  border: none; border-radius: 8px;
  padding: .52rem .75rem;
  font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  transition: all 200ms ease; white-space: nowrap; cursor: pointer;
  font-family: inherit;
}
.btn-call:hover {
  background: #C0392B; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(192,57,43,.28);
}
.btn-delete {
  background: rgba(192,57,43,.07);
  color: #C0392B;
  border: 1px solid rgba(192,57,43,.2);
  border-radius: 8px;
  padding: .52rem .7rem;
  font-size: .75rem; font-weight: 700;
  display: none; align-items: center;
  transition: all 200ms ease; cursor: pointer;
  font-family: inherit;
}
.can-del .btn-delete { display: inline-flex; }
.btn-delete:hover { background: #C0392B; color: #fff; border-color: #C0392B; }

.btn-hire-sm {
  background: rgba(37,99,235,.1); color: #2563eb;
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 8px; padding: .52rem .7rem;
  font-size: .75rem; font-weight: 700;
  transition: all 200ms ease; white-space: nowrap; cursor: pointer;
  font-family: inherit;
}
.btn-hire-sm:hover {
  background: #2563eb; color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37,99,235,.25);
}

/* Admin bar on hover */
.card-admin-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  padding: 2rem 1rem 1rem;
  display: flex; gap: .4rem; justify-content: flex-end;
  opacity: 0; transition: opacity 200ms ease; z-index: 3;
}
.card:hover .card-admin-bar { opacity: 1; }
.btn-del-card {
  padding: .35rem .7rem; border-radius: 5px;
  font-size: .68rem; font-weight: 700;
  background: rgba(192,57,43,.2); color: #C0392B;
  border: 1px solid rgba(192,57,43,.3); cursor: pointer;
  transition: background 200ms ease;
}
.btn-del-card:hover { background: rgba(192,57,43,.35); }


/* ══════════════════════════════════════════════════
   3. CARS FOR HIRE SECTION — FULL OVERHAUL
══════════════════════════════════════════════════ */

/* ── Section wrapper ── */
#hire {
  background: linear-gradient(160deg, #eef4ff 0%, #f4f3ef 60%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 20px;
  padding: 2.5rem;
}

/* Section heading colour */
#hire .section-header h2 { color: #000000; }
#hire .section-header h2 svg { color: #2563eb; }
#hire .count-badge {
  background: #dbeafe;
  color: #C0392B;
  border: 1px solid rgba(37, 99, 235, 0.22);
}

/* How-it-works strip */
.hire-how-it-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.hiw-step {
  display: flex; align-items: flex-start; gap: .85rem;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 14px; padding: 1.2rem;
  transition: all 200ms ease;
}
.hiw-step:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.12);
  transform: translateY(-3px);
}
.hiw-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #dbeafe; border-radius: 10px;
  display: grid; place-items: center;
  color: #2563eb;
  transition: all 200ms ease;
}
.hiw-step:hover .hiw-icon { background: #2563eb; color: #fff; }
.hiw-step strong {
  font-size: .875rem; font-weight: 700;
  display: block; margin-bottom: .2rem; color: #111;
}
.hiw-step p {
  font-size: .78rem; color: #6b6960;
  line-height: 1.55; margin: 0;
}

/* Hire cards — blue accent theme */
#hire .card { border-color: rgba(37, 99, 235, 0.1); }
#hire .card:hover {
  border-color: #C0392B;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.14);
}

/* Hire price display built by JS (price-hire class) */
.price-hire {
  color: #C0392B !important;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem;
}
.price-hire small { color: #5a5854; font-weight: 400; }

/* Call button inside hire cards goes blue */
#hire .btn-call { background: #C0392B; }
#hire .btn-call:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Hire-specific tag pills */
.hire-tag {
  display: inline-block;
  font-size: .66rem; font-weight: 600;
  background: #dbeafe; color: #C0392B;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 5px; padding: .18em .55em;
}

/* Empty state for hire */
#hireEmpty .empty-icon svg { color: #C0392B; opacity: .4; }

/* Responsive: stack HIW on mobile */
@media (max-width: 768px) {
  #hire { padding: 1.5rem; border-radius: 14px; }
  .hire-how-it-works { grid-template-columns: 1fr; }
}