/*
    Освежение оформления «Мягкий» поверх темы Forty (main.css / site.min.css).
    Подключается в _Layout после основного стиля в любом окружении; удалить строку подключения — вернуть прежний вид.
    Скруглённые углы, плитки-карточки с зазорами и тенями, мягкие переходы; палитра и шрифт темы прежние.
*/

@keyframes np-fade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Шапка: полупрозрачная с размытием; над баннером остаётся прозрачной */
#header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(42, 47, 74, 0.85);
}

    #header.alt {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: transparent;
    }

/* Логотип NOPLAG — белая плашка со скруглением; в шапке и в подвале одинаковый */
#header .logo strong,
#footer .logo strong {
    border-radius: 8px;
    padding: 0.1em 0.45em 0.1em 0.7em;
}

#footer .logo {
    border: 0;
    display: inline-block;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.25em;
    margin-bottom: 2em;
    text-transform: uppercase;
}

    #footer .logo strong {
        background-color: #ffffff;
        color: #242943;
        display: inline-block;
        line-height: 1.65em;
        transition: background-color 0.2s ease-in-out;
    }

    #footer .logo:hover strong { background-color: #9bf1ff; }

/* Подвал: слева логотип и значок ВК, справа почта и ссылки разделов; копирайт — строкой ниже */
#footer .footer-top {
    align-items: center;
    display: flex;
    gap: 4em;
    margin-bottom: 2em;
}

    #footer .footer-brand { flex: none; }

        #footer .footer-brand .logo { margin-bottom: 1em; }

        #footer .footer-brand ul.icons { margin-bottom: 0; }

    #footer .footer-links ul.copyright { margin-bottom: 1em; }

        #footer .footer-links ul.copyright:last-child { margin-bottom: 0; }

/* Меню */
#menu .inner { border-radius: 20px; }

#menu ul.links > li > a:not(.button) { transition: color 0.2s; }

    #menu ul.links > li > a:not(.button):hover { color: #9bf1ff; }

/* Баннеры всех страниц: мягкий градиент, низ плавно переходит в фон страницы.
   Цветные варианты темы (style1–6) заливают баннер сплошным цветом — заливка убирается, фото видно сквозь градиент. */
#banner:after,
#banner.style1:after, #banner.style2:after, #banner.style3:after,
#banner.style4:after, #banner.style5:after, #banner.style6:after {
    background-color: transparent;
    background-image:
        linear-gradient(to bottom, rgba(36, 41, 67, 0) 60%, #242943 100%),
        linear-gradient(135deg, rgba(36, 41, 67, 0.9) 0%, rgba(141, 130, 196, 0.55) 100%);
    opacity: 1 !important;
}

#banner h1 { animation: np-fade 1s ease both; }

/* У темы фон баннера по умолчанию — картинка главной (banner1.jpg); внутренние страницы подставляют свою скриптом
   после загрузки, и картинка главной на мгновение мелькала. Скрипт пишет картинку в style и перекрывает это правило. */
#banner.style2 { background-image: none; }

/* Высота баннера — по содержимому: у темы она фиксированная, и на планшете и невысоком экране ноутбука
   длинный заголовок налезал на шапку. Внутренние страницы (banner-1) задают свои отступы сами. */
@media screen and (min-width: 737px) {

    #banner {
        height: auto;
        max-height: none;
        min-height: 32em;
    }

        #banner:not(.banner-1) { padding: 8em 0 5em 0; }

    /* Баннер внутренних страниц (style2; у главной — style-2) на 30% ниже: отступы темы 10em → 6em, минимум 32em → 22.4em
       (при 1440 px: 597 → 417 px) */
    #banner.style2 {
        min-height: 22.4em;
        padding: 6em 0 6em 0 !important;
    }

    /* Страницы заказа (раздел Client: параметры, оплата, после оплаты, скачивание, корректировка процента) —
       баннер ещё на 30% ниже: меньше отступы, минимум и размер заголовков */
    .ctrl-client #banner.style2 {
        min-height: 15.7em;
        padding: 4em 0 2.5em 0 !important;
    }

        .ctrl-client #banner h1 { font-size: 1.9em; }

        .ctrl-client #banner .content h2 { font-size: 1.3em; }
}

header.major > :first-child:after { border-radius: 2px; height: 3px; }

/* Логотипы систем на главной */
#banner .bloc-logo {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    min-width: 10.5em;
    padding: 1.1em 1.3em 0.4em;
    transition: transform 0.35s, background-color 0.35s;
    width: auto;
}

    #banner .bloc-logo:hover {
        background: rgba(255, 255, 255, 0.14);
        transform: translateY(-4px);
    }

    #banner .bloc-logo img {
        height: 48px;
        object-fit: contain;
        width: auto;
    }

