/* Bloooom MOBIBASE - Live TV player. Everything is scoped under .mobibase-player-container; nothing touches the theme.
   Mobile-first, 16:9, black stage, logical properties for RTL. Works in Vamos, DefaultClean and wrapped WebViews. */
.mobibase-player-container {
  --mobibase-radius: 12px;
  --mobibase-accent: #E53935;
  --mobibase-overlay: rgba(0, 0, 0, .55);
  --mobibase-text: #fff;
  clear: both;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 20px;
  position: relative;
  background: #000;
  border-radius: var(--mobibase-radius);
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.mobibase-player-container *,
.mobibase-player-container *::before,
.mobibase-player-container *::after { box-sizing: border-box; }
.mobibase-player-container [hidden] { display: none !important; }

.mobibase-player-wrapper { width: 100%; }

/* 16:9 stage. aspect-ratio where supported, padding-top fallback for older WebViews. */
.mobibase-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  color: var(--mobibase-text);
  font-family: inherit;
  line-height: 1.4;
}
@supports not (aspect-ratio: 16 / 9) {
  .mobibase-player { height: 0; padding-top: 56.25%; }
}

.mobibase-player-video {
  position: absolute;
  inset: 0;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
  border: 0;
  outline: none;
}

/* LIVE badge */
.mobibase-player-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--mobibase-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}
.mobibase-player-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: mobibase-pulse 1.6s ease-in-out infinite;
}
.mobibase-player-badge-static { position: static; margin-bottom: 12px; }

/* Overlays: loading, error, big play button, login gate */
.mobibase-player-loading,
.mobibase-player-error,
.mobibase-player-gate-body {
  position: absolute;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  text-align: center;
  background: var(--mobibase-overlay);
  color: var(--mobibase-text);
  font-size: 15px;
}
.mobibase-player-error p,
.mobibase-player-gate-body p { margin: 0; max-width: 420px; }

.mobibase-player-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  animation: mobibase-spin .9s linear infinite;
}

.mobibase-player-button {
  display: inline-block;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.mobibase-player-button:hover,
.mobibase-player-button:focus-visible { background: #f1f1f1; color: #111; text-decoration: none; }

.mobibase-player-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 0;
  border-radius: 50%;
  background: var(--mobibase-overlay);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobibase-player-play svg { margin-inline-start: 4px; }
.mobibase-player-play:hover,
.mobibase-player-play:focus-visible { background: rgba(0, 0, 0, .75); }

.mobibase-player-unmute {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mobibase-player-unmute:hover,
.mobibase-player-unmute:focus-visible { background: rgba(0, 0, 0, .85); }

.mobibase-player-play:focus-visible,
.mobibase-player-unmute:focus-visible,
.mobibase-player-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Fullscreen: the <video> goes fullscreen natively; this keeps the stage black if the container is used instead. */
.mobibase-player-container:fullscreen { border-radius: 0; }
.mobibase-player-container:fullscreen .mobibase-player { aspect-ratio: auto; height: 100%; }

@keyframes mobibase-spin { to { transform: rotate(360deg); } }
@keyframes mobibase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .mobibase-player-spinner { animation-duration: 2.4s; }
  .mobibase-player-badge::before { animation: none; }
}

@media (max-width: 480px) {
  .mobibase-player-container { --mobibase-radius: 8px; margin-bottom: 14px; }
  .mobibase-player-loading,
  .mobibase-player-error,
  .mobibase-player-gate-body { font-size: 14px; gap: 10px; }
  .mobibase-player-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .mobibase-player-unmute span { display: none; }
}