/*====================================================
NEXTEL PREMIUM INCOMING CALL
====================================================*/

.incoming-call{

    position:fixed;

    right:30px;

    bottom:30px;

    width:360px;

    background:linear-gradient(
        160deg,
        #101010,
        #181818
    );

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

    border-radius:28px;

    overflow:hidden;

    z-index:99999;

    box-shadow:

    0 25px 70px rgba(0,0,0,.55);

    backdrop-filter:blur(18px);

    display:none;

    animation:callAppear .6s ease;

}

/*============================
TOP BAR
=============================*/

.call-top{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px;

    background:#0f0f0f;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.calling{

    color:#18d96f;

    font-size:14px;

    letter-spacing:.5px;

    font-weight:600;

}

/*============================
CALLER
=============================*/

.caller{

    padding:35px 25px;

    text-align:center;

}

/*============================
RING
=============================*/

.caller-ring{

    position:relative;

    width:110px;

    height:110px;

    margin:auto;

}

.caller-ring::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(24,217,111,.4);

    animation:ripple 2s infinite;

}

.caller-ring::after{

    content:"";

    position:absolute;

    inset:-25px;

    border-radius:50%;

    border:2px solid rgba(24,217,111,.15);

    animation:ripple 2s infinite .6s;

}

.caller-ring img{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #18d96f;

    box-shadow:

    0 0 40px rgba(24,217,111,.4);

}

/*============================
TEXT
=============================*/

#callerName{

    color:#fff;

    margin-top:22px;

    margin-bottom:8px;

    font-size:24px;

}

#callerCity{

    display:block;

    color:#18d96f;

    margin-bottom:5px;

    font-size:15px;

}

#callerNumber{

    color:#9a9a9a;

    font-size:13px;

}

/*============================
REWARD
=============================*/

.reward-box{

    margin:0 25px;

    padding:22px;

    border-radius:20px;

    text-align:center;

    background:

    rgba(255,255,255,.03);

    border:1px solid rgba(24,217,111,.08);

}

.reward-box h1{

    margin:12px 0;

    color:#18d96f;

    font-size:42px;

    text-shadow:

    0 0 25px rgba(24,217,111,.45);

}

.reward-box p{

    color:#bbb;

    line-height:1.7;

    font-size:14px;

}

/*============================
COUNTDOWN
=============================*/

.countdown{

    text-align:center;

    margin-top:18px;

    color:#ddd;

    font-size:15px;

}

.countdown span{

    color:#18d96f;

    font-size:32px;

    font-weight:700;

}

/*============================
BUTTONS
=============================*/

.call-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    padding:28px;

}

.call-buttons button{

    width:74px;

    height:74px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:24px;

    transition:.35s;

}

.answer-btn{

    background:#18d96f;

    animation:pulse 1.3s infinite;

}

.answer-btn:hover{

    transform:scale(1.12);

}

.end-btn{

    background:#e53935;

}

.end-btn:hover{

    transform:scale(1.12);

}

/*============================
PULSE
=============================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(24,217,111,.7);

    }

    70%{

        box-shadow:0 0 0 20px transparent;

    }

    100%{

        box-shadow:0 0 0 0 transparent;

    }

}

/*============================
RIPPLE
=============================*/

@keyframes ripple{

    0%{

        transform:scale(.9);

        opacity:1;

    }

    100%{

        transform:scale(1.45);

        opacity:0;

    }

}

/*============================
SHOW
=============================*/

@keyframes callAppear{

    from{

        opacity:0;

        transform:

        translateY(70px)

        scale(.85);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

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

@media(max-width:600px){

.incoming-call{

    left:12px;

    right:12px;

    width:auto;

    bottom:12px;

}

.reward-box h1{

    font-size:34px;

}

}


/*=================================================
LIVE ACTIVITY FEED
=================================================*/

.activity-feed{

position:fixed;

left:25px;

bottom:25px;

width:320px;

background:transparent;

border:none;

border-radius:18px;

padding:16px;

display:flex;

align-items:center;

gap:12px;

z-index:9999;

box-shadow:none;

backdrop-filter:none;

}

.activity-dot{

width:12px;

height:12px;

border-radius:50%;

background:#18d96f;

animation:blink 1s infinite;

}

.activity-text{

color:#fff;

font-size:14px;

line-height:1.6;

text-shadow:0 2px 8px rgba(0,0,0,.5);

}

.online-users{

    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 15px;

    background:transparent;

    color:#fff;

    font-size:14px;

    font-weight:600;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;

    z-index:9999999;

}

.online-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#18d96f;

    animation:blink 1s infinite;

}

/*=================================================
TOAST
=================================================*/

.nextel-toast{

position:fixed;

top:90px;

right:-400px;

background:transparent;

color:#fff;

padding:18px 24px;

border:none;

border-radius:16px;

display:flex;

align-items:center;

gap:12px;

font-weight:600;

transition:.45s;

z-index:10000;

box-shadow:none;

text-shadow:0 2px 8px rgba(0,0,0,.5);

}

.nextel-toast.show{

right:25px;

}

@keyframes blink{

0%,100%{

opacity:1;

}

50%{

opacity:.35;

}

}

@media(max-width:768px){

.activity-feed{

left:12px;

right:12px;

width:auto;

bottom:85px;

}

.online-users{

top:12px;

right:12px;

font-size:13px;

}

}b

.incoming-call{

    transition:
        opacity .35s ease,
        transform .35s ease;

}

/*==================================
ACTIVATION SCREEN
===================================*/

.activation-screen{

position:fixed;

inset:0;

background:rgba(0,0,0,.82);

display:none;

justify-content:center;

align-items:center;

z-index:999999;

backdrop-filter:blur(8px);

}

.activation-card{

width:360px;

background:#151515;

border-radius:24px;

padding:35px;

text-align:center;

border:1px solid rgba(24,217,111,.15);

animation:popup .45s;

}

.activation-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#18d96f;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:#fff;

animation:pulse 1.5s infinite;

}

