/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/

.status-icon.instock {
    padding: 5px 10px;
    background: #69be15;
    color: #fff;
}

.status-icon.instock:before {
    display: none;
}

.content-block {
    margin: 80px 0;
}

.margin-bottom-none {
    margin-bottom: 0;
}

.qualification-block {
    width: 100%;
    background-color: #ffffff;
    padding: 0 32px;
}

/* Заголовок блока (точно по макету) */
.block-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0a1e3c;
    margin-bottom: 48px;
}

/* Сетка карточек */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* Карточка */
.card-item {
    background-color: #d6cfcf1f;
    border-radius: 28px;
    padding: 32px 24px 36px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #d6cfcf1f;
    box-shadow: 0 8px 18px -6px rgba(0, 20, 40, 0.06);
    display: flex;
    flex-direction: column;
}

.card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 36px -12px rgba(0, 35, 70, 0.15);
    /*border-color: #d0ddee;*/
}

/* Верхний акцент (тонкая линия/полоска) */
.card-accent {
    /*width: 40px;*/
    /*height: 4px;*/
    /*background-color: #3665ff;*/
    border-radius: 4px;
    margin-bottom: 24px;
}

/* Категория (мелкий текст над заголовком) — если нужен, но на картинке его нет */
/* Заголовок карточки */
.card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #0a1e3c;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

/* Описание */
.card-description {
    font-size: 16px;
    line-height: 1.5;
    color: #42526b;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Иконка-декорация (стрелка) – добавляет лёгкий намёк на действие */
.card-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
}

.arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #edf2fa;
    border-radius: 50%;
    color: #3665ff;
    font-size: 20px;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.2s;
}

.card-item:hover .arrow-icon {
    background-color: #3665ff;
    color: white;
    transform: translateX(4px);
}

/* Адаптивность */
@media screen and (max-width: 1024px) {
    .qualification-block {
        padding: 48px 32px;
    }

    .block-title {
        font-size: 36px;
        max-width: 600px;
    }

    .cards-grid {
        gap: 20px;
    }

    .card-title {
        font-size: 20px;
    }
}

@media screen and (max-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .block-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 600px) {
    .qualification-block {
        padding: 36px 20px;
        border-radius: 32px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .block-title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .card-item {
        padding: 28px 20px 32px 20px;
    }
}

/* Эмуляция отсутствия картинки, только текст — чисто как на скриншоте */
/* но можно добавить bullet-стили, если нужно было точное попадание */
.card-item:nth-child(1) .card-description::before {
    content: none; /* без маркеров */
}


/******* слева текст, справа фото ***********/

/* Контейнер-сетка: две равные половины */
.split-panel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background: transparent;
    padding: 32px;
}

.panel-half {
    flex: 1 1 300px;
    min-width: 280px;
}

/* --- Левая половина (текст) --- */
.left-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-right: 0.5rem;
}

.main-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0b1f33;
    margin-bottom: 0.25rem;
}

.description {
    font-size: 1rem;
    color: #2b3b4e;
    line-height: 1.5;
    max-width: 90%;
}

.description strong {
    color: #0a2942;
    font-weight: 700;
    background: #e0e8f2;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
}

/* Цитата: только синяя полоса слева, без фона и скруглений */
.quote-strict {
    border-left: 6px solid #1d4ed8; /* ярко-синяя полоса */
    padding: 0.2rem 0 0.2rem 1.2rem;
    margin: 0.5rem 0 0.2rem 0;
    font-style: italic;
    color: #1e2f41;
    font-weight: 450;
    background: transparent; /* полностью прозрачно */
    border-radius: 0; /* убрано скругление */
    font-size: 1rem;
    width: 100%;
}

.quote-strict p {
    margin: 0;
}

.features-headline {
    font-size: 1.6rem;
    font-weight: 650;
    color: #0a2942;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

ul.feature-list li:before {
    display: none;
}

/* Список: синие кружки вместо галочек */
.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.2rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.05rem;
    color: #1e2b3c;
}

.circle-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1d4ed8; /* синий круг */
    color: white;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(29, 78, 216, 0.3);
}

