/* =========================
   KCAL SELECT MODAL
========================= */


.kcal-modal {

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(2,6,23,.72);

    backdrop-filter:blur(14px);

    z-index:99999;

    animation:kcalFade .25s ease;

}







.kcal-modal-card {


    width:90%;
max-height:99vh;
    max-width:430px;


    background:

    linear-gradient(
    145deg,
    rgba(15,27,45,.96),
    rgba(11,18,32,.96)
    );


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:24px;


    padding:32px;


    box-shadow:

    0 30px 80px rgba(0,0,0,.65);


    position:relative;


}









.kcal-icon {


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:16px;


    background:

    linear-gradient(
    135deg,
    rgba(14,165,233,.25),
    rgba(59,130,246,.25)
    );


    font-size:28px;


    margin-bottom:20px;


}











.kcal-modal-card h2 {


    color:#f8fafc;

    font-size:28px;

    margin:0 0 8px 0;


}











.kcal-subtitle {


    color:#94a3b8;

    font-size:14px;

    line-height:1.5;

    margin:0 0 25px 0;


}











.kcal-options {


    display:flex;

    flex-direction:column;

    gap:14px;


}












.kcal-option {


    width:100%;


    min-height:90px;


    padding:18px 20px;


    border-radius:16px;


    border:

    1px solid rgba(255,255,255,.08);




    background:

    rgba(255,255,255,.04);




    color:white;




    display:flex;


    align-items:center;


    justify-content:space-between;




    cursor:pointer;


    transition:.25s ease;


    box-sizing:border-box;


}









.kcal-option:hover {



    background:

    rgba(14,165,233,.12);




    border-color:

    rgba(14,165,233,.45);




    transform:

    translateY(-3px);


}









/* BLOK TEKSTU */


.kcal-option div {


    display:flex;


    flex-direction:column;


    justify-content:center;


    gap:5px;


    flex:1;


    text-align:left;


}











.kcal-option strong {


    display:block;


    font-size:21px;


    line-height:1.2;


    color:#38bdf8;


}











.kcal-option span {


    display:block;


    font-size:13px;


    line-height:1.35;


    color:#94a3b8;


}









/* MAKRO */

.kcal-option small {


    display:block;


    margin-top:5px;


    font-size:12px;


    color:#cbd5e1;


}











/* STRZAŁKA */


.kcal-option i {


    font-style:normal;


    font-size:22px;


    color:#38bdf8;


    margin-left:20px;


    flex-shrink:0;


}












.kcal-close {


    position:absolute;


    right:18px;


    top:15px;




    width:35px;


    height:35px;




    border-radius:10px;




    border:

    1px solid rgba(255,255,255,.08);






    background:

    rgba(255,255,255,.05);






    color:#cbd5e1;




    font-size:22px;




    cursor:pointer;




    transition:.2s;


}









.kcal-close:hover {


    background:

    rgba(239,68,68,.15);




    color:#f87171;


}









@keyframes kcalFade {


    from {

        opacity:0;

        transform:scale(.97);

    }


    to {

        opacity:1;

        transform:scale(1);

    }


}


/* =========================
   ANIMACJA OFERT KCAL
========================= */


.kcal-preview {

    overflow:hidden;

    min-height:90px;

    position:relative;

    display:flex;

    align-items:center;

    padding:10px 0;

}



.kcal-slide {

    font-size:14px;

    line-height:1.8;

    color:#cbd5e1;

    font-weight:500;

    letter-spacing:.2px;

    opacity:1;

}



/* aktywacja animacji */

.kcal-slide.animate {


    animation:

    kcalSlideOffer .65s cubic-bezier(.22,1,.36,1);


}




@keyframes kcalSlideOffer {


    0% {


        opacity:0;


        transform:

        translateY(35px);


        filter:blur(6px);


    }



    50% {


        opacity:.6;


        transform:

        translateY(-5px);


    }



    100% {


        opacity:1;


        transform:

        translateY(0);


        filter:blur(0);


    }


}



/* pierwsza linia - kcal */

.kcal-slide::first-line {


    color:#38bdf8;

    font-weight:700;


}



/* efekt premium po najechaniu */


.kcal-preview:hover .kcal-slide {


    transform:translateX(5px);


    transition:.3s ease;


}





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


@media(max-width:768px){


.kcal-modal-card{


    padding:24px;


    border-radius:20px;


}



.kcal-modal-card h2{


    font-size:24px;


}



.kcal-option{


    padding:16px;


}



.kcal-option strong{


    font-size:19px;


}

 .kcal-preview {


        min-height:70px;


    }



    .kcal-slide {


        font-size:13px;


    }


}