/* ===========================================
   REVIEWS SLIDER BLOCK
   Pixel-art styled customer reviews carousel
   =========================================== */

.wp-block-prostovpn-reviews {
  overflow: hidden;
  
  /* Локальные переменные для цветов карточек (как у benefits) */
  /* Blue - очень тёмный полупрозрачный фон */
  --review-blue-card-light: rgba(23, 37, 84, 0.9);
  --review-blue-card-mid: rgba(15, 25, 60, 0.95);
  --review-blue-card-dark: rgba(5, 10, 35, 1);
  --review-blue-border: #60a5fa;
  
  /* Purple - очень тёмный полупрозрачный фон */
  --review-purple-card-light: rgba(59, 7, 100, 0.9);
  --review-purple-card-mid: rgba(40, 5, 70, 0.95);
  --review-purple-card-dark: rgba(20, 0, 40, 1);
  --review-purple-border: #c084fc;
  
  /* Green - очень тёмный полупрозрачный фон */
  --review-green-card-light: rgba(5, 46, 22, 0.9);
  --review-green-card-mid: rgba(2, 30, 14, 0.95);
  --review-green-card-dark: rgba(0, 15, 5, 1);
  --review-green-border: #4ade80;
  
  /* Orange/Yellow - очень тёмный полупрозрачный фон */
  --review-orange-card-light: rgba(66, 32, 6, 0.9);
  --review-orange-card-mid: rgba(45, 20, 0, 0.95);
  --review-orange-card-dark: rgba(25, 10, 0, 1);
  --review-orange-border: #fb923c;
  
  /* Cyan - очень тёмный полупрозрачный фон */
  --review-cyan-card-light: rgba(8, 51, 68, 0.9);
  --review-cyan-card-mid: rgba(5, 35, 48, 0.95);
  --review-cyan-card-dark: rgba(0, 18, 25, 1);
  --review-cyan-border: #22d3ee;
  
  /* Pink - очень тёмный полупрозрачный фон */
  --review-pink-card-light: rgba(80, 7, 36, 0.9);
  --review-pink-card-mid: rgba(55, 5, 25, 0.95);
  --review-pink-card-dark: rgba(30, 0, 15, 1);
  --review-pink-border: #f9a8d4;
  
  /* Общие значения теней */
  --card-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 6px 12px 0 0 rgba(0, 0, 0, 0.4);
  --card-inset-light: inset 0 2px 0 0 rgba(255, 255, 255, 0.1);
  --card-inset-light-hover: inset 0 2px 0 0 rgba(255, 255, 255, 0.15);
  --card-inset-dark: inset 0 -2px 0 0 rgba(0, 0, 0, 0.3);
}

/* ===========================================
   SLIDER CONTAINER
   =========================================== */

.reviews-slider {
  position: relative;
  padding: 0 var(--space-3xl);
}

.reviews-slider__track {
  display: flex;
  gap: var(--space-lg);
  will-change: transform;
}

/* Clone slides styling */
.reviews-slider__slide--clone {
  flex-shrink: 0;
}

.reviews-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}

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

.review-card {
  background: var(--color-gray-light);
  border: var(--border-width) solid var(--color-gray);
  padding: var(--space-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.review-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-shadow-hover), var(--card-inset-light-hover), var(--card-inset-dark);
}

/* Color variants - тёмные градиенты как у benefits */
.review-card--blue {
  background: linear-gradient(145deg, var(--review-blue-card-light) 0%, var(--review-blue-card-mid) 50%, var(--review-blue-card-dark) 100%);
  border-color: var(--review-blue-border);
}

.review-card--purple {
  background: linear-gradient(145deg, var(--review-purple-card-light) 0%, var(--review-purple-card-mid) 50%, var(--review-purple-card-dark) 100%);
  border-color: var(--review-purple-border);
}

.review-card--green {
  background: linear-gradient(145deg, var(--review-green-card-light) 0%, var(--review-green-card-mid) 50%, var(--review-green-card-dark) 100%);
  border-color: var(--review-green-border);
}

.review-card--orange {
  background: linear-gradient(145deg, var(--review-orange-card-light) 0%, var(--review-orange-card-mid) 50%, var(--review-orange-card-dark) 100%);
  border-color: var(--review-orange-border);
}

.review-card--cyan {
  background: linear-gradient(145deg, var(--review-cyan-card-light) 0%, var(--review-cyan-card-mid) 50%, var(--review-cyan-card-dark) 100%);
  border-color: var(--review-cyan-border);
}

.review-card--pink {
  background: linear-gradient(145deg, var(--review-pink-card-light) 0%, var(--review-pink-card-mid) 50%, var(--review-pink-card-dark) 100%);
  border-color: var(--review-pink-border);
}

/* ===========================================
   QUOTE ICON
   =========================================== */

.review-quote {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  opacity: 0.15;
  color: rgba(255, 255, 255, 0.3);
}

.review-card--blue .review-quote { color: var(--color-blue); opacity: 0.3; }
.review-card--purple .review-quote { color: var(--color-purple); opacity: 0.3; }
.review-card--green .review-quote { color: var(--color-green); opacity: 0.3; }
.review-card--orange .review-quote { color: var(--color-orange); opacity: 0.3; }
.review-card--cyan .review-quote { color: var(--color-cyan); opacity: 0.3; }
.review-card--pink .review-quote { color: var(--color-pink); opacity: 0.3; }

/* ===========================================
   STARS RATING
   =========================================== */

