/* =========================================================
FILE: xcat-vendor-interest-popup.css
LOCATION:
- /xcat-vendor-manager/assets/

TYPE:
Vendor Recruitment Popup Stylesheet

PURPOSE:
Controls the frontend popup used for:
- vendor recruitment
- seller interest campaigns
- marketplace onboarding promotion
- trusted seller CTA overlays

This popup is part of the Xcat marketplace
growth and seller acquisition system.

=========================================================
PRIMARY RESPONSIBILITIES
=========================================================

1. Fullscreen popup overlay
2. Modal popup box styling
3. Seller recruitment CTA design
4. Popup close controls
5. Responsive mobile layout
6. Vendor onboarding presentation
7. Dynamic avatar styling support

=========================================================
MAIN UI COMPONENTS
=========================================================

#xcat-vendor-popup-overlay
#xcat-vendor-popup-box

.xcat-vendor-popup-note
.xcat-vendor-popup-btn
.xcat-vendor-popup-close

.xcat-dynamic-avatar

=========================================================
VISUAL DESIGN NOTES
=========================================================

STYLE:
- centered modal popup
- dark overlay backdrop
- white card design
- blue Xcat accent (#1e6aff)
- rounded modern UI
- mobile responsive

GOAL:
Encourage seller signups while maintaining:
- trust
- professionalism
- marketplace credibility

=========================================================
KNOWN FEATURES
=========================================================

- fullscreen overlay
- centered modal
- responsive mobile sizing
- CTA button styling
- popup close controls
- scrollable popup body
- reusable avatar styling

=========================================================
DYNAMIC AVATAR SUPPORT
=========================================================

Includes:
.xcat-dynamic-avatar

Used for:
- fallback user initials
- circular avatar rendering
- reusable avatar UI styling

IMPORTANT:
Avatar styling may eventually need
centralising into:
- avatar-helper.css
or:
- global-ui.css

to avoid duplication across modules.

=========================================================
KNOWN DEPENDENCIES
=========================================================

Works with:
- vendor-interest-popup.php
- popup JS controller
- cookie/session logic
- seller registration flow

=========================================================
IMPORTANT ARCHITECTURE NOTE
=========================================================

This file is:
NOT part of the messaging system.

It belongs to:
MARKETPLACE GROWTH / SELLER ACQUISITION

Related systems:
- seller registration
- vendor applications
- marketplace expansion
- trusted seller onboarding

=========================================================
KNOWN FUTURE EXPANSION
=========================================================

- animated popup transitions
- multi-step onboarding
- seller testimonials
- marketplace statistics
- countdown campaigns
- loyalty incentives
- AI seller qualification
- category-targeted recruitment
- geo-targeted onboarding
- mobile app CTA support
- video onboarding

=========================================================
KNOWN LIMITATIONS
=========================================================

Currently:
- static modal
- no animation framework
- no A/B testing
- no analytics tracking
- no conversion metrics
- no campaign scheduling
- no segmented targeting

========================================================= */

#xcat-vendor-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    display: none;
}

#xcat-vendor-popup-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 560px;
    background: #fff;
    border-radius: 14px;
    padding: 34px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    z-index: 99999;
    text-align: center;
    font-family: Arial, sans-serif;
    display: none;
    max-height: 90vh;
    overflow-y: auto;
}

#xcat-vendor-popup-box h2 {
    margin: 0 0 14px;
    font-size: 30px;
    color: #111;
    line-height: 1.2;
}

#xcat-vendor-popup-box h2 span {
    color: #1e6aff;
}

#xcat-vendor-popup-box p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 18px;
}

.xcat-vendor-popup-note {
    background: #ededed;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
}

.xcat-vendor-popup-btn {
    display: inline-block;
    background: #1e6aff;
    color: #fff;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
}

.xcat-vendor-popup-close {
    margin-top: 18px;
    display: block;
    font-size: 14px;
    color: #777;
    cursor: pointer;
    text-decoration: underline;
}

.xcat-vendor-popup-close:hover {
    color: #111;
}

@media (max-width: 600px) {
    #xcat-vendor-popup-box {
        width: 92%;
        padding: 22px;
    }

    #xcat-vendor-popup-box h2 {
        font-size: 24px;
    }

    #xcat-vendor-popup-box p {
        font-size: 15px;
    }

    .xcat-vendor-popup-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

.xcat-dynamic-avatar{
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:16px;
    flex-shrink:0;
    user-select:none;
}