@font-face {
  font-family: "Century Gothic";
  src: url(../fonts/CenturyGothic.ttf);
}

#loading {
  padding: 5px;
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#loading img {
  width: 100px; 
}

.warning-portrait {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.colored-toast.swal2-icon-success {
  background-color: #466146 !important;
}

.colored-toast.swal2-icon-error {
  background-color: #614646 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #615d46 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #46615f !important;
}

.colored-toast.swal2-icon-question {
  background-color: #465961 !important;
}

.colored-toast .swal2-title {
  color: white;
  margin-bottom: 0;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}

#swal2-content {
  padding: 0;
}

.btn-md {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  border-radius: 0.45rem;
}

body.swal2-shown {
    overflow: hidden !important;
    padding-right: 0 !important;
}

.page-wrapper {
    min-height: 85dvh;
}

/* Warna dasar: Putih */
.nav-link {
    color: #ffffff;
    transition: all 0.3s ease; /* Biar perpindahan warna halus */
    padding: 10px 15px !important;
}

/* Hover & Focus: Beri sedikit perbedaan (misal: putih agak transparan atau abu terang) */
.nav-link:hover, 
.nav-link:focus {
    color: #cbd5e0; /* Abu-abu terang agar ada feedback visual */
}

/* Saat Dropdown Aktif: Tetap elegan tanpa kontras yang terlalu 'nabrak' */
.nav-link.dropdown-toggle.show {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important; /* Background semi-transparan */
    border-radius: 4px;
}

@media (max-width: 992px) {
  /* 1. Beri background berbeda pada area dropdown agar kontras dengan navbar */
  .nav-item.dropdown .dropdown-menu {
      background-color: #1e2a3a !important; /* Abu-abu sangat muda */
      border: none;
      border-left: 4px solid #757575; /* Garis aksen di kiri sebagai penanda */
      margin: 5px 10px; /* Memberi jarak dari pinggir layar */
      padding-left: 5px;
      border-radius: 10px;
  }

  /* 2. Pastikan teks item menu berwarna gelap/tegas */
  .dropdown-item {
      color: #ebebeb !important;
      /* font-weight: 500; */
      padding: 10px 15px !important; /* Area klik lebih besar untuk jempol */
  }

  /* 3. Perbaikan saat nav-link (Induk) sedang terbuka (Show) */
  .nav-link.dropdown-toggle.show {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: #ffffff !important; /* Tetap putih agar kontras dengan navbar gelap */
      border-radius: 8px;
  }

  /* 4. Pastikan icon SVG tetap terlihat */
  .nav-link.dropdown-toggle.show svg {
      stroke: #ffffff !important;
  }

  .dropdown-item.active {
      background-color: rgba(0, 0, 0, 0) !important;
      border-radius: 0 10px 10px 0;
      position: relative;
      padding-left: 1.4rem !important; /* Beri ruang di kiri */
  }

  /* Menambahkan garis vertikal kecil di sebelah kiri item yang aktif */
  .dropdown-item.active::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 20%;
      bottom: 20%;
      width: 4px;
      background-color: #ffffff; /* Garis putih kontras di atas background biru */
      border-radius: 2px;
  }

  .navbar-collapse {
      will-change: transform;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
  }

  .navbar-collapse {
      position: absolute; /* Menu melayang, tidak mendorong konten */
      top: 100%;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: white; /* Sesuaikan dengan tema */
      box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }
}

.clickedTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0;
}

.clickedTable tbody tr {
    background: #ffffff;
    cursor: pointer;
    transition: 
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

/* Efek Saat Diklik (pressed) */
.clickedTable tbody tr:active {
    transform: scale(0.97);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    background-color: #f3f3f3;
}

	#closeModalIcon, #closeCheckout {
		border: none;
		background: none;
		transition: opacity 0.2s;
		cursor: pointer;
	}

	#closeModalIcon:hover, #closeCheckout:hover {
		opacity: 0.7; /* Memberi efek visual saat disentuh */
	}

	/* Menghilangkan outline biru saat diklik agar lebih clean */
	#closeModalIcon:focus, #closeCheckout:focus {
		box-shadow: none;
	}

  html, body {
    overscroll-behavior: none;
}