/* ==========================================================================
   Enxora Stream - Standalone Premium Video Player Styling
   Design System: Harmonious Dark Glassmorphism, Micro-Animations, Premium Transitions
   ========================================================================== */

:root {
  --enxora-primary: #0ea5e9;
  --enxora-primary-hover: #0284c7;
  --enxora-bg: #0f172a;
  --enxora-text: #f8fafc;
  --enxora-text-muted: #94a3b8;
  --enxora-glass: rgba(15, 23, 42, 0.85);
  --enxora-border: rgba(255, 255, 255, 0.08);
}

.enxora-player-container {
  position: relative;
  overflow: hidden;
  background: var(--enxora-bg);
  border-radius: 24px;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', sans-serif;
  user-select: none;
  contain: paint;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.enxora-player-container:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

/* Completely hide the custom hover-to-pause centerpiece button when playing in fullscreen to ensure a clean cinematic view */
.enxora-player-container:fullscreen .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:fullscreen:hover .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:fullscreen:hover .enxora-mid-btn.enxora-mid-playing:hover,
.enxora-player-container:-webkit-full-screen .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:-webkit-full-screen:hover .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:-webkit-full-screen:hover .enxora-mid-btn.enxora-mid-playing:hover,
.enxora-player-container:-moz-full-screen .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:-moz-full-screen:hover .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container:-moz-full-screen:hover .enxora-mid-btn.enxora-mid-playing:hover {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.enxora-player-container:fullscreen video,
.enxora-player-container:fullscreen iframe {
  border-radius: 0 !important;
}

.enxora-video-element,
.enxora-iframe-element {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  transition: filter 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  filter: blur(0) brightness(1) !important;
  opacity: 1 !important;
}

/* When paused: deeply blur and dim the background media iframe/video to hide all native YouTube overlays */
.enxora-player-container.enxora-paused-state .enxora-iframe-element,
.enxora-player-container.enxora-paused-state .enxora-video-element {
  opacity: 0.08 !important;
}

/* Secure Click Shield */
.enxora-click-shield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 75px);
  z-index: 10;
  cursor: pointer;
  transform: translateZ(0);
}

/* Floating Control Bar */
/* Floating Control Bar - Premium frosted-glass luxury design */
.enxora-controls {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: calc(100% - 28px);
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.92) 0%, rgba(5, 7, 12, 0.96) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2147483647;
  color: var(--enxora-text);
  border-radius: 20px;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.6), 
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: opacity 0.15s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.15s ease;
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

.enxora-controls:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.7), 
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.enxora-controls.hidden {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;
}

/* Auto-hide mouse cursor during active video playback when controls fade out */
.enxora-player-container.enxora-controls-hidden {
  cursor: none !important;
}

/* Auto-hide custom central play/pause centerpiece button when controls fade out, overriding all hover specificity */
.enxora-player-container.enxora-controls-hidden .enxora-mid-btn,
.enxora-player-container.enxora-controls-hidden:hover .enxora-mid-btn,
.enxora-player-container.enxora-controls-hidden:hover .enxora-mid-btn.enxora-mid-playing,
.enxora-player-container.enxora-controls-hidden:hover .enxora-mid-btn.enxora-mid-playing:hover {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Branded Center Circular Pause Button covering any underlying YouTube paused logos */
.enxora-mid-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 15;
  cursor: pointer;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #090d16 !important; /* 100% opaque to completely hide and block underlying YouTube pause logos */
  border: 2.5px solid rgba(255, 255, 255, 0.12) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(14, 165, 233, 0.15) !important;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s ease, border-color 0.25s ease !important;
  opacity: 1;
  pointer-events: auto;
  padding: 12px;
  box-sizing: border-box;
}

.enxora-mid-btn:hover {
  background: #111827 !important; /* Sleek hover solid dark gray */
  border-color: var(--enxora-primary) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 40px rgba(14, 165, 233, 0.3) !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
}

