/**
 * MOBILE-OPTIMIZATIONS.CSS - Централізована система мобільних оптимізацій (2025)
 * Замінює всі дублювання iOS Safari фіксів у різних файлах
 */

/* ===== MODERN VIEWPORT SYSTEM (2025) ===== */
:root {
    /* Стандартні viewport одиниці */
    --vw: 1vw;
    --vh: 1vh;
    --safe-vh: 1vh;

    /* Dynamic viewport одиниці (сучасні браузери) */
    --dvh: 1dvh;
    --svh: 1svh;
    --lvh: 1lvh;

    /* Fallbacks для старих браузерів */
    --mobile-vh: 100vh;
    --mobile-safe-area-top: 0px;
    --mobile-safe-area-bottom: 0px;
    --mobile-safe-area-left: 0px;
    --mobile-safe-area-right: 0px;
}

/* Сучасна підтримка dynamic viewport */
@supports (height: 100dvh) {
    :root {
        --mobile-vh: 100dvh;
    }
}

/* Safe areas для пристроїв з вирізами */
@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --mobile-safe-area-top: env(safe-area-inset-top);
        --mobile-safe-area-bottom: env(safe-area-inset-bottom);
        --mobile-safe-area-left: env(safe-area-inset-left);
        --mobile-safe-area-right: env(safe-area-inset-right);
    }
}

/* Fallback для старих браузерів iOS */
@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --mobile-safe-area-top: constant(safe-area-inset-top);
        --mobile-safe-area-bottom: constant(safe-area-inset-bottom);
        --mobile-safe-area-left: constant(safe-area-inset-left);
        --mobile-safe-area-right: constant(safe-area-inset-right);
    }
}

/* ===== UNIVERSAL MOBILE CLASSES ===== */

/* Універсальна висота екрану */
.mobile-full-height {
    height: var(--mobile-vh);
    min-height: var(--mobile-vh);
}

/* Безпечна область */
.mobile-safe-area {
    padding-top: var(--mobile-safe-area-top);
    padding-bottom: var(--mobile-safe-area-bottom);
    padding-left: var(--mobile-safe-area-left);
    padding-right: var(--mobile-safe-area-right);
}

/* Container з урахуванням safe areas */
.mobile-container {
    width: 100%;
    max-width: 100%;
    margin-left: max(var(--mobile-safe-area-left), 20px);
    margin-right: max(var(--mobile-safe-area-right), 20px);
    padding-left: 0;
    padding-right: 0;
}

/* ===== iOS SAFARI OPTIMIZATIONS ===== */

/* iOS Safari специфічні оптимізації */
.ios.safari {
    /* Підтримка -webkit-fill-available */
    --mobile-vh: -webkit-fill-available;
}

