/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Description: Дочерняя тема Astra для лендинга услуг
Author: Developer
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* =============================================================================
   CSS Variables (Design System) – Обновленная палитра
   ============================================================================= */
:root {
    /* Основные цвета */
    --color-white: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-section: #f1f5f9;
    --color-bg-gray: #f1f5f9; /* Серый фон для секций (zebra pattern) */
    
    /* Текст */
    --color-text-dark: #1e293b;
    --color-text-body: #475569;
    --color-text-muted: #64748b;
    
    /* Акцентные цвета */
    --color-primary: #2563eb;
    --color-primary-light: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-primary-bg: #eff6ff;
    
    /* Успех (зеленый – "сдано") */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-dark: #059669;
    --color-success-bg: #ecfdf5;
    
    /* Границы */
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;
    
    /* Тени – мягкие, современные */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.35);
    --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.35);
    
    /* Скругления */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Типографика */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Layout – полные токены в css/_variables.css (source of truth) */
    --container-max: 1200px;
    --container-pad-x: 16px;
    --ast-normal-container-width: 1200px;
    --spacing-section: 40px;
    --spacing-hero-top: 20px;
    --spacing-hero-bottom: 48px;
    --spacing-breadcrumb-gap: 14px;
    --fs-h1: 1.625rem;
    --fs-h2: 1.375rem;
    --fs-body: 0.9375rem;

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-success-hover: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-hero: linear-gradient(135deg, #f0f7ff 0%, #ffffff 30%, #f8faff 70%, #e8f4ff 100%);
    --gradient-cta: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
}

/* Fallback desktop tokens if _variables.css not yet applied (sync with _variables.css) */
@media (min-width: 922px) {
    :root {
        --container-pad-x: 20px;
        --spacing-section: 52px;
        --spacing-hero-top: 24px;
        --spacing-hero-bottom: 56px;
        --spacing-breadcrumb-gap: 12px;
        --fs-h1: clamp(1.85rem, 2.6vw, 2.4rem);
        --fs-h2: 1.625rem;
        --fs-body: 1rem;
    }
}

/* =============================================================================
   Base Styles
   ============================================================================= */
* {
    box-sizing: border-box;
}

html {
    /* Резерв места под вертикальный скроллбар (CSS scrollbar-gutter) */
    scrollbar-gutter: stable;
}

html, body {
    overflow-x: clip; /* clip вместо hidden предотвращает горизонтальный скролл и НЕ ломает position: sticky */
    width: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body, 0.9375rem);
    color: var(--color-text-dark);
    line-height: var(--lh-body, 1.55);
    background: var(--color-white);
    position: relative;
}

.section-title {
    font-size: var(--fs-h2, 1.375rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-gap, 16px);
    color: var(--color-text-dark);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight, 1.2);
    text-wrap: balance;
}

.section-subtitle {
    font-size: var(--fs-body, 0.9375rem);
    line-height: var(--lh-body, 1.55);
    color: var(--color-text-body);
}

@media (min-width: 922px) {
    .section-title {
        margin-bottom: 32px;
    }
}

/* =============================================================================
   10. Социальные иконки + Popup + Sidebar CTA
   ============================================================================= */

/* Социальные иконки */
.social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-icons--small {
    gap: 8px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    color: var(--color-white);
}

.social-icons--small .social-icon {
    width: 36px;
    height: 36px;
}

.social-icon svg {
    width: 22px;
    height: 22px;
}

.social-icons--small .social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon--telegram {
    background: #0088cc;
}

.social-icon--telegram:hover {
    background: #006da3;
    transform: translateY(-2px);
    color: var(--color-white);
}

.social-icon--email {
    background: var(--color-primary);
}

.social-icon--email:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    color: var(--color-white);
}

.social-icon--max {
    background: var(--color-primary);
}

.social-icon--max:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    color: var(--color-white);
}

/* =============================================================================
   15. Container
   ============================================================================= */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility (keyboard only) */