.enxora-mid-brand-logo {
  width: 70px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.enxora-mid-btn:hover .enxora-mid-brand-logo {
  transform: scale(1.08);
}

/* Playing state: hide button by default, fade in a custom Pause Icon on container hover */
.enxora-mid-btn.enxora-mid-playing {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.8) !important;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.enxora-player-container:hover .enxora-mid-btn.enxora-mid-playing {
  opacity: 0.72 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.enxora-player-container:hover .enxora-mid-btn.enxora-mid-playing:hover {
  opacity: 0.95 !important;
  background: #090d16 !important;
  border-color: var(--enxora-primary) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 40px rgba(14, 165, 233, 0.3) !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* Pause Icon inside circular button template styles */
.enxora-mid-pause-icon {
  font-size: 38px !important;
  color: white !important;
  display: none !important;
}

.enxora-mid-btn.enxora-mid-playing .enxora-mid-brand-logo {
  display: none !important;
}

.enxora-mid-btn.enxora-mid-playing .enxora-mid-pause-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* SVG icon — fixed 32px box inside 72px circle = 20px breathing room each side */
.enxora-mid-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

/* Progress Bar */
.enxora-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: height;
}

.enxora-progress-bar:hover {
  height: 6px;
}

.enxora-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--enxora-primary) 0%, #06b6d4 100%);
  border-radius: 100px;
  position: relative;
  transition: none !important;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
  will-change: width;
}

/* Scrub Grabber Dot */
.enxora-progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--enxora-primary);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.8), 0 0 24px rgba(6, 182, 212, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.enxora-progress-bar:hover .enxora-progress-fill::after {
  transform: translateY(-50%) scale(1);
}

/* Premium Glowing Brand Title Tag */
.enxora-brand-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  user-select: none;
}

.enxora-controls-brand-logo {
  height: 25px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 5px var(--enxora-primary));
  animation: pulseBrand 2.5s infinite ease-in-out;
}

.enxora-brand-title span {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff 40%, var(--enxora-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes pulseBrand {
  0%, 100% { opacity: 0.85; transform: scale(1); filter: drop-shadow(0 0 4px var(--enxora-primary)); }
  50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 8px var(--enxora-primary)); }
}

/* Controls Layout Rows */
.enxora-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.enxora-controls-left,
.enxora-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */
.enxora-btn {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.12s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, background-color, box-shadow;
}

.enxora-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.enxora-btn-play {
  background-color: #4bdb37;
  color: white !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

.enxora-btn-play i {
  color: white !important;
  
}

.enxora-btn-play i.bx-pause {
  font-size: 15px !important;
}

.enxora-btn-play:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
  background-color: #0284c7;
}

/* Display Elements */
.enxora-time-display {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--enxora-text-muted);
  user-select: none;
  margin-left: 4px;
}

/* Volume Container */
.enxora-vol-container {
  display: flex;
  align-items: center;
  gap: 0;
  transition: gap 0.2s ease;
}

.enxora-volume-slider {
  width: 0;
  opacity: 0;
  pointer-events: none;
  accent-color: #4bdb37;
  cursor: pointer;
  height: 4px;
  transition: width 0.18s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.12s ease, margin 0.12s;
  margin-left: 0;
  will-change: width, opacity, margin-left;
}

.enxora-vol-container:hover .enxora-volume-slider,
.enxora-vol-container:focus-within .enxora-volume-slider {
  width: 70px;
  opacity: 1;
  pointer-events: auto;
  margin-left: 6px;
}

/* Playback Speed picker */
.enxora-speed-container {
  position: relative;
  display: inline-block;
}

.enxora-speed-menu {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translate3d(-50%, 10px, 0);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
  width: 80px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 2147483647;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.12s ease, visibility 0.12s;
  will-change: transform, opacity;
}

.enxora-speed-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.enxora-speed-option {
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--enxora-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.enxora-speed-option:hover {
  background: var(--enxora-primary);
  color: white;
}

.enxora-speed-option.active {
  color: var(--enxora-primary);
  background: rgba(14, 165, 233, 0.1);
  font-weight: 800;
}

.enxora-speed-option.active:hover {
  color: white;
  background: var(--enxora-primary);
}

/* Glassmorphic Quality Toast */
.enxora-quality-toast {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.enxora-quality-toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.enxora-quality-toast i {
  color: var(--enxora-primary);
  font-size: 16px;
  filter: drop-shadow(0 0 3px var(--enxora-primary));
}

.enxora-quality-toast span {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: white;
  letter-spacing: 0.5px;
}

/* Uniform Subtitles Overlay style */
.enxora-subtitles-overlay {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483644;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  max-width: 85%;
  white-space: pre-wrap;
  pointer-events: none;
  display: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  transition: opacity 0.2s ease;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.2px;
}

/* Settings Menu elements */
.enxora-settings-container {
  position: relative;
  display: inline-block;
}

.enxora-settings-menu {
  position: absolute;
  bottom: 48px;
  right: 0;
  background: rgba(10, 15, 30, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  width: 180px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 2147483647;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.12s ease, visibility 0.12s;
  overflow: hidden;
  will-change: transform, opacity;
}

.enxora-settings-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.enxora-settings-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--enxora-text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--enxora-border);
  margin-bottom: 6px;
  font-weight: 800;
}

.enxora-settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--enxora-text);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.enxora-settings-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.enxora-settings-val {
  font-size: 10px;
  color: #06b6d4;
  font-weight: 700;
}

