/* Import a clean modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    background-color: #f8f9fa;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px;         /* better readability */
    line-height: 1.6;        /* nice spacing */
    color: #212529;          /* softer black for text */
}

.card-img-top { 
    height: 180px; 
    object-fit: cover; 
}

.filter-section summary { 
    cursor: pointer; 
    font-weight: 600; 
}

.filter-section details { 
    margin-bottom: 1rem; 
}

.rating i { 
    color: #ffc107; 
}

.badge-tag { 
    background: #eef2f6; 
    color: #333; 
    font-size: 0.875rem;
    font-weight: 500;
}

.text-success, .navbar-brand { 
    color: #FF5722 !important; 
    font-weight: 600;
}

.btn-success { 
    background-color: #FF5722 !important; 
    border-color: #FF5722 !important; 
    font-weight: 600;
    font-size: 0.95rem;
}

.btn-success:hover { 
    background-color: #e64a19 !important; 
    border-color: #e64a19 !important; 
}

.page-item.active .page-link { 
    background-color: #FF5722 !important; 
    border-color: #FF5722 !important; 
}

.page-link { 
    color: #FF5722 !important; 
    font-weight: 500;
}

.page-link:hover { 
    color: #e64a19 !important; 
}

@media (min-width: 992px) { 
    aside .card { 
        position: sticky; 
        top: 1rem; 
    } 
}