/* Definisi variabel warna dari desain baru */
:root {
    --primary-yellow: #fde047; /* yellow-300 */
    --primary-orange: #f97316; /* orange-500 */
    --primary-blue: #3b82f6; /* blue-500 */
    --light-bg: #f0f9ff; /* sky-50 */
    --dark-bg: #0c132c; /* Warna custom gelap */
    --light-content: #020617; /* slate-950 */
    --dark-content: #e0f2fe; /* sky-100 */
    --light-subtle: #6b7280; /* gray-500 */
    --dark-subtle: #9ca3af; /* gray-400 */
    --light-border: #dbeafe; /* blue-100 */
    --dark-border: #1e293b; /* slate-800 */
}

/* Font dasar */
body {
    font-family: 'Poppins', sans-serif;
}

/* Efek glow neon untuk tombol utama */
.neon-glow {
    box-shadow: 0 0 5px var(--primary-yellow), 0 0 10px var(--primary-yellow), 0 0 15px var(--primary-orange);
}
 /* Efek shadow untuk tombol lain */
.shadow-glow {
     box-shadow: 0 0 8px rgba(253, 224, 71, 0.6), 0 0 20px rgba(249, 115, 22, 0.4);
}
/* Styling glassmorphism untuk card */
.card-glass {
    background-color: rgba(255, 255, 255, 0.5); /* Lebih transparan di light mode */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6); /* Border lebih jelas */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* Shadow lebih halus */
}
.dark .card-glass {
    background-color: rgba(12, 19, 44, 0.3); /* Sedikit lebih transparan di dark */
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
/* Animasi gradient untuk header */
.animated-gradient {
    background-size: 200% 200%;
    animation: gradientAnimation 10s ease infinite;
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
 /* Styling panah dropdown custom */
 .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Warna subtle-light */
    background-position: right 0.7rem center; /* Sedikit lebih ke dalam */
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em; /* Sedikit lebih kecil */
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.dark .form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Warna subtle-dark */
}
/* Fallback tinggi minimum body */
body {
  min-height: max(900px, 100dvh); /* Sedikit lebih tinggi untuk footer */
  overscroll-behavior: none; /* Mencegah overscroll */
}
/* Styling tambahan dari order.css yang relevan (loader, modal animations) */
.loader { border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; }
.page-count-loader { width: 16px; height: 16px; border: 2px solid #ccc; border-top-color: var(--primary-blue); animation: spin 0.8s linear infinite; margin-left: 5px; display: inline-block; vertical-align: middle;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Animasi Modal (Tetap dari desain lama) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-zoom-in { animation: zoomIn 0.3s ease-out forwards; }
 /* Styling Progress Bar Upload (Tetap dari desain lama) */
#upload-progress-modal .bg-gradient-to-br { background: linear-gradient(135deg, #334155 0%, #1e293b 100%); }
.dark #upload-progress-modal .bg-gradient-to-br { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
#upload-progress-modal .relative.w-32.h-32 { border-color: #475569; }
.dark #upload-progress-modal .relative.w-32.h-32 { border-color: #64748b; }
#progress-wave { background: linear-gradient(to top, var(--primary-blue), #67e8f9); transition: transform 0.3s ease-out; position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; transform: translateY(100%); /* Mulai dari bawah */ }
.dark #progress-wave { background: linear-gradient(to top, var(--primary-orange), var(--primary-yellow)); }
#progress-wave::before, #progress-wave::after { content: ""; position: absolute; width: 200%; height: 15px; background-color: rgba(255, 255, 255, 0.2); border-radius: 45%; left: -50%; animation: wave 5s linear infinite; }
.dark #progress-wave::before, .dark #progress-wave::after { background-color: rgba(0, 0, 0, 0.1); }
#progress-wave::before { bottom: 0; opacity: 0.7; }
#progress-wave::after { bottom: 3px; animation-duration: 7s; animation-direction: reverse; opacity: 0.5; }
@keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
#progress-text { color: white; font-size: 1.875rem; font-weight: 700; z-index: 10; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
#upload-status { color: var(--dark-content); }
.dark #upload-status { color: var(--light-content); }
#upload-error { color: #f87171; }
.dark #upload-error { color: #fca5a5; }
/* Scrollbar Kustom (Tetap dari desain lama) */
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }
/* Styling Pilihan Pengiriman (Tetap dari desain lama) */
.delivery-option { border: 2px solid var(--light-border); background-color: rgba(255,255,255,0.7); transition: all 0.2s ease-in-out; }
.dark .delivery-option { border-color: var(--dark-border); background-color: rgba(12, 19, 44, 0.4); }
.delivery-option:hover { border-color: var(--primary-blue); }
.dark .delivery-option:hover { border-color: var(--primary-yellow); }
input[type="radio"]:checked + .delivery-option { border-color: var(--primary-blue); background-color: rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); }
.dark input[type="radio"]:checked + .delivery-option { border-color: var(--primary-yellow); background-color: rgba(253, 224, 71, 0.1); box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.4); }
 /* Tombol GPS Wajib (Tetap dari desain lama) */
