/*
 * Глобальные стили страниц: полотно, фон обёрток, поля ввода, капсулы, поиск в шапке.
 * Вынесены из style.css (этап E), подключаются сразу после него — порядок сохранён.
 */

/* ── Единый фон страниц, как в каталоге ─────────────────────────────────
   Полотно #f7fafc на всех поверхностях; белыми остаются только карточки
   и панели. .gk-v4-shell здесь намеренно НЕ перекрашиваем: внутри него
   лежит тёмная полоса шапки (.gk-v4-topbar::before) с z-index: -1 — фон
   оболочки перекрывал бы её. .gk-v4-page-wrapper и .gk-v4-single-main
   тоже прозрачные: иначе они закрывают световые пятна, которые рисуются
   на .entry-content / .gk-page / .gk-v4-single-page. */
html,
body {
    background-color: #f7fafc;
}

body .gk-v4-page-wrapper,
body .gk-v4-single-main {
    background-color: transparent;
}

/* Карточка страницы остаётся белой, чтобы читалась на полотне */
body .gk-v4-page-article {
    background-color: #ffffff;
}

/* Фон и световые пятна главной живут в плагине:
   gidkursov-core/includes/home/assets/home.css — единственный владелец. */

/* Те же световые пятна на всех остальных страницах. Рисуем на обёртках,
   которые сами залиты цветом (иначе непрозрачный фон дочернего блока
   перекрывает градиент родителя): .entry-content, .gk-page (о проекте),
   .gk-v4-single-page (карточка курса), .gk-v4-choice-page (подбор и калькулятор).
   ВАЖНО: сам .gk-choice — это белая карточка, ему фон не задаём. */
body:not(.home) .entry-content,
body:not(.home) .gk-page,
body:not(.home) .gk-v4-single-page,
body:not(.home) .gk-v4-choice-page,
body:not(.home) .gk-v4-compare-page {
    background-color: #f7fafc;
    background-image:
        radial-gradient(720px 380px at calc(100% - 40px) 90px, rgba(47, 208, 107, .20), rgba(47, 208, 107, 0) 66%),
        radial-gradient(820px 420px at -40px 140px, rgba(58, 160, 168, .18), rgba(58, 160, 168, 0) 68%),
        radial-gradient(520px 280px at 52% 520px, rgba(47, 208, 107, .09), rgba(47, 208, 107, 0) 70%);
    background-repeat: no-repeat;
}

/* На странице «Все направления» пятна рисует .gk-page: там обёртка сравнения
   начинается ниже шапки, и её собственный градиент дал бы полосу.
   Правило лежит в categories.css, чтобы не влиять на /compare/. */

/* Карточка курса: пятна на полноширинной обёртке .gk-v4-single-page
   (у .gk-v4-single-main ширина 1280px, и градиент на ней виден только
   внутри этой полосы). */
body .gk-v4-single-main {
    background: transparent;
}

/* ── Оболочка страниц на базе .gk-page (школы, направления, о сайте, куки) ──
   Шапка должна быть такой же, как в каталоге, поэтому у оболочки нет боковых
   отступов: topbar растягивается на всю ширину. Отступы даём контенту —
   каждому блоку, кроме шапки. */
.gk-page > .gk-v4-shell {
    padding: 0 0 48px;
}

.gk-page > .gk-v4-shell > :not(.gk-v4-topbar) {
    width: min(1240px, calc(100% - 20px));
    margin-left: auto;
    margin-right: auto;
}

/* В style.css есть `.gk-v4-main { width: 100% !important }` для ≤1280px —
   она растягивала main на всю оболочку и съедала боковые отступы контента.
   Базово возвращаем main отступы, а страницам, которые рисуют собственный фон
   на всю ширину (.gk-v4-compare-page / .gk-v4-choice-page / .gk-choice),
   отдаём полную ширину — иначе фон оказывается «внутри блока». */
.gk-page > .gk-v4-shell > .gk-v4-main {
    width: min(1240px, calc(100% - 20px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-v4-compare-page),
.gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-v4-choice-page),
.gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-choice) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 782px) {
    .gk-page > .gk-v4-shell {
        padding-bottom: 36px;
    }

    .gk-page > .gk-v4-shell > :not(.gk-v4-topbar) {
        width: calc(100% - 16px);
    }

    .gk-page > .gk-v4-shell > .gk-v4-main {
        width: calc(100% - 16px) !important;
    }

    .gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-v4-compare-page),
    .gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-v4-choice-page),
    .gk-page > .gk-v4-shell > .gk-v4-main:has(.gk-choice) {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    .gk-page > .gk-v4-shell > :not(.gk-v4-topbar) {
        width: calc(100% - 32px);
    }

    .gk-page > .gk-v4-shell > .gk-v4-main {
        width: calc(100% - 32px) !important;
    }
}