a:focus-visible,
button:focus-visible,
details:focus-visible summary {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove dotted outline on mouse click / active states */
a:focus:not(:focus-visible),
a:active,
button:focus:not(:focus-visible),
button:active,
summary:focus:not(:focus-visible),
summary:active,
[tabindex]:focus:not(:focus-visible) {
    outline: none !important;
    outline-style: none !important;
    box-shadow: none !important;
}

::-moz-focus-inner {
    border: 0 !important;
    outline: none !important;
}

/* Убираем синие эффекты / Astra button:focus для мобильных элементов меню */
.header-burger:focus,
.header-burger:active,
.header-burger:focus-visible,
.header-burger.is-active,
.header-burger.is-active:focus,
.header-telegram-mobile:focus,
.header-telegram-mobile:active,
.header-telegram-mobile:focus-visible,
.mobile-menu__close,
.mobile-menu__close:hover,
.mobile-menu__close:focus,
.mobile-menu__close:active,
.mobile-menu__close:focus-visible,
.mobile-submenu-toggle:focus,
.mobile-submenu-toggle:active,
.mobile-submenu-toggle:focus-visible,
.mobile-menu__link:focus,
.mobile-menu__link:active,
.mobile-menu__link:focus-visible,
.mobile-submenu__link:focus,
.mobile-submenu__link:active,
.mobile-submenu__link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.header-burger,
.header-burger:hover,
.header-burger:focus,
.header-burger:active,
.header-burger:focus-visible,
.header-burger.is-active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

.mobile-menu__close,
.mobile-menu__close:hover,
.mobile-menu__close:focus,
.mobile-menu__close:active,
.mobile-menu__close:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-text-dark, #1e293b) !important;
    border: none !important;
    transform: none !important;
}

/* Selection color */
::selection {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}

/* =============================================================================
   24. 404 ERROR PAGE
   ============================================================================= */
.error-404 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.error-404__container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Визуальная часть - 404 */
.error-404__visual {
    margin-bottom: 32px;
}

.error-404__number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.digit {
    font-size: clamp(80px, 20vw, 140px);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    text-shadow: 4px 4px 0 rgba(0, 136, 204, 0.15);
}

.digit--0 {
    position: relative;
    width: clamp(70px, 18vw, 120px);
    height: clamp(80px, 20vw, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.digit__circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.digit__face {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.digit__eyes {
    display: flex;
    gap: 16px;
}

.digit__eye {
    width: 12px;
    height: 12px;
    background: var(--color-primary-dark);
    border-radius: 50%;
    animation: blink 3s ease-in-out infinite;
}

@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.digit__mouth {
    width: 24px;
    height: 12px;
    border: 3px solid var(--color-primary-dark);
    border-top: none;
    border-radius: 0 0 24px 24px;
}

/* Контент */
.error-404__content {
    margin-bottom: 40px;
}

.error-404__title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 16px;
}

.error-404__text {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto;
}

/* Быстрые ссылки */
.error-404__links {
    margin-bottom: 40px;
}

.error-404__links-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

.error-404__links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.error-404__link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.error-404__link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-primary);
}

.error-404__link-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.error-404__link-card:hover .error-404__link-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Скрываем карточку "Сессия под ключ" на странице 404 */
.error-404__link-card[href*="sessiya-pod-kluch"],
.error-404__link-card:has(span:contains("Сессия под ключ")),
.error-404__link-card:has(span:contains("Сессия")) {
    display: none !important;
}

/* CTA кнопки */
.error-404__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.error-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.error-404__btn--primary {
    background: var(--gradient-primary);
    color: var(--color-white);
}

.error-404__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
    color: var(--color-white);
}

.error-404__btn--telegram {
    background: #0088cc;
    color: var(--color-white);
}

.error-404__btn--telegram:hover {
    background: #006da3;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.35);
    color: var(--color-white);
}

/* Поиск */
.error-404__search {
    max-width: 921px;
    margin: 0 auto;
}

.error-404__search-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.error-404__search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    padding: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.error-404__search-form:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.error-404__search-input {
    flex: 1;
    padding: 12px 16px;
    border: none !important;
    background: transparent !important;
    font-size: 1rem;
    color: var(--color-text-dark);
    outline: none !important;
    box-shadow: none !important;
}

.error-404__search-input::placeholder {
    color: var(--color-text-muted);
}

