/**
 * Mobile Responsive Styles
 * @package BudgetLappy
 */

/* Tablet and below */
@media (max-width: 992px) {
  .bl-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .bl-hero-visual { display: none; }
  .bl-hero-usps { justify-content: center; }
  .bl-hero-ctas { justify-content: center; }
  .bl-steps-grid { flex-direction: column; }
  .bl-step-arrow { transform: rotate(90deg); }
  .bl-delivery-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .bl-shop-layout { grid-template-columns: 1fr; }
  .bl-filter-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 300px; z-index: 10000; background: #fff; box-shadow: var(--bl-shadow-lg); overflow-y: auto; max-height: 100vh; padding: 1.5rem; }
  .bl-filter-sidebar.active { display: block; }
  .bl-filter-toggle-mobile { display: block; padding: 8px 16px; background: var(--bl-bg); border: 1.5px solid var(--bl-border); border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-product-layout { grid-template-columns: 1fr; }
  .bl-contact-layout { grid-template-columns: 1fr; }
  .bl-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-accessories-scroll { grid-template-columns: repeat(2, 1fr); }
  .bl-ig-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-blog-home-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  .bl-header-search { display: none; }
  .bl-menu-toggle { display: block; }
  .bl-main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: var(--bl-shadow-lg); z-index: 999; border-top: 1px solid var(--bl-border); }
  .bl-main-nav.active { display: block; }
  .bl-main-nav ul { flex-direction: column; }
  .bl-main-nav li a { padding: 14px 20px; border-bottom: 1px solid var(--bl-border); }
  .bl-wa-btn span { display: none; }
  .bl-wa-btn { padding: 10px; border-radius: 50%; }
  .bl-hero { min-height: auto; padding: 4rem 0 3rem; }
  .bl-hero-title { font-size: 2.2rem; }
  .bl-trust-grid { flex-direction: column; align-items: center; }
  .bl-trust-seals-grid { flex-direction: column; align-items: center; gap: 0.5rem; }
  .bl-specs-grid { grid-template-columns: 1fr; }
  .bl-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--bl-border); }
  .bl-tab-btn { white-space: nowrap; font-size: 0.9rem; padding: 12px 16px; border-bottom: 2px solid transparent; }
  .bl-sticky-inner { flex-direction: column; gap: 8px; text-align: center; }
  .bl-sticky-actions { width: 100%; }
  .bl-sticky-actions .bl-btn { flex: 1; }
  footer .footer-grid { grid-template-columns: 1fr; }
  .bl-blog-grid { grid-template-columns: 1fr; }
  .bl-blog-home-grid { grid-template-columns: 1fr; }
  .bl-filter-grid { grid-template-columns: 1fr; }
  .bl-testimonial-card { min-width: 85%; }
  .bl-compare-grid { flex-direction: column; }
  .bl-social-share { flex-wrap: wrap; }
  .bl-float-wa { bottom: 16px; left: 16px; width: 48px; height: 48px; }
  .bl-float-wa-label { display: none; }
  .bl-back-top { bottom: 16px; right: 16px; width: 38px; height: 38px; }
  .bl-corner-video { bottom: 16px; right: 64px; }
  .bl-cv-toggle { width: 48px; height: 48px; }
  .bl-social-proof { bottom: 74px; left: 16px; max-width: 280px; }
  .bl-cookie-bar .container { flex-direction: column; text-align: center; }
}

/* Small mobile */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .bl-hero { padding: 3rem 0; }
  .bl-hero-badge { font-size: 0.8rem; padding: 6px 14px; }
  .bl-hero-title { font-size: 1.8rem; line-height: 1.2; }
  .bl-hero-sub { font-size: 1rem; max-width: 100%; }
  .bl-hero-ctas { flex-direction: column; width: 100%; }
  .bl-hero-ctas .bl-btn { width: 100%; text-align: center; justify-content: center; }
  .bl-product-actions .bl-btn { padding: 12px; font-size: 0.95rem; }
  .bl-free-items-grid { gap: 4px; }
  .bl-free-items-grid span { font-size: 0.72rem; padding: 3px 6px; }
  .bl-usp-pill { font-size: 0.72rem; padding: 4px 10px; }
  .bl-accessories-scroll { grid-template-columns: 1fr; }
}

/* Search bar on mobile - show below header */
@media (max-width: 768px) {
  .bl-header-search { display: block; max-width: 100%; padding: 0 0 0.5rem; }
  .header-inner { flex-wrap: wrap; }
  .site-branding { order: 1; }
  .bl-header-actions { order: 2; }
  .bl-header-search { order: 3; width: 100%; max-width: 100%; }
}