/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}

/* Glass & Effects */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Background Blobs */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
    animation: blob 10s infinite;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

/* Skill Pills */
.skill-pill {
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Form Styles */
select option {
    background-color: #1e293b;
    color: white;
}

/* Modal Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* =========================================
   OVERRIDE KHAS UNTUK LIGHT MODE (V2 - LEBIH KUAT)
   (Letak ini di bahagian paling bawah file style.css)
   ========================================= */

/* 1. Paksa Background Utama Jadi Kelabu Cair */
html:not(.dark) body {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

/* 2. MENUKAR SEMUA JENIS TEKS CERAH KEPADA GELAP */
/* Ini akan betulkan list yang hilang tu */
html:not(.dark) .text-white,
html:not(.dark) .text-gray-50,
html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200, /* Punca masalah dalam gambar */
html:not(.dark) .text-gray-300, 
html:not(.dark) .text-gray-400 {
    color: #1f2937 !important; /* Tukar jadi kelabu gelap */
}

/* 3. MENUKAR ICON KECIL YANG TERLALU CERAH */
html:not(.dark) .text-gray-500 {
    color: #4b5563 !important;
}

/* 4. BACKGROUND ELEMENT (KAD & NAV) */
html:not(.dark) .bg-dark-900\/60,
html:not(.dark) .bg-dark-900\/80,
html:not(.dark) .bg-dark-900\/90,
html:not(.dark) .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 5. KOTAK GELAP (PAKEJ/MASALAH) JADI PUTIH */
html:not(.dark) .bg-dark-800,
html:not(.dark) .bg-dark-800\/50,
html:not(.dark) .glass-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* 6. SKILL PILLS (WordPress/Elementor buttons) */
html:not(.dark) .skill-pill {
    background-color: #e5e7eb !important; /* Background kelabu cair */
    color: #1f2937 !important; /* Tulisan gelap */
    border-color: #d1d5db !important;
}

/* 7. BORDER/GARISAN PEMISAH */
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/20 {
    border-color: #e5e7eb !important;
}

/* 8. WATERMARK & LAIN-LAIN */
html:not(.dark) .text-gold-500 {
    color: #d97706 !important; /* Gelapkan kuning sikit supaya nampak */
}

html:not(.dark) .opacity-15 {
    opacity: 0.05 !important;
}

/* =========================================
   FIX KHAS: TAJUK HARGA & BACKGROUND
   (Background asal dia gradient gelap, kita kena buang)
   ========================================= */

html:not(.dark) #harga {
    background: #f3f4f6 !important; /* Tukar jadi kelabu cair */
    background-image: none !important; /* PENTING: Buang gradient gelap */
}

/* Pastikan tajuk dia betul-betul hitam pekat */
html:not(.dark) #harga h2 {
    color: #000000 !important;
}

/* Pastikan sub-tajuk 'Promosi' warna oren gelap sikit supaya jelas */
html:not(.dark) #harga p.text-gold-400 {
    color: #d97706 !important;
    font-weight: 800 !important;
}

/* =========================================
   FIX TERAKHIR: MODAL HEADER (BORANG)
   ========================================= */

/* Tukar background header modal jadi PUTIH bila Light Mode */
html:not(.dark) #quoteModal .bg-dark-900 {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Pastikan Tajuk 'Mohon Sebut Harga' jadi HITAM PEKAT */
html:not(.dark) #quoteModal h3 {
    color: #111827 !important;
}

/* Pastikan butang 'X' (Tutup) nampak jelas */
html:not(.dark) #quoteModal button.text-gray-400 {
    color: #9ca3af !important;
}

/* Hover effect untuk butang X */
html:not(.dark) #quoteModal button.text-gray-400:hover {
    color: #ef4444 !important;
}

/* =========================================
   FIX KHAS: KEMBALIKAN WARNA PUTIH
   (Untuk elemen yang sepatutnya kekal putih walaupun Light Mode)
   ========================================= */

/* 1. Fix Tooltip (Caption Icon Terapung) */
/* Pastikan tulisan dalam kotak hitam kecil kekal PUTIH */
html:not(.dark) .fixed .group span.bg-black\/80 {
    color: #ffffff !important;
}

/* 2. Fix Header Borang (Modal) */
/* Paksa background header borang jadi PUTIH supaya tajuk hitam nampak */
html:not(.dark) #quoteModal .bg-dark-900 {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Pastikan tajuk borang 'Mohon Sebut Harga' jadi HITAM PEKAT */
html:not(.dark) #quoteModal h3.text-white {
    color: #111827 !important;
}

/* Pastikan butang pangkah (X) nampak jelas */
html:not(.dark) #quoteModal button {
    color: #6b7280 !important;
}