.error-404__search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.error-404__search-btn {
    width: 48px;
    height: 44px;
    min-width: 48px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-404__search-btn:hover {
    background-color: var(--color-primary-dark);
}

/* Скрываем SVG внутри если есть */
.error-404__search-btn svg {
    display: none;
}

/* 404: база = мобильные (480), 545px = планшет/десктоп */
.error-404 {
    padding: 40px 16px;
    min-height: calc(100vh - 150px);
}

.error-404__links-grid {
    grid-template-columns: repeat(2, 1fr);
}

.error-404__cta {
    flex-direction: column;
    gap: 12px;
}

.error-404__btn {
    width: 100%;
    justify-content: center;
}

.digit__eyes {
    gap: 12px;
}

.digit__eye {
    width: 10px;
    height: 10px;
}

.digit__mouth {
    width: 18px;
    height: 9px;
}

.error-404__link-card {
    padding: 16px 8px;
    font-size: 0.8125rem;
}

.error-404__link-icon {
    width: 48px;
    height: 48px;
}

.error-404__link-icon svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 922px) {
    .error-404 {
        padding: 60px 20px;
        min-height: calc(100vh - 120px);
    }

    .error-404__links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .error-404__cta {
        flex-direction: row;
        gap: 16px;
    }

    .error-404__btn {
        width: auto;
        justify-content: flex-start;
    }

    .digit__eyes {
        gap: 16px;
    }

    .digit__eye {
        width: 14px;
        height: 14px;
    }

    .digit__mouth {
        width: 24px;
        height: 12px;
    }

    .error-404__link-card {
        padding: 20px 16px;
        font-size: 0.9375rem;
    }

    .error-404__link-icon {
        width: 56px;
        height: 56px;
    }

    .error-404__link-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* =============================================================================
   НОВЫЕ БЛОКИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ
   ============================================================================= */

/* Hero Form - обновленные стили для label */
.hero-contact-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}

.hero-contact-form input[type="text"],
.hero-contact-form textarea {
    margin-top: 0;
}

/* =============================================================================
   CONTACT MODAL (единый компонент)
   #exitPopup – одна форма для: exit-intent, email-float, «Заказать»,
   «Отправить расчёт» из квиза. Размеры через токены ниже.
   ============================================================================= */
.exit-popup {
    /* Единые токены компонента; переопределяются только на layout breakpoint */
    --ps-modal-max-w: 100%;
    --ps-modal-h: calc(100vh - 16px);
    --ps-modal-h: calc(100dvh - 16px);
    --ps-modal-pad-y: 20px;
    --ps-modal-pad-x: 16px;
    --ps-modal-task-min-h: 140px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 16px;
    box-sizing: border-box;
}

.exit-popup.is-open {
    opacity: 1;
    visibility: visible;
}

.exit-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    will-change: backdrop-filter, opacity;
}

.exit-popup__content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--ps-modal-pad-y) var(--ps-modal-pad-x);
    max-width: var(--ps-modal-max-w);
    width: 100%;
    height: var(--ps-modal-h);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    min-height: 0;
    text-align: center;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    border: 1px solid var(--color-border);
    transform: none;
    transition: none;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exit-popup__content::before {
    display: none;
}

.exit-popup.is-open .exit-popup__content {
    transform: scale(1);
}

/* Крестик закрытия: <span role="button"> вместо <button>,
   чтобы Astra не применяла глобальные button-стили (background, border, padding) */
.exit-popup__close,
button.exit-popup__close,
span.exit-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8 !important;
    z-index: 20;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.exit-popup__close:hover,
.exit-popup__close:focus,
.exit-popup__close:active,
button.exit-popup__close:hover,
button.exit-popup__close:focus,
button.exit-popup__close:active,
span.exit-popup__close:hover,
span.exit-popup__close:focus,
span.exit-popup__close:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #475569 !important;
}

.exit-popup__head {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    padding-right: 20px;
}

.exit-popup__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    padding: 4px 10px;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    width: fit-content;
}

.exit-popup__title {
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--color-text-dark, #1e293b);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.exit-popup__subtitle {
    font-size: 0.875rem;
    color: var(--color-text-body);
    margin: 0 auto;
    text-align: center;
    line-height: 1.4;
    max-width: 480px;
}

.exit-popup__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 1px;
}

.exit-popup__form-field {
    width: 100%;
    text-align: left;
    flex-shrink: 0;
}

.exit-popup__form-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 4px;
}

