/* --- Main Containers --- */
.custom-widgets-logo-marquee-widget {
  width: 100%;
  overflow: clip;
  --custom_widgets_logo_marquee_fade_effect_color: #ffffff;
  --custom_widgets_logo_marquee_fade_width: 100px;
  margin-left:-10px;
  margin-right: -10px;
  margin-top:-20px;
  margin-bottom: -20px;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  padding-right: 20px;
}

.custom-widgets-logo-marquee-widget-wrapper {
  height: var(--custom_widgets_logo_marquee_height, 100%);
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
   overflow: visible; /* Permitir que el zoom respire */
    /*padding: 20px 0;*/   /* Zona de seguridad para el escalado */
    /*margin: -20px 0;*/   /* Compensación para mantener el layout */
}

/* --- Marquee Inner (Animated via JS) --- */
.custom-widgets-logo-marquee-widget-inner {
  display: flex !important;
    flex-wrap: nowrap !important;
   align-items: center;
    position: relative;
    width: max-content !important;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    --custom_widgets_logo_marquee_gap: 60px;
    /*
    column-gap: var(--custom_widgets_logo_marquee_gap); 
    row-gap: var(--custom_widgets_logo_marquee_gap);
    */


}

.custom-widgets-logo-marquee-widget-item {
    flex-shrink: 0;
    padding-left: calc(var(--custom_widgets_logo_marquee_gap) / 2);
    padding-right: calc(var(--custom_widgets_logo_marquee_gap) / 2);
}

.animation-orientation-vertical .custom-widgets-logo-marquee-widget-item {
    /*padding-left: 20px;
    padding-right: 20px;
    margin-left:-20px;  
     margin-right:-20px;  */
    padding-bottom: var(--custom_widgets_logo_marquee_gap);
}

/* Vertical Adjustment */
.animation-orientation-vertical .custom-widgets-logo-marquee-widget-inner {
    flex-direction: column;
    width: 100%;
    height: auto; /* Allow content to define height */
}

/* --- Items Logic --- */
.custom-widgets-logo-marquee-widget-inner > div {
  flex-shrink: 0;
}

/*
.custom-widgets-logo-marquee-widget-inner > div > div {
  margin-left: calc(var(--custom_widgets_logo_marquee_gap) / 2);
  margin-right: calc(var(--custom_widgets_logo_marquee_gap) / 2);
}
*/

.custom-widgets-logo-marquee-widget-inner > div a {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  /*
  left: calc(var(--custom_widgets_logo_marquee_gap) / 2);
  width: calc(100% - var(--custom_widgets_logo_marquee_gap));
  */
  height: 100%;
  z-index: 1;
}

/* --- Sharp Images Logic --- */
.custom-widgets-logo-marquee-widget-inner img {
 display: block;
    max-width: initial !important;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
   
}

.logo-marquee-widget-item-inner {
  position: relative;
}

/* --- Fade Effects --- */
.custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:before, 
.custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:after {
   
    position: absolute;
    top: 0;
    width: var(--custom_widgets_logo_marquee_fade_width, 100px);
    height: 100%;
    content: "";
    z-index: 2;
}

.custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:before {
  left: 0;
  background: linear-gradient(to right, var(--custom_widgets_logo_marquee_fade_effect_color, #ffffff) 0%, transparent 100%);
}

.custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:after {
  right: 0;
  background: linear-gradient(to left, var(--custom_widgets_logo_marquee_fade_effect_color, #ffffff) 0%, transparent 100%);
}

.animation-orientation-vertical .custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:before, 
.animation-orientation-vertical .custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:after {
    height: var(--custom_widgets_logo_marquee_fade_width, 100px);
    width: 100%;
}

.animation-orientation-vertical .custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:before {
    background: linear-gradient(to bottom, var(--custom_widgets_logo_marquee_fade_effect_color, #ffffff) 0%, transparent 100%);
}

.animation-orientation-vertical .custom-widgets-logo-marquee-widget.logo-marquee-fade .custom-widgets-logo-marquee-widget-wrapper:after {
  background: linear-gradient(to top, var(--custom_widgets_logo_marquee_fade_effect_color, #ffffff) 0%, transparent 100%);
  top:auto;
  bottom:0;
}

/* --- Grid Mode --- */

.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget-inner,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget-inner {
  transform: none !important;
  width: 100% !important;
  display: grid !important;
  gap: var(--custom_widgets_logo_marquee_gap);
  grid-template-columns: repeat(var(--custom_widgets_logo_marquee_grid_columns, 3), 1fr);
}

.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget-inner img,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget-inner img {
  max-width: 100% !important;
}


.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget-wrapper:before,
.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget-wrapper:after,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget-wrapper:before,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget-wrapper:after {
  display: none;
}

.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget {
  overflow:initial;
}
.custom-widgets-logo-marquee-grid-view-tablet.grid-tablet-active .custom-widgets-logo-marquee-widget-wrapper,
.custom-widgets-logo-marquee-grid-view-tablet.grid-mobile-active .custom-widgets-logo-marquee-widget-wrapper {
  overflow:initial;
  --custom_widgets_logo_marquee_height:100%;
}




/* Accessibility */
.custom-widgets-logo-marquee-widget *:focus {
  outline: none;
}



/* Asegura que el track no colapse y siempre sea tan grande como su contenido */
/*
.custom-widgets-logo-marquee-widget-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important; 
    height: auto !important;
}
*/

.marquee-orientation-vertical .custom-widgets-logo-marquee-widget-inner {
    flex-direction: column !important;
    width: 100% !important;
    height: max-content !important; /* Vital para vertical */
}

/* Evita que los clones hereden márgenes extraños que rompan el cálculo */
.is-clone {
    display: flex;
    flex-wrap: nowrap;
}

.marquee-orientation-vertical .is-clone {
    flex-direction: column;
}

/* Importante: Las imágenes no deben tener lazy load del navegador en el editor */
.custom-widgets-logo-marquee-widget-inner img {
    max-width: none !important;
    height: auto !important;
}



 .custom-widgets-logo-marquee-grid-view-tablet .custom-widgets-logo-marquee-widget:not(.grid-expanded) .hide-on-init-tablet.custom-widgets-hide {
    display:none !important;
  }

  .custom-widgets-logo-marquee-grid-view-mobile .custom-widgets-logo-marquee-widget:not(.grid-expanded) .hide-on-init-mobile.custom-widgets-hide,
  .custom-widgets-logo-marquee-grid-view-tablet .custom-widgets-logo-marquee-widget:not(.grid-expanded) .hide-on-init-mobile.custom-widgets-hide {
    display:none !important; 
  }



/* Ocultar clones cuando el grid esté activo para no repetir logos infinitamente */
.grid-tablet-active .is-clone,
.grid-mobile-active .is-clone {
    display: none !important;
}

/* Asegurar que el track no colapse */
.custom-widgets-logo-marquee-widget-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}