/* ===== BASE STYLES - КРОСС-БРАУЗЕРНАЯ ВЕРСИЯ ===== */
html {
    font-size: 16px;
    --header-height: var(--space-9);

    /* Cross-browser overscroll behavior */
    overscroll-behavior-x: none;
    -webkit-overscroll-behavior-x: none;
    -moz-overscroll-behavior-x: none;
    -ms-overscroll-behavior-x: none;

    /* Touch scrolling */
    -webkit-overflow-scrolling: touch;

    /* Touch action with prefixes */
    touch-action: pan-y pinch-zoom;
    -webkit-touch-action: pan-y pinch-zoom;
    -moz-touch-action: pan-y pinch-zoom;
    -ms-touch-action: pan-y pinch-zoom;

    /* Smooth scrolling with prefixes */
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    overflow: auto;

    /* Fallback for min-height with modern units */
    min-height: 100vh; /* Fallback */
    min-height: 100dvh; /* Modern browsers */

    /* Cross-browser overscroll behavior */
    overscroll-behavior-x: none;
    -webkit-overscroll-behavior-x: none;
    -moz-overscroll-behavior-x: none;
    -ms-overscroll-behavior-x: none;

    /* Touch scrolling */
    -webkit-overflow-scrolling: touch;

    /* Touch action with prefixes */
    touch-action: pan-y pinch-zoom;
    -webkit-touch-action: pan-y pinch-zoom;
    -moz-touch-action: pan-y pinch-zoom;
    -ms-touch-action: pan-y pinch-zoom;

    /* Font smoothing for better rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Scrollbar - Webkit browsers */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

/* Scrollbar - Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);

    /* Enhanced box-sizing */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-6);
    }
}

/* Main Content */
.main-content {
    margin-top: var(--header-height);
}

/* Focus styles - Enhanced for cross-browser support */
button:focus,
a:focus,
input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Modern focus-visible for supported browsers */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Remove focus outline when not using keyboard */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced tap highlight removal */
button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in inputs */
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        -webkit-scroll-behavior: auto !important;
        -moz-scroll-behavior: auto !important;
        -ms-scroll-behavior: auto !important;
    }
}

/* Enhanced mobile viewport fixes */
@media screen and (max-width: 768px) {
    html {
        /* Prevent zoom on input focus in iOS Safari */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        /* Enhanced mobile scrolling */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        -webkit-overscroll-behavior: contain;
        -moz-overscroll-behavior: contain;
        -ms-overscroll-behavior: contain;
    }
}

/* Fix for older browsers that don't support CSS custom properties */
@supports not (color: var(--primary)) {
    html {
        --header-height: 4rem; /* Fallback */
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        background: #141823;
        color: #ffffff;
    }

    .container {
        max-width: 1200px;
        padding: 0 1rem;
    }

    @media (min-width: 768px) {
        .container {
            padding: 0 1.5rem;
        }
    }

    button:focus,
    a:focus,
    input:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
}

/* Fix for browsers that don't support dvh */
@supports not (height: 100dvh) {
    body {
        min-height: 100vh;
    }
}

/* Enhanced support for older versions of Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix for Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html {
        -ms-text-size-adjust: 100%;
        -ms-overflow-style: scrollbar;
    }

    body {
        -ms-overflow-style: scrollbar;
    }

    .container {
        max-width: 1200px; /* Fallback for IE */
    }
}