/* ==========================================================================
   CHECKERNESIA - Responsive Stylesheet
   Mobile-first responsive system.
   Breakpoints: 360, 375, 390, 414, 480, 576, 768, 820, 992, 1024, 1200, 1366, 1440, 1600, 1920
   ========================================================================== */

/* ------------------------------------------------------------------
   BASE MOBILE (default) 
   ------------------------------------------------------------------ */

html { scroll-padding-top: calc(var(--navbar-height) + var(--space-3)); }
.container,
.container-narrow { width: min(100% - 32px, var(--container-max)); }
.container-narrow { max-width: 720px; }
.section { padding-block: var(--space-12); }
.section-sm { padding-block: var(--space-6); }
.card { padding: var(--space-4); }
.page-header { padding-block: var(--space-5); }
.page-header-subtitle,
.dashboard-subtitle { margin-bottom: var(--space-4); }
.breadcrumbs { display: none; }

/* Keep the phone header focused on identity and menu. Core destinations stay
   available in the bottom navigation and drawer. */
.navbar-inner { gap: var(--space-2); }
.navbar-logo { min-width: 0; font-size: 1rem; }
.navbar-logo-img { width: 30px; height: 30px; }
.navbar-actions > .icon-btn,
.navbar-actions > .user-chip,
.navbar-actions > .btn { display: none; }
.navbar-actions > .navbar-toggle { display: inline-flex; }

.hero { padding-block: var(--space-12); }
.hero-subtitle { font-size: var(--fs-md); line-height: 1.65; }
.hero-search .search-input-wrap .search-input { min-height: 48px; font-size: var(--fs-md); }
.hero-actions { display: grid; grid-template-columns: 1fr; }
.hero-actions .btn { width: 100%; min-height: 48px; }
.hero-stats { margin-top: var(--space-2); }
.hero-stat { min-width: 0; padding-right: var(--space-2); }
.hero-stat-value { font-size: var(--fs-xl); }
.hero-stat-label { line-height: 1.3; }

.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.product-card-body { padding: var(--space-3); gap: 3px; }
.product-card-name { font-size: 0.78rem; }
.product-card-seller-avatar { display: none; }
.product-card-seller { min-width: 0; }
.product-card-seller > span:not(.verified-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card-meta { gap: 3px; white-space: nowrap; }
.product-card-price { font-size: 0.95rem; }
.product-card-price-old { display: none; }
.product-card-discount { padding: 1px 4px; }
.product-card-actions .btn { min-height: 44px; padding-inline: var(--space-2); }
.product-card-wishlist { top: var(--space-1); right: var(--space-1); }

.category-card { min-width: 174px; }
.section-header { margin-bottom: var(--space-5); }
.section-link { min-height: 44px; display: inline-flex; align-items: center; }
.footer { padding-top: var(--space-8); }
.footer-grid { gap: var(--space-6); }
.footer-bottom { padding-bottom: var(--space-6); }

/* Account and seller navigation is horizontally scrollable on phones. */
.dashboard-layout { gap: var(--space-5); }
.dashboard-sidebar {
  position: relative;
  top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.dashboard-sidebar-nav {
  flex-direction: row;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.dashboard-sidebar-nav::-webkit-scrollbar { display: none; }
.dashboard-nav-link {
  flex: 0 0 auto;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  scroll-snap-align: start;
}
.dashboard-nav-link.active { border-color: var(--primary); }
.dashboard-nav-divider,
.dashboard-nav-section-title { display: none; }
.dashboard-title { margin-bottom: var(--space-1); }
.stat-grid,
.admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card,
.admin-stat-card { padding: var(--space-3); }
.admin-stat-card { flex-direction: column; }

.order-card-header,
.order-card-footer { align-items: flex-start; }
.order-card-footer { flex-direction: column; }
.order-card-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-card-actions .btn { width: 100%; }
.order-item-row { align-items: flex-start; flex-wrap: wrap; }
.order-item-info { min-width: calc(100% - 72px); }
.order-item-price { margin-left: 72px; }
.cart-item-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
.cart-item-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); text-align: left; }
.cart-item-controls > :first-child { grid-column: 1 / -1; justify-self: start; }
.cart-item-controls .qty-stepper { margin-bottom: 0 !important; }

.table-wrap { position: relative; margin-inline: calc(var(--space-4) * -1); border-radius: 0; }
.table th,
.table td { padding: var(--space-3); }
.admin-main { padding: var(--space-4); }
.admin-filter-bar { align-items: stretch; }
.admin-filter-bar .form-control,
.admin-filter-bar select.form-control,
.admin-filter-bar .btn { width: 100%; min-width: 0; }
.settings-group { padding: var(--space-4); }
.btn-icon-sm { width: 44px; height: 44px; min-height: 44px; }

.mobile-action-stack { flex-direction: column; }
.mobile-action-stack .btn { width: 100%; }
.modal-overlay { align-items: flex-end; padding: 0; }
.modal { max-height: min(88vh, 760px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-footer { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0)); }
.toast-container { top: calc(var(--navbar-height) + var(--space-2)); left: var(--space-3); right: var(--space-3); max-width: none; }
.empty-state { padding: var(--space-10) var(--space-4); }
.empty-state-icon { width: 56px; height: 56px; }
.auth-page { align-items: flex-start; padding-block: var(--space-5); }
.auth-card { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: none; }
.auth-header { margin-bottom: var(--space-6); }

/* Two fixed bars are present on product detail. Reserve enough safe space. */
.sticky-purchase-bar { bottom: var(--bottom-nav-height); padding-bottom: var(--space-3); }
.sticky-purchase-bar + * { scroll-margin-bottom: 140px; }

/* Hide desktop-only elements by default */
.navbar-links,
.navbar-search,
.desktop-only { display: none; }

/* Show mobile-only elements */
.mobile-only { display: flex; }
.mobile-only-none { display: none; }

/* Bottom nav visible on mobile only */
.bottom-nav { display: grid; }

/* Padding for bottom nav so content isn't hidden */
body.has-bottom-nav {
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0) + var(--space-4));
}

