/**
 * AnimalisPro – Browse Litters Page Dark Theme
 * Overrides for public/browse-litters.php – builds on ap-dark-pages.css
 *
 * Sections:
 *  1. Page Header
 *  2. Filter Card
 *  3. Litter Cards
 *  4. Announced Badge
 */

/* ============================================================
   1. Page Header
   ============================================================ */
.container > .d-flex > h1,
.container > .d-flex.justify-content-between > h1 {
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   2. Filter Card
   ============================================================ */
.card.card-body {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-main) !important;
}

/* ============================================================
   3. Litter Cards
   ============================================================ */
.card.h-100 {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-main) !important;
    transition: all 0.2s ease;
}
.card.h-100:hover {
    border-color: rgba(217, 119, 255, 0.30) !important;
    box-shadow: 0 8px 32px rgba(217, 119, 255, 0.10) !important;
    transform: translateY(-2px);
}
.card-img-top {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.card-title {
    color: var(--text-main) !important;
    font-weight: 700;
}

/* ============================================================
   4. Announced Badge
   ============================================================ */
.card.border-warning {
    border-color: rgba(251, 191, 36, 0.35) !important;
}
.card-header.bg-warning {
    background: rgba(251, 191, 36, 0.18) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.30) !important;
    color: #fbbf24 !important;
}