*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050406;
    color:#fff;
    font-family:Inter,Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
}

.site-header{
    height:78px;
    background:rgba(7,4,7,.94);
    border-bottom:1px solid rgba(255,255,255,.07);
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(20px);
}

.nav-inner{
    max-width:1380px;
    height:100%;
    margin:auto;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    font-size:30px;
    font-weight:1000;
    letter-spacing:-2px;
}

.logo span,
.footer-logo span{
    color:#ff2079;
}

.desktop-nav{
    display:flex;
    gap:42px;
    margin-left:100px;
}

.desktop-nav a{
    color:#d0c9d0;
    font-size:15px;
    transition:.2s;
}

.desktop-nav a:hover{
    color:#ff277d;
}

.explore-btn{
    background:linear-gradient(135deg,#ff287f,#d71968);
    padding:16px 25px;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    box-shadow:0 10px 30px rgba(255,20,110,.25);
}


/* HERO */

.hero{
    min-height:490px;
    background:
        radial-gradient(circle at 70% 40%,rgba(255,20,105,.17),transparent 30%),
        radial-gradient(circle at 20% 70%,rgba(105,0,70,.20),transparent 35%),
        #090407;
    position:relative;
    overflow:hidden;
}

.hero-inner{
    max-width:1380px;
    min-height:490px;
    margin:auto;
    padding:0 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    position:relative;
}

.hero-copy{
    padding-top:10px;
}

.live-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid rgba(255,30,120,.5);
    border-radius:30px;
    padding:8px 15px;
    color:#ff3b87;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.4px;
    margin-bottom:24px;
}

.live-badge i,
.online-now i,
.online i{
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    background:#14df91;
    box-shadow:0 0 12px #14df91;
}

.hero h1{
    max-width:650px;
    font-size:64px;
    line-height:.98;
    letter-spacing:-3px;
    font-weight:900;
}

.hero h1 strong{
    display:block;
    color:#ff1975;
}

.hero-copy>p{
    max-width:600px;
    color:#b7aeb8;
    font-size:16px;
    line-height:1.65;
    margin:26px 0 30px;
}

.hero-buttons{
    display:flex;
    gap:15px;
}

.primary-btn,
.secondary-btn{
    padding:17px 25px;
    border-radius:13px;
    font-weight:800;
}

.primary-btn{
    background:#f51d73;
    box-shadow:0 12px 35px rgba(255,20,110,.28);
}

.secondary-btn{
    border:1px solid #342c35;
    background:#100c10;
}

.stats{
    display:flex;
    gap:48px;
    margin-top:36px;
}

.stats div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.stats b{
    font-size:22px;
}

.stats b em{
    color:#ff2078;
    font-style:normal;
}

.stats span{
    font-size:11px;
    color:#aaa1aa;
}


/* HERO PROFILE */

.hero-profile{
    height:405px;
    border:1px solid rgba(255,39,126,.35);
    border-radius:25px;
    overflow:hidden;
    position:relative;
    box-shadow:
        0 0 70px rgba(255,20,110,.14),
        inset 0 0 50px rgba(255,20,110,.08);
}

.hero-profile>img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.05);
}

.hero-profile:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent 30%,
        rgba(5,3,5,.9) 100%
    );
}

.online-label{
    position:absolute;
    z-index:3;
    left:38px;
    top:25px;
    background:#161016;
    border:1px solid #3a313a;
    border-radius:14px;
    padding:13px 17px;
    font-size:13px;
}

.online-label i{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#17e593;
    margin-right:7px;
}

.hero-profile-overlay{
    position:absolute;
    z-index:3;
    left:32px;
    bottom:25px;
}

.online-now{
    color:#15df91;
    font-size:12px;
    font-weight:900;
    margin-bottom:6px;
}

.hero-profile-overlay h2{
    font-size:30px;
}

.hero-profile-overlay p{
    color:#ddd4dc;
    margin:3px 0 12px;
}

