/* Review Widget */

.review-widget{

position:fixed;

bottom:20px;

right:20px;

width:260px;

background:#fff;

border-radius:12px;

padding:15px;

box-shadow:0 4px 20px rgba(0,0,0,.15);

z-index:9999;

transition:.3s;

}

/* Header */

.widget-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.widget-header button{

border:none;

background:none;

font-size:24px;

cursor:pointer;

}

/* Open Button */

#openWidgetBtn{

display:none;

position:fixed;

bottom:20px;

right:20px;

padding:10px 15px;

border:none;

border-radius:30px;

background:#0066ff;

color:white;

cursor:pointer;

z-index:9999;

}

/* Rating */

.rating-row{

display:flex;

align-items:center;

gap:10px;

}

#ratingNumber{

font-size:42px;

font-weight:bold;

}

#ratingStars{

font-size:22px;

color:gold;

}

#reviewCount{

margin-top:10px;

cursor:pointer;

color:#0066ff;

font-weight:600;

}

/* Review Panel */

.review-panel{

position:fixed;

top:0;

right:-100%;

width:450px;

height:100vh;

background:white;

box-shadow:-5px 0 20px rgba(0,0,0,.2);

transition:right .4s ease;

overflow-y:auto;

z-index:10000;

}

.review-panel.active{

right:0;

}




.review-panel.active{

right:0;

}

.panel-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

border-bottom:1px solid #ddd;

}

.panel-header button{

border:none;

background:none;

font-size:24px;

cursor:pointer;

}

/* Mobile */

@media(max-width:768px){

.review-widget{

width:220px;

bottom:10px;

right:10px;

}

.review-panel{

width:100%;

}

#ratingNumber{

font-size:34px;

}

#ratingStars{

font-size:18px;

}

}


#reviewOverlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.4);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

#reviewOverlay.active{

opacity:1;

visibility:visible;

}




@media (max-width:1024px){

.review-widget{

width:220px;

bottom:15px;

right:15px;

}

.review-panel{

width:85%;

}

}

@media (max-width:768px){

.review-widget{

width:190px;

bottom:10px;

right:10px;

padding:12px;

}

.review-panel{

width:100%;

}

#ratingNumber{

font-size:30px;

}

#ratingStars{

font-size:18px;

}

.widget-header h3{

font-size:16px;

}

}


#reviewsContainer{

padding:20px;

}



.review-item{


background:#f8f8f8;

padding:15px;

margin-bottom:15px;

border-radius:10px;


}



.review-name{

font-weight:bold;

font-size:18px;


}



.review-stars{


color:gold;

margin:8px 0;


}



.no-review{


text-align:center;

padding:20px;

color:#777;


}


.review-form{

max-width:400px;

padding:20px;

}


.review-form input,
.review-form textarea{

width:100%;

padding:10px;

margin:10px 0;

}


.stars span{

font-size:30px;

cursor:pointer;

color:#ccc;

}


.stars span.active{
color: #ffc107; /* inactive star */


}


.review-date{
  font-size:12px;
  color:#777;
  margin-bottom:8px;
}

.review-item{

display:flex;

gap:15px;

padding:15px;

}


.review-item img{

width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

}


.hidden-review{

display:none;

}



/* ==========================
   COMPACT LEAVE REVIEW CARD
========================== */

.review-form{

width:100%;

max-width:330px;

margin:25px auto;

padding:18px;

background:white;

border-radius:15px;

box-shadow:
0 8px 25px rgba(0,0,0,.12);

}


/* Title */

.review-form h2{

text-align:center;

font-size:20px;

margin-bottom:15px;

color:#222;

}


/* Inputs */

.review-form input,
.review-form textarea{


width:90%;

padding:10px 12px;

margin-bottom:10px;

border-radius:8px;

border:1px solid #ddd;

font-size:13px;

outline:none;

background:#fafafa;

}


.review-form input:focus,
.review-form textarea:focus{


border-color:#4285f4;

background:white;

}



/* Comment box */

.review-form textarea{

height:80px;

resize:none;

}


/* Upload */

.review-form input[type="file"]{

font-size:12px;

padding:4px;

}



/* Stars */

.stars{

display:flex;

justify-content:center;

gap:5px;

margin:8px 0 15px;
 
  cursor: pointer;

  font-size: 25px;

}


.stars span{


font-size:26px;

color:#ddd;

cursor:pointer;



color: #ccc; /* inactive star */
  transition: 0.2s ease;

}


.stars span:hover,
.stars span:hover ~ span,
.stars span.active,
.stars span.active ~ span{

color:#ffc107;

}



/* Button */

#submitReview{


width:100%;

padding:10px;

border:none;

border-radius:20px;

background:#4285f4;

color:white;

font-size:14px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}


#submitReview:hover{

transform:scale(1.03);

}



/* Mobile */

@media(max-width:600px){


.review-form{

max-width:300px;

padding:15px;

}


.review-form h2{

font-size:18px;

}


.stars span{

font-size:23px;

}

}


/* ==========================
   SHOW MORE REVIEWS BUTTON
========================== */

#showMore{

display:block;

margin:20px auto;

padding:10px 25px;

border:none;

border-radius:25px;

background:#4285f4;

color:white;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:
0 5px 15px rgba(66,133,244,.25);

}


/* Hover */

#showMore:hover{

background:#3367d6;

transform:translateY(-2px);

box-shadow:
0 8px 20px rgba(66,133,244,.35);

}



/* When clicked */

#showMore:active{

transform:scale(.95);

}



/* Mobile */

@media(max-width:600px){


#showMore{

width:90%;

font-size:13px;

padding:9px;

}


}


/* Open Review Button */

#openReviewForm{


display:block;

margin:20px auto;

padding:12px 25px;

border:none;

border-radius:25px;

background:#4285f4;

color:white;

font-size:14px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}



#openReviewForm:hover{

transform:scale(1.05);

}



/* Hidden Review Form */

#reviewFormBox{


display:none;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);


background:white;

z-index:9999;


}


#reviewFormBox.active{

display:block;

}



/* Close Button */

#closeReviewForm{


position:absolute;

right:15px;

top:10px;


border:none;

background:none;

font-size:20px;

cursor:pointer;

}

.hidden-review {
  display: none;
}