/**
 * IMA Plugin — Halkidiki Fantasy Theme Override
 * Matches Video.js Fantasy theme 1:1: shapes, sizes, borders, gradients
 */

.ima-ad-container {
  top: 0;
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
}

/* Bump overlay when controls visible */
.video-js.vjs-playing .bumpable-ima-ad-container { margin-top: -54px; }
.video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container { margin-top: 0; }
.video-js.vjs-paused .bumpable-ima-ad-container,
.video-js.vjs-playing:hover .bumpable-ima-ad-container,
.video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container { margin-top: -54px; }

/* ── Control bar: same as fantasy ── */
.ima-controls-div {
  bottom: 0;
  height: 54px;
  position: absolute;
  overflow: visible;
  display: none;
  opacity: 1;
  background: linear-gradient(transparent, rgba(0, 40, 70, .85));
  width: 100%;
}
.ima-controls-div.ima-controls-div-showing {
  height: 54px;
}

/* ── Countdown label ── */
.ima-countdown-div {
  position: absolute;
  top: -28px;
  left: 12px;
  height: auto;
  padding: 4px 12px;
  color: #fff;
  font-size: 12px;
  font-family: -apple-system, 'Inter', sans-serif;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  background: rgba(0, 40, 70, .6);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  cursor: default;
  letter-spacing: .3px;
}

/* ── Progress bar: matches fantasy 1.5em (≈21px) ── */
.ima-seek-bar-div {
  top: -3px;
  left: 0;
  right: 0;
  height: 6px;
  position: absolute;
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
  transition: height .1s;
}
.ima-controls-div:hover .ima-seek-bar-div {
  height: 8px;
  top: -4px;
}

.ima-progress-div {
  width: 0;
  height: 100%;
  background-color: #0077b6;
  border-radius: 3px;
  position: relative;
}
/* Dot handle — matches fantasy .vjs-play-progress:before */
.ima-progress-div::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #0077b6;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
}

/* ── Buttons: same size/position as fantasy ── */
.ima-play-pause-div, .ima-mute-div, .ima-slider-div, .ima-fullscreen-div {
  width: 40px;
  height: 40px;
  top: 7px;
  left: 8px;
  position: absolute;
  color: #fff;
  font-size: 1.3em;
  line-height: 40px;
  text-align: center;
  font-family: VideoJS;
  cursor: pointer;
  transition: text-shadow .15s;
}

/* Play/pause icon in circle — fantasy signature */
.ima-playing:before, .ima-paused:before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}
.ima-playing:before { content: "\00f103"; }
.ima-paused:before { content: "\00f101"; }
.ima-playing:hover:before, .ima-paused:hover:before {
  text-shadow: 0 0 .8em rgba(255,255,255,.8);
  border-color: #fff;
}

/* Mute */
.ima-mute-div {
  left: auto;
  right: 88px;
}
.ima-non-muted:before { content: "\00f107"; }
.ima-muted:before { content: "\00f104"; }
.ima-non-muted:hover:before, .ima-muted:hover:before {
  text-shadow: 0 0 .8em rgba(255,255,255,.8);
}

/* Volume slider */
.ima-slider-div {
  left: auto;
  right: 44px;
  width: 44px;
  height: 6px;
  top: 24px;
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
}
.ima-slider-level-div {
  width: 100%;
  height: 6px;
  background: #0077b6;
  border-radius: 3px;
}

/* Fullscreen */
.ima-fullscreen-div {
  left: auto;
  right: 4px;
}
.ima-non-fullscreen:before { content: "\00f108"; }
.ima-fullscreen:before { content: "\00f109"; }
.ima-non-fullscreen:hover:before, .ima-fullscreen:hover:before {
  text-shadow: 0 0 .8em rgba(255,255,255,.8);
}