/* Roadster Car Marketplace — Responsive / Mobile CSS */

/* ===== FILTER SIDEBAR TOGGLE (mobile only) ===== */
.filter-toggle-btn {
  display: none;
}

@media(max-width:900px) {

  /* Show filter toggle button */
  .filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #e5e8ef;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    color: #111217;
  }
  .filter-toggle-btn i { font-size: 13px; }
  .filter-toggle-btn.active { background: #f4fff3; border-color: #08CB00; color: #08CB00; }

  /* Sidebar hidden by default on mobile */
  .page-sidebar {
    display: none !important;
  }
  .page-sidebar.sidebar-open {
    display: block !important;
  }

  /* page-layout stacks to single column */
  .page-layout {
    grid-template-columns: 1fr !important;
  }

  /* Inner page section padding */
  .section {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  /* Page banner smaller */
  .page-banner {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .page-banner h1 {
    font-size: 28px;
  }

  /* Toolbar wrap nicely */
  .toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .toolbar-left, .toolbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Listing grid 2 col on tablet */
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Detail layout stacked */
  .detail-layout {
    grid-template-columns: 1fr !important;
  }

  /* Gallery thumbs scroll on mobile */
  .gallery-thumbs {
    grid-template-columns: repeat(5, 72px) !important;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  /* Car detail actions full width */
  .detail-actions {
    grid-template-columns: 1fr 1fr;
  }

  /* Dealer grid 2 col */
  .dealer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* News listing 2 col */
  .news-listing {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Calc layout stacked */
  .calc-layout {
    grid-template-columns: 1fr !important;
  }

  /* Contact layout stacked */
  .contact-layout {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard layout stacked */
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  /* Form row stacked */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Inspection grid 2 col */
  .inspection-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Compare table scrollable */
  .compare-table-wrap {
    overflow-x: auto;
  }

  /* Stat cards 2 col */
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* CTA section text alignment */
  .cta {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding: 24px 20px !important;
  }
  .cta h2 { font-size: 20px !important; }

}

@media(max-width:620px) {

  /* listing grid 1 col on small mobile */
  .listing-grid {
    grid-template-columns: 1fr !important;
  }

  /* list-view fallback */
  .listing-grid.list-view .car-card {
    grid-template-columns: 1fr !important;
  }

  /* Dealer grid 1 col */
  .dealer-grid {
    grid-template-columns: 1fr !important;
  }

  /* News listing 1 col */
  .news-listing {
    grid-template-columns: 1fr !important;
  }

  /* Stat cards 1 col */
  .stat-cards {
    grid-template-columns: 1fr !important;
  }

  /* Inspection grid 1 col */
  .inspection-grid {
    grid-template-columns: 1fr !important;
  }

  /* Page banner heading */
  .page-banner h1 {
    font-size: 22px !important;
  }

  /* Detail actions full row */
  .detail-actions {
    grid-template-columns: 1fr !important;
  }

  /* Spec grid 1 col */
  .spec-grid {
    grid-template-columns: 1fr !important;
  }

  /* Calculator result big number */
  .calc-result .big {
    font-size: 32px !important;
  }

  /* Auth card padding */
  .auth-card {
    padding: 24px 18px !important;
  }
  .auth-card h1 {
    font-size: 22px !important;
  }

  /* Tabs nav scroll on mobile */
  .tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tabs-nav button {
    flex-shrink: 0;
  }

  /* Toolbar vertical on small screens */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-right {
    justify-content: space-between;
  }

  /* CTA section */
  .cta a {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    padding: 14px !important;
  }

  /* Footer about wider */
  .footer-about {
    max-width: 100% !important;
  }

  /* News detail */
  .article-featured {
    height: 200px !important;
    border-radius: 14px !important;
  }

  /* Page sidebar always block when open */
  .page-sidebar.sidebar-open {
    position: static !important;
    top: auto !important;
  }

}

/* ===== HOME PAGE MOBILE TWEAKS ===== */

@media(max-width:900px) {

  /* Hero search panel inputs: full width fields */
  .hero-search-panel .fields {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Browse brand logos grid */
  .makes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Body type grid */
  .type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Trust grid */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Package grid */
  .package-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Recommended grid */
  .reco-grid {
    grid-template-columns: 1fr !important;
  }

}

@media(max-width:520px) {

  /* Hero fields single column */
  .hero-search-panel .fields {
    grid-template-columns: 1fr !important;
  }

  /* Makes grid 3 col stays fine, brand logos small */
  .makes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Body type 2 col on very small */
  .type-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Trust / package 1 col */
  .trust-grid,
  .package-grid {
    grid-template-columns: 1fr !important;
  }

}

/* ===== WRAP / CONTAINER SPACING ===== */

@media(max-width:900px) {
  .wrap {
    width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media(max-width:480px) {
  .wrap {
    width: 92% !important;
  }
}

/* ===== CAR CARD MOBILE TWEAKS ===== */

@media(max-width:900px) {
  .car-card .card-body {
    padding: 10px !important;
  }
  .car-card .car-title {
    font-size: 14px !important;
  }
  .car-card .price {
    font-size: 16px !important;
  }
  .car-card .actions {
    gap: 6px !important;
  }
  .car-card .actions .wa {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

/* ===== FOOTER MOBILE ===== */

@media(max-width:900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .footer-about {
    grid-column: 1 / -1;
  }
}

@media(max-width:520px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 16px !important;
  }
  .footer-about {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  .payments {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .newsletter {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .newsletter button {
    width: 100% !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
}

/* ===== PAGINATION MOBILE ===== */

@media(max-width:620px) {
  .pagination {
    gap: 4px !important;
  }
  .pagination a, .pagination span {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
}