.review-stars {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.review-stars .star {
  color: var(--color-yellow);
  font-size: var(--text-xl);
  text-shadow: 
    1px 1px 0 var(--color-yellow-dark),
    2px 2px 0 rgba(0, 0, 0, 0.2);
  animation: star-pulse 2s ease-in-out infinite;
}

.review-stars .star:nth-child(2) { animation-delay: 0.1s; }
.review-stars .star:nth-child(3) { animation-delay: 0.2s; }
.review-stars .star:nth-child(4) { animation-delay: 0.3s; }
.review-stars .star:nth-child(5) { animation-delay: 0.4s; }

@keyframes star-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

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

.review-text {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-xl);
  flex: 1;
  line-height: 1.6;
  font-style: italic;
}

/* ===========================================
   AUTHOR SECTION
   =========================================== */

.review-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 2px dashed rgba(255, 255, 255, 0.15);
}

.review-avatar {
  width: var(--size-48);
  height: var(--size-48);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: var(--border-width) solid;
  box-shadow: 
    2px 2px 0 0 rgba(0, 0, 0, 0.3),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover .review-avatar {
  transform: rotate(-5deg) scale(1.05);
}

/* Avatar colors */
.review-avatar--blue {
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
  border-color: var(--color-blue-dark);
}
.review-avatar--purple {
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  border-color: var(--color-purple-dark);
}
.review-avatar--green {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border-color: var(--color-green-dark);
}
.review-avatar--orange {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%);
  border-color: var(--color-orange-dark);
}
.review-avatar--cyan {
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-dark) 100%);
  border-color: var(--color-cyan-dark);
}
.review-avatar--pink {
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
  border-color: var(--color-pink-dark);
}

.avatar-initials {
  color: var(--color-white);
  font-family: var(--font-pixel);
  font-size: var(--text-sm);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.review-author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.review-name {
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

.review-location {
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.location-icon {
  font-size: var(--text-sm);
}

/* ===========================================
   NAVIGATION ARROWS
   =========================================== */

.reviews-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--size-28);
  height: var(--size-28);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.reviews-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
}

.reviews-slider__arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.reviews-slider__arrow--prev {
  left: var(--space-xs);
}

.reviews-slider__arrow--next {
  right: var(--space-xs);
}

.reviews-slider__arrow svg {
  width: var(--size-10);
  height: var(--size-10);
}

/* ===========================================
   MOBILE STYLES (default, then overridden)
   =========================================== */

@media (max-width: 767px) {
  .review-card {
    padding: var(--space-lg);
  }
  
  .review-quote {
    display: none;
  }
  
  .review-stars .star {
    font-size: var(--text-md);
  }
  
  .review-text {
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
  }
  
  .review-avatar {
    width: var(--size-40);
    height: var(--size-40);
    border-width: var(--border-width-sm);
  }
  
  .avatar-initials {
    font-size: var(--text-xs);
  }
  
  .review-name {
    font-size: var(--text-base);
  }
  
  .review-location {
    font-size: var(--text-sm);
  }
}

/* ===========================================
   TABLET STYLES
   =========================================== */

@media (min-width: 768px) {
  .reviews-slider {
    padding: 0 var(--space-4xl);
  }
  
  .reviews-slider__track {
    gap: var(--space-xl);
  }
  
  .reviews-slider__slide {
    flex: 0 0 calc((100% - var(--space-xl)) / 2);
  }
  
  .review-card {
    padding: var(--space-2xl);
  }
  
  .review-stars {
    margin-bottom: var(--space-xl);
  }
  
  .review-stars .star {
    font-size: var(--text-2xl);
  }
  
  .review-text {
    margin-bottom: var(--space-2xl);
  }
  
  .review-avatar {
    width: var(--size-56);
    height: var(--size-56);
  }
  
  .avatar-initials {
    font-size: var(--text-base);
  }
  
  .reviews-slider__arrow {
    width: var(--size-36);
    height: var(--size-36);
  }
  
  .reviews-slider__arrow svg {
    width: var(--size-12);
    height: var(--size-12);
  }
}

/* ===========================================
   DESKTOP STYLES
   =========================================== */

@media (min-width: 1024px) {
  .reviews-slider {
    padding: 0 var(--space-5xl);
  }
  
  .reviews-slider__track {
    gap: var(--space-2xl);
  }
  
  .reviews-slider__slide {
    flex: 0 0 calc((100% - var(--space-2xl) * 2) / 3);
  }
  
  .review-card {
    padding: var(--space-3xl);
  }
  
  .review-quote svg {
    width: var(--size-40);
    height: var(--size-40);
  }
  
  .review-stars {
    margin-bottom: var(--space-2xl);
  }
  
  .review-text {
    margin-bottom: var(--space-3xl);
    font-size: var(--text-md);
  }
  
  .review-author {
    gap: var(--space-lg);
    padding-top: var(--space-xl);
  }
  
  .review-avatar {
    width: var(--size-64);
    height: var(--size-64);
  }
  
  .avatar-initials {
    font-size: var(--text-md);
  }
  
  .reviews-slider__arrow {
    width: var(--size-40);
    height: var(--size-40);
  }
  
  .reviews-slider__arrow svg {
    width: var(--size-16);
    height: var(--size-16);
  }
}

/* ===========================================
   REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .reviews-slider__track {
    transition: none;
  }
  
  .review-stars .star {
    animation: none;
  }
  
  .review-card,
  .review-avatar,
  .reviews-slider__arrow {
    transition: none;
  }
}