/**
 * Enhanced Video Preview CSS - Auto Orientation Support
 * Supports portrait (TikTok 9:16) and landscape (YouTube 16:9)
 */

/* ===================================
   CSS Variables
   =================================== */
:root {
    /* Colors */
    --vp-primary: #6366f1;
    --vp-primary-dark: #4f46e5;
    --vp-primary-light: #818cf8;
    --vp-secondary: #10b981;
    --vp-accent: #f59e0b;
    --vp-danger: #ef4444;
    
    /* Platform Colors */
    --vp-youtube: #ff0000;
    --vp-tiktok: #000000;
    --vp-tiktok-pink: #ee1d52;
    --vp-tiktok-blue: #69c9d0;
    
    /* Neutrals */
    --vp-white: #ffffff;
    --vp-black: #000000;
    --vp-gray-50: #f9fafb;
    --vp-gray-100: #f3f4f6;
    --vp-gray-200: #e5e7eb;
    --vp-gray-300: #d1d5db;
    --vp-gray-400: #9ca3af;
    --vp-gray-500: #6b7280;
    --vp-gray-600: #4b5563;
    --vp-gray-700: #374151;
    --vp-gray-800: #1f2937;
    --vp-gray-900: #111827;
    
    /* Spacing */
    --vp-spacing-xs: 0.25rem;
    --vp-spacing-sm: 0.5rem;
    --vp-spacing-md: 1rem;
    --vp-spacing-lg: 1.5rem;
    --vp-spacing-xl: 2rem;
    --vp-spacing-2xl: 3rem;
    
    /* Radius */
    --vp-radius-sm: 0.375rem;
    --vp-radius-md: 0.5rem;
    --vp-radius-lg: 0.75rem;
    --vp-radius-xl: 1rem;
    --vp-radius-2xl: 1.5rem;
    
    /* Shadows */
    --vp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --vp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --vp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --vp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --vp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --vp-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --vp-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   Base Wrapper
   =================================== */
.vp-wrapper-mxr729 {
    position: relative;
    width: 100%;
    margin: var(--vp-spacing-xl) auto;
    background: var(--vp-white);
    border-radius: var(--vp-radius-xl);
    overflow: hidden;
    box-shadow: var(--vp-shadow-lg);
    transition: all var(--vp-transition-base);
    font-family: system-ui, -apple-system, sans-serif;
}

/* Orientation-based max-width */
.vp-orientation-portrait {
    max-width: 600px !important;
}

.vp-orientation-landscape {
    max-width: 1200px !important;
}

.vp-orientation-theater {
    max-width: 100% !important;
}

/* Hover effect */
@media (hover: hover) {
    .vp-wrapper-mxr729:hover {
        transform: translateY(-2px);
        box-shadow: var(--vp-shadow-xl);
    }
}

/* ===================================
   Aspect Toggle Controls
   =================================== */
.vp-aspect-toggle-mxr729 {
    position: absolute;
    top: var(--vp-spacing-md);
    right: var(--vp-spacing-md);
    display: flex;
    gap: var(--vp-spacing-xs);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    padding: var(--vp-spacing-xs);
    border-radius: var(--vp-radius-lg);
    z-index: 10;
}

.vp-aspect-btn-mxr729 {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--vp-radius-md);
    color: var(--vp-white);
    cursor: pointer;
    transition: all var(--vp-transition-fast);
}

.vp-aspect-btn-mxr729:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.vp-aspect-btn-mxr729[data-active="true"] {
    background: var(--vp-primary);
    border-color: var(--vp-primary);
    color: var(--vp-white);
}

.vp-aspect-btn-mxr729 svg {
    width: 20px;
    height: 20px;
}

/* ===================================
   Video Container with Dynamic Aspect
   =================================== */
.vp-container-mxr729 {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, var(--vp-gray-900) 0%, var(--vp-gray-800) 100%);
    overflow: hidden;
    transition: aspect-ratio var(--vp-transition-base);
}

/* Default aspect ratios */
.vp-orientation-portrait .vp-container-mxr729 {
    aspect-ratio: 9 / 16;
}

.vp-orientation-landscape .vp-container-mxr729 {
    aspect-ratio: 16 / 9;
}

.vp-orientation-theater .vp-container-mxr729 {
    aspect-ratio: 21 / 9;
}

/* Dynamic aspect ratio attribute */
.vp-container-mxr729[data-aspect-ratio="9/16"] {
    aspect-ratio: 9 / 16;
}

.vp-container-mxr729[data-aspect-ratio="16/9"] {
    aspect-ratio: 16 / 9;
}

