/**
 * AnimalisPro – Browse Dogs Page Dark Theme
 * Overrides for public/browse-dogs.php – builds on ap-dark-pages.css
 *
 * Sections:
 *  1. Page Header
 *  2. Filter Card
 *  3. Dog Cards (.dog-card)
 *  4. Pagination
 */

/* ============================================================
   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. Dog Cards
   ============================================================ */
.dog-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden;
    transition: all 0.2s ease;
    color: var(--text-main) !important;
}
.dog-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-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.dog-card-body {
    padding: 1rem;
}
.dog-card-title {
    font-weight: 700;
    color: var(--text-main) !important;
    font-size: 1rem;
}
.dog-card-breed {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
}
.dog-card-gender {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.dog-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.55rem;
    background: rgba(217, 119, 255, 0.12);
    border: 1px solid rgba(217, 119, 255, 0.22);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-soft) !important;
}

/* Gender card variant */
.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);
}

/* ============================================================
   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;
}