/**
 * AnimalisPro – Marketplace Page Dark Theme
 * Overrides for public/marketplace.php – builds on ap-dark-pages.css
 *
 * Sections:
 *  1. Page Header
 *  2. Filter Card
 *  3. Listing Cards
 *  4. Action Buttons (favorite, apply)
 *  5. Modal
 */

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

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

/* ============================================================
   3. Listing 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. Action Buttons
   ============================================================ */
.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 {
    background: rgba(239, 68, 68, 0.20) !important;
    color: #fca5a5 !important;
}
.apply-btn {
    background: var(--grad-primary) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    color: #fff !important;
    font-weight: 700;
}

/* ============================================================
   5. Modal
   ============================================================ */
.modal-footer.d-flex.justify-content-between {
    border-top: 1px solid var(--glass-border) !important;
}