.gps-required { border: 2px solid #ef4444 !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }

/* Styling Indikator Progress Dinamis */
#progress-indicator .step-item .step-circle {
    background-color: rgba(59, 130, 246, 0.3); /* blue-300/30 */
    color: rgba(224, 242, 254, 0.7); /* sky-100/70 */
    border: 1px solid rgba(59, 130, 246, 0.5); /* blue-400/50 */
    transition: all 0.3s ease-in-out;
}
#progress-indicator .step-item .step-text {
    color: rgba(224, 242, 254, 0.7); /* sky-100/70 */
    transition: all 0.3s ease-in-out;
}
#progress-indicator .step-item .step-line-right,
#progress-indicator .step-item .step-line-left {
    background-color: rgba(59, 130, 246, 0.3); /* blue-300/30 */
    transition: all 0.3s ease-in-out;
}

/* Dark mode styling */
.dark #progress-indicator .step-item .step-circle {
    background-color: rgba(30, 41, 59, 0.5); /* slate-800/50 */
    color: rgba(156, 163, 175, 0.7); /* gray-400/70 */
    border-color: rgba(59, 130, 246, 0.5); /* blue-500/50 */
}
.dark #progress-indicator .step-item .step-text {
    color: rgba(156, 163, 175, 0.7); /* gray-400/70 */
}
.dark #progress-indicator .step-item .step-line-right,
.dark #progress-indicator .step-item .step-line-left {
    background-color: rgba(30, 41, 59, 0.5); /* slate-800/50 */
}


/* Styling untuk step aktif */
#progress-indicator .step-item.active .step-circle {
    background-image: linear-gradient(to right, var(--primary-yellow), var(--primary-orange));
    color: white;
    border: none;
    box-shadow: 0 0 5px var(--primary-yellow), 0 0 10px var(--primary-yellow), 0 0 15px var(--primary-orange); /* neon-glow */
}
#progress-indicator .step-item.active .step-text {
    color: white;
    font-weight: 600; /* font-semibold */
}
/* Styling garis yang terhubung ke step aktif */
#progress-indicator .step-item.active .step-line-left,
#progress-indicator .step-item.active-prev .step-line-right {
    background-image: linear-gradient(to right, var(--primary-yellow), var(--primary-orange));
}
/* Khusus garis antara step 1 dan 2 saat step 2 aktif */
#progress-indicator .step-item#step-1.active ~ .step-item#step-2.active .step-line-left {
     background-image: linear-gradient(to right, var(--primary-yellow), var(--primary-orange));
}

/* Tambahan untuk styling form di doc.js agar konsisten */
.custom-select, .custom-input, .custom-textarea {
    background-color: rgba(255, 255, 255, 0.5); /* Corresponds to bg-white/50 */
    border-color: var(--light-border);
    color: var(--light-content); /* Explicitly set dark text color for light mode */
}

.dark .custom-select,
.dark .custom-input,
.dark .custom-textarea {
    background-color: rgba(30, 41, 59, 0.5); /* Corresponds to dark:bg-slate-800/50 */
    border-color: var(--dark-border);
    color: #60a5fa; /* A bright, readable blue (sky-400) for dark mode text, as requested. */
}

/* ========================================= */
/* Fitur: Efek Kilau Header (Sheen Effect)   */
/* ========================================= */

.sheen-header {
  /* Ini wajib agar pseudo-element ::after bisa diposisikan */
  position: relative;
  
  /* Ini wajib agar kilaunya tidak 'bocor' keluar header */
  overflow: hidden;
}

/* ::after adalah elemen 'cahaya' itu sendiri */
.sheen-header::after {
  content: '';
  position: absolute;
  top: 0;
  
  /* Mulai dari kiri, di luar layar */
  left: -150%; 
  
  /* Lebar cahaya (dibuat lebar agar miringnya bagus) */
  width: 150%; 
  height: 100%;
  
  /* Cahaya diagonal putih transparan */
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%, /* Opacity cahaya (bisa diatur) */
    transparent 100%
  );
  
  /* Miringkan balok cahaya 25 derajat */
  transform: skewX(-25deg);
  
  /* Terapkan animasi */
  /* Nama: sheen-sweep
     Durasi: 5 detik
     Tunda: 2 detik (diam dulu 2 detik sebelum mulai)
     Loop: infinite (ulangi selamanya)
  */
  animation: sheen-sweep 5s ease-in-out 2s infinite;
}

/* Animasi yang menggerakkan cahaya dari kiri ke kanan */
@keyframes sheen-sweep {
  0% {
    left: -150%; /* Posisi awal di luar layar kiri */
  }
  100% {
    left: 150%; /* Posisi akhir di luar layar kanan */
  }
}