/* ==============================================
   ФОРМА АКЦИИ (promotions)
   Единый файл для всех мест использования компонента:
   - хаб и детальная (низ страницы) — базовые правила
   - страница заявки /about/pc/promotions/order/ — модификатор
     .promo-detail__form--order (добавляется в template.php через
     $isPromotionPage), переопределяет размеры/раскладку/брейкпоинты
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;500;600&family=Roboto:wght@400;700&display=swap');


body:has(.promo-detail__form--order) .sidebar_subscription,
body:has(.promo-detail__form--order) .sidebar_social_network {
    display: none;
}

.promo-form__input {
    font-family: 'PT Sans', sans-serif;
}

.promo-form__agree label {
    font-family: 'PT Sans', sans-serif;
}

.promo-form__submit {
    font-family: var(--font-roboto), 'Roboto', sans-serif;
}

.promo-detail__form-title,
.promo-detail__form-subtitle {
    font-family: var(--font-roboto), 'Roboto', sans-serif;
}

/* =============================================
   БЛОК ФОРМЫ — обёртка (БАЗА: хаб/детальная)
   ============================================= */

.promo-detail__form {
    background: #F5F6FA url('images/logo_is.png') no-repeat;
    background-position-x: 112px;
    background-position-y: bottom;
    border-radius: var(--border-radius, 8px);
    padding: 52px 112px;
    margin: 104px 0;
    position: relative;
    overflow: hidden;
}

.promo-detail__form-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.promo-detail__form-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 560px;
    min-width: 0;
}

.promo-detail__form-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--near-black, #1a1a1a);
    margin: 0;
}

.promo-detail__form-subtitle {
    font-size: 16px;
    color: var(--near-black, #1E1E1E);
    margin: 0;
    line-height: 1.5;
    max-width: 240px;
}

.promo-detail__form-right {
    width: 424px;
    flex-shrink: 0;
}

/* =============================================
   ПОЛЯ ФОРМЫ (общие для всех мест использования)
   ============================================= */

.promo-form label {
    font-weight: normal !important;
}

.promo-form__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
}

.promo-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.promo-form__field--name     { order: 1; grid-column: 1 / -1; }
.promo-form__field--position{ order: 2; grid-column: 1; }
.promo-form__field--company_name  { order: 3; grid-column: 2; }
.promo-form__field--phone    { order: 4; grid-column: 1; }
.promo-form__field--email    { order: 5; grid-column: 2; }
.promo-form__field--message,
.promo-form__field--MESSAGE  { order: 6; grid-column: 1 / -1; }

.promo-form__input {
    width: 100%;
    padding: 16px 28px !important;
    border: none !important;
    border-radius: var(--border-radius, 8px) !important;
    font-size: 16px;
    font-family: inherit;
    color: #1E1E1E !important;
    background: #fff;
    box-sizing: border-box;
    outline: none;
}

.promo-form__input::placeholder {
    color: #ADADAD;
    font-size: 16px;
}

.promo-form__error {
    font-size: 12px;
    color: red;
    min-height: 14px;
    display: block;
    line-height: 1;
}
.promo-form__error:empty {
    min-height: 0;
}


.promo-form__field label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.promo-form__form textarea.promo-form__input {
    min-height: 100px;
    resize: vertical;
}

.promo-form__form .text-lighten {
    display: none;
}

.promo-form__form input[type="hidden"] {
    display: none;
}

/* =============================================
   ЧЕКБОКСЫ
   ============================================= */
.promo-form__agree {
    order: 7;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.promo-form__agree-item {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
}

.promo-form__checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.promo-form__agree-item label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    color: #1E1E1E;
    user-select: none;
}

