body {
  font-family: 'Inter', Arial, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* cegah scroll horizontal */
}

header {
  background: #0b1220;
  border-bottom: 1px solid #243447;
  position: sticky;
  top: 0;
  z-index: 1000;
}
header .navbar-brand img { height: 40px; }
header .nav-link { color:#e2e8f0; margin-left: 15px; }
header .nav-link:hover { color: #fff; }

/* KONTEN */
main {
  flex: 1;
  padding: 20px 0px;
}
.content-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #f8fafc;
}

/* Select2 styling */
.select2-container { width:100% !important; max-width:100% !important; }
.select2-dropdown {
  background: #0b1220;
  border: 1px solid #243447;
  border-radius: 8px;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.select2-container--default .select2-selection--single {
  background-color: #0b1220;
  border: 1px solid #243447;
  color: #e2e8f0;
  height: 54px;
  border-radius: 12px;
  padding: 8px 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height:36px;
  font-size:15px;
  color:#e2e8f0;
}
.select2-results__option {
  color:#e2e8f0;
  padding:8px 12px;
  white-space: normal;
  line-height:1.5;
}
.select2-results__option--highlighted { background:#1e293b !important; color:#fff !important; }
.select2-results__group {
  background:#1f2a37;
  color:#e6eef7;
  padding:8px 12px;
  font-weight:600;
  font-size:14px;
  position: sticky;
  top:0;
  z-index:5;
}
.select2-results__options { max-height:420px !important; overflow-y:auto !important; }

/* Produk detail box */
#produkDetail {
  margin-top: 25px;
  background: #071022;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #243447;
  color: #e2e8f0;
  min-height: 160px;
}

/* FOOTER */
footer {
  background:#0b1220;
  border-top:1px solid #243447;
  text-align:center;
  padding:15px;
  font-size:14px;
  color:#94a3b8;
}
footer a { color:#e2e8f0; text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* Hamburger icon putih */
.navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  width: 30px;
  height: 25px;
  display: inline-block;
}
    
/* Garis hamburger */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;             /* ketebalan garis */
  background-color: #fff;  /* warna putih solid */
  border-radius: 2px;
}
    
.navbar-toggler-icon::before {
  top: 0;
}
    
.navbar-toggler-icon::after {
  bottom: 0;
}
    
.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}

/* Tambahan untuk halaman order.php */
.btn {
  border-radius: 8px;
}

h2 {
  color: #f1f5f9;
}

.card-dark {
  background-color: #071022 !important;
  border: 1px solid #243447 !important;
  color: #e2e8f0;
  border-radius: 12px;
}

.highlight {
  color: #38bdf8;
  font-weight: bold;
}
.card-dark .highlight {
  color: #38bdf8 !important; /* biru muda */
  font-weight: bold !important;
}

.wa-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.wa-float:hover {
  transform: scale(1.1);
}
.wa-float img {
  width: 35px;
  height: 35px;
}

/* 🔹 Tambahan agar di mobile lebih kecil */
@media (max-width: 768px) {
  .wa-float {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
  }
  .wa-float img {
    width: 25px;
    height: 25px;
  }
}