/* Кнопки: скругление; главная кнопка — голубая подложка, при наведении заливка */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    border-radius: 999px;
    letter-spacing: 0.15em;
}

input[type="submit"].next, input[type="reset"].next, input[type="button"].next, button.next, .button.next {
    background-color: rgba(155, 241, 255, 0.12);
    box-shadow: inset 0 0 0 2px #9bf1ff;
    color: #9bf1ff;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

    input[type="submit"].next:hover, input[type="reset"].next:hover, input[type="button"].next:hover, button.next:hover, .button.next:hover,
    input[type="submit"].next:active, input[type="reset"].next:active, input[type="button"].next:active, button.next:active, .button.next:active {
        background-color: #9bf1ff;
        box-shadow: inset 0 0 0 2px #9bf1ff, 0 12px 30px rgba(155, 241, 255, 0.28);
        /* !important — тема красит текст всех ссылок при наведении в голубой с !important (a:hover в main.css) */
        color: #242943 !important;
    }

    .button.next:before { opacity: 0; }

    .button.next:after { opacity: 1; }

    .button.next:hover:after, .button.next:active:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='24px' viewBox='0 0 36 24'%3E%3Cstyle%3Eline %7B stroke: %23242943%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E");
    }

/* Белые кнопки «Далее» и т. п. — при наведении голубые с тенью */
input[type="submit"].special:hover, input[type="button"].special:hover, button.special:hover, .button.special:hover {
    background-color: #9bf1ff;
    box-shadow: 0 12px 30px rgba(155, 241, 255, 0.28);
    color: #242943 !important;
}

/* Кнопка оплаты UnitPay — заметная, как главная */
form[action*="unitpay"] .button {
    background-color: #9bf1ff;
    box-shadow: 0 12px 30px rgba(155, 241, 255, 0.22);
    color: #242943;
}

    form[action*="unitpay"] .button:hover {
        background-color: #ffffff;
        box-shadow: 0 14px 34px rgba(155, 241, 255, 0.35);
        color: #242943;
    }

input[type="submit"]:focus-visible, button:focus-visible, .button:focus-visible, a:focus-visible {
    outline: 2px solid #9bf1ff;
    outline-offset: 4px;
}

/* Поля ввода */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea {
    background: rgba(212, 212, 255, 0.06);
    border-radius: 12px;
    transition: box-shadow 0.2s, background-color 0.2s;
}

    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
        background: rgba(212, 212, 255, 0.09);
        box-shadow: 0 0 0 2px #9bf1ff, 0 0 0 6px rgba(155, 241, 255, 0.15);
    }

/* Флажки и переключатели: квадрат флажка со скруглением */
input[type="checkbox"] + label:before { border-radius: 6px; }

input[type="checkbox"] + label:before, input[type="radio"] + label:before { background: rgba(212, 212, 255, 0.08); }

/* Разделитель */
hr {
    border: 0;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(155, 241, 255, 0.45), rgba(212, 212, 255, 0.08));
    height: 2px;
}

/* Таблицы (личный кабинет) — карточка со скруглением */
table {
    border: 1px solid rgba(212, 212, 255, 0.1);
    border-collapse: separate;
    border-radius: 16px;
    border-spacing: 0;
    overflow: hidden;
}

    table th { padding: 1em 0.75em; }

    table thead { background: rgba(212, 212, 255, 0.06); }

    table tbody td { border-top: 1px solid rgba(212, 212, 255, 0.08); }

.box { border-radius: 16px; }

/* Окно «Файл загружается…» */
.modal-content {
    border-radius: 20px !important;
    overflow: hidden;
}

/* Плитки — карточки с зазорами, скруглением и тенью; цвет плитки полупрозрачный, текст на тёмном низе */
.tiles {
    gap: 1.25em;
    padding: 1.25em;
}

    .tiles article {
        border-radius: 20px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
        transition: transform 0.4s, box-shadow 0.4s;
        width: calc(40% - 0.625em);
    }

        .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) { width: calc(60% - 0.625em); }

        .tiles article:before { opacity: 0.6; }

        .tiles article:after { background: linear-gradient(to top, rgba(36, 41, 67, 0.85) 0%, rgba(36, 41, 67, 0.15) 70%); }

        .tiles article:hover {
            box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35);
            transform: translateY(-6px);
        }

            .tiles article:hover:before { opacity: 0.25; }

        .tiles article header.major > :first-child:after { width: 3em; }

header.major > p.info-main-page {
    font-weight: 400;
    opacity: 0.9;
}

/* Цены услуг (/gpt, /tech) — мягкие карточки вместо подчёркнутого текста */
.price-size {
    background: rgba(212, 212, 255, 0.06);
    border-left: 4px solid #9bf1ff;
    border-radius: 14px;
    display: inline-block;
    font-size: 1.5em;
    padding: 0.6em 1.1em;
    text-decoration: none;
}