/* Карточка подбора (.gk-choice) уже даёт рамку, фон и радиус. Вложенная
   панель рисовала вторую рамку — так было на «Актуальных альтернативах»
   и «Рассчитать расходы». Убираем её оформление, оставляя только разметку. */
.gk-choice .gk-choice__panel {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ── Поля ввода на белом фоне: голубая рамка вместо оранжевой/чёрной ─────
   Оранжевое кольцо приходило из `:focus-visible` для .gk-v4-shell и
   .gk-v4-compare-page, чёрная рамка — браузерный default у input.
   Шапку (.gk-v4-topbar) не трогаем. */
.gk-choice :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.gk-v4-page-content--plain :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.gk-v4-page-article__content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.gk-v4-single-main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.gk-v4-compare-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.gk-v4-filters :where(input:not([type="checkbox"]):not([type="radio"]), select),
.gk-v4-scope-actions :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    border: 1px solid #d7e0dc;
    border-radius: 12px;
    background-color: #ffffff;
    color: #0b2d38;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.gk-choice :where(input, select, textarea):hover,
.gk-v4-page-content--plain :where(input, select, textarea):hover,
.gk-v4-page-article__content :where(input, select, textarea):hover,
.gk-v4-single-main :where(input, select, textarea):hover,
.gk-v4-compare-page :where(input, select, textarea):hover,
.gk-v4-filters :where(input, select):hover,
.gk-v4-scope-actions :where(input, select):hover {
    border-color: #c8e2ea;
}

.gk-choice :where(input, select, textarea):focus,
.gk-choice :where(input, select, textarea):focus-visible,
.gk-v4-page-content--plain :where(input, select, textarea):focus,
.gk-v4-page-content--plain :where(input, select, textarea):focus-visible,
.gk-v4-page-article__content :where(input, select, textarea):focus,
.gk-v4-page-article__content :where(input, select, textarea):focus-visible,
.gk-v4-single-main :where(input, select, textarea):focus,
.gk-v4-single-main :where(input, select, textarea):focus-visible,
.gk-v4-compare-page :where(input, select, textarea):focus,
.gk-v4-compare-page :where(input, select, textarea):focus-visible,
.gk-v4-filters :where(input, select):focus,
.gk-v4-filters :where(input, select):focus-visible,
.gk-v4-scope-actions :where(input, select):focus,
.gk-v4-scope-actions :where(input, select):focus-visible {
    outline: none !important;
    border-color: #9fc9d6 !important;
    box-shadow: 0 0 0 3px rgba(159, 201, 214, .35) !important;
    background-color: #ffffff;
}

/* Hero-поиск главной: рамку, радиус и кольцо фокуса рисует обёртка-капсула.
   Без этого правила общий стиль полей добавлял вторую голубую рамку внутри. */
.gk-v4-shell .gk-v4-scope-actions--home .gk-v4-scope-actions__search-input,
.gk-v4-shell .gk-v4-scope-actions--home .gk-v4-scope-actions__search-input:hover,
.gk-v4-shell .gk-v4-scope-actions--home .gk-v4-scope-actions__search-input:focus,
.gk-v4-shell .gk-v4-scope-actions--home .gk-v4-scope-actions__search-input:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Исключение: поля внутри готовых «капсул» (школы и направления). Рамку и
   кольцо у них рисует обёртка, иначе внутри появляется второй прямоугольник.
   Поиск подбора и фильтров каталога сюда НЕ входит: у них рамка на самом
   поле (у .gk-choice__search и .gk-v4-scope-actions__search-input обёртка
   без рамки) — иначе поле остаётся без границы. */
.gk-schools__search input,
.gk-cats-hero__search input {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.gk-schools__search input:hover,
.gk-schools__search input:focus,
.gk-schools__search input:focus-visible,
.gk-schools__search input:active,
.gk-cats-hero__search input:hover,
.gk-cats-hero__search input:focus,
.gk-cats-hero__search input:focus-visible,
.gk-cats-hero__search input:active {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Поиск в шапке сохраняет свою тёмную рамку и подсветку фокуса */
.gk-v4-topbar__search input {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    background-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}

.gk-v4-topbar__search input:focus,
.gk-v4-topbar__search input:focus-visible {
    border-color: rgba(159, 223, 137, .78) !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, .09) !important;
    box-shadow: none !important;
}