{# Clean Pro - Hover Swap Module Styles #}

{# Main Module Container #}
.hover-swap-module {
  min-height: 400px;
}

{# Text Column Styling #}
.hover-text-column {
  padding: 20px;
}

.hover-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hover-item {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 15px 0;
  text-decoration: none;
  color: inherit;
  display: block;
}

.hover-item:last-child {
  border-bottom: none;
}


.hover-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hover-text {
  flex: 1;
  transition: color 0.3s ease;
}
.hover-icon {
  opacity: 0;
 }

.hover-item.active .hover-icon {
  opacity: 1;
}

{# Content Column Styling #}
.hover-content-column {
  padding: 20px;
}

.content-display-area {
  position: relative;
  min-height: 300px;
  display: grid;
}

.content-item {
  width: 100%;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  will-change: opacity;
  grid-area: 1/1;
}

.content-item.active {
  opacity: 1;
}

.content-image {
  margin-bottom: 20px;
}

.content-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-text {
  line-height: 1.6;
}

{# Mobile Responsive Styles #}
@media (max-width: 767.98px) {
  .hover-swap-module {
    flex-direction: column;
  }

  .hover-text-column,
  .hover-content-column {
    padding: 15px;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  {# Force text column (links) to always be first on mobile - override all Bootstrap order classes #}
  .hover-text-column {
    order: 1 !important;
  }

  {# Force content column to always be second on mobile - override all Bootstrap order classes #}
  .hover-content-column {
    order: 2 !important;
    margin-top: 0;
  }

  {# Additional override for specific Bootstrap order classes that might be applied #}
  .hover-text-column.order-1,
  .hover-text-column.order-2,
  .hover-text-column.order-md-1,
  .hover-text-column.order-md-2 {
    order: 1 !important;
  }

  .hover-content-column.order-1,
  .hover-content-column.order-2,
  .hover-content-column.order-md-1,
  .hover-content-column.order-md-2 {
    order: 2 !important;
  }

  .hover-item {
    padding: 16px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .hover-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .content-display-area {
    display: grid;
    min-height: 250px;
    margin-top: 20px;
  }

  .content-item {
    grid-area: 1/1;
    position: relative !important;
    width: 100%;
    top: auto !important;
    left: auto !important;
  }

  .content-item.active {
    display: block;
  }

  {# Mobile scroll indicator for active item - matches reference images #}
  .hover-item.scroll-active .hover-text {
    font-weight: 700;
    color: #000 !important;
    transition: all 0.2s ease;
  }

  .hover-item.scroll-active .hover-icon {
    opacity: 1;
    color: #000 !important;
  }

}

.hover-item[tabindex="0"] {
  cursor: pointer;
}