:root {
  
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --star-active: #fbbf24;
  --star-inactive: #e2e8f0;
  --shadow: 0px 0px 8px 0px rgba(158, 160, 183, 0.32);

}

.rew-m-btn {
  
  display: inline-block;
  font-size: 12px;
  margin-right: 0px;
  margin-bottom: 2px;
  border-radius: 8px;
  padding: 5px 0.5em;
  background-color: #EDEDED;
  color: #4C5157;
  
}

.reviews-grid {
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  margin-top: 11px;

}

@media (max-width: 680px) {
  
  .reviews-grid { 
    
    grid-template-columns: 1fr; 
    margin-left: 7px;
    margin-right: 7px;
    margin-bottom: 11px;
  
  }

}

.review-card {
  
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-sizing: border-box !important;

}

.review-card:hover {

  box-shadow: 0px 0px 8px 0px rgba(158, 160, 183, 0.50);

}

.review-media-wrapper {
  
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 10px;
  background: #e2e8f0;
  padding: 8px 1em;

}

.review-media-wrapper span {
  
  display: inline-block;
  padding: 2px 0.6em;
  color: white;
  background-color: #44565E;
  border-radius: 10px;
  font-size: 12px;

}

.media-play-icon {
      
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%,-50%);
  width: 56px; 
  height: 56px;
  background: rgba(0,0,0,.6);
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: #fff; 
  font-size: 28px; 
  pointer-events: none;
    
}

.review-header {
      
  display: flex; 
  align-items: center; 
  gap: 1rem; 
  margin-bottom: .75rem;
  position: relative;
    
}

.review-author-info h4 { 
  
  margin: 0; 
  font-size: 13px; 
  line-height: 1.3; 

}

.review-date { 
  
  color: var(--text-secondary); 
  font-size: 11px; 
  margin-top: .2rem; 

}

.reviews-stars { 
  
  display: flex; 
  gap: 4px; 
  position: absolute;
  right: 5px;
  top: 10px;

}

.reviews-star { 
  
  width: 18px;  
  height: 18px; 
  color: var(--star-inactive); 

}

.reviews-star.active { 
  
  color: var(--star-active); 

}

.review-text { 
  
  line-height: 1.6;   
  color: #334155; 
  margin: 0; 

}

.lightbox-overlay {
      
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9999;
  display: none; 
  align-items: center; 
  justify-content: center;
  padding: 1rem;
    
}

.lightbox-overlay.active { 
  
  display: flex; 

}

.lightbox-content {
  
  position: relative;
  max-width: 90vw; 
  max-height: 85vh;
  border-radius: 12px; 
  overflow: hidden; 
  background: #000;
    
}

.lightbox-img, .lightbox-video {
      
  width: 100%; 
  height: auto; 
  display: block; 
  max-height: 80vh;
    
}

.lb-close {
      
  position: absolute; 
  top: 1rem; 
  right: 1rem;
  background: none; 
  border: none; 
  color: #fff;
  font-size: 28px; 
  cursor: pointer; 
  z-index: 10; 
  opacity: .8;
    
}

.lb-nav {
      
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  background: rgba(255,255,255,.2); 
  border: none; 
  color: #fff;      
  width: 44px; 
  height: 44px; 
  border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(4px);
  font-size: 22px; 
  z-index: 10;
    
}
    
.lb-prev { 
  
  left: 1rem; 

}
    
.lb-next { 
  
  right: 1rem; 

}
    
.lb-counter {
      
  position: absolute; 
  bottom: 1rem; 
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.9); 
  background: rgba(0,0,0,.5);
  padding: 4px 10px; 
  border-radius: 6px; 
  font-size: .9rem;
    
}

.review-avatar {
  
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  object-fit: cover;

}

.rew-star-rating {
  
  margin-top: 5px;
  margin-bottom: 18px;
  margin-left: -5px;

}

.rew-star {

  color: #DBDBDB;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 0 rgba(0,0,0,0);
  user-select: none;
  -webkit-user-select: none;
  outline: none;

}

.rew-star:hover {
    
  transform: scale(1.2) rotate(10deg);
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.3);

}

.rew-star.selected {
    
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255,215,0,0.3);
  animation: starPop 0.3s ease;
  outline: none;

}

.rew-star:hover ~ .rew-star {

  text-shadow: none;

}

@keyframes starPop {
    
  0% { transform: scale(0.8); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }

}

#rating-value {
    
  display: none;

}

.rew-active {
  
  background: linear-gradient(to top left, #BB4BE8, #4B53E8); 
  color: white;
  
}

.rew-active .review-date {
  
  color: #D2D2D2;
  
}

.rew-active .time {
  
  color: #D2D2D2;
 
}

.rew-active .review-text {
  
  color: #ffffff;
  
}

.rew-active .rew-m-btn {
  
  background: rgba(0,0,0,0.5);
  color: #ffffff;
  
}

.rew-active .review-media-wrapper {
  
  background: rgba(0,0,0,0.2);
  color: #ffffff;
  
}