/* Settings Multi-Page Navigation */
.enxora-settings-page {
  display: none;
  flex-direction: column;
}

.enxora-settings-page.active {
  display: flex;
  animation: enxoraPageFade 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes enxoraPageFade {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.enxora-settings-back {
  transition: color 0.15s ease;
}

.enxora-settings-back:hover {
  color: white !important;
}

/* Quality Selection inside Settings Modal */
.enxora-settings-quality-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--enxora-text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
}

.enxora-settings-quality-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.enxora-settings-quality-option.active {
  color: var(--enxora-primary);
  background: rgba(14, 165, 233, 0.1);
}

/* Theater Mode styles */
.enxora-player-container.enxora-theater {
  border-radius: 0px !important;
}

/* Buffering Spinner */
.enxora-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 2147483646;
  display: none;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  will-change: transform;
  backface-visibility: hidden;
}

.enxora-spinner-ring {
  width: 44px;
  height: 44px;
  border: 3.5px solid rgba(255, 255, 255, 0.15);
  border-top: 3.5px solid var(--enxora-primary);
  border-radius: 50%;
  animation: enxoraSpin 0.75s linear infinite;
}

/* Suspended Cam Lock Overlay */
.enxora-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  color: white;
}

.enxora-lock-icon-wrapper {
  width: 72px;
  height: 72px;
  background: rgba(239, 68, 68, 0.15);
  border: 2.5px solid #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: enxoraCamPulseRed 2s infinite;
}

/* Animations */
@keyframes enxoraSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes enxoraCamPulseRed {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* Premium Glass Controls Highlight */
.enxora-controls {
  box-shadow: 0 20px 50px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Elegant Brand Floating Watermark */
.enxora-watermark {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2147483645;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.enxora-player-container:hover .enxora-watermark {
  opacity: 0.85;
}

.enxora-watermark img {
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Advanced Brand Splash Screen Intro */
.enxora-splash-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #090d16;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
  visibility: visible;
  opacity: 1;
}

.enxora-splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.enxora-splash-logo {
  height: 48px;
  object-fit: contain;
  margin-bottom: 24px;
  animation: enxoraPulseLogo 2s infinite ease-in-out;
}

.enxora-splash-loader {
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.enxora-splash-loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--enxora-primary), transparent);
  animation: enxoraLoaderBar 1.5s infinite linear;
}

@keyframes enxoraPulseLogo {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.4)); }
}

@keyframes enxoraLoaderBar {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* Proctor Focus Loss Security Shield styling */
.enxora-focus-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.99) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 9999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 20px;
}

