/* ========================================
   MOBILE VIDEO PLAYER OPTIMIZATION
   ========================================
   - Fullscreen landscape mode
   - Touch-friendly controls
   - Real-time translation optimization
   ======================================== */

/* Video container responsive design */
[id^="cloudflare-player-"] {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
  overflow: hidden;
}

[id^="cloudflare-player-"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Translation overlay - mobile optimized */
[id^="translation-overlay-"] {
  font-size: 16px !important;
  padding: 10px 20px !important;
  max-width: 90% !important;
  bottom: 50px !important;
}

/* Translation button - mobile optimized */
[id^="translation-btn-"] {
  padding: 10px 14px !important;
  font-size: 15px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Translation menu - mobile optimized */
[id^="translation-menu-"] {
  font-size: 15px !important;
  min-width: 200px !important;
}

[id^="translation-menu-"] > div {
  padding: 12px 16px !important;
  min-height: 44px; /* Touch target size */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Landscape mode optimizations */
@media screen and (orientation: landscape) and (max-width: 896px) {
  /* Compact UI in landscape */
  [id^="translation-btn-"] {
    top: 5px !important;
    right: 5px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  
  [id^="translation-overlay-"] {
    bottom: 40px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
  
  [id^="translation-menu-"] {
    top: 35px !important;
    max-height: 200px;
    overflow-y: auto;
  }
}

/* Fullscreen mode styles */
[id^="cloudflare-player-"]:fullscreen,
[id^="cloudflare-player-"]:-webkit-full-screen {
  padding-bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

[id^="cloudflare-player-"]:fullscreen iframe,
[id^="cloudflare-player-"]:-webkit-full-screen iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Fullscreen + landscape optimizations */
[id^="cloudflare-player-"]:fullscreen [id^="translation-overlay-"],
[id^="cloudflare-player-"]:-webkit-full-screen [id^="translation-overlay-"] {
  bottom: 30px !important;
  font-size: 18px !important;
  max-width: 85% !important;
}

/* Touch controls enhancement */
@media (hover: none) and (pointer: coarse) {
  /* Mobile touch devices */
  [id^="translation-btn-"],
  [id^="translation-menu-"] > div {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* Larger touch targets */
  [id^="translation-btn-"] {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}

/* Tablet optimization (landscape) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  [id^="translation-overlay-"] {
    font-size: 20px !important;
    padding: 14px 28px !important;
    bottom: 60px !important;
  }
  
  [id^="translation-btn-"] {
    font-size: 16px !important;
    padding: 10px 16px !important;
  }
}

/* Small phones in portrait */
@media screen and (max-width: 375px) {
  [id^="translation-overlay-"] {
    font-size: 14px !important;
    padding: 8px 16px !important;
    max-width: 95% !important;
  }
  
  [id^="translation-btn-"] {
    font-size: 13px !important;
    padding: 7px 10px !important;
  }
  
  [id^="translation-menu-"] {
    min-width: 180px !important;
    font-size: 14px !important;
  }
}

/* Scrollbar styling */
[id^="translation-menu-"]::-webkit-scrollbar {
  width: 4px;
}

[id^="translation-menu-"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

[id^="translation-menu-"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* Animation for translation overlay */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

[id^="translation-overlay-"] {
  animation: slideUpFade 0.3s ease-out;
}

/* Loading state for translation */
.translation-loading::after {
  content: '●●●';
  display: inline-block;
  animation: dotPulse 1.5s infinite;
  margin-left: 4px;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Status indicator pulse */
[id^="translation-status-"] {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [id^="translation-overlay-"] {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid white;
  }
  
  [id^="translation-btn-"] {
    border: 2px solid white;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [id^="translation-overlay-"],
  [id^="translation-status-"],
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
  [id^="translation-menu-"] {
    background: rgba(0, 0, 0, 0.98) !important;
  }
}