/*
Theme Name: Fernando Tester Theme
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* =========================================================
   FORMULARIO DE CONTACTO — FERNANDO
   ========================================================= */

.fernando-contact-form {
    width: 100%;
    max-width: 100%;
}

/* Separación entre campos */

.fernando-contact-form .fernando-form-field {
    margin-bottom: 24px;
}

/* Evita márgenes añadidos por Contact Form 7 */

.fernando-contact-form p {
    margin: 0;
}

/* Inputs y textarea */

.fernando-contact-form input[type="text"],
.fernando-contact-form input[type="email"],
.fernando-contact-form textarea {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 20px;

    background: transparent;
    border: 2px solid #1a0b0b;
    border-radius: 0;
    box-shadow: none;

    color: #1a0b0b;
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    outline: none;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

/* Área de mensaje */

.fernando-contact-form textarea {
    min-height: 250px;
    resize: vertical;
}

/* Placeholder */

.fernando-contact-form input::placeholder,
.fernando-contact-form textarea::placeholder {
    color: #8f8585;
    opacity: 1;
}

/* Focus */

.fernando-contact-form input[type="text"]:focus,
.fernando-contact-form input[type="email"]:focus,
.fernando-contact-form textarea:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: #f5a000;
}


/* =========================================================
   ZONA INFERIOR — ESCRITORIO
   ========================================================= */

.fernando-form-footer {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    margin-top: 32px;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.fernando-contact-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 134px;
    min-height: 51px;
    margin: 0;
    padding: 13px 20px;

    background-color: #ffa800;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    color: #000;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.fernando-contact-form input[type="submit"]:hover {
    background-color: #e99700;
    transform: translateY(-2px);
}

.fernando-contact-form input[type="submit"]:focus {
    outline: 2px solid #1a0b0b;
    outline-offset: 3px;
}


/* =========================================================
   SPINNER DE CONTACT FORM 7
   ========================================================= */

.fernando-form-submit .wpcf7-spinner {
    display: block;
    margin: 10px 0 0;
}


/* =========================================================
   CASILLA Y TEXTO LEGAL
   ========================================================= */

.fernando-form-privacy {
    max-width: 410px;

    color: #1a0b0b;
    font-family: monospace;
    font-size: 10px;
    line-height: 1.25;
}


/* Línea inicial de aceptación */

.fernando-form-privacy .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.fernando-form-privacy .wpcf7-acceptance label {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.fernando-form-privacy .wpcf7-list-item-label {
    display: inline;
    padding-top: 0.25rem;
}


/* =========================================================
   CHECKBOX DE ACEPTACIÓN
   ========================================================= */

.fernando-form-privacy input[type="checkbox"] {
    flex: 0 0 17px;

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    min-height: 17px;
    margin: 0;

    background: transparent !important;
    border: 2px solid #ffa800 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    cursor: pointer;
}

/* Eliminamos los checks generados por el tema */

.fernando-form-privacy input[type="checkbox"]::before,
.fernando-form-privacy input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}

/* Estado marcado */

.fernando-form-privacy input[type="checkbox"]:checked {
    background-color: #ffa800 !important;
}

/* Marca centrada */

.fernando-form-privacy input[type="checkbox"]:checked
+ .wpcf7-list-item-label::before {
    content: "";
    position: absolute;

    left: 7px;
    top: 5px;

    width: 5px;
    height: 9px;

    border: solid #000;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   INFORMACIÓN LEGAL — ESCRITORIO
   ========================================================= */

.fernando-privacy-info {
    margin-top: 1rem;
    margin-left: 5rem;
}


/* =========================================================
   MENSAJES Y VALIDACIONES DE CONTACT FORM 7
   ========================================================= */

.fernando-contact-form .wpcf7-not-valid-tip {
    margin-top: 5px;

    color: #b00020;
    font-family: monospace;
    font-size: 11px;
}

.fernando-contact-form .wpcf7-response-output {
    margin: 30px 0 0 !important;
    padding: 12px 16px !important;

    border: 2px solid #1a0b0b !important;
    border-radius: 0;

    font-family: monospace;
    font-size: 12px;
}


/* =========================================================
   RESPONSIVE — MÓVIL
   ≤ 767px
   ========================================================= */

@media (max-width: 767px) {

    .fernando-contact-form .fernando-form-field {
        margin-bottom: 18px;
    }

    .fernando-contact-form input[type="text"],
    .fernando-contact-form input[type="email"],
    .fernando-contact-form textarea {
        padding: 11px 14px;
        font-size: 13px;
    }

    .fernando-contact-form textarea {
        min-height: 210px;
    }


    /* Footer en una sola columna */

    .fernando-form-footer {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 28px;
        margin-top: 24px;
    }


    /* Legal primero */

    .fernando-form-privacy {
        order: 1;
        width: 100%;
        max-width: 100%;
    }


    /* Botón después */

    .fernando-form-submit {
        order: 2;
        width: 100%;
    }


    /* Botón al 100% */

    .fernando-contact-form input[type="submit"] {
        display: flex;
        width: 100%;
        min-width: 0;
    }


    /* Información legal al 100% y sin sangría */

    .fernando-privacy-info {
        width: 100%;
        margin-top: 1rem;
        margin-left: 0;
        padding-left: 0;
    }

}