/**
 * Profiles, VCards & Modals — Central Design System
 *
 * Gender colour tokens (also defined in style.css :root, repeated here
 * so this sheet can be loaded stand-alone for quick overrides):
 *
 *   --male-accent   / --male-border   / --male-bg   / --male-shadow
 *   --female-accent / --female-border / --female-bg / --female-shadow
 *   --neutral-accent (unknown / no gender)
 *
 * Mapping to existing SLG variables (defined in style.css):
 *   --male-accent   → --slg-male-accent   (#1d4ed8)
 *   --female-accent → --slg-female-accent (#be185d)
 */

/* ═══════════════════════════════════════════════════════════════
   1. GENDER COLOUR TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Male */
    --male-accent:  #1d4ed8;
    --male-border:  rgba(59, 130, 246, 0.55);
    --male-bg:      rgba(219, 234, 254, 0.65);
    --male-shadow:  0 6px 24px rgba(59, 130, 246, 0.2);
    --male-glow:    0 0 0 3px rgba(59, 130, 246, 0.1);

    /* Female */
    --female-accent: #be185d;
    --female-border: rgba(236, 72, 153, 0.55);
    --female-bg:     rgba(252, 231, 243, 0.65);
    --female-shadow: 0 6px 24px rgba(236, 72, 153, 0.2);
    --female-glow:   0 0 0 3px rgba(236, 72, 153, 0.1);

    /* Neutral / unknown */
    --neutral-accent: #5b21b6;
    --neutral-border: rgba(124, 58, 237, 0.35);
    --neutral-bg:     rgba(237, 233, 254, 0.5);
    --neutral-shadow: 0 6px 24px rgba(124, 58, 237, 0.12);

    /* Shared typography */
    --profile-text:       #2d1a5a;
    --profile-text-muted: rgba(80, 50, 130, 0.7);
}


/* ═══════════════════════════════════════════════════════════════
   2. BREEDER PROFILE PAGE HEADER  (replaces inline <style> in
      breeder-profile.php)
   ═══════════════════════════════════════════════════════════════ */
.breeder-profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 3rem 0 2.5rem;
    margin-bottom: 2rem;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25);
}

.breeder-profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 700;
    color: #667eea;
}

.breeder-profile-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
}

.breeder-profile-stat-badge:hover {
    background: rgba(255, 255, 255, 0.28);
}


/* ═══════════════════════════════════════════════════════════════
   3. USER PROFILE PAGE HEADER  (replaces inline <style> in
      profile.php)
   ═══════════════════════════════════════════════════════════════ */
.user-profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 2.5rem 0 2rem;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
}

.user-profile-avatar {
    width: var(--profile-image-size, 130px);
    height: var(--profile-image-size, 130px);
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    object-fit: cover;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #667eea;
    overflow: hidden;
}

/* Stat cards inside user profile sidebar */
.user-stat-card {
    text-align: center;
    padding: 1.25rem 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(124, 58, 237, 0.1);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.15);
}

.user-stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary-color, #7c3aed);
    line-height: 1.1;
    margin-bottom: 4px;
}

.rank-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 10px rgba(240, 147, 251, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   4. BREEDER VCARD  (used in BreedersModule homepage module)
   ═══════════════════════════════════════════════════════════════ */
.breeder-vcard {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(99, 102, 241, 0.14);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.breeder-vcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.18);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Gradient header strip */
.breeder-vcard-header {
    height: 68px;
    background: linear-gradient(120deg, #667eea, #8b5cf6);
    position: relative;
    flex-shrink: 0;
}

/* Avatar sits half on header / half on body */
.breeder-vcard-avatar-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    height: 56px; /* half of avatar */
    margin-top: -40px;
    flex-shrink: 0;
}

.breeder-vcard-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
    object-fit: cover;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    overflow: hidden;
    flex-shrink: 0;
}

.breeder-vcard-body {
    padding: 0.5rem 1.25rem 1.25rem;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.breeder-vcard-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--profile-text, #2d1a5a);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breeder-vcard-username {
    font-size: 0.8rem;
    color: var(--profile-text-muted, rgba(80, 50, 130, 0.7));
    margin-bottom: 0.5rem;
}

.breeder-vcard-location {
    font-size: 0.8rem;
    color: var(--profile-text-muted, rgba(80, 50, 130, 0.7));
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.breeder-vcard-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.breeder-vcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.breeder-vcard-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color, #7c3aed);
    line-height: 1;
}

