.search-filter-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 40px; }
.search-bar-floating {
    background: var(--color-white); border: 1px solid var(--glass-border);
    padding: 12px 24px; border-radius: 50px; width: 100%; max-width: 500px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--shadow-soft); transition: var(--transition-smooth);
}
.search-bar-floating:focus-within { box-shadow: 0 0 0 3px rgba(74, 127, 165, 0.25); border-color: var(--color-sky); }
.search-bar-floating input { border: none; outline: none; width: 100%; font-size: 0.95rem; }
.filter-pills-container { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.filter-pill {
    background: transparent; border: 1px solid var(--glass-border); padding: 8px 16px;
    border-radius: 50px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: var(--transition-smooth);
}
.filter-pill:hover, .filter-pill.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.book-card {
    background: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--glass-border);
    padding: 16px; box-shadow: var(--shadow-soft); cursor: pointer; transition: var(--transition-smooth);
    display: flex; flex-direction: column; justify-content: space-between;
}
.book-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.book-cover { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; background: var(--color-bg-alt, #EEE); }
.book-card h4 { font-size: 1rem; color: var(--color-primary); margin-bottom: 4px; line-height: 1.4; }
.book-card p { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 12px; }

.empty-state { text-align: center; color: var(--color-text-light); padding: 60px 20px; grid-column: 1 / -1; }

/* Category badge color system — set via data-category attribute */
.cat-badge {
    display: inline-block; padding: 4px 10px; border-radius: 50px;
    font-size: 0.7rem; font-weight: 700; margin-bottom: 8px; width: fit-content;
}
.cat-badge[data-category="Pelajaran"] { background: rgba(74,127,165,0.15); color: var(--color-sky); }
.cat-badge[data-category="Cerita Anak"] { background: rgba(224,120,86,0.15); color: var(--color-coral); }
.cat-badge[data-category="Pertanian & UMKM"] { background: rgba(193,105,60,0.15); color: var(--color-terracotta); }
.cat-badge[data-category="Sejarah & Budaya"] { background: rgba(110,92,148,0.15); color: var(--color-plum); }

/* Real-time stock badge */
.stock-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 50px; font-size: 0.75rem; font-weight: 600; width: fit-content;
}
.stock-ready { background: rgba(46, 125, 50, 0.1); color: #2E7D32; }
.stock-empty { background: rgba(211, 47, 47, 0.1); color: #D32F2F; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #2E7D32; animation: pulse 1.5s infinite; }
.stock-empty .pulse-dot { background-color: #D32F2F; animation: none; }

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}