/* Плашка гарантии (оставлена для полноты) */
.guarantee-badge {
    margin-top: 1.2rem;
    background: #dae5ff;
    padding: 0.9rem 1.2rem;
    border-radius: 3rem;
    font-weight: 700;
    color: #012653;
    border: 1px solid #9fb8f0;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

/* --- Правая половина (карточка с фото) --- */
.right-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cert-card {
    background: white;
    width: 100%;
    border-radius: 2rem;
    padding: 1.8rem 1.8rem 2rem 1.8rem;
    box-shadow: 0 0 20px -20px #102a44, 0 8px 18px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
    border: 1px solid #dde7f0;
}

/* Заголовок карточки на всю длину, без подчеркивания и лишнего текста */
.card-title-simple {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f2d48;
    width: 100%;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Фотография (макет документа) — без скруглений, без фона, без оберток */
.document-photo-plain {
    width: 100%;
    background-color: #ffffff; /* просто белый фон, без скругления блока */
    border: none; /* никаких границ */
    padding: 0; /* убран внутренний отступ */
    margin-bottom: 0;
    box-shadow: none;
}

/* содержимое фото стилизовано строго под скриншот, но без внешних украшений */
.doc-visual {
    background: #fafcff; /* легчайший оттенок, чтобы было похоже на фотографию документа */
    padding: 1.5rem 1.2rem 1.2rem 1.2rem;
    width: 100%;
}

.doc-visual img {
    width: 100%;
}

.doc-row {
    display: flex;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    align-items: baseline;
}

.doc-label {
    width: 38%;
    color: #2b405a;
    font-weight: 500;
    font-size: 0.82rem;
}

.doc-value {
    width: 62%;
    font-weight: 600;
    color: #0b263f;
}

.doc-divider {
    height: 1px;
    background: #bacfe8;
    margin: 1rem 0 1rem 0;
}

.signature-simple {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    border-top: 1px dashed #8fa6c2;
    padding-top: 0.8rem;
    font-size: 0.9rem;
}

/* Адаптивность */
@media screen and (max-width: 800px) {
    .split-panel {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0;
    }

    .left-content {
        padding-right: 0;
    }

    .description {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .main-title {
        font-size: 2rem;
    }

    .card-title-simple {
        font-size: 1.5rem;
    }

    .cert-card {
        padding: 1.2rem;
    }
}

/******* /слева текст, справа фото ***********/

/******* видео отзывы ************/
/* контейнер точно повторяет расположение: 5 вертикальных фото */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    /*max-width: 1200px;*/
    padding: 40px 20px;
}

/* карточка = вертикальное фото + оверлей с иконкой видео.
   вся карточка кликабельна — cursor: pointer, и обработчик на родителе */
.card {
    flex: 0 0 auto; /* не растягивается, фиксированная ширина */
    width: 210px; /* классическая вертикальная ориентация */
    /*background-color: #2a2f3f;*/
    border-radius: 20px;
    overflow: hidden;
    /*box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6);*/
    transition: transform 0.25s ease, box-shadow 0.3s ease;
    cursor: pointer; /* курсор указывает на клик */
    text-decoration: none; /* если обернуть в ссылку — убираем подчеркивание */
    display: block; /* чтобы ссылка вела себя как блок */
    border: none;
    position: relative;
    aspect-ratio: 2 / 3; /* вертикальные пропорции, как на картинке */
    margin: 0 auto;
}

/* эффект при наведении для тактильного отклика */
.card:hover {
    /*transform: scale(1.02);*/
    /*box-shadow: 0 25px 35px -8px #0b0e14;*/
}

.card:active {
    /*transform: scale(0.99);*/
    /*transition: 0.05s;*/
}

/* изображение занимает всю карточку, фон на случай если картинка не прогрузится */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* заполняет прямоугольник, сохраняя пропорции */
    display: block;
    background: #3d4459; /* подложка под фото */
}

/* центральный значок видео (абсолютный, поверх картинки) */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* клик проходит сквозь иконку к карточке */
    transition: background 0.2s;
}

/* белая иконка play — треугольник */
.play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px; /* равнобедренный треугольник вправо */
    border-color: transparent transparent transparent #1e1e2f;
    margin-left: 4px; /* небольшая поправка для визуального центрирования */
}