.exit-popup__form-field input,
.exit-popup__form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    box-sizing: border-box;
}

.exit-popup__form-field input:focus,
.exit-popup__form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.exit-popup__form-field textarea {
    resize: vertical;
    min-height: var(--ps-modal-task-min-h);
    max-height: none;
    line-height: 1.45;
}

/* Поле «Задача» / комментарий – растягивается и забирает высоту модалки */
.exit-popup__form-field--task {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.exit-popup__form-field--task textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--ps-modal-task-min-h);
    max-height: none;
    height: 100%;
    resize: vertical;
}

.exit-popup__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
    margin-top: 2px;
    min-height: 48px;
    padding: 13px 18px;
    background: var(--gradient-primary);
    color: var(--color-white);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: var(--shadow-primary);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.exit-popup__btn:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    background: var(--gradient-primary-hover);
    color: var(--color-white);
    transform: none;
}

.exit-popup__btn:active {
    transform: none;
}

.exit-popup__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Десктоп: крупная рабочая область, свободная высота уходит полю задачи */
@media (min-width: 922px) {
    .exit-popup {
        --ps-modal-max-w: 520px;
        --ps-modal-h: auto;
        --ps-modal-task-min-h: auto;
        --ps-modal-pad-y: 30px;
        --ps-modal-pad-x: 32px;
        padding: 24px;
    }

    .exit-popup__content {
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
    }

    .exit-popup__form {
        gap: 16px;
    }

    .exit-popup__title {
        font-size: 1.625rem;
    }

    .exit-popup__subtitle {
        font-size: 0.9375rem;
    }

    .exit-popup__close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
    }
}

