/* Наши правки поверх стилей оригинала.
   Подключается последним, поэтому !important нужен только там,
   где у оригинала селектор той же специфичности (#id). */

/* --- Иконки блока «Join our community» ---------------------------------
   Discord и YouTube — это два PNG одинакового размера, 115x96 каждый.
   Оригинал рендерит их с разной шириной: 61px и 88px, то есть разница на
   экране 44%. Из-за этого одинаковые по исходнику иконки и вшитый в них
   текст выглядят разномасштабно. Приводим к общей ширине.

   Атрибуты width/height в разметке (94x107 и 135x105) не соответствуют
   реальным файлам — это данные из редактора LearnWorlds. Правильное
   соотношение сторон задаём здесь через aspect-ratio, чтобы не было
   скачка вёрстки до загрузки картинки.                                   */

#el_1737317676420_526,   /* Discord — 8 400+ People   */
#el_1737317676420_527 {  /* YouTube — 50 000+ Followers */
    width: 88px !important;
    height: auto !important;
    aspect-ratio: 115 / 96;
}


/* --- Баннер про cookie -------------------------------------------------
   Оригинал — полоса во всю ширину внизу (row шириной 1170px, центрированная,
   рамка только сверху). Делаем компактную карточку в левом нижнем углу:
   она не перекрывает контент и не тянет на себя внимание.

   Специфичность у оригинала — одиночный класс, поэтому !important не нужен
   нигде, кроме width: там правило конкурирует с фиксированной шириной 1170px. */

.dataProtectionSettingsWrapper {
    position: fixed;
    left: 24px;
    right: auto;
    bottom: 24px;
    top: auto;                      /* оригинал растягивал обёртку на весь экран */
    height: auto;
    width: 352px;
    max-width: calc(100vw - 48px);
    background: none;               /* она же служила затемняющей подложкой */
    padding: 0;
    z-index: 9999;
}

/* Именно этот элемент, а не обёртка, растягивался на всю высоту тёмным фоном
   и служил затемняющей подложкой страницы. Сбрасываем — карточке подложка не нужна. */
.dataProtectionSettings {
    margin: 0;
    height: auto !important;
    background: none !important;
}

