/* ====================================================================================== */
/* 💡 Section Divider: DYNAMIC TESTIMONIAL CAROUSEL ENGINE                                */
/* 📄 FILE: assets/css/testimonial-carousel.css                                         */
/* 🔒 COMPLIANCE: v24.0.0 — FINAL REFINEMENTS                                           */
/* ====================================================================================== */
/* NOTE: This version refines button visibility and sets the default transition speed     */
/*       for manual (button-click) movements. The continuous auto-scroll animation        */
/*       is now fully managed by the JavaScript for a smoother effect.                    */
/* ====================================================================================== */

/* 💡 Block Separator: Section-Level Overflow Correction                                */
/* ====================================================================================== */
.testimonial__section {
  overflow: visible !important; /* Color: Default (transparent) | No impact on rendering order or dimensions */
  padding-top: 170px !important;
  padding-bottom: 170px !important;
}

/* ====================================================================================== */
/* 💡 Block Separator: Viewport Wrapper & Main Container                                  */
/* ====================================================================================== */
.carousel-viewport-wrapper {
  width: 100% !important; /* Color: Default (transparent) | Ensures full-width container */
  overflow-x: hidden !important; /* Color: Default (transparent) | Prevents horizontal scrollbars */
  position: relative !important; /* Color: Default (transparent) | Establishes stacking context */
}

.testimonial-carousel {
  position: relative !important; /* Color: Default (transparent) | Required for mask positioning */
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important; /* Color: Black (#000000) | Mask for fade-out edges */
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important; /* Color: Black (#000000) | Same as above */
}

/* ====================================================================================== */
/* 💡 Block Separator: The Scrolling Flexbox Track (JS CONTROLLED)                       */
/* ====================================================================================== */
.carousel-track {
  display: flex !important; /* Color: Default (transparent) | Enables horizontal scrolling via JS */
  gap: 20px !important; /* Color: Default (transparent) | Spacing between cards */
  /* --- CRITICAL: Default transition is for FAST manual clicks. --- */
  /* --- The slow, linear auto-scroll transition is now set by JS. --- */
  transition: transform 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important; /* Color: Default (transparent) | Used only during manual navigation */
}

/* ====================================================================================== */
/* 💡 Block Separator: Individual Testimonial Card Styling                                */
/* ====================================================================================== */
.carousel-track .testi__inner {
  flex-shrink: 0 !important; /* Color: Default (transparent) | Prevents shrinking during flex layout */
  width: 380px !important; /* Color: Default (transparent) | Fixed width card size */
  height: 480px !important; /* Color: Default (transparent) | Fixed height card size */
  display: flex !important; /* Color: Default (transparent) | Enables flex-direction: column */
  flex-direction: column !important; /* Color: Default (transparent) | Stack content vertically */
  align-items: center !important; /* Color: Default (transparent) | Center contents horizontally */
  background-color: #ffffff !important; /* Color: White (#FFFFFF) | Primary background */
  border-radius: 12px !important; /* Color: Default (transparent) | Rounded corners */
  box-sizing: border-box !important; /* Color: Default (transparent) | Includes padding in width/height */
  padding: 85px !important; /* Color: Default (transparent) | Internal spacing */
  box-shadow: 0 5px 20px #49158e !important; /* Color: Dark Purple (#49158E) | Depth effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Color: Default (transparent) | Hover effects */
  position: relative;
  overflow: visible !important; /* Color: Default (transparent) | Allows hover pop-out to extend beyond bounds */
}

/* ====================================================================================== */
/* 💡 Block Separator: Card Hover "Pop Out" Effect                                        */
/* ====================================================================================== */
.carousel-track .testi__inner:hover {
  transform: translateY(-10px) scale(1.25) !important; /* Color: Default (transparent) | Animation effect on hover */
  box-shadow: 0 30px 60px #5b05a6f6 !important; /* Color: Bright Purple (#5B05A6 with 90% opacity) | Enhanced shadow on hover */
  z-index: 10 !important; /* Color: Default (transparent) | Brings card forward on hover */
}

