/*

   Title: Reviews
   Author: QBIT
   Date: 18/08/2024

   File path: ../../../../uploads/

*/

/* Review styles */
#reviews {
    background: #f8f8f8;
    padding: 30px 0;
}

#reviews .main {
  align-items: center;
  justify-content: center;
}

#reviews .main {
  text-align: center;
}

#reviews .main .review .rating {
  margin: 20px auto 20px;
}

.review {
  flex: 0 0 calc(25% - 20px); /* Flex styles */
  height: 200px;
  overflow-y: auto;
  background-color: #f0f0f0;
  margin: 10px;
  padding: 10px;
}

.rating {
	width: 200px;
	height: 35px;
	background: url('../../../../uploads/svg/rating.svg') center center / 200px no-repeat;
	display: block;
	margin: 0 0 20px 0;
}

.name {
	font-weight: 700;
}

.rate {
    display: flex;
    flex-direction: row-reverse; /* Reverse the order of elements */
    height: 46px;
    padding: 0 10px;
    justify-content: center; /* Center the stars */
    align-items: center; /* Align stars vertically */
}

.rate:not(:checked) > input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked) > label {
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 40px; /* Increased font size by 50% */
    color: #ccc;
    text-align: center; /* Ensure proper alignment */
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #ffc700;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* Modal styles */
#reviewModal .col-2 {
  background: #fff;
  padding: 20px;
}

/* Media queries */
@media (max-width: 64em) 
{

  /* Review styles */
  .review {
    width: 100%;
  }

  /* Modal styles */
  #reviewModal .col-2 {
    width: 90%;
  }

}