/* =========================================================
   SHOPPER MOMMA BUSINESS GLASS CAROUSEL — V24
   Load after shopper-momma-responsive.css
   ========================================================= */

:root {
  /*
   * Space reserved at the bottom of the glass stage
   * for the business card, dots and navigation.
   */
  --sm-business-card-reserve: 136px;
}

/* Main glass showcase */

#ai-bot-panel
#assistant-showcase {
  position: relative !important;

  isolation: isolate !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      #121a2a,
      #04070d
    ) !important;
}

/* Large active business media area */

#ai-bot-panel
#assistant-showcase
.sm-business-stage-media {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom:
    var(
      --sm-business-card-reserve
    ) !important;
  left: 0 !important;

  z-index: 6 !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  background: #000000 !important;

  opacity: 0;
  visibility: hidden;

  pointer-events: none !important;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

#ai-bot-panel
#assistant-showcase
.sm-business-stage-media.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* QR-safe video and image */

#ai-bot-panel
#assistant-showcase
.sm-business-stage-video,

#ai-bot-panel
#assistant-showcase
.sm-business-stage-image {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: #000000 !important;

  object-fit: contain !important;
  object-position:
    50% 50% !important;

  transform: none !important;
  filter: none !important;
  perspective: none !important;

  opacity: 0;
  visibility: hidden;

  pointer-events: none !important;

  transition:
    opacity 150ms ease,
    visibility 150ms ease;
}

#ai-bot-panel
#assistant-showcase
.sm-business-stage-video.is-active,

#ai-bot-panel
#assistant-showcase
.sm-business-stage-image.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide the Shopper Momma portrait on slides 2, 3 and 4 */

#ai-bot-panel
#assistant-showcase.sm-business-media-active
#assistant-pointing-video,

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-pointing-video {
  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  animation: none !important;
}

/*
 * Do not place a dark scrim, sweep, glare or label
 * over the WorkForceOne or CAP QR-code video.
 */

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-showcase-scrim,

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-showcase-sweep,

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-light-sweep,

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-glow-overlay,

#ai-bot-panel
#assistant-showcase.sm-business-media-active
.assistant-showcase-label {
  opacity: 0 !important;
  visibility: hidden !important;

  animation: none !important;
  transition: none !important;

  pointer-events: none !important;
}

/* Information card stays below the video */

#ai-bot-panel
#assistant-showcase
.business-spinner {
  position: absolute !important;

  right: 14px !important;
  bottom: 16px !important;
  left: 14px !important;

  z-index: 20 !important;
}

/* Preserve thumbnails */

#ai-bot-panel
#assistant-brand-image {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position:
    center !important;

  transform: none !important;
  filter: none !important;
}

/* Exact business wording */

#ai-bot-panel
#assistant-brand-name {
  overflow: hidden !important;

  white-space: nowrap !important;
  text-overflow:
    ellipsis !important;

  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Card transition only */

#ai-bot-panel
.business-spinner.is-changing {
  opacity: 0.68;

  transition:
    opacity 180ms ease;
}

/* Navigation dots */

#ai-bot-panel
.business-spinner-dot {
  cursor: pointer !important;
}

#ai-bot-panel
.business-spinner-dot.is-active {
  background:
    #ef2b2d !important;

  border-color:
    #ef2b2d !important;
}

/* Tablet */

@media (max-width: 768px) {
  :root {
    --sm-business-card-reserve:
      132px;
  }

  #ai-bot-panel
  #assistant-showcase
  .business-spinner {
    right: 10px !important;
    bottom: 12px !important;
    left: 10px !important;
  }
}

/* Small mobile */

@media (max-width: 420px) {
  :root {
    --sm-business-card-reserve:
      126px;
  }

  #ai-bot-panel
  #assistant-showcase
  .business-spinner {
    right: 8px !important;
    bottom: 10px !important;
    left: 8px !important;
  }

  #ai-bot-panel
  #assistant-brand-name {
    font-size: 13px !important;
  }
}

/*
 * Reduced motion disables decorative transitions,
 * but does not disable the actual partner videos.
 */

@media (
  prefers-reduced-motion:
  reduce
) {
  #ai-bot-panel
  .sm-business-stage-media,

  #ai-bot-panel
  .sm-business-stage-video,

  #ai-bot-panel
  .sm-business-stage-image,

  #ai-bot-panel
  .business-spinner {
    animation: none !important;

    transition-duration:
      0.01ms !important;
  }
}