/**
 * Contact Form 7 — página contactos (.wrap-contact-form)
 *
 * Carrega depois de layout/global.css; botão Enviar em components/buttons.css.
 * Erros: components/form-errors.css
 */

/* Espaçamento uniforme entre linhas (.row): gutter vertical em cols empilhadas + entre rows consecutivas */
.wrap-contact-form .row{
    --bs-gutter-y: var(--space-form-row-gap);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wrap-contact-form .row ~ .row{
    margin-top: var(--space-form-row-gap) !important;
}

.wrap-contact-form > *:not(.row):not(.wpcf7-response-output):not(input):not(style):not(script) + .row{
    margin-top: var(--space-form-row-gap) !important;
}

/* Form com col-12 col-md-6 no <form>: primeira .row sem margin-top (evita folga dupla na coluna) */
form.wpcf7-form.wrap-contact-form.col-12.col-md-6 > .row:first-child{
    margin-top: 0 !important;
}

form.wpcf7-form.wrap-contact-form.col-12.col-md-6 > input[type="hidden"] + .row{
    margin-top: 0 !important;
}

/* Contactos: colunas telefone / telemóvel (CF7) — sem margin-top (ex.: gutter ao empilhar) */
.wrap-contact-form .col-12.col-md-6:has([data-name="telefone"]),
.wrap-contact-form .col-12.col-md-6:has([data-name="celular"]),
.wrap-contact-form .col-12.col-md-6:has([data-name="telemovel"]),
.wrap-contact-form .col-12.col-md-6:has([data-name="telemóvel"]){
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

.wrap-contact-form span[data-name="your-name"]:before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f007";
    display: inline-block;
    vertical-align: middle;
    font-weight:900;
    position: absolute;
    top:0;
    padding-left: 15px;
    color: var(--bs-btn-color);
}

.wrap-contact-form span[data-name="your-email"]:before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0e0";
    display: inline-block;
    vertical-align: middle;
    font-weight:900;
    position: absolute;
    top:0;
    padding-left: 15px;
    color: var(--bs-btn-color);
}

.wrap-contact-form span[data-name="telefone"]:before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f095";
    display: inline-block;
    vertical-align: middle;
    font-weight:900;
    position: absolute;
    top:0;
    padding-left: 15px;
    color: var(--bs-btn-color);
}

.wrap-contact-form span[data-name="celular"]:before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f095";
    display: inline-block;
    vertical-align: middle;
    font-weight:900;
    position: absolute;
    top:0;
    padding-left: 15px;
    color: var(--bs-btn-color);
}


.wrap-contact-form .wpcf7-form-control-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wrap-contact-form input[type="tel"],
.wrap-contact-form input[type="text"],
.wrap-contact-form input[type="email"],
.wrap-contact-form input[type="url"],
.wrap-contact-form input[type="number"]{
    width: 100%;
    padding-left: 37px;
    padding-right: 1rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 999px !important;
    border: 1px solid var(--bs-border-color) !important;
    min-height: var(--size-form-submit-min-height);
    box-sizing: border-box;
}

.wrap-contact-form textarea.wpcf7-form-control,
.wrap-contact-form textarea{
    width: 100%;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--bs-border-color) !important;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
}

.wrap-contact-form select.wpcf7-form-control,
.wrap-contact-form select{
    width: 100%;
    border-radius: 999px !important;
    border: 1px solid var(--bs-border-color) !important;
    min-height: var(--size-form-submit-min-height);
    padding-left: 1rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.wrap-contact-form .wpcf7-form-control-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
.wrap-contact-form input[type="tel"]:focus,
.wrap-contact-form input[type="text"]:focus,
.wrap-contact-form input[type="email"]:focus,
.wrap-contact-form input[type="url"]:focus,
.wrap-contact-form input[type="number"]:focus,
.wrap-contact-form textarea.wpcf7-form-control:focus,
.wrap-contact-form textarea:focus,
.wrap-contact-form select.wpcf7-form-control:focus,
.wrap-contact-form select:focus{
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary-light) 22%, transparent);
}

/* :focus-visible — substitui o outline nativo do browser; visualmente consistente com
   border-radius 999px dos inputs e var(--radius-lg) das textareas */
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary-light) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary-light) 22%, transparent) !important;
}

.wrap-contact-form label{
    font-size: var(--font-size-14);
    line-height: 1.5;
}

.wrap-contact-form .col-12 :not(.row) p:last-child{
     margin-bottom: 0 !important;
}

.wrap-contact-form .wpcf7-response-output {
    width: 100%;
    margin: 1em 0 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: left;
}

.wrap-contact-form .form-control {
    border: 1px solid var(--bs-border-color);
}

.wpcf7-spinner {
    visibility: hidden !important;
    display: none !important;
    margin: 1rem auto 0px auto !important;
}


form.submitting .wpcf7-spinner {
    visibility: visible !important;
    display: block !important;
}