/*
 * Matches the look of the original raw-HTML Wistia embed (popup 148285):
 * 16:9 box (the embed's padding:56.25%), Wistia's 12px rounded player,
 * 2px #003399 border and soft drop shadow.
 *
 * Scoped under .elementor-widget-hd-video-modal so the legacy
 * `.custom-wistia-wrapper { height: ... }` rules still shipped in old
 * Elementor global widgets' custom CSS can't override the sizing here.
 */
.elementor-widget-hd-video-modal .custom-wistia-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid #003399;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Same 16:9 sizing technique as the embed itself: padding-top is a % of
   the width inside the border, so the box ends up pixel-identical. */
.elementor-widget-hd-video-modal .custom-wistia-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.elementor-widget-hd-video-modal .custom-wistia-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* After click the player is injected with its own 56.25% padding box; let
   it fill the wrapper instead of adding height on top of aspect-ratio. */
.elementor-widget-hd-video-modal .custom-wistia-wrapper .wistia_responsive_padding {
  position: absolute !important;
  inset: 0;
  padding: 0 !important;
}

/* Keyboard focus on the play target (role="button"); drawn outside the
   border so overflow:hidden doesn't clip it. */
.elementor-widget-hd-video-modal .custom-wistia-wrapper:focus-visible {
  outline: 3px solid #003399;
  outline-offset: 3px;
}

.elementor-widget-hd-video-modal .custom-wistia-wrapper[data-playing] {
  cursor: auto;
}