.tags{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.tags span{
    border:1px solid #8b1c52;
    color:#ff5a9d;
    padding:5px 11px;
    border-radius:20px;
    font-size:11px;
}


/* CALL POPUP */

.call-popup{
    position:fixed;
    right:7%;
    top:150px;
    width:270px;
    padding:20px;
    border-radius:20px;
    background:linear-gradient(145deg,#17131a,#0b090d);
    border:1px solid rgba(255,35,120,.45);
    box-shadow:
        0 25px 80px rgba(0,0,0,.65),
        0 0 30px rgba(255,20,110,.16);
    z-index:2000;
}

.call-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.call-user img{
    width:52px;
    height:52px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #ff247c;
}

.call-user strong{
    display:block;
    font-size:17px;
}

.call-user span{
    display:block;
    color:#ff3181;
    font-size:9px;
    font-weight:800;
    margin-top:5px;
}

.wave{
    margin-left:auto;
    color:#ff287f;
    letter-spacing:-3px;
}

.call-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}

.call-actions button{
    border:0;
    border-radius:12px;
    padding:13px 5px;
    color:white;
    font-weight:800;
    cursor:pointer;
}

.accept{
    background:#0fcf83;
    box-shadow:0 8px 22px rgba(15,207,131,.2);
}

.decline{
    background:#a91e2d;
}

.call-popup.ringing{
    animation:popupPulse 1.2s ease-in-out infinite;
}

@keyframes popupPulse{

    50%{
        box-shadow:
            0 25px 80px rgba(0,0,0,.65),
            0 0 45px rgba(255,20,110,.38);
    }

}


/* PROFILES */

.profiles-section{
    max-width:1380px;
    margin:auto;
    padding:48px 32px 70px;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:25px;
}

.section-heading>div>span,
.about-section>div>span,
.reviews-section>span,
.faq-section>span{
    color:#ff3181;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
}

.section-heading h2{
    font-size:27px;
    margin-top:5px;
}

.section-heading>a{
    color:#ff3987;
    font-size:13px;
}

.profiles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.profile-card{
    background:#0d0a0e;
    border:1px solid #272027;
    border-radius:17px;
    overflow:hidden;
    transition:.3s;
}

.profile-card:hover{
    transform:translateY(-5px);
    border-color:#9f1d57;
    box-shadow:0 15px 45px rgba(255,20,110,.12);
}

.profile-image{
    height:245px;
    position:relative;
    overflow:hidden;
}

.profile-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.profile-card:hover .profile-image img{
    transform:scale(1.04);
}

.verified,
.vip,
.online{
    position:absolute;
    top:12px;
    border-radius:12px;
    padding:7px 10px;
    font-size:10px;
    font-weight:900;
}

.verified{
    left:10px;
    background:#5d2342;
    color:#fff;
}

.vip{
    left:10px;
    background:#5b4900;
    color:#ffd72b;
}

.online{
    right:10px;
    background:#151318;
    color:#fff;
}

.profile-content{
    padding:14px;
}

.profile-content h3{
    font-size:19px;
}

.profile-content h3 small{
    font-size:18px;
    font-weight:700;
}

.location{
    color:#a9a0a9;
    font-size:11px;
    margin:5px 0 13px;
}

.profile-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.profile-bottom .tags{
    max-width:55%;
}

.profile-call-button{
    border:0;
    background:linear-gradient(135deg,#ff287f,#dc1768);
    color:white;
    padding:11px 15px;
    border-radius:11px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(255,20,110,.2);
}

.profile-call-button:hover{
    transform:translateY(-2px);
}


/* ABOUT */

.about-section{
    padding:70px 32px;
    border-top:1px solid #171319;
    background:#080609;
}

.about-box{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.about-box h2,
.reviews-section h2,
.faq-section h2{
    font-size:38px;
    margin:12px 0 18px;
}

.about-box p{
    color:#aaa1aa;
    line-height:1.8;
}


/* REVIEWS */

.reviews-section{
    max-width:1100px;
    margin:auto;
    padding:80px 32px;
}

.reviews-section>span{
    display:block;
    text-align:center;
}

.reviews-section h2{
    text-align:center;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:30px;
}

.review-card{
    background:#0e0b10;
    border:1px solid #29232b;
    border-radius:17px;
    padding:25px;
}

.review-card>div{
    color:#ffb400;
    margin-bottom:15px;
}

.review-card p{
    color:#c3bbc3;
    line-height:1.7;
    font-size:14px;
    margin-bottom:18px;
}

.review-card strong{
    font-size:13px;
}


/* FAQ */

.faq-section{
    max-width:900px;
    margin:auto;
    padding:70px 32px;
}

.faq-section>span{
    display:block;
    text-align:center;
}

.faq-section h2{
    text-align:center;
    margin-bottom:30px;
}

.faq-section details{
    border:1px solid #28222a;
    background:#0d0a0e;
    border-radius:14px;
    padding:18px 20px;
    margin-bottom:12px;
}

.faq-section summary{
    cursor:pointer;
    font-weight:800;
}

.faq-section details p{
    color:#aaa1aa;
    line-height:1.7;
    margin-top:13px;
    font-size:14px;
}


/* FOOTER */

footer{
    border-top:1px solid #1c171d;
    padding:35px 32px;
    text-align:center;
    color:#77717a;
    font-size:12px;
}

.footer-logo{
    font-size:25px;
    font-weight:1000;
    color:white;
    margin-bottom:12px;
}

footer p{
    margin-bottom:15px;
}


/* MOBILE */

@media(max-width:1000px){

    .hero-inner{
        grid-template-columns:1fr;
        padding-top:45px;
        padding-bottom:45px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero-profile{
        max-width:650px;
        width:100%;
        margin:auto;
    }

    .profiles-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .call-popup{
        right:20px;
        top:auto;
        bottom:20px;
    }

    .desktop-nav{
        gap:20px;
        margin-left:0;
    }

}


@media(max-width:650px){

    .site-header{
        height:65px;
    }

    .nav-inner{
        padding:0 17px;
    }

    .logo{
        font-size:24px;
    }

    .desktop-nav{
        display:none;
    }

    .explore-btn{
        padding:11px 15px;
        font-size:12px;
    }

    .hero-inner{
        padding:35px 17px;
        gap:30px;
    }

    .hero{
        min-height:auto;
    }

    .hero h1{
        font-size:43px;
        letter-spacing:-2px;
    }

    .hero-copy>p{
        font-size:14px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{
        text-align:center;
    }

    .stats{
        gap:22px;
    }

    .stats b{
        font-size:18px;
    }

    .hero-profile{
        height:390px;
    }

    .online-label{
        left:18px;
        top:18px;
    }

    .call-popup{
        width:calc(100% - 30px);
        left:15px;
        right:auto;
        bottom:15px;
        top:auto;
    }

    .profiles-section{
        padding:40px 17px;
    }

    .section-heading{
        align-items:start;
        flex-direction:column;
        gap:10px;
    }

    .section-heading h2{
        font-size:24px;
    }

    .profiles-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .profile-image{
        height:210px;
    }

    .profile-content{
        padding:10px;
    }

    .profile-content h3{
        font-size:16px;
    }

    .profile-bottom{
        flex-direction:column;
        align-items:stretch;
    }

    .profile-bottom .tags{
        max-width:100%;
    }

    .profile-call-button{
        width:100%;
    }

    .review-grid{
        grid-template-columns:1fr;
    }

    .about-box h2,
    .reviews-section h2,
    .faq-section h2{
        font-size:30px;
    }

}



/* =========================================
   SCREENSHOT STYLE ABOUT SECTION
========================================= */

.about-section{
    padding:55px 32px 80px;
    background:#050406;
}

.about-card{
    max-width:1100px;
    min-height:600px;
    margin:auto;
    padding:75px;
    border:1px solid rgba(255,35,120,.38);
    border-radius:30px;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255,20,110,.13),
            transparent 35%
        ),
        #11090f;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:70px;
    box-shadow:0 0 70px rgba(255,20,110,.04);
}

.section-label{
    display:block;
    color:#ff4a91;
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:22px;
}

.about-copy h2{
    font-size:52px;
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:28px;
}

.about-copy h2 strong{
    display:block;
    color:#ff1975;
}

.about-copy p{
    color:#c0b6c0;
    line-height:1.7;
    font-size:15px;
    margin-bottom:20px;
}

.about-copy p b{
    color:#fff;
}

.about-button{
    display:inline-block;
    margin-top:12px;
    padding:17px 24px;
    border-radius:13px;
    background:linear-gradient(
        135deg,
        #ff287f,
        #dc1768
    );
    font-weight:900;
    box-shadow:0 12px 35px rgba(255,20,110,.25);
}


/* CONVERSATION CARD */

.conversation-card{
    background:#070608;
    border:1px solid #302932;
    border-radius:22px;
    padding:25px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.conversation-user{
    display:flex;
    align-items:center;
    gap:13px;
}

.conversation-user img{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #ff287f;
}

.conversation-user strong{
    display:block;
    font-size:15px;
}

.conversation-user span{
    display:block;
    margin-top:5px;
    color:#18db91;
    font-size:10px;
}

.conversation-line{
    height:1px;
    background:#29232a;
    margin:20px 0;
}

.message{
    padding:15px;
    border-radius:12px;
    font-size:13px;
    margin-bottom:18px;
    max-width:82%;
}

.message-left{
    background:#211923;
}

.message-right{
    margin-left:auto;
    background:#8c1247;
}


/* =========================================
   REVIEWS
========================================= */

.reviews-section{
    max-width:1100px;
    margin:auto;
    padding:80px 32px;
}

.center{
    text-align:center;
}

.reviews-section h2{
    text-align:center;
    font-size:40px;
    margin-bottom:32px;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.review-card{
    padding:26px;
    border:1px solid #29222b;
    border-radius:18px;
    background:#0d0a0e;
}

.review-card>div{
    color:#ffb400;
    margin-bottom:15px;
}

.review-card p{
    color:#bdb4bd;
    line-height:1.7;
    font-size:14px;
    margin-bottom:18px;
}

.review-card strong{
    font-size:13px;
}


/* =========================================
   FAQ
========================================= */

.faq-section{
    max-width:900px;
    margin:auto;
    padding:70px 32px 90px;
}

.faq-section h2{
    text-align:center;
    font-size:40px;
    margin-bottom:35px;
}

.faq-section details{
    background:#0d0a0e;
    border:1px solid #29222b;
    border-radius:15px;
    padding:20px;
    margin-bottom:12px;
}

.faq-section summary{
    cursor:pointer;
    font-weight:800;
}

.faq-section details p{
    color:#aaa1aa;
    line-height:1.7;
    font-size:14px;
    margin-top:15px;
}


/* =========================================
   FINAL CTA
========================================= */

.final-cta{
    max-width:1100px;
    margin:0 auto 100px;
    padding:0 32px;
}

.cta-inner{
    min-height:450px;
    border:1px solid rgba(255,35,120,.38);
    border-radius:0 0 30px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,20,110,.17),
            transparent 55%
        ),
        #11090f;
}

.cta-inner h2{
    font-size:52px;
    line-height:1.02;
    letter-spacing:-2px;
    margin-bottom:22px;
}

.cta-inner p{
    color:#aaa1aa;
    margin-bottom:28px;
}

.cta-button{
    background:linear-gradient(
        135deg,
        #ff287f,
        #dc1768
    );
    padding:17px 25px;
    border-radius:13px;
    font-weight:900;
    box-shadow:0 12px 35px rgba(255,20,110,.3);
}


/* =========================================
   FOOTER
========================================= */

.site-footer{
    border-top:1px solid #1c171d;
    background:#050406;
}

.footer-inner{
    max-width:1280px;
    min-height:115px;
    padding:30px 32px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
}

.footer-logo{
    font-size:29px;
    font-weight:1000;
    letter-spacing:-2px;
}

.footer-logo span{
    color:#ff2079;
}

.footer-copy{
    text-align:center;
    color:#706a72;
    font-size:11px;
}

.footer-links{
    display:flex;
    justify-content:flex-end;
    gap:25px;
}

.footer-links a{
    color:#777079;
    font-size:11px;
}

.footer-links a:hover{
    color:#ff3181;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:850px){

    .about-card{
        grid-template-columns:1fr;
        padding:45px 30px;
        gap:40px;
    }

    .about-copy h2{
        font-size:42px;
    }

    .review-grid{
        grid-template-columns:1fr;
    }

    .footer-inner{
        grid-template-columns:1fr;
        gap:18px;
        text-align:center;
    }

    .footer-links{
        justify-content:center;
    }

}

@media(max-width:600px){

    .about-section{
        padding:40px 17px 60px;
    }

    .about-card{
        min-height:auto;
        padding:35px 22px;
        border-radius:22px;
    }

    .about-copy h2{
        font-size:36px;
    }

    .conversation-card{
        padding:18px;
    }

    .reviews-section,
    .faq-section{
        padding-left:17px;
        padding-right:17px;
    }

    .reviews-section h2,
    .faq-section h2{
        font-size:32px;
    }

    .final-cta{
        padding:0 17px;
        margin-bottom:60px;
    }

    .cta-inner{
        min-height:360px;
        border-radius:22px;
        padding:25px;
    }

    .cta-inner h2{
        font-size:37px;
    }

    .footer-inner{
        padding:30px 17px;
    }

}



/* =========================================
   SEO ARTICLE
========================================= */

.seo-article{
    padding:80px 32px 90px;
    background:#050406;
    border-top:1px solid #171219;
}

.seo-article-inner{
    max-width:1000px;
    margin:auto;
}

.seo-article-inner .section-label{
    text-align:center;
}

.seo-article-inner h2{
    text-align:center;
    font-size:42px;
    line-height:1.15;
    letter-spacing:-1.5px;
    margin-bottom:35px;
}

.seo-article-inner h2 strong{
    color:#ff1975;
}

.seo-article-inner p{
    color:#bcb4bc;
    font-size:15px;
    line-height:1.85;
    margin-bottom:23px;
}

.seo-article-inner p strong{
    color:#fff;
    font-weight:800;
}

@media(max-width:700px){

    .seo-article{
        padding:55px 18px 65px;
    }

    .seo-article-inner h2{
        font-size:31px;
        letter-spacing:-1px;
        margin-bottom:28px;
    }

    .seo-article-inner p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:20px;
    }

}



/* =========================================
   XXDATE DEMO VIDEO CALL
========================================= */

#xx-call-demo-popup,
#xx-credit-message{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,
               visibility .25s ease;
}

#xx-call-demo-popup.xx-call-visible,
#xx-credit-message.xx-credit-visible{
    opacity:1;
    visibility:visible;
}


/* CALL CARD */

.xx-call-card{
    width:min(390px,100%);
    padding:32px 26px 25px;
    text-align:center;
    position:relative;
    border:1px solid rgba(255,35,120,.55);
    border-radius:26px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,20,110,.20),
            transparent 50%
        ),
        #100b11;
    box-shadow:
        0 30px 100px rgba(0,0,0,.7),
        0 0 50px rgba(255,20,110,.16);
    transform:scale(.92);
    transition:transform .3s ease;
}

.xx-call-visible .xx-call-card{
    transform:scale(1);
}

.xx-call-close,
.xx-credit-close{
    position:absolute;
    top:12px;
    right:15px;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:#211820;
    color:#aaa;
    font-size:22px;
    cursor:pointer;
}

.xx-call-avatar{
    width:82px;
    height:82px;
    margin:5px auto 18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #ff2079,
        #8e124c
    );
    border:3px solid #ff287f;
    box-shadow:0 0 35px rgba(255,20,110,.4);
}

.xx-call-avatar span{
    color:#fff;
    font-size:24px;
    font-weight:900;
}

.xx-call-name{
    margin:0 0 8px;
    color:#fff;
    font-size:22px;
}

.xx-call-status{
    margin:0;
    color:#ff3988;
    font-size:12px;
    font-weight:800;
    letter-spacing:.5px;
}

.xx-pulse{
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:5px;
    border-radius:50%;
    background:#17dc8e;
    box-shadow:0 0 12px #17dc8e;
    animation:xxPulse 1s infinite;
}

@keyframes xxPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.35;transform:scale(.65)}
}