.ios .mobile-full-height {
    /* iOS Safari viewport фікси */
    height: var(--mobile-vh);
    min-height: var(--mobile-vh);

    /* Запобігання elastic scroll */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* URL bar адаптація */
.ios.url-bar-visible .mobile-full-height {
    height: calc(var(--mobile-vh) + var(--mobile-safe-area-bottom));
}

/* ===== TOUCH OPTIMIZATIONS ===== */

/* Універсальні touch стилі */
.mobile-touch-target {
    min-height: 44px;
    /* Apple's recommended touch target size */
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Touch feedback */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    /* Smooth transitions */
    transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

/* Active touch state */
.mobile-touch-target:active,
.mobile-touch-target.touch-active {
    transform: scale(0.98);
}

/* Touch feedback для кнопок */
.btn.mobile-touch-target:active,
.btn.mobile-touch-target.touch-active {
    background-color: color-mix(in srgb, var(--color-red) 90%, black);
}

/* Touch feedback для посилань */
.nav-link.mobile-touch-target:active,
.nav-link.mobile-touch-target.touch-active {
    background-color: color-mix(in srgb, transparent 90%, var(--color-red));
}

/* ===== VIDEO OPTIMIZATIONS ===== */

/* Оптимізовані відео для мобільних */
.mobile-video {
    /* Performance оптимізації */
    will-change: transform;
    transform: translateZ(0);

    /* iOS Safari специфіка */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Відео з fallback зображенням */
.mobile-video-container {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mobile-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Кнопка відтворення відео */
.mobile-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.3s ease;
}

.mobile-video-play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.mobile-video-play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid var(--color-red);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
}

/* ===== MODAL OPTIMIZATIONS ===== */

/* Мобільні модалки */
@media (max-width: 767px) {
    .modal {
        /* Повноекранні модалки на мобільних */
        padding: 0;
        background: var(--color-beige);
    }

    .modal-content {
        width: 100%;
        height: var(--mobile-vh);
        max-height: var(--mobile-vh);
        margin: 0;
        border-radius: 0;

        /* Safe area підтримка */
        padding-top: max(var(--mobile-safe-area-top), 20px);
        padding-bottom: max(var(--mobile-safe-area-bottom), 20px);
        padding-left: max(var(--mobile-safe-area-left), 20px);
        padding-right: max(var(--mobile-safe-area-right), 20px);

        /* iOS scroll фікс */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-close {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

/* ===== FORM OPTIMIZATIONS ===== */

/* Мобільні форми */
.mobile-form-input {
    /* Збільшені розміри для touch */
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
    /* Запобігання zoom в iOS Safari */

    /* Touch оптимізації */
    -webkit-appearance: none;
    -webkit-border-radius: 8px;
    border-radius: 8px;

    /* Accessibility */
    outline-offset: 2px;
}

/* Спеціальні клавіатури для iOS */
.mobile-form-input[type="tel"] {
    /* Числова клавіатура */
    inputmode: numeric;
}

.mobile-form-input[type="email"] {
    /* Email клавіатура */
    inputmode: email;
}

.mobile-form-input[type="search"] {
    /* Пошукова клавіатура */
    inputmode: search;
}

/* ===== NAVIGATION OPTIMIZATIONS ===== */

/* Мобільна навігація */
.mobile-navigation {
    /* Safe area підтримка */
    padding-top: var(--mobile-safe-area-top);
    padding-left: var(--mobile-safe-area-left);
    padding-right: var(--mobile-safe-area-right);

    /* Backdrop blur для сучасного вигляду */
    background: rgba(245, 241, 237, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Мобільне меню */
.mobile-menu {
    height: var(--mobile-vh);

    /* Safe area підтримка */
    padding-top: var(--mobile-safe-area-top);
    padding-bottom: var(--mobile-safe-area-bottom);
    padding-left: var(--mobile-safe-area-left);
    padding-right: var(--mobile-safe-area-right);

    /* iOS scroll фікс */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ===== PERFORMANCE CLASSES ===== */

/* Зменшені анімації для слабких пристроїв */
.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* GPU acceleration для критичних елементів */
.gpu-accelerated {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Оптимізація для скроллінгу */
.is-scrolling {
    pointer-events: none;
}

.is-scrolling * {
    pointer-events: none;
}

/* ===== UTILITY CLASSES ===== */

/* Приховування елементів на мобільних */
@media (max-width: 767px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* Показ тільки на мобільних */
.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .mobile-only.flex {
        display: flex;
    }

    .mobile-only.grid {
        display: grid;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Збільшені touch targets для accessibility */
@media (max-width: 767px) {

    button,
    [role="button"],
    .btn,
    .nav-link,
    .card-link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Focus indicators для touch навігації */
.mobile-focus-visible:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    .mobile-video-play-button {
        background: rgba(0, 0, 0, 0.9);
        color: var(--color-white);
    }

    .mobile-navigation {
        background: rgba(0, 0, 0, 0.95);
    }
}

/* ===== HIGH CONTRAST SUPPORT ===== */

@media (prefers-contrast: high) {

    .mobile-touch-target:active,
    .mobile-touch-target.touch-active {
        outline: 2px solid currentColor;
    }
}

/* ===== ФІКС ELASTIC SCROLLING (Безпечний) ===== */
@media (max-width: 767px) and (-webkit-touch-callout: none) {
    html {
        overscroll-behavior-y: none;
    }
}