/* лёгкое изменение иконки при наведении на карточку */
.card:hover .play-icon {
    background-color: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

/* декоративный текст НЦПО на фото (повторён 4 раза согласно картинке)
   используем абсолютный псевдоэлемент на каждом блоке */
.card::before {
    content: "НЦПО";
    position: absolute;
    bottom: 16px;
    left: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    padding: 6px 14px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 40px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none; /* клик сквозь надпись на карточку */
}

/* добавляем маленькую чёрную плашку "НЦПО" внизу слева,
   именно так выглядит на изображении — 5 блоков, на каждом НЦПО */
/* теперь дополнительный нижний штамп, имитирующий тот, что на картинке (полупрозрачный)
   псевдоэлемент уже используется для 'НЦПО', но мы можем стилизовать его как требуется */
/* Всё готово — псевдоэлемент .card::before выводит НЦПО на каждой карточке */

/* специально для второй, третьей, четвёртой, пятой карточки тоже будет текст,
   так как селектор применяется ко всем .card */

/* если нужно разместить точно как на исходном скриншоте (надпись именно в левом нижнем углу) —
   current стили это делают */

/* адаптивность — на узких экранах карточки не сжимаются слишком сильно,
   но остаются вертикальными */
@media (max-width: 600px) {
    .card {
        width: 160px;
    }

    .play-icon {
        width: 48px;
        height: 48px;
    }

    .play-icon::after {
        border-width: 10px 0 10px 16px;
    }
}

/* доступность: фокус для клавиатуры */
.card:focus-visible {
    outline: 3px solid #ffb347;
    outline-offset: 4px;
}

/* имитируем ссылку (хотя это может быть и кнопка, но для семантики используем <a> */
/* убираем стандартные стили ссылки */
a.card {
    color: inherit;
}

/******* /видео отзывы ************/

/******* лицензии и сертифкаты **********/
.picture__text_container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.picture__text_img {
    flex: 0 0 300px;
}

.picture__text_img img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #edf2f7;
}

.picture__text_text {
    flex: 1;
    min-width: 280px;
}

.picture__text_text h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;
    color: #1e2f3e;
}

.picture__text_text p {
    font-size: 16px;
    line-height: 1.6;
    color: #3a4e62;
    margin-bottom: 15px;
}

.picture__text_text ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.picture__text_text li {
    font-size: 15px;
    color: #2c3e50;
    margin-bottom: 8px;
}

blockquote {
    border-left: 4px solid #1e2f3e;
    background: #f1f6fb;
    padding: 15px 20px;
    font-size: 15px;
    margin: 20px 0;
    border-radius: 8px;
    color: #2f4052;
}

.btn-default {
    background: #1e2f3e;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 500;
    transition: background 0.2s;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}

.btn-default:hover {
    background: #2c4055;
    color: white;
    text-decoration: none;
}

/* Стили для четвертой вкладки (Документы) */
.documents-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 10px;
}

.document-card {
    flex: 1 1 180px;
    background: white;
    border-radius: 16px;
    padding: 20px 15px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    border: 1px solid #e9ecf0;
    transition: transform 0.2s;
}

.document-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.document-image {
    width: 120px;
    height: 140px;
    margin: 0 auto 15px;
    background: #f2f6fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7b8c9d;
    border: 1px dashed #b8c9dd;
    overflow: hidden;
}

.document-image img {
    max-width: 100%;
    max-height: 100%;
}

.document-card p {
    font-size: 14px;
    font-weight: 600;
    color: #1e2f3e;
    margin: 10px 0 0;
}

.document-badge {
    font-size: 12px;
    color: #6e8ca8;
    margin-top: 5px;
}

@media (max-width: 767px) {
    .picture__text_container {
        flex-direction: column;
    }

    .picture__text_img {
        flex: 0 0 auto;
        text-align: center;
    }
}

/******* /лицензии и сертифкаты **********/

/******* банки *************/
.banks-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 24px;
}

/* карточка без тени */
.bank-card {
    flex: 1 1 240px;
    max-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0; /* тонкая граница */
    border-radius: 18px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* выравнивание всего содержимого по левому краю */
    transition: background 0.1s ease;
}

/* иконка банка (логотип-заглушка) — остаётся по центру, но это отдельный блок */
.bank-icon {
    width: 64px;
    height: 64px;
    background-color: #eef2f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 22px;
    color: #2c3e50;
    border: 1px solid #dce3ec;
    align-self: center; /* иконка остаётся по центру, остальное — левый край */
}

/* заголовок (название отделения) — строго слева */
.bank-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0b1a33;
    margin-bottom: 8px; /* уменьшен отступ после заголовка */
    text-align: left;
    letter-spacing: -0.01em;
    width: 100%; /* занимает всю ширину */
}

