/**
 * Elementor Lista Scroll Vertical (Internal Scrollbar) Styles
 * Created by Valsan Fox
 */

.mi-scroll-list-wrapper {
  position: relative;
  width: 100%;
}

.elementor-1758 .elementor-element.elementor-element-54fb4ec > .elementor-widget-container,
.elementor-widget-scroll-list-widget > .elementor-widget-container {
  background-color: transparent !important;
  background: transparent !important;
}

.mi-scroll-list-container {
  position: relative;
  width: 100%;
  max-width: 100%; /* Adjust to 100% to make it fully responsive */
  margin: 0 auto;
  overflow-y: scroll;
  overflow-x: hidden;
  /* Default height, customizable via Elementor */
  height: 350px;
  padding-right: 15px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Custom premium scrollbar styling */
.mi-scroll-list-container::-webkit-scrollbar {
  width: 6px;
}

.mi-scroll-list-container::-webkit-scrollbar-track {
  background: rgba(24, 43, 57, 0.02);
  border-radius: 3px;
}

.mi-scroll-list-container::-webkit-scrollbar-thumb {
  background: rgba(24, 43, 57, 0.2);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.mi-scroll-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 43, 57, 0.4);
}

/* Card list item as a flex row */
.mi-scroll-list-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  will-change: opacity, transform;
  transform-origin: center left;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
}

.mi-scroll-list-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mi-scroll-list-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mi-scroll-list-content {
  flex-grow: 1;
  color: #394b56;
  font-size: 16px;
  line-height: 1.6;
}

/* Allow paragraphs inside WYSIWYG to have appropriate margins */
.mi-scroll-list-content p {
  margin-top: 0;
  margin-bottom: 10px;
}

.mi-scroll-list-content p:last-child {
  margin-bottom: 0;
}

/* Styling for rich text bold elements */
.mi-scroll-list-content strong,
.mi-scroll-list-content b {
  font-weight: 700;
  color: #182b39; /* Slight contrast color for bold text */
}

/* Initial Loaded State (CSS fallback before JS executes) */
.mi-scroll-list-item[data-index="0"] {
  opacity: 1;
  transform: scale(1);
}

.mi-scroll-list-item[data-index="1"] {
  opacity: 0.8;
  transform: scale(1);
}

.mi-scroll-list-item[data-index="2"] {
  opacity: 0.6;
  transform: scale(1);
}

.mi-scroll-list-item:nth-child(n+4) {
  opacity: 0;
  transform: scale(1);
}

/* Accessibility & Prefers-Reduced-Motion safety */
@media (prefers-reduced-motion: reduce) {
  .mi-scroll-list-container {
    height: auto !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }
  .mi-scroll-list-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}