/* ══════════════════════════════════════════
   MOBILE FIXES — append to bottom of style.css
══════════════════════════════════════════ */

/* ── FIX 1: Hero stats — numbers too large, PKR label wraps on mobile ── */
@media (max-width: 680px) {
  .hero-stats {
    max-width: 100%;
    width: 100%;
  }
  .hero-stat {
    padding: 10px 8px;
  }
  .hero-stat-num {
    font-size: 16px;
  }
  .hero-stat-lbl {
    font-size: 6px;
    letter-spacing: 1px;
  }
}

/* ── FIX 2: Wedding car selector — text invisible when selected ── */
/* Selected state must always be dark bg + light text regardless of mode */
.pkg-car-opt.selected {
  background: #0a0a0a !important;
  color: #f5f5f3 !important;
  border-color: #0a0a0a !important;
}
.pkg-car-opt.selected .pkg-car-name,
.pkg-car-opt.selected .pkg-car-rate,
.pkg-car-opt.selected .pkg-car-note {
  color: #f5f5f3 !important;
}

/* ── FIX 3: Payment buttons — active/selected state invisible in dark mode ── */
/* pkg-pay-btn (package modal) */
.pkg-pay-btn.active {
  background: #f5f5f3 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f3 !important;
}
.dark .pkg-pay-btn.active {
  background: #f5f5f3 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f3 !important;
}
/* pay-btn (car booking modal) */
.pay-btn.selected {
  background: #f5f5f3 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f3 !important;
}
.dark .pay-btn.selected {
  background: #f5f5f3 !important;
  color: #0a0a0a !important;
  border-color: #f5f5f3 !important;
}

/* ── FIX 4: Availability pill overlapping on fleet cards (mobile) ── */
/* Card footer needs to wrap so pill sits below price, not on top */
@media (max-width: 680px) {
  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .fleet-avail-pill {
    margin-top: 0;
  }
  .card-book-hint {
    display: none;
  }
}