/* ========================================
   9. ПРИЗЫВ К ДЕЙСТВИЮ (CTA)
   ======================================== */

.vb-cta {
    --vb-cta-title-color: #fff;
    --vb-cta-text-color: rgba(255, 255, 255, 0.9);
    --vb-cta-field-border: rgba(255, 255, 255, 0.3);
    --vb-cta-field-bg: rgba(255, 255, 255, 0.1);
    --vb-cta-field-color: #fff;
    --vb-cta-placeholder-color: rgba(255, 255, 255, 0.58);
    --vb-cta-focus-border: #fff;
    --vb-cta-focus-bg: rgba(255, 255, 255, 0.2);
    --vb-cta-consent-color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: 5rem 2rem;
    background: var(--vb-gradient);
    border-radius: var(--vb-radius-block);
    position: relative;
    overflow: hidden;
}

.vb-cta--surface-light {
    --vb-cta-title-color: var(--vb-color-primary, #073399);
    --vb-cta-text-color: rgba(59, 68, 80, 0.92);
    --vb-cta-field-border: rgba(59, 68, 80, 0.16);
    --vb-cta-field-bg: #fff;
    --vb-cta-field-color: var(--vb-color-text, #3B4450);
    --vb-cta-placeholder-color: rgba(59, 68, 80, 0.65);
    --vb-cta-focus-border: var(--vb-color-primary, #073399);
    --vb-cta-focus-bg: #fff;
    --vb-cta-consent-color: var(--vb-color-text, #3B4450);
}

/* CTA с фоновым изображением */
.vb-cta--with-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vb-cta--with-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.vb-cta--with-bg>* {
    position: relative;
    z-index: 1;
}

/* Кнопка CTA наследует акцентный цвет */
.vb-cta .vb-btn {
    background: var(--vb-color-accent) !important;
    color: #fff !important;
}

.vb-cta .vb-btn:hover {
    background: var(--vb-color-accent);
    filter: brightness(0.92);
}

.vb-cta__title {
    font-size: var(--vb-font-h2);
    color: var(--vb-cta-title-color);
    margin: 0 0 1rem;
}

.vb-cta__text {
    font-size: 1.25rem;
    color: var(--vb-cta-text-color);
    margin: 0 0 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.vb-cta__form {
    max-width: 500px;
    margin: 0 auto;
}

.vb-cta__form .vb-form-group {
    margin-bottom: 1rem;
}

.vb-cta__form .vb-form-group--captcha {
    display: flex;
    justify-content: center;
}

.vb-smartcaptcha {
    width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.vb-smartcaptcha iframe {
    max-width: 100%;
}

.vb-cta__form input[type="text"],
.vb-cta__form input[type="email"],
.vb-cta__form input[type="tel"],
.vb-cta__form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--vb-font-family, inherit);
    font-size: 1rem;
    border: 2px solid var(--vb-cta-field-border);
    border-radius: var(--vb-radius);
    background: var(--vb-cta-field-bg);
    color: var(--vb-cta-field-color);
    box-sizing: border-box;
}

/* Убрать подсветку автозаполнения браузера, чтобы все поля выглядели одинаково */
.vb-cta__form input:-webkit-autofill,
.vb-cta__form input:-webkit-autofill:hover,
.vb-cta__form input:-webkit-autofill:focus,
.vb-cta__form textarea:-webkit-autofill,
.vb-cta__form textarea:-webkit-autofill:hover,
.vb-cta__form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vb-cta-field-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--vb-cta-field-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Normalize placeholder color for all CTA fields against theme/browser overrides */
.vb-cta__form input::placeholder,
.vb-cta__form input::-webkit-input-placeholder,
.vb-cta__form input::-moz-placeholder,
.vb-cta__form input:-ms-input-placeholder,
.vb-cta__form input::-ms-input-placeholder,
.vb-cta__form textarea::placeholder,
.vb-cta__form textarea::-webkit-input-placeholder,
.vb-cta__form textarea::-moz-placeholder,
.vb-cta__form textarea:-ms-input-placeholder,
.vb-cta__form textarea::-ms-input-placeholder {
    color: var(--vb-cta-placeholder-color) !important;
    -webkit-text-fill-color: var(--vb-cta-placeholder-color) !important;
    opacity: 1 !important;
}

.vb-cta__form input[type="text"]:focus,
.vb-cta__form input[type="email"]:focus,
.vb-cta__form input[type="tel"]:focus,
.vb-cta__form textarea:focus {
    outline: none;
    border-color: var(--vb-cta-focus-border);
    background: var(--vb-cta-focus-bg);
}
.vb-cta__form.vb-form--validation-active input[type="text"]:invalid,
.vb-cta__form.vb-form--validation-active input[type="email"]:invalid,
.vb-cta__form.vb-form--validation-active input[type="tel"]:invalid,
.vb-cta__form.vb-form--validation-active textarea:invalid {
    border-color: var(--vb-color-error, #c7162b);
}

.vb-cta__form.vb-form--validation-active input[type="text"]:invalid:focus,
.vb-cta__form.vb-form--validation-active input[type="email"]:invalid:focus,
.vb-cta__form.vb-form--validation-active input[type="tel"]:invalid:focus,
.vb-cta__form.vb-form--validation-active textarea:invalid:focus {
    border-color: var(--vb-color-error, #c7162b);
}

.vb-cta__form.vb-form--validation-active .vb-consent input[type="checkbox"]:invalid + span {
    color: var(--vb-color-error, #c7162b) !important;
}

.vb-cta .vb-consent,
.vb-cta .vb-consent span,
.vb-cta .vb-consent a,
.vb-cta__privacy {
    color: var(--vb-cta-consent-color) !important;
}

.vb-cta .vb-consent a {
    text-decoration: underline;
}

.vb-cta__privacy {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 12px;
    text-align: center;
}

.vb-form-consent {
    margin: 0.75rem 0 0.75rem;
}

.vb-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 12px;
    color: var(--vb-color-text, #3B4450) !important;
    opacity: 0.85;
    line-height: 1.3;
}

.vb-consent input[type="checkbox"] {
    margin-top: 0.15rem;
}

.vb-consent a {
    color: inherit;
    text-decoration: none;
}

.vb-consent a:hover {
    text-decoration: none;
}

/* Явно задаём цвет текста для подписи чекбокса, чтобы он не пропадал
   из-за наследования цвета от родителя/темы. */
.vb-consent span {
    color: currentColor;
}

.vb-cta__form .vb-consent,
.vb-cta__form .vb-consent span,
.vb-cta__form .vb-consent a {
    color: var(--vb-color-text, #3B4450) !important;
}

.vb-popup__content .vb-consent,
.vb-popup__content .vb-consent span,
.vb-popup__content .vb-consent a,
.vb-popup__content .wpcf7-list-item-label,
.vb-popup__content input[type="checkbox"] + span,
.vb-popup__content input[type="checkbox"] + label,
.vb-modal__consent-row,
.vb-modal__consent-row label,
.vb-modal__consent-row span,
.vb-modal__consent-row a {
    color: var(--vb-color-text, #3B4450);
}

@media (max-width: 768px) {
    .vb-cta {
        padding: 3rem 1.5rem;
    }
}