/* Tamusabah — Responsive Styles v2 */

/* ============================================
   1280px+ — Desktop (default, no changes needed)
   ============================================ */

/* Sembunyi filter pills pada desktop — sidebar dah cukup untuk kategori */
@media (min-width: 769px) {
  .category-pills,
  .daerah-pills,
  .filter-pills-group { display: none; }
}

/* ============================================
    1024px — Small desktop / landscape tablet
    ============================================ */
@media (max-width: 1024px) {
  .browse-layout { grid-template-columns: 200px 1fr; gap: var(--space-lg); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .footer-grid,
  .footer-grid-loggedin { grid-template-columns: 1fr 1fr; }
  .admin-layout { grid-template-columns: 220px 1fr; }
  .stats-bar .stats-grid,
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* Grid 2 kolum: pemisah kiri tidak lagi selari. */
  .stat-item + .stat-item { border-left: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  /* 3 kad langkah terlalu sempit dalam 3 kolum pada tablet — susun menegak.
     width:100% wajib supaya kad tidak mengecut ikut kandungan (auto margin). */
  .how-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .how-card { width: 100%; max-width: 560px; margin: 0 auto; }
  .how-card::after { display: none; }
}

/* ============================================
    769px–1024px — Tablet portrait / landscape
    ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Product Detail — stack vertically for balance on tablet.
     Side-by-side at 800px leaves too little space for info/booking form
     and creates visual imbalance when description is long. */
  .product-detail-layout {
    flex-direction: column;
  }
  .product-gallery {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .product-detail-info {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .gallery-nav-btn {
    opacity: 1;
  }
  .gallery-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
  }

  /* Seller card — allow meta to wrap comfortably */
  .seller-card-meta {
    gap: var(--space-sm);
  }
  .seller-card-meta span {
    white-space: normal;
    word-break: break-word;
  }

  /* Shop header — reduce logo size */
  .shop-logo,
  .shop-logo-placeholder {
    width: 60px;
    height: 60px;
  }
  .shop-header-info h1 {
    font-size: var(--text-xl);
  }
  .shop-meta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Product grid — slightly smaller cards */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
  }
  .product-card-body {
    padding: var(--space-sm);
  }

  /* Browse — keep sidebar but narrower */
  .browse-layout {
    grid-template-columns: 180px 1fr;
    gap: var(--space-md);
  }

  /* Suggested section product grid */
  .suggested-section .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
  }

  /* Seller & Admin sidebar — narrower on tablet */
  .seller-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-md);
  }
  .seller-sidebar-title {
    font-size: var(--text-xs);
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  .seller-nav a {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
  }
  .seller-nav a i {
    width: 16px;
    height: 16px;
  }

  .admin-layout {
    grid-template-columns: 200px 1fr;
    gap: var(--space-md);
  }
  .admin-sidebar-title {
    font-size: var(--text-xs);
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  .admin-nav a {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
  }
  .admin-nav a i {
    width: 16px;
    height: 16px;
  }

  /* Lightbox — adjust nav positioning for tablet */
  .lightbox-prev {
    left: var(--space-sm);
  }
  .lightbox-next {
    right: var(--space-sm);
  }
  .lightbox-nav {
    width: 40px;
    height: 40px;
  }
  .lightbox-nav i {
    width: 24px;
    height: 24px;
  }
  .lightbox-content {
    max-width: 90vw;
  }
}

/* ============================================
   768px — Tablet
   ============================================ */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-mobile-actions { display: flex; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }

  /* Hero */
  .hero { padding-top: calc(64px + var(--space-2xl)); padding-bottom: var(--space-2xl); }
  .hero h1 { font-size: 1.75rem; }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-actions .btn { width: 100%; }

  /* Sections */
  .section { padding: var(--space-2xl) 0; }
  .section-header h2 { font-size: var(--text-2xl); }
  .how-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .how-card { max-width: 480px; margin: 0 auto; }
  .how-card::after { display: none; }

  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { width: 100%; max-width: 500px; margin: 0 auto; }

  .stats-bar .stats-grid,
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-number { font-size: var(--text-2xl); }

  .cta-section h2 { font-size: var(--text-2xl); }

  /* Browse */
  .main { padding-bottom: var(--space-3xl); }
  .browse-layout { grid-template-columns: 1fr; }
  .browse-sidebar { display: none; }
  .filter-pills-group { margin-bottom: var(--space-md); }
  .filter-pills-group .category-pills,
  .filter-pills-group .daerah-pills { margin-bottom: 0; }
  .category-pills,
  .daerah-pills {
    margin: 0 calc(-1 * var(--space-md));
    padding: 0 var(--space-md) var(--space-sm);
  }  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); }

  /* Footer */
  .footer-grid,
  .footer-grid-loggedin { grid-template-columns: 1fr; text-align: center; }
  .footer-brand p { margin: 0 auto; }

  /* Admin */
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-pills { display: flex; }
  .admin-nav a { padding: var(--space-xs) var(--space-md); }

  /* Seller */
  .seller-layout { display: block; }
  .seller-sidebar { display: none; }
  .seller-pills { display: flex; }
  .seller-nav a { padding: var(--space-xs) var(--space-md); }

  /* Tables */
  .table-wrapper { margin: 0 calc(-1 * var(--space-md)); border-radius: 0; border-left: none; border-right: none; }

  /* Forms */
  .page-header { flex-direction: column; align-items: flex-start; }
  .form { max-width: 100%; }

  /* Segmented Control — 3 option wrap */
  .segmented-control { display: flex; flex-wrap: wrap; border-radius: 16px; }
  .segmented-option { flex: 1; justify-content: center; padding: 8px 10px; font-size: 0.8rem; gap: 4px; }
  .segmented-option i, .segmented-option svg { width: 13px; height: 13px; }

  /* Breadcrumb */
  .breadcrumb { margin-bottom: var(--space-md); }
  .breadcrumb a,
  .breadcrumb .breadcrumb-current { max-width: 180px; }

  /* Context Banner */
  .context-banner { padding: var(--space-xs) 0; }
  .context-banner-inner { align-items: center; gap: var(--space-sm); }
  .context-banner-label { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.3; }
  .context-banner-switch { white-space: nowrap; flex-shrink: 0; }

  /* Product Gallery — stack vertically */
  .product-detail-layout { flex-direction: column; }
  .product-gallery { flex: none; width: 100%; max-width: 100%; }
  .product-detail-info { flex: none; width: 100%; max-width: 100%; }
  .gallery-thumb { flex: 0 0 60px; width: 60px; height: 45px; }
  .gallery-nav-btn { opacity: 1; }

  /* Orders — card mobile */
  .orders-search { max-width: 100%; }
  .order-card-item { grid-template-columns: 56px 1fr auto; }
  .order-card-thumb { width: 56px; }
  .order-card-total { font-size: 0.938rem; }
  .order-card-footer { flex-direction: column; gap: var(--space-sm); align-items: stretch; }
  .order-card-actions { flex-direction: row; justify-content: space-between; width: 100%; }
  .order-card-meta { flex-wrap: wrap; }
}

