/* ==========================================
   FRESH OCEAN THEME - CLEAN VERSION
   ========================================== */

:root {
  --navy-dark: #061a33;
  --navy-mid: #0f2d59;
  --sky-blue: #7FDBFF;
  --card-blue: #6484ba; /* Warna Card Baru */
  --cream: #f5f1e8;
}

/* 1. TEMA DASAR */
body {
  background-color: var(--navy-dark);
}

/* Jika Admin Console punya container khusus */
.admin-container, .container {
  background: transparent !important;
}

/* Header Admin */
header, .header, .navbar {
  background: rgba(6, 26, 51, 0.95) !important;
  border-bottom: 1px solid rgba(127, 219, 255, 0.3) !important;
}


/* 1. Pastikan semua halaman punya warna dasar Navy */
body {
  background-color: var(--navy-dark);
}

/* 2. Halaman Home (index) TETAP pakai gambar dari Admin */
body.home-page, 
body[data-page="home"] {
  /* Biarkan JS yang mengatur background-image */
  background-color: var(--navy-dark) !important;
}

/* 3. Halaman SELAIN Home dipaksa tanpa gambar (none) */
body.retail-page, body[data-page="retail"],
body.reseller-page, body[data-page="reseller"],
body.about-page, body[data-page="about"],
body.contact-page, body[data-page="contact"],
body.wishlist-page, body[data-page="wishlist"],
body.admin-page, body[data-page="admin"] {
  background-image: none !important;
  background: var(--navy-dark) !important;
}


/* ==========================================
   HAPUS TOTAL ANIMASI BUBBLE
   ========================================== */
.bubble, 
.bubbles, 
#bubbles,
div[class*="bubble"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   BLOKIR TOTAL KLIK PADA PRODUK HABIS
   ========================================== */
.out-of-stock {
  pointer-events: none !important;
  cursor: not-allowed !important;
}


/* ==========================================
   PAKSA WARNA MERAH UNTUK OUT OF STOCK
   ========================================== */
.out-of-stock .stock-info {
  color: #FF4136 !important;
  font-weight: bold !important;
}


/* ==========================================
   PROGRESS BAR UPLOAD FOTO (ESTETIK)
   ========================================== */
.custom-progress-wrap {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin: 10px 0;
  position: relative;
  height: 20px;
  overflow: hidden;
  border: 1px solid rgba(127, 219, 255, 0.2);
  display: none;
}

.custom-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7FDBFF, #0074D9);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.custom-progress-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  z-index: 10;
}

/* ==========================================
   PROGRESS BAR UPLOAD (ADMIN CONSOLE)
   ========================================== */
.upload-progress-wrap {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  margin: 10px 0;
  position: relative;
  height: 24px;
  overflow: hidden;
  border: 1px solid rgba(127, 219, 255, 0.3);
  display: none; /* Sembunyikan saat belum upload */
}

.upload-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7FDBFF, #2ECC40);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.upload-progress-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001f3f;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 10;
}


/* ==========================================
   TOAST NOTIFICATION (PENGGANTI ALERT)
   ========================================== */
#custom-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-toast {
  background: linear-gradient(135deg, rgba(15, 42, 82, 0.95), rgba(10, 31, 61, 0.95));
  border: 1px solid #7FDBFF;
  border-left: 5px solid #7FDBFF;
  color: #f5f1e8;
  padding: 15px 25px 15px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(120%);
  animation: toastSlideIn 0.4s forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 350px;
}
.custom-toast.hide {
  animation: toastSlideOut 0.4s forwards ease-in;
}
@keyframes toastSlideIn {
  100% { transform: translateX(0); }
}
@keyframes toastSlideOut {
  100% { transform: translateX(120%); opacity: 0; }
}