/*---------------------------------
------------- Animated Reviews Widget Style ----------
--------------------------------------*/
.mediarest-reviews-animated {
  background: no-repeat center center;
  background-size: cover;
  padding: 50px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mediarest-reviews-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Star Rating Styles */
.review-rating-stars {
  text-align: center;
  margin-bottom: 15px;
}

.star {
  font-size: 24px;
  color: #ddd;
  margin: 0 2px;
  transition: color 0.3s ease;
}

.star.filled {
  color: #ffd700;
}

/* Animation Styles - Desktop Only */
.animated-reviews-container {
  position: relative;
  height: 600px;
  perspective: 1000px;
}

/* Ensure desktop styles don't affect mobile */
@media (min-width: 768px) {
  .animated-reviews-container {
    height: 600px;
  }
  
  .animated-review-active {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    width: 450px;
    text-align: center;
    /* Box shadow will be controlled by Elementor */
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    z-index: 10;
  }
  
  .animated-review-active-image-container {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid rgba(0, 191, 255, 0.7);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.4);
    transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
  }
  
  /* Position variants for active avatar */
  .animated-review-active-image-container[style*="top:"] {
    bottom: auto;
  }
  
  .animated-review-active-image-container[style*="bottom:"] {
    top: auto;
  }
  

  
  .animated-review-item {
    position: absolute;
    cursor: pointer;
    border: 2px solid rgba(0, 191, 255, 0.5);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.3);
    z-index: 1;
  }
}

.animated-reviews-main {
  position: relative;
  width: 100%;
  height: 100%;
}

.animated-reviews-thumbnails {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Desktop styles will be applied via media query */

/* Default hover effect removed - now controlled by Elementor settings */

.animated-review-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Desktop styles will be applied via media query */

.review-content-wrapper {
  position: relative;
  z-index: 2;
}

.animated-review-active-text {
  font-size: 18px;
  color: #fff;
  line-height: 1.8;
  margin-bottom: 20px;
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.3s;
}

.animated-review-active-name {
  font-size: 16px;
  color: #00bfff;
  font-weight: bold;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.4s;
}

/* Desktop styles will be applied via media query */

/* Avatar position variants */
.animated-review-active-image-container[style*="top:"] {
  bottom: auto;
}

.animated-review-active-image-container[style*="bottom:"] {
  top: auto;
}

.animated-review-active-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure border is visible when Elementor sets only width/color */
.animated-review-active-image-container {
  border-style: solid;
}

/* Ensure avatar items show Elementor border width/color across breakpoints */
.animated-review-item {
  border-style: solid;
}

/* Custom Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.6);
    transform: scale(1.05);
  }
}

@keyframes slideIn {
  to {
    transform: translateX(-50%) scale(1);
    bottom: -30px;
  }
}

/* New Animation Keyframes */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 191, 255, 0.8), 0 0 60px rgba(0, 191, 255, 0.6);
    transform: scale(1.1);
  }
}

/* New Normal State Animations */
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Normal State Animation Classes - These will be applied via JavaScript */
.animated-review-item.animation-float {
  animation: float 3s ease-in-out infinite;
}

.animated-review-item.animation-pulse {
  animation: pulse 3s ease infinite;
}

.animated-review-item.animation-bounce {
  animation: bounce 3s ease infinite;
}

.animated-review-item.animation-rotate {
  animation: rotate 3s linear infinite;
}

.animated-review-item.animation-glow {
  animation: glow 3s ease infinite;
}

.animated-review-item.animation-wave {
  animation: wave 3s ease-in-out infinite;
}

.animated-review-item.animation-shake {
  animation: shake 3s ease infinite;
}

/* Ensure hover effects work with normal animations */
.animated-review-item:hover {
  animation-play-state: paused !important;
}

/* Hover Animation Classes - These override normal animations during hover */
.animated-review-item.hover-scale:hover {
  transform: scale(1.2) !important;
  animation-play-state: paused !important;
}

.animated-review-item.hover-rotate:hover {
  transform: rotateY(180deg) !important;
  animation-play-state: paused !important;
}

.animated-review-item.hover-scale-rotate:hover {
  transform: scale(1.2) rotateY(180deg) !important;
  animation-play-state: paused !important;
}

.animated-review-item.hover-bounce:hover {
  animation: bounce 0.6s ease !important;
}

.animated-review-item.hover-glow:hover {
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.8) !important;
  animation-play-state: paused !important;
}

/* Active Avatar Animation Classes */
.animated-review-active-image-container.animation-pulse {
  animation: activePulse 2s ease infinite !important;
}

.animated-review-active-image-container.animation-bounce {
  animation: activeBounce 2s ease infinite !important;
}

.animated-review-active-image-container.animation-glow {
  animation: activeGlow 2s ease infinite !important;
}

.animated-review-active-image-container.animation-rotate {
  animation: activeRotate 2s ease infinite !important;
}

/* Active Avatar specific keyframes that preserve position */
@keyframes activePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.4);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 191, 255, 0.6);
  }
}

