:root {
  --magicplayer-blue: #0c66e4;
  --magicplayer-blue-dark: #0747a6;
  --magicplayer-blue-soft: #e9f2ff;
  --magicplayer-text: #172b4d;
  --magicplayer-border: #dfe1e6;
  --plyr-color-main: var(--magicplayer-blue);
}

.magicplayer-player,
.wp-block-magicplayer-player {
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-control-background-hover: var(--magicplayer-blue);
  --plyr-menu-background: #ffffff;
  --plyr-menu-color: var(--magicplayer-text);
  --plyr-tooltip-background: #172b4d;
  --plyr-tooltip-color: #ffffff;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  margin: 1.25rem 0;
  line-height: 1.5;
  overflow: visible;
}

.magicplayer-player *,
.magicplayer-player *::before,
.magicplayer-player *::after,
.wp-block-magicplayer-player *,
.wp-block-magicplayer-player *::before,
.wp-block-magicplayer-player *::after {
  box-sizing: border-box;
}

.magicplayer-player > .plyr,
.wp-block-magicplayer-player.plyr,
.wp-block-magicplayer-player > .plyr {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  border-radius: 16px;
  border: 1px solid rgba(9, 30, 66, 0.12);
  box-shadow: 0 12px 32px rgba(9, 30, 66, 0.18);
  background: #0b1220;
}

.magicplayer-player > .plyr video,
.magicplayer-player > .plyr audio,
.magicplayer-player > .plyr iframe,
.wp-block-magicplayer-player.plyr video,
.wp-block-magicplayer-player.plyr iframe {
  display: block;
  margin: 0;
  padding: 0;
}

.magicplayer-player > .plyr audio {
  display: inherit;
}

.magicplayer-player .plyr__video-wrapper,
.wp-block-magicplayer-player.plyr .plyr__video-wrapper,
.magicplayer-player .plyr__video-embed,
.wp-block-magicplayer-player.plyr .plyr__video-embed {
  overflow: hidden;
  border-radius: 16px;
  background: #0b1220;
}

.magicplayer-player .plyr--video .plyr__controls,
.wp-block-magicplayer-player.plyr--video .plyr__controls,
.wp-block-magicplayer-player .plyr--video .plyr__controls {
  bottom: 0 !important;
  left: 0;
  right: 0;
  z-index: 5;
  min-height: 72px;
  padding: 34px 14px 18px !important;
  align-items: center;
  overflow: visible !important;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(9, 30, 66, 0) 0%, rgba(9, 30, 66, 0.86) 46%, rgba(9, 30, 66, 0.96) 100%);
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  transform-origin: bottom center;
}

.magicplayer-player .plyr--video:not(.plyr--hide-controls) .plyr__controls,
.wp-block-magicplayer-player.plyr--video:not(.plyr--hide-controls) .plyr__controls,
.wp-block-magicplayer-player .plyr--video:not(.plyr--hide-controls) .plyr__controls {
  transform: translateY(0) !important;
}

.magicplayer-player .plyr--video.plyr--hide-controls .plyr__controls,
.wp-block-magicplayer-player.plyr--video.plyr--hide-controls .plyr__controls,
.wp-block-magicplayer-player .plyr--video.plyr--hide-controls .plyr__controls {
  transform: translateY(calc(100% + 10px)) !important;
}

.magicplayer-player .plyr__controls__item,
.magicplayer-player .plyr__control,
.magicplayer-player .plyr__progress,
.magicplayer-player .plyr__progress__container,
.magicplayer-player .plyr__volume,
.wp-block-magicplayer-player .plyr__controls__item,
.wp-block-magicplayer-player .plyr__control,
.wp-block-magicplayer-player .plyr__progress,
.wp-block-magicplayer-player .plyr__progress__container,
.wp-block-magicplayer-player .plyr__volume {
  min-height: 30px;
  overflow: visible !important;
}

