/* --- PAGINATION (BULLET) --- */
/* Titik yang tidak aktif: menggunakan abu-abu netral yang aman di putih maupun hitam */
.foodBestSellerSwiper .swiper-pagination-bullet {
    background: rgba(156, 163, 175, 0.5) !important; /* Warna Gray-400 dengan opacity */
    opacity: 1;
    transition: all 0.3s ease;
}

/* Titik yang aktif: Hijau pill-shape yang konsisten */
.foodBestSellerSwiper .swiper-pagination-bullet-active {
    background: #16a34a !important; /* Green-600 */
    width: 24px !important; 
    border-radius: 5px !important;
}

/* --- SCROLLBAR --- */
/* Track garis (latar belakang scrollbar) */
.foodBestSellerSwiper .swiper-scrollbar {
    background: rgba(0, 0, 0, 0.05) !important; /* Sangat halus */
    height: 4px !important;
}

/* Handle scroll (bagian yang bergerak) */
.foodBestSellerSwiper .swiper-scrollbar-drag {
    background: rgba(22, 163, 74, 0.6) !important; /* Hijau Green-600 transparan */
}

/* --- PENYESUAIAN DARK MODE (Hanya jika ingin sedikit lebih terang) --- */
.dark .foodBestSellerSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2) !important; /* Putih tipis agar kontras di gelap */
}

/* Titik yang aktif: Hijau pill-shape yang konsisten */
.dark .foodBestSellerSwiper .swiper-pagination-bullet-active {
    background: #16a34a !important; /* Green-600 */
    width: 24px !important; 
    border-radius: 5px !important;
}

.dark .foodBestSellerSwiper .swiper-scrollbar {
    background: rgba(255, 255, 255, 0.1) !important;
}
/* Custom styling tambahan khusus untuk kartu makanan jika diperlukan */
.food-card-glass {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mask-gradient {
    /* Membuat efek memudar di sisi kiri dan kanan */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    
    /* Pastikan overflow terlihat agar shadow tetap aman sebelum menyentuh gradasi */
    overflow: visible !important;
}

/* Tambahkan di food-preview.css */
.title-heavy {
    letter-spacing: -0.05em; /* Membuat huruf agak merapat agar terlihat lebih padat */
}

/* Tambahkan di food-preview.css jika ingin sedikit nyawa */
.dot-pulse {
    animation: soft-pulse 4s infinite ease-in-out;
}

@keyframes soft-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.4; }
}

/* Custom Swiper Theme untuk Cancerina */
:root {
    /* Mengubah warna titik (bullets) aktif */
    --swiper-pagination-color: #16a34a; /* green-600 */
    /* Mengubah warna scrollbar saat ditekan */
    --swiper-scrollbar-drag-bg: #16a34a; 
}

/* Mengatur warna titik yang tidak aktif (opsional) */
.swiper-pagination-bullet {
    background: #94a3b8; /* slate-400 */
    opacity: 0.5;
}

/* Mengatur warna background track scrollbar */
.swiper-scrollbar {
    background: rgba(22, 163, 74, 0.1) !important; /* Hijau transparan */
    height: 4px !important;
}

/* Khusus untuk Mobile agar lebih terlihat */
@media (max-width: 767px) {
    .foodBestSellerSwiperMobile .swiper-pagination-bullet-active {
        width: 20px; /* Membuat titik aktif lebih panjang (elegan) */
        border-radius: 5px;
        transition: all 0.3s ease;
    }
}