a {
    text-decoration: none;
    color: inherit;
}

.promo-section{    /* меньше – не даст, больше – растянется */
    display: flex;                  /* Включаем Flexbox для центрирования контента */
    justify-content: center;        /* Горизонтальное центрирование */
    align-items: flex-start;        /* Вертикальное выравнивание вверху секции */
    padding: 0 15px;                /* Стандартные отступы слева и справа */
    position: relative;             /* Для позиционирования дочерних элементов */
    width: 100%;                    /* Полная ширина секции */
    box-sizing: border-box;         /* Включаем padding в общую ширину */
    background-color: #fff;         /* Белый фон, можно менять по дизайну */
    margin-bottom: 2%;
}


.container-popup-block {
    display:flex; /* колонкой: .top потом ↓ форма и т.д. */
    width:100%;
    position: relative;
    max-width:1200px;
    margin:0 auto;
    flex:1;
    gap: clamp(20px, 4vw, 50px);
}

.container-popup-block .left {
    position:relative;
    flex: 0 0 40%;          /* ← именно 40 % */
    display:flex;
    flex-direction:column;
}





.container-popup-block .right {
    flex: 1 1 60%;          /* 60 %, и растём если место есть */
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.container-popup-block .left img {
    flex: 0 1 auto;
    position: relative;
    z-index: 1;
    width:100%;
    max-width: 490px;
    height: auto;
    object-fit: contain;
}

.visual       { flex:0 0 30%;
    display:flex;
    align-items:center; }

.bonus-wrapper{
    flex:1 1 70%;
    position:relative;
    width: 100%;
}



.container-popup-block .features li,
.container-popup-block .features-title,
.container-popup-block .custom-checkbox__label {
    font-family: 'Inter', sans-serif;
    color:black

}





.container-popup-block .right .popup-title {
    font-family: 'Inter', sans-seаrif;
    font-size: clamp(24px, 4vw, 50px);
    margin-top:0;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: bold;
    color:black;

}
.container-popup-block .right .popup-subtitle{
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 18px;
    color:rgba(125, 124, 147, 1);
}


.container-popup-block .features-title{
    font-size: clamp(16px, 2vw, 20px);
    font-weight: bold;
    margin-bottom: 14px;
    font-weight: bold;

}

.container-popup-block .features {
    list-style: none;
    font-size:clamp(14px,2vw,20px);
    display: flex;
    flex-direction: column;
}




.container-popup-block .features li {
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: flex-start;
    gap: 15px; /* 👈 регулируй отступ здесь */
    margin-bottom: clamp(5px,1.5vw,10px); /* опционально: отступ между пунктами */
    line-height: 1.4;
    padding-top:8px;

}



.screen-reader-response{
    display:none;
}

.block-wpcf7-form form{
    display:grid;
    grid-template-columns:1fr 1fr;                 /* две равные колонки */
    grid-template-areas:
        "name   phone"
        "agree  button";
    gap:clamp(12px,3vw,24px);                      /* зазор между всеми ячейками */
    max-width:730px;
    width:100%;
    margin-top:20px;
    margin-left: 0;
}

/* 3. раскладываем элементы по ячейкам */
.block-wpcf7-form input[name="your-name"]{ grid-area:name }
.block-wpcf7-form input[name="tel-403"]   { grid-area:phone }
.block-wpcf7-form .wpcf7-checkbox         { grid-area:agree }
.block-wpcf7-form .wpcf7-submit           { grid-area:button }

/* 4. общие стили полей */
.block-wpcf7-form input[type="text"],
.block-wpcf7-form input[type="tel"],
.block-wpcf7-form .wpcf7-submit{
    height:50px;
    padding-inline:16px;
    font:16px 'Inter',sans-serif;
    border:1px solid #000;
    border-radius:10px;
    box-sizing:border-box;
    width:100%;                                   /* растягиваем по ячейке */
}

/* 5. кнопка */
.block-wpcf7-form .wpcf7-submit{
    background:#0f1021;
    color:#fff;
    border:none;
    cursor:pointer;
    transition:opacity .2s;
}
.block-wpcf7-form .wpcf7-submit:hover{opacity:.85}

/* 6. чек‑бокс и подпись в один «блок» */
.block-wpcf7-form .wpcf7-checkbox{
    display:flex;
    align-items:flex-start;
    gap:8px;                                      /* расстояние между квадратиком и текстом */
    font:14px/1.3 'Inter',sans-serif;
    color:#555;
    max-width:100%;
}

/* сам input‑checkbox растягиваем до видимого квадрата */
.block-wpcf7-form .wpcf7-checkbox input{
    appearance:none;            /* убираем нативный чек‑бокс */
    margin:0;
    width:22px;height:22px;
    border:2px solid #000;
    border-radius:6px;
    cursor:pointer;
    position:relative;
}
.block-wpcf7-form .wpcf7-checkbox input:checked{
    background:#000;
}
.block-wpcf7-form .wpcf7-checkbox input:checked::after{
    content:'';
    position:absolute;
    width : 8px;   /* длина «пера» галки */
    height: 14px;      /* маленькая “галочка” */
    border:solid #fff;
    border-width:0 3px 3px 0;
    transform:rotate(45deg);
}
.block-wpcf7-form .wpcf7-list-item{               /* <span class="wpcf7-list-item"> */
    display:flex;
    align-items:flex-start;                       /* верхние края по одной линии */
    gap:8px;                                      /* расстояние между квадратом и текстом */
}



.block-wpcf7-form .wpcf7-list-item > label{
    display:flex;
    align-items:center;   /* выравниваем по‑вертикали */
    gap:8px;              /* расстояние между квадратом и текстом */
}

.block-wpcf7-form .wpcf7-list-item-label{
    display:block;
    margin-left: 5px;
    line-height:1.3;
}


.block-wpcf7-form .wpcf7-list-item input[type="checkbox"]{
    position:static;      /* ← БОЛЕЕ нет absolute! */
    margin:0;             /* убираем дефолтные отступы                       */
    flex:0 0 22px;        /* жёсткая ширина / высота квадрата                */
    width:22px;
    height:22px;
    padding-left: 5px;
}



.block-wpcf7-form br{display:none!important;}



.svg-block{
    position: absolute;
    display: flex;
    width: 100%;
        bottom: 6%;
    left: -6%;
}

.svg-block svg {
    width: 80%;
    height: auto;
    transform: rotate(357deg);
}


.bonus-block {
    background-color:rgba(241, 243, 248, 1);
    padding: 10px;
    border-radius: 15px;
    flex-direction:column;
    align-items:flex-start;
    display: flex;
    width: 100%;
    max-width:490px;
    position: relative;
    margin: auto;
    z-index:1;
    height: 100%;
    max-height: 241px;
    margin-top: 8%;
}

.bonus-head{
    display:flex;
    align-items:center;              /* иконка и заголовок по одной линии */
    gap:15px;
}

.bonus-content {
    display: flex;
    align-items: center;
    gap:
            clamp(1px, 1vw, 15px);
    /* Для мобильных устройств */
}

.bonus-icon {
    width:clamp(36px, 10vw, 54px);;
    height:clamp(36px, 10vw, 54px);;
    background-color:white; /* Просто цвет фона для иконки */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 20%;
}

.bonus-text {
    max-width: 80%; /* Контролируем ширину текста */
    font-family: 'Inter', sans-serif;
    color: #1C1C1C;
    text-align: left;
    color:black;
    font-size:clamp(16px, 2vw, 20px);
}

.bonus-title {
    font-weight: bold;
    font-size: clamp(18px, 3vw, 24px);
    color:black;
    padding: 10px;
}

.bonus-message {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.4;
    color:black;
    margin-bottom: 9px;
}


.special-tariffs {
    background-color:rgba(241, 243, 248, 1);
    padding: clamp(5px, 1vw, 21px);
    border-radius: 10px;
    width:100%;
    height:100%;
    max-width: 730px;
    max-height:224px;
    margin-top: 30px;
}

.tariff-title {
    font-size: clamp(14px, 2vw, 24px);
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
}

.tariff-container {
    display: flex;
    justify-content: space-between;
    gap:
            clamp(1px, 1vw, 15px);

    flex-wrap: wrap;
}

.tariff-item {
    width: 48%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.icon-container {
    width: 40px;
    height: 40px;
    background-color:white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex:0 0 40px;
    margin-right: 10px;
}
.icon-container-line{
    margin-right: 5px;
}

.tariff-text {
    font-family: 'Inter', sans-serif;
    color: #333;
}

.tariff-price {
    font-size: clamp(12px, 2vw, 20px);
    color: black; /* Оранжевый цвет для цены */
    margin-bottom: 5px;
    line-height: 1.3;
}

.tariff-description {
    font-size: clamp(14px, 2vw, 16px);
    color: #777;
}

.tariff-note {
    text-align: left;
    font-size: 16px;
    color: #777;
    margin-top: 20px;
    font-style: italic;
}




@media (max-width:650px){
    .container-popup-block{
        flex-direction:column;      /* всё в колонку */
        align-items:center;
        gap:clamp(16px,4vw,32px);  /* «воздух» между блоками */
        max-width:360px;            /* ❱❱ ограничитель ширины ❰❰ */
        width:100%;
        margin: 0 0 0 0;
    }

    .right{            order:1; width:100%; }
    .block-wpcf7-form{ order:2; width:100%; }
    .left{             order:3; width:100%; }

    .left .visual{
        flex:0 0 auto;
        display:flex;
        justify-content:center;
    }
    .left img{
        max-width:260px;            /* чтобы не вываливалась */
    }

    /* ---------- текстовый столбец ---------- */
    .popup-title{font-size:clamp(20px,6vw,32px)}
    .popup-subtitle{font-size:clamp(14px,4vw,18px)}
    .features-title,
    .features li{font-size:clamp(14px,4vw,18px)}

    /* ---------- таблица тарифов ---------- */
    .special-tariffs{
        padding:clamp(12px,4vw,20px);
    }
    .tariff-container{
        flex-direction:column;      /* карточки одна под другой */
    }
    .tariff-item{
        width:100%;
        margin-top:5px;
    }

    /* ---------- форма  ------------- */
    /* раскладка превращаем в 1‑колоночную */
    .block-wpcf7-form form{
        grid-template-columns:1fr;
        grid-template-areas:
			"name"
			"phone"
			"agree"
			"button";
    }
    /* горизонтальный отступ между чек‑боксом и подписью */
    .block-wpcf7-form .wpcf7-checkbox{
        gap:10px;
    }

    /* небольшие размеры полей */
    .block-wpcf7-form input[type="text"],
    .block-wpcf7-form input[type="tel"],
    .block-wpcf7-form .wpcf7-submit{
        height:46px;
        font-size:15px;
    }

    /* ---------- SVG‑лента сбоку ---------- */
    .svg-block{
        display:none;               /* на узком экране просто убираем */
    }

    .container-popup-block .features li{
        line-height: unset;

    }
    .tariff-title{
        font-size:18px;
    }
    .tariff-price{
        font-size:16px;
    }
    .special-tariffs{
        margin:10px 0 0 0;
        max-height:100%;
    }
    .tariff-note{
        margin:5px 0 0 0;
    }

    svg.tariff-bar-two{
        height: 4.5vh;
    }
    svg.tariff-bar-two path {
        stroke-width: 3 !important;
    }
    .block-wpcf7-form .wpcf7-list-item-label{
        margin-left: 5px;
    }
    .bonus-block{
        margin:9% 0 0 0;
        height:auto;
    }
    .bonus-content{
        gap:15px;
    }
    .container-popup-block .right .popup-title{
        line-height: 1.3;
        margin-bottom:10px;
    }
.container-popup-block .right .features > li > svg {
    width: 21px;
}
.special-tariffs .icon-container > svg {
    width: 14px;
}
}



@media screen and (min-width: 651px) and (max-width: 1100px) {

.container-popup-block .right .popup-subtitle{
margin-bottom:5px;
}
.svg-block{
    width: auto;
bottom: 5%;
}
.popup-title{
font-size:clamp(22px, 4vw, 34px) !important;
}

.bonus-title{
font-size:clamp(12px, 1.5vw, 18px);
}

.features-title{
font-size:clamp(12px, 1.5vw, 18px);
}
.tariff-note{
font-size:clamp(12px, 1.5vw, 18px);
}

.tariff-price{
font-size:clamp(12px, 1.5vw, 18px);
}
.container-popup-block .features li{
margib-bottom:0;
font-size:clamp(12px, 1.5vw, 18px);
}
.container-popup-block .features-title{
margin-bottom:0;
}
.bonus-message{
font-size:clamp(12px, 1.5vw, 18px);
}
.special-tariffs{
    margin-top: 10px;
}
.bonus-block{
height:auto;
}
.block-wpcf7-form .wpcf7-list-item-label{
font-size:12px;
}
.container-popup-block .left img{
    width: 80%;
    left: 10%;
}

    .bonus-content{
        gap:0;
    }

}
@media screen and (min-width: 826px) and (max-width: 1000px){
.svg-block{
bottom: 15%;

}


}
@media screen and (min-width: 650px) and (max-width: 826px){
.svg-block{
bottom: 25%;

}


}
@media screen and (min-width: 650px) and (max-width: 742px){
.svg-block{
bottom: 35%;

}


}