.xx-call-wave{
    height:65px;
    margin:22px 0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.xx-call-wave i{
    width:4px;
    height:18px;
    border-radius:5px;
    background:#ff287f;
    box-shadow:0 0 8px rgba(255,40,127,.5);
    animation:xxWave .65s ease-in-out infinite;
}

.xx-call-wave i:nth-child(2){animation-delay:.08s}
.xx-call-wave i:nth-child(3){animation-delay:.16s}
.xx-call-wave i:nth-child(4){animation-delay:.24s}
.xx-call-wave i:nth-child(5){animation-delay:.32s}
.xx-call-wave i:nth-child(6){animation-delay:.24s}
.xx-call-wave i:nth-child(7){animation-delay:.16s}
.xx-call-wave i:nth-child(8){animation-delay:.08s}
.xx-call-wave i:nth-child(9){animation-delay:.02s}

@keyframes xxWave{
    0%,100%{height:14px}
    50%{height:48px}
}

.xx-call-timer{
    color:#aaa1aa;
    font-size:12px;
    margin-bottom:20px;
}

.xx-call-cancel{
    width:100%;
    border:1px solid #4a2635;
    background:#21131b;
    color:#ff6c9f;
    padding:13px;
    border-radius:12px;
    cursor:pointer;
    font-weight:800;
}


/* =========================================
   CREDIT MESSAGE
========================================= */

.xx-credit-card{
    width:min(420px,100%);
    position:relative;
    text-align:center;
    padding:38px 28px 30px;
    border:1px solid rgba(255,35,120,.55);
    border-radius:25px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,20,110,.18),
            transparent 55%
        ),
        #100b11;
    box-shadow:
        0 30px 100px rgba(0,0,0,.75),
        0 0 50px rgba(255,20,110,.15);
    transform:translateY(20px);
    transition:transform .3s ease;
}

.xx-credit-visible .xx-credit-card{
    transform:translateY(0);
}

.xx-credit-icon{
    width:65px;
    height:65px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#25131e;
    color:#ff287f;
    border:1px solid #ff287f;
    font-size:25px;
    font-weight:900;
}

.xx-credit-card h3{
    margin:0 0 12px;
    color:#fff;
    font-size:23px;
}

.xx-credit-card p{
    margin:0 auto 20px;
    max-width:330px;
    color:#aaa1aa;
    line-height:1.65;
    font-size:14px;
}

.xx-credit-price{
    color:#fff;
    font-size:31px;
    font-weight:900;
    margin-bottom:20px;
}

.xx-credit-price span{
    display:block;
    margin-top:4px;
    color:#ff3988;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.xx-recharge-button{
    width:100%;
    border:0;
    border-radius:13px;
    padding:16px;
    background:linear-gradient(
        135deg,
        #ff287f,
        #dc1768
    );
    color:#fff;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 35px rgba(255,20,110,.25);
}

.xx-recharge-button:hover{
    transform:translateY(-1px);
}

.xx-credit-card small{
    display:block;
    margin-top:14px;
    color:#6f6870;
    font-size:10px;
}


/* MOBILE */

@media(max-width:500px){

    .xx-call-card,
    .xx-credit-card{
        border-radius:20px;
        padding-left:20px;
        padding-right:20px;
    }

}



/* =========================================
   CALL ACCEPT / DECLINE BUTTONS
========================================= */

.xx-call-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:5px;
}

.xx-call-accept,
.xx-call-decline{
    border:0;
    border-radius:12px;
    padding:13px 10px;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s ease,
               filter .2s ease;
}

.xx-call-accept{
    background:#13c985;
    color:#fff;
    box-shadow:0 8px 25px rgba(19,201,133,.20);
}

.xx-call-decline{
    background:#3a1724;
    color:#ff5b8e;
    border:1px solid #63243c;
}

.xx-call-accept:hover,
.xx-call-decline:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}



/* =========================================
   LIVE BAR
========================================= */

.xx-live-bar{
    max-width:1380px;
    margin:auto;
    min-height:45px;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#aaa1aa;
    font-size:12px;
    border-bottom:1px solid #171319;
}

.xx-live-bar strong{
    color:#fff;
}

.xx-live-dot{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:7px;
    border-radius:50%;
    background:#16dc8e;
    box-shadow:0 0 12px #16dc8e;
}

.xx-live-cities{
    color:#716b72;
}


/* =========================================
   SEARCH
========================================= */

.xx-discovery-tools{
    max-width:1380px;
    margin:0 auto;
    padding:25px 32px 10px;
    display:grid;
    grid-template-columns:1fr 190px 190px 90px;
    gap:10px;
}

.xx-search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#0d0a0e;
    border:1px solid #29232b;
    border-radius:13px;
    padding:0 15px;
}

.xx-search-box span{
    color:#ff287f;
    font-size:22px;
}

.xx-search-box input,
.xx-discovery-tools select{
    width:100%;
    height:48px;
    border:0;
    outline:0;
    background:#0d0a0e;
    color:#fff;
    font-size:13px;
}

.xx-discovery-tools select{
    padding:0 13px;
    border:1px solid #29232b;
    border-radius:13px;
}

.xx-clear-filter{
    border:1px solid #3b2934;
    border-radius:13px;
    background:#160e13;
    color:#ff4b91;
    cursor:pointer;
    font-weight:800;
}


/* =========================================
   WALLET
========================================= */

.xx-wallet{
    display:flex;
    align-items:center;
    gap:8px;
    margin-right:12px;
    border:1px solid #392530;
    background:#130c11;
    color:#fff;
    border-radius:12px;
    padding:7px 11px;
    cursor:pointer;
}

.xx-wallet-icon{
    width:29px;
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ff2079;
    font-weight:900;
}

.xx-wallet small{
    display:block;
    color:#777079;
    font-size:8px;
    text-align:left;
}

.xx-wallet strong{
    display:block;
    font-size:13px;
}

.xx-wallet>b{
    color:#ff287f;
    font-size:17px;
}


/* =========================================
   PROFILE MODAL
========================================= */

.xx-profile-modal{
    position:fixed;
    inset:0;
    z-index:999990;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.xx-profile-visible{
    opacity:1;
    visibility:visible;
}

.xx-profile-modal-card{
    width:min(850px,100%);
    display:grid;
    grid-template-columns:45% 55%;
    overflow:hidden;
    position:relative;
    border:1px solid #682343;
    border-radius:24px;
    background:#100b10;
    box-shadow:0 30px 100px rgba(0,0,0,.7);
    transform:scale(.94);
    transition:.3s;
}

.xx-profile-visible .xx-profile-modal-card{
    transform:scale(1);
}

.xx-profile-modal-card>img{
    width:100%;
    height:450px;
    object-fit:cover;
}

.xx-profile-modal-close{
    position:absolute;
    right:15px;
    top:15px;
    z-index:5;
    width:35px;
    height:35px;
    border:0;
    border-radius:50%;
    background:#211820;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

.xx-modal-content{
    padding:45px 35px;
}

.xx-modal-online{
    color:#16dc8e;
    font-size:10px;
    font-weight:900;
}

.xx-modal-content h2{
    margin:10px 0 5px;
    font-size:34px;
}

.xx-modal-content>p{
    color:#a9a0a9;
    line-height:1.7;
}

.xx-modal-about{
    margin-top:25px;
}

.xx-modal-actions{
    display:flex;
    gap:10px;
    margin-top:25px;
}

.xx-modal-actions>button:last-child{
    border:1px solid #352a32;
    border-radius:11px;
    background:#160f14;
    color:#aaa;
    padding:0 20px;
    cursor:pointer;
}


/* =========================================
   RECHARGE MODAL
========================================= */

.xx-recharge-modal{
    position:fixed;
    inset:0;
    z-index:999998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.xx-recharge-visible{
    opacity:1;
    visibility:visible;
}

.xx-recharge-card{
    width:min(430px,100%);
    position:relative;
    padding:35px 27px;
    text-align:center;
    border:1px solid #6d2346;
    border-radius:24px;
    background:#100b10;
    box-shadow:0 30px 100px rgba(0,0,0,.7);
}

.xx-recharge-close{
    position:absolute;
    top:12px;
    right:14px;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:#211820;
    color:#aaa;
    font-size:21px;
    cursor:pointer;
}

.xx-recharge-icon{
    width:62px;
    height:62px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#28121e;
    color:#ff287f;
    border:1px solid #ff287f;
    font-size:25px;
    font-weight:900;
}

.xx-recharge-card h2{
    font-size:26px;
    margin:10px 0;
}

.xx-recharge-card>p{
    color:#aaa1aa;
    font-size:13px;
    line-height:1.6;
}

.xx-packages{
    display:grid;
    gap:10px;
    margin:22px 0;
}

.xx-package{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border:1px solid #30272f;
    border-radius:13px;
    background:#0b090c;
    color:#fff;
    cursor:pointer;
    text-align:left;
}

.xx-package span{
    color:#ff3988;
    font-weight:900;
}

.xx-package.selected,
.xx-package.popular{
    border-color:#ff287f;
    background:#1a0d15;
}

.xx-package b{
    position:absolute;
    top:-8px;
    right:12px;
    padding:4px 8px;
    border-radius:8px;
    background:#ff287f;
    color:#fff;
    font-size:8px;
}

.xx-recharge-pay{
    width:100%;
    padding:15px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#ff287f,#dc1768);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.xx-recharge-card>small{
    display:block;
    margin-top:13px;
    color:#686168;
    font-size:9px;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:850px){

    .xx-discovery-tools{
        grid-template-columns:1fr 1fr;
    }

    .xx-search-box{
        grid-column:1/-1;
    }

    .xx-profile-modal-card{
        grid-template-columns:1fr;
        max-height:90vh;
        overflow:auto;
    }

    .xx-profile-modal-card>img{
        height:280px;
    }

}

@media(max-width:600px){

    .xx-live-bar{
        padding:10px 17px;
        gap:8px;
        flex-direction:column;
        align-items:flex-start;
    }

    .xx-discovery-tools{
        padding:18px 17px 5px;
        grid-template-columns:1fr;
    }

    .xx-search-box{
        grid-column:auto;
    }

    .xx-wallet{
        margin-right:5px;
    }

    .xx-profile-modal-card>img{
        height:230px;
    }

    .xx-modal-content{
        padding:25px 20px;
    }

    .xx-modal-content h2{
        font-size:28px;
    }

    .xx-modal-actions{
        flex-direction:column;
    }

}



/* =========================================
   CREDIT MESSAGE FIX
========================================= */

#xx-credit-message{
    position:fixed;
    inset:0;
    z-index:1000001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

#xx-credit-message.xx-credit-visible{
    opacity:1;
    visibility:visible;
}

#xx-credit-message .xx-credit-card{
    position:relative;
    width:min(430px,100%);
    padding:38px 28px 30px;
    text-align:center;
    border:1px solid rgba(255,35,120,.55);
    border-radius:25px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,20,110,.18),
            transparent 55%
        ),
        #100b11;
    box-shadow:
        0 30px 100px rgba(0,0,0,.75),
        0 0 50px rgba(255,20,110,.18);
    transform:scale(.94);
    transition:transform .3s ease;
}

