/* ============================================================
   KAZAA — Responsive CSS  (responsive.css)
   ضعيه بعد kazaa.css في كل صفحة
   ============================================================ */

/* ── HAMBURGER ── */
.hamburger { display:none; }

/* ── MOBILE  ≤ 768px ── */
@media (max-width:768px){
  /* Topbar */
  .topbar { padding:.5rem 1rem; flex-direction:column; gap:.4rem; text-align:center; }
  .topbar-right,.topbar-left { justify-content:center; flex-wrap:wrap; gap:.8rem; }

  /* Navbar */
  .navbar { top:0!important; padding:0 1rem!important; height:60px!important; }
  .nav-links { display:none!important; }
  .nav-cta,.nav-maintenance-btn { display:none!important; }
  .hamburger { display:flex!important; }
  .mobile-menu { display:flex; }
  .nav-logo img { height:38px!important; }

  /* Hero */
  .hero { min-height:100svh!important; padding-top:60px!important; align-items:flex-start!important; padding-bottom:2rem; }
  .hero-content { padding:1.5rem 1.2rem!important; max-width:100%!important; }
  .hero h1 { font-size:30px!important; }
  .hero p { font-size:14px!important; }
  .hero-btns { flex-direction:column!important; }
  .hero-btns button,.hero-btns a { width:100%!important; justify-content:center!important; }
  .hero-technician-wrap { display:none!important; }
  .hero-stats-under { flex-wrap:wrap!important; border-radius:14px!important; }
  .hero-scroll { display:none!important; }

  /* Maintenance banner */
  .maintenance-banner { padding:1.5rem 1.2rem!important; }
  .maintenance-banner-inner { flex-direction:column; gap:1rem; }
  .mb-btn { width:100%!important; }

  /* Showcase */
  .showcase-section { padding:2.5rem 0!important; }
  .showcase-card { flex:0 0 82vw!important; height:210px!important; }

  /* Sections */
  .section { padding:2.5rem 1.2rem!important; }
  .section-title { font-size:26px!important; }

  /* Works */
  .works-grid { grid-template-columns:repeat(3,1fr)!important; gap:10px!important; }
  .work-item { padding:.9rem .5rem!important; }
  .work-icon { width:42px!important; height:42px!important; }
  .work-label { font-size:11px!important; }

  /* Why */
  .why-grid { grid-template-columns:1fr!important; gap:12px!important; }

  /* Services */
  .services-grid { grid-template-columns:1fr!important; gap:12px!important; }

  /* Products */
  .products-grid { grid-template-columns:1fr 1fr!important; gap:10px!important; }
  .product-img-area { height:140px!important; }
  .categories-grid { grid-template-columns:repeat(2,1fr)!important; gap:10px!important; }
  .cat-card-img { height:100px!important; }
  .filter-tabs { gap:6px!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:4px!important; }
  .filter-tab { padding:7px 14px!important; font-size:12px!important; white-space:nowrap!important; flex-shrink:0!important; }

  /* Videos */
  .videos-layout { grid-template-columns:1fr!important; gap:14px!important; }
  .video-main-thumb { height:200px!important; }

  /* Blog (home preview) */
  .blog-grid { grid-template-columns:1fr!important; gap:12px!important; }

  /* Distributors */
  .distributors-grid { grid-template-columns:1fr 1fr!important; gap:10px!important; }

  /* Partners */
  .partners-section { padding:2.5rem 1.2rem!important; }

  /* Testimonials */
  .testi-card { flex:0 0 82vw!important; }

  /* Contact */
  .contact-grid { grid-template-columns:1fr!important; gap:2rem!important; }
  .contact-form { padding:1.5rem!important; }
  .form-row { grid-template-columns:1fr!important; }

  /* CTA */
  .cta-section { padding:2.5rem 1.2rem!important; }
  .cta-section h2 { font-size:26px!important; }
  .cta-btns { flex-direction:column!important; align-items:stretch!important; }
  .btn-white,.btn-outline-white { width:100%!important; }

  /* Footer */
  .footer { padding:2.5rem 1.2rem 1.5rem!important; }
  .footer-grid { grid-template-columns:1fr!important; gap:2rem!important; }
  .footer-bottom { flex-direction:column!important; gap:.6rem!important; text-align:center!important; }

  /* Maintenance modal */
  .maint-modal { border-radius:20px 20px 0 0!important; }
  .maint-service-grid { grid-template-columns:1fr 1fr!important; }

  /* Cart */
  .cart-panel { width:100%!important; right:0!important; left:0!important; }

  /* Shop */
  .shop-layout { grid-template-columns:1fr!important; }
  .sidebar {
    position:fixed!important; top:0!important; right:0!important; bottom:0!important;
    width:285px!important; z-index:300!important;
    transform:translateX(100%)!important;
    transition:transform .35s cubic-bezier(.25,.46,.45,.94)!important;
    overflow-y:auto!important; padding-top:60px!important;
  }
  .sidebar.open { transform:translateX(0)!important; }
  .filter-toggle-btn { display:flex!important; }

  /* Compare */
  .compare-cols { grid-template-columns:1fr!important; }
  .compare-table { min-width:560px!important; }
  .verdict-section { grid-template-columns:1fr!important; gap:12px!important; }
  .page-hero h1 { font-size:26px!important; }

  /* Checkout */
  .checkout-wrap { grid-template-columns:1fr!important; padding:1.2rem!important; gap:14px!important; }
  .order-summary { position:static!important; }
  .form-grid-2 { grid-template-columns:1fr!important; }
  .payment-tabs { grid-template-columns:repeat(2,1fr)!important; }

  /* Blog page */
  .blog-hero { padding:3.5rem 1.2rem 2.5rem!important; }
  .blog-hero h1 { font-size:28px!important; }
  .featured-post { grid-template-columns:1fr!important; }
  .fp-img { min-height:200px!important; }
  .blog-main { grid-template-columns:1fr!important; padding:0 1.2rem 2.5rem!important; }
  .blog-sidebar { position:static!important; }
  .posts-grid { grid-template-columns:1fr!important; }
  .post-card.wide { grid-column:span 1!important; grid-template-columns:1fr!important; }

  /* Breadcrumb */
  .breadcrumb { padding:.7rem 1rem!important; font-size:12px!important; }

  /* Project request */
  .section { padding:2rem 1.2rem!important; }
}