.magicplayer-player .plyr--full-ui input[type='range'],
.wp-block-magicplayer-player .plyr--full-ui input[type='range'] {
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.magicplayer-player .plyr__control--overlaid,
.wp-block-magicplayer-player .plyr__control--overlaid {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, var(--magicplayer-blue), var(--magicplayer-blue-dark));
  box-shadow: 0 18px 44px rgba(12, 102, 228, 0.35);
}

.magicplayer-player .plyr__control--overlaid:hover,
.magicplayer-player .plyr__control--overlaid:focus,
.wp-block-magicplayer-player .plyr__control--overlaid:hover,
.wp-block-magicplayer-player .plyr__control--overlaid:focus {
  background: linear-gradient(135deg, #1d7afc, var(--magicplayer-blue));
}

.magicplayer-player .plyr__menu__container,
.wp-block-magicplayer-player .plyr__menu__container {
  z-index: 10;
  border: 1px solid var(--magicplayer-border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(9, 30, 66, 0.18);
}

.magicplayer-player.plyr__video-embed,
.magicplayer-player .plyr__video-embed,
.wp-block-magicplayer-player.plyr__video-embed,
.wp-block-magicplayer-player .plyr__video-embed {
  border-radius: 16px;
}

.magicplayer-player .plyr__video-embed iframe,
.wp-block-magicplayer-player .plyr__video-embed iframe {
  top: -50% !important;
  height: 200% !important;
}

@media (max-width: 640px) {
  .magicplayer-player .plyr--video .plyr__controls,
  .wp-block-magicplayer-player.plyr--video .plyr__controls,
  .wp-block-magicplayer-player .plyr--video .plyr__controls {
    min-height: 68px;
    padding: 30px 10px 16px !important;
    gap: 2px;
  }

  .magicplayer-player .plyr__control,
  .wp-block-magicplayer-player .plyr__control {
    padding-right: 6px;
    padding-left: 6px;
  }

  .magicplayer-player .plyr__control--overlaid,
  .wp-block-magicplayer-player .plyr__control--overlaid {
    width: 62px;
    height: 62px;
  }
}

/* Permanent MagicPlayer/Plyr layout guard: keep controls fully visible. */
.magicplayer-player,
.wp-block-magicplayer-player,
.magicplayer-player > .plyr,
.wp-block-magicplayer-player.plyr,
.wp-block-magicplayer-player > .plyr {
  overflow: visible !important;
}

.magicplayer-player .plyr--video,
.wp-block-magicplayer-player.plyr--video,
.wp-block-magicplayer-player .plyr--video {
  overflow: hidden;
  padding-bottom: 0;
}

.magicplayer-player .plyr--video .plyr__controls,
.wp-block-magicplayer-player.plyr--video .plyr__controls,
.wp-block-magicplayer-player .plyr--video .plyr__controls {
  height: auto !important;
  min-height: 0 !important;
  padding-top: calc(var(--plyr-control-spacing, 10px) * 2.5) !important;
  padding-bottom: calc(var(--plyr-control-spacing, 10px) * 2.5) !important;
  overflow: visible !important;
}

@media (min-width: 480px) {
  .magicplayer-player .plyr--video .plyr__controls,
  .wp-block-magicplayer-player.plyr--video .plyr__controls,
  .wp-block-magicplayer-player .plyr--video .plyr__controls {
    padding: 10px !important;
    padding: var(--plyr-control-spacing, 10px) !important;
    padding-top: 35px !important;
    padding-top: calc(var(--plyr-control-spacing, 10px) * 2.5) !important;
    padding-bottom: calc(var(--plyr-control-spacing, 10px) * 2.5) !important;
  }
}

@media (max-width: 479px) {
  .magicplayer-player .plyr--video .plyr__controls,
  .wp-block-magicplayer-player.plyr--video .plyr__controls,
  .wp-block-magicplayer-player .plyr--video .plyr__controls {
    padding-top: calc(var(--plyr-control-spacing, 10px) * 2) !important;
    padding-bottom: calc(var(--plyr-control-spacing, 10px) * 2) !important;
  }
}