/* ========================================
   КРОССБРАУЗЕРНАЯ ПОДДЕРЖКА TIMELINE
   Поддержка: Chrome, Firefox, Safari, Edge, Opera, Yandex
   Устройства: iPhone 8-16 Pro Max, Android
   ======================================== */

/* Базовые префиксы для всех браузеров */
.timeline-progress {
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    transition: width 0.5s ease;
    
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.timeline-step {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.step-circle {
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Safari специфичные стили */
@supports (-webkit-appearance: none) {
    .timeline-progress {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

/* Firefox специфичные стили */
@-moz-document url-prefix() {
    .timeline-progress {
        background: -moz-linear-gradient(left, 
            #f5a623 0%, 
            #FFD700 50%,
            #ff6b6b 100%);
    }
}

/* Edge/IE11 поддержка */
@supports (-ms-ime-align: auto) {
    .timeline-progress {
        background: linear-gradient(to right, 
            #f5a623 0%, 
            #FFD700 50%,
            #ff6b6b 100%);
    }
}

/* iPhone 8 (375x667) */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 667px) 
    and (-webkit-device-pixel-ratio: 2) {
    .timeline-steps {
        gap: 25px 15px;
    }
    
    .step-circle {
        width: 48px;
        height: 48px;
    }
}

/* iPhone 8 Plus (414x736) */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 736px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-steps {
        gap: 30px 20px;
    }
}

/* iPhone X/XS/11 Pro (375x812) */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-track {
        padding: 0 15px;
    }
    
    .timeline-steps {
        gap: 28px 18px;
    }
}

/* iPhone XR/11 (414x896) */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) {
    .timeline-steps {
        gap: 32px 22px;
    }
}

/* iPhone 12/13/14 (390x844) */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-steps {
        gap: 30px 20px;
    }
}

/* iPhone 12/13/14 Pro Max (428x926) */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-steps {
        gap: 35px 25px;
    }
}

/* iPhone 15/16 Pro (393x852) */
@media only screen 
    and (device-width: 393px) 
    and (device-height: 852px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-steps {
        gap: 30px 20px;
    }
}

/* iPhone 15/16 Pro Max (430x932) */
@media only screen 
    and (device-width: 430px) 
    and (device-height: 932px) 
    and (-webkit-device-pixel-ratio: 3) {
    .timeline-steps {
        gap: 35px 25px;
    }
    
    .step-circle {
        width: 55px;
        height: 55px;
    }
}

/* Android устройства - общие стили */
@media (max-width: 768px) and (min-resolution: 1.5dppx) {
    .timeline-steps {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
    
    .step-circle {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Samsung Galaxy S series */
@media only screen 
    and (min-width: 360px) 
    and (max-width: 414px)
    and (min-height: 640px)
    and (max-height: 915px) {
    .timeline-steps {
        gap: 28px 18px;
    }
}

/* Планшеты в портретной ориентации */
@media only screen 
    and (min-width: 768px) 
    and (max-width: 1024px) 
    and (orientation: portrait) {
    .timeline-track {
        padding: 0 40px;
    }
    
    .timeline-steps {
        display: flex;
        justify-content: space-between;
    }
    
    .timeline-progress {
        display: block !important;
        left: 40px;
        right: 40px;
        max-width: calc(100% - 80px);
    }
}

/* Планшеты в ландшафтной ориентации */
@media only screen 
    and (min-width: 1024px) 
    and (max-width: 1366px) 
    and (orientation: landscape) {
    .timeline-track {
        padding: 0 50px;
    }
}

/* Темная тема браузера */
@media (prefers-color-scheme: dark) {
    .timeline-steps::before {
        background: #3a3f4e;
    }
}

/* Высокий контраст */
@media (prefers-contrast: high) {
    .timeline-progress {
        border: 1px solid var(--timeline-primary);
    }
    
    .step-circle {
        border-width: 4px;
    }
}

/* Анимации отключены (доступность) */
@media (prefers-reduced-motion: reduce) {
    .timeline-progress,
    .timeline-step,
    .step-circle {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}

/* Яндекс Браузер специфичные стили */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .timeline-progress {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
}

/* Opera специфичные стили */
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    _:-o-prefocus, .timeline-progress {
        background: -o-linear-gradient(left, 
            #f5a623 0%, 
            #FFD700 50%,
            #ff6b6b 100%);
    }
}

/* Мобильная оптимизация для всех устройств */
@media (max-width: 480px) {
    .process-timeline {
        padding: 40px 0;
    }
    
    .timeline-step .step-content h3 {
        font-size: 13px;
        font-weight: 600;
    }
    
    .timeline-step .step-content p {
        font-size: 11px;
        line-height: 1.3;
    }
    
    /* Убираем лишние эффекты для производительности */
    .step-circle {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .timeline-step.active .step-circle {
        box-shadow: 0 0 15px rgba(245, 166, 35, 0.5);
    }
}

/* Ультра-широкие экраны */
@media (min-width: 1920px) {
    .process-timeline {
        max-width: 1200px;
    }
    
    .timeline-progress {
        height: 4px;
    }
    
    .step-circle {
        width: 70px;
        height: 70px;
    }
}

/* Фолдабельные устройства (Samsung Fold, etc) */
@media (max-width: 320px) {
    .timeline-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .step-circle {
        width: 45px;
        height: 45px;
    }
}

/* Поддержка RTL языков */
[dir="rtl"] .timeline-progress {
    left: auto;
    right: 50px;
    transform-origin: right center;
}

[dir="rtl"] .timeline-steps::before {
    left: auto;
    right: 50px;
}