/* =====================================
   SHOP SYSTEM 2026
   DIETETIC.ART PREMIUM UI
===================================== */

/* =====================================
   ANIMOWANY STATUS PŁATNOŚCI
===================================== */

.payment-status{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

    margin-top:14px;

}


.payment-status-label{

    color:#cbd5e1;

}


.payment-status-waiting{

    display:inline-flex;

    align-items:center;

    color:#e2e8f0;

    font-weight:500;

}


.payment-status-dots{

    display:inline-flex;

    width:18px;

    margin-left:2px;

}


.payment-status-dots span{

    opacity:0.2;

    animation:
        paymentDot 1.4s infinite;

}


.payment-status-dots span:nth-child(1){

    animation-delay:0s;

}


.payment-status-dots span:nth-child(2){

    animation-delay:0.2s;

}


.payment-status-dots span:nth-child(3){

    animation-delay:0.4s;

}


@keyframes paymentDot{

    0%,
    100%{

        opacity:0.2;

        transform:
            translateY(0);

    }


    40%{

        opacity:1;

        transform:
            translateY(-1px);

    }


    70%{

        opacity:0.4;

        transform:
            translateY(0);

    }

}

/* =========================
   PREMIUM MODAL BACKDROP
========================= */


.premium-lock{


position:fixed;


inset:0;


display:flex;


align-items:center;


justify-content:center;


padding:20px;


overflow-y:auto;


background:
rgba(11,18,32,.78);


backdrop-filter:
blur(18px);


z-index:999999;


}



@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}







/* =====================================
   PAYMENT TRUST BADGES
===================================== */


.payment-brands{


margin-top:35px;

padding-top:20px;


border-top:

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


color:#94a3b8;


font-size:13px;


text-align:center;


}






/* =====================================
   PREMIUM CARD 2026
===================================== */


.premium-card{


width:520px;


max-width:95vw;


max-height:98vh;


overflow-y:auto;



padding:0 38px 38px;



text-align:center;



background:


linear-gradient(

145deg,

rgba(14,165,233,.18),

rgba(15,23,42,.96)

);



border:


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



border-radius:32px;



box-shadow:


0 40px 120px rgba(0,0,0,.75),


0 0 50px rgba(14,165,233,.18);



animation:


premiumShow .35s ease;



position:relative;


}

.payment-modal .premium-card{

max-height:99vh;

display:flex;

flex-direction:column;

justify-content:flex-start;

padding-top:45px;

}

/* elegancki scrollbar */

.premium-card::-webkit-scrollbar{


width:6px;


}


.premium-card::-webkit-scrollbar-thumb{


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


border-radius:10px;


}





@keyframes premiumShow{


from{

opacity:0;

transform:

translateY(30px)
scale(.96);

}



to{

opacity:1;

transform:

translateY(0)
scale(1);

}


}







/* =========================
   TITLE
========================= */


.premium-card h2{


font-size:28px;


line-height:1.25;


margin-bottom:10px;


color:white;


}





/* =========================
   PRICE
========================= */


.premium-card h3{


font-size:32px;


margin:15px 0 25px;


color:#38bdf8;



text-shadow:

0 0 20px rgba(56,189,248,.35);



}







/* =========================
   DESCRIPTION
========================= */


.premium-card p{


color:#cbd5e1;


font-size:15px;


line-height:1.6;


}






/* =========================
   FEATURES LIST
========================= */


.premium-features{


margin:

25px 0;



padding:

20px;



background:

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



border:

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



border-radius:18px;



text-align:left;


}





.premium-features p{


margin:

10px 0;


font-size:14px;


color:#e2e8f0;


}



.food-offer .premium-features p::first-letter{

color:#38bdf8;

}


.payment-box p::first-letter{

color:inherit;

}


.payment-box strong{

color:#38bdf8;

}




/* =========================
   BUY BUTTON
========================= */


.buy-btn{


width:100%;


margin-top:15px;


padding:15px 24px;


border-radius:16px;


border:none;



background:


linear-gradient(

135deg,

#0ea5e9,

#2563eb

);



color:white;


font-size:16px;


font-weight:800;


cursor:pointer;



box-shadow:


0 15px 35px rgba(14,165,233,.3);



transition:.25s ease;



}



.buy-btn:hover{


transform:

translateY(-3px);



box-shadow:


0 20px 45px rgba(14,165,233,.45);



filter:

brightness(1.1);


}







/* =========================
   PAYMENT MESSAGE
========================= */








.shop-message h3{


margin-top:0;


font-size:20px;


color:#4ade80;


}





.shop-message strong{


color:#38bdf8;


}



.shop-message hr{


border:none;


height:1px;


background:

rgba(255,255,255,.1);


margin:

18px 0;


}














/* =========================
   PRODUCT CARD OPTIONS
========================= */


.kcal-option{


position:relative;


overflow:hidden;


background:


rgba(255,255,255,.035);



border:

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



border-radius:18px;



transition:.25s ease;



}





.kcal-option:hover{


transform:

translateY(-5px);



border-color:

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



box-shadow:


0 20px 40px rgba(14,165,233,.15);



}








/* =========================
   PRICE LABEL
========================= */


.shop-price{


display:inline-flex;


align-items:center;


gap:8px;


margin-top:12px;


font-weight:800;


font-size:16px;


color:#38bdf8;


}



.shop-price::before{


content:"";


width:8px;


height:8px;


border-radius:50%;


background:#38bdf8;



box-shadow:

0 0 15px #38bdf8;


}






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


.order-status{


display:inline-flex;


align-items:center;


gap:8px;


padding:9px 14px;


border-radius:14px;


font-size:13px;


font-weight:700;


background:

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



border:

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


}





.order-status.pending{


color:#fbbf24;


border-color:

rgba(251,191,36,.3);


}




.order-status.success{


color:#4ade80;


border-color:

rgba(74,222,128,.3);


}


/* =====================================
   PREMIUM FOOD CAROUSEL 2026
   SQUARE GLASS STYLE
===================================== */


/* =====================================
   INFINITY FOOD SLIDER 2026
===================================== */


.food-slider{

width:100%;

height:180px;

overflow:hidden;

border-radius:28px;

margin-bottom:28px;

position:relative;


mask-image:

linear-gradient(
90deg,
transparent,
black 8%,
black 92%,
transparent
);


}




.food-track{


display:flex;

gap:18px;

width:max-content;


animation:

foodInfinity 35s linear infinite;


}





.food-track img{


width:160px;

height:160px;


aspect-ratio:1;


object-fit:cover;


border-radius:26px;



border:

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



filter:

brightness(.85);



box-shadow:

0 20px 50px rgba(0,0,0,.45);



transition:.4s ease;



}



.food-track img:hover{


transform:

scale(1.12)
translateY(-8px);



filter:

brightness(1.15);



box-shadow:

0 30px 70px rgba(14,165,233,.35);



}





@keyframes foodInfinity{


0%{

transform:translateX(0);

}


100%{

transform:translateX(-600px);

}


}


/* =====================================
   PREMIUM BLOCK POPUP (BRAK DOSTĘPU)
===================================== */


.premium-modal {

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

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

    backdrop-filter:
    blur(18px);

    z-index:9999999;

    animation:fadeIn .25s ease;

}


.premium-modal .premium-card {

    width:520px;

    max-width:95vw;

    padding:38px;

}


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


@media(max-width:600px){


.premium-card{


padding:

30px 20px;


border-radius:22px;


}



.premium-card h2{


font-size:23px;


}



.premium-card h3{


font-size:28px;


}



.shop-message{


right:20px;


bottom:20px;


width:auto;


}



}