/**
 * AnimalisPro – Browse Puppies Page Dark Theme
 * Overrides for public/browse-puppies.php – builds on ap-dark-pages.css
 *
 * Sections:
 *  1. Page Header
 *  2. Filter Card
 *  3. Puppy Cards
 *  4. Favorite Button
 */

/* ============================================================
   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. Puppy / Dog Gender Cards
   ============================================================ */
.dog-gender-card {
    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;
}
.dog-gender-card: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);
}
.dog-gender-card .card-title {
    color: var(--text-main) !important;
    font-weight: 700;
}

/* ============================================================
   4. Favorite Button
   ============================================================ */
.favorite-btn {
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border-radius: 8px !important;
}
.favorite-btn:hover,
.favorite-btn.active {
    background: rgba(239, 68, 68, 0.20) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
}