/* Мобилка / узкий экран */
@media (max-width: 921px) {
    .exit-popup {
        --ps-modal-h: min(720px, calc(100vh - 16px));
        --ps-modal-h: min(720px, calc(100dvh - 16px));
        --ps-modal-task-min-h: clamp(200px, 34dvh, 320px);
        padding: 8px;
        align-items: center;
    }

    .exit-popup.has-virtual-keyboard {
        top: var(--ps-contact-viewport-top, 0px);
        height: var(--ps-contact-viewport-h, 100dvh);
        --ps-modal-h: calc(var(--ps-contact-viewport-h, 100dvh) - 8px);
        align-items: flex-start;
        padding-top: max(4px, env(safe-area-inset-top));
    }

    .exit-popup__content {
        border-radius: 14px;
    }

    .exit-popup__head {
        margin-bottom: 12px;
    }

    .exit-popup__form-field--task textarea {
        min-height: var(--ps-modal-task-min-h);
    }

    .exit-popup__close {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* Низкие экраны – плотнее, без лишнего скролла */
@media (max-height: 640px) {
    .exit-popup {
        --ps-modal-h: calc(100vh - 12px);
        --ps-modal-h: calc(100dvh - 12px);
        --ps-modal-task-min-h: 112px;
        --ps-modal-pad-y: 16px;
        --ps-modal-pad-x: 14px;
        padding: 6px;
    }

    .exit-popup__content {
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
    }

    .exit-popup__head {
        margin-bottom: 10px;
    }

    .exit-popup__badge {
        margin-bottom: 6px;
        padding: 3px 8px;
        font-size: 0.625rem;
    }

    .exit-popup__title {
        font-size: 1.125rem;
        margin-bottom: 4px;
    }

    .exit-popup__subtitle {
        font-size: 0.71875rem;
        line-height: 1.35;
    }

    .exit-popup__form {
        gap: 8px;
    }

    .exit-popup__form-field label {
        font-size: 0.6875rem;
        margin-bottom: 3px;
    }

    .exit-popup__form-field input,
    .exit-popup__form-field textarea {
        padding: 9px 11px;
        font-size: 1rem;
    }

    .exit-popup__btn {
        padding: 10px 12px;
        font-size: 0.8125rem;
    }
}

/* Очень низкие экраны (ландшафт телефона) */
@media (max-height: 520px) {
    .exit-popup {
        --ps-modal-task-min-h: 88px;
        --ps-modal-pad-y: 12px;
    }

    .exit-popup__head {
        margin-bottom: 8px;
    }

    .exit-popup__title {
        font-size: 1.0625rem;
        margin-bottom: 2px;
    }

    .exit-popup__subtitle {
        font-size: 0.6875rem;
    }

}

/* =============================================================================
   FIX: Prevent Stuck Active/Focus States on Clickable Elements
   ============================================================================= */

/* Remove default outline and prevent stuck focus states */
button,
a,
a.btn-order,
.calc-option,
.service-card-v2,
.subject-card,
.telegram-float,
.calc-quantity-stepper__btn {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Reset focus states - no background change or outline on click focus */
button:focus:not(.is-selected):not(:hover):not(.calc-quantity-stepper__btn),
a:focus:not(:focus-visible),
a:active,
a.btn-order:focus:not(:hover),
.calc-option:focus:not(.is-selected):not(:hover),
.service-card-v2:focus:not(:hover),
.subject-card:focus:not(:hover) {
    outline: none !important;
}

/* Active: без scale/«опускания» – только для карточек услуг (не text-link кнопки) */
.service-card-v2:active,
.subject-card:active {
    opacity: 0.92;
}

/* .ps-read-more – не button: см. _components.css (span[role=button], вне Astra button:hover) */
.ps-read-more,
.ps-read-more:hover,
.ps-read-more:focus,
.ps-read-more:active,
.seo-intro-more,
.seo-intro-more:hover,
.seo-intro-more:focus,
.seo-intro-more:active,
.js-read-more__btn,
.js-read-more__btn:hover,
.js-read-more__btn:focus,
.js-read-more__btn:active,
.calc-option:active,
.calc-option:hover {
    transform: none !important;
    animation: none !important;
}

/* After click, reset to normal state (not selected) - only when not hovering */
.calc-option:focus:not(.is-selected):not(:hover) {
    background: var(--color-bg-light);
    border-color: var(--color-border);
}

.service-card-v2:focus:not(:hover),
.subject-card:focus:not(:hover) {
    border-color: var(--color-border);
}

/* Quiz options: Only show selected state when actually selected */
.calc-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.calc-option.is-selected:focus {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

/* Service cards: Hover only, no persistent state */
.service-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.service-card-v2:focus {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--color-border);
}

/* Subject cards: Hover only */
.subject-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); }

.subject-card:focus { box-shadow: none; border-color: var(--color-border); }

/* Email Float Button States */
.email-float:active {
    background: linear-gradient(135deg, #ea4335 0%, #d33a2c 100%);
    transform: scale(1.05);
}

.email-float:active svg {
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}

.email-float:focus:not(:hover) {
    background: linear-gradient(135deg, #ea4335 0%, #d33a2c 100%);
    transform: none;
}

.email-float:focus svg {
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}

/* Buttons: Reset focus/active states */
.btn-order:focus {
    background: var(--gradient-primary);
    transform: none;
}

.btn-order:active {
    background: var(--gradient-primary);
    transform: translateY(0);
}

/* Keep focus-visible for keyboard navigation accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* «Читать далее» – детали в css/_components.css (.ps-read-more = span, не button) */
.ps-read-more,
.seo-intro-more,
.js-read-more__btn,
.ps-read-more:hover,
.ps-read-more:focus,
.ps-read-more:active,
.seo-intro-more:hover,
.seo-intro-more:focus,
.seo-intro-more:active,
.js-read-more__btn:hover,
.js-read-more__btn:focus,
.js-read-more__btn:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--color-primary) !important;
    transform: none !important;
    animation: none !important;
    padding: 0 !important;
    text-shadow: none !important;
}

.ps-read-more:hover,
.seo-intro-more:hover,
.js-read-more__btn:hover {
    color: var(--color-primary-dark) !important;
    background: transparent !important;
    transform: none !important;
}

.ps-btn-text,
.ps-btn-text:hover,
.ps-btn-text:focus,
.ps-btn-text:active {
    background: transparent !important;
    color: var(--color-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Ghost в модалке: не белый текст на фокусе от Astra */
.task-expand-modal__btn--ghost,
.task-expand-modal__btn--ghost:focus,
.task-expand-modal__btn--ghost:focus-visible,
.task-expand-modal__btn--ghost:active {
    color: var(--color-text-body) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none;
}

.task-expand-modal__btn--ghost:hover {
    color: var(--color-text-dark) !important;
    background: var(--color-bg-light) !important;
    background-image: none !important;
}