@import url("base/variables.css");
@import url("base/reset.css");
@import url("base/typography.css");
@import url("base/layout.css");

@import url("components/buttons.css");
@import url("components/badges.css");
@import url("components/cards.css");
@import url("components/forms.css");
@import url("components/preloader.css");

@import url("layout/navbar.css");
@import url("layout/footer.css");

@import url("sections/hero.css");
@import url("sections/offers.css");
@import url("sections/featured-products.css");
@import url("sections/why-choose.css");
@import url("sections/combo-section.css");
@import url("sections/wholesale.css");
@import url("sections/about.css");

@import url("sections/wholesale.css");
@import url("sections/testimonial.css");
@import url("sections/faq.css");
@import url("sections/footer.css");


.whatsapp-float{
    position: fixed !important;

    right: 20px;
    bottom: 20px;

    width: 58px;
    height: 58px;

    border-radius: 50%;

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

    background: #25D366;
    color: #ffffff;

    font-size: 1.7rem;

    text-decoration: none;

    z-index: 999999;

    box-shadow:
        0 10px 26px rgba(37,211,102,0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.whatsapp-float:hover{
    background: #1EBE57;

    transform:
        translateY(-4px)
        scale(1.06);

    box-shadow:
        0 10px 26px rgba(37,211,102,0.45);
}


.whatsapp-float i{
    line-height: 1;
}


/* mobile */
@media(max-width:768px){

    .whatsapp-float{
        width: 52px;
        height: 52px;

        right: 13px;
        bottom: 20px;

        font-size: 1.5rem;
    }

}


/* =========================================
   SCROLL TO TOP BUTTON
========================================= */

#scrollTopBtn{
    position: fixed !important;

    right: 22px;
    bottom: 90px;

    width: 52px;
    height: 52px;

    border: none;
    outline: none;

    border-radius: 18px;

    cursor: pointer;

    z-index: 999999;

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

    background:
        linear-gradient(
            135deg,
            #0EA5E9,
            #38BDF8
        );

    color: #ffffff;

    font-size: 1.1rem;

    box-shadow:
        0 10px 28px rgba(14,165,233,0.28),
        0 4px 12px rgba(15,23,42,0.10);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.92);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* visible */
#scrollTopBtn.show{
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* hover */
#scrollTopBtn:hover{
    transform:
        translateY(-4px)
        scale(1.04);

    background:
        linear-gradient(
            135deg,
            #0284C7,
            #0EA5E9
        );

    box-shadow:
        0 10px 26px rgba(14,165,233,0.34),
        0 8px 20px rgba(15,23,42,0.14);
}


#scrollTopBtn i{
    transition: transform 0.3s ease;
}

#scrollTopBtn:hover i{
    transform: translateY(-2px);
}


@media(max-width:992px){

    #scrollTopBtn{
        width: 46px;
        height: 46px;

        right: 27px;
        bottom: 95px;

        border-radius: 15px;

        font-size: 1rem;
    }

}


/* mobile */
@media(max-width:768px){

    #scrollTopBtn{
        width: 46px;
        height: 46px;

        right: 16px;
        bottom: 82px;

        border-radius: 15px;

        font-size: 1rem;
    }

}

@media (max-width:576px){
      #scrollTopBtn{
        width: 46px;
        height: 46px;

        right: 15px;
        bottom: 82px;

        border-radius: 15px;

        font-size: 1rem;
    }

}

.message{

    padding:1rem 1.2rem;

    border-radius:14px;

    margin-bottom:1rem;

    border:1px solid;

}

.message p{

    margin:0;

    font-size:.92rem;

    font-weight:600;

}

/* Success */

.message.success{

    background:#EDFDF5;

    border-color:#B8F0D2;

    color:#15803D;

}

/* Error */

.message.error{

    background:#FFF4F4;

    border-color:#FFD4D4;

    color:#D32F2F;

}

/* Warning */

.message.warning{

    background:#FFFBEA;

    border-color:#FFE08A;

    color:#B7791F;

}

/* Info */

.message.info{

    background:#EDF7FF;

    border-color:#B9DEFF;

    color:#2388F5;

}
/*==========================================================
                FLOATING TOAST MESSAGES
==========================================================*/

.floating-messages{

    position:fixed;

    top:25px;

    right:25px;

    z-index:9999;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.toast-message{

    min-width:340px;

    max-width:420px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    border-radius:14px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    animation:toastSlide .35s ease;

}

.toast-icon{

    font-size:1.35rem;

    flex-shrink:0;

}

.toast-content{

    flex:1;

    line-height:1.5;

}


/*=====================================
            SUCCESS
=====================================*/

.toast-message.success{

    background:linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );

}


/*=====================================
            ERROR
=====================================*/

.toast-message.error{

    background:linear-gradient(
        135deg,
        #EF4444,
        #DC2626
    );

}


/*=====================================
            WARNING
=====================================*/

.toast-message.warning{

    background:linear-gradient(
        135deg,
        #F59E0B,
        #D97706
    );

}


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

.toast-message.info{

    background:linear-gradient(
        135deg,
        #0EA5E9,
        #0284C7
    );

}


/*==========================================================
                    ANIMATION
==========================================================*/

@keyframes toastSlide{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}