/* =====================================================
   ImmunApp — Dark Navy Theme (подключается ПОСЛЕ style.css)
   ===================================================== */

:root {
    --n-950: #050c1f;
    --n-900: #081230;
    --n-850: #0b1a3d;
    --n-800: #0f2150;
    --n-700: #16306b;

    --b-600: #2563eb;
    --b-500: #3b82f6;
    --b-400: #60a5fa;
    --b-300: #93c5fd;
    --b-200: #bfdbfe;
    --sky: #38bdf8;

    --t-main: #e8efff;
    --t-muted: #a9bde6;
    --t-faint: #7d93c4;

    --line: rgba(110, 150, 255, 0.18);
    --line-strong: rgba(96, 165, 250, 0.5);

    --card: linear-gradient(160deg, rgba(22, 48, 107, 0.62), rgba(11, 26, 61, 0.92));
    --glow: 0 16px 40px rgba(37, 99, 235, 0.3);
    --shadow-d: 0 10px 30px rgba(2, 6, 23, 0.5);

    /* переопределяем переменные style.css */
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: rgba(59, 130, 246, 0.18);
    --secondary: #38bdf8;
    --secondary-light: rgba(56, 189, 248, 0.16);
    --background: #081230;
    --background-light: #0b1a3d;
    --background-green: #0f2150;
    --text-primary: #e8efff;
    --text-secondary: #a9bde6;
    --text-light: #7d93c4;
    --border: rgba(110, 150, 255, 0.18);
    --success: #60a5fa;
    --warning: #7dd3fc;
    --shadow-small: 0 6px 18px rgba(2, 6, 23, 0.4);
    --shadow-medium: 0 12px 30px rgba(2, 6, 23, 0.5);
    --shadow-large: 0 24px 60px rgba(2, 6, 23, 0.6);

    --im-primary: #3b82f6;
    --im-primary-dark: #2563eb;
    --im-primary-light: rgba(59, 130, 246, 0.18);
    --im-blue: #38bdf8;
    --im-bg: #081230;
    --im-white: #081230;
    --im-text: #e8efff;
    --im-muted: #a9bde6;
    --im-border: rgba(110, 150, 255, 0.18);
    --im-shadow: 0 12px 30px rgba(2, 6, 23, 0.5);

    color-scheme: dark;
}

html {
    scrollbar-color: #2a4690 #081230;
}

html body {
    color: var(--t-main);
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(59, 130, 246, 0.22), transparent 62%),
        radial-gradient(760px 480px at -8% 32%, rgba(37, 99, 235, 0.16), transparent 60%),
        #081230;
    background-attachment: fixed;
}

html body ::selection {
    color: #fff;
    background: rgba(59, 130, 246, 0.5);
}

html body :focus-visible {
    outline: 2px solid var(--b-400);
    outline-offset: 2px;
}

html body h1,
html body h2,
html body h3,
html body h4 {
    color: #fff;
}

html body p {
    color: var(--t-muted);
}

html body main > section {
    animation: tnRise 0.6s ease both;
}

@keyframes tnRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html body main > section { animation: none; }
}

/* ---------- HEADER ---------- */

html body .site-header {
    background: rgba(8, 18, 48, 0.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.45);
}

html body .logo,
html body .logo-text,
html body .footer-logo {
    color: #fff;
}

html body .logo-text span {
    color: var(--b-400);
}

html body .logo-icon {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
}

html body .nav-link,
html body .main-nav a,
html body .nav-links a {
    color: var(--t-muted);
}

html body .nav-link:hover,
html body .nav-link.active,
html body .main-nav a:hover,
html body .main-nav a.active,
html body .nav-links a:hover,
html body .nav-links a.active {
    color: #fff;
    background: rgba(59, 130, 246, 0.18);
}

html body .nav-link::after {
    background: var(--b-400);
}

html body .language-switcher select,
html body .language-select,
html body .menu-toggle {
    color: var(--b-200);
    background: rgba(22, 48, 107, 0.55);
    border: 1px solid var(--line);
}

html body .language-switcher select:focus,
html body .language-select:focus {
    border-color: var(--b-400);
}

@media (max-width: 900px) {
    html body .main-nav {
        background: #0b1a3d;
        border: 1px solid var(--line);
        border-top: none;
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.6);
    }
}