.vp-container-mxr729[data-aspect-ratio="21/9"] {
    aspect-ratio: 21 / 9;
}

/* ===================================
   Placeholder & Thumbnails
   =================================== */
.vp-placeholder-mxr729 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vp-thumbnail-wrapper-mxr729 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vp-thumbnail-mxr729 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--vp-transition-slow);
}

.vp-thumbnail-mxr729[src] {
    opacity: 1;
}

/* Thumbnail overlay */
.vp-thumbnail-overlay-mxr729 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

/* TikTok background */
.vp-tiktok-thumb-mxr729 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(315deg, var(--vp-tiktok-pink) 0%, var(--vp-tiktok-blue) 100%);
}

.vp-tiktok-pattern-mxr729 {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(255, 255, 255, 0.05) 35px,
        rgba(255, 255, 255, 0.05) 70px
    );
}

.vp-tiktok-bg-icon-mxr729 {
    width: 30%;
    height: 30%;
    max-width: 200px;
    max-height: 200px;
    opacity: 0.15;
    fill: var(--vp-white);
}

/* ===================================
   Play Button
   =================================== */
.vp-play-btn-mxr729 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-spacing-md);
    padding: var(--vp-spacing-lg) var(--vp-spacing-xl);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--vp-radius-2xl);
    cursor: pointer;
    transition: all var(--vp-transition-base);
    z-index: 2;
}

/* Platform-specific play buttons */
.vp-play-youtube {
    background: rgba(0, 0, 0, 0.9);
}

.vp-play-tiktok {
    background: rgba(255, 255, 255, 0.95);
    color: var(--vp-black);
}

.vp-play-tiktok .vp-play-text-mxr729 {
    color: var(--vp-black);
}

/* Play button hover */
@media (hover: hover) {
    .vp-play-btn-mxr729:hover {
        transform: translate(-50%, -50%) scale(1.05);
        background: rgba(0, 0, 0, 0.95);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .vp-play-btn-mxr729:hover .vp-play-icon-mxr729 {
        transform: scale(1.1);
    }
}

/* Play icons */
.vp-play-icon-wrapper-mxr729 {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--vp-transition-base);
}

.vp-play-icon-mxr729 {
    width: 68px;
    height: 48px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Adjust icon size for portrait */
.vp-orientation-portrait .vp-play-icon-mxr729 {
    width: 54px;
    height: 38px;
}

.vp-play-text-mxr729 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vp-white);
}

/* ===================================
   Loading State
   =================================== */
.vp-loading-mxr729 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-spacing-md);
    z-index: 10;
}

.vp-spinner-mxr729 {
    position: relative;
    width: 60px;
    height: 60px;
}

.vp-spinner-ring-mxr729 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: vp-spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.vp-spinner-ring-mxr729:nth-child(1) {
    border-top-color: var(--vp-primary);
    animation-delay: -0.45s;
}

.vp-spinner-ring-mxr729:nth-child(2) {
    border-right-color: var(--vp-secondary);
    animation-delay: -0.3s;
}

.vp-spinner-ring-mxr729:nth-child(3) {
    border-bottom-color: var(--vp-accent);
    animation-delay: -0.15s;
}

@keyframes vp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vp-loading-text-mxr729 {
    font-size: 0.875rem;
    color: var(--vp-white);
    font-weight: 500;
}

/* ===================================
   Player Styles
   =================================== */
.vp-player-mxr729 {
    width: 100%;
    height: 100%;
    animation: vp-fadeIn var(--vp-transition-slow);
}

@keyframes vp-fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive iframe container */
.vp-responsive-iframe-mxr729 {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: padding-bottom var(--vp-transition-base);
}

/* Portrait iframe (9:16) */
.vp-iframe-portrait,
.vp-orientation-portrait .vp-responsive-iframe-mxr729 {
    padding-bottom: 177.78%;
}

/* Landscape iframe (16:9) */
.vp-iframe-landscape,
.vp-orientation-landscape .vp-responsive-iframe-mxr729 {
    padding-bottom: 56.25%;
}

/* Theater iframe (21:9) */
.vp-iframe-theater,
.vp-orientation-theater .vp-responsive-iframe-mxr729 {
    padding-bottom: 42.86%;
}

.vp-iframe-mxr729 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* TikTok container */
.vp-tiktok-container-mxr729 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #000;
}

/* TikTok portrait mode */
.vp-orientation-portrait .vp-tiktok-container-mxr729,
.vp-tiktok-portrait {
    min-height: 600px;
}

/* TikTok landscape mode */
.vp-orientation-landscape .vp-tiktok-container-mxr729,
.vp-tiktok-landscape {
    min-height: 400px;
}

