/**
 * Infoptic Trusted By Widget Stylesheet
 *
 * Dark navy glowing aesthetic matching Infoptic Stats Bar.
 * Smooth infinite marquee & responsive grid layouts for partner logos.
 * Full customization tokens for Elementor styling engine.
 *
 * @package InfopticCore
 */

/* ==========================================================================
   TRUSTED BY SECTION WRAPPER & GLOW
   ========================================================================== */
.infoptic-trusted-by {
  background-color: var(--trusted-bg, #062345);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 44px 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.infoptic-trusted-by *,
.infoptic-trusted-by *::before,
.infoptic-trusted-by *::after {
  box-sizing: border-box;
}

/* Subtle radial lighting aura matching Stats Bar */
.infoptic-trusted-by__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    var(--trusted-glow-size, 800px 320px) at var(--trusted-glow-pos, 50% 50%),
    var(--trusted-glow-color, rgba(119, 197, 241, 0.08)),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.infoptic-trusted-by__container {
  width: min(100% - 40px, var(--trusted-container-max-w, 1260px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* ==========================================================================
   HEADER / TITLE / SUBTITLE
   ========================================================================== */
.infoptic-trusted-by__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  text-align: center;
}

.infoptic-trusted-by__header.align-left {
  align-items: flex-start;
  text-align: left;
}

.infoptic-trusted-by__header.align-right {
  align-items: flex-end;
  text-align: right;
}

.infoptic-trusted-by__title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--trusted-brand-bar-gap, 16px);
}

.infoptic-trusted-by__brand-bar {
  width: var(--trusted-brand-bar-w, 28px);
  height: var(--trusted-brand-bar-h, 2px);
  background: var(--trusted-brand-bar, #3caef5);
  border-radius: var(--trusted-brand-bar-radius, 2px);
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.85;
}

.infoptic-trusted-by__title {
  font-family: var(--font-display, 'Orbitron', system-ui, sans-serif);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--trusted-title-color, rgba(255, 255, 255, 0.92)) !important;
  margin: 0;
  line-height: 1.3;
}

.infoptic-trusted-by__subtitle {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--trusted-subtitle-size, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trusted-subtitle-color, rgba(168, 234, 248, 0.80));
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   MARQUEE (INFINITE CAROUSEL) LAYOUT
   ========================================================================== */
.infoptic-trusted-by__marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 var(--trusted-fade-w, 6%),
    #000 calc(100% - var(--trusted-fade-w, 6%)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 var(--trusted-fade-w, 6%),
    #000 calc(100% - var(--trusted-fade-w, 6%)),
    transparent 100%
  );
}

.infoptic-trusted-by__marquee-wrap.no-fade {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.infoptic-trusted-by__marquee-track {
  display: flex;
  width: max-content;
  user-select: none;
}

.infoptic-trusted-by__marquee-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  gap: var(--trusted-logo-gap, 56px);
  padding-right: var(--trusted-logo-gap, 56px);
  animation: infopticMarqueeScroll var(--trusted-marquee-speed, 28s) linear infinite;
  will-change: transform;
}

.infoptic-trusted-by__marquee-track.reverse .infoptic-trusted-by__marquee-group {
  animation-direction: reverse;
}

.infoptic-trusted-by__marquee-wrap.pause-hover:hover .infoptic-trusted-by__marquee-group {
  animation-play-state: paused;
}

@keyframes infopticMarqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ==========================================================================
   GRID LAYOUT (STATIC / ALTERNATIVE)
   ========================================================================== */
.infoptic-trusted-by__grid {
  display: grid;
  grid-template-columns: repeat(var(--trusted-grid-cols, 7), 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--trusted-grid-row-gap, 32px) var(--trusted-logo-gap, 48px);
  width: 100%;
}

.infoptic-trusted-by__grid.align-center {
  justify-content: center;
}

.infoptic-trusted-by__grid.align-flex-start {
  justify-content: flex-start;
}

.infoptic-trusted-by__grid.align-space-between {
  justify-content: space-between;
}

/* ==========================================================================
   LOGO ITEM & OPTICAL NORMALIZATION
   ========================================================================== */
.infoptic-trusted-by__item,
.elementor-widget-infoptic-trusted-by .infoptic-trusted-by__item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  height: var(--trusted-logo-height, 44px) !important;
  max-width: var(--trusted-logo-max-w, 175px) !important;
  padding: var(--trusted-logo-padding, 0);
  background-color: var(--trusted-logo-bg, transparent);
  border: var(--trusted-logo-border, none);
  border-radius: var(--trusted-logo-radius, 0);
  text-decoration: none;
  cursor: default;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  opacity: var(--trusted-logo-opacity, 0.88);
}