#xx-credit-message.xx-credit-visible .xx-credit-card{
    transform:scale(1);
}

#xx-credit-message .xx-credit-close{
    position:absolute;
    top:12px;
    right:14px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#211820;
    color:#aaa;
    font-size:22px;
    cursor:pointer;
}

#xx-credit-message .xx-credit-icon{
    width:65px;
    height:65px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#28121e;
    color:#ff287f;
    border:1px solid #ff287f;
    font-size:25px;
    font-weight:900;
}

#xx-credit-message .section-label{
    display:block;
    color:#ff3988;
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:10px;
}

#xx-credit-message h3{
    margin:0 0 12px;
    color:#fff;
    font-size:23px;
}

#xx-credit-message p{
    margin:0 auto 20px;
    max-width:340px;
    color:#aaa1aa;
    line-height:1.7;
    font-size:14px;
}

#xx-credit-message .xx-credit-price{
    color:#fff;
    font-size:31px;
    font-weight:900;
    margin-bottom:20px;
}

#xx-credit-message .xx-credit-price span{
    display:block;
    margin-top:5px;
    color:#ff3988;
    font-size:9px;
    letter-spacing:1px;
}

#xx-credit-message .xx-recharge-button{
    width:100%;
    border:0;
    border-radius:13px;
    padding:16px;
    background:linear-gradient(
        135deg,
        #ff287f,
        #dc1768
    );
    color:#fff;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:
        0 12px 35px rgba(255,20,110,.25);
}

#xx-credit-message small{
    display:block;
    margin-top:14px;
    color:#686168;
    font-size:9px;
    line-height:1.5;
}



/* =========================================
   SEARCH HIGHLIGHT
========================================= */

.profile-card.xx-search-highlight{
    border-color:rgba(255,40,127,.75);
    box-shadow:
        0 0 0 1px rgba(255,40,127,.15),
        0 15px 45px rgba(255,20,110,.10);
}



/* =========================================
   PROFILE TOOLBAR
========================================= */

.xx-profile-toolbar{
    max-width:1380px;
    margin:20px auto 5px;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.xx-toolbar-title strong{
    display:block;
    color:#fff;
    font-size:20px;
}

.xx-toolbar-title span{
    display:block;
    margin-top:3px;
    color:#756e76;
    font-size:11px;
}

#xx-sort-profiles{
    min-width:180px;
    height:42px;
    padding:0 12px;
    border:1px solid #30272f;
    border-radius:11px;
    background:#0d0a0e;
    color:#fff;
    outline:none;
}


/* =========================================
   FAVORITE BUTTON
========================================= */

.xx-favorite-button{
    position:absolute;
    top:12px;
    right:12px;
    z-index:10;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:rgba(10,8,10,.78);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.2s;
}

.xx-favorite-button:hover{
    transform:scale(1.08);
}

.xx-favorite-button.is-favorite{
    color:#ff287f;
    border-color:#ff287f;
    box-shadow:0 0 18px rgba(255,40,127,.25);
}


/* =========================================
   EXTRA SECTIONS
========================================= */

.xx-extra-section{
    max-width:1380px;
    margin:55px auto 0;
    padding:0 32px;
}

.xx-extra-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:18px;
}

.xx-extra-heading h2{
    margin:6px 0 3px;
    color:#fff;
    font-size:25px;
}

.xx-extra-heading p{
    margin:0;
    color:#777079;
    font-size:12px;
}

.xx-mini-profile-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:12px;
}

.xx-mini-profile{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    position:relative;
    border:1px solid #282129;
    border-radius:14px;
    background:#0e0b0f;
}

.xx-mini-profile img{
    width:52px;
    height:52px;
    flex:none;
    object-fit:cover;
    border-radius:11px;
}

.xx-mini-profile strong{
    display:block;
    color:#fff;
    font-size:13px;
}

.xx-mini-profile small{
    display:block;
    margin-top:4px;
    color:#756e76;
    font-size:10px;
}

.xx-remove-favorite{
    position:absolute;
    right:10px;
    top:10px;
    width:25px;
    height:25px;
    border:0;
    border-radius:50%;
    background:#1d1219;
    color:#ff4c91;
    cursor:pointer;
}

.xx-empty-state{
    grid-column:1/-1;
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px dashed #30272f;
    border-radius:15px;
    color:#777079;
}

.xx-empty-state span{
    font-size:25px;
    color:#ff287f;
}

.xx-empty-state strong{
    margin-top:8px;
    color:#aaa1aa;
    font-size:13px;
}

.xx-empty-state small{
    margin-top:4px;
    font-size:10px;
}


/* =========================================
   CITY LINKS
========================================= */

.xx-city-links{
    max-width:1380px;
    margin:50px auto 100px;
    padding:18px 32px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    border-top:1px solid #211b21;
}

.xx-city-links>span{
    color:#777079;
    font-size:11px;
    margin-right:5px;
}

.xx-city-links a{
    padding:8px 12px;
    border:1px solid #30272f;
    border-radius:20px;
    color:#aaa1aa;
    text-decoration:none;
    font-size:11px;
}

.xx-city-links a:hover{
    color:#ff3988;
    border-color:#ff3988;
}


/* =========================================
   MODAL TOOLS
========================================= */

.xx-profile-tools{
    display:flex;
    gap:8px;
    margin:20px 0 5px;
}

.xx-profile-tools button{
    flex:1;
    min-height:38px;
    border:1px solid #30272f;
    border-radius:10px;
    background:#160f14;
    color:#aaa1aa;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.xx-profile-tools button:hover{
    color:#ff3988;
    border-color:#ff3988;
}


/* =========================================
   MOBILE BOTTOM NAV
========================================= */

.xx-mobile-nav{
    display:none;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

    .xx-profile-toolbar{
        padding:0 17px;
        align-items:flex-start;
        flex-direction:column;
    }

    #xx-sort-profiles{
        width:100%;
    }

    .xx-extra-section{
        padding:0 17px;
    }

    .xx-mini-profile-grid{
        grid-template-columns:1fr;
    }

    .xx-city-links{
        padding:18px 17px 100px;
    }

    .xx-profile-tools{
        flex-wrap:wrap;
    }

    .xx-profile-tools button{
        min-width:30%;
    }


    .xx-mobile-nav{
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:99990;
        height:62px;
        display:grid;
        grid-template-columns:
            repeat(4,1fr);
        align-items:center;
        border:1px solid #392530;
        border-radius:18px;
        background:rgba(15,10,14,.94);
        backdrop-filter:blur(15px);
        box-shadow:
            0 15px 45px rgba(0,0,0,.55);
    }

    .xx-mobile-nav a,
    .xx-mobile-nav button{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:3px;
        border:0;
        background:none;
        color:#756e76;
        text-decoration:none;
        cursor:pointer;
    }

    .xx-mobile-nav span{
        color:#ff3988;
        font-size:19px;
    }

    .xx-mobile-nav small{
        font-size:9px;
        color:#aaa1aa;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:420px){

    .xx-profile-tools button{
        font-size:9px;
        padding:7px 3px;
    }

}



/* =========================================
   FAVORITE BUTTON - DO NOT COVER ONLINE
========================================= */

.profile-card{
    position:relative;
}

/*
 * Online badge remains at top-right.
 * Favorite button moves below it.
 */

.profile-card .xx-favorite-button{
    position:absolute !important;

    top:58px !important;
    right:12px !important;

    z-index:20 !important;

    width:38px !important;
    height:38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:50% !important;

    background:rgba(10,8,10,.88) !important;
    backdrop-filter:blur(8px);

    color:#fff;

    font-size:20px;
    line-height:1;

    cursor:pointer;
}

/* Favorite active */

.profile-card .xx-favorite-button.is-favorite{
    color:#ff287f !important;
    border-color:#ff287f !important;

    box-shadow:
        0 0 18px rgba(255,40,127,.30);
}


/* Mobile */

@media(max-width:700px){

    .profile-card .xx-favorite-button{
        top:56px !important;
        right:10px !important;
    }

}



/* =========================================
   PRO FEATURE SECTIONS
========================================= */

.xx-pro-section{
    max-width:1380px;
    margin:65px auto 0;
    padding:0 32px;
}

.xx-pro-heading{
    margin-bottom:24px;
}

.xx-pro-heading h2{
    margin:7px 0 5px;
    color:#fff;
    font-size:28px;
    line-height:1.15;
}

.xx-pro-heading p{
    margin:0;
    color:#777079;
    font-size:12px;
}


/* =========================================
   PROFILE DETAIL MODAL
========================================= */

.xx-detail-modal{
    position:fixed;
    inset:0;
    z-index:1000010;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.84);
    backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.xx-detail-modal.xx-detail-visible{
    opacity:1;
    visibility:visible;
}

.xx-detail-card{
    position:relative;
    width:min(900px,100%);
    max-height:90vh;
    overflow:auto;
    display:grid;
    grid-template-columns:48% 52%;
    border:1px solid #432433;
    border-radius:24px;
    background:#100b10;
    box-shadow:
        0 30px 100px rgba(0,0,0,.75),
        0 0 60px rgba(255,20,110,.12);
}

