/* ============================================================
   DriveSphere - Responsive Styles
   ============================================================ */

@media (max-width: 1200px) {
  .container { max-width: 960px; }
  .car-card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .search-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
  .container { max-width: 720px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-title { font-size: var(--text-5xl); }
  .dashboard-sidebar { transform: translateX(-100%); }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-main { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .car-features-grid { grid-template-columns: 1fr; }
  .auth-social-buttons { grid-template-columns: 1fr; }
  .car-card-list .car-card { flex-direction: column; }
  .car-card-list .car-card-image { width: 100%; }
  .booking-steps { flex-wrap: wrap; gap: 0.5rem; }
  .booking-step-divider { display: none; }
}

@media (max-width: 768px) {
  .container { max-width: 540px; }
  .hero-title { font-size: var(--text-4xl); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-stats { gap: 1.5rem; }
  .search-fields { grid-template-columns: 1fr; }
  .search-divider { display: none; }
  .car-card-grid { grid-template-columns: 1fr; }
  .car-info-tabs { flex-wrap: nowrap; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .display-1 { font-size: var(--text-5xl); }
  .display-2 { font-size: var(--text-4xl); }
  .auth-card { padding: 1.5rem; }
  .dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .hero-title { font-size: var(--text-3xl); }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .auth-card { padding: 1.25rem; }
  .toast { min-width: auto; max-width: 90vw; }
  .modal-container { margin: 1rem; }
  .offcanvas { width: 100%; max-width: 100vw; }
  .pagination { flex-wrap: wrap; }
}

@media print {
  .navbar, .dashboard-sidebar, .footer, .back-to-top,
  .search-bar, .booking-steps, .toast-container { display: none; }
  .dashboard-main { margin-left: 0; padding: 1rem; }
  .page-loader { display: none; }
  body { background: white; color: black; }
  .card { border: 1px solid #ddd; box-shadow: none; }
  a { color: inherit; text-decoration: underline; }
}