.vp-tiktok-container-mxr729 .tiktok-embed {
    max-width: 100%;
    height: 100%;
}

/* ===================================
   Info Section
   =================================== */
.vp-info-mxr729 {
    padding: var(--vp-spacing-lg);
    background: var(--vp-white);
    border-top: 1px solid var(--vp-gray-200);
}

.vp-title-mxr729 {
    margin: 0 0 var(--vp-spacing-sm) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--vp-gray-900);
    line-height: 1.4;
}

.vp-description-mxr729 {
    margin: 0 0 var(--vp-spacing-md) 0;
    font-size: 0.875rem;
    color: var(--vp-gray-600);
    line-height: 1.6;
}

.vp-meta-mxr729 {
    display: flex;
    align-items: center;
    gap: var(--vp-spacing-md);
    flex-wrap: wrap;
}

/* Platform tag */
.vp-platform-tag-mxr729 {
    display: inline-flex;
    align-items: center;
    gap: var(--vp-spacing-xs);
    padding: var(--vp-spacing-xs) var(--vp-spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--vp-radius-md);
    transition: all var(--vp-transition-fast);
}

.vp-platform-tag-mxr729 svg {
    width: 14px;
    height: 14px;
}

.vp-tag-youtube {
    background: rgba(255, 0, 0, 0.1);
    color: var(--vp-youtube);
}

.vp-tag-tiktok {
    background: linear-gradient(135deg, rgba(238, 29, 82, 0.1), rgba(105, 201, 208, 0.1));
    color: var(--vp-black);
}

/* Orientation tag */
.vp-orientation-tag-mxr729 {
    font-size: 0.75rem;
    color: var(--vp-gray-500);
    padding: var(--vp-spacing-xs) var(--vp-spacing-sm);
    background: var(--vp-gray-100);
    border-radius: var(--vp-radius-md);
}

/* Duration */
.vp-duration-mxr729 {
    font-size: 0.875rem;
    color: var(--vp-gray-500);
}

/* Duration badge */
.vp-duration-badge-mxr729 {
    position: absolute;
    bottom: var(--vp-spacing-md);
    right: var(--vp-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--vp-spacing-xs);
    padding: var(--vp-spacing-xs) var(--vp-spacing-sm);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--vp-radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vp-white);
    z-index: 2;
}

.vp-duration-badge-mxr729 svg {
    width: 12px;
    height: 12px;
}

/* ===================================
   Action Bar
   =================================== */
.vp-actions-mxr729 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vp-spacing-sm);
    padding: var(--vp-spacing-md);
    background: var(--vp-gray-100);
    border-top: 1px solid var(--vp-gray-200);
}

.vp-action-mxr729 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--vp-white);
    border: 1px solid var(--vp-gray-300);
    border-radius: var(--vp-radius-lg);
    color: var(--vp-gray-700);
    cursor: pointer;
    transition: all var(--vp-transition-fast);
}

.vp-action-mxr729:hover {
    background: var(--vp-primary);
    border-color: var(--vp-primary);
    color: var(--vp-white);
    transform: translateY(-1px);
}

.vp-action-mxr729 svg {
    width: 18px;
    height: 18px;
}

/* Hide fullscreen initially */
.vp-fullscreen-mxr729 {
    display: none !important;
}

.vp-player-mxr729 ~ .vp-actions-mxr729 .vp-fullscreen-mxr729,
.vp-container-mxr729:has(.vp-player-mxr729) ~ .vp-actions-mxr729 .vp-fullscreen-mxr729 {
    display: flex !important;
}

/* ===================================
   Error State
   =================================== */
.vp-error-mxr729 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vp-spacing-md);
    padding: var(--vp-spacing-2xl);
    text-align: center;
    min-height: 300px;
    background: var(--vp-white);
}

.vp-error-mxr729 svg {
    width: 48px;
    height: 48px;
    color: var(--vp-danger);
}

.vp-error-mxr729 p {
    margin: 0;
    font-size: 1rem;
    color: var(--vp-gray-600);
}

.vp-retry-btn-mxr729 {
    margin-top: var(--vp-spacing-md);
    padding: var(--vp-spacing-sm) var(--vp-spacing-lg);
    background: var(--vp-primary);
    color: var(--vp-white);
    border: none;
    border-radius: var(--vp-radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--vp-transition-fast);
}

.vp-retry-btn-mxr729:hover {
    background: var(--vp-primary-dark);
    transform: translateY(-1px);
}

/* ===================================
   Toast Notification
   =================================== */
