/*
 * Penyempurnaan tampilan responsif (desktop, tablet, ponsel).
 * File ini dimuat setelah tema warna (1.css - 4.css) sehingga bisa menimpanya.
 * Ruang Mart - ruangcoding.id
 */

/* Dasar: gambar, tabel dan embed tidak boleh melebihi lebar layar */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* Tabel (keranjang, order) bisa digeser horizontal pada layar kecil */
.table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
  #page_wrap, #header_wrap, #footer_wrap { width: 100% !important; max-width: 100%; }
  .content-wrap, .container-2 { width: 100% !important; max-width: 100%; padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 768px) {
  /* Menu navigasi: dibuat membungkus dan mudah disentuh */
  #mega-menu-3 { display: flex; flex-wrap: wrap; }
  #mega-menu-3 > li { float: none; flex: 1 1 auto; }
  #mega-menu-3 a { padding: 10px 12px; display: block; }

  /* Form pencarian memenuhi lebar layar */
  .search_bar { float: none; width: 100%; margin: 8px 0; }
  .search_bar .search { width: calc(100% - 50px); }

  /* Kolom konten ditumpuk ke bawah */
  .one-half, .one-third, .two-third, .one-fourth, .three-fourth,
  .sidebar, #sidebar, .content, aside { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Tabel keranjang & order */
  table { max-width: 100%; }
  .content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Form input selalu selebar kolom */
  input[type=text], input[type=password], input[type=email], input[type=tel], select, textarea { max-width: 100%; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .login-popup { width: 92% !important; left: 4% !important; margin-left: 0 !important; }
  footer .content-wrap { text-align: center; }
}