.promo-form__agree-item label::before {
    content: '' !important;
    position: absolute !important;
    left: -32px !important;
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 2px solid var(--grey-hover, #ECECF4) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}

.promo-form__agree-item label::after {
    content: '' !important;
    position: absolute !important;
    left: -25px !important;
    top: 3px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.promo-form__checkbox:checked + label::before {
    background-color: var(--yellow-corp, #F7D80A) !important;
    border-color: var(--yellow-corp, #F7D80A) !important;
}

.promo-form__checkbox:checked + label::after {
    opacity: 1;
}

.promo-form__checkbox:focus + label::before {
    box-shadow: 0 0 0 2px rgba(247, 216, 10, 0.4);
}

.promo-form__agree-item a {
    color: #197dd1;
    text-decoration: none;
    border-bottom: 1px solid #bad8f1;
}

/* =============================================
   КАПЧА И КНОПКА
   ============================================= */

.promo-form__form .smart-captcha,
.promo-form__form .smart-captcha-wrap,
.promo-form__form [id^="captcha"],
.promo-form__form [class*="captcha"] {
    order: 8;
    grid-column: 1 / -1;
}

.promo-form__submit {
    appearance: none;
    -webkit-appearance: none;
    order: 9;
    grid-column: 1 / -1;
    width: 100%;
    padding: 16px;
    background: var(--yellow-corp, #F7D80A);
    color: var(--near-black, #1a1a1a);
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: var(--border-radius, 8px);
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: inherit;
    margin-top: 4px;
}

.promo-form__submit:hover {
    background: var(--yellow-hover, #F7C00A);
}

.promo-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =============================================
   УВЕДОМЛЕНИЯ (успех / ошибка)
   ============================================= */

.promo-form__notification {
    padding: 132px 28px;
    background: #fff;
    border-radius: var(--border-radius, 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    text-align: center;
    width: 100%;
}

.promo-form__notification-pic {
    width: 76px;
    height: 80px;
    flex-shrink: 0;
}

.promo-form__notification-pic svg {
    width: 100%;
    height: 100%;
    display: block;
}

.promo-form__notification-text {
    color: var(--blue-corp, #197DD1);
    line-height: 24px;
    font-size: 16px;
}

.promo-form__notification--error {
    background: #F2CECE;
    padding: 74px 28px;
}

.promo-form__notification-btn {
    width: 100%;
    padding: 23px 20px;
    background: #fff;
    color: var(--near-black, #1a1a1a);
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: var(--border-radius, 8px);
    cursor: pointer;
    font-family: var(--font-roboto), 'Roboto', sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
}

.promo-form__notification-btn:hover {
    background: var(--blue-corp, #197DD1);
    color: #fff;
}

/* =============================================
   АДАПТИВ — БАЗА (хаб/детальная)
   ============================================= */
@media (max-width: 1350px) {
    .promo-detail__form-inner {
        gap: 56px;
    }
    .promo-detail__form {
        padding: 52px 28px;
        background-position-x: 28px;
    }
}

@media (max-width: 880px) {
    .promo-detail__form {
        padding: 40px 28px;
        background-image: none;
    }

    .promo-detail__form-inner {
        flex-direction: column;
        gap: 32px;
    }

    .promo-detail__form-left,
    .promo-detail__form-right {
        width: 100%;
        max-width: 100%;
    }

    .promo-detail__form-subtitle {
        max-width: 100%;
    }

    .promo-detail__form-title {
        font-size: 28px;
    }

    .promo-form__notification {
        width: 100%;
    }

    .promo-form__form {
        grid-template-columns: 1fr;
    }

    .promo-form__field--name,
    .promo-form__field--position,
    .promo-form__field--company_name,
    .promo-form__field--phone,
    .promo-form__field--email,
    .promo-form__field--message,
    .promo-form__field--MESSAGE {
        grid-column: 1;
    }
}

@media (max-width: 500px) {
    .promo-detail__form {
        padding: 52px 16px;
        margin: 104px 0;
    }

    .promo-detail__form-title {
        font-size: 28px;
    }

    .promo-form__submit {
        appearance: none;
        -webkit-appearance: none;
        padding: 16px;
    }
}

/* =============================================
   МОДИФИКАТОР .promo-detail__form--order
   Страница /about/pc/promotions/order/ — переопределяет размеры,
   раскладку и брейкпоинты базы выше. Порядок в файле важен
   ============================================= */

.promo-detail__form--order {
    max-width: 1042px;
    min-height: 552px;
    padding: 52px 52px 52px;
    margin: 32px 0 104px;

    background: #F5F6FA url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22330%22%20height%3D%22335%22%20viewBox%3D%220%200%20330%20335%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M25.9826%2021.2625H48.8166V59.2417H128.941V21.2625V6.48696V6.31901L128.951%206.15084L128.96%205.9829L128.969%205.82429L128.988%205.65635L129.007%205.48818L129.035%205.32957L129.063%205.17097L129.1%205.02148L129.137%204.86288L129.175%204.70428H129.184L129.231%204.55479L129.278%204.40554L129.324%204.25628L129.38%204.10679L129.446%203.95753L129.511%203.81739L129.577%203.67747L129.651%203.53755L129.726%203.39741L129.801%203.26684L129.885%203.12669L129.969%202.99612L130.053%202.86555L130.137%202.73475L130.231%202.60417L130.324%202.48271L130.417%202.36148L130.52%202.24003L130.623%202.1188L130.726%202.00668L130.838%201.89479L130.95%201.78268L131.062%201.67079L131.174%201.56802L131.296%201.46547L131.417%201.37204L131.539%201.27861L131.66%201.18541L131.791%201.09198L131.921%201.00813L132.052%200.924039L132.183%200.839953L132.314%200.765437L132.445%200.690693L132.585%200.625293L132.725%200.559892L132.865%200.49472L133.015%200.438662L133.164%200.382605L133.314%200.33589L133.463%200.289403L133.613%200.242688L133.762%200.205317L133.921%200.167945L134.08%200.139916L134.229%200.102544L134.388%200.0747435L134.547%200.0467147L134.706%200.0280288L134.874%200.0186859L135.042%200.00934293L135.201%200H135.369C138.901%200%20141.797%202.93081%20141.797%206.52433V21.2998C197.546%2021.2998%20253.295%2021.3092%20309.044%2021.3092V59.2697H213.42C176.029%2059.2697%20145.721%2097.8276%20145.721%20127.995C145.721%20158.152%20156.26%20170.239%20172.563%20182.793L208.589%20207.052C221.697%20214.977%20220.165%20233.205%20201.881%20233.205H128.951V71.3009H48.8259V233.178H34.1857C30.6261%20233.178%2027.7205%20236.127%2027.7205%20239.739C27.7205%20239.954%2027.7296%20240.169%2027.7483%20240.374C27.7296%20240.281%2027.7205%20240.178%2027.7018%20240.084V294.958C27.3935%20298.337%2030.8504%20301.744%2034.2605%20301.744H128.941V301.333H233.236C270.14%20301.333%20300.056%20271.381%20300.056%20233.915C300.056%20207.547%20288.966%20194.349%20271.701%20177.688C263.32%20169.595%20254.332%20162.866%20243.859%20153.971C232.161%20144.03%20232.283%20127.817%20250.567%20127.817H309.044H323.6H323.768L323.927%20127.827L324.086%20127.836L324.245%20127.845L324.404%20127.864L324.563%20127.883L324.721%20127.911L324.871%20127.939L325.02%20127.976L325.17%20128.013L325.319%20128.051L325.469%20128.097L325.618%20128.144L325.768%20128.2L325.908%20128.256L326.057%20128.321L326.198%20128.387L326.338%20128.452L326.478%20128.527L326.618%20128.601L326.749%20128.676L326.88%20128.76L327.01%20128.844L327.141%20128.937L327.263%20129.021L327.384%20129.115L327.506%20129.208L327.627%20129.311L327.739%20129.413L327.851%20129.516L327.963%20129.628L328.076%20129.74L328.188%20129.852L328.29%20129.964L328.393%20130.085L328.496%20130.207L328.589%20130.328L328.683%20130.449L328.776%20130.58L328.87%20130.711L328.954%20130.841L329.038%20130.972L329.122%20131.103L329.197%20131.243L329.271%20131.383L329.346%20131.523L329.411%20131.663L329.477%20131.803L329.542%20131.952L329.598%20132.102L329.654%20132.251L329.701%20132.4L329.748%20132.55L329.785%20132.708L329.823%20132.867L329.86%20133.026L329.888%20133.184L329.916%20133.343L329.944%20133.511L329.963%20133.679L329.982%20133.847L329.991%20134.015L330%20134.183V134.351C330%20137.944%20327.104%20140.875%20323.572%20140.875H309.016V308.66C309.016%20323.146%20297.337%20335%20283.061%20335H0V47.6585C0%2033.1631%2011.6786%2021.3092%2025.9546%2021.3092L25.9826%2021.2625ZM28.2903%20242.409C28.4211%20242.698%2028.5706%20242.978%2028.7387%20243.249C28.5706%20242.987%2028.4211%20242.707%2028.2903%20242.409ZM28.8229%20243.379C28.963%20243.594%2029.1312%20243.809%2029.29%20244.005C29.1219%20243.809%2028.963%20243.594%2028.8229%20243.379Z%22%20fill%3D%22white%22/%3E%3C/svg%3E') no-repeat;
    background-position: left 52px bottom 65px;
    background-size: 330px 335px;
}

.promo-detail__form--order .promo-detail__form-inner {
    display: grid;
    grid-template-columns: 1fr 424px;
    gap: 90px;
}

.promo-detail__form--order .promo-detail__form-left {
    max-width: none;
}

.promo-detail__form--order .promo-detail__form-title {
    width: 100%;
    max-width: none !important;
}

.promo-detail__form--order .promo-detail__form-subtitle {
    max-width: 240px;
}

/* --- 1350 --- */
@media (max-width: 1350px) {
    .promo-detail__form--order .promo-detail__form-inner {
        gap: 56px;
    }
    .promo-detail__form--order {
        padding: 32px 28px 52px;
        background-position: left 28px bottom 57px;
    }
}

/* --- 992-1349: сайдбар прячем, форма во всю ширину --- */
@media (min-width: 992px) and (max-width: 1349px) {
    aside.mb-sm-n0.order-first {
        display: none;
    }

    body:has(.promo-detail__form--order) #main-content-block {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 38px;
        padding-right: 38px;
    }

    .promo-detail__form--order {
        padding: 28px 24px 40px;
        background-position: left 28px bottom 52px;
    }

    .promo-detail__form--order .promo-detail__form-inner {
        gap: 24px;
    }
}

/* --- ≤991: заголовок и форма в один столбец --- */
@media (max-width: 991px) {
    aside.mb-sm-n0.order-first {
        display: none;
    }
    .promo-form__form {
        display: flex !important;
        flex-wrap: wrap;
    }

    .promo-form__field {
        max-width: 49%;
        width: 100%;
    }

    .promo-form__field--name {
        width: 100%;
        max-width: 100% !important;
    }

    .promo-detail__form--order {
        padding: 24px 20px 32px;
        min-height: 0;
        background-image: none;
    }

    .promo-detail__form--order .promo-detail__form-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .promo-detail__form--order .promo-detail__form-left,
    .promo-detail__form--order .promo-detail__form-right {
        width: 100%;
        max-width: 100%;
    }

    .promo-detail__form--order .promo-detail__form-subtitle {
        max-width: 100%;
    }

    .promo-detail__form--order .promo-detail__form-title {
        font-size: 24px;
    }

    
    .promo-detail__form--order .promo-form__form {
        grid-template-columns: 1fr 1fr;
    }

    .promo-detail__form--order .promo-form__field--position,
    .promo-detail__form--order .promo-form__field--phone {
        grid-column: 1;
    }

    .promo-detail__form--order .promo-form__field--company_name,
    .promo-detail__form--order .promo-form__field--email {
        grid-column: 2;
    }

    .promo-detail__form--order .promo-form__field--name,
    .promo-detail__form--order .promo-form__field--message,
    .promo-detail__form--order .promo-form__field--MESSAGE {
        grid-column: 1 / -1;
    }
}
@media(max-width: 730px) {
    .promo-form__form {
        justify-content: space-between;
    }
    .promo-form__field {
        max-width: 48%;
        width: 100%;
    }
}
@media(max-width: 400px) {
    .promo-form__field {
        max-width: 100%;
    }
}
/* --- ≤320 --- */
@media (max-width: 320px) {
    aside.mb-sm-n0.order-first {
        display: none;
    }

    .promo-detail__form--order {
        padding: 20px 16px 24px;
    }

    .promo-detail__form--order .promo-detail__form-inner {
        gap: 20px;
    }

    .promo-detail__form--order .promo-form__form {
        gap: 8px;
    }

    .promo-detail__form--order .promo-form__input {
        padding: 14px 16px !important;
        font-size: 14px;
    }

    .promo-detail__form--order .promo-form__input::placeholder {
        font-size: 14px;
    }
}