.breeder-vcard-stat-label {
    font-size: 0.7rem;
    color: var(--profile-text-muted, rgba(80, 50, 130, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breeder-vcard .btn {
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   5. PUPPY CARD  (AvailablePuppiesModule — gender-aware version)
   ═══════════════════════════════════════════════════════════════ */
/* Puppy cards reuse .dog-card with data-gender — no extra rule needed.
   The placeholder background uses a gender-tinted gradient: */
.dog-card-image.puppy-placeholder {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.dog-card[data-gender="male"] .dog-card-image.puppy-placeholder {
    background: linear-gradient(135deg, rgba(219,234,254,0.8) 0%, rgba(191,219,254,0.6) 100%);
}

.dog-card[data-gender="female"] .dog-card-image.puppy-placeholder {
    background: linear-gradient(135deg, rgba(252,231,243,0.8) 0%, rgba(251,207,232,0.6) 100%);
}


/* ═══════════════════════════════════════════════════════════════
   6. MOBILE DOG CARDS — gender tinting for dogs.php list
   ═══════════════════════════════════════════════════════════════ */
.dogs-mobile-card[data-gender="male"] {
    border-color: var(--male-border);
    background: var(--male-bg);
}

.dogs-mobile-card[data-gender="female"] {
    border-color: var(--female-border);
    background: var(--female-bg);
}

.dogs-mobile-card[data-gender="male"] .dogs-mobile-meta h5 {
    color: var(--male-accent);
}

.dogs-mobile-card[data-gender="female"] .dogs-mobile-meta h5 {
    color: var(--female-accent);
}


/* ═══════════════════════════════════════════════════════════════
   7. MODAL ENHANCEMENTS  (gender-aware modal headers)
   ═══════════════════════════════════════════════════════════════ */
/* Default modal header gradient is already defined in style.css.
   These variants are applied via a data attribute or modifier class. */

.modal-content.modal--male .modal-header {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
}

.modal-content.modal--female .modal-header {
    background: linear-gradient(135deg, #be185d 0%, #ec4899 100%);
}

/* Smooth modal appear/disappear */
.modal.fade .modal-dialog {
    transition: transform 0.28s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.22s ease;
}

.modal.show .modal-dialog {
    transform: none;
}


/* ═══════════════════════════════════════════════════════════════
   8. PROFILE SECTION CARD  (breeder-profile.php info/stats cards)
   ═══════════════════════════════════════════════════════════════ */
.profile-section-card {
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, 0.1);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.07);
    background: #fff;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.profile-section-card:hover {
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.12);
}

.profile-section-card .card-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 16px 16px 0 0 !important;
    font-weight: 600;
    color: #5b21b6;
    padding: 0.875rem 1.25rem;
}

.profile-section-card .card-footer {
    background: rgba(124, 58, 237, 0.03);
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 0 0 16px 16px !important;
}

/* Info row inside profile cards */
.profile-info-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(124, 58, 237, 0.07);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.profile-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-info-label {
    font-size: 0.75rem;
    color: var(--profile-text-muted, rgba(80, 50, 130, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 110px;
    flex-shrink: 0;
    padding-top: 2px;
}

.profile-info-value {
    font-size: 0.9rem;
    color: var(--profile-text, #2d1a5a);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   9. DOG CARD IN BREEDER-PROFILE  (enhanced gender card)
   ═══════════════════════════════════════════════════════════════ */
/* The dog cards in breeder-profile use the global .dog-card[data-gender]
   + .dog-card-image / .dog-card-body / .dog-card-title from style.css.
   Only minimal extra rules are added below. */

.breeder-dogs-grid .dog-card .dog-card-image {
    height: 160px;
}

@media (max-width: 575.98px) {
    .breeder-dogs-grid .dog-card .dog-card-image {
        height: 130px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   10. HOMEPAGE MODULE TITLES
   ═══════════════════════════════════════════════════════════════ */
.hp-module-title {
    position: relative;
    display: inline-block;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #2d1a5a;
    margin-bottom: 2.5rem;
}

.hp-module-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .breeder-profile-header,
    .user-profile-header {
        padding: 2rem 0 1.5rem;
        border-radius: 0 0 16px 16px;
    }

    .breeder-profile-avatar,
    .user-profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .breeder-vcard-avatar {
        width: 68px;
        height: 68px;
        font-size: 1.75rem;
    }

    .breeder-vcard-header {
        height: 54px;
    }

    .breeder-vcard-avatar-wrap {
        margin-top: -32px;
        height: 44px;
    }
}