/* Hide sticky purchase bar by default (only product detail mobile) */
.sticky-purchase-bar { display: none; }
.sticky-purchase-spacer { display: none; }

/* Section header responsive */
.section-header { flex-direction: column; align-items: flex-start; }
.section-header .section-link { align-self: flex-start; }

/* Hero title clamp */
.hero-title {
  font-size: clamp(var(--fs-2xl), 7vw, var(--fs-4xl));
}

/* Larger headings clamp */
h1 { font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); }

/* ------------------------------------------------------------------
   360px
   ------------------------------------------------------------------ */
@media (min-width: 360px) {
  .product-grid { gap: var(--space-3); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

/* ------------------------------------------------------------------
   375px
   ------------------------------------------------------------------ */
@media (min-width: 375px) {
  .container { width: min(100% - 32px, var(--container-max)); }
  .product-grid { gap: var(--space-3); }
}

/* ------------------------------------------------------------------
   390px
   ------------------------------------------------------------------ */
@media (min-width: 390px) {
  .product-grid { gap: var(--space-4); }
  .trust-grid { gap: var(--space-4); }
}

/* ------------------------------------------------------------------
   414px
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   480px
   ------------------------------------------------------------------ */
@media (min-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .content-main { padding: 0; }
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn { flex: 1; }
  .modal { max-width: 520px; }
  .toast-container { max-width: 400px; }
  .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   576px
   ------------------------------------------------------------------ */
@media (min-width: 576px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .section-header { flex-direction: row; align-items: flex-end; }
  .section-header .section-link { align-self: auto; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------
   640px - small tablet
   ------------------------------------------------------------------ */
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* ------------------------------------------------------------------
   768px - tablet (breakpoint 1)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  /* Show desktop-ish nav; mobile bottom nav still visible on tablet but we
     keep it since tablet users may benefit. We show the menu. */
  .navbar-links { display: none; }
  .navbar-search { display: flex; }
  .navbar-toggle { display: inline-flex; }
  .mobile-only { display: none; }
  .desktop-only { display: flex; }
  .navbar-actions > .icon-btn,
  .navbar-actions > .user-chip,
  .navbar-actions > .btn { display: inline-flex; }

  /* Tablet product grid 2-3 columns */
  .product-grid { grid-template-columns: repeat(3, 1fr); }

  /* Page with sidebar: show sidebar at 2-col on tablet when space allows */
  .page-with-sidebar { grid-template-columns: 240px 1fr; }
  .sidebar { position: sticky; top: calc(var(--navbar-height) + var(--space-4)); }

  /* Trust grid 4 cols on tablet */
  .trust-grid { grid-template-columns: repeat(4, 1fr); }

  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }

  /* Larger hero on tablet */
  .hero { padding-block: var(--space-20); }
  .hero-title { font-size: var(--fs-5xl); }

  .modal { max-width: 560px; }

  /* Dashboard widths */
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }

  /* Auth layout */
  .auth-card { max-width: 440px; }
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breadcrumbs { display: flex; }
  .dashboard-sidebar { position: sticky; top: calc(var(--navbar-height) + var(--space-4)); padding: var(--space-4); border: 1px solid var(--border); background: var(--surface); overflow: visible; }
  .dashboard-sidebar-nav { flex-direction: column; overflow: visible; padding-bottom: 0; }
  .dashboard-nav-link { background: transparent; border: 0; }
  .dashboard-nav-divider { display: block; }
  .admin-stat-card { flex-direction: row; }
  .order-card-footer { flex-direction: row; align-items: center; }
  .order-card-actions { width: auto; display: flex; }
  .order-item-row { flex-wrap: nowrap; align-items: center; }
  .order-item-info { min-width: 0; }
  .order-item-price { margin-left: 0; }
  .cart-layout,
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .cart-item-row { display: flex; }
  .cart-item-controls { display: block; text-align: right; }
  .cart-item-controls > :first-child { display: inline-flex; }
  .table-wrap { margin-inline: 0; border-radius: var(--radius-md); }
  .mobile-action-stack { flex-direction: row; }
  .mobile-action-stack .btn { width: auto; }
  .modal-overlay { align-items: center; padding: var(--space-4); }
  .modal { border-radius: var(--radius-lg); }
  .auth-page { align-items: center; padding-block: var(--space-8); }
}

/* ------------------------------------------------------------------
   820px
   ------------------------------------------------------------------ */
@media (min-width: 820px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------
   992px
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .container { width: min(100% - 48px, var(--container-max)); }
  .step-card { padding: var(--space-8); }

  /* Dashboard 2-col */
  .page-with-sidebar { grid-template-columns: 260px 1fr; }
  .sidebar { padding: var(--space-8); }
  .content-main { padding: var(--space-4); }

  /* Marketplace: sidebar filters become larger */
  .filter-group { margin-bottom: var(--space-6); }
}

/* ------------------------------------------------------------------
   1024px
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .container { width: min(100% - 48px, var(--container-max)); }
  .nav-links-gap { gap: var(--space-2); }
  .hero-inner { grid-template-columns: minmax(0, 760px); align-items: center; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }

  /* Tablet/dashboard sidebar full width when 1024 */
  .page-with-sidebar { grid-template-columns: 280px 1fr; }
}

/* ------------------------------------------------------------------
   1200px
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  .navbar-links { display: flex; }
  .navbar-toggle { display: none; }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .container { width: min(100% - 64px, var(--container-max)); }
  .hero-inner { grid-template-columns: minmax(0, 760px); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .section { padding-block: var(--space-20); }
  .trust-grid { gap: var(--space-4); }
  .category-card { min-width: 110px; }
}

@media (min-width: 768px) {
  .bottom-nav { display: none; }
  body.has-bottom-nav { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .sticky-purchase-bar { display: flex; }
  .sticky-purchase-spacer { display: block; height: 84px; }
  .footer { margin-bottom: var(--space-8); }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-3); }
  .trust-card-icon { grid-row: 1 / span 2; }
  .trust-card-title, .trust-card-desc { grid-column: 2; }
  body:has(.sticky-purchase-bar) {
    padding-bottom: calc(var(--bottom-nav-height) + 84px + env(safe-area-inset-bottom, 0));
  }
}

@media (min-width: 992px) {
  .category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .category-grid > * { min-width: 0; }
}

@media (max-width: 359px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   1280px - desktop
   ------------------------------------------------------------------ */
@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-title { font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); }
  .category-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-4);
  }
}