/* ── TABLET  769 – 1024px ── */
@media (min-width:769px) and (max-width:1024px){
  .topbar { padding:.5rem 1.5rem; }
  .navbar { padding:0 1.5rem!important; }
  .nav-links { gap:1.2rem!important; }
  .nav-links a { font-size:13px!important; }
  .hero h1 { font-size:42px!important; }
  .hero-content { max-width:560px!important; }
  .hero-technician-img { width:240px!important; max-width:28vw!important; }
  .services-grid { grid-template-columns:1fr 1fr!important; }
  .why-grid { grid-template-columns:1fr 1fr!important; }
  .products-grid { grid-template-columns:repeat(3,1fr)!important; }
  .categories-grid { grid-template-columns:repeat(3,1fr)!important; }
  .works-grid { grid-template-columns:repeat(5,1fr)!important; }
  .footer-grid { grid-template-columns:1fr 1fr!important; gap:2rem!important; }
  .contact-grid { grid-template-columns:1fr!important; }
  .blog-main { grid-template-columns:1fr!important; }
  .blog-sidebar { position:static!important; }
  .shop-layout { grid-template-columns:240px 1fr!important; }
  .checkout-wrap { grid-template-columns:1fr!important; }
  .videos-layout { grid-template-columns:1fr!important; }
  .verdict-section { grid-template-columns:1fr 1fr!important; }
}

/* ── SMALL MOBILE  ≤ 380px ── */
@media (max-width:380px){
  .hero h1 { font-size:26px!important; }
  .products-grid { grid-template-columns:1fr!important; }
  .distributors-grid { grid-template-columns:1fr!important; }
  .works-grid { grid-template-columns:repeat(2,1fr)!important; }
  .section-title { font-size:22px!important; }
  .categories-grid { grid-template-columns:1fr 1fr!important; }
}