/* ==========================================================================
   AKAR JATI NUSANTARA - MASTER MOBILE & ANDROID RESPONSIVE SYSTEM
   Heritage Teak: #2C1810 | Gold: #C5A059 | Dark: #140D09 | Cream: #FAF6F0
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Global Box Sizing & Fluid Layout */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
  
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    font-size: 14px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* 2. Top Header & Navbar (Sleek, Compact, Never Covering Content) */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 6px 10px 0 10px !important;
    z-index: 1000 !important;
    height: auto !important;
    background: transparent !important;
  }

  header nav {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #140D09 !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  }

  header nav > div:first-child {
    display: none !important;
  }

  /* Hide desktop hover menus on mobile */
  header nav div.absolute {
    display: none !important;
  }

  /* Logo container & image */
  header nav a[href="/"] {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    max-height: 38px !important;
  }

  header nav a[href="/"] > div {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  header nav img, header img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Hamburger & Navigation button in header */
  header nav button[aria-label="Toggle Navigation"],
  header nav button.xl\:hidden {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #24160F !important;
    border: 1px solid #C5A059 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  header nav button[aria-label="Toggle Navigation"] svg,
  header nav button.xl\:hidden svg {
    width: 20px !important;
    height: 20px !important;
    color: #C5A059 !important;
    stroke: #C5A059 !important;
    display: block !important;
  }

  /* 3. Mobile Navigation Dropdown Drawer */
  header > div.xl\:hidden {
    border-radius: 16px !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    background: #180F0A !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9) !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 4. Main Page Spacing (Clearance below fixed header) */
  body {
    padding-top: 66px !important;
  }

  main, [class*="pt-24"], [class*="pt-28"], [class*="pt-32"], [class*="pt-36"] {
    padding-top: 14px !important;
  }

  /* 5. Typography */
  h1 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(17px, 4.5vw, 23px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(15px, 4vw, 19px) !important; line-height: 1.35 !important; }
  p { font-size: 13.5px !important; line-height: 1.6 !important; }

  /* 6. Region Filter Pills: Modern Smooth Horizontal Scroll */
  [class*="wilayah"],
  .flex.flex-wrap.gap-2.justify-center,
  div[class*="flex-wrap"][class*="justify-center"]:has(button[class*="Bojonegoro"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 12px 10px 12px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }
  
  [class*="wilayah"]::-webkit-scrollbar,
  div[class*="flex-wrap"]:has(button[class*="Bojonegoro"])::-webkit-scrollbar {
    display: none !important;
  }

  [class*="wilayah"] button,
  div[class*="flex-wrap"]:has(button[class*="Bojonegoro"]) button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    border-radius: 9999px !important;
  }

  /* 7. Search Bar & Forms */
  input[type="text"], input[type="search"], select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom on mobile */
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  /* 8. Product & Gallery Cards */
  [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  [class*="rounded-3xl"].border,
  [class*="rounded-2xl"].border {
    border-radius: 16px !important;
  }

  /* 9. Studio 3D & Room Viewer Mobile Adaptations */
  .studio-main-content {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden !important;
  }

  .room-canvas {
    width: 100% !important;
    height: 46vh !important;
    min-height: 46vh !important;
    max-height: 46vh !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .ctrl-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 54vh !important;
    max-height: 54vh !important;
    flex-grow: 1 !important;
    overflow-y: auto !important;
    border-top: 2px solid #C5A059 !important;
    border-left: none !important;
    background: #140D09 !important;
  }

  .panel-body {
    padding-bottom: 40px !important;
  }

  canvas, [class*="viewer"], [class*="3d-viewer"] {
    touch-action: none !important;
  }

  /* 10. Modals & Dialogs */
  [class*="modal"], [role="dialog"], [class*="fixed inset-0"] > div:not([class*="backdrop"]) {
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 12px auto !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  /* 11. Floating Action Buttons */
  .fixed.bottom-4.right-4, .fixed.bottom-6.right-6 {
    bottom: 16px !important;
    right: 14px !important;
    z-index: 99 !important;
  }

  /* 12. Footer */
  footer {
    padding: 24px 16px 80px 16px !important;
    text-align: center !important;
  }

  footer > div {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* Extra small devices (<= 375px) */
@media (max-width: 375px) {
  html, body { font-size: 13px !important; }
  header nav { height: 48px !important; min-height: 48px !important; }
  header nav img { height: 28px !important; max-width: 120px !important; }
  h1 { font-size: 19px !important; }
  h2 { font-size: 16px !important; }
}