/* ==========================================================================
   Карточка-заявка в боковой колонке — белая плашка с тенью и формой внутри.
   В макете таких две:
     «Помочь с подбором?»    — подраздел каталога (224:2137)
     «Получить предложение»  — карточка товара, модификатор --product
                               (135:1168; форма там показана сразу)
   WP: template-parts/blocks/side-cta.php
   ========================================================================== */

.side-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 12px 40px rgba(25, 25, 25, 0.12);
}

.side-cta__pattern {
    position: absolute;
    top: -61px;
    right: -37.81px;
    width: 122.81px;
    height: 199.383px;
    max-width: none;
    pointer-events: none;
}

.side-cta__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-cta__title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.side-cta__desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

.side-cta__btn {
    position: relative;
}

/* Форма раскрывается на месте кнопки — в макете это скрытый слой
   той же карточки (230:2523) */
.side-cta__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.side-cta__form[hidden],
.side-cta__btn[hidden] {
    display: none;
}

.side-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* --------------------------------------------------------------------------
   Вариант карточки товара: заголовок крупнее, узора нет,
   форма показана сразу
   -------------------------------------------------------------------------- */

.side-cta--product .side-cta__text {
    gap: 4px;
}

.side-cta--product .side-cta__title {
    font-size: 24px;
}

.side-cta--product .side-cta__desc {
    max-width: 258px;
}

/* --------------------------------------------------------------------------
   Серая плашка с примечанием под карточкой
   Figma: 135:916 — «Поставка для предприятий и подрядчиков»
   -------------------------------------------------------------------------- */

.side-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: var(--c-grey-200);
}

.side-note__title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.side-note__text {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}