.activation-card h2{

color:#fff;

margin-top:25px;

}

.activation-card p{

color:#bdbdbd;

line-height:1.8;

}

.reward-display{

margin:30px 0;

}

.reward-display h1{

color:#18d96f;

font-size:46px;

}

#activateRewardBtn{

width:100%;

height:56px;

background:#18d96f;

color:#fff;

border:none;

border-radius:14px;

font-size:18px;

cursor:pointer;

transition:.3s;

}

#activateRewardBtn:hover{

transform:translateY(-2px);

}

.incoming-call{

    display:none;

    opacity:0;

    transform:translateY(40px) scale(.96);

    transition:

        opacity .35s ease,

        transform .35s ease;

}

/*=================================================
ACTIVATION SCREEN
=================================================*/

.activation-screen{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(8,8,8,.82);

backdrop-filter:blur(10px);

z-index:999999;

opacity:0;

transition:.35s;

}

.activation-screen.show{

display:flex;

opacity:1;

}

.activation-card{

width:380px;

max-width:92%;

background:#141414;

border-radius:24px;

padding:35px;

text-align:center;

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

box-shadow:0 25px 80px rgba(0,0,0,.45);

animation:popup .45s ease;

}

.activation-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#18d96f;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:#fff;

animation:pulse 1.5s infinite;

}

.activation-card h2{

margin-top:25px;

color:#fff;

font-size:26px;

}

.activation-card p{

color:#bdbdbd;

line-height:1.8;

margin-top:15px;

min-height:55px;

}

.reward-display{

margin:28px 0;

}

.reward-display small{

color:#999;

}

.reward-display h1{

margin-top:8px;

font-size:48px;

color:#18d96f;

}

#activateRewardBtn{

width:100%;

height:56px;

border:none;

border-radius:14px;

background:#18d96f;

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

opacity:.55;

transition:.35s;

}

#activateRewardBtn.enabled{

opacity:1;

}

@keyframes popup{

from{

opacity:0;

transform:scale(.88);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(24,217,111,.65);

}

70%{

box-shadow:0 0 0 18px transparent;

}

100%{

box-shadow:0 0 0 0 transparent;

}

}

/*=================================================
VOICE AREA
=================================================*/

.voice-area{

margin-top:20px;

min-height:90px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.voice-loader{

display:flex;

align-items:flex-end;

gap:6px;

height:42px;

margin-bottom:20px;

}

.voice-loader span{

width:6px;

height:12px;

background:#18d96f;

border-radius:30px;

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

}

.voice-loader span:nth-child(2){

animation-delay:.1s;

}

.voice-loader span:nth-child(3){

animation-delay:.2s;

}

.voice-loader span:nth-child(4){

animation-delay:.3s;

}

.voice-loader span:nth-child(5){

animation-delay:.4s;

}

@keyframes voiceWave{

0%,100%{

height:12px;

}

50%{

height:40px;

}

}

#activationSpinner{

animation:spin 1s linear infinite;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*==================================
ACTIVATION LOADER
===================================*/

.activation-loader{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.88);

z-index:9999999;

backdrop-filter:blur(10px);

}

.activation-loader.show{

display:flex;

}

.loader-box{

text-align:center;

color:#fff;

}

.loader-circle{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

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

border-top:6px solid #18d96f;

animation:spin 1s linear infinite;

margin-bottom:25px;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

#activateRewardBtn{

    opacity:.5;

    pointer-events:none;

}

#activateRewardBtn.enabled{

    opacity:1;

    pointer-events:auto;

}