/* Base styles shared by both slider and grid layouts */

/* Common review item styles */
.rad-review-item {
  background-image: linear-gradient(180deg, #006394 0%, #222D68 100%);
  border-radius: 10px;
  overflow: hidden;
  padding: 32px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rad-review-item-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.rad-review-text {
  font-size: 16px !important;
}

.rad-review-item * {
  color: #fff !important;
}

.rad-review-rating {
  font-size: 20px;
}

.rad-review-rating > span {
  margin: 0 2px !important;
}

.rad-review-image > img {
  width: 50px !important;
  margin: auto;
  margin-bottom: 2px;
}

.rad-reviewer-name {
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-transform: capitalize !important;
}

/* Reviews Summary Styles */
#birdseye-review-total {
  text-align: center;
  margin-bottom: 20px;
}

#birdseye-review-total .rad-summary-rating {
  font-size: 24px;
  color: #006394;
  margin-bottom: 8px;
}

/* Percentage-based star fills for summary rating */
.rad-star-container {
  display: inline-flex;
  gap: 2px;
}

.rad-summary-star {
  position: relative;
  color: #ddd; /* Empty star color */
  display: inline-block;
}

.rad-summary-star::before {
  content: "★";
  position: absolute;
  top: 0;
  left: 0;
  color: #006394; /* Filled star color */
  overflow: hidden;
  width: var(--fill-width, 0%);
}

.rad-summary-star:after {
  content: "★";
  position: absolute;
  top: 0;
  left: 0;
  color: #222222;
  overflow: hidden;
  height: 102% !important;
  width: 102% !important;
  z-index: -1;
}