a.infoptic-trusted-by__item {
  cursor: pointer;
}

.infoptic-trusted-by__item:hover {
  opacity: var(--trusted-logo-hover-opacity, 1);
  transform: translateY(var(--trusted-logo-lift, -2px)) scale(var(--trusted-logo-hover-scale, 1.04));
  background-color: var(--trusted-logo-hover-bg, var(--trusted-logo-bg, transparent));
}

.infoptic-trusted-by__item:hover .infoptic-trusted-by__logo-img {
  filter: var(--trusted-logo-hover-glow, drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)));
}

.infoptic-trusted-by__logo-img,
.elementor .infoptic-trusted-by__logo-img,
.elementor-widget-infoptic-trusted-by .infoptic-trusted-by__logo-img {
  width: auto !important;
  height: auto !important;
  max-width: var(--trusted-logo-max-w, 150px) !important;
  max-height: var(--trusted-logo-height, 32px) !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* ==========================================================================
   OPTICAL LOGO BALANCING (Equal visual weight for all partner brands)
   ========================================================================== */

/* 1. EssilorLuxottica: Ultra-wide wordmark (9.18:1 ratio) - height scaled to match wordmark font-size */
.infoptic-trusted-by img[src*="essilor"],
.infoptic-trusted-by .infoptic-trusted-by__item--essilorluxottica img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="Essilor"] img,
.infoptic-trusted-by [data-logo*="essilor"] img {
  max-height: 18px !important;
  max-width: 165px !important;
  height: auto !important;
  width: auto !important;
}

/* 2. Opticians Association of Canada: Compact/square emblem (1.25:1 ratio) */
.infoptic-trusted-by img[src*="optician"],
.infoptic-trusted-by .infoptic-trusted-by__item--opticians-association-of-canada img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="Optician"] img,
.infoptic-trusted-by [data-logo*="optician"] img {
  max-height: 40px !important;
  max-width: 55px !important;
  height: auto !important;
  width: auto !important;
}

/* 3. MIDO Eyewear Show: Compact bold wordmark (2.6:1 ratio) */
.infoptic-trusted-by img[src*="mido"],
.infoptic-trusted-by .infoptic-trusted-by__item--mido-eyewear-show-milano img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="MIDO"] img,
.infoptic-trusted-by [data-logo*="mido"] img {
  max-height: 24px !important;
  max-width: 75px !important;
  height: auto !important;
  width: auto !important;
}

/* 4. CooperVision: Horizontal mark with emblem (3.88:1 ratio) */
.infoptic-trusted-by img[src*="coopervision"],
.infoptic-trusted-by .infoptic-trusted-by__item--coopervision img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="CooperVision"] img,
.infoptic-trusted-by [data-logo*="coopervision"] img {
  max-height: 28px !important;
  max-width: 120px !important;
  height: auto !important;
  width: auto !important;
}

/* 5. Transitions Optical: Horizontal wordmark (3.74:1 ratio) */
.infoptic-trusted-by img[src*="transitions"],
.infoptic-trusted-by .infoptic-trusted-by__item--transitions-optical img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="Transitions"] img,
.infoptic-trusted-by [data-logo*="transitions"] img {
  max-height: 28px !important;
  max-width: 115px !important;
  height: auto !important;
  width: auto !important;
}

/* 6. Regard Action: Horizontal emblem + text (3.39:1 ratio) */
.infoptic-trusted-by img[src*="regard"],
.infoptic-trusted-by .infoptic-trusted-by__item--regard-action img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="Regard"] img,
.infoptic-trusted-by [data-logo*="regard"] img {
  max-height: 30px !important;
  max-width: 110px !important;
  height: auto !important;
  width: auto !important;
}

/* 7. Optometry Giving Sight: Horizontal emblem + text (3.72:1 ratio) */
.infoptic-trusted-by img[src*="giving"],
.infoptic-trusted-by .infoptic-trusted-by__item--optometry-giving-sight img,
.infoptic-trusted-by .infoptic-trusted-by__item[aria-label*="Giving"] img,
.infoptic-trusted-by [data-logo*="giving"] img {
  max-height: 30px !important;
  max-width: 115px !important;
  height: auto !important;
  width: auto !important;
}

/* Filter Presets */
.infoptic-trusted-by--filter-white .infoptic-trusted-by__logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.infoptic-trusted-by--filter-grayscale .infoptic-trusted-by__logo-img {
  filter: grayscale(100%) opacity(0.8);
}

.infoptic-trusted-by--filter-grayscale .infoptic-trusted-by__item:hover .infoptic-trusted-by__logo-img {
  filter: grayscale(0%) opacity(1);
}

