/* Cover */
.pcp-video-box .video-container {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.pcp-video-box .pcp-video-box-cover,
.pcp-video-box .pcp-video-box-cover video,
.pcp-video-box .li-video {
  display: block;
  width: 100%;
  height: auto;
}

.pcp-video-box-moShow {
  display: none !important;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .pcp-video-box-pcShow {
    display: none !important;
  }

  .pcp-video-box-moShow {
    display: block !important;
  }
}

.pcp-video-box-play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pcp-video-box-play-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* video-open.svg viewBox 120; drawn circle ~63 → scale box to match comps */
.pcp-overview .pcp-video-box-play-icon {
  width: 8.3333333333vw; /* PC ~160px @1920 */
  height: 8.3333333333vw;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pcp-video-box-play-btn:hover .pcp-video-box-play-icon {
  opacity: 1;
  transform: scale(1.04);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .pcp-overview .pcp-video-box-play-icon {
    width: 25.6vw; /* Mobile ~96px @375 */
    height: 25.6vw;
  }
}

/* Modal */
.pcp-video-box-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-pcp-video-box-modal] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: rgb(0, 0, 0);
  display: none;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

[data-pcp-video-box-modal].is-active {
  display: flex;
}

[data-pcp-video-box-modal] .pcp-video-box-shell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: clamp(72px, 12vh, 120px) clamp(24px, 5vw, 80px) clamp(96px, 14vh, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

[data-pcp-video-box-modal] .pcp-video-box-close {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 3vh, 48px);
  right: clamp(16px, 3vw, 48px);
  width: clamp(36px, 2.5vw, 48px);
  height: clamp(36px, 2.5vw, 48px);
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
}

[data-pcp-video-box-modal] .pcp-video-box-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

[data-pcp-video-box-modal] .pcp-video-box-close-icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  [data-pcp-video-box-modal] .pcp-video-box-shell {
    padding: max(56px, 12vw) max(16px, 4vw) max(72px, 18vw);
  }

  [data-pcp-video-box-modal] .pcp-video-box-close {
    top: max(20px, 4vw);
    right: max(16px, 4vw);
    width: max(40px, 10.6666666667vw);
    height: max(40px, 10.6666666667vw);
  }

  [data-pcp-video-box-modal] .pcp-video-box-close-icon {
    width: 16px;
    height: 16px;
  }
}

[data-pcp-video-box-modal] .pcp-video-box-video-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: min(1280px, 92vw);
  max-height: min(72vh, calc(100dvh - 160px));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  [data-pcp-video-box-modal] .pcp-video-box-video-wrap {
    max-width: min(96vw, 920px);
    max-height: min(calc(100dvh - 140px), 56vh);
  }
}

[data-pcp-video-box-modal] .pcp-video-box-video-wrap video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pcp-video-box-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px clamp(16px, 3vw, 48px);
  padding: clamp(12px, 2vh, 24px) clamp(24px, 4vw, 80px)
    clamp(max(28px, env(safe-area-inset-bottom)), 4vh, 48px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

.pcp-video-box-cc-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff !important;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pcp-video-box-cc-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

.pcp-video-box-cc-btn svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.pcp-video-box-cc-btn svg [stroke] {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.pcp-video-box-cc-btn svg [fill]:not([fill='none']) {
  fill: currentColor;
  stroke: none;
}

.pcp-video-box-cc-progress {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.js-pcp-video-box-seek {
  width: 100%;
  accent-color: #fff;
  height: 4px;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .pcp-video-box-controls {
    gap: 8px;
    padding: 12px max(12px, 3.2vw)
      calc(16px + env(safe-area-inset-bottom, 0));
  }

  .pcp-video-box-cc-btn {
    width: 36px;
    height: 36px;
  }

  .pcp-video-box-cc-btn svg {
    width: 22px;
    height: 22px;
  }
}

.pcp-video-box-fs-icon {
  stroke: currentColor;
}

.js-pcp-video-box-shell:fullscreen {
  padding: 0;
  background: #000;
}

.js-pcp-video-box-shell:-webkit-full-screen {
  padding: 0;
  background: #000;
}

.js-pcp-video-box-shell:fullscreen .pcp-video-box-video-wrap {
  flex: 1;
  max-width: none;
  max-height: none;
}

.js-pcp-video-box-shell:-webkit-full-screen .pcp-video-box-video-wrap {
  flex: 1;
  max-width: none;
  max-height: none;
}

.js-pcp-video-box-shell:fullscreen .pcp-video-box-controls {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
}

.js-pcp-video-box-shell:-webkit-full-screen .pcp-video-box-controls {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
}