/* -----------------------
   Testimonials — Full CSS
   ----------------------- */

/* General styles for the container and items */
.custom-testimonial-grid,
.custom-testimonial-carousel-container {
  width: 100%;
  margin: 0;
  padding: 0; /* This removes the left/right offsets */
  box-sizing: border-box;
}

/* Basic item card */
.testimonial-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  height: 450px; /* review design height */
  box-sizing: border-box;
  z-index: 1; /* ensure items sit under overlays but above background */
}
.testimonial-item:hover {
  transform: translateY(-5px);
}
.testimonial-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* allows parent to receive drag/click */
}
.testimonial-item:hover img {
  transform: scale(1.05);
}
.testimonial-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 250px;
  box-sizing: border-box;
}

/* Overlay styles */
.testimonial-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%);
  color: white;
  padding: 15px;
  padding-top: 50px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  box-sizing: border-box;
  z-index: 2;              /* overlay above the image but below arrows */
  pointer-events: auto;    /* allow clicks to reach overlay (and bubble up) */
}
.testimonial-item:hover .testimonial-overlay {
  opacity: 1;
}
.testimonial-name {
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.testimonial-rating .star {
  color: #ddd;
  font-size: 1.1rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.testimonial-rating .star.filled {
  color: #ffc107;
}
.view-more {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.view-more::after {
  content: '\2192';
  margin-left: 5px;
}

/* Grid layout */
.custom-testimonial-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

/* ------------------------------------- */
/* New Carousel and Pagination styles  */
/* ------------------------------------- */

/* Ensure this container is the positioned ancestor and won't collapse */
.custom-testimonial-carousel-container {
  position: relative !important;
  overflow: visible !important; /* allow arrows outside */
  padding-bottom: 0;
  min-height: 450px; /* same as .testimonial-item height so top:50% centers correctly */
  box-sizing: border-box;
}

/* Carousel itself */
.custom-testimonial-carousel {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  gap: 20px;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  align-items: stretch; /* ensure children stretch so container height matches */
  position: relative;   /* safe fallback */
  
}

/* Items sizing */
.custom-testimonial-carousel .testimonial-item {
  flex-shrink: 0;
  box-sizing: border-box;
  flex-basis: calc((100% - 20px * (var(--per-view) - 1)) / var(--per-view));
  width: calc((100% - 20px * (var(--per-view) - 1)) / var(--per-view));
}

/* --------------------
   Arrow buttons style
   -------------------- */

/* Base button styling (only uses the SVG inside each button) */
.custom-testimonial-carousel-container .carousel-btn,
.custom-testimonial-carousel-container > .carousel-btn {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  background: transparent;
  color: #000;               /* black arrows (SVG inherits currentColor) */
  border: none;
  padding: 6px;              /* small padding for visual spacing */
  cursor: pointer;
  z-index: 1100;             /* reduced z-index so buttons don't cover entire carousel */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 1;
  opacity: 0.95;
  transition: opacity 0.15s ease, transform 0.08s ease;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;      /* buttons accept clicks only on their area */
}

/* Ensure the SVG inside the button is visible (we prefer the SVG you render) */
.custom-testimonial-carousel-container .carousel-btn svg {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none; /* so clicking the svg still triggers the button click */
}

/* Remove any pseudo-generated glyphs (these caused duplicate arrows) */
.custom-testimonial-carousel-container .carousel-btn::before,
.custom-testimonial-carousel-container .carousel-btn::after {
  content: none !important;
  display: none !important;
}

/* Hover/focus */
.custom-testimonial-carousel-container .carousel-btn:hover,
.custom-testimonial-carousel-container .carousel-btn:focus {
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
    background: transparent;
  outline: none;
}

/* Ensure no floats or margins push them out of place */
.custom-testimonial-carousel-container .carousel-btn,
.custom-testimonial-carousel-container .carousel-btn * {
  float: none !important;
  margin: 0 !important;
}

/* Left and right placement (explicit) */
.custom-testimonial-carousel-container .prev-btn,
.custom-testimonial-carousel-container > .prev-btn {
  left: 12px !important;
  right: auto !important;
}

.custom-testimonial-carousel-container .next-btn,
.custom-testimonial-carousel-container > .next-btn {
  right: 12px !important;
  left: auto !important;
}

/* Pagination dots */
.carousel-pagination {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;

  padding: 6px 0;
}
@media (max-width: 768px) {
.carousel-pagination {
  bottom: 6px !important;

}
}
.pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pagination-dot.active {
  background-color: #000;
  transform: scale(1.2);
}

/* Responsive rules */
@media (max-width: 768px) {
  .custom-testimonial-grid { 
    grid-template-columns: 1fr; 
  }
  .custom-testimonial-carousel-container {
    padding-bottom: 36px; /* space for dots on mobile */
    min-height: 380px;
  }
  .custom-testimonial-carousel .testimonial-item {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .custom-testimonial-carousel-container .prev-btn { left: 8px !important; }
  .custom-testimonial-carousel-container .next-btn { right: 8px !important; }

  /* small touch target increase (visually same) */
  .custom-testimonial-carousel-container .carousel-btn {
    padding: 8px;
    width: 48px;
    height: 48px;
  }

  /* --------------------------
     MOBILE-SPECIFIC TOUCH FIXS
     (confined to <=768px so desktop is unchanged)
     -------------------------- */

  /* Prevent accidental overlays/pseudo elements from swallowing touch events:
     container ignores pointer-events, then interactive children opt-in. */
  .custom-testimonial-carousel-container {
    pointer-events: none; /* everything ignores pointer events by default on mobile */
  }
  /* Opt-in interactive elements so they can still be tapped */
  .custom-testimonial-carousel,
  .custom-testimonial-carousel .testimonial-item,
  .custom-testimonial-carousel-container .carousel-btn,
  .custom-testimonial-carousel .testimonial-overlay {
    pointer-events: auto;
  }

  /* Make the carousel treat touches as vertical-pan by default so simple taps register */
  .custom-testimonial-carousel {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;  /* allow vertical scroll but keep tap detection reliable */
  }

  /* Slight z-index adjustments for mobile to ensure buttons are above items but not above modals */
  .custom-testimonial-carousel-container .carousel-btn {
    z-index: 120; /* higher than items/overlay but far below modal z-index */
  }
  .custom-testimonial-carousel .testimonial-overlay {
    z-index: 90;
  }
  .custom-testimonial-carousel .testimonial-item {
    z-index: 80;
  }
}

/* Modal styles - unchanged */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  padding: 20px;
  box-sizing: border-box;
}
.modal-content {
  background-color: #fff;
  width: 90%;
  max-width: 900px;
  padding: 20px;
  border-radius: 10px;
  position: absolute;
  animation-name: animatetop;
  animation-duration: 0.4s;
  display: flex;
  max-height: 90vh;
  height: auto;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
}
.close-btn {
  
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 10001;
  color: white;
  background-color: #004823;
  border-radius: 10px;
  border: none;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
 padding; 5px;
  align-items: center;
  justify-content: center;
}
.close-btn:hover, .close-btn:focus {
  color: black;
}
.modal-body {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  overflow-y: auto;
  flex-direction: column;
}
.modal-image {
  flex-shrink: 0;
  height: auto;
  max-height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  object-position: top;
}
.modal-details {
  overflow-y: auto;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modal-reviewer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
#modal-verified-buyer-badge {
  font-size: 0.8rem;
  color: #4CAF50;
  font-weight: bold;
  display: none;
  align-items: center;
  gap: 5px;
}
#modal-verified-buyer-badge::before {
  content: '✔';
  font-size: 1.2em;
}
#modal-reviewer-name {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}
#modal-review-text {
  font-size: 1rem;
}
#modal-product-details {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
  display: none;
}
.product-info-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}
#modal-product-image {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 5px;
}
.product-text {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}
#modal-product-name {
  font-size: 1rem;
  font-weight: bold;
}
#modal-product-price {
  color: #888;
}

/* Animation */
@keyframes animatetop {
  from {
    opacity: 0;
    transform: translate(-50%,-60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%,-50%);
  }
}

/* Large screen modal behavior - keeping as is */
@media (min-width: 1025px) {
  .modal-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    max-height: 90vh;
    height: auto;
    flex-direction: row;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .modal-body { display: contents; }
  .modal-image { max-height: none; height: 100%; }
  .modal-image img { max-height: none; height: 100%; object-position: top; }
  .modal-details { overflow-y: auto; height: 100%; }
  #modal-review-text { flex-grow: 1; }
}

/* Utility: ensure pagination visible above content if overlay used */