.lazzy-regional-player,
.regional-iframe {
  margin: 28px 0 38px;
}

.regional-player-stage,
.regional-iframe {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--lz-border-strong);
  border-radius: var(--lz-radius-lg);
  box-shadow: var(--lz-shadow);
}

.regional-player-video,
.regional-iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  border: 0;
  object-fit: contain;
}

.regional-player-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 212, 0, .14), transparent 30%),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(255,255,255,.025) 35px 36px),
    linear-gradient(135deg, #151b28, #07090d 72%);
  transition: opacity .25s ease;
}

.regional-player-poster img {
  width: min(50%, 280px);
  max-height: 45%;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}

.lazzy-regional-player.is-playing .regional-player-poster {
  opacity: 0;
  pointer-events: none;
}

.regional-player-badges {
  position: absolute;
  top: 18px;
  right: 18px;
  left: 18px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.regional-player-lcn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(7,9,13,.82);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lazzy-regional-player.overlays-hidden .regional-player-badges {
  opacity: 0;
  transform: translateY(-8px);
}

.regional-player-lcn {
  color: var(--lz-yellow);
  border-color: rgba(255,212,0,.24);
}

.regional-player-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  width: 72px;
  height: 72px;
  padding: 0;
  place-items: center;
  background: var(--lz-yellow);
  color: var(--lz-black);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  transform: translate(-50%,-50%);
}

.regional-player-center-play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
  fill: currentColor;
}

.lazzy-regional-player.is-playing .regional-player-center-play,
.lazzy-regional-player.is-loading .regional-player-center-play {
  opacity: 0;
  pointer-events: none;
}

.regional-player-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: none;
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,.22);
  border-top-color: var(--lz-yellow);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: regional-spin .8s linear infinite;
}

.lazzy-regional-player.is-loading .regional-player-loader {
  display: block;
}

@keyframes regional-spin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

.regional-player-status {
  position: absolute;
  top: 62px;
  right: 18px;
  left: 18px;
  z-index: 7;
  display: none;
  padding: 9px 11px;
  background: rgba(7,10,13,.86);
  color: #d7dbe2;
  border-radius: 8px;
  font-size: 13px;
}

.regional-player-status.is-visible { display: block; }
.regional-player-status.is-error { color: #ffb8b8; background: rgba(76,12,12,.9); }

.regional-player-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(to top,rgba(0,0,0,.92),transparent);
  transition: opacity .22s ease, transform .22s ease;
}

.lazzy-regional-player.controls-hidden .regional-player-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.regional-control {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  place-items: center;
  background: rgba(10,14,18,.76);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}

.regional-control:hover,
.regional-control:focus-visible,
.regional-control.is-active {
  background: rgba(28,31,35,.95);
  border-color: var(--lz-yellow);
}

.regional-control svg { width: 21px; height: 21px; fill: currentColor; }
.regional-volume { width: min(18vw,118px); min-width: 70px; accent-color: var(--lz-yellow); }
.regional-time { min-width: 42px; margin-left: auto; font-size: 12px; font-weight: 800; }

.regional-player-settings-panel {
  position: absolute;
  right: 10px;
  bottom: 60px;
  display: none;
  width: min(300px,calc(100vw - 24px));
  gap: 10px;
  padding: 12px;
  background: rgba(12,16,20,.97);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  box-shadow: var(--lz-shadow);
}

.regional-player-settings-panel.is-visible { display: grid; }
.regional-player-settings-panel label { display: grid; gap: 5px; color: var(--lz-muted); font-size: 12px; font-weight: 800; }
.regional-player-settings-panel select { min-height: 40px; padding: 7px 9px; background: var(--lz-surface); color: #fff; border: 1px solid var(--lz-border-strong); border-radius: 7px; }

.lazzy-regional-player figcaption,
.regional-iframe figcaption {
  margin-top: 10px;
  color: var(--lz-muted);
  font-size: 13px;
  text-align: center;
}

.regional-player-notice {
  padding: 16px 18px;
  background: rgba(255,212,0,.08);
  border: 1px solid rgba(255,212,0,.22);
  border-radius: 10px;
}

@media (max-width: 560px) {
  .regional-player-badges { top: 12px; right: 12px; left: 12px; }
  .regional-player-center-play { width: 60px; height: 60px; }
  .regional-control { width: 38px; height: 38px; flex-basis: 38px; }
  .regional-volume { width: 58px; min-width: 58px; }
  .regional-player-lcn { padding: 6px 8px; font-size: 9px; }
}