:root {
    /* --- WARNA UTAMA (BIRU) --- */
    --primary-color: #2563eb;      /* Blue 600 (Warna utama) */
    --primary-hover: #1e40af;      /* Blue 800 (Warna saat hover) */
    --bg-color: #ffffff;           /* Putih */
    --text-color: #000000;         /* Hitam */
    --text-muted: #4b5563;         /* Abu-abu gelap */
    --border-color: #bfdbfe;       /* Blue 200 (Warna border lembut) */
    
    /* --- KOMPONEN --- */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --- KELAS UTAMA UNTUK BUTTON & LINK --- */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    display: inline-block;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

/* --- KELAS UNTUK KARTU (IKLAN CARD) --- */
.iklan-card:hover {
    border-color: var(--primary-color) !important;
    /* Opsional: Jika ingin border tetap 1px tapi warnanya berubah tebal secara visual */
    border-width: 1px !important;
}

/* Mengatasi masalah "lompatan" layout saat border berubah dari 1px ke 2px */
.iklan-card {
    border: 1px solid #e5e7eb !important; /* Gray-200 */
}

/* Mengaktifkan transisi halus untuk border */
.iklan-card {
    transition: all 0.3s ease !important;
}

/* --- KELAS UNTUK KATEGORI --- */
.kategori-link {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.kategori-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- SPINNER / LOADER --- */
.spinner-border {
    border-color: var(--primary-color) transparent transparent transparent;
}

/* --- KELAS CUSTOM (Gunakan di HTML Anda) --- */
.btn-jual {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 0.75rem; 
    font-size: 0.75rem;    
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-jual:hover {
    background-color: var(--primary-hover);
}

.card-border {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.card-border:hover {
    border-color: var(--primary-color);
}

/* --- BLOK PEMAKSA: Menimpa Tailwind (Orange -> Biru/Merah) --- */

/* 1. Background */
.bg-orange-100 { background-color: #eff6ff !important; }
.bg-orange-500 { background-color: var(--primary-color) !important; }
.bg-orange-600 { background-color: var(--primary-hover) !important; }

/* 2. Border */
.border-orange-200 { border-color: var(--border-color) !important; }
.border-orange-400 { border-color: var(--primary-color) !important; }
.focus\:ring-orange-400:focus { --tw-ring-color: var(--primary-color) !important; }

/* 3. Text Warna */
.text-orange-500 { color: var(--primary-color) !important; }
.text-orange-600 { color: var(--primary-hover) !important; }

/* 4. Hover State (Warna Biru untuk Border, Merah untuk Teks) */
.hover\:bg-orange-50:hover { background-color: #fef2f2 !important; }
.hover\:bg-orange-600:hover { background-color: var(--primary-hover) !important; }

/* Override Teks Hover menjadi Merah */
.hover\:text-orange-500:hover, 
.group:hover .group-hover\:text-orange-500 { color: #dc2626 !important; }

.hover\:text-orange-600:hover, 
.group:hover .group-hover\:text-orange-600 { color: #dc2626 !important; }

/* Override Border Hover menjadi Biru */
.hover\:border-orange-400:hover { border-color: var(--primary-color) !important; }

/* 5. Khusus untuk warna cokelat dari kategori */
.border-\[\#EADBCC\] { border-color: var(--border-color) !important; }
.text-\[\#C4884F\] { color: var(--primary-color) !important; }
.shadow-\[0_4px_12px_rgba\(194\,132\,69\,0\.04\)\] { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; }

/* --- OVERRIDE SIDEBAR (Orange -> Biru/Hitam) --- */

/* 1. Warna Slider Progress & Thumb */
#slider-progress { background-color: var(--primary-color) !important; }
.custom-slider::-webkit-slider-thumb { background: var(--primary-color) !important; }
.custom-slider::-moz-range-thumb { background: var(--primary-color) !important; }

/* 2. Warna Ikon Sidebar */
.fa-sliders.text-orange-500 { color: var(--primary-color) !important; }

/* 3. Warna Fokus Ring pada Input Harga & Select */
.focus\:ring-orange-400\/20:focus { --tw-ring-color: var(--primary-color) !important; }
.focus\:border-orange-400:focus { border-color: var(--primary-color) !important; }

/* 4. Warna Radio Button (Kondisi Barang) */
.text-orange-500 { color: var(--primary-color) !important; }
.accent-orange-500 { accent-color: var(--primary-color) !important; }
.focus\:ring-orange-400:focus { --tw-ring-color: var(--primary-color) !important; }

/* 5. Warna Tombol Filter (Hover) */
#btn-terapkan-filter:hover { background-color: var(--primary-color) !important; }


/* --- OVERRIDE GLOBAL DASHBOARD (Menghilangkan Sisa Orange) --- */

/* 1. Menghilangkan Glow Orange pada Tombol & Kartu */
.shadow-orange-200 { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }
.shadow-\[0_4px_12px_rgba\(249\,115\,22\,0\.08\)\] { 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; 
}

/* 2. Mengubah Background Orange Header Dashboard menjadi Biru Muda */
.bg-orange-200 { background-color: #dbeafe !important; } /* Blue 100 */
.bg-orange-500 { background-color: var(--primary-color) !important; }
.bg-orange-600 { background-color: var(--primary-hover) !important; }

/* 3. Mengubah Border Orange menjadi Biru */
.border-orange-100 { border-color: #bfdbfe !important; }

/* 4. Memastikan tombol "Pasang Iklan" konsisten dengan tema */
.bg-orange-500.hover\:bg-orange-600:hover { background-color: var(--primary-hover) !important; }

/* --- OVERRIDE GLOBAL CHAT WIDGET & MODAL (Orange -> Biru) --- */

/* 1. Tombol Chat & Icon */
.border-orange-600 { border-color: var(--primary-color) !important; }
.text-orange-600 { color: var(--primary-color) !important; }
.bg-gradient-to-r.from-orange-500.to-orange-700 { 
    background: linear-gradient(to right, var(--primary-color), var(--primary-hover)) !important; 
}

/* 2. Header Modal Chat */
.bg-orange-600 { background-color: var(--primary-color) !important; }

/* 3. Input Focus & Border */
.focus\:outline-orange-500:focus { outline-color: var(--primary-color) !important; }
.focus\:border-orange-500:focus { border-color: var(--primary-color) !important; }

/* 4. Chat Bubble "Me" (Pesan Saya) */
.chat-bubble-me { background-color: var(--primary-color) !important; }

/* 5. Produk Preview */
.bg-orange-50 { background-color: #eff6ff !important; } /* Blue 50 */
.border-orange-100 { border-color: #bfdbfe !important; }
.border-orange-200 { border-color: #bfdbfe !important; }
.text-orange-600 { color: var(--primary-color) !important; }