.dataProtectionSettings-row {
    width: 100% !important;
    border-width: 2px;              /* в оригинале рамка только сверху */
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* Первая строка — текст и кнопка. В узкой карточке ставим их друг под друга. */
.dataProtectionSettings-row:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.dataProtectionSettingsDescr {
    font-size: 13px;
    line-height: 1.45;
    margin-left: 0;
    padding-right: 0;
    text-align: left;               /* в узкой колонке центровка читается хуже */
}

.dataProtectionSettings-btn {
    width: 100%;
    text-align: center;
}

/* Панель «accept individual cookies» тоже должна помещаться в карточку. */
.dataProtectionSettings-row:nth-child(2) {
    padding: 14px 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.dataProtectionSettings-lbl,
.dataProtectionSettings-txt {
    font-size: 12px;
}

/* --- Форма заявки -------------------------------------------------------
   Заменяет прежнюю подписку в одно поле. Цвета взяты с сайта: синяя рамка
   поля и зелёная кнопка — как у остальных призывов к действию. */

.ai-lead-form {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    /* Секция задаёт свой шрифт заголовкам; без этого подписи полей
       наследовали засечный и выбивались из остальной страницы. */
    font-family: Barlow, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ai-row {
    display: flex;
    gap: 16px;
}

.ai-row .ai-field {
    flex: 1 1 0;
    min-width: 0;              /* иначе длинное значение распирает колонку */
}

.ai-field {
    margin-bottom: 16px;
}

.ai-field label {
    display: block;
    font-family: inherit;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #241a5c;
}

.ai-field input,
.ai-phone {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    border: 2px solid #5b2ee0;
    border-radius: 6px;
    background: #fff;
}

.ai-field input {
    padding: 0 14px;
    font: inherit;
    font-size: 16px;
    color: #241a5c;
}

.ai-field input:focus,
.ai-phone:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 70, 236, .18);
}

.ai-field input.is-invalid,
.ai-phone:has(input.is-invalid) {
    border-color: #e0364c;
}

/* Телефон: флаг и код +48 — часть поля, а не отдельные элементы. */
.ai-phone {
    display: flex;
    align-items: center;
    padding-left: 12px;
    gap: 8px;
}

.ai-phone__flag {
    display: flex;
    flex: 0 0 auto;
}

.ai-phone__code {
    flex: 0 0 auto;
    font-size: 16px;
    color: #241a5c;
}

.ai-phone input {
    border: none;
    height: 48px;
    padding-left: 4px;
    box-shadow: none !important;
}

.ai-submit {
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: none;
    border-radius: 6px;
    background: #00ae90;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.ai-submit:hover {
    background: #009a80;
}

.ai-note {
    min-height: 20px;
    margin: 12px 0 0;
    font-size: 14px;
}

.ai-note.is-error { color: #e0364c; }
.ai-note.is-ok    { color: #00876f; }

@media (max-width: 560px) {
    .ai-row { flex-direction: column; gap: 0; }
}

/* Кнопка первого экрана стала ссылкой-якорем: <a> не наследует от <button>
   выравнивание и подчёркивание, задаём явно. */
.ai-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ai-cta:hover { text-decoration: none; }

/* Прокрутка по якорю оставляет место сверху, чтобы был виден заголовок блока. */
#get-started { scroll-margin-top: 150px; }

/* --- Меню в шапке ------------------------------------------------------
   Убираем шеврон (он рисуется псевдоэлементом) и выпадающие списки:
   все пункты теперь ведут на форму, раскрывать нечего. */

.lw-topbar-option-link.with-submenu::after {
    content: none !important;
    display: none !important;
}

.lw-topbar-submenu {
    display: none !important;
}

/* Пункты-заголовки были <div>, а не ссылками — курсор надо задать вручную. */
.lw-topbar-option-link {
    cursor: pointer;
}

/* --- Фоновые картинки как обычные <img> ---------------------------------
   apply.py переносит style="background-image:url(...)" в тег <img> внутри
   того же блока: фон браузер запрашивает только после разбора CSS и раскладки,
   то есть уже позади блокирующих скриптов, а <img> сканер находит сразу при
   разборе разметки.

   Растягиваем картинку на весь блок. object-fit:cover по центру повторяет
   прежние background-size:cover и background-position:50% 50%, обрезку даёт
   overflow:hidden родителя с его скруглением. pointer-events:none — чтобы
   ссылка-обёртка карточки по-прежнему принимала клики. */

.ai-bg-host {
    position: relative;
}

.ai-bg-host > .ai-bg-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: inherit;
    pointer-events: none;
}

/* --- Видео-отзывы -------------------------------------------------------
   Вместо прежних роликов стороннего сервиса, которые локально не открывались,
   лежит превью с кнопкой. Проигрыватель подставляется по клику: четыре
   встроенных ролика на старте весили бы больше всей остальной страницы,
   причём и для тех, кто смотреть не собирался.

   Пропорции задаём сами (aspect-ratio), а не классом движка, — блок держит
   форму независимо от того, что происходит со скриптами LearnWorlds. */

.ai-video {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #120b2e;
    cursor: pointer;
}

.ai-video__poster,
.ai-video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ai-video__poster {
    object-fit: cover;
}

.ai-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.ai-video:hover .ai-video__play {
    transform: translate(-50%, -50%) scale(1.06);
    background: #fff;
}

.ai-video__play svg {
    width: 34px;
    height: 34px;
    margin-left: 4px;          /* треугольник кажется смещённым влево без этого */
    fill: #5b2ee0;
}

/* Обёртку блока движок прячет, когда не находит внутри своего проигрывателя:
   для него блок пустой. Мы наполнили его сами — возвращаем показ. Специфичность
   тут не поможет, скрытие приходит инлайновым стилем, отсюда !important. */
.ai-video-host {
    display: block !important;
}

/* Пока скрипт не успел выбросить достроенный движком проигрыватель,
   он не должен мелькать поверх превью. */
.ai-video-host .js-video-wrapper,
.ai-video-host .js-embed-wrapper {
    display: none !important;
}

/* Подсказка вместо плеера, когда страница открыта файлом: плеер YouTube на
   такой странице не запускается. На боевом домене не появляется никогда. */
.ai-video__note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    background: rgba(13, 16, 48, .88);
    color: #fff;
    font-family: Barlow, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* --- Страница благодарности --------------------------------------------
   thanks.html собрана из privacy.html, поэтому текстовый блок там рассчитан
   на длинный документ. Для трёх строк его нужно сузить и убрать разнобой
   в отступах между абзацами. */

.ai-thanks {
    max-width: 620px;
    margin: 0 auto;
}

.ai-thanks p {
    margin: 0 0 12px;
}

/* Кнопка возврата: отделяем от текста, но не на всю высоту секции. */
.ai-thanks-actions {
    margin-top: 28px !important;
}

/* --- Реквизиты в футере -------------------------------------------------
   Название и адрес юрлица должны быть видны на сайте — этого требует
   проверка рекламодателя в Google. Блок мелкий, как и остальной футер. */

.ai-legal {
    margin-bottom: 10px;
    line-height: 1.5;
}

.ai-legal__name {
    font-weight: 600;
}

/* Копирайт приглушаем, чтобы название читалось первым. */
.ai-legal__copy {
    opacity: .75;
}

/* --- Cookie-баннер: собственное оформление ------------------------------
   Разметку баннера теперь ставит _tools/cookie-notice.html, а не движок.
   Цвета и рамку задаём здесь же: правила выше (.dataProtectionSettings*)
   отвечают только за геометрию карточки, а фон и кнопку рисовал общий
   бандл LearnWorlds, который из сборки уходит. */

.dataProtectionSettings-row {
    display: flex;
    box-sizing: border-box;
    border-style: solid;
    border-color: #5b2ee0;
    background: #1a1240;
    color: #fff;
    font-family: Barlow, "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.dataProtectionSettingsDescr-link {
    color: #fff;
    text-decoration: underline;
}

.dataProtectionSettings-btn {
    border: none;
    border-radius: 4px;
    padding: 10px 14px;
    background: #5b2ee0;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dataProtectionSettings-btn:hover {
    background: #4a21c4;
}

/* --- Меню на узких экранах ----------------------------------------------
   Кнопку и раскрытие делает _tools/mobile-menu.html. До 960px прячем
   горизонтальный список и показываем его выпадающим блоком под шапкой —
   тот же порог, что был у движка. */

.ai-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.ai-burger span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

@media (max-width: 959px) {
    .ai-burger { display: flex; }

    /* Контейнер кнопки идёт в разметке последним и на узком экране переносился
       под логотип. Ставим строку шапки флексом и прижимаем кнопку вправо.

       Абсолютным позиционированием это не решается: на узких экранах вёрстка
       шире вьюпорта, и right отсчитывался бы от края шапки, ушедшего за экран. */
    .lw-topbar .lw-h-row {
        display: flex;
        align-items: center;
    }

    .lw-topbar .js-lw-topbar-hamburger-wrapper {
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Шапка — точка отсчёта для выпадающего списка. */
    .lw-topbar { position: relative; }

    .lw-topbar .lw-topbar-menu { display: none; }

    .lw-topbar.ai-nav-open .lw-topbar-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #5b2ee0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        z-index: 999;
    }

    .lw-topbar.ai-nav-open .lw-topbar-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 20px 18px;
    }

    .lw-topbar.ai-nav-open .lw-topbar-option {
        width: 100%;
        padding: 8px 0;
    }
}

/* --- Ссылки в футере ----------------------------------------------------
   Оригинал красил их фирменным цветом — синим по тёмно-синему, и читалось
   это уже на грани. В польской палитре фон футера стал глубже, а бренд —
   фиолетовым: контраст падает до 1.9:1, ссылки пропадают. Красим их так же,
   как оформлен соседний заголовок «Inne» (.lw-text-color-fadeout50), —
   белым с прозрачностью, полная белизна на наведении.                      */

.lw-footer-links a,
.lw-footer-links a .flexible-part {
    color: rgba(255, 255, 255, .72) !important;
}

.lw-footer-links a:hover,
.lw-footer-links a:hover .flexible-part {
    color: #fff !important;
}