/*
 * Product detail description icon FX.
 * Loaded through $pageFinalHead so it wins over product-media-v2.css,
 * compact-ui-v1.css and the other global overrides.
 */

.pd-feature-list > li {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  overflow: visible !important;
}

/* Disable every legacy pseudo check. The real PNG is in the markup now. */
.pd-feature-list > li::before,
.pd-feature-list > li::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.pd-feature-checkfx {
  --pd-check-size: 20px;
  position: relative;
  flex: 0 0 var(--pd-check-size);
  width: var(--pd-check-size);
  height: var(--pd-check-size);
  margin-top: 1px;
  isolation: isolate;
  overflow: visible;
}

.pd-feature-checkfx::before,
.pd-feature-checkfx::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  border-radius: 50%;
}

/* Soft cyan aura behind the PNG. */
.pd-feature-checkfx::before {
  z-index: -2;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(112, 221, 255, .36) 0%,
    rgba(39, 145, 255, .19) 38%,
    rgba(39, 105, 255, .07) 58%,
    transparent 74%);
  filter: blur(2px);
  animation: pdCheckAuraPulse 1.8s ease-in-out infinite;
}

/* A clearly visible spinning light ring around the icon. */
.pd-feature-checkfx::after {
  z-index: -1;
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(112, 216, 255, .22);
  border-top-color: rgba(224, 250, 255, .96);
  border-right-color: rgba(62, 157, 255, .72);
  box-shadow:
    0 0 5px rgba(96, 205, 255, .32),
    inset 0 0 4px rgba(66, 154, 255, .16);
  animation: pdCheckRingSpin 2.7s linear infinite;
}

.pd-feature-checkfx__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 20px !important;
  height: 20px !important;
  max-width: none !important;
  object-fit: contain;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 3px rgba(135, 225, 255, .48))
    drop-shadow(0 0 7px rgba(33, 128, 255, .32));
  animation:
    pdCheckIconSpin 6s linear infinite,
    pdCheckIconGlow 1.55s ease-in-out infinite;
}

.pd-feature-checkfx__particles {
  position: absolute;
  z-index: 3;
  inset: -6px;
  pointer-events: none;
  border-radius: 50%;
  animation: pdCheckParticleOrbit 3.3s linear infinite;
}

.pd-feature-checkfx__particles > i {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #dff8ff;
  box-shadow:
    0 0 4px rgba(206, 246, 255, .98),
    0 0 8px rgba(67, 174, 255, .72);
  animation: pdCheckParticleTwinkle 1.25s ease-in-out infinite alternate;
}

.pd-feature-checkfx__particles > i:nth-child(1) { left: 1px; top: 7px; animation-delay: -.15s; }
.pd-feature-checkfx__particles > i:nth-child(2) { right: 2px; top: 3px; width: 1.5px; height: 1.5px; animation-delay: -.52s; }
.pd-feature-checkfx__particles > i:nth-child(3) { right: 0; bottom: 7px; animation-delay: -.87s; }
.pd-feature-checkfx__particles > i:nth-child(4) { left: 5px; bottom: 0; width: 1.5px; height: 1.5px; animation-delay: -.33s; }
.pd-feature-checkfx__particles > i:nth-child(5) { left: 50%; top: -1px; width: 1.5px; height: 1.5px; animation-delay: -.72s; }
.pd-feature-checkfx__particles > i:nth-child(6) { left: 50%; bottom: 1px; animation-delay: -1s; }

.pd-feature-text {
  min-width: 0;
  flex: 1 1 auto;
}

@keyframes pdCheckIconSpin {
  to { transform: rotate(360deg); }
}

@keyframes pdCheckRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pdCheckIconGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px rgba(135, 225, 255, .42))
      drop-shadow(0 0 6px rgba(33, 128, 255, .26));
  }
  50% {
    filter:
      drop-shadow(0 0 5px rgba(210, 249, 255, .76))
      drop-shadow(0 0 11px rgba(41, 145, 255, .5));
  }
}

@keyframes pdCheckAuraPulse {
  0%, 100% { opacity: .48; transform: translate(-50%, -50%) scale(.88); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes pdCheckParticleOrbit {
  to { transform: rotate(360deg); }
}

@keyframes pdCheckParticleTwinkle {
  from { opacity: .22; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.45); }
}

@media (max-width: 560px) {
  .pd-feature-checkfx { --pd-check-size: 18px; }
  .pd-feature-checkfx__img { width: 18px !important; height: 18px !important; }
  .pd-feature-checkfx::after { width: 23px; height: 23px; }
  .pd-feature-checkfx::before { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-feature-checkfx::before,
  .pd-feature-checkfx::after,
  .pd-feature-checkfx__img,
  .pd-feature-checkfx__particles,
  .pd-feature-checkfx__particles > i {
    animation: none !important;
  }
}