/* ================================================================
   MOREMARKET MOBILE UI/UX OPTIMIZATION
   ================================================================ */

/* ── Global Mobile Resets ── */
@media (max-width: 767.98px) {
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(232, 93, 36, 0.1);
    overflow-x: hidden;
  }

  /* Add bottom padding for fixed bottom nav */
  body {
    padding-bottom: 64px !important;
  }

  /* Reduce overall footer margin on mobile */
  footer.bg-dark {
    margin-top: 2rem !important;
  }
}

/* ── Sticky Bottom Navigation Bar (Mobile Only) ── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 767.98px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    justify-content: space-around;
    align-items: center;
    height: 60px;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    text-decoration: none !important;
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: color 0.2s;
    padding: 4px 2px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a:active,
  .mobile-bottom-nav a.active {
    color: #E85D24 !important;
  }

  .mobile-bottom-nav svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  .mobile-bottom-nav .nav-badge {
    position: absolute;
    top: 0;
    right: calc(50% - 16px);
    background: #E85D24;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
  }

  /* Hide WhatsApp floating button on mobile (replaced by bottom nav) */
  .whatsapp-float-wrapper {
    display: none !important;
  }

  /* Hide desktop top bar on mobile for cleaner header */
  .topbar {
    display: none !important;
  }
}

