/* =========================================================
   VIDEO GUIDE — MODALI IFRAME
   ========================================================= */

.video-guide-frame-anchor {
  position:
    relative;
}

.modal-video-guide-badge {
  position:
    absolute;

  top:
    6px;

  right:
    6px;

  z-index:
    10;

  width:
    30px !important;

  min-width:
    30px !important;

  max-width:
    30px !important;

  height:
    30px !important;

  min-height:
    30px !important;

  margin:
    0;

  padding:
    0 !important;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  color:
    #e8c77e;

  background:
    radial-gradient(
      circle at 38% 32%,
      rgba(
        219,
        178,
        98,
        0.2
      )
      0%,

      rgba(
        81,
        56,
        28,
        0.9
      )
      36%,

      rgba(
        29,
        22,
        15,
        0.98
      )
      72%,

      rgba(
        12,
        11,
        10,
        1
      )
      100%
    );

  box-shadow:
    0 0 0 1px
    rgba(
      205,
      157,
      78,
      0.46
    ),

    0 2px 5px
    rgba(
      0,
      0,
      0,
      0.62
    ),

    0 0 7px
    rgba(
      205,
      157,
      78,
      0.1
    ),

    inset 0 1px 0
    rgba(
      255,
      226,
      164,
      0.2
    );

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    17px;

  font-weight:
    900;

  font-style:
    normal;

  line-height:
    1;

  text-shadow:
    0 1px 1px
    rgba(
      0,
      0,
      0,
      0.92
    );

  cursor:
    pointer;

  opacity:
    0.92;

  transition:
    opacity 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;

  animation:
    modalVideoGuidePulse
    2.4s
    ease-in-out
    infinite;
}

.modal-video-guide-badge:hover {
  transform:
    scale(
      1.06
    );

  opacity:
    1;

  color:
    #ffe0a0;

  background:
    radial-gradient(
      circle at 38% 32%,
      rgba(
        238,
        194,
        106,
        0.27
      )
      0%,

      rgba(
        96,
        65,
        30,
        0.94
      )
      38%,

      rgba(
        33,
        24,
        15,
        0.99
      )
      72%,

      rgba(
        12,
        11,
        10,
        1
      )
      100%
    );

  filter:
    brightness(
      1.08
    );

  box-shadow:
    0 0 0 1px
    rgba(
      226,
      179,
      92,
      0.66
    ),

    0 3px 7px
    rgba(
      0,
      0,
      0,
      0.68
    ),

    0 0 10px
    rgba(
      226,
      179,
      92,
      0.2
    );
}

.modal-video-guide-badge:active {
  transform:
    scale(
      1.02
    );
}

.modal-video-guide-badge:focus,
.modal-video-guide-badge:focus-visible {
  outline:
    none;
}

.modal-video-guide-badge:focus-visible {
  box-shadow:
    0 0 0 1px
    rgba(
      226,
      179,
      92,
      0.74
    ),

    0 0 0 3px
    rgba(
      226,
      179,
      92,
      0.18
    );
}

@keyframes modalVideoGuidePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px
      rgba(
        205,
        157,
        78,
        0.42
      ),

      0 2px 5px
      rgba(
        0,
        0,
        0,
        0.62
      ),

      0 0 5px
      rgba(
        205,
        157,
        78,
        0.08
      );
  }

  50% {
    box-shadow:
      0 0 0 1px
      rgba(
        219,
        173,
        87,
        0.58
      ),

      0 2px 6px
      rgba(
        0,
        0,
        0,
        0.66
      ),

      0 0 9px
      rgba(
        219,
        173,
        87,
        0.18
      );
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .modal-video-guide-badge {
    animation:
      none;
  }
}