/* ============================================
   640px — Large phone
   ============================================ */
@media (max-width: 640px) {
  .main { padding-bottom: var(--space-3xl); }

  .hero { padding-top: calc(var(--header-h) + var(--space-xl)); padding-bottom: var(--space-xl); }
  .hero h1 { font-size: 1.5rem; }
  .hero-badge { font-size: 0.625rem; }

  .dashboard-grid { grid-template-columns: 1fr; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .product-card-body { padding: var(--space-sm); }
  .product-card-actions { padding: 0 var(--space-sm) var(--space-sm); }
  .product-card-name { font-size: var(--text-xs); }
  .product-card-price { font-size: var(--text-sm); }

  /* Gallery — mobile */
  .gallery-nav-btn { opacity: 1; width: 32px; height: 32px; }
  .gallery-nav-btn i { width: 18px; height: 18px; }
  .lightbox-content { max-width: 95vw; }
  .lightbox-nav { width: 36px; height: 36px; }
  .lightbox-nav i { width: 22px; height: 22px; }
  .lightbox-prev { left: var(--space-sm); }
  .lightbox-next { right: var(--space-sm); }

  .footer { padding: var(--space-xl) 0 var(--space-md); }
  .footer-grid { gap: var(--space-lg); }
}

/* ============================================
   480px — Phone
   ============================================ */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-sm); }
  .main { padding-bottom: var(--space-3xl); }

  /* Header 360px: padatkan brand + cip mod supaya tidak bertindih.
     Logo penuh 50px/20px + cip 117px melebihi 344px ruang pada 360px. */
  .logo { font-size: var(--text-lg); gap: var(--space-xs); }
  .logo-img { width: 40px; height: 40px; }
  .nav-mobile-actions { gap: 2px; }
  .nav-mobile-actions .mode-chip { height: 22px; padding: 0 8px; font-size: 10px; gap: 4px; letter-spacing: 0.03em; }
  .nav-mobile-actions .mode-chip i, .nav-mobile-actions .mode-chip svg { width: 12px; height: 12px; }

  /* Negative-margin bleed must match the container padding at this width
     (--space-sm, not --space-md) to avoid horizontal overflow. */
  .category-pills,
  .daerah-pills { margin: 0 calc(-1 * var(--space-sm)); padding: 0 var(--space-sm) var(--space-sm); }
  .table-wrapper { margin: 0 calc(-1 * var(--space-sm)); }

  .hero h1 { font-size: 1.35rem; }
  .hero-subtitle { font-size: var(--text-sm); }

  /* How It Works — kad lebih padat pada phone */
  .how-card { padding: var(--space-lg); }
  .how-card-top { margin-bottom: var(--space-md); }

  .btn-large { width: 100%; }

  /* Order detail actions — stack penuh pada phone supaya tiada overflow */
  .order-actions { flex-direction: column; align-items: stretch; }
  .order-actions .btn { width: 100%; justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-number { font-size: var(--text-xl); }

  .search-bar { padding: 0.25rem 0.25rem 0.25rem var(--space-md); }
  .search-bar input { font-size: var(--text-base); }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

  .browse-main { padding: 0; }
  .browse-layout { gap: var(--space-sm); }

  .admin-pills { gap: var(--space-xs); }
  .admin-pills a { font-size: 0.625rem; padding: var(--space-xs) var(--space-sm); }
}

