/*[Block] Contact Form*/

.contact-form-description ol {
    padding-left: 20px;
}

.contact-form-description ol li {
    list-style-type: decimal;
    padding-bottom: 16px;
}

.contact-form-description ol li:last-child {
    padding-bottom: 0;
}

.contact-form-description ol li::marker {
    font-weight: 700;
}

.contact-form-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--text-primary);
}

.contact-form-field input,
.contact-form-field textarea {
    position: relative;
    outline: none;
    width: 100%;
    min-height: 55px;
}

.contact-form-field {
    position: relative;
    outline: none;
}

.contact-form-field .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
}

.contact-form-field .wpcf7-not-valid-tip {
    position: absolute;
    bottom: -24px;
    left: 0;
}

.contact-form-field input,
.contact-form-field textarea,
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    caret-color: var(--text-primary);
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition-all-5);
}

.contact-form-field textarea {
    height: 86px;
    resize: none;
}

.contact-form-btn .blaster-btn {
    position: relative;
    flex-direction: row-reverse;
}

.contact-form-btn .blaster-btn::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3933 7.4933C16.3299 7.32963 16.2347 7.1801 16.1133 7.0533L9.44667 0.386629C9.32235 0.262311 9.17476 0.163697 9.01233 0.0964165C8.8499 0.029136 8.67581 -0.00549316 8.5 -0.00549316C8.14493 -0.00549316 7.80441 0.135557 7.55333 0.386629C7.42902 0.510947 7.3304 0.658534 7.26312 0.820964C7.19584 0.983393 7.16121 1.15748 7.16121 1.3333C7.16121 1.68836 7.30226 2.02889 7.55333 2.27996L11.9533 6.66663H1.83333C1.47971 6.66663 1.14057 6.8071 0.890525 7.05715C0.640476 7.3072 0.5 7.64634 0.5 7.99996C0.5 8.35358 0.640476 8.69272 0.890525 8.94277C1.14057 9.19282 1.47971 9.33329 1.83333 9.33329H11.9533L7.55333 13.72C7.42836 13.8439 7.32917 13.9914 7.26148 14.1539C7.19379 14.3163 7.15894 14.4906 7.15894 14.6666C7.15894 14.8426 7.19379 15.0169 7.26148 15.1794C7.32917 15.3419 7.42836 15.4893 7.55333 15.6133C7.67728 15.7383 7.82475 15.8375 7.98723 15.9052C8.14971 15.9728 8.32398 16.0077 8.5 16.0077C8.67602 16.0077 8.85029 15.9728 9.01277 15.9052C9.17525 15.8375 9.32272 15.7383 9.44667 15.6133L16.1133 8.94663C16.2347 8.81982 16.3299 8.6703 16.3933 8.50663C16.5267 8.18201 16.5267 7.81791 16.3933 7.4933Z" fill="%2337413C"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 16px;
    width: 17px;
    z-index: 3;
}

.wpcf7-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}


.wpcf7-not-valid-tip {
    color: var(--error);
}

.wpcf7-response-output,
.wpcf7-spinner {
    display: none;
}

@media (min-width: 1024px) {
    .contact-form-wrap {
        gap: 40px;
    }
}


.contact-form-field input:focus::placeholder,
.contact-form-field textarea:focus::placeholder {
    color: #9BE4BB;
    transform: scale(0.98);

}

.contact-form-field::before,
.contact-form-field::after {
    z-index: 1;
    height: 2px;
    width: 100%;
    content: "";
    position: absolute;
    bottom: 0;
    transform: scaleX(0);
    transition: transform 0.5s linear;
}

.contact-form-field::after {
    transform: scaleX(1);
    transform-origin: left;
    background: var(--text-primary);
    transition: transform 0.5s linear;
}

.contact-form-field:has(.wpcf7-not-valid)::before {
    transform: scaleX(1);
    transform-origin: left;
    background: linear-gradient(to right, var(--error), #FFFFFF);
}

.contact-form-field:has(.wpcf7-not-valid) input::placeholder,
.contact-form-field:has(.wpcf7-not-valid) textarea::placeholder {
    color: var(--error);
}

.contact-form-field:focus-within::before,
.contact-form-field:hover::before {
    transform: scaleX(1);
    transform-origin: left;
    background:  linear-gradient(90deg, #41FD73 0%, #20FDC1 51.44%, #1EFDEB 99.99%);

}

.contact-form-field:focus-within::after,
.contact-form-field:has(.wpcf7-not-valid)::after,
.contact-form-field:hover::after {
    transform: scaleX(0);
    transform-origin: right;
}