/* assets/css/frontend.css */

/* --- GENERAL CONTAINER & FORM STYLES --- */
.fsf-container {
    max-width: 800px; /* Sesuai dengan preferensi Anda */
    margin: 20px auto; /* Memberi margin atas/bawah dan memusatkan */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative; /* Penting untuk positioning absolut hasil pencarian jika digunakan */
}

.fsf-filter-form {
    display: grid; /* Menggunakan Grid untuk layout filter */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Kolom responsif */
    gap: 15px; /* Jarak antar elemen grid */
    margin-bottom: 20px;
}

.fsf-filter-group {
    /* Flex-grow tidak lagi relevan di grid untuk group, tapi bisa ditambahkan untuk item di dalamnya */
}

.fsf-filter-group input[type="text"],
.fsf-filter-group select {
    width: 100%;
    padding: 10px 12px; /* Menambah padding horizontal untuk konsistensi */
    border: 1px solid #ccc; /* Border sedikit lebih gelap */
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.fsf-filter-form button[type="submit"] {
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    /* Jika tombol submit ingin mengambil seluruh lebar kolom di grid */
    /* grid-column: auto / span 1; */
}

.fsf-filter-form button[type="submit"]:hover {
    background-color: #005177;
}

/* --- SEARCH RESULTS CONTAINER & ITEM STYLES --- */
#fsf-results {
    border: 1px solid #ddd;
    /* Jika Anda ingin kontainer hasil muncul sebagai overlay di bawah form search: */
    /* position: absolute; */
    /* top: calc(100% + 5px); */ /* 5px di bawah form */
    /* left: 0; */
    /* width: 100%; */
    /* z-index: 1000; */
    /* END overlay styling */

    max-height: 350px; /* Batasi tinggi kontainer, aktifkan scroll */
    overflow-y: auto; /* Aktifkan vertical scroll jika konten melebihi max-height */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px; /* Sudut sedikit membulat untuk container hasil */
}

/* Hapus .fsf-item karena tidak lagi digunakan di markup PHP terbaru */
/* .fsf-item {
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 10px;
} */

.fsf-compact-item {
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
}

.fsf-compact-item:last-child {
    border-bottom: none;
}

.fsf-compact-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    padding: 5px 0;
}

.fsf-compact-item a:hover {
    background-color: #f0f0f0;
    color: #0073aa;
}

.fsf-item-thumbnail {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
}

.fsf-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fsf-item-thumbnail .fsf-placeholder-img {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #aaa;
    width: 100%; /* Pastikan ini juga 100% dari parent (40px) */
    height: 100%; /* Pastikan ini juga 100% dari parent (40px) */
}

.fsf-item-content {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- LOAD MORE BUTTON & MESSAGES --- */
.fsf-load-more {
    display: block;
    width: 100%;
    padding: 10px 20px;
    margin-top: 15px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.fsf-load-more:hover {
    background-color: #005177;
}

.fsf-load-more:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.fsf-loading,
.fsf-no-results,
.fsf-error {
    text-align: center;
    padding: 15px;
    color: #888;
    font-style: italic;
}

.fsf-error {
    color: #D32F2F;
}

/* --- MEDIA QUERIES FOR RESPONSIVENESS --- */
@media (max-width: 768px) {
    .fsf-filter-form {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}