/**
 * css/modern.css — современные улучшения для всего сайта.
 * Подключается в index.html и админках:
 *   - Тёмная тема (prefers-color-scheme: dark)
 *   - :focus-visible для навигации с клавиатуры
 *   - prefers-reduced-motion для людей с вестибулярными расстройствами
 *   - Toast-нотификации (без alert/confirm)
 *
 * Подключение: <link rel="stylesheet" href="/css/modern.css?v=20260429">
 */

/* ─── Focus-visible ─────────────────────────────────────────────── */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid #E11D7A;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Уважаем пользователей с вестибулярными расстройствами ────── */
@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;
    }
}

/* ─── Тёмная тема ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    body {
        background: #0F172A !important;
        color: #E2E8F0 !important;
    }
    .site-header,
    header.site-header {
        background: #1E293B !important;
        border-bottom: 1px solid #334155 !important;
    }
    .site-header a,
    .site-header span {
        color: #E2E8F0 !important;
    }

    /* Карточки на тёмной теме */
    .point-card, .partner-card, .pa-card, .card, .pa-metric {
        background: #1E293B !important;
        border-color: #334155 !important;
        color: #E2E8F0 !important;
    }

    /* Inputs */
    input, select, textarea {
        background: #1E293B !important;
        color: #E2E8F0 !important;
        border-color: #475569 !important;
    }
    input::placeholder, textarea::placeholder {
        color: #64748B !important;
    }

    /* Disabled буттоны */
    button:disabled, .submit-btn:disabled {
        opacity: 0.4 !important;
    }

    /* Лендинги категорий с градиентным фоном */
    section.hero, .partner-cta {
        background: rgba(30, 41, 59, 0.6) !important;
    }
}

/* ─── Toast / Snackbar (вместо alert) ─────────────────────────── */
.vs-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0F172A;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    max-width: calc(100vw - 40px);
    text-align: center;
    pointer-events: none;
}
.vs-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.vs-toast.success { background: #10B981; }
.vs-toast.error { background: #DC2626; }
.vs-toast.info { background: #3B82F6; }

@media (prefers-color-scheme: dark) {
    .vs-toast { background: #334155; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
}

/* ─── Skeleton loading ────────────────────────────────────────── */
.vs-skeleton {
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    animation: vs-skeleton-shimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes vs-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-color-scheme: dark) {
    .vs-skeleton {
        background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
        background-size: 200% 100%;
    }
}

/* ─── iPad portrait — отдельный breakpoint ─────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .form-wrapper {
        padding: 0 24px !important;
    }
}