@keyframes activeBounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40%, 43% {
    transform: translateX(-50%) translateY(-20px);
  }
  70% {
    transform: translateX(-50%) translateY(-10px);
  }
  90% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes activeGlow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.4), 0 0 20px rgba(0, 191, 255, 0.3);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(0, 191, 255, 0.6), 0 0 40px rgba(0, 191, 255, 0.5);
  }
}

@keyframes activeRotate {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}



/* Default Avatar Positions */
.animated-review-item:nth-child(1) { top: 15%; left: 10%; }
.animated-review-item:nth-child(2) { top: 70%; left: 15%; }
.animated-review-item:nth-child(3) { top: 30%; left: 80%; }
.animated-review-item:nth-child(4) { top: 75%; left: 85%; }
.animated-review-item:nth-child(5) { top: 20%; left: 20%; }
.animated-review-item:nth-child(6) { top: 65%; left: 75%; }

/* Mobile Styles - Fixed and Responsive */
@media (max-width: 767px) {
  .animated-reviews-container {
    height: auto !important;
    padding: 20px 0 !important;
    min-height: 500px !important;
  }
  
  .animated-review-active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 90% !important;
    max-width: 400px !important;
    margin: 20px auto !important;
    padding: 30px 20px !important;
    min-height: 200px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* Box shadow will be controlled by Elementor */
    order: 2 !important;
  }
  
  .animated-reviews-thumbnails {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .animated-review-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 5px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    /* Keep Elementor styles but force layout */
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    /* Remove only positioning, keep other styles */
    border-radius: 50% !important;
  }
  
  /* Remove default hover transform to allow Elementor styles */
  
  .animated-review-item:active {
    /* Allow Elementor active styles to work */
    transform: scale(1.1) !important;
  }
  
  /* Fix for Elementor default images */
  .animated-review-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
  }
  
  .animated-review-active-image-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    /* transform: none !important; */
    margin: 20px auto 0 auto !important;
    /* Remove forced size - let Elementor control */
    /* Remove forced border - let Elementor control */
    /* Remove forced shadow - let Elementor control */
    order: 3 !important;
    overflow: hidden !important;
  }
  

  
  /* Fix for main avatar image */
  .animated-review-active-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
  }
  
  .animated-review-active-text {
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    text-align: center !important;
    font-weight: 400 !important;
  }
  
  .animated-review-active-name {
    font-size: 18px !important;
    color: #00bfff !important;
    font-weight: bold !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  
  .review-rating-stars {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .star {
    font-size: 20px !important;
    color: #ddd !important;
    margin: 0 3px !important;
  }
  
  .star.filled {
    color: #ffd700 !important;
  }
  
  /* Mobile Layout Order */
  .animated-reviews-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
  }
  
  /* Ensure proper spacing */
  .animated-reviews-thumbnails {
    margin-bottom: 20px !important;
  }
  
  .animated-review-active {
    margin: 20px auto !important;
  }
  
  .animated-review-active-image-container {
		margin: auto 0px 14px 140px !important;    
	  border-radius: 50% !important;
  }
  
  /* Allow Elementor styles to work on mobile */
  /* .animated-review-item { */
    /* Keep Elementor border, shadow, size, and other styles */
    /* Only force layout positioning */
    /* position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important; */
  /* } */
  
  /* Ensure Elementor animations work on mobile */
  /* Allow Elementor to control animation play state on mobile */
  
  /* Allow Elementor hover effects to work */
  /* Remove mobile hover positioning override */
  
  /* Ensure Elementor custom styles are preserved */
  .animated-review-item[style*="border"] {
    /* Keep custom border styles from Elementor */
  }
  
  .animated-review-item[style*="box-shadow"] {
    /* Keep custom shadow styles from Elementor */
  }
  
  .animated-review-item[style*="width"] {
    /* Keep custom width from Elementor */
  }
  
  .animated-review-item[style*="height"] {
    /* Keep custom height from Elementor */
  }
  
  .animated-review-item[style*="background"] {
    /* Keep custom background from Elementor */
  }
}

/* Mobile specific keyframes */
@keyframes mobileFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes mobilePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(0, 191, 255, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 191, 255, 0.4);
  }
}

@keyframes mobileBounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-15px);
  }
  70% {
    transform: translateY(-8px);
  }
  90% {
    transform: translateY(-2px);
  }
}

@keyframes mobileRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes mobileGlow {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(0, 191, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 30px rgba(0, 191, 255, 0.5);
    transform: scale(1.05);
  }
}

@keyframes mobileWave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

@keyframes mobileShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
  }
}