/* ── Navbar Mobile Optimization ── */
@media (max-width: 767.98px) {
  /* Hide the Tailwind topbar row on mobile */
  header > .bg-gray-50 {
    display: none !important;
  }

  /* Compact main nav row */
  header > div:nth-child(2) {
    padding: 8px 12px !important;
  }

  /* Logo smaller on mobile */
  header .text-2xl {
    font-size: 1.3rem !important;
  }

  /* Mobile search bar enhancement */
  header .md\:hidden {
    padding: 0 12px 10px !important;
  }

  header .md\:hidden input[type="text"] {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  header .md\:hidden button[type="submit"] {
    padding: 10px 14px !important;
  }

  /* Category strip scrollable on mobile */
  header .border-t .max-w-7xl {
    padding: 0 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide "All Categories" dropdown on mobile */
  header .border-t .group {
    display: none !important;
  }

  /* Hide Request Quote button in nav on mobile */
  header .border-t .flex-shrink-0 {
    display: none !important;
  }

  /* Stretch categories strip */
  header .border-t .flex-1 {
    margin: 0 !important;
    padding: 10px 4px !important;
    gap: 12px !important;
  }

  header .border-t .flex-1 a {
    font-size: 11px !important;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Product Card Mobile Optimization ── */
@media (max-width: 767.98px) {
  .product-card-custom {
    border-radius: 10px !important;
  }

  .product-card-custom .p-4 {
    padding: 10px !important;
  }

  /* Product name - slightly smaller */
  .product-card-custom a.text-sm {
    font-size: 12px !important;
    min-height: 2rem !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  /* SKU text */
  .product-card-custom .text-\[10px\] {
    font-size: 9px !important;
  }

  /* Specs row */
  .product-card-custom .flex.items-center.gap-1\.5.text-\[10px\] {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  /* Star ratings compact */
  .product-card-custom .flex.items-center.gap-1\.5.mb-3 {
    margin-bottom: 6px !important;
  }

  /* Stock badge compact */
  .product-card-custom .mb-4:has(.inline-flex) {
    margin-bottom: 6px !important;
  }

  /* Price section */
  .product-card-custom .text-lg {
    font-size: 15px !important;
  }

  .product-card-custom .text-xs {
    font-size: 10px !important;
  }

  /* CTA Buttons - stack vertically on very small screens */
  .product-card-custom .grid.grid-cols-2 {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .product-card-custom .grid.grid-cols-2 a,
  .product-card-custom .grid.grid-cols-2 button {
    padding: 8px 6px !important;
    font-size: 10px !important;
  }

  /* Quick View overlay - make it tap-friendly */
  .product-card-custom .absolute.inset-0.bg-black\/10 {
    display: none !important;
  }
}

/* ── Product Grid Mobile Layout: 2 columns ── */
@media (max-width: 767.98px) {
  /* Index page grid */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* List page grid (Bootstrap) */
  .row.row-cols-2 {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 10px !important;
  }
}

/* ── Hero Section Mobile Optimization ── */
@media (max-width: 767.98px) {
  .bg-brand-dark.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .bg-brand-dark h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .bg-brand-dark p {
    font-size: 13px !important;
  }

  /* CTA buttons full width on mobile */
  .bg-brand-dark .flex.flex-wrap.gap-4 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .bg-brand-dark .flex.flex-wrap.gap-4 a {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  /* Stats cards compact */
  .bg-brand-dark .space-y-4 > div {
    padding: 12px !important;
  }

  .bg-brand-dark .space-y-4 .w-12 {
    width: 40px !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  /* Trust strip - compact layout */
  .bg-brand-dark .grid.grid-cols-2 {
    gap: 12px !important;
  }

  .bg-brand-dark .grid.grid-cols-2 h4 {
    font-size: 11px !important;
  }
}

/* ── Footer Mobile Optimization ── */
@media (max-width: 767.98px) {
  footer .container {
    padding: 1.5rem 1rem !important;
  }

  footer .row.g-4 {
    gap: 1rem !important;
  }

  /* Footer logo section full width */
  footer .col-lg-3 {
    margin-bottom: 1rem;
  }

  footer .footer-logo {
    height: 35px !important;
  }

  footer h6 {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  footer ul.list-unstyled li {
    margin-bottom: 2px !important;
  }

  footer ul.list-unstyled li a {
    font-size: 12px !important;
  }

  /* Social icons - smaller */
  footer .d-flex.gap-3 a {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }

  /* Payment icons row */
  footer .d-flex.gap-2 img,
  footer .d-flex.gap-2 svg {
    height: 22px !important;
  }

  /* Bottom copyright row */
  footer hr + .d-flex {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ── Product Detail Page Mobile ── */
@media (max-width: 767.98px) {
  /* Breadcrumb compact */
  .bg-gray-50 nav,
  .bg-light nav {
    font-size: 11px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Page title */
  .bg-gray-50 h1,
  .bg-light h1 {
    font-size: 18px !important;
  }
}

/* ── Cookie Banner Mobile Optimization ── */
@media (max-width: 767.98px) {
  #cookie-consent-banner {
    bottom: 60px !important; /* Above the bottom nav */
  }

  #cookie-consent-banner .container {
    padding: 10px !important;
  }

  #cookie-consent-banner .d-flex {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #cookie-consent-banner .rounded-circle {
    width: 32px !important;
    height: 32px !important;
  }

  #cookie-consent-banner .fw-bold {
    font-size: 13px !important;
  }
}

/* ── Mobile Drawer Refinements ── */
@media (max-width: 767.98px) {
  /* Alpine mobile menu drawer */
  .lg\:hidden.fixed.inset-0 .w-80 {
    width: 85vw !important;
    max-width: 320px;
  }

  /* Menu items touch-friendly sizing */
  .lg\:hidden.fixed.inset-0 a {
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
}

/* ── Touch-Friendly Improvements ── */
@media (max-width: 767.98px) {
  /* All buttons and links minimum touch target */
  button, 
  a.btn,
  .product-card-custom a,
  .product-card-custom button {
    min-height: 36px;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Better font rendering on mobile */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ── Mobile Pagination ── */
@media (max-width: 767.98px) {
  .pagination {
    gap: 2px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination .page-link {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: 36px;
    text-align: center;
  }

  .custom-pagination nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Offcanvas Filter Panel Mobile ── */
@media (max-width: 767.98px) {
  .offcanvas {
    width: 85vw !important;
    max-width: 340px;
    padding-bottom: 60px !important;
  }
}

/* ── Product Image Card Uniform ── */
@media (max-width: 767.98px) {
  .product-card .product-img-wrap,
  .product-card-custom > div:first-child {
    height: 140px !important;
  }

  .product-card-custom > div:first-child img {
    height: 140px !important;
  }

  /* Old-style card images */
  .product-card .product-img-wrap img {
    object-fit: contain !important;
  }
}

/* ── Smooth Micro-Animations ── */
@media (max-width: 767.98px) {
  .product-card-custom {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .product-card-custom:active {
    transform: scale(0.98) !important;
  }
}

/* ── Cart Page Mobile ── */
@media (max-width: 767.98px) {
  /* Cart item layout - stack vertically */
  .cart-item.d-flex {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .cart-item .flex-shrink-0 {
    width: 80px !important;
    height: 80px !important;
  }

  .cart-item h5 {
    font-size: 0.9rem !important;
  }

  /* Cart page container */
  .container.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Cart order summary on mobile */
  .col-lg-4 .card.sticky-top {
    position: static !important;
  }

  /* Checkout button full width */
  .d-grid .btn-lg {
    font-size: 1rem !important;
    padding: 14px !important;
  }

  /* Cart heading */
  .container.py-5 > .d-flex h2 {
    font-size: 1.2rem !important;
  }
}

/* ── Login/Register Pages Mobile ── */
@media (max-width: 767.98px) {
  .card.shadow-lg {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }

  .card.shadow-lg .card-body {
    padding: 16px !important;
  }

  .form-control {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .btn-primary.btn-lg {
    padding: 12px !important;
    font-size: 15px !important;
  }
}

/* ── Contact Page Mobile ── */
@media (max-width: 767.98px) {
  .contact-section .container {
    padding: 1rem !important;
  }
}

/* ── Print Prevention (hide bottom nav when printing) ── */
@media print {
  .mobile-bottom-nav {
    display: none !important;
  }
}