/**
 * File: assets/css/style-portal.css
 * Deskripsi: Styling Spesifik Portal Layanan Kampung Siak
 * @ziedanet - https://zieda.net/
 */

/* Spacing Optimization khusus Mobile & Tablet */
@media (max-width: 1023px) {
    main {
        padding-top: 15px !important;
    }

    #section-slider {
        margin-top: 2px !important;
    }

    #section-bawah {
        margin-bottom: -4px !important;
    }
}

/* Desktop tetap menempel sempurna */
@media (min-width: 1024px) {
    main { padding-top: 0 !important; }
    #section-slider { margin-top: 0 !important; }
    #section-bawah { margin-bottom: 40px !important; }
}

/* News Card Effects */
.news-card:hover .news-overlay {
    opacity: 1;
}

.news-overlay {
    transition: all 0.3s ease;
}

@media (max-width: 1023px) {
    .news-overlay {
        display: none !important;
    }
}

/* Gaya untuk layanan yang belum login (ganjil) */
.layanan-locked {
    /* filter: grayscale(1); */
    /* opacity: 0.6; */
    cursor: pointer; /* Ubah ke pointer agar user tahu ini bisa diklik untuk memunculkan pesan login */
}

/* Tambahan agar modal terasa smooth */
#modalLayanan {
    transition: opacity 0.3s ease-in-out;
}

.layanan-locked:hover {
    border-color: #e2e8f0 !important; /* Tetap warna asal */
    transform: none !important;
}

#modalLayanan.hidden {
    display: none;
    opacity: 0;
}

/* Pastikan picker tanggal muncul di lapisan paling atas */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    z-index: 999;
}

input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 5px;
    filter: invert(0.5); /* Supaya warna icon kalendernya agak abu-abu elegan */
}