/* --- Root Container --- */
.logo-marquee-widget {
  width: 100%;
  overflow: clip; /* Modern overflow property to prevent container escaping */
  --logo_marquee_fade_effect_color: #ffffff;
  --logo_marquee_fade_width: 100px;
}

/* --- Wrapper: Holds the marquee and side gradients --- */
.logo-marquee-widget-wrapper {
  height: var(--logo_marquee_height, 100%);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible; 
}


/* --- Track Container: Hardware Accelerated Layer --- */
.logo-marquee-widget-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  position: relative;
  width: max-content !important;
  height: 100%;
  /* Force GPU rendering for ultra-smooth motion */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  --logo_marquee_gap: 60px;
}

/* --- Individual Item Styling --- */
.logo-marquee-widget-item {
  flex-shrink: 0;
  padding-left: calc(var(--logo_marquee_gap) / 2);
  padding-right: calc(var(--logo_marquee_gap) / 2);
}

/* --- Link Overlay: Covers the entire logo area --- */
.logo-marquee-widget-item a {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


/* --- Image Optimization for High Refresh Rates --- */
.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;
}

/* --- Vertical Orientation Overrides --- */
.animation-orientation-vertical .logo-marquee-widget-item {
  padding-left:0;
  padding-right: 0;
  padding-bottom: var(--logo_marquee_gap);
}

.animation-orientation-vertical.grid-active  .logo-marquee-widget-item {
  padding:0 !important;
}

.animation-orientation-vertical .logo-marquee-widget-inner {
  flex-direction: column;
  width: 100%;
  height: auto; 
}


/* --- Fade Effect: Linear Gradients for Seamless Transitions --- */
.logo-marquee-widget.logo-marquee-fade .logo-marquee-widget-wrapper:before, 
.logo-marquee-widget.logo-marquee-fade .logo-marquee-widget-wrapper:after {
  position: absolute;
  top: 0;
  width: var(--logo_marquee_fade_width, 100px);
  height: 100%;
  content: "";
  z-index: 2;
  pointer-events: none; /* Allows clicks to pass through to links */
}

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

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

/* --- Vertical Fade Orientation --- */
.animation-orientation-vertical .logo-marquee-widget.logo-marquee-fade .logo-marquee-widget-wrapper:before, 
.animation-orientation-vertical .logo-marquee-widget.logo-marquee-fade .logo-marquee-widget-wrapper:after {
  height: var(--logo_marquee_fade_width, 100px);
  width: 100%;
}

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

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

/* --- Adaptive Grid Mode: Fired via JS when Breakpoint is reached --- */
.logo-marquee-grid-view-tablet.grid-active .logo-marquee-widget-inner {
  transform: none !important; /* Stop JS animation */
  width: 100% !important;
  display: grid !important;
  gap: var(--logo_marquee_gap);
  grid-template-columns: repeat(var(--logo_marquee_grid_columns, 3), 1fr);
}

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

.logo-marquee-grid-view-tablet.grid-active .logo-marquee-widget-wrapper:before,
.logo-marquee-grid-view-tablet.grid-active .logo-marquee-widget-wrapper:after {
  display: none; /* Hide fades in grid view */
}

.logo-marquee-grid-view-tablet.grid-active .logo-marquee-widget {
  overflow:initial;
}
.logo-marquee-grid-view-tablet.grid-active .logo-marquee-widget-wrapper {
  overflow:initial;
  --logo_marquee_height:100%;
}

/* --- Accessibility & Focus Management --- */
.logo-marquee-widget *:focus {
  outline: none;
}

/* --- Cloning Logic: Handling Seamless Loops --- */
.logo-marquee-is-clone {
  display: flex;
  flex-wrap: nowrap;
}

/* --- Grid Active Logic: Hide Cloned Items to save performance --- */
.logo-marquee-widget-inner img {
  max-width: none !important;
  height: auto !important;
}

.grid-active .logo-marquee-is-clone {
  display: none !important;
}

.logo-marquee-widget-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}