/* Landing: full-bleed penuh (padding dikendalikan oleh section > .container) */
.main-landing { padding: 0; }

/* Product image slots: 2 columns on phones, 3 on small tablets */
@media (max-width: 640px) {
  .image-slots { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .slot-actions .btn { padding: 0.28rem 0.55rem; font-size: 0.68rem; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .image-slots { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================
   Checkout / Cart / Timeline (dipindah dari style.css)
   ============================================ */
@media (max-width: 768px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .cart-item {
    flex-wrap: wrap;
    padding: var(--space-md) 0;
    row-gap: var(--space-xs);
  }
  .cart-item-info { min-width: 100%; }
  .cart-item-line { gap: var(--space-xs); font-size: var(--text-sm); flex-wrap: wrap; }
  .cart-item-remove { margin-left: auto; padding: 2px; color: var(--gray-500); }
  .cart-item-remove i { width: 16px; height: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .order-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .timeline-step { min-width: 60px; }
  .timeline-step .timeline-dot { width: 28px; height: 28px; }
  .timeline-label { font-size: 0.625rem; }
}

@media (max-width: 480px) {
  .cart-item-img { width: 56px; height: 56px; }
  .cart-item-name { font-size: var(--text-sm); }
  .cart-item-price { font-size: var(--text-xs); }
  .orders-actions { flex-direction: column; }
}