/*==================================================
    PHONE MOCKUP
==================================================*/


.hero-phone{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:820px;

}



.phone{

    position:relative;

    width:390px;

    height:760px;

    display:flex;

    flex-direction:column;

    background:#ece5dd;

    border:14px solid #111827;

    border-radius:46px;

    overflow:hidden;

    box-shadow:
        0 45px 90px rgba(0,0,0,.20),
        0 20px 40px rgba(0,0,0,.10);

}



/*==================================================
    PHONE NOTCH
==================================================*/


.phone::before{

    content:"";

    position:absolute;

    top:10px;

    left:50%;

    transform:translateX(-50%);

    width:150px;

    height:30px;

    background:#000;

    border-radius:30px;

    z-index:10;

}



/*==================================================
    STATUS BAR
==================================================*/


.phone-status{

    height:42px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:0 18px 6px;

    background:#075E54;

    color:#fff;

    font-size:12px;

    font-weight:700;

}


.status-icons{

    display:flex;

    gap:8px;

}





/*==================================================
    WHATSAPP HEADER
==================================================*/


.wa-header{

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    background:#075E54;

    color:#fff;

}



.wa-user{

    display:flex;

    align-items:center;

    gap:12px;

}



.avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}



.wa-user strong{

    display:block;

    font-size:16px;

}



.wa-user small{

    font-size:12px;

    opacity:.8;

}



.wa-actions{

    display:flex;

    gap:16px;

    font-size:18px;

}





/*==================================================
    CHAT AREA
==================================================*/


.chat{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:18px;

    overflow:hidden;

    background:#ECE5DD;

}



/* Show messages */

.chat>*{

    opacity:1;

}



/*==================================================
    MESSAGE BUBBLES
==================================================*/


.bubble{

    max-width:82%;

    padding:14px 16px;

    border-radius:18px;

    line-height:1.55;

    font-size:14px;

    box-shadow:
        0 2px 6px rgba(0,0,0,.08);

}



.customer{

    align-self:flex-end;

    background:#DCF8C6;

    border-bottom-right-radius:6px;

}



.ai{

    align-self:flex-start;

    background:#fff;

    border-bottom-left-radius:6px;

}



.success{

    align-self:flex-start;

    background:#D8FFD6;

    border-bottom-left-radius:6px;

}



.time{

    display:block;

    margin-top:8px;

    text-align:right;

    font-size:11px;

    color:#777;

}





/*==================================================
    PAYMENT CARD
==================================================*/


.payment-card{

    width:100%;

    background:#fff;

    border-radius:18px;

    padding:18px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 12px 24px rgba(0,0,0,.08);

}



.payment-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:16px;

}



.payment-methods{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}



.payment-methods span{

    background:#EEF2FF;

    color:#2563EB;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}



.pay-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    background:#25D366;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    animation:pulse 2s infinite;

}





/*==================================================
    FLOATING CARDS
==================================================*/


.floating-card{

    position:absolute;

    width:180px;

    padding:18px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

    border-radius:18px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);

    z-index:20;

}



.floating-card span{

    display:block;

    color:#64748b;

    font-size:13px;

}



.floating-card strong{

    display:block;

    margin-top:6px;

    font-size:28px;

    font-weight:900;

}



.card-sales{

    top:50px;

    left:-120px;

}



.card-orders{

    top:310px;

    right:-120px;

}



.card-ai{

    bottom:60px;

    left:-120px;

}





/*==================================================
    TYPING INDICATOR
==================================================*/


.typing-indicator{

    width:70px;

    display:flex;

    gap:6px;

    padding:14px;

    background:#fff;

    border-radius:18px;

    border-bottom-left-radius:6px;

}



.typing-indicator span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#9CA3AF;

    animation:typingBounce 1.2s infinite;

}


.typing-indicator span:nth-child(2){

    animation-delay:.2s;

}


.typing-indicator span:nth-child(3){

    animation-delay:.4s;

}





/*==================================================
    ANIMATIONS
==================================================*/


@keyframes pulse{


    0%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,.45);

    }


    70%{

        box-shadow:
        0 0 0 18px rgba(37,211,102,0);

    }


    100%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,0);

    }


}



@keyframes typingBounce{


    0%,80%,100%{

        transform:translateY(0);

        opacity:.35;

    }


    40%{

        transform:translateY(-5px);

        opacity:1;

    }

}





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


@media(max-width:992px){


    .hero-phone{

        min-height:auto;

    }



    .phone{

        width:330px;

        height:680px;

    }



    .floating-card{

        display:none;

    }


}