/* =====================================================

   NDC Exclusive Partners Marquee Slider

   - Transparent background

   - Fade edges

   - 3 cards desktop

   - Prevent native drag/select behavior

===================================================== */



.ndc-featured-slider{

  position: relative;

  overflow: hidden;

  max-width: 1140px;

  width: 100%;

  margin: 15px auto;

  border-radius: 22px;

  background: transparent;

  cursor: grab;



  user-select: none;

  -webkit-user-select: none;

  -ms-user-select: none;

}



.ndc-featured-slider.ndc-dragging{

  cursor: grabbing;

}



/* Enhanced fade edges for depth illusion */

.ndc-featured-slider::before,

.ndc-featured-slider::after{

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  width: 120px;

  z-index: 3;

  pointer-events: none;

}



.ndc-featured-slider::before{

  left: 0;

  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.0) 100%);

}



.ndc-featured-slider::after{

  right: 0;

  background: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.0) 100%);

}



.ndc-featured-track{

  display: flex;

  gap: 24px;



  /* Top / sides keep breathing room, bottom tightened */

  padding: 20px 40px 10px;



  will-change: transform;

  transform: translate3d(0,0,0);

}





/* Slide card */

.ndc-featured-slide{

  flex: 0 0 auto;

  width: calc((100% - 80px) / 3);

  aspect-ratio: 505 / 315;

  border-radius: 16px;

  overflow: hidden;

  text-decoration: none;

  color: inherit;

  position: relative;

  z-index: 1;



  /* Depth effect - coming out of background */

  box-shadow: 

    0 12px 30px rgba(0,0,0,0.25),

    0 6px 15px rgba(0,0,0,0.15),

    0 2px 6px rgba(0,0,0,0.1);



  outline: 2px solid rgba(255,255,255,0);

  transition: transform 0.3s ease, outline-color 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease, opacity 0.3s ease;

  transform: translateY(0) scale(1);

}



.ndc-featured-slide:hover{

  transform: translateY(-8px) scale(1.02);

  outline-color: rgba(255,255,255,0.5);

  z-index: 2;

  box-shadow: 

    0 20px 40px rgba(0,0,0,0.3),

    0 10px 20px rgba(0,0,0,0.2),

    0 4px 10px rgba(0,0,0,0.15);

}



/* Images: don't allow browser drag ghost */

.ndc-featured-slide img{

  width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;

  background: transparent;



  pointer-events: none;

  -webkit-user-drag: none;

  user-drag: none;

}

/* Card-style slides */

.ndc-featured-slide-card{

  background: #ffffff;

  border: 1px solid rgba(0,0,0,0.08);

  display: flex;

  flex-direction: column;

  min-height: 100%;

}

.ndc-featured-slide-card-inner{

  display: flex;

  flex-direction: column;

  padding: 20px 16px;

  height: 100%;

  box-sizing: border-box;

  position: relative;

}

.ndc-featured-slide-category{

  position: absolute;

  top: 12px;

  left: 12px;

  background: var(--ndc-gold, #f4d9a2);

  color: #0f1b2d;

  font-weight: 900;

  font-size: 11px;

  padding: 5px 10px;

  border-radius: 999px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  z-index: 2;

  white-space: nowrap;

}

.ndc-featured-slide-logo{

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 8px 0 12px;

  min-height: 70px;

  flex-shrink: 0;

}

.ndc-featured-slide-logo img{

  max-width: 120px;

  max-height: 70px;

  width: auto;

  height: auto;

  object-fit: contain;

}

.ndc-featured-slide-content{

  flex: 1;

  display: flex;

  flex-direction: column;

  text-align: center;

  justify-content: flex-start;

}

.ndc-featured-slide-name{

  margin: 0 0 8px;

  font-size: 17px;

  font-weight: 900;

  color: #111;

  line-height: 1.3;

}

.ndc-featured-slide-deal{

  margin: 0;

  font-size: 12px;

  color: rgba(0,0,0,0.7);

  line-height: 1.5;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

}



/* Tablet */

@media (max-width: 1024px){

  .ndc-featured-slide{ width: calc((100% - 60px) / 2); }

  .ndc-featured-track{

    padding: 20px 30px 10px;

  }

}



/* Mobile */

@media (max-width: 640px){

  .ndc-featured-slide{ width: 86vw; }

  .ndc-featured-slider::before,

  .ndc-featured-slider::after{ width: 44px; }

}

