/* =====================================================
   DIETETIC.ART
   REDUCTION GUIDE 2026
   PREMIUM UI
===================================================== */



#reductionGuide,
#massGuide{

width:100%;

margin:40px auto;

padding:0 15px;

}





.reduction-guide-card,
.mass-guide-card{


max-width:900px;

margin:auto;

background:

linear-gradient(
145deg,
rgba(255,255,255,0.14),
rgba(255,255,255,0.04)
);


border:

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


backdrop-filter:

blur(20px);


-webkit-backdrop-filter:

blur(20px);


border-radius:32px;


padding:35px;


box-shadow:

0 25px 70px rgba(0,0,0,0.25);


animation:

guideFade .7s ease;



}




@keyframes guideFade{


from{

opacity:0;

transform:translateY(25px);

}


to{

opacity:1;

transform:translateY(0);

}


}








/* HEADER */


.guide-top{


display:flex;

align-items:center;

gap:20px;

margin-bottom:35px;


}



.guide-fire{


width:70px;

height:70px;


display:flex;

align-items:center;

justify-content:center;


font-size:38px;


background:

rgba(255,255,255,0.12);


border-radius:22px;


box-shadow:

0 10px 30px rgba(255,120,0,.25);



}





.guide-top h2{


margin:0;

font-size:32px;

font-weight:800;


}





.guide-top p{


margin-top:8px;

opacity:.8;


}








/* RESULT */


.guide-result{


display:flex;

align-items:center;

justify-content:center;

gap:25px;


margin:30px 0;



}




.guide-weight{


background:

rgba(255,255,255,0.1);


padding:20px 35px;


border-radius:24px;


text-align:center;



}





.guide-weight span{


display:block;

font-size:13px;

opacity:.7;


}



.guide-weight strong{


font-size:35px;

display:block;

margin-top:5px;


}





.guide-arrow{


font-size:35px;

opacity:.6;


}








/* TIME */


.guide-time{


display:flex;

align-items:center;

justify-content:center;

gap:12px;


background:

rgba(255,255,255,0.08);


padding:18px;


border-radius:20px;


margin-bottom:25px;



}




.guide-time strong{


font-size:25px;


}






.guide-time span{


opacity:.75;


}








/* MESSAGE */


.guide-message{


font-size:15px;

line-height:1.6;


opacity:.85;


}




.guide-divider{


height:1px;

background:

rgba(255,255,255,.15);


margin:35px 0;


}









/* STEPS */


.guide-step{


display:flex;


gap:20px;


padding:25px 0;


}





.step-icon{


width:55px;

height:55px;


flex-shrink:0;


display:flex;

align-items:center;

justify-content:center;


font-size:28px;


background:

rgba(255,255,255,.12);


border-radius:18px;


}




.guide-step h3{


margin-top:0;

font-size:24px;


}





.guide-step p{


line-height:1.6;

opacity:.85;


}








/* LIST */


.guide-list{


display:grid;

gap:10px;


margin:20px 0;


}



.guide-list div{


padding:12px 15px;


background:

rgba(255,255,255,.08);


border-radius:14px;


font-weight:600;


}








/* DEFICIT */


.guide-deficit{


background:

rgba(255,255,255,.08);


padding:25px;


border-radius:25px;


margin:25px 0;


}




.guide-deficit h3{


margin-top:0;


}




.deficit-box{


font-size:32px;


font-weight:900;


text-align:center;


padding:20px;


margin:20px 0;


border-radius:20px;


background:

rgba(255,255,255,.12);


}









/* DIETY BUTTON */


.guide-diet-btn{


display:inline-flex;


margin-top:20px;


padding:15px 30px;


border-radius:18px;


text-decoration:none;


font-weight:700;


background:

rgba(255,255,255,.15);


color:inherit;


transition:.3s;


}



.guide-diet-btn:hover{


transform:translateY(-3px);


}









/* STEPS RANGE */


.steps-range{


margin:20px 0;


padding:20px;


border-radius:22px;


text-align:center;


font-size:36px;


font-weight:900;


background:

rgba(255,255,255,.12);


}



.steps-range span{


display:block;


font-size:15px;


font-weight:500;


opacity:.8;


}









/* MAIN CTA */


.guide-start-btn{


width:100%;


margin-top:30px;


padding:20px;


border:none;


border-radius:24px;


font-size:20px;


font-weight:800;


cursor:pointer;



background:

linear-gradient(
135deg,
#ff7a18,
#ffb347
);



color:white;



box-shadow:

0 15px 40px rgba(255,120,0,.35);



transition:.3s;


}





.guide-start-btn:hover{


transform:translateY(-4px);


box-shadow:

0 20px 50px rgba(255,120,0,.5);



}








/* FOOTER FLOW */


.guide-footer{


margin-top:35px;


padding:20px;


border-radius:20px;


text-align:center;


font-weight:700;


line-height:2;


background:

rgba(255,255,255,.08);


}









/* MOBILE */


@media(max-width:700px){



.reduction-guide-card{


padding:22px;

border-radius:25px;


}




.guide-top{


align-items:flex-start;


}



.guide-top h2{


font-size:25px;


}



.guide-result{


gap:10px;


}



.guide-weight{


padding:15px;


}



.guide-weight strong{


font-size:25px;


}




.guide-arrow{


font-size:25px;


}



.guide-step{


gap:15px;


}



.guide-step h3{


font-size:20px;


}



.steps-range{


font-size:28px;


}



}