.infoptic-trusted-by--filter-cyan .infoptic-trusted-by__logo-img {
  filter: brightness(0) saturate(100%) invert(86%) sepia(21%) saturate(942%) hue-rotate(163deg) brightness(101%) contrast(97%);
}

.infoptic-trusted-by--filter-cyan .infoptic-trusted-by__item:hover .infoptic-trusted-by__logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(168, 234, 248, 0.6));
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 991px) {
  .infoptic-trusted-by {
    padding: 38px 0;
  }

  .infoptic-trusted-by__title {
    font-size: .82rem;
    letter-spacing: .16em;
  }

  .infoptic-trusted-by__item,
  .elementor-widget-infoptic-trusted-by .infoptic-trusted-by__item {
    height: var(--trusted-logo-height-tablet, 36px) !important;
  }

  .infoptic-trusted-by__marquee-group {
    gap: var(--trusted-logo-gap-tablet, 42px);
    padding-right: var(--trusted-logo-gap-tablet, 42px);
  }

  .infoptic-trusted-by__logo-img,
  .elementor .infoptic-trusted-by__logo-img {
    max-height: var(--trusted-logo-height-tablet, 28px) !important;
    max-width: 130px !important;
  }

  .infoptic-trusted-by img[src*="essilor"],
  .infoptic-trusted-by [data-logo*="essilor"] img {
    max-height: 15px !important;
    max-width: 140px !important;
  }

  .infoptic-trusted-by img[src*="optician"],
  .infoptic-trusted-by [data-logo*="optician"] img {
    max-height: 34px !important;
    max-width: 48px !important;
  }

  .infoptic-trusted-by img[src*="mido"],
  .infoptic-trusted-by [data-logo*="mido"] img {
    max-height: 20px !important;
    max-width: 65px !important;
  }

  .infoptic-trusted-by img[src*="coopervision"],
  .infoptic-trusted-by [data-logo*="coopervision"] img,
  .infoptic-trusted-by img[src*="transitions"],
  .infoptic-trusted-by [data-logo*="transitions"] img {
    max-height: 24px !important;
    max-width: 100px !important;
  }

  .infoptic-trusted-by__grid {
    grid-template-columns: repeat(var(--trusted-grid-cols-tablet, 4), 1fr);
    gap: var(--trusted-grid-row-gap-tablet, 24px) var(--trusted-logo-gap-tablet, 32px);
  }
}

@media (max-width: 640px) {
  .infoptic-trusted-by {
    padding: 30px 0;
  }

  .infoptic-trusted-by__header {
    margin-bottom: 22px;
    gap: 8px;
  }

  .infoptic-trusted-by__brand-bar {
    width: var(--trusted-brand-bar-w-mobile, 18px);
  }

  .infoptic-trusted-by__title {
    font-size: .74rem;
    letter-spacing: .14em;
  }

  .infoptic-trusted-by__item,
  .elementor-widget-infoptic-trusted-by .infoptic-trusted-by__item {
    height: var(--trusted-logo-height-mobile, 30px) !important;
  }

  .infoptic-trusted-by__marquee-group {
    gap: var(--trusted-logo-gap-mobile, 32px);
    padding-right: var(--trusted-logo-gap-mobile, 32px);
  }

  .infoptic-trusted-by__logo-img,
  .elementor .infoptic-trusted-by__logo-img {
    max-height: var(--trusted-logo-height-mobile, 22px) !important;
    max-width: 110px !important;
  }

  .infoptic-trusted-by img[src*="essilor"],
  .infoptic-trusted-by [data-logo*="essilor"] img {
    max-height: 14px !important;
    max-width: 125px !important;
  }

  .infoptic-trusted-by img[src*="optician"],
  .infoptic-trusted-by [data-logo*="optician"] img {
    max-height: 28px !important;
    max-width: 40px !important;
  }

  .infoptic-trusted-by img[src*="mido"],
  .infoptic-trusted-by [data-logo*="mido"] img {
    max-height: 18px !important;
    max-width: 55px !important;
  }

  .infoptic-trusted-by img[src*="coopervision"],
  .infoptic-trusted-by [data-logo*="coopervision"] img,
  .infoptic-trusted-by img[src*="transitions"],
  .infoptic-trusted-by [data-logo*="transitions"] img {
    max-height: 20px !important;
    max-width: 85px !important;
  }

  .infoptic-trusted-by__grid {
    grid-template-columns: repeat(var(--trusted-grid-cols-mobile, 2), 1fr);
    gap: var(--trusted-grid-row-gap-mobile, 20px) var(--trusted-logo-gap-mobile, 24px);
  }

  .infoptic-trusted-by__marquee-wrap {
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  }
}