/**


 * Estilos do Front-end para formulários do YTI&W CRM


 *


 * @package YTIW_CRM


 * @version 2.16.6


 */





.ytiw-crm-form-wrapper {


    max-width: 600px;


    margin: 20px 0;


    padding: 20px;


    border: 1px solid #e0e0e0;


    border-radius: 5px;


    background-color: #f9f9f9;


}





.ytiw-crm-field-wrapper {


    margin-bottom: 15px;


}





.ytiw-crm-field-wrapper > label {


    display: block;


    font-weight: bold;


    margin-bottom: 5px;


}





.ytiw-crm-field-wrapper .ytiw-crm-required {


    color: #ff0000;


    margin-left: 3px;


}





.ytiw-crm-form input[type="text"],


.ytiw-crm-form input[type="email"],


.ytiw-crm-form input[type="tel"],


.ytiw-crm-form input[type="number"],


.ytiw-crm-form input[type="file"],


.ytiw-crm-form textarea,


.ytiw-crm-form select {


    width: 100%;


    padding: 8px;


    border: 1px solid #ccc;


    border-radius: 4px;


    box-sizing: border-box; /* Garante que padding não afete a largura total */


}





.ytiw-crm-form textarea {


    min-height: 100px;


    resize: vertical;


}





/* Estilos para Radio e Checkbox */


.ytiw-crm-options-wrapper {


    margin-top: 5px;


}





.ytiw-crm-option-item {


    display: flex;


    align-items: center;


    margin-bottom: 5px;


}





.ytiw-crm-option-item input[type="radio"],


.ytiw-crm-option-item input[type="checkbox"] {


    margin-right: 8px;


}





.ytiw-crm-option-item label {


    font-weight: normal;


    margin-bottom: 0;


}





/* Estilo para o campo composto de WhatsApp */


.ytiw-crm-form .ytiw-crm-whatsapp-field {


    display: flex;


    gap: 5px;


}





.ytiw-crm-form .ytiw-crm-whatsapp-field .whatsapp-ddi {


    width: 70px !important; /* Força a largura */


    flex-grow: 0 !important; /* Força a não crescer */


    flex-shrink: 0 !important; /* Força a não encolher */


    text-align: center;


}





.ytiw-crm-form .ytiw-crm-whatsapp-field .whatsapp-number {


    width: auto !important; /* Força a largura automática */


    flex-grow: 1 !important; /* Força a ocupar o espaço restante */


}





/* --- Layout Inteligente para Campos Lado a Lado --- */


.ytiw-crm-fields-grid {


    display: flex;


    flex-wrap: wrap; /* Permite que os campos quebrem para a próxima linha */


    gap: 0 15px; /* Adiciona um espaçamento horizontal de 15px entre as colunas */


}





/* Por padrão, todos os campos ocupam a linha inteira */


.ytiw-crm-fields-grid > .ytiw-crm-field-wrapper {


    width: 100%;


}





/* Campos mapeados para nome, sobrenome, e-mail e whatsapp podem crescer e ocupar o espaço */


.ytiw-crm-fields-grid > .ytiw-crm-map-first_name,


.ytiw-crm-fields-grid > .ytiw-crm-map-last_name,


.ytiw-crm-fields-grid > .ytiw-crm-field-type-email,


.ytiw-crm-fields-grid > .ytiw-crm-field-type-whatsapp {


    flex: 1; /* Permite que os campos cresçam e dividam o espaço */


    min-width: 200px; /* Garante uma largura mínima em telas menores antes de quebrar a linha */


}








/* Estilo para o reCAPTCHA */


.ytiw-crm-recaptcha-wrapper {


    margin-bottom: 15px;


}





/* Botão de Envio */


.ytiw-crm-submit-button {


    background-color: #2ea44f;


    color: white;


    padding: 10px 15px;


    border: none;


    border-radius: 5px;


    cursor: pointer;


    font-size: 16px;


    transition: background-color 0.3s ease;


}





.ytiw-crm-submit-button:hover {


    background-color: #2c974b;


}





/* Mensagens de Feedback */


.ytiw-crm-form-message {


    padding: 15px;


    margin-bottom: 20px;


    border-radius: 4px;


    border: 1px solid transparent;


}





.ytiw-crm-form-message.success {


    color: #155724;


    background-color: #d4edda;


    border-color: #c3e6cb;


}





.ytiw-crm-form-message.error {


    color: #721c24;


    background-color: #f8d7da;


    border-color: #f5c6cb;


}





/* --- Estilos para o Título da Seção --- */


.ytiw-crm-section-break-wrapper {


    width: 100%; /* Garante que o container ocupe toda a largura */


    margin: 25px 0 15px 0;


}





.ytiw-crm-section-break-wrapper h3 {


    margin: 0 0 5px 0;


    padding: 0;


    font-size: 1.2em;


    color: #333;


}





.ytiw-crm-section-break-wrapper .ytiw-crm-section-break {


    margin: 0;


    border: 0;


    border-top: 1px solid #ddd;


}





/* --- Estilos para o Conteúdo HTML --- */


.ytiw-crm-html-content-wrapper {


    width: 100%;


    margin-bottom: 15px;


}





/* --- Estilos para Formulários de Múltiplas Páginas --- */


.ytiw-crm-navigation-wrapper {


    display: flex;


    justify-content: space-between;


    margin-top: 20px;


    border-top: 1px solid #eee;


    padding-top: 20px;


}





.ytiw-crm-navigation-wrapper .button {


    padding: 8px 16px;


    cursor: pointer;


    border: 1px solid #ccc;


    background-color: #f0f0f0;


    border-radius: 4px;


}





.ytiw-crm-navigation-wrapper .ytiw-crm-next-page {


    margin-left: auto; /* Alinha o botão "Próximo" à direita */


}





.ytiw-crm-validation-error {


    color: #a00;


    font-size: 0.9em;


    margin-top: 5px;


}





/* --- Estilos para o Campo de Endereço --- */


.ytiw-crm-address-field-group {


    display: flex;


    flex-wrap: wrap;


    gap: 10px 15px; /* Espaçamento vertical e horizontal */


}





.ytiw-crm-address-subfield {


    box-sizing: border-box;


}





.ytiw-crm-address-subfield > label {


    font-size: 0.9em;


    font-weight: normal;


    color: #555;


    display: block;


    margin-bottom: 3px;


}





.ytiw-crm-address-subfield-street {


    flex-basis: 100%;


}





.ytiw-crm-address-subfield-number,


.ytiw-crm-address-subfield-neighborhood {


    flex: 1;


    min-width: 150px;


}





.ytiw-crm-address-subfield-city,


.ytiw-crm-address-subfield-state,


.ytiw-crm-address-subfield-zip {


    flex: 1;


    min-width: 120px;


}





/* --- Estilos para o Campo de Nome --- */


.ytiw-crm-name-field-group {


    display: flex;


    flex-wrap: wrap;


    gap: 10px 15px;


}





.ytiw-crm-name-subfield {


    box-sizing: border-box;


}





.ytiw-crm-name-subfield > label {


    font-size: 0.9em;


    font-weight: normal;


    color: #555;


    display: block;


    margin-bottom: 3px;


}





.ytiw-crm-name-subfield-prefix {


    flex-grow: 0;


    flex-basis: 80px;


}





.ytiw-crm-name-subfield-first_name,


.ytiw-crm-name-subfield-last_name {


    flex: 1;


    min-width: 150px;


}