/* =============================================
   Partners Auto Carousel (Mobile)

   Smooth infinite auto-scroll with manual swipe support.
   Add `nb-partners-carousel` class to the partners section container.
   ============================================= */

@media (max-width: 767px) {
  .nb-partners-carousel {
    --nb-logo-card-bg: #ffffff;
    --nb-logo-card-border: rgba(0, 0, 0, 0.06);
    --nb-logo-card-radius: 10px;
    --nb-logo-card-padding: 12px 18px;
    --nb-logo-height: 30px;
    --nb-carousel-gap: 14px;
    --nb-category-gap: 28px;
  }

  /* Category title styling */
  .nb-partners-carousel .elementor-widget-heading .elementor-heading-title {
    font-size: 10px !important;
    letter-spacing: 0.12em;
    margin-bottom: 10px !important;
    color: #888;
    font-weight: 600 !important;
    text-transform: uppercase;
  }

  /* Logo row container - scrollable */
  .nb-partners-carousel .nb-logo-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 0 10px 0 !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    scroll-behavior: auto; /* Prevent browser smooth scroll conflicts */

    /* iOS-specific touch handling */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nb-partners-carousel .nb-logo-row::-webkit-scrollbar {
    display: none;
  }

  /* Safari/iOS fallback: true seamless marquee (no scrollLeft wrapping) */
  .nb-partners-carousel .nb-logo-row.nb-partners-marquee {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto;
    /* Allow vertical page scroll; horizontal is driven by animation */
    touch-action: pan-y;
  }

  .nb-partners-carousel .nb-logo-row.nb-partners-marquee .nb-carousel-track {
    will-change: transform;
    animation-duration: var(--nb-partners-marquee-duration, 18s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: nb-partners-marquee-left;
  }

  .nb-partners-carousel .nb-logo-row.nb-partners-marquee.nb-scroll-right .nb-carousel-track {
    animation-name: nb-partners-marquee-right;
  }

  .nb-partners-carousel .nb-logo-row.nb-partners-marquee.nb-partners-marquee-paused .nb-carousel-track {
    animation-play-state: paused;
  }

  /* Single logo - no animation */
  .nb-partners-carousel .nb-single-logo {
    display: flex !important;
    justify-content: flex-start;
    padding-left: 10px !important;
    overflow: visible !important;
  }

  .nb-partners-carousel .nb-single-logo .elementor-widget-image .elementor-widget-container {
    background: var(--nb-logo-card-bg);
    border: 1px solid var(--nb-logo-card-border);
    border-radius: var(--nb-logo-card-radius);
    padding: var(--nb-logo-card-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .nb-partners-carousel .nb-single-logo img {
    display: block;
    height: var(--nb-logo-height) !important;
    width: auto !important;
    max-width: 100px;
    object-fit: contain;
  }

  /* Carousel track */
  .nb-partners-carousel .nb-carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--nb-carousel-gap);
    padding: 0 20px;
    width: max-content;
  }

  /* Logo widget */
  .nb-partners-carousel .nb-carousel-track .elementor-widget-image {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Each logo card styling */
  .nb-partners-carousel .nb-carousel-track .elementor-widget-container {
    background: var(--nb-logo-card-bg);
    border: 1px solid var(--nb-logo-card-border);
    border-radius: var(--nb-logo-card-radius);
    padding: var(--nb-logo-card-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* Logo image sizing */
  .nb-partners-carousel .nb-carousel-track img {
    display: block;
    height: var(--nb-logo-height) !important;
    width: auto !important;
    max-width: 100px;
    object-fit: contain;
  }

  /* Force single column layout */
  .nb-partners-carousel .e-con.e-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Tighter vertical gaps */
  .nb-partners-carousel .e-con > .e-con-inner {
    gap: var(--nb-category-gap) !important;
  }

  /* Allow overflow for parent containers */
  .nb-partners-carousel .e-con-inner:not(.nb-logo-row) {
    overflow: visible !important;
  }
}

@keyframes nb-partners-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--nb-partners-marquee-width, 320px)), 0, 0);
  }
}

@keyframes nb-partners-marquee-right {
  from {
    transform: translate3d(calc(-1 * var(--nb-partners-marquee-width, 320px)), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Desktop - normal display */
@media (min-width: 768px) {
  /* Reset logo row styles - no carousel behavior on desktop */
  .nb-partners-carousel .nb-logo-row {
    overflow: visible !important;
  }

  /* Make track wrapper invisible to layout - preserves original Elementor layout */
  .nb-partners-carousel .nb-carousel-track {
    display: contents;
  }

  .nb-partners-carousel .nb-carousel-track .elementor-widget-container {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    min-width: unset;
  }

  /* Hide duplicated items on desktop */
  .nb-partners-carousel .nb-carousel-track .elementor-widget-image[aria-hidden="true"] {
    display: none;
  }
}