/* Ensure mobile animations don't conflict with positioning */
@media (max-width: 767px) {
  .animated-review-item.animation-float {
    animation: mobileFloat 3s ease-in-out infinite !important;

  }
  
  .animated-review-item.animation-pulse {
    animation: mobilePulse 3s ease infinite !important;

  }
  
  .animated-review-item.animation-bounce {
    animation: mobileBounce 3s ease infinite !important;

  }
  
  .animated-review-item.animation-rotate {
    animation: mobileRotate 3s linear infinite !important;

  }
  
  .animated-review-item.animation-glow {
    animation: mobileGlow 3s ease infinite !important;

  }
  
  .animated-review-item.animation-wave {
    animation: mobileWave 3s ease-in-out infinite !important;
  }
  
  .animated-review-item.animation-shake {
    animation: mobileShake 3s ease infinite !important;

  }
}

/* Additional mobile improvements */
@media (max-width: 767px) {
  /* Better touch targets */
  /* Remove enforced touch target size to allow Elementor control */
  
  /* Improved text readability */
  .animated-review-active-text {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.7 !important;
  }
  
  .animated-review-active-name {
    font-size: clamp(16px, 4.5vw, 18px) !important;
  }
  
  /* Ensure Elementor styles work on mobile */
  .animated-review-item[style*="border"] {
    /* Keep custom border styles from Elementor */
  }
  
  .animated-review-item[style*="box-shadow"] {
    /* Keep custom shadow styles from Elementor */
  }
  
  .animated-review-item[style*="width"] {
    /* Keep custom width from Elementor */
  }
  
  .animated-review-item[style*="height"] {
    /* Keep custom height from Elementor */
  }
  
  .animated-review-item[style*="background"] {
    /* Keep custom background from Elementor */
  }
  
  /* Ensure active avatar container preserves Elementor styles */
  .animated-review-active-image-container[style*="border"] {
    border-radius: 50% !important;
  }
  
  .animated-review-active-image-container[style*="box-shadow"] {
    /* Keep custom shadow styles from Elementor */
  }
  
  .animated-review-active-image-container[style*="width"] {
    /* Keep custom width from Elementor */
  }
  
  .animated-review-active-image-container[style*="height"] {
    /* Keep custom height from Elementor */
  }
  
  /* Better spacing for small screens */
  @media (max-width: 480px) {
    .animated-reviews-container {
      padding: 15px 0 !important;
    }
    
    .animated-review-active {
      width: 95% !important;
      padding: 25px 15px !important;
    }
    
    .animated-reviews-thumbnails {
      gap: 12px !important;
      padding: 15px !important;
    }
    
    .animated-review-item {
      /* Let Elementor control size */
    }
    
    .animated-review-active-image-container {
      /* Let Elementor control size */
    }
  }
  
  /* Extra small screens */
  @media (max-width: 360px) {
    .animated-reviews-thumbnails {
      gap: 10px !important;
      padding: 10px !important;
    }
    
    .animated-review-item {
      /* Let Elementor control size */
    }
    
    .animated-review-active {
      width: 98% !important;
      padding: 20px 15px !important;
    }
    
    .animated-review-active-image-container {
      /* Let Elementor control size */
    }
  }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
  .animated-reviews-container {
    height: 500px;
  }
  
  .animated-review-active {
    width: 400px;
    padding: 30px;
  }
  
  /* Tablet specific adjustments */
  .animated-review-item {
    width: 65px;
    height: 65px;
  }
  
  .animated-review-active-image-container {
    width: 110px;
    height: 110px;
  }
  
  /* Ensure proper spacing on tablets */
  .animated-reviews-thumbnails {
    gap: 18px;
  }
}

/* Ensure all images are properly contained */
.animated-review-thumbnail,
.animated-review-active-image {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Additional mobile image fixes */
@media (max-width: 767px) {
  .animated-review-item {
    position: relative !important;
    overflow: hidden !important;
  }
  
  .animated-review-item img,
  .animated-review-active-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
  }
  
  /* Ensure no image overflow */
  .animated-review-item img {
    max-width: none !important;
    max-height: none !important;
  }
  
  /* Prevent avatar overlap */
  .animated-reviews-thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure each avatar has proper spacing */
  .animated-review-item {
    margin: 5px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* Responsive gap adjustment */
  @media (max-width: 480px) {
    .animated-reviews-thumbnails {
      gap: 15px !important;
      padding: 15px !important;
    }
    
    .animated-review-item {
      margin: 3px !important;
    }
  }
  
  @media (max-width: 360px) {
    .animated-reviews-thumbnails {
      gap: 12px !important;
      padding: 10px !important;
    }
    
    .animated-review-item {
      margin: 2px !important;
    }
  }
  
  /* Preserve Elementor custom styles */
  .animated-review-item[style*="border-color"] {
    /* Keep custom border color */
  }
  
  .animated-review-item[style*="border-width"] {
    /* Keep custom border width */
  }
  
  .animated-review-item[style*="border-radius"] {
    /* Keep custom border radius */
  }
  
  .animated-review-item[style*="box-shadow"] {
    /* Keep custom box shadow */
  }
  
  .animated-review-item[style*="background-color"] {
    /* Keep custom background color */
  }
  
  .animated-review-item[style*="width"] {
    /* Keep custom width */
  }
  
  .animated-review-item[style*="height"] {
    /* Keep custom height */
  }
}