/* ------------------------------------------------------------------
   1366px
   ------------------------------------------------------------------ */
@media (min-width: 1366px) {
  .container { width: min(100% - 64px, var(--container-max)); }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------
   1440px
   ------------------------------------------------------------------ */
@media (min-width: 1440px) {
  .container { width: min(100% - 64px, 1400px); }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .hero-inner { grid-template-columns: minmax(0, 760px); }
}

/* ------------------------------------------------------------------
   1600px
   ------------------------------------------------------------------ */
@media (min-width: 1600px) {
  .container { width: min(100% - 64px, 1400px); }
  /* 5 cols only when comfortable on wide screens */
  .product-grid { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
}

/* ------------------------------------------------------------------
   1920px+
   ------------------------------------------------------------------ */
@media (min-width: 1920px) {
  .container { width: min(100% - 80px, 1400px); }
  .product-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .hero { padding-block: var(--space-24); }
  body { font-size: 16px; }
}

/* ------------------------------------------------------------------
   Landscape phones / small height
   ------------------------------------------------------------------ */
@media (max-height: 500px) {
  .hero { padding-block: var(--space-10); }
  .hero-title { font-size: var(--fs-3xl); }
  .hero-subtitle { font-size: var(--fs-md); }
}

/* ------------------------------------------------------------------
   Print
   ------------------------------------------------------------------ */
@media print {
  .navbar, .bottom-nav, .footer, .toast-container, .sticky-purchase-bar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover .product-card-image { transform: none; }
  .category-card:hover { transform: none; }
}