.xx-detail-close{
    position:absolute;
    right:15px;
    top:15px;
    z-index:20;
    width:38px;
    height:38px;
    border:1px solid #48303b;
    border-radius:50%;
    background:rgba(10,8,10,.8);
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.xx-detail-gallery{
    position:relative;
    min-height:480px;
    background:#080709;
}

.xx-detail-gallery img{
    width:100%;
    height:100%;
    min-height:480px;
    display:block;
    object-fit:cover;
}

.xx-gallery-arrow{
    position:absolute;
    top:50%;
    z-index:10;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:30px;
    cursor:pointer;
    transform:translateY(-50%);
}

#xx-gallery-prev{
    left:14px;
}

#xx-gallery-next{
    right:14px;
}

.xx-detail-content{
    padding:45px 35px 35px;
}

.xx-detail-status{
    color:#12dc8c;
    font-size:11px;
    font-weight:800;
}

.xx-detail-status span{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:5px;
    border-radius:50%;
    background:#12dc8c;
    box-shadow:0 0 10px #12dc8c;
}

.xx-detail-content h2{
    margin:10px 0 7px;
    color:#fff;
    font-size:34px;
}

.xx-detail-location{
    color:#aaa1aa;
    font-size:13px;
}

.xx-detail-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:20px;
}

.xx-detail-tags span{
    padding:7px 11px;
    border:1px solid #55233a;
    border-radius:20px;
    color:#ff3988;
    font-size:10px;
}

.xx-detail-about{
    margin:25px 0;
    color:#9d949d;
    font-size:13px;
    line-height:1.8;
}

.xx-detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.xx-detail-actions button{
    min-height:45px;
    border:1px solid #3b2932;
    border-radius:11px;
    background:#171016;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

#xx-detail-call{
    grid-column:1/-1;
    border:0;
    background:linear-gradient(
        135deg,
        #ff287f,
        #dc1768
    );
    box-shadow:
        0 12px 30px rgba(255,20,110,.2);
}


/* =========================================
   CITY EXPLORER
========================================= */

.xx-city-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:12px;
}

.xx-city-grid button{
    min-height:80px;
    border:1px solid #30232d;
    border-radius:15px;
    background:#0f0b0f;
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.xx-city-grid button:hover{
    border-color:#ff287f;
    transform:translateY(-2px);
    box-shadow:
        0 12px 30px rgba(255,20,110,.10);
}

.xx-city-grid span{
    display:block;
    margin-bottom:7px;
    font-size:20px;
}


/* =========================================
   REVIEWS
========================================= */

.xx-review-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

.xx-review-card{
    padding:23px;
    border:1px solid #282029;
    border-radius:17px;
    background:#0f0b0f;
}

.xx-review-stars{
    color:#ffb400;
    letter-spacing:2px;
    font-size:14px;
}

.xx-review-card p{
    min-height:80px;
    margin:16px 0;
    color:#aaa1aa;
    font-size:12px;
    line-height:1.7;
}

.xx-review-card strong{
    display:block;
    color:#fff;
    font-size:12px;
}

.xx-review-card small{
    display:block;
    margin-top:4px;
    color:#625b63;
    font-size:9px;
}


/* =========================================
   CREDIT HISTORY
========================================= */

.xx-history-list{
    border:1px solid #282029;
    border-radius:16px;
    overflow:hidden;
    background:#0f0b0f;
}

.xx-history-row{
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 18px;
    border-bottom:1px solid #211a20;
}

.xx-history-row:last-child{
    border-bottom:0;
}

.xx-history-row strong{
    display:block;
    color:#fff;
    font-size:12px;
}

.xx-history-row small{
    display:block;
    margin-top:4px;
    color:#625b63;
    font-size:9px;
}

.xx-history-row b{
    color:#ff3988;
    font-size:14px;
}

.xx-history-empty{
    padding:35px;
    text-align:center;
    color:#6d666d;
    font-size:11px;
}


/* =========================================
   VIEW PROFILE BUTTON
========================================= */

.xx-view-profile{
    min-height:38px;
    padding:0 12px;
    border:1px solid #ff287f;
    border-radius:10px;
    background:transparent;
    color:#ff3988;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    transition:.2s;
}

.xx-view-profile:hover{
    background:#ff287f;
    color:#fff;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:800px){

    .xx-pro-section{
        padding:0 17px;
    }

    .xx-city-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .xx-review-grid{
        grid-template-columns:1fr;
    }

    .xx-detail-card{
        display:block;
        max-height:92vh;
    }

    .xx-detail-gallery{
        min-height:330px;
    }

    .xx-detail-gallery img{
        min-height:330px;
        height:330px;
    }

    .xx-detail-content{
        padding:28px 20px;
    }

    .xx-detail-content h2{
        font-size:27px;
    }

}


@media(max-width:500px){

    .xx-city-grid{
        grid-template-columns:1fr 1fr;
    }

    .xx-detail-actions{
        grid-template-columns:1fr;
    }

    #xx-detail-call{
        grid-column:auto;
    }

    .xx-view-profile{
        width:100%;
        margin-bottom:7px;
    }

}



/* =========================================================
   XXDATE - NORMALIZE NEW PROFILE CARDS
   Make newly added profiles match existing profile UI
========================================================= */

[class*="xx-extra-profile-"]{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:17px !important;

    background:#0d090d !important;

    box-sizing:border-box !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* Hover */

[class*="xx-extra-profile-"]:hover{
    transform:translateY(-3px) !important;

    border-color:rgba(255,32,125,.55) !important;

    box-shadow:
        0 18px 45px rgba(255,20,110,.12) !important;
}


/* =========================================================
   IMAGE AREA
========================================================= */

[class*="xx-extra-profile-"] .profile-image-wrap{
    position:relative !important;

    width:100% !important;
    height:235px !important;

    min-height:235px !important;

    flex:0 0 235px !important;

    overflow:hidden !important;

    background:#151015 !important;
}


[class*="xx-extra-profile-"] .profile-image-wrap img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    transition:
        transform .45s ease !important;
}


[class*="xx-extra-profile-"]:hover
.profile-image-wrap img{
    transform:scale(1.04) !important;
}


/* =========================================================
   VERIFIED BADGE
========================================================= */

[class*="xx-extra-profile-"] .profile-badge{
    position:absolute !important;

    top:12px !important;
    left:12px !important;

    z-index:15 !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:7px 10px !important;

    border-radius:20px !important;

    background:rgba(111,36,76,.92) !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:900 !important;

    white-space:nowrap !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.25) !important;
}


/* =========================================================
   ONLINE BADGE
========================================================= */

[class*="xx-extra-profile-"] .profile-online{
    position:absolute !important;

    top:12px !important;
    right:12px !important;

    z-index:15 !important;

    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;

    padding:7px 10px !important;

    border-radius:20px !important;

    background:rgba(15,15,18,.90) !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.25) !important;
}


[class*="xx-extra-profile-"] .profile-online i{
    display:inline-block !important;

    width:7px !important;
    height:7px !important;

    border-radius:50% !important;

    background:#00df91 !important;

    box-shadow:
        0 0 10px rgba(0,223,145,.8) !important;
}


/* =========================================================
   FAVORITE
========================================================= */

[class*="xx-extra-profile-"] .xx-favorite-button{
    position:absolute !important;

    top:58px !important;
    right:12px !important;

    z-index:20 !important;

    width:40px !important;
    height:40px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    border:1px solid rgba(255,255,255,.20) !important;

    border-radius:50% !important;

    background:rgba(15,12,16,.88) !important;

    color:#fff !important;

    font-size:21px !important;
    line-height:1 !important;

    cursor:pointer !important;

    backdrop-filter:blur(8px) !important;
}


[class*="xx-extra-profile-"]
.xx-favorite-button:hover{
    border-color:#ff287f !important;

    color:#ff287f !important;
}


[class*="xx-extra-profile-"]
.xx-favorite-button.is-favorite{
    color:#ff287f !important;

    border-color:#ff287f !important;

    box-shadow:
        0 0 18px rgba(255,40,127,.30) !important;
}


/* =========================================================
   PROFILE INFO
========================================================= */

[class*="xx-extra-profile-"] .profile-info{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;

    flex:1 !important;

    padding:14px 14px 14px !important;

    background:#0d090d !important;

    box-sizing:border-box !important;
}


[class*="xx-extra-profile-"] .profile-info h3{
    margin:0 0 7px !important;

    color:#fff !important;

    font-size:20px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
}


[class*="xx-extra-profile-"] .profile-location{
    margin:0 0 12px !important;

    color:#aaa2ab !important;

    font-size:12px !important;
    line-height:1.4 !important;
}


/* =========================================================
   TAGS
========================================================= */

[class*="xx-extra-profile-"] .profile-tags{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;

    gap:7px !important;

    margin:0 !important;

    min-height:30px !important;
}


[class*="xx-extra-profile-"] .profile-tag{
    display:inline-flex !important;
    align-items:center !important;

    padding:6px 10px !important;

    border:1px solid #8e1850 !important;

    border-radius:18px !important;

    background:transparent !important;

    color:#ff3d8b !important;

    font-size:10px !important;
    line-height:1 !important;

    white-space:nowrap !important;
}


/* =========================================================
   CALL BUTTON
========================================================= */

[class*="xx-extra-profile-"] .profile-call-button{
    align-self:flex-end !important;

    min-height:42px !important;

    margin-top:10px !important;

    padding:0 18px !important;

    border:0 !important;

    border-radius:11px !important;

    background:linear-gradient(
        135deg,
        #ff287f,
        #e8176c
    ) !important;

    color:#fff !important;

    font-size:11px !important;
    font-weight:900 !important;

    cursor:pointer !important;

    box-shadow:
        0 8px 20px rgba(255,20,110,.16) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


[class*="xx-extra-profile-"]
.profile-call-button:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 12px 28px rgba(255,20,110,.28) !important;
}


/* =========================================================
   VIEW PROFILE BUTTON
========================================================= */

[class*="xx-extra-profile-"] .xx-view-profile{
    align-self:flex-end !important;

    min-height:42px !important;

    margin-top:10px !important;

    margin-right:7px !important;

    padding:0 15px !important;

    border:1px solid #ff287f !important;

    border-radius:11px !important;

    background:transparent !important;

    color:#ff3988 !important;

    font-size:10px !important;
    font-weight:900 !important;

    cursor:pointer !important;
}


/* Keep View + Call on same row */