/* блок с часами: иконка и текст */
.schedule-block {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* небольшой зазор между иконкой и текстом */
    width: 100%;
    margin-top: 2px; /* почти вплотную к заголовку */
    padding: 0; /* убрал лишние отступы */
    border-top: none; /* убираем пунктир, было лишнее */
}

/* серая иконка часов — меньшего размера (16px) */
.clock-icon {
    flex-shrink: 0;
    width: 16px; /* как просили — чуть меньше */
    height: 16px;
    margin-top: 3px; /* тонкая вертикальная настройка */
    opacity: 0.65;
    color: #8599b5; /* серый оттенок */
}

.clock-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* серый текст расписания */
.hours-text {
    font-size: 0.9rem;
    color: #6f7d95;
    line-height: 1.45;
    word-break: break-word;
    flex: 1;
}

.hours-text .compact-schedule {
    display: flex;
    flex-direction: column;
    margin-top: 2px; /* чуть сдвинуто, но без лишних отступов */
}

/* дополнительно строка адреса может быть чуть жирнее не надо */
.hours-text strong {
    font-weight: 600;
    color: #4f5f77;
}

/* адаптация */
@media (max-width: 640px) {
    .bank-card {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* убираем тени на карточках полностью */
.bank-card,
.bank-card:hover {
    box-shadow: none !important;
    border-color: #e0e7ef;
}

/******* /банки *************/

.installment-pay {
    background-color: #fafafa;
    padding: 5px 10px;
    font-size: 12px;
}

.form-block {
    background: #d6cfcf1f;
    padding: 40px 40px;
    border-radius: 30px;
}

.corporat-education .buttons,
.split-panel .left-content .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.corporat-education .buttons .btn,
.split-panel .left-content .buttons .btn {
    max-width: 250px;
}

.corporat-education .left-content {
    flex-shrink: 0;
    flex-grow: 3;
    flex-basis: 650px;
}

.corporat-education .right-content {
    align-items: baseline;
}

.tab-pane_description {
    margin: 20px 0;
}

.block-spaces {
    margin: 120px 0;
}

/************ Учитесь на удобной платформе НЦПО ***************/


/***************************/


.banners-big__title--large {
    font-size: 55px;
    line-height: 75px;
}

.header__main-item {
    margin: 0 12px;
}

.header-menu--centered .header-menu__wrapper {
    justify-content: left;
}

.staff-list .swiper-slide.swiper-slide--height-auto {
    width: 200px !important;
}


#bx_incl_area_22_1_17 .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.open-form .form.order.success {
    padding: 40px 0;
}

.open-form .text {
    padding: 0 0 20px;
}

.open-form .btn {
    width: 100%;
}

.banners-big__inner .main-user-consent-request-announce-link {
    font-size: 9px;
    line-height: 12px;
    display: block;
}

.banners-big__inner .font_13 {
    font-size: 10px;
    color: #000;
}

.banners-big__inner .open-form .text {
    padding: 0 0 10px;
}

.banners-big__title--large {
    font-size: 50px;
    line-height: 55px;
}


.catalog-detail__info-bc, .catalog-detail__garanty.block-with-icon, #bx_incl_area_22_1_5,
.properties__container .char-side__title, .faq-list .index-block__subtitle, .share.fill-theme-hover.hover-block, .sections-list__item-products-count {
    display: none;
}

.conten-block button {
    background-color: #fff !important;
    text-align: left !important;
    color: blue !important;
    border: 1px solid blue !important;
    width: 257px !important;
}

@media (max-width: 600px) {

    .maxwidth-theme {
        padding-left: 14px;
        padding-right: 14px;
    }

    h2 {
        font-size: 1.4em;
    }

    h3 {
        font-size: 1.3em;
    }

    .page-top.maxwidth-theme {
        padding: 5px 20px;
    }

    .card-title {
        font-size: 1.2em;
    }

    .catalog-detail .catalog-detail__main {
        padding-top: 0;
    }

    .block-spaces {
        margin: 20px 0;
    }

    .form-block {

        padding: 10px;
        border-radius: 10px;
    }

    .properties.js-offers-prop {
        display: none;
    }
}

.simple-form {
    display: flex;
}
.simple-form .btn-default {
    margin: 0;
}
.order .subscribe-edit__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}