/* Contact Form 7 overrides – make CF7 markup match the .ul-contact-form design */

.ul-contact-form-wrapper .wpcf7 .hidden-fields-container,
.ul-contact-form-wrapper .wpcf7 .screen-reader-response {
    display: none;
}

/* grid: subject, message and submit span both columns */
.ul-contact-form-wrapper .wpcf7-form > .form-group:nth-of-type(n+5),
.ul-contact-form-wrapper .wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
}

.ul-contact-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    position: relative;
}

.ul-contact-form-wrapper form textarea {
    height: 110px;
    resize: vertical;
}

/* subject radios – mimic .ul-radio */
.ul-contact-form-wrapper .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(15px, 1.31vw, 25px);
}

.ul-contact-form-wrapper .wpcf7-list-item {
    margin: 0;
}

.ul-contact-form-wrapper .wpcf7-list-item label {
    display: flex !important;
    align-items: center;
    gap: clamp(7px, 0.53vw, 10px);
    cursor: pointer;
    font-weight: 400 !important;
    font-size: clamp(12px, 0.74vw, 14px) !important;
}

.ul-contact-form-wrapper form .wpcf7-list-item input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    background-color: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ul-contact-form-wrapper form .wpcf7-list-item input[type=radio]::before {
    content: "\f126"; /* flaticon-check-2 */
    font-family: flaticon_real_estate !important;
    font-size: 9px;
    line-height: 1;
    color: var(--black);
    opacity: 0;
}

.ul-contact-form-wrapper form .wpcf7-list-item input[type=radio]:checked {
    background-color: var(--white);
    box-shadow: 0 0 0 1px var(--black);
}

.ul-contact-form-wrapper form .wpcf7-list-item input[type=radio]:checked::before {
    opacity: 1;
}

/* submit button – undo the generic form input styles */
.ul-contact-form-wrapper form input.wpcf7-submit {
    display: inline-flex;
    width: auto;
    padding: 0 clamp(15px, 1.26vw, 24px);
    border: 1px solid var(--ul-primary);
    background-color: var(--ul-primary);
    color: var(--white);
    font-size: clamp(13px, 0.84vw, 14px);
    cursor: pointer;
    transition: 0.3s;
}

.ul-contact-form-wrapper form input.wpcf7-submit:hover {
    background-color: var(--ul-secondary);
    border-color: var(--ul-secondary);
}

.ul-contact-form-wrapper .wpcf7-spinner {
    vertical-align: middle;
    margin: 0 0 0 12px;
}

/* validation + response messages */
.ul-contact-form-wrapper .wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: 5px;
}

.ul-contact-form-wrapper form input.wpcf7-not-valid,
.ul-contact-form-wrapper form textarea.wpcf7-not-valid {
    border-bottom-color: #dc3232;
}

.ul-contact-form-wrapper .wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 10px 15px;
    font-size: 14px;
}

/* ---------- math captcha (DS CF7 Math Captcha) ---------- */
.form-group--captcha .captcha-label {
    display: block;
    margin-bottom: 8px;
    color: #6B7A8C;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.form-group--captcha .dscf7-captcha-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.form-group--captcha .dscf7-question-container .dscf7_lt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.form-group--captcha .dscf7_question_text {
    color: var(--ul-black);
    font-size: 14px;
}

.form-group--captcha .dscf7_svg {
    display: block;
    height: 46px;
    width: auto;
    border: 1px solid #E3E8EF;
}

.form-group--captcha .dscf7_refresh_captcha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #E3E8EF;
    background-color: var(--white);
    transition: border-color 0.25s ease;
}

.form-group--captcha .dscf7_refresh_captcha:hover {
    border-color: var(--ul-primary);
}

.form-group--captcha .dscf7_captcha_icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.form-group--captcha .dscf7-answer-container {
    flex: 1 1 140px;
    min-width: 120px;
}

.form-group--captcha .dscf7-answer-container input.dscf7_answer {
    width: 100%;
    margin-bottom: 0;
}

/* math captcha: refresh button sits beside the image (plugin pins it on top of the image) */
.form-group--captcha .dscf7-captcha-container {
    width: 100%;
    max-width: 420px;
    padding: 12px;
    background-color: var(--white);
    border: 1px solid #E3E8EF;
    border-radius: 0;
}

.form-group--captcha .dscf7-captcha-container .dscf7-question-container {
    width: 100%;
}

.form-group--captcha .dscf7-captcha-container span.dscf7_lt {
    display: flex;
    align-items: center;
    gap: 10px;
    position: static;
    font-size: 15px;
}

.form-group--captcha .dscf7-captcha-container .dscf7_question_text {
    padding-right: 0;
    font-size: 15px;
    white-space: nowrap;
}

.form-group--captcha .dscf7-captcha-container .dscf7_svg_wrap {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.form-group--captcha .dscf7-captcha-container .dscf7_svg_wrap svg {
    display: block;
    width: 100%;
    max-width: 150px;
    height: 46px;
    padding: 0;
    border: 1px solid #E3E8EF;
    border-radius: 0;
}

.form-group--captcha .dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha {
    position: static;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-left: auto;
}

.form-group--captcha .dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha img {
    width: 18px;
    height: 18px;
}

.form-group--captcha .dscf7-captcha-container .dscf7-answer-container {
    width: 100%;
    flex: 1 1 100%;
}

.form-group--captcha .dscf7-captcha-container span.wpcf7-form-control-wrap input {
    height: 46px;
    margin-top: 10px;
    padding: 0 14px;
    border-radius: 0;
    border: 1px solid #E3E8EF;
    background-color: var(--white);
}

.form-group--captcha .dscf7-captcha-container span.wpcf7-form-control-wrap input:focus {
    outline: none;
    border-color: var(--ul-primary);
}