[class*="xx-extra-profile-"] .profile-info{
    padding-bottom:14px !important;
}


[class*="xx-extra-profile-"] .profile-call-button,
[class*="xx-extra-profile-"] .xx-view-profile{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}


/* =========================================================
   DESKTOP GRID CONSISTENCY
========================================================= */

.profiles-grid{
    align-items:stretch !important;
}


.profiles-grid > [class*="xx-extra-profile-"]{
    align-self:stretch !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    [class*="xx-extra-profile-"]
    .profile-image-wrap{

        height:230px !important;
        min-height:230px !important;
        flex-basis:230px !important;

    }

}


@media(max-width:500px){

    [class*="xx-extra-profile-"]
    .profile-image-wrap{

        height:220px !important;
        min-height:220px !important;
        flex-basis:220px !important;

    }

    [class*="xx-extra-profile-"]
    .profile-info h3{

        font-size:18px !important;

    }

    [class*="xx-extra-profile-"]
    .profile-call-button{

        min-height:40px !important;

    }

}



/* =========================================================
   XXDATE MOBILE CALL POPUP
   Popup must ALWAYS stay above mobile bottom navigation
========================================================= */


/* Bottom navigation */

.xx-mobile-nav{
    position:fixed !important;

    left:12px !important;
    right:12px !important;
    bottom:12px !important;

    z-index:9000 !important;
}


/* Call popup overlay */

#xx-call-demo-popup{
    position:fixed !important;

    inset:0 !important;

    z-index:99999 !important;

    display:flex !important;

    align-items:flex-end !important;
    justify-content:center !important;

    padding:20px !important;
    padding-bottom:105px !important;

    box-sizing:border-box !important;

    pointer-events:auto !important;
}


/* Popup itself */

#xx-call-demo-popup > div,
#xx-call-demo-popup .xx-call-popup,
#xx-call-demo-popup .xx-call-modal{
    position:relative !important;

    z-index:100000 !important;

    max-width:430px !important;
    width:100% !important;

    pointer-events:auto !important;
}


/* Accept / Decline buttons */

#xx-call-demo-popup button{
    position:relative !important;

    z-index:100001 !important;

    pointer-events:auto !important;
}


/* Make popup buttons clearly visible */

#xx-call-demo-popup .xx-call-actions{
    position:relative !important;

    z-index:100002 !important;

    display:flex !important;

    gap:12px !important;

    width:100% !important;
}


#xx-call-demo-popup .xx-call-accept,
#xx-call-demo-popup .xx-call-decline{
    position:relative !important;

    z-index:100003 !important;

    flex:1 !important;

    min-height:48px !important;

    pointer-events:auto !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    #xx-call-demo-popup{

        align-items:flex-end !important;

        padding-left:14px !important;
        padding-right:14px !important;

        /*
         * 95px bottom gap keeps popup above
         * the mobile navigation bar.
         */

        padding-bottom:105px !important;
    }


    #xx-call-demo-popup > div,
    #xx-call-demo-popup .xx-call-popup,
    #xx-call-demo-popup .xx-call-modal{

        width:100% !important;

        max-width:430px !important;

        margin:0 auto !important;
    }


    #xx-call-demo-popup .xx-call-actions{

        display:flex !important;

        gap:10px !important;

    }


    #xx-call-demo-popup .xx-call-accept,
    #xx-call-demo-popup .xx-call-decline{

        min-height:50px !important;

        font-size:14px !important;

    }

}


/* Small phones */

@media(max-width:420px){

    #xx-call-demo-popup{

        padding-left:10px !important;
        padding-right:10px !important;

        padding-bottom:100px !important;
    }


    #xx-call-demo-popup .xx-call-actions{

        gap:8px !important;

    }


    #xx-call-demo-popup .xx-call-accept,
    #xx-call-demo-popup .xx-call-decline{

        min-height:46px !important;

        font-size:13px !important;

    }

}


/* =========================================================
   PREVENT BOTTOM NAV FROM COVERING IMPORTANT CONTENT
========================================================= */

@media(max-width:700px){

    body{
        padding-bottom:88px !important;
    }

}


/* Popup must win over every floating UI */

#xx-call-demo-popup,
#xx-call-demo-popup *{
    isolation:isolate;
}



/* =========================================================
   XXDATE - HARD MOBILE CALL POPUP FIX
   Bottom navigation must NEVER cover call popup
========================================================= */


/* Popup overlay always above page */

#xx-call-demo-popup{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    height:100vh !important;

    z-index:2147483647 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    pointer-events:auto !important;
}


/* Find every possible popup/card wrapper */

#xx-call-demo-popup > *,
#xx-call-demo-popup .xx-call-popup,
#xx-call-demo-popup .xx-call-modal,
#xx-call-demo-popup .xx-call-card,
#xx-call-demo-popup .xx-call-content{

    position:relative !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

    box-sizing:border-box !important;
}


/* All popup buttons */

#xx-call-demo-popup button{

    position:relative !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

    touch-action:manipulation !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    /*
       When popup exists, completely hide bottom navigation.
       :has() is supported by current Chrome/Edge/Safari.
    */

    body:has(#xx-call-demo-popup) .xx-mobile-nav{

        display:none !important;

        visibility:hidden !important;

        pointer-events:none !important;
    }


    /* Popup card gets comfortable mobile position */

    #xx-call-demo-popup{

        align-items:flex-end !important;

        justify-content:center !important;

        padding:16px !important;

        padding-bottom:22px !important;
    }


    #xx-call-demo-popup > *,
    #xx-call-demo-popup .xx-call-popup,
    #xx-call-demo-popup .xx-call-modal,
    #xx-call-demo-popup .xx-call-card,
    #xx-call-demo-popup .xx-call-content{

        width:min(430px, 100%) !important;

        max-width:430px !important;

        margin:0 auto !important;
    }


    #xx-call-demo-popup .xx-call-actions{

        position:relative !important;

        z-index:2147483647 !important;

        display:flex !important;

        width:100% !important;

        gap:10px !important;
    }


    #xx-call-demo-popup .xx-call-accept,
    #xx-call-demo-popup .xx-call-decline{

        position:relative !important;

        z-index:2147483647 !important;

        flex:1 1 0 !important;

        min-height:52px !important;

        pointer-events:auto !important;

        touch-action:manipulation !important;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:420px){

    #xx-call-demo-popup{

        padding:10px !important;

        padding-bottom:16px !important;
    }


    #xx-call-demo-popup .xx-call-accept,
    #xx-call-demo-popup .xx-call-decline{

        min-height:48px !important;

        font-size:13px !important;
    }

}



/* =========================================================
   XXDATE FINAL MOBILE CALL POPUP OVERRIDE
========================================================= */

@media (max-width:700px) {

    #xx-call-demo-popup {
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100dvh !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

        display:flex !important;

        align-items:flex-end !important;
        justify-content:center !important;

        padding:12px !important;
        padding-bottom:16px !important;

        box-sizing:border-box !important;

        isolation:isolate !important;
    }


    #xx-call-demo-popup > * {
        position:relative !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

        max-width:430px !important;
        width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    #xx-call-demo-popup button,
    #xx-call-demo-popup .xx-call-accept,
    #xx-call-demo-popup .xx-call-decline {

        position:relative !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

        touch-action:manipulation !important;
    }

}


/*
   This is intentionally stronger than the previous rules.
   JS also applies display:none !important while popup exists.
*/

@media (max-width:700px) {

    body.xx-call-popup-open
    .xx-mobile-nav,

    body.xx-call-popup-open
    .mobile-nav,

    body.xx-call-popup-open
    .bottom-nav,

    body.xx-call-popup-open
    .mobile-bottom-nav {

        display:none !important;

        visibility:hidden !important;

        pointer-events:none !important;
    }

}



/* =========================================================
   FINAL XXDATE MOBILE CALL LOCK
========================================================= */

@media (max-width:700px) {

    html.xx-call-active body,
    body.xx-call-active {

        overflow:hidden !important;
    }


    html.xx-call-active .xx-mobile-nav,
    body.xx-call-active .xx-mobile-nav,
    html.xx-call-active .mobile-nav,
    body.xx-call-active .mobile-nav,
    html.xx-call-active .bottom-nav,
    body.xx-call-active .bottom-nav,
    html.xx-call-active .mobile-bottom-nav,
    body.xx-call-active .mobile-bottom-nav {

        display:none !important;

        visibility:hidden !important;

        opacity:0 !important;

        pointer-events:none !important;

        height:0 !important;

        min-height:0 !important;

        max-height:0 !important;

        overflow:hidden !important;
    }


    #xx-call-demo-popup {

        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;

        margin:0 !important;

        padding:12px !important;

        display:flex !important;

        align-items:flex-end !important;

        justify-content:center !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

        box-sizing:border-box !important;
    }


    #xx-call-demo-popup button {

        pointer-events:auto !important;

        touch-action:manipulation !important;

        z-index:2147483647 !important;
    }

}



/* =========================================================
   XXDATE - POPUP ALWAYS ABOVE MOBILE NAV
========================================================= */

#xx-call-demo-popup {

    position:fixed !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

}


#xx-call-demo-popup * {

    z-index:2147483647 !important;

}


#xx-call-demo-popup button {

    position:relative !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

    touch-action:manipulation !important;

}


/*
   Mobile navigation stays visible,
   but remains BELOW the call popup.
*/

@media(max-width:700px){

    .xx-mobile-nav,
    .mobile-nav,
    .bottom-nav,
    .mobile-bottom-nav {

        z-index:1 !important;

    }


    #xx-call-demo-popup {

        position:fixed !important;

        left:0 !important;
        right:0 !important;
        top:0 !important;
        bottom:0 !important;

        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

    }

}



/* =========================================================
   XXDATE CONNECTING / CREDIT RESULT UI
========================================================= */

.xx-connecting,
.xx-connect-result {

    width:100%;
    max-width:420px;

    text-align:center;

    padding:34px 26px;

    box-sizing:border-box;
}


.xx-connecting-avatar {

    width:78px;
    height:78px;

    margin:0 auto 20px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ff1975,
            #7b174b
        );

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 0 35px rgba(255,25,117,.45);
}