.vp-toast-mxr729 {
    position: fixed;
    bottom: var(--vp-spacing-xl);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--vp-spacing-sm) var(--vp-spacing-lg);
    background: var(--vp-gray-900);
    color: var(--vp-white);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--vp-shadow-xl);
    opacity: 0;
    transition: all var(--vp-transition-base);
    z-index: 9999;
}

.vp-toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ===================================
   Fullscreen Mode
   =================================== */
.vp-fullscreen-active .vp-container-mxr729 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
}

.vp-fullscreen-active .vp-aspect-toggle-mxr729,
.vp-fullscreen-active .vp-info-mxr729,
.vp-fullscreen-active .vp-actions-mxr729 {
    display: none !important;
}

/* ===================================
   Mobile Responsive
   =================================== */
@media (max-width: 768px) {
    /* Hide aspect toggle on mobile */
    .vp-aspect-toggle-mxr729 {
        display: none !important;
    }
    
    /* Full width on mobile */
    .vp-mobile[data-mobile-fullwidth="yes"] {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    
    .vp-mobile[data-mobile-fullwidth="yes"] .vp-container-mxr729 {
        border-radius: 0;
    }
    
    /* Auto orientation based on device */
    .vp-device-portrait .vp-container-mxr729 {
        aspect-ratio: 9 / 16;
        max-height: 80vh;
    }
    
    .vp-device-landscape .vp-container-mxr729 {
        aspect-ratio: 16 / 9;
        max-height: 60vh;
    }
    
    /* Mobile play button */
    .vp-play-btn-mxr729 {
        padding: var(--vp-spacing-md) var(--vp-spacing-lg);
    }
    
    .vp-play-icon-mxr729 {
        width: 54px;
        height: 38px;
    }
    
    /* Mobile info section */
    .vp-info-mxr729 {
        padding: var(--vp-spacing-md);
    }
    
    .vp-title-mxr729 {
        font-size: 1rem;
    }
    
    /* Show rotate button on mobile */
    .vp-rotate-mxr729 {
        display: flex !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .vp-wrapper-mxr729 {
        margin: var(--vp-spacing-md) 0;
    }
    
    /* Portrait containers on small mobile */
    .vp-orientation-portrait {
        max-width: 100% !important;
    }
    
    .vp-orientation-portrait .vp-container-mxr729 {
        aspect-ratio: 9 / 16;
        max-height: 70vh;
    }
    
    .vp-play-text-mxr729 {
        font-size: 0.75rem;
    }
    
    .vp-meta-mxr729 {
        gap: var(--vp-spacing-sm);
    }
}

/* ===================================
   Tablet Specific
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .vp-wrapper-mxr729 {
        max-width: 90%;
    }
    
    .vp-orientation-portrait {
        max-width: 500px !important;
    }
}

/* ===================================
   Desktop Specific
   =================================== */
@media (min-width: 1025px) {
    .vp-wrapper-mxr729 {
        margin: var(--vp-spacing-2xl) auto;
    }
    
    /* Show aspect toggle */
    .vp-desktop .vp-aspect-toggle-mxr729 {
        display: flex;
    }
    
    /* Larger play button on desktop */
    .vp-play-btn-mxr729 {
        padding: var(--vp-spacing-xl) calc(var(--vp-spacing-xl) * 1.5);
    }
    
    .vp-play-icon-mxr729 {
        width: 80px;
        height: 56px;
    }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
    .vp-wrapper-mxr729 {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--vp-gray-300);
    }
    
    .vp-container-mxr729,
    .vp-actions-mxr729,
    .vp-aspect-toggle-mxr729 {
        display: none;
    }
    
    .vp-wrapper-mxr729::after {
        content: "Video: " attr(data-clip-url);
        display: block;
        padding: var(--vp-spacing-lg);
        background: var(--vp-gray-100);
        text-align: center;
    }
}

/* ===================================
   Accessibility
   =================================== */
.vp-placeholder-mxr729:focus,
.vp-play-btn-mxr729:focus-visible,
.vp-action-mxr729:focus-visible,
.vp-aspect-btn-mxr729:focus-visible {
    outline: 2px solid var(--vp-primary);
    outline-offset: 2px;
}

/* ===================================
   Dark Mode Support
   =================================== */
@media (prefers-color-scheme: dark) {
    .vp-theme-auto {
        --vp-white: #1f2937;
        --vp-gray-50: #111827;
        --vp-gray-100: #1f2937;
        --vp-gray-200: #374151;
        --vp-gray-600: #d1d5db;
        --vp-gray-700: #e5e7eb;
        --vp-gray-900: #f9fafb;
    }
}

/* ===================================
   Reduced Motion
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}