/*
 * Daman.Professionalist — storefront styles (plain CSS; base Flex theme does NOT bundle module SCSS).
 * Uses theme CSS custom properties so it tracks light/dark + child themes.
 */

/* ===== Profile page ===== */
.pro-profile {
    --pro-accent: var(--primary, #2f6fed);
    margin-bottom: 2rem;
}

.pro-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pro-accent) 0%, color-mix(in srgb, var(--pro-accent) 65%, #000) 100%);
    color: #fff;
    padding: 2.25rem 1.75rem 1.5rem;
}

.pro-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 45%);
    pointer-events: none;
}

.pro-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pro-avatar,
.pro-avatar-placeholder {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.85);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    flex: 0 0 auto;
    background: rgba(255,255,255,.15);
}

.pro-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-avatar-placeholder i {
    font-size: 3rem;
    color: rgba(255,255,255,.9);
}

.pro-hero-head {
    min-width: 0;
}

.pro-hero-name {
    margin: 0 0 .35rem;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.15;
}

.pro-profession-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    padding: .25rem .75rem;
    border-radius: 2rem;
    font-size: .85rem;
    text-decoration: none;
    transition: background .15s ease;
}

.pro-profession-chip:hover {
    background: rgba(255,255,255,.3);
    color: #fff;
}

.pro-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-top: .65rem;
    font-size: .9rem;
}

.pro-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    opacity: .95;
}

.pro-availability {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
}
.pro-availability .dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.pro-availability.is-available { background: rgba(33,191,115,.2); color: #d6ffe9; }
.pro-availability.is-busy { background: rgba(255,193,7,.2); color: #fff3cd; }
.pro-availability.is-offline { background: rgba(255,255,255,.15); color: #e9ecef; }

.pro-stars { color: #ffc94d; letter-spacing: 1px; }

/* Body cards */
.pro-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .85rem;
    background: var(--body-bg, #fff);
    margin-top: 1.25rem;
    overflow: hidden;
}
.pro-card-head {
    padding: .85rem 1.15rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pro-card-body { padding: 1.15rem; }

.pro-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pro-chip-list a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color, #e5e7eb);
    text-decoration: none;
    font-size: .875rem;
    color: var(--body-color, inherit);
    transition: border-color .15s ease, background .15s ease;
}
.pro-chip-list a:hover {
    border-color: var(--pro-accent, #2f6fed);
    background: color-mix(in srgb, var(--pro-accent, #2f6fed) 8%, transparent);
}

/* Sticky contact card */
.pro-contact-card { position: sticky; top: 1rem; }
.pro-contact-head {
    background: var(--pro-accent, #2f6fed);
    color: #fff;
    border-bottom: 0;
}
.pro-contact-success { text-align: center; padding: 1.5rem .5rem; }
.pro-contact-success i { color: var(--success, #21bf73); font-size: 2.5rem; margin-bottom: .5rem; }

@media (max-width: 575.98px) {
    .pro-hero-inner { flex-direction: column; text-align: center; }
    .pro-hero-meta { justify-content: center; }
}

/* ===== Profession browse page (cards) ===== */
.pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.pro-pro-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .85rem;
    background: var(--body-bg, #fff);
    padding: 1.25rem 1rem;
    text-decoration: none;
    color: var(--body-color, inherit);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pro-pro-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    transform: translateY(-3px);
    border-color: var(--pro-accent, #2f6fed);
    color: var(--body-color, inherit);
}
.pro-pro-card .avatar,
.pro-pro-card .avatar-ph {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    margin-bottom: .75rem; border: 3px solid var(--body-bg, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    background: color-mix(in srgb, var(--pro-accent, #2f6fed) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
}
.pro-pro-card .avatar-ph i { font-size: 2rem; color: var(--pro-accent, #2f6fed); }
.pro-pro-card .name { font-weight: 600; margin-bottom: .15rem; }
.pro-pro-card .area { font-size: .8rem; color: var(--text-muted, #6c757d); }

/* Promoted professional card (on category/product pages) */
.pro-promoted {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .85rem;
    background: var(--body-bg, #fff);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .9rem;
}
.pro-promoted .avatar,
.pro-promoted .avatar-ph {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    background: color-mix(in srgb, var(--pro-accent, #2f6fed) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
}
.pro-promoted .avatar-ph i { color: var(--pro-accent, #2f6fed); font-size: 1.4rem; }
.pro-promoted .name { font-weight: 600; margin: 0; }
.pro-promoted .badge-promoted {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .5px;
    background: color-mix(in srgb, var(--pro-accent, #2f6fed) 15%, transparent);
    color: var(--pro-accent, #2f6fed);
    padding: .1rem .45rem; border-radius: 1rem;
}

/* ===== Professionals: search box, back link, sub-category drill-down ===== */
.pro-search { max-width: 520px; }

.pro-back {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .85rem; text-decoration: none;
    color: var(--text-muted, #6c757d); margin-bottom: .25rem;
}
.pro-back:hover { color: var(--pro-accent, #2f6fed); }

.pro-subcats { display: flex; flex-wrap: wrap; gap: .5rem; }
.pro-subcat-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 2rem; padding: .35rem .75rem;
    text-decoration: none; color: var(--body-color, inherit);
    background: var(--body-bg, #fff);
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.pro-subcat-chip:hover {
    border-color: var(--pro-accent, #2f6fed);
    color: var(--pro-accent, #2f6fed);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.pro-subcat-chip .chip-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pro-subcat-chip .chip-name { font-weight: 600; font-size: .85rem; }
.pro-subcat-chip .chip-count {
    font-size: .7rem; line-height: 1;
    background: color-mix(in srgb, var(--pro-accent, #2f6fed) 14%, transparent);
    color: var(--pro-accent, #2f6fed);
    padding: .15rem .4rem; border-radius: 1rem;
}