/* ====================================================================================== */
/* 💡 Block Separator: Card Content Styling                                               */
/* ====================================================================================== */
.testi__inner__thumb {
  width: 100px !important; /* Color: Default (transparent) | Thumbnail size */
  height: 100px !important; /* Color: Default (transparent) | Thumbnail size */
  flex-shrink: 0 !important; /* Color: Default (transparent) | Prevents shrinking */
  margin-bottom: 15px !important; /* Color: Default (transparent) | Vertical spacing below image */
  transition: transform 0.3s ease !important; /* Color: Default (transparent) | Smooth zoom on hover */
}

.testi__inner__thumb img {
  width: 100% !important; /* Color: Default (transparent) | Fills container */
  height: 100% !important; /* Color: Default (transparent) | Fills container */
  object-fit: cover !important; /* Color: Default (transparent) | Crops image to fit */
  border-radius: 50% !important; /* Color: Default (transparent) | Circular image */
  border: 3px solid #ffcc01 !important; /* Color: Yellow (#FFCC01) | Border around thumbnail */
}

.testi__inner:hover .testi__inner__thumb {
  transform: scale(1.1) !important; /* Color: Default (transparent) | Zoom on hover */
}

.testi__inner__content {
  width: 100% !important; /* Color: Default (transparent) | Full width content area */
  text-align: left !important; /* Color: Default (transparent) | Left-aligned text */
  display: flex !important; /* Color: Default (transparent) | Flex container */
  flex-direction: column !important; /* Color: Default (transparent) | Column layout */
  flex-grow: 1 !important; /* Color: Default (transparent) | Allows vertical growth */
  justify-content: space-between !important; /* Color: Default (transparent) | Distributes space */
  overflow: visible !important; /* Color: Default (transparent) | Allows overflow on hover */
}

.testi__inner__content p {
  font-size: 0.95rem !important; /* Color: Default (transparent) | Small text */
  line-height: 1.6 !important; /* Color: Default (transparent) | Readable line height */
  margin-bottom: 1rem !important; /* Color: Default (transparent) | Space after paragraph */
  color: #333333 !important; /* Color: Dark Gray (#333333) | Text color */
  flex-grow: 1 !important; /* Color: Default (transparent) | Expands to fill available space */
  overflow-y: auto !important; /* Color: Default (transparent) | Enables vertical scroll inside card */
}

.testi__inner__content h5 {
  text-align: center !important; /* Color: Default (transparent) | Centered name */
  font-size: 1.1rem !important; /* Color: Default (transparent) | Slightly larger font */
  font-weight: 600 !important; /* Color: Default (transparent) | Bold weight */
  margin: 0 !important; /* Color: Default (transparent) | Removes default margin */
  color: #000000 !important; /* Color: Black (#000000) | Name color */
}

.testi__inner__content span {
  display: block !important; /* Color: Default (transparent) | Block-level element */
  text-align: center !important; /* Color: Default (transparent) | Centered location */
  font-size: 0.9rem !important; /* Color: Default (transparent) | Smaller font */
  color: #8800ff !important; /* Color: Magenta/Purple (#8800FF) | Location color */
  margin-top: 4px !important; /* Color: Default (transparent) | Top spacing */
}

/* ====================================================================================== */
/* 💡 Block Separator: Star Rating Styles                                                 */
/* ====================================================================================== */
.testimonial-rating {
  margin-top: 8px;
  text-align: center;
}

.testimonial-rating .fa-star {
  color: #FFD700 !important; /* Color: Gold (#FFD700) | Star color */
  margin: 0 2px !important; /* Color: Default (transparent) | Spacing between stars */
}

/* ====================================================================================== */
/* 💡 Block Separator: Carousel Navigation Buttons (VISIBILITY REFINED)                   */
/* ====================================================================================== */
.carousel-nav {
  position: absolute !important; /* Color: Default (transparent) | Positioned within wrapper */
  top: 50% !important; /* Color: Default (transparent) | Vertical center */
  transform: translateY(-50%) !important; /* Color: Default (transparent) | Perfect vertical alignment */
  z-index: 20 !important; /* Color: Default (transparent) | Above track but below modal */
  background-color: rgba(0, 0, 0, 0.4) !important; /* Color: Translucent Black (rgba(0,0,0,0.4)) | Button background */
  color: #ffffff !important; /* Color: White (#FFFFFF) | Text color */
  border: 1px solid #FFD700 !important; /* Color: Gold (#FFD700) | Border color */
  border-radius: 50% !important; /* Color: Default (transparent) | Circular buttons */
  width: 50px !important; /* Color: Default (transparent) | Size */
  height: 50px !important; /* Color: Default (transparent) | Size */
  cursor: pointer !important; /* Color: Default (transparent) | Pointer cursor */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important; /* Color: Default (transparent) | Smooth hover effects */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* Color: Translucent Black Shadow (rgba(0,0,0,0.3)) | Depth */
  /* --- REFINEMENT: Buttons are now faintly visible by default --- */
  opacity: 0.4; /* Color: Default (transparent) | Semi-transparent by default */
}