.xx-connecting-avatar span {

    width:28px;
    height:28px;

    border-radius:50%;

    background:#fff;

    opacity:.9;
}


.xx-connecting-title,
.xx-connect-title {

    color:#fff;

    font-size:25px;

    font-weight:800;

    margin-bottom:10px;
}


.xx-connecting-text,
.xx-connect-text {

    color:#bdb7c0;

    line-height:1.6;

    font-size:14px;

    margin-bottom:22px;
}


.xx-connecting-bars {

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;
}


.xx-connecting-bars i {

    display:block;

    width:4px;

    height:12px;

    border-radius:5px;

    background:#ff1975;

    animation:xxCallWave .8s infinite ease-in-out;
}


.xx-connecting-bars i:nth-child(2){animation-delay:.1s}
.xx-connecting-bars i:nth-child(3){animation-delay:.2s}
.xx-connecting-bars i:nth-child(4){animation-delay:.3s}
.xx-connecting-bars i:nth-child(5){animation-delay:.4s}
.xx-connecting-bars i:nth-child(6){animation-delay:.5s}
.xx-connecting-bars i:nth-child(7){animation-delay:.6s}


@keyframes xxCallWave {

    0%,100% {
        height:10px;
    }

    50% {
        height:38px;
    }

}


.xx-connect-icon {

    width:64px;
    height:64px;

    margin:0 auto 18px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#17131a;

    border:2px solid #ff1975;

    color:#ff1975;

    font-size:28px;
    font-weight:800;
}


.xx-credit-info {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 16px;

    margin:20px 0;

    border-radius:12px;

    background:#151017;

    border:1px solid rgba(255,25,117,.25);

    color:#aaa;
}


.xx-credit-info strong {

    color:#ff1975;

    font-size:20px;
}


.xx-add-credit-btn {

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:#ff1975;

    color:#fff;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(255,25,117,.25);
}


.xx-close-credit-btn {

    width:100%;

    min-height:45px;

    margin-top:10px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:12px;

    background:transparent;

    color:#aaa;

    cursor:pointer;
}


.xx-add-credit-btn:hover {

    filter:brightness(1.1);

}


@media(max-width:700px){

    .xx-connecting,
    .xx-connect-result {

        padding:28px 20px;
    }

    .xx-connecting-title,
    .xx-connect-title {

        font-size:22px;
    }

}



/* =========================================================
   FINAL CALL RESULT
========================================================= */

#xx-call-demo-popup {

    position:fixed !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

}


.xx-final-call-card {

    width:min(420px, calc(100vw - 30px));

    box-sizing:border-box;

    padding:30px 22px;

    border-radius:22px;

    text-align:center;

    background:#0d090d;

    border:1px solid rgba(255,25,117,.55);

    box-shadow:
        0 20px 70px rgba(0,0,0,.65),
        0 0 35px rgba(255,25,117,.18);

}


.xx-final-call-icon {

    width:62px;
    height:62px;

    margin:0 auto 16px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#151016;

    border:2px solid #ff1975;

    color:#ff1975;

    font-size:28px;

    font-weight:800;
}


.xx-final-call-title {

    color:#fff;

    font-size:24px;

    font-weight:800;

    margin-bottom:10px;
}


.xx-final-call-message {

    color:#bbb;

    font-size:14px;

    line-height:1.6;

    margin-bottom:20px;
}


.xx-final-credit-box {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 16px;

    margin-bottom:14px;

    border-radius:12px;

    background:#171117;

    border:1px solid rgba(255,25,117,.25);

    color:#aaa;
}


.xx-final-credit-box strong {

    color:#ff1975;

    font-size:20px;
}


.xx-final-add-credit {

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:#ff1975;

    color:#fff;

    font-weight:800;

    font-size:15px;

    cursor:pointer;
}


.xx-final-close {

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.16);

    background:transparent;

    color:#aaa;

    cursor:pointer;
}


@media(max-width:700px){

    #xx-call-demo-popup {

        z-index:2147483647 !important;

    }

    .xx-final-call-card {

        width:calc(100vw - 24px);

        margin:12px;

        padding:26px 18px;

    }

}



/* =========================================================
   FINAL MOBILE CALL SYSTEM
========================================================= */

@media (max-width:700px) {

    #xx-call-demo-popup {

        position:fixed !important;

        inset:0 !important;

        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;

        display:flex !important;

        align-items:flex-end !important;
        justify-content:center !important;

        padding:12px !important;

        box-sizing:border-box !important;

        z-index:2147483647 !important;

        pointer-events:auto !important;

        background:rgba(0,0,0,.58) !important;

    }


    #xx-call-demo-popup .xx-mobile-call-card {

        width:100%;

        max-width:430px;

        box-sizing:border-box;

        padding:28px 20px 24px;

        margin-bottom:8px;

        border-radius:22px;

        background:#0d090d;

        border:1px solid rgba(255,25,117,.55);

        box-shadow:
            0 -10px 50px rgba(0,0,0,.7),
            0 0 35px rgba(255,25,117,.18);

        text-align:center;

        position:relative;

        z-index:2147483647 !important;

    }


    .xx-mobile-call-avatar {

        width:70px;
        height:70px;

        margin:0 auto 16px;

        border-radius:50%;

        display:flex;

        align-items:center;
        justify-content:center;

        background:
            linear-gradient(
                135deg,
                #ff1975,
                #7b174b
            );

        box-shadow:
            0 0 30px rgba(255,25,117,.35);

    }


    .xx-mobile-call-avatar span {

        width:25px;
        height:25px;

        border-radius:50%;

        background:#fff;

    }


    .xx-mobile-call-name {

        color:#fff;

        font-size:23px;

        font-weight:800;

        margin-bottom:7px;

    }


    .xx-mobile-call-status {

        color:#aaa;

        font-size:14px;

        line-height:1.55;

        margin-bottom:18px;

    }


    .xx-mobile-call-small {

        color:#777;

        font-size:12px;

        margin-top:14px;

    }


    .xx-call-wave {

        height:42px;

        display:flex;

        justify-content:center;

        align-items:center;

        gap:5px;

        margin:10px 0;

    }


    .xx-call-wave i {

        width:4px;

        height:12px;

        border-radius:5px;

        background:#ff1975;

        animation:
            xxMobileWave .8s
            infinite
            ease-in-out;

    }


    .xx-call-wave i:nth-child(2){
        animation-delay:.1s;
    }

    .xx-call-wave i:nth-child(3){
        animation-delay:.2s;
    }

    .xx-call-wave i:nth-child(4){
        animation-delay:.3s;
    }

    .xx-call-wave i:nth-child(5){
        animation-delay:.4s;
    }

    .xx-call-wave i:nth-child(6){
        animation-delay:.5s;
    }

    .xx-call-wave i:nth-child(7){
        animation-delay:.6s;
    }


    @keyframes xxMobileWave {

        0%,100% {
            height:10px;
        }

        50% {
            height:38px;
        }

    }


    .xx-credit-icon {

        width:60px;
        height:60px;

        margin:0 auto 15px;

        border-radius:50%;

        display:flex;

        align-items:center;
        justify-content:center;

        border:2px solid #ff1975;

        color:#ff1975;

        font-size:26px;

        font-weight:800;

    }


    .xx-current-credit {

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:13px 15px;

        margin:18px 0 12px;

        border-radius:12px;

        background:#171117;

        border:1px solid rgba(255,25,117,.25);

        color:#aaa;

    }


    .xx-current-credit strong {

        color:#ff1975;

        font-size:20px;

    }


    .xx-mobile-add-credit {

        width:100%;

        min-height:50px;

        border:0;

        border-radius:12px;

        background:#ff1975;

        color:#fff;

        font-size:15px;

        font-weight:800;

        cursor:pointer;

    }


    .xx-mobile-close {

        width:100%;

        min-height:44px;

        margin-top:10px;

        border-radius:12px;

        border:1px solid rgba(255,255,255,.15);

        background:transparent;

        color:#aaa;

        cursor:pointer;

    }


    /*
       Keep existing mobile nav BELOW popup.
       It remains visible behind the overlay.
    */

    .xx-mobile-nav,
    .mobile-nav,
    .bottom-nav,
    .mobile-bottom-nav {

        z-index:10 !important;

    }

}



/* =========================================================
   CLEAN CALL SYSTEM
========================================================= */

#xx-call-demo-popup {

    position:fixed !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

}


.xx-clean-call-card {

    width:min(420px, calc(100vw - 24px));

    box-sizing:border-box;

    padding:26px 20px;

    border-radius:22px;

    background:#0d090d;

    border:1px solid rgba(255,25,117,.55);

    box-shadow:
        0 20px 70px rgba(0,0,0,.75),
        0 0 35px rgba(255,25,117,.20);

    text-align:center;

    color:#fff;

}


.xx-clean-call-card h3 {

    margin:8px 0;

    color:#fff;

    font-size:24px;

}


.xx-clean-call-card p {

    margin:8px 0 18px;

    color:#aaa;

    font-size:14px;

    line-height:1.55;

}


.xx-clean-avatar {

    width:68px;
    height:68px;

    margin:0 auto 14px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #ff1975,
            #8b174d
        );

    box-shadow:
        0 0 30px rgba(255,25,117,.35);

}


.xx-clean-avatar span {

    width:24px;
    height:24px;

    border-radius:50%;

    background:#fff;

}


.xx-clean-name {

    font-size:23px;

    font-weight:800;

    margin-bottom:5px;

}


.xx-clean-incoming {

    color:#ff1975;

    font-size:12px;

    font-weight:800;

    letter-spacing:.4px;

}


.xx-clean-wave {

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:4px;

    margin:14px 0;

}


.xx-clean-wave i {

    display:block;

    width:4px;

    height:12px;

    border-radius:5px;

    background:#ff1975;

    animation:xxCleanWave .8s infinite;

}


.xx-clean-wave i:nth-child(2){animation-delay:.1s}
.xx-clean-wave i:nth-child(3){animation-delay:.2s}
.xx-clean-wave i:nth-child(4){animation-delay:.3s}
.xx-clean-wave i:nth-child(5){animation-delay:.4s}
.xx-clean-wave i:nth-child(6){animation-delay:.5s}
.xx-clean-wave i:nth-child(7){animation-delay:.6s}


