/* ==========================================================================
   Standard Interactive Tour Play Button Component
   Multi-layer Pulse & Ripple Wave Animation
   ========================================================================== */

/* 1. Spacing wrapper for toolbars */
.rscan-tour-play-wrapper {
  margin-left: 16px !important;
  padding-left: 16px !important;
  border-left: 1.5px solid #dbe3ec;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 38px;
}

/* 2. Prominent 3D Elevated Play Button with Multi-layer Ripple Waves */
.btn-tour-play,
.rscan-p1-tour-play-btn,
.rscan-tour-play-btn {
  position: relative;
  z-index: 100;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 3px solid #01b8aa !important;
  background: linear-gradient(145deg, #00dcd0 0%, #008ca8 50%, #004081 100%) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
  box-shadow:
    0 0 0 5px rgba(1, 184, 170, 0.20),
    0 8px 18px rgba(0, 64, 129, 0.22) !important;
  filter: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
  outline: none !important;
  text-decoration: none !important;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 3. Multi-layer Ripple Wave Rings */
.btn-tour-play::before,
.btn-tour-play::after,
.rscan-p1-tour-play-btn::before,
.rscan-p1-tour-play-btn::after,
.rscan-tour-play-btn::before,
.rscan-tour-play-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0, 220, 208, 0.65);
  pointer-events: none;
  animation: rscanTourRingPulse 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  box-sizing: border-box;
}

.btn-tour-play::after,
.rscan-p1-tour-play-btn::after,
.rscan-tour-play-btn::after {
  inset: -12px;
  border-color: rgba(0, 140, 168, 0.45);
  animation-delay: 1.4s;
}

/* 4. Hover & Focus States */
.btn-tour-play:hover,
.btn-tour-play:focus-visible,
.rscan-p1-tour-play-btn:hover,
.rscan-p1-tour-play-btn:focus-visible,
.rscan-tour-play-btn:hover,
.rscan-tour-play-btn:focus-visible {
  transform: scale(1.08) translateY(-2px);
  background: linear-gradient(145deg, #0fe8dc 0%, #00a4c5 50%, #0052a3 100%) !important;
  border-color: #00f0e2 !important;
  box-shadow:
    0 0 0 7px rgba(1, 184, 170, 0.32),
    0 12px 26px rgba(0, 64, 129, 0.35) !important;
  color: #ffffff !important;
}

/* 5. Active (Click) State */
.btn-tour-play:active,
.rscan-p1-tour-play-btn:active,
.rscan-tour-play-btn:active {
  transform: scale(0.96) translateY(0);
}

/* 6. Playing State (.is-playing) */
.btn-tour-play.is-playing,
.rscan-p1-tour-play-btn.is-playing,
.rscan-tour-play-btn.is-playing {
  background: linear-gradient(145deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  box-shadow:
    0 0 0 6px rgba(239, 68, 68, 0.28),
    0 8px 20px rgba(185, 28, 28, 0.35) !important;
  animation: rscanTourPlayPulse 1.6s ease-in-out infinite !important;
}

/* Hide ripples when playing */
.btn-tour-play.is-playing::before,
.btn-tour-play.is-playing::after,
.rscan-p1-tour-play-btn.is-playing::before,
.rscan-p1-tour-play-btn.is-playing::after,
.rscan-tour-play-btn.is-playing::before,
.rscan-tour-play-btn.is-playing::after {
  display: none !important;
}

/* 7. Icon inside Play Button */
.btn-tour-play i,
.rscan-p1-tour-play-btn i,
.rscan-tour-play-btn i {
  font-size: 15px;
  margin-left: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  color: #ffffff;
  transition: transform 0.2s ease, margin-left 0.2s ease;
}

.btn-tour-play.is-playing i,
.rscan-p1-tour-play-btn.is-playing i,
.rscan-tour-play-btn.is-playing i {
  margin-left: 0 !important;
}

/* 8. Keyframe Animations */
@keyframes rscanTourPlayPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes rscanTourRingPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Backward compatibility for existing keyframes */
@keyframes rscanPlayPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes rscanRingPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes rscanP2PlayBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}