.carousel-viewport-wrapper:hover .carousel-nav {
  /* --- REFINEMENT: Buttons become fully opaque on hover --- */
  opacity: 1; /* Color: Default (transparent) | Fully visible on hover */
}

.carousel-nav:hover {
  background-color: #5b05a6cc !important; /* Color: Translucent Bright Purple (rgba(91,5,166,0.8)) | Hover background */
}

.carousel-nav.prev { left: 15px !important; } /* Color: Default (transparent) | Position left button */
.carousel-nav.next { right: 15px !important; } /* Color: Default (transparent) | Position right button */
.carousel-nav:disabled {
  opacity: 0.2 !important; /* Color: Default (transparent) | Disabled state */
  cursor: not-allowed !important; /* Color: Default (transparent) | Not allowed cursor */
}

/* ====================================================================================== */
/* 💡 Block Separator: Modal Styles                                                       */
/* ====================================================================================== */
#modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Color: Translucent Black (rgba(0,0,0,0.8)) | Overlay */
  z-index: 1000;
}

#testimonial-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw; max-width: 800px; min-width: 320px;
  height: 70vh; min-height: 400px;
  background-color: #ffffff; /* Color: White (#FFFFFF) | Modal background */
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Color: Translucent Black Shadow (rgba(0,0,0,0.5)) | Modal depth */
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background-color: #f7f7f7; /* Color: Off-White (#F7F7F7) | Header background */
  border-bottom: 1px solid #e0e0e0; /* Color: Light Gray (#E0E0E0) | Divider */
  flex-shrink: 0;
}

.modal-title { margin: 0; font-size: 1.25rem; color: #333; } /* Color: Dark Gray (#333333) | Title color */

.modal-close-button {
  background: none; border: none; font-size: 2rem;
  font-weight: 300; line-height: 1; color: #888; /* Color: Gray (#888888) | Close icon color */
  cursor: pointer; padding: 0;
}

.modal-close-button:hover { color: #000; } /* Color: Black (#000000) | Hover color */

.modal-body {
  display: flex; flex-direction: row; padding: 25px;
  overflow-y: auto; flex-grow: 1;
}

.modal-thumb { flex-shrink: 0; margin-right: 25px; }
.modal-thumb img {
  width: 150px; height: 150px; border-radius: 50%;
  border: 4px solid #ffcc01; /* Color: Yellow (#FFCC01) | Border around modal image */
  object-fit: cover;
}

.modal-content-details { text-align: left; }
.modal-content-details h4 { font-size: 1.8rem; margin-top: 0; margin-bottom: 5px; }
.modal-content-details p { color: #555; line-height: 1.7; } /* Color: Medium Gray (#555555) | Paragraph color */
#modal-location { font-style: italic; color: #777; margin-bottom: 15px; } /* Color: Gray (#777777) | Location color */
#modal-rating .fa-star { font-size: 1.2rem; }

/* ====================================================================================== */
/* 💡 Block Separator: Responsive Breakpoints                                            */
/* ====================================================================================== */
@media (max-width: 768px) {
  .modal-body { flex-direction: column; align-items: center; text-align: center; }
  .modal-thumb { margin-right: 0; margin-bottom: 20px; }
  .modal-content-details { text-align: center; }
}

@media (max-width: 576px) {
  .carousel-track .testi__inner {
    width: 90% !important; /* Color: Default (transparent) | Responsive width */
    height: auto !important; /* Color: Default (transparent) | Height adjusts */
    min-height: 450px !important; /* Color: Default (transparent) | Minimum height */
  }
  .testimonial-carousel {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important; /* Color: Black (#000000) | Narrower fade */
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important; /* Color: Black (#000000) | Same as above */
  }
}