/* ---------- HERO ---------- */

html body .home-hero,
html body .vaccines-hero,
html body .videos-hero,
html body .centers-hero,
html body .statistics-hero,
html body .hero-section {
    background:
        radial-gradient(700px 360px at 88% 0%, rgba(59, 130, 246, 0.3), transparent 65%),
        linear-gradient(135deg, #0c1f4f 0%, #081230 62%, #0a1a42 100%);
    border-bottom: 1px solid var(--line);
}

html body .home-hero::before,
html body .hero-section::before {
    background: rgba(59, 130, 246, 0.14);
}

html body .home-hero h1 span,
html body .hero-content h1 span,
html body .centers-hero-content h1 span,
html body .statistics-hero-content h1 span {
    color: transparent;
    background: linear-gradient(90deg, #93c5fd, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html body .hero-badge,
html body .section-eyebrow,
html body .section-label,
html body .vaccines-hero .eyebrow,
html body .videos-hero .eyebrow {
    color: var(--b-300);
}

html body .hero-badge::before,
html body .section-eyebrow::before,
html body .section-label::before {
    background: var(--b-400);
}

html body .home-hero-description,
html body .hero-note,
html body .section-heading p,
html body .vaccines-hero p,
html body .vaccines-heading p,
html body .videos-hero p,
html body .videos-heading p,
html body .home-feature-card p,
html body .process-card p,
html body .home-statistics-card p,
html body .home-cta p,
html body .vaccine-cta p,
html body .vaccine-card p,
html body .vaccine-empty,
html body .video-content p,
html body .vaccine-modal-content p,
html body .video-modal-content p,
html body .floating-card small {
    color: var(--t-muted);
}

html body .home-hero h1,
html body .section-heading h2,
html body .vaccines-hero h1,
html body .vaccines-heading h2,
html body .videos-hero h1,
html body .videos-heading h2,
html body .home-feature-card h3,
html body .process-card h3,
html body .home-statistics-card h3,
html body .home-cta h2,
html body .vaccine-cta h2,
html body .vaccine-card h3,
html body .video-content h3,
html body .vaccine-modal-content h2,
html body .video-modal-content h2,
html body .floating-card strong {
    color: #fff;
}

html body .hero-note-icon {
    color: var(--b-300);
    background: rgba(59, 130, 246, 0.18);
}

/* ---------- КНОПКИ ---------- */

html body .btn-primary,
html body .hero-button-primary,
html body .button-primary,
html body .home-cta a,
html body .vaccine-cta a,
html body .video-button,
html body .vaccine-modal-close {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
}

html body .btn-primary:hover,
html body .hero-button-primary:hover,
html body .button-primary:hover,
html body .home-cta a:hover,
html body .vaccine-cta a:hover,
html body .video-button:hover,
html body .vaccine-modal-close:hover {
    color: #fff;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

html body .hero-button-secondary,
html body .btn-outline {
    color: var(--b-200);
    background: transparent;
    border-color: rgba(96, 165, 250, 0.5);
}

html body .hero-button-secondary:hover,
html body .btn-outline:hover {
    color: #fff;
    background: rgba(59, 130, 246, 0.22);
    border-color: var(--b-400);
}

html body .btn-light {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

html body .btn-light:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

html body .home-video-panel a {
    color: #1d4ed8;
    background: #fff;
}

html body .home-video-panel a:hover {
    color: #1d4ed8;
    background: #dbeafe;
}

html body .feature-link,
html body .text-link,
html body .vaccine-details,
html body .center-phone-link,
html body .center-map-link,
html body .center-info-icon {
    color: var(--b-300);
}

/* ---------- КАРТОЧКИ ---------- */

html body .home-feature-card,
html body .process-card,
html body .home-statistics-card,
html body .vaccine-card,
html body .video-card,
html body .center-card,
html body .statistics-card,
html body .chart-card,
html body .statistics-table-card,
html body .centers-search-panel,
html body .statistics-toolbar,
html body .feature-card,
html body .about-mini-card,
html body .statistics-preview-content {
    color: var(--t-main);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-d);
}

html body .home-feature-card:hover,
html body .process-card:hover,
html body .home-statistics-card:hover,
html body .vaccine-card:hover,
html body .video-card:hover,
html body .center-card:hover,
html body .feature-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--glow);
    transform: translateY(-4px);
}

html body .floating-card {
    background: rgba(15, 33, 80, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-d);
}

html body .floating-icon,
html body .feature-icon-green,
html body .feature-icon-teal,
html body .vaccine-icon,
html body .center-card-icon,
html body .statistics-card-icon,
html body .statistics-preview-icon,
html body .medical-notice-icon,
html body .list-check,
html body .about-check {
    color: var(--b-300);
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

html body .feature-icon-blue {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.14);
}

html body .feature-icon-purple {
    color: #a5b4fc;
    background: rgba(129, 140, 248, 0.16);
}

html body .feature-icon-orange {
    color: var(--b-200);
    background: rgba(147, 197, 253, 0.14);
}

html body .process-number {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

html body .home-statistics-number {
    color: var(--b-300);
}

html body .about-symbol {
    color: rgba(147, 197, 253, 0.9);
}

html body .about-list li {
    color: var(--t-muted);
}

/* ---------- СЕКЦИИ / ПАНЕЛИ ---------- */

html body .process-section {
    background: rgba(11, 26, 61, 0.6);
}

html body .statistics-dashboard {
    background: transparent;
}

html body .home-cta,
html body .vaccine-cta {
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.3), rgba(8, 18, 48, 0.2)),
        #0b1a3d;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

html body .health-card,
html body .hero-image-card,
html body .home-video-panel,
html body .videos-preview-visual,
html body .registration-card,
html body .about-main-card {
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(147, 197, 253, 0.28), transparent 45%),
        linear-gradient(145deg, #1d4ed8, #1e3a8a 58%, #0b1d4a);
    border: 1px solid rgba(147, 197, 253, 0.25);
    box-shadow: 0 24px 60px rgba(29, 78, 216, 0.35);
}

html body .health-card p,
html body .hero-image-card p,
html body .home-video-panel p,
html body .registration-content p {
    color: rgba(255, 255, 255, 0.86);
}

html body .registration-content .section-label {
    color: var(--b-200);
}

html body .registration-content .section-label::before {
    background: var(--b-200);
}

/* ---------- УВЕДОМЛЕНИЯ ---------- */

html body .medical-notice,
html body .vaccine-notice,
html body .video-notice,
html body .centers-notice,
html body .statistics-demo-notice {
    color: var(--b-200);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

html body .medical-notice p,
html body .medical-notice strong,
html body .vaccine-notice p,
html body .vaccine-notice strong,
html body .video-notice p,
html body .video-notice strong,
html body .centers-notice p,
html body .statistics-demo-notice p {
    color: var(--b-200);
}

/* ---------- ФОРМЫ ---------- */

html body input:not([type="checkbox"]):not([type="radio"]),
html body select,
html body textarea,
html body .vaccine-search,
html body .search-input,
html body .region-select,
html body .statistics-filter select {
    color: var(--t-main);
    background: rgba(8, 18, 48, 0.75);
    border: 1px solid var(--line);
}

html body input::placeholder,
html body textarea::placeholder {
    color: var(--t-faint);
}

html body input:not([type="checkbox"]):not([type="radio"]):focus,
html body select:focus,
html body textarea:focus,
html body .vaccine-search:focus,
html body .search-input:focus,
html body .region-select:focus {
    border-color: var(--b-400);
    outline: none;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}

html body select option {
    color: var(--t-main);
    background: #0b1a3d;
}

html body .search-field label {
    color: var(--t-main);
}

/* ---------- ЦЕНТРЫ ---------- */

html body .center-region-badge {
    color: var(--b-200);
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

html body .center-info-label,
html body .centers-empty-icon {
    color: var(--t-faint);
}

html body .center-info-value {
    color: var(--t-main);
}

html body .center-card-footer {
    border-top-color: var(--line);
}

html body .center-status,
html body .centers-results-count {
    color: var(--t-muted);
}

html body .center-status-dot {
    background: var(--sky);
}

html body .centers-empty {
    background: rgba(11, 26, 61, 0.6);
    border: 1px dashed var(--line-strong);
}

/* ---------- ВАКЦИНЫ / ВИДЕО ---------- */

html body .vaccine-purpose,
html body .video-category {
    color: var(--b-200);
    background: rgba(59, 130, 246, 0.16);
}

html body .video-cover {
    background: linear-gradient(135deg, #16306b, #0b1a3d);
}

html body .video-play-icon {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

html body .vaccine-modal,
html body .video-modal {
    background: rgba(3, 8, 24, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

html body .vaccine-modal-content,
html body .video-modal-content {
    color: var(--t-main);
    background: linear-gradient(160deg, #16306b, #0b1a3d);
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.7);
}

/* ---------- СТАТИСТИКА ---------- */

html body .statistics-card-title,
html body .statistics-table th,
html body .statistics-table-note,
html body .chart-fallback {
    color: var(--t-muted);
}

html body .statistics-card-value,
html body .statistics-table td {
    color: #fff;
}

html body .statistics-table th,
html body .statistics-table td {
    border-bottom-color: var(--line);
}

html body .statistics-table th,
html body .statistics-table-note,
html body .chart-fallback {
    background: rgba(59, 130, 246, 0.1);
}

html body .statistics-table-header {
    border-bottom-color: var(--line);
}

html body .statistics-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.12);
}

/* ---------- FOOTER ---------- */

html body .site-footer,
html body .footer {
    color: var(--t-muted);
    background: linear-gradient(180deg, #071126, #050c1f);
    border-top: 1px solid var(--line);
}

html body .footer-brand p,
html body .footer-brand > p,
html body .footer-contact p,
html body .footer-links a,
html body .footer-column a,
html body .footer-column p,
html body .footer-bottom,
html body .footer-bottom p {
    color: var(--t-muted);
}

html body .footer-links a:hover,
html body .footer-column a:hover,
html body .footer-logo:hover {
    color: var(--b-300);
}

html body .footer-links h3,
html body .footer-contact h3,
html body .footer-column h3 {
    color: #fff;
}

html body .footer-bottom {
    border-top-color: var(--line);
}

/* ---------- Окно вакцины: фото и плавные анимации ---------- */

@keyframes vmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmFadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes vmCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.95); }
    to { opacity: 1; transform: none; }
}

@keyframes vmCardOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(18px) scale(0.97); }
}

@keyframes vmRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes vmShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

html body .vaccine-modal.open {
    animation: vmFadeIn 0.28s ease both;
}

html body .vaccine-modal.open .vaccine-modal-content {
    animation: vmCardIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html body .vaccine-modal.open.closing {
    animation: vmFadeOut 0.22s ease both;
}

html body .vaccine-modal.open.closing .vaccine-modal-content {
    animation: vmCardOut 0.22s ease both;
}

html body .vaccine-modal.open .vaccine-modal-photo {
    animation: vmRise 0.5s 0.08s ease both;
}

html body .vaccine-modal.open #vaccineModalTitle {
    animation: vmRise 0.5s 0.18s ease both;
}

html body .vaccine-modal.open #vaccineModalDescription {
    animation: vmRise 0.5s 0.28s ease both;
}

.vaccine-modal-photo {
    position: relative;
    width: 100%;
    max-height: 45vh;
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(110, 150, 255, 0.25);
    border-radius: 14px;
    background: #0b1a3d;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.5);
}

.vaccine-modal-photo[hidden] {
    display: none;
}

.vaccine-modal-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease, transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vaccine-modal-photo.loaded img {
    opacity: 1;
    transform: scale(1);
}

.vaccine-modal-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 62%, rgba(8, 18, 48, 0.55));
    pointer-events: none;
}

.vaccine-photo-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #0f2150 30%, #1f3f85 50%, #0f2150 70%);
    background-size: 200% 100%;
    animation: vmShimmer 1.4s linear infinite;
    transition: opacity 0.5s ease;
}

.vaccine-modal-photo.loaded .vaccine-photo-skeleton {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    html body .vaccine-modal.open,
    html body .vaccine-modal.open *,
    html body .vaccine-modal.open.closing,
    html body .vaccine-modal.open.closing * {
        animation: none !important;
    }

    .vaccine-modal-photo img {
        transition: none;
    }
}