/******************************************************************/
/*  FORMULARIOS
/******************************************************************/

.cf7-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Estilos base de inputs y textareas */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 16px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-900);
    border: unset;
    border-bottom: 1px solid var(--gray-700, #4A504C);
    transition: all 0.3s ease;
    outline: none;
    resize: vertical;
}

/* Estado focus */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
}

/* Estado hover */
.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: var(--gray-500);
}

/* Estado disabled */
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--gray-700, #4A504C);
    /* Input/Placeholder */
    font-family: Inter;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.28px;
}

/* Validación: Campo válido */
.form-control.is-valid,
input.is-valid,
textarea.is-valid,
select.is-valid,
.form-control:valid,
input:valid,
textarea:valid,
select:valid {
    border-color: var(--primary);
}

.form-control.is-valid:focus,
input.is-valid:focus,
textarea.is-valid:focus,
select.is-valid:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(6, 56, 14, 0.15);
}

/* Validación: Campo inválido / Error */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.form-control:invalid,
input:invalid,
textarea:invalid,
select:invalid {
    border-color: #D32F2F;
}

.form-control.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: #D32F2F;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

span.wpcf7-not-valid-tip {
    color: var(--status-danger, #FF4B4B);

    /* Desktop/input/label */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.24px;
    padding-left: 32px;
    margin-top: 8px;
}

span.wpcf7-not-valid-tip::before {
    content: "";
    position: absolute;
    margin-left: -24px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_7_629)"><path d="M8.00016 14.6667C11.6821 14.6667 14.6668 11.6819 14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337C4.31826 1.33337 1.3335 4.31814 1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667Z" stroke="%23FF4B4B" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 6L6 10" stroke="%23FF4B4B" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L10 10" stroke="%23FF4B4B" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_7_629"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Mensaje de campo válido */
span.wpcf7-valid-tip {
    color: #08A93E;

    /* Desktop/input/label */
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.24px;
    padding-left: 32px;
    display: block;
    margin-top: 4px;
}

span.wpcf7-valid-tip::before {
    content: "";
    position: absolute;
    margin-left: -24px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_7_643)"><path d="M14.6668 7.38668V8.00001C14.666 9.43763 14.2005 10.8365 13.3397 11.9879C12.4789 13.1393 11.269 13.9817 9.8904 14.3893C8.51178 14.7969 7.03834 14.7479 5.68981 14.2497C4.34128 13.7515 3.18993 12.8307 2.40747 11.6247C1.62501 10.4187 1.25336 8.99205 1.34795 7.55755C1.44254 6.12306 1.9983 4.75756 2.93235 3.66473C3.8664 2.57189 5.12869 1.81027 6.53096 1.49344C7.93322 1.17662 9.40034 1.32157 10.7135 1.90668" stroke="%2308A93E" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.6667 2.66663L8 9.33996L6 7.33996" stroke="%2308A93E" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_7_643"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

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

/* Grupos de formulario */
.form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.form-field {
    flex: 1;
}

/* Labels */
.form-label,
label {
    color: var(--gray-900, #1D201E);

    /* Input/Label */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.28px;
    margin-bottom: 16px;
}

.form-label span,
label span {
    display: none;
}

.wpcf7-spinner {
    float: right;
}


/* Responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 16px;
    }
}


/******************************************************
 * ESTILOS ESPECIFICOS DEL CV FORM EN WORK WITH US
 * 
 */

.bark-cv-form #cvForm .upload-field .wpcf7-form-control-wrap {
    position: relative;
    overflow: hidden;
}

.bark-cv-form #cvForm .upload-field .wpcf7-form-control-wrap input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}


.bark-cv-form #cvForm .upload-field .btn-file {
    padding: 12px;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.64px;
    text-transform: capitalize;
    border-radius: 12px;
    margin-top: 16px;
}

.upload-field span.wpcf7-not-valid-tip {
    position: absolute;
    bottom: -40px;
    right: 0;
}