/* =====================================
   DIETETIC.ART REVIEWS UI 2026 PREMIUM
===================================== */


#reviewsBox{

width:100%;

max-width:920px;

margin:70px auto;

padding:20px;

font-family:Inter,Arial,sans-serif;

color:white;

}



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


.reviews-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:32px;


background:

linear-gradient(
145deg,
rgba(15,23,42,.95),
rgba(30,41,59,.75)
);


border:

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


border-radius:30px;


backdrop-filter:blur(25px);


box-shadow:

0 30px 90px rgba(0,0,0,.45);


margin-bottom:35px;


}


.reviews-header h2{


margin:0;


font-size:30px;


font-weight:900;


letter-spacing:-.8px;


}






/* =====================================
   SCORE
===================================== */


.reviews-score{


display:flex;

flex-direction:column;

align-items:center;


font-size:34px;


font-weight:950;


color:#fbbf24;


}



.reviews-score small{


margin-top:6px;


font-size:14px;


color:#94a3b8;


font-weight:700;


}





/* =====================================
   REVIEW CARD
===================================== */


.review-card{


position:relative;


padding:32px;


margin-bottom:22px;


border-radius:30px;



background:

linear-gradient(
145deg,
rgba(30,41,59,.9),
rgba(15,23,42,.98)
);



border:

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



box-shadow:

0 25px 70px rgba(0,0,0,.35);



transition:.35s ease;



animation:

reviewFade .4s ease;


}




.review-card:hover{


transform:

translateY(-5px);



border-color:

rgba(56,189,248,.35);



box-shadow:

0 35px 90px rgba(0,0,0,.55);


}





@keyframes reviewFade{


from{

opacity:0;

transform:translateY(25px);

}


to{

opacity:1;

transform:none;

}


}








/* =====================================
   STAR SYSTEM
===================================== */


.review-stars{


display:flex;


gap:7px;


margin-bottom:22px;


}



.star{


font-size:30px;


line-height:1;


color:#334155;


transition:.25s;


}





.star.active{


color:#fbbf24;


filter:

drop-shadow(
0 0 14px
rgba(251,191,36,.55)
);


}








/* =====================================
   REVIEW TEXT
===================================== */


.review-card p{


font-size:17px;


line-height:1.8;


color:#e2e8f0;


font-weight:500;


margin:

0 0 22px;


}








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


.review-user{


display:flex;


flex-direction:column;


gap:10px;


}




.verified-badge{


display:flex;


align-items:center;


gap:8px;


width:max-content;



padding:

8px 16px;



border-radius:999px;



background:

rgba(34,197,94,.12);



border:

1px solid rgba(34,197,94,.25);



color:#4ade80;



font-size:13px;



font-weight:800;


}





.verified-badge::before{


content:"✓";


display:flex;


align-items:center;


justify-content:center;


width:18px;


height:18px;


border-radius:50%;


background:#22c55e;


color:white;


font-size:11px;


}




.review-product{


font-size:15px;


font-weight:700;


color:#cbd5e1;


}








/* =====================================
   EMPTY
===================================== */


.no-reviews,

.reviews-loading{


text-align:center;


padding:60px;


color:#94a3b8;


font-size:16px;


}









/* =====================================
   FORM
===================================== */


.review-form{


margin-top:45px;


padding:38px;



background:


linear-gradient(
145deg,
rgba(15,23,42,.96),
rgba(30,41,59,.85)
);



border-radius:32px;



border:

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



box-shadow:

0 30px 90px rgba(0,0,0,.45);



backdrop-filter:blur(25px);


}




.review-form h3{


margin:0 0 25px;


font-size:26px;


font-weight:950;


}









/* =====================================
   SELECT JADŁOSPISU
===================================== */


.review-form select{


width:100%;


padding:17px 18px;


margin-bottom:28px;


border-radius:18px;


background:

rgba(15,23,42,.9);



border:

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



color:white;


font-size:15px;


font-weight:600;


outline:none;


cursor:pointer;



transition:.25s;


}




.review-form select:focus{


border-color:#38bdf8;


box-shadow:

0 0 25px rgba(56,189,248,.2);


}








/* =====================================
   RATING PICKER
===================================== */


.rating-picker{


display:flex;


gap:14px;


margin-bottom:28px;


}





.rating-picker span{


font-size:42px;


cursor:pointer;


color:#334155;


transition:.25s;


}





.rating-picker span:hover,

.rating-picker span.active{


color:#fbbf24;


transform:

scale(1.18);



filter:

drop-shadow(
0 0 18px
rgba(251,191,36,.55)
);


}








/* =====================================
   TEXTAREA
===================================== */


.review-form textarea{


width:100%;


min-height:150px;



padding:20px;


border-radius:22px;



background:

rgba(15,23,42,.95);



border:

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



color:white;



font-size:16px;


line-height:1.6;



resize:none;



outline:none;



box-sizing:border-box;



transition:.25s;


}





.review-form textarea:focus{


border-color:#38bdf8;



box-shadow:

0 0 30px rgba(56,189,248,.2);


}




.review-form textarea::placeholder{


color:#64748b;


}









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


.review-form button{


margin-top:22px;


width:100%;


padding:18px;


border:none;


border-radius:20px;



background:

linear-gradient(
135deg,
#2563eb,
#38bdf8
);



color:white;



font-size:17px;


font-weight:950;



cursor:pointer;



transition:.3s;


}





.review-form button:hover{


transform:

translateY(-4px);



box-shadow:

0 20px 50px rgba(37,99,235,.45);


}









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


@media(max-width:600px){



#reviewsBox{


padding:10px;


margin:35px auto;


}



.reviews-header{


flex-direction:column;


text-align:center;


padding:25px;


}



.reviews-header h2{


font-size:24px;


}



.review-card{


padding:24px;


}



.review-form{


padding:25px;


}



.rating-picker span{


font-size:34px;


}



}