body { 
  font-family: "Montserrat", sans-serif; 
}

/* ========================================= FLOATING CONTAINER ========================================= */
.vp-floating-video { 
  position: fixed !important; 
  top: 230px !important; 
  right: 30px !important; 
  bottom: auto !important; 
  left: auto !important; 
  z-index: 999999 !important; 
  transform: translateX(calc(100% + 80px)); 
  opacity: 0; 
  pointer-events: none; 
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; 
}

.vp-floating-video.vp-visible { 
  transform: translateX(0); 
  opacity: 1; 
  pointer-events: auto; 
}

/* ========================================= VIDEO BUTTON ========================================= */
.vp-elmo-button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  box-sizing: border-box; 
  max-width: calc(100vw - 80px); 
  padding: 10px 16px; 
  gap: 10px; 
  background-color: rgba(0, 0, 0, 0.82)!important; 
  color: #ffffff; 
  text-decoration: none; 
  font-family: "Montserrat", sans-serif; 
  font-size: 21px; 
  font-weight: 500; 
  line-height: 1.2; 
  letter-spacing: -0.5px; 
  border: 3px solid #ffffff; 
  border-radius: 10px; 
  cursor: pointer; 
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35); 
  animation: borderGlow 1.5s infinite alternate ease-in-out; 
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; 
}

/* ========================================= PLAY ICON ========================================= */
.vp-elmo-button .play-icon { 
  width: 52px; 
  height: 52px; 
  flex: 0 0 auto; 
  pointer-events: none; 
}

/* ========================================= HOVER ========================================= */
.vp-elmo-button:hover { 
  background-color: rgba(0, 0, 0, 0.9); 
  color: #e31837; 
  transform: translateY(-2px); 
  animation-duration: 0.8s; 
}

/* ========================================= ACTIVE ========================================= */
.vp-elmo-button:active { 
  transform: scale(0.96); 
}

/* ========================================= CLOSE BUTTON TOP-LEFT WITH GAP ========================================= */
.vp-close-button { 
  position: absolute !important; 
  top: -42px !important; 
  left: -18px !important; 
  right: auto !important; 
  width: 32px; 
  height: 32px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 
  border: none !important; 
  background: rgba(0, 0, 0, 0.5) !important; 
  color: #ffffff !important; 
  font-family: Arial, sans-serif; 
  font-size: 24px; 
  font-weight: 400; 
  line-height: 1; 
  border-radius: 50%; 
  cursor: pointer; 
  z-index: 100; 
  box-shadow: none; 
  transition: transform 0.2s ease, background-color 0.2s ease; 
}

/* ========================================= CLOSE BUTTON HOVER ========================================= */
.vp-close-button:hover { 
  background: rgba(0, 0, 0, 0.7) !important; 
  transform: scale(1.1); 
}

/* ========================================= GLOW ========================================= */
@keyframes borderGlow { 
  0% { 
    border-color: rgba(255, 255, 255, 0.9); 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.45), 0 5px 20px rgba(0, 0, 0, 0.35); 
  } 
  100% { 
    border-color: #e31837; 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 12px rgba(227, 24, 55, 0.65), 0 5px 20px rgba(0, 0, 0, 0.35); 
  } 
}

/* ========================================= ACCESSIBILITY ========================================= */
.vp-elmo-button:focus-visible, .vp-close-button:focus-visible { 
  outline: 3px solid #e31837; 
  outline-offset: 3px; 
}

/* ========================================= TABLET ========================================= */
@media (min-width: 600px) and (max-width: 1024px) { 
  .vp-floating-video { 
    top: 25px !important; 
    right: 25px !important; 
    transform: translateX(calc(100% + 60px)); 
  } 
  .vp-floating-video.vp-visible { 
    transform: translateX(0); 
  } 
  .vp-elmo-button { 
    padding: 10px 16px; 
    gap: 9px; 
    font-size: 18px; 
    letter-spacing: -0.4px; 
    border-radius: 9px; 
  } 
  .vp-elmo-button .play-icon { 
    width: 40px; 
    height: 40px; 
  } 
  .vp-close-button { 
    width: 28px; 
    height: 28px; 
    top: -38px !important; 
    left: -15px !important; 
    font-size: 21px; 
  } 
}

/* ========================================= MOBILE ========================================= */
@media (max-width: 599px) { 
  .vp-floating-video { 
    top: 20px !important; 
    right: 20px !important; 
    transform: translateX(calc(100% + 50px)); 
  } 
  .vp-floating-video.vp-visible { 
    transform: translateX(0); 
  } 
  .vp-elmo-button { 
    max-width: calc(100vw - 60px); 
    padding: 7px 10px; 
    gap: 6px; 
    font-size: 12px; 
    border-width: 2px; 
    border-radius: 7px; 
  } 
  .vp-elmo-button .play-icon { 
    width: 25px; 
    height: 25px; 
  } 
  .vp-close-button { 
    width: 24px; 
    height: 24px; 
    top: -30px !important; 
    left: -10px !important; 
    font-size: 18px; 
  } 
}

/* ========================================= REDUCED MOTION ========================================= */
@media (prefers-reduced-motion: reduce) { 
  .vp-floating-video { 
    transition: none; 
  } 
  .vp-elmo-button { 
    animation: none; 
    transition: none; 
  } 
}

/* ========================================= CLOSED ========================================= */
.vp-floating-video.vp-closed { 
  transform: translateX(calc(100% + 80px)) !important; 
  opacity: 0; 
  pointer-events: none; 
}