.enxora-focus-overlay.enxora-locked {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Instantly transition iframe opacity to hide video element */
#enxoraIframe, #enxoraVideo {
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   ADVANCED PREMIUM MOBILE RESPONSIVENESS SYSTEM (ENXORA STREAM PRO)
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Fluid, rounded video frame on mobile screens */
  .enxora-player-container {
    border-radius: 16px !important;
  }
  
  /* 2. Compact proctoring and video block lock overlays */
  .enxora-focus-overlay {
    border-radius: 16px !important;
    padding: 12px !important;
  }
  .enxora-focus-overlay i {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }
  .enxora-focus-overlay h3 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1px !important;
  }
  .enxora-focus-overlay p {
    font-size: 10px !important;
    line-height: 1.4 !important;
    max-width: 260px !important;
  }

  /* Suspended Cam Lock Overlay mobile adjustments */
  .enxora-lock-overlay {
    border-radius: 16px !important;
    padding: 12px !important;
  }
  .enxora-lock-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
    border-width: 1.5px !important;
  }
  .enxora-lock-icon-wrapper i {
    font-size: 16px !important;
  }
  .enxora-lock-overlay h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .enxora-lock-overlay p {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    max-width: 280px !important;
    padding: 0 8px !important;
  }
  .enxora-lock-overlay button {
    padding: 8px 16px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
  .enxora-lock-overlay div[style*="background"] {
    padding: 8px 14px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }
  
  /* 3. Streamlined bottom control panel layout - ultra thin height on mobile! */
  .enxora-controls {
    padding: 6px 12px 8px 12px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: rgba(8, 12, 24, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
  }

  /* Thin, modern progress bar with accurate scrubber dot targeting */
  .enxora-progress-bar {
    height: 3px !important;
    margin-bottom: 4px !important;
    border-radius: 100px !important;
  }
  .enxora-progress-bar:hover {
    height: 5px !important;
  }
  
  .enxora-progress-fill::after {
    width: 10px !important;
    height: 10px !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    background: white !important;
    box-shadow: 0 0 8px var(--enxora-primary) !important;
    display: block !important;
  }

  .enxora-controls-row {
    height: 28px !important;
  }

  /* 4. Hide redundant elements to ensure crystal-clear breathing room on mobile viewports */
  .enxora-btn-rewind,
  .enxora-btn-forward,
  .enxora-btn-theater,
  .enxora-brand-title {
    display: none !important;
  }

  /* Keep Volume container visible on mobile and allow expanding range slider */
  .enxora-vol-container {
    display: flex !important;
    align-items: center !important;
  }
  .enxora-vol-container:hover .enxora-volume-slider,
  .enxora-vol-container:focus-within .enxora-volume-slider {
    width: 60px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-left: 6px !important;
  }
  .enxora-btn-mute {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Make Playback Speed a compact circular 28px button on mobile instead of a wide pill shape */
  .enxora-btn-speed {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  .enxora-btn-speed span {
    display: none !important;
  }
  
  /* 5. Compact, finger-friendly button controls */
  .enxora-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }
  .enxora-btn-play {
    width: 30px !important;
    height: 30px !important;
  }
  .enxora-btn-play i {
    font-size: 13px !important;
  }
  
  /* 6. Compact glassmorphic settings sub-menu repositioned for small viewports */
  .enxora-settings-menu {
    bottom: 50px !important;
    right: 0px !important;
    width: 160px !important;
  }
  .enxora-settings-item {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .enxora-settings-title {
    font-size: 9px !important;
  }
  
  /* Compact speed menu dropdown */
  .enxora-speed-menu {
    bottom: 50px !important;
    right: 50px !important;
    width: 80px !important;
  }
  .enxora-speed-option {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  /* Responsive live stream title watermarks */
  .enxora-watermark {
    top: 12px !important;
    right: 12px !important;
  }
  .enxora-watermark img {
    height: 20px !important;
  }
  
  .enxora-watermark-text {
    font-size: 10px !important;
  }

  /* Premium glassmorphic toast notification */
  .enxora-quality-toast {
    top: 16px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
  }
  .enxora-quality-toast span {
    font-size: 11px !important;
  }

  /* Centerpiece circular play/pause button (Netflix-style elegant scale down) */
  .enxora-mid-btn {
    width: 56px !important;
    height: 56px !important;
    padding: 6px !important;
    border-width: 1.5px !important;
  }
  .enxora-mid-brand-logo {
    width: 32px !important;
  }
  .enxora-mid-pause-icon {
    font-size: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Extra-small smartphone optimization */
  .enxora-controls-left,
  .enxora-controls-right {
    gap: 6px !important;
  }
  
  .enxora-time-display {
    font-size: 10px !important;
    margin-left: 2px !important;
  }
  
  .enxora-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }
  
  .enxora-btn-play {
    width: 32px !important;
    height: 32px !important;
  }

  /* Centered, simple settings overlays */
  .enxora-settings-menu {
    right: -24px !important;
  }
  .enxora-speed-menu {
    right: 16px !important;
  }

  /* Micro centerpiece play/pause button for extra-small phone viewports */
  .enxora-mid-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 4px !important;
    border-width: 1.2px !important;
  }
  .enxora-mid-brand-logo {
    width: 24px !important;
  }
  .enxora-mid-pause-icon {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   SECURE PROCTORING WEBCAM PIP FULLSCREEN INTEGRATION (ENXORA STREAM PRO)
   ========================================================================== */
.enxora-player-container:fullscreen #camCard,
.enxora-player-container:-webkit-full-screen #camCard,
.enxora-player-container:-moz-full-screen #camCard,
.enxora-player-container:-ms-fullscreen #camCard {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  z-index: 2147483647 !important;
  border: 3px solid var(--enxora-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #000 !important;
}

.enxora-player-container:fullscreen #camCard video,
.enxora-player-container:-webkit-full-screen #camCard video,
.enxora-player-container:-moz-full-screen #camCard video,
.enxora-player-container:-ms-fullscreen #camCard video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: none !important;
}

.enxora-player-container:fullscreen #camCard .cam-status-pill,
.enxora-player-container:-webkit-full-screen #camCard .cam-status-pill,
.enxora-player-container:-moz-full-screen #camCard .cam-status-pill,
.enxora-player-container:-ms-fullscreen #camCard .cam-status-pill {
  display: none !important;
}

/* Scaling proctoring camera on mobile and tablet fullscreen viewports */
@media (max-width: 768px) {
  .enxora-player-container:fullscreen #camCard,
  .enxora-player-container:-webkit-full-screen #camCard {
    width: 90px !important;
    height: 90px !important;
    top: 16px !important;
    right: 16px !important;
    border-width: 2px !important;
  }
}

@media (max-width: 480px) {
  .enxora-player-container:fullscreen #camCard,
  .enxora-player-container:-webkit-full-screen #camCard {
    width: 68px !important;
    height: 68px !important;
    top: 12px !important;
    right: 12px !important;
    border-width: 1.5px !important;
  }
}

/* --- Security Breach Overlay --- */
.enxora-breach-overlay {
  background: radial-gradient(circle at center, #0F172A 0%, #020617 100%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ef4444 !important;
  font-family: system-ui, sans-serif !important;
  text-align: center !important;
  padding: 24px !important;
  border-radius: 32px !important;
  box-sizing: border-box !important;
  border: 2.5px solid #ef4444 !important;
  box-shadow: 0 0 50px rgba(239, 68, 68, 0.25) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999999 !important;
  overflow: hidden !important;
}

.enxora-breach-icon {
  font-size: 80px !important;
  color: #ef4444 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.enxora-breach-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 0 10px 0 !important;
  color: #ef4444 !important;
  font-family: 'Outfit', sans-serif !important;
}

.enxora-breach-text {
  color: #94a3b8 !important;
  font-size: 14px !important;
  margin: 0 0 24px 0 !important;
  max-width: 420px !important;
  line-height: 1.6 !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0 16px !important;
}

.enxora-breach-text .breach-short-text {
  display: none !important;
}

.enxora-breach-reason {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  color: #ef4444 !important;
  margin-bottom: 24px !important;
  font-weight: 700 !important;
}

.enxora-breach-btn {
  background: #ef4444 !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
}

.enxora-breach-btn:hover {
  transform: scale(1.05) !important;
}

/* Mobile responsive scaling for Security Breach Overlay */
@media (max-width: 768px) {
  .enxora-breach-overlay {
    border-radius: 16px !important;
    padding: 16px !important;
    border-width: 1.5px !important;
  }
  
  .enxora-breach-icon {
    font-size: 40px !important;
    margin-bottom: 8px !important;
  }
  
  .enxora-breach-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1px !important;
  }
  
  .enxora-breach-text {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  
  .enxora-breach-text .breach-full-text {
    display: none !important;
  }
  
  .enxora-breach-text .breach-short-text {
    display: inline !important;
  }
  
  .enxora-breach-reason {
    padding: 6px 12px !important;
    font-size: 9px !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
  }
  
  .enxora-breach-btn {
    padding: 8px 16px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
}
/* ==========================================================================
   Enxora Stream SaaS - Advanced Security & Monitoring Styles
   Features: Dynamic IP Watermarking, License Lockouts, SaaS Overlays
   ========================================================================== */

/* The Floating Security Watermark (Anti-Piracy) */
.enxora-saas-watermark {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 2147483643; /* Just under controls, but above video */
  pointer-events: none;
  color: rgba(255, 255, 255, 0.15); /* Subtile and ghost-like */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: all 4s linear; /* Smooth slow movement */
  user-select: none;
  -webkit-user-select: none;
}

/* SaaS License Lockout Overlay (Premium Payment Required state) */
.enxora-saas-lockout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 30, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  color: white;
}

.enxora-lockout-card {
  max-width: 450px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 32px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
  animation: enxoraSaaSFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.enxora-lockout-icon {
  width: 80px;
  height: 80px;
  background: rgba(14, 165, 233, 0.1);
  border: 2px solid var(--enxora-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--enxora-primary);
  font-size: 36px;
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.2);
}

.enxora-lockout-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.enxora-lockout-text {
  font-family: 'Inter', sans-serif;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.enxora-lockout-btn {
  background: linear-gradient(135deg, var(--enxora-primary) 0%, #0284c7 100%);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.enxora-lockout-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(14, 165, 233, 0.4);
}

@keyframes enxoraSaaSFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}