/* static/css/custom.css */

/* ===== FIX: гарантируем, что .hidden перебивает #modal-overlay { display:flex } ===== */
#modal-overlay.hidden {
    display: none !important;
    pointer-events: none !important;
}

html {
    scroll-behavior: smooth;
}

/* Скрытие скроллбара для слайдеров */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Анимации появления */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-in"] {
    transform: none;
}

/* FAQ аккордеон для главной */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-content {
    transition: all 0.3s ease;
}

.faq-toggle {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-item.active .faq-toggle {
    background-color: rgba(90, 103, 242, 0.05);
}

/* Range слайдер - улучшенный */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5a67f2, #4347e5);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(90, 103, 242, 0.5);
    border: 3px solid white;
    transition: transform 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5a67f2, #4347e5);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(90, 103, 242, 0.5);
}

/* iOS input zoom fix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"] {
        font-size: 16px;
    }
}

/* Фокус для доступности */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #5a67f2;
    outline-offset: 2px;
}

/* ============================================ */
/* МОДАЛЬНОЕ ОКНО - УЛУЧШЕННЫЕ СТИЛИ */
/* ============================================ */

/* Модал - улучшенная поддержка мобильных */
.modal-open {
    overflow: hidden;
}

#modal-overlay {
    padding: 1rem;
}

#modal-content {
    position: relative;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
}

/* Анимация появления снизу на мобильных */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    #modal-content {
        position: fixed !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.5rem !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 1rem;
    }

    #modal-content.scale-100 {
        transform: none !important;
        animation: slideUp 0.3s ease-out;
    }
}

/* Скроллбар для десктопа */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f4f4f5;
    }

    ::-webkit-scrollbar-thumb {
        background: #d4d4d8;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a1a1aa;
    }
}

/* Prose стили для страниц с документами */
.prose h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose p {
    margin-bottom: 1rem;
}

.prose ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Toast анимация */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast {
    animation: slideInRight 0.3s ease-out;
}

/* SEO FAQ стили */
.seo-faq-toggle {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.seo-faq-content {
    transition: max-height 0.3s ease-out, padding-bottom 0.3s ease-out;
    overflow: hidden;
}

.seo-faq-icon {
    transition: transform 0.3s ease;
}

.seo-faq-item.active .seo-faq-icon {
    transform: rotate(180deg);
}