/* Выбор способа (/methods): списки разной длины, а цена, кнопка и «Подробнее» в обеих колонках — на одном уровне */
.methods-row { display: flex; flex-wrap: wrap; }

    .methods-row > div {
        display: flex;
        flex-direction: column;
    }

        .methods-row > div > ul { flex: 1; }

    /* Строка с ценой способа — крупнее */
    .methods-row .method-price {
        font-size: 1.5em;
        font-weight: 600;
    }

@media screen and (max-width: 980px) {

    /* Колонки друг под другом — отступ между ними */
    .methods-row > div + div { margin-top: 2.5em; }
}

/* Подпись в скобках под заголовком поля (параметры шрифта, куда придёт письмо): прижата к своему заголовку,
   от следующего блока — больший отступ, чтобы было видно, к чему она относится */
p.field-hint {
    color: rgba(244, 244, 255, 0.65);
    font-size: 0.9em;
    margin-bottom: 2.2em;
    margin-top: -0.8em;
}

/* Личный кабинет: заголовки и содержимое столбцов по центру по горизонтали и вертикали */
.np-table th,
.np-table td {
    text-align: center;
    vertical-align: middle;
}

    .np-table td ul.actions { justify-content: center; }

/* Личный кабинет: кнопки в «Действиях» («оплатить», «скачать», «изменить %», «рерайт с ИИ») — одного размера */
.np-table td .button {
    padding: 0 1em;
    text-align: center;
    width: 13em;
}

.np-table td ul.actions.vertical { margin: 0; }

    .np-table td ul.actions.vertical li { padding: 0 0 0.6em 0; }

/* Личный кабинет: подпись под способом (услуга рерайта или процент оригинальности) */
.method-detail {
    color: rgba(244, 244, 255, 0.65);
    font-size: 0.85em;
}

/* Постраничная навигация (личный кабинет) */
ul.pagination li > .page { border-radius: 10px; }

/* Отзывы — белый блок комментариев со скруглением и тенью */
div:has(> .wcomments_posts_inner) {
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* vkcomments.css красит все ссылки страницы отзывов в синий ВКонтакте: пункт «Меню» и ссылки в тексте — цвета темы */
#header nav a,
#menu a:not(.button) { color: #ffffff; }

/* Текстовые ссылки страниц — голубые с пунктиром; кнопки, плитки, картинки, страницы списка и заголовки блога — без изменений */
#main a:not(.button, .link, .image, .page, .icon) { color: #9bf1ff; }

#main .blog-list h4 a { color: inherit; }

/* Текст подвала: у темы почти прозрачный (0.2) и не читается — как основной текст сайта, ссылки белые */
#footer .copyright { color: rgba(244, 244, 255, 0.75); }

    #footer .copyright a {
        border-bottom-color: rgba(255, 255, 255, 0.35);
        color: #ffffff;
    }

    #footer .copyright li {
        border-left-color: rgba(212, 212, 255, 0.25);
        color: rgba(244, 244, 255, 0.75);
    }

#footer .icons a { transition: opacity 0.3s; }

    #footer .icons a:hover { opacity: 0.75; }

@media screen and (max-width: 980px) {

    .tiles article,
    .tiles article:nth-child(4n - 1),
    .tiles article:nth-child(4n - 2) { width: calc(50% - 0.625em) !important; }
}

@media screen and (max-width: 736px) {

    .tiles {
        gap: 1em;
        padding: 1em;
    }

        .tiles article,
        .tiles article:nth-child(4n - 1),
        .tiles article:nth-child(4n - 2) { width: calc(50% - 0.5em) !important; }

        /* Узкие колонки: высота по тексту, чтобы описание не обрезалось */
        .tiles article {
            height: auto;
            min-height: 16em;
            padding-bottom: 2em;
            padding-top: 2.5em;
        }

    #banner .bloc-logo { min-width: 0; }

    /* Подвал на телефоне — колонки друг под другом */
    #footer .footer-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.5em;
    }

    /* Широкая таблица не обрезается скруглением, а прокручивается внутри карточки */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 480px) {

    .tiles article,
    .tiles article:nth-child(4n - 1),
    .tiles article:nth-child(4n - 2) {
        margin-bottom: 1em;
        width: 100% !important;
    }
}

/* Статьи блога: в баннере длинное название статьи — на телефоне мельче */
@media screen and (max-width: 736px) {
    .ctrl-blog #banner h1 { font-size: 1.5em; }
}

/* Сетка темы: .row с margin-bottom -1px при масштабе экрана 125–150% не перекрывает дробную высоту колонок,
   и следующий блок (кнопка «Далее» под линией) обтекает колонку справа. Блок после строки всегда начинается с новой строки. */
.row + * {
    clear: both;
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation: none !important;
        transition: none !important;
    }
}