@keyframes xxCleanWave {

    50% {
        height:34px;
    }

}


.xx-clean-actions {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:12px;

}


.xx-call-accept,
.xx-call-decline {

    min-height:50px;

    border:0;

    border-radius:12px;

    color:#fff;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

}


.xx-call-accept {

    background:#08c979;

}


.xx-call-decline {

    background:#c51e32;

}


.xx-credit-card {

    padding-top:30px;

}


.xx-clean-icon {

    width:60px;
    height:60px;

    margin:0 auto 15px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ff1975;

    border:2px solid #ff1975;

    font-size:25px;

    font-weight:800;

}


.xx-clean-credit {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:13px 15px;

    margin:16px 0 12px;

    border-radius:12px;

    background:#171117;

    border:1px solid rgba(255,25,117,.25);

    color:#aaa;

}


.xx-clean-credit strong {

    color:#ff1975;

    font-size:20px;

}


.xx-clean-pay {

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:#ff1975;

    color:#fff;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

}


.xx-clean-close {

    width:100%;

    min-height:44px;

    margin-top:10px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:12px;

    background:transparent;

    color:#aaa;

    cursor:pointer;

}


@media(max-width:700px) {

    #xx-call-demo-popup {

        inset:0 !important;

        width:100vw !important;

        height:100vh !important;

        height:100dvh !important;

        padding:12px !important;

        box-sizing:border-box !important;

        display:flex !important;

        align-items:flex-end !important;

        justify-content:center !important;

        background:rgba(0,0,0,.62) !important;

        z-index:2147483647 !important;

    }


    .xx-clean-call-card {

        width:100%;

        max-width:430px;

        margin:0 auto 8px;

        border-radius:22px;

    }


    .xx-mobile-nav,
    .mobile-nav,
    .bottom-nav,
    .mobile-bottom-nav {

        z-index:20 !important;

    }

}



/* =========================================================
   ISOLATED FINAL CALL SYSTEM
========================================================= */

#xx-call-demo-popup {

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;

    height:100vh !important;

    height:100dvh !important;

    display:flex !important;

    align-items:flex-end !important;

    justify-content:center !important;

    padding:14px !important;

    box-sizing:border-box !important;

    background:rgba(0,0,0,.65) !important;

    z-index:2147483647 !important;

    pointer-events:auto !important;

}


#xx-call-demo-popup .xx-clean-call-card {

    width:min(
        430px,
        calc(100vw - 24px)
    );

    box-sizing:border-box;

    padding:24px 20px;

    margin-bottom:10px;

    border-radius:22px;

    background:#0d090d;

    border:1px solid
        rgba(255,25,117,.55);

    box-shadow:
        0 20px 70px rgba(0,0,0,.8),
        0 0 40px rgba(255,25,117,.20);

    color:#fff;

    text-align:center;

}


.xx-clean-profile {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    margin-bottom:12px;

}


.xx-clean-avatar {

    width:62px;

    height:62px;

    flex:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #ff1975,
            #94184f
        );

    box-shadow:
        0 0 28px
        rgba(255,25,117,.35);

}


.xx-clean-avatar span {

    width:23px;

    height:23px;

    border-radius:50%;

    background:#fff;

}


.xx-clean-name {

    font-size:22px;

    font-weight:800;

    color:#fff;

    text-align:left;

}


.xx-clean-incoming {

    color:#ff1975;

    font-size:11px;

    font-weight:800;

    margin-top:4px;

    text-align:left;

}


.xx-clean-status {

    color:#aaa;

    font-size:14px;

    line-height:1.55;

    margin:10px 0 16px;

}


.xx-clean-wave {

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    margin:8px 0 16px;

}


.xx-clean-wave i {

    display:block;

    width:4px;

    height:10px;

    border-radius:5px;

    background:#ff1975;

    animation:
        xxCallWave .75s
        infinite
        ease-in-out;

}


.xx-clean-wave i:nth-child(2){
    animation-delay:.08s;
}

.xx-clean-wave i:nth-child(3){
    animation-delay:.16s;
}

.xx-clean-wave i:nth-child(4){
    animation-delay:.24s;
}

.xx-clean-wave i:nth-child(5){
    animation-delay:.32s;
}

.xx-clean-wave i:nth-child(6){
    animation-delay:.40s;
}

.xx-clean-wave i:nth-child(7){
    animation-delay:.48s;
}

.xx-clean-wave i:nth-child(8){
    animation-delay:.56s;
}

.xx-clean-wave i:nth-child(9){
    animation-delay:.64s;
}


@keyframes xxCallWave {

    0%,100% {
        height:9px;
    }

    50% {
        height:35px;
    }

}


.xx-clean-actions {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

}


#xx-clean-accept,
#xx-clean-decline {

    min-height:50px;

    border:0;

    border-radius:13px;

    color:#fff;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

}


#xx-clean-accept {

    background:#09c978;

}


#xx-clean-decline {

    background:#c51e32;

}


.xx-pulse {

    animation:
        xxCallPulse 1s
        infinite;

}


@keyframes xxCallPulse {

    50% {
        transform:scale(1.07);
    }

}


.xx-credit-icon {

    width:62px;

    height:62px;

    margin:0 auto 15px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #ff1975;

    color:#ff1975;

    font-size:24px;

    font-weight:900;

}


.xx-clean-credit {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:13px 15px;

    margin:15px 0 12px;

    border-radius:12px;

    background:#171117;

    border:1px solid
        rgba(255,25,117,.25);

    color:#aaa;

}


.xx-clean-credit strong {

    color:#ff1975;

    font-size:20px;

}


.xx-clean-pay {

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:#ff1975;

    color:#fff;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

}


.xx-clean-close {

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:12px;

    border:1px solid
        rgba(255,255,255,.15);

    background:transparent;

    color:#aaa;

    cursor:pointer;

}


@media(max-width:700px) {

    #xx-call-demo-popup {

        align-items:flex-end !important;

        padding:
            10px
            10px
            76px
            10px !important;

    }

    #xx-call-demo-popup
    .xx-clean-call-card {

        width:100%;

        max-width:430px;

        margin-bottom:0;

        border-radius:20px;

    }

}


@media(min-width:701px) {

    #xx-call-demo-popup {

        align-items:center !important;

    }

}



/* =====================================================
   DIRECT FINAL CALL SYSTEM
===================================================== */

#xx-direct-call-popup {

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;

    height:100vh !important;

    height:100dvh !important;

    display:flex !important;

    align-items:flex-end !important;

    justify-content:center !important;

    padding:12px !important;

    box-sizing:border-box !important;

    background:rgba(0,0,0,.72) !important;

    z-index:2147483647 !important;

}


.xx-direct-call-card {

    width:min(
        430px,
        calc(100vw - 20px)
    );

    box-sizing:border-box;

    background:#0d090d;

    border:
        1px solid
        rgba(255,25,117,.65);

    border-radius:22px;

    padding:22px 18px;

    margin-bottom:8px;

    color:#fff;

    text-align:center;

    box-shadow:
        0 20px 80px rgba(0,0,0,.85),
        0 0 45px
        rgba(255,25,117,.20);

}


.xx-direct-profile {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}


.xx-direct-avatar {

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #ff1975,
            #8e174d
        );

}


.xx-direct-avatar span {

    width:22px;

    height:22px;

    border-radius:50%;

    background:#fff;

}


.xx-direct-name {

    font-size:21px;

    font-weight:800;

    text-align:left;

}


.xx-direct-incoming {

    margin-top:4px;

    color:#ff1975;

    font-size:10px;

    font-weight:800;

    text-align:left;

}


.xx-direct-wave {

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    margin:13px 0;

}


.xx-direct-wave i {

    width:4px;

    height:10px;

    border-radius:4px;

    background:#ff1975;

    animation:
        xxDirectWave .7s
        infinite
        ease-in-out;

}


.xx-direct-wave i:nth-child(2){
    animation-delay:.08s;
}

.xx-direct-wave i:nth-child(3){
    animation-delay:.16s;
}

.xx-direct-wave i:nth-child(4){
    animation-delay:.24s;
}

.xx-direct-wave i:nth-child(5){
    animation-delay:.32s;
}

.xx-direct-wave i:nth-child(6){
    animation-delay:.40s;
}

.xx-direct-wave i:nth-child(7){
    animation-delay:.48s;
}

.xx-direct-wave i:nth-child(8){
    animation-delay:.56s;
}


@keyframes xxDirectWave {

    0%,100% {
        height:9px;
    }

    50% {
        height:34px;
    }

}


.xx-direct-actions {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

}


#xx-direct-accept,
#xx-direct-decline {

    min-height:50px;

    border:0;

    border-radius:13px;

    color:#fff;

    font-size:15px;

    font-weight:800;

}


#xx-direct-accept {

    background:#08c978;

}


#xx-direct-decline {

    background:#c51e32;

}


.xx-direct-pulse {

    animation:
        xxDirectPulse 1s
        infinite;

}


@keyframes xxDirectPulse {

    50% {
        transform:scale(1.08);
    }

}


.xx-direct-credit-icon {

    width:60px;

    height:60px;

    margin:0 auto 14px;

    border-radius:50%;

    border:2px solid #ff1975;

    color:#ff1975;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:23px;

    font-weight:900;

}


.xx-direct-call-card h3 {

    margin:8px 0;

    font-size:21px;

}


.xx-direct-call-card p {

    color:#aaa;

    font-size:14px;

    line-height:1.55;

}


.xx-direct-balance {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:16px 0;

    padding:13px;

    border-radius:12px;

    background:#171117;

    color:#aaa;

}


.xx-direct-balance strong {

    color:#ff1975;

    font-size:20px;

}


.xx-direct-pay {

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:#ff1975;

    color:#fff;

    font-weight:800;

    font-size:15px;

}


.xx-direct-close {

    width:100%;

    min-height:44px;

    margin-top:9px;

    border-radius:12px;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:transparent;

    color:#aaa;

}


@media(max-width:700px) {

    #xx-direct-call-popup {

        padding:
            10px
            10px
            78px
            10px !important;

    }

    .xx-direct-call-card {

        width:100%;

        max-width:430px;

        margin-bottom:0;

    }

}