/*
 * Custom Form inherits the same visual surface and motion language as CTA.
 * The CTA wrapper class is applied in render.php; this file only extends CTA
 * rules for dynamic field types and editor-specific classes used by this block.
 */

.vb-custom-form {
    width: 100%;
}

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

.vb-custom-form__group {
    margin-bottom: 1rem;
}

.vb-custom-form__captcha {
    display: flex;
    justify-content: center;
}

.vb-custom-form__label {
    display: block;
    margin: 0 0 0.45rem;
    color: var(--vb-cta-text-color, rgba(255, 255, 255, 0.9));
    font-family: var(--vb-font-family, inherit);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
}

.vb-custom-form--surface-light .vb-custom-form__label {
    color: var(--vb-color-text, #3B4450);
}

.vb-custom-form__required {
    color: var(--vb-color-accent, #e95420);
    margin-left: 0.2em;
}

.vb-custom-form__form input[type="text"],
.vb-custom-form__form input[type="email"],
.vb-custom-form__form input[type="tel"],
.vb-custom-form__form input[type="number"],
.vb-custom-form__form input[type="date"],
.vb-custom-form__form input[type="file"],
.vb-custom-form__form textarea,
.vb-custom-form__form select {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--vb-font-family, inherit);
    font-size: 1rem;
    line-height: 1.35;
    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;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.vb-custom-form__form textarea {
    min-height: 120px;
    resize: vertical;
}

.vb-custom-form__form select {
    appearance: auto;
}

.vb-custom-form__form input[type="file"] {
    cursor: pointer;
}

.vb-custom-form__form input[type="file"].vb-custom-form__file-input--dragover {
    border-color: var(--vb-cta-focus-border);
    background: var(--vb-cta-focus-bg);
}

.vb-custom-form__form input[type="file"].vb-custom-form__file-input--invalid {
    border-color: var(--vb-color-error, #c7162b);
}

.vb-custom-form__form input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: var(--vb-radius);
    background: var(--vb-color-accent, #e95420);
    color: var(--vb-color-btn-text, #fff);
    cursor: pointer;
    transition: filter 0.3s ease;
}

.vb-custom-form__form input[type="file"]::file-selector-button:hover {
    filter: brightness(0.92);
}

.vb-custom-form__file-note {
    margin: 0.35rem 0 0;
    color: var(--vb-cta-text-color, rgba(255, 255, 255, 0.75));
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
}

.vb-custom-form--surface-light .vb-custom-form__file-note {
    color: var(--vb-color-text-muted, #6c757d);
}

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

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

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

.vb-custom-form__form input:-webkit-autofill,
.vb-custom-form__form input:-webkit-autofill:hover,
.vb-custom-form__form input:-webkit-autofill:focus,
.vb-custom-form__form textarea:-webkit-autofill,
.vb-custom-form__form textarea:-webkit-autofill:hover,
.vb-custom-form__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;
}

.vb-custom-form__form input::placeholder,
.vb-custom-form__form input::-webkit-input-placeholder,
.vb-custom-form__form input::-moz-placeholder,
.vb-custom-form__form input:-ms-input-placeholder,
.vb-custom-form__form input::-ms-input-placeholder,
.vb-custom-form__form textarea::placeholder,
.vb-custom-form__form textarea::-webkit-input-placeholder,
.vb-custom-form__form textarea::-moz-placeholder,
.vb-custom-form__form textarea:-ms-input-placeholder,
.vb-custom-form__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-custom-form__checkbox {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--vb-cta-consent-color, rgba(255, 255, 255, 0.92)) !important;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
}

.vb-custom-form__checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.vb-custom-form__checkbox span {
    color: currentColor;
}

.vb-custom-form__checkbox .vb-custom-form__required {
    color: var(--vb-color-accent, #e95420);
    margin-left: 0.2em;
}

.vb-custom-form .vb-consent,
.vb-custom-form .vb-consent span,
.vb-custom-form .vb-consent a {
    color: var(--vb-cta-consent-color, rgba(255, 255, 255, 0.92)) !important;
}

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

.vb-custom-form .vb-consent .vb-custom-form__required {
    color: var(--vb-color-accent, #e95420) !important;
    margin-left: 0.2em;
}

.vb-custom-form__consent {
    margin: 0.75rem 0;
}

.vb-custom-form__submit {
    min-width: 180px;
}

.vb-custom-form__empty {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
    color: var(--vb-cta-field-color, #fff);
    background: var(--vb-cta-field-bg, rgba(255, 255, 255, 0.1));
    border: 2px solid var(--vb-cta-field-border, rgba(255, 255, 255, 0.3));
    border-radius: var(--vb-radius, 4px);
    text-align: center;
}

@media (max-width: 599px) {
    .vb-custom-form__submit {
        width: 100%;
    }
}