/* Generic Video Controller Styles */
 .video-controls-container {
   position: absolute;
   z-index: 1000;
   pointer-events: none;
 }

 .video-controls-container > * {
   pointer-events: auto;
 }

 /* Control positioning classes */
 .video-controls-top-left { top: 20px; left: 20px; }
 .video-controls-top-center { top: 20px; left: 50%; transform: translateX(-50%); }
 .video-controls-top-right { top: 20px; right: 20px; }
 .video-controls-center-left { top: 50%; left: 20px; transform: translateY(-50%); }
 .video-controls-center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
 .video-controls-center-right { top: 50%; right: 20px; transform: translateY(-50%); }
 .video-controls-bottom-left { bottom: 30px; left: 20px; }
 .video-controls-bottom-center { bottom: 30px; left: 50%; transform: translateX(-50%); }
 .video-controls-bottom-right { bottom: 30px; right: 20px; }

 /* Base video control button */
 .video-toggle-btn {
   background-color: rgba(0, 0, 0, 0.4) !important;
   border-color: rgba(255, 255, 255, 0.8) !important;
   color: #ffffff !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
 }

 /* Button style variations */
 .video-toggle-btn.circular {
   border-radius: 50% !important;
   width: 60px;
   height: 60px;
   border: 2px solid rgba(255,255,255,0.8);
 }

 .video-toggle-btn.rectangular {
   border-radius: 8px !important;
   padding: 12px 16px;
 }

 .video-toggle-btn.minimal {
   background-color: transparent !important;
   border: 1px solid rgba(255, 255, 255, 0.6) !important;
   backdrop-filter: none;
 }

 /* Hover and focus states */
 .video-toggle-btn:hover {
   background-color: rgba(0, 0, 0, 0.6) !important;
   border-color: #ffffff !important;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
 }

 .video-toggle-btn:focus {
   outline: 3px solid #ffffff;
   outline-offset: 3px;
   box-shadow: 0 0 0 1px #000000, 0 6px 20px rgba(0, 0, 0, 0.4);
   background-color: rgba(0, 0, 0, 0.6) !important;
 }

 .video-toggle-btn:active {
   transform: translateY(0);
 }

 /* Respect users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .video-with-controls {
     display: none !important;
   }
   .video-toggle-btn {
     display: none !important;
   }
   .video-bg {
     background: url('{{ 'videos/hero-thumbnail.jpg' | asset_url }}') center / cover no-repeat !important;
   }
   .video-toggle-btn {
     transition: none !important;
   }
 }

 /* Mobile responsiveness */
 @media (max-width: 767px) {
   .video-toggle-btn {
     display: none !important;
   }
 }

 @media (max-width: 992px) {
   .video-toggle-btn.circular {
     width: 50px !important;
     height: 50px !important;
   }
   
   .video-controls-bottom-center,
   .video-controls-bottom-left,
   .video-controls-bottom-right {
     bottom: 20px !important;
   }
   
   .video-toggle-btn .video-icon {
     font-size: 1rem !important;
   }
 }

 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .video-toggle-btn {
     background-color: rgba(0, 0, 0, 0.8) !important;
     border: 3px solid #ffffff !important;
   }
 }

 /* Page-specific styles */
 .hero-content {
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
 }