/* Dynamic fill percentages using CSS custom properties */
.rad-summary-star[data-fill="0"]::before { --fill-width: 0%; }
.rad-summary-star[data-fill="1"]::before { --fill-width: 1%; }
.rad-summary-star[data-fill="2"]::before { --fill-width: 2%; }
.rad-summary-star[data-fill="3"]::before { --fill-width: 3%; }
.rad-summary-star[data-fill="4"]::before { --fill-width: 4%; }
.rad-summary-star[data-fill="5"]::before { --fill-width: 5%; }
.rad-summary-star[data-fill="6"]::before { --fill-width: 6%; }
.rad-summary-star[data-fill="7"]::before { --fill-width: 7%; }
.rad-summary-star[data-fill="8"]::before { --fill-width: 8%; }
.rad-summary-star[data-fill="9"]::before { --fill-width: 9%; }
.rad-summary-star[data-fill="10"]::before { --fill-width: 10%; }
.rad-summary-star[data-fill="11"]::before { --fill-width: 11%; }
.rad-summary-star[data-fill="12"]::before { --fill-width: 12%; }
.rad-summary-star[data-fill="13"]::before { --fill-width: 13%; }
.rad-summary-star[data-fill="14"]::before { --fill-width: 14%; }
.rad-summary-star[data-fill="15"]::before { --fill-width: 15%; }
.rad-summary-star[data-fill="16"]::before { --fill-width: 16%; }
.rad-summary-star[data-fill="17"]::before { --fill-width: 17%; }
.rad-summary-star[data-fill="18"]::before { --fill-width: 18%; }
.rad-summary-star[data-fill="19"]::before { --fill-width: 19%; }
.rad-summary-star[data-fill="20"]::before { --fill-width: 20%; }
.rad-summary-star[data-fill="21"]::before { --fill-width: 21%; }
.rad-summary-star[data-fill="22"]::before { --fill-width: 22%; }
.rad-summary-star[data-fill="23"]::before { --fill-width: 23%; }
.rad-summary-star[data-fill="24"]::before { --fill-width: 24%; }
.rad-summary-star[data-fill="25"]::before { --fill-width: 25%; }
.rad-summary-star[data-fill="26"]::before { --fill-width: 26%; }
.rad-summary-star[data-fill="27"]::before { --fill-width: 27%; }
.rad-summary-star[data-fill="28"]::before { --fill-width: 28%; }
.rad-summary-star[data-fill="29"]::before { --fill-width: 29%; }
.rad-summary-star[data-fill="30"]::before { --fill-width: 30%; }
.rad-summary-star[data-fill="31"]::before { --fill-width: 31%; }
.rad-summary-star[data-fill="32"]::before { --fill-width: 32%; }
.rad-summary-star[data-fill="33"]::before { --fill-width: 33%; }
.rad-summary-star[data-fill="34"]::before { --fill-width: 34%; }
.rad-summary-star[data-fill="35"]::before { --fill-width: 35%; }
.rad-summary-star[data-fill="36"]::before { --fill-width: 36%; }
.rad-summary-star[data-fill="37"]::before { --fill-width: 37%; }
.rad-summary-star[data-fill="38"]::before { --fill-width: 38%; }
.rad-summary-star[data-fill="39"]::before { --fill-width: 39%; }
.rad-summary-star[data-fill="40"]::before { --fill-width: 40%; }
.rad-summary-star[data-fill="41"]::before { --fill-width: 41%; }
.rad-summary-star[data-fill="42"]::before { --fill-width: 42%; }
.rad-summary-star[data-fill="43"]::before { --fill-width: 43%; }
.rad-summary-star[data-fill="44"]::before { --fill-width: 44%; }
.rad-summary-star[data-fill="45"]::before { --fill-width: 45%; }
.rad-summary-star[data-fill="46"]::before { --fill-width: 46%; }
.rad-summary-star[data-fill="47"]::before { --fill-width: 47%; }
.rad-summary-star[data-fill="48"]::before { --fill-width: 48%; }
.rad-summary-star[data-fill="49"]::before { --fill-width: 49%; }
.rad-summary-star[data-fill="50"]::before { --fill-width: 50%; }
.rad-summary-star[data-fill="51"]::before { --fill-width: 51%; }
.rad-summary-star[data-fill="52"]::before { --fill-width: 52%; }
.rad-summary-star[data-fill="53"]::before { --fill-width: 53%; }
.rad-summary-star[data-fill="54"]::before { --fill-width: 54%; }
.rad-summary-star[data-fill="55"]::before { --fill-width: 55%; }
.rad-summary-star[data-fill="56"]::before { --fill-width: 56%; }
.rad-summary-star[data-fill="57"]::before { --fill-width: 57%; }
.rad-summary-star[data-fill="58"]::before { --fill-width: 58%; }
.rad-summary-star[data-fill="59"]::before { --fill-width: 59%; }
.rad-summary-star[data-fill="60"]::before { --fill-width: 60%; }
.rad-summary-star[data-fill="61"]::before { --fill-width: 61%; }
.rad-summary-star[data-fill="62"]::before { --fill-width: 62%; }
.rad-summary-star[data-fill="63"]::before { --fill-width: 63%; }
.rad-summary-star[data-fill="64"]::before { --fill-width: 64%; }
.rad-summary-star[data-fill="65"]::before { --fill-width: 65%; }
.rad-summary-star[data-fill="66"]::before { --fill-width: 66%; }
.rad-summary-star[data-fill="67"]::before { --fill-width: 67%; }
.rad-summary-star[data-fill="68"]::before { --fill-width: 68%; }
.rad-summary-star[data-fill="69"]::before { --fill-width: 69%; }
.rad-summary-star[data-fill="70"]::before { --fill-width: 70%; }
.rad-summary-star[data-fill="71"]::before { --fill-width: 71%; }
.rad-summary-star[data-fill="72"]::before { --fill-width: 72%; }
.rad-summary-star[data-fill="73"]::before { --fill-width: 73%; }
.rad-summary-star[data-fill="74"]::before { --fill-width: 74%; }
.rad-summary-star[data-fill="75"]::before { --fill-width: 75%; }
.rad-summary-star[data-fill="76"]::before { --fill-width: 76%; }
.rad-summary-star[data-fill="77"]::before { --fill-width: 77%; }
.rad-summary-star[data-fill="78"]::before { --fill-width: 78%; }
.rad-summary-star[data-fill="79"]::before { --fill-width: 79%; }
.rad-summary-star[data-fill="80"]::before { --fill-width: 80%; }
.rad-summary-star[data-fill="81"]::before { --fill-width: 81%; }
.rad-summary-star[data-fill="82"]::before { --fill-width: 82%; }
.rad-summary-star[data-fill="83"]::before { --fill-width: 83%; }
.rad-summary-star[data-fill="84"]::before { --fill-width: 84%; }
.rad-summary-star[data-fill="85"]::before { --fill-width: 85%; }
.rad-summary-star[data-fill="86"]::before { --fill-width: 86%; }
.rad-summary-star[data-fill="87"]::before { --fill-width: 87%; }
.rad-summary-star[data-fill="88"]::before { --fill-width: 88%; }
.rad-summary-star[data-fill="89"]::before { --fill-width: 89%; }
.rad-summary-star[data-fill="90"]::before { --fill-width: 90%; }
.rad-summary-star[data-fill="91"]::before { --fill-width: 91%; }
.rad-summary-star[data-fill="92"]::before { --fill-width: 92%; }
.rad-summary-star[data-fill="93"]::before { --fill-width: 93%; }
.rad-summary-star[data-fill="94"]::before { --fill-width: 94%; }
.rad-summary-star[data-fill="95"]::before { --fill-width: 95%; }
.rad-summary-star[data-fill="96"]::before { --fill-width: 96%; }
.rad-summary-star[data-fill="97"]::before { --fill-width: 97%; }
.rad-summary-star[data-fill="98"]::before { --fill-width: 98%; }
.rad-summary-star[data-fill="99"]::before { --fill-width: 99%; }
.rad-summary-star[data-fill="100"]::before { --fill-width: 100%; }

#birdseye-review-total p {
  margin: 0;
  font-size: 16px;
  color: #333;
}

/* Error and notice styles */
.rad-birdseye-error,
.rad-birdseye-notice {
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  margin: 20px 0;
}

.rad-birdseye-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.rad-birdseye-notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}