/**


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


 *


 * @package YTIW_CRM


 * @version 4.9.3 // Modern UI Overhaul


 */





:root {


    --ytiw-crm-primary: #0056b3; /* Azul Profissional */


    --ytiw-crm-primary-hover: #004494;


    --ytiw-crm-bg: #ffffff;


    --ytiw-crm-text: #333333;


    --ytiw-crm-border: #d1d5db;


    --ytiw-crm-input-bg: #ffffff;


    --ytiw-crm-focus-ring: rgba(0, 86, 179, 0.25);


    --ytiw-crm-radius: 6px;


    --ytiw-crm-spacing: 20px;


}





/* Container Principal (Card Design) */


.ytiw-crm-form-wrapper {


    max-width: 600px;


    margin: 30px auto;


    padding: 30px;


    background-color: var(--ytiw-crm-bg);


    border-radius: 8px;


    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    border: 1px solid #e5e7eb; /* Borda sutil */


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


    color: var(--ytiw-crm-text);


    box-sizing: border-box;


}





.ytiw-crm-form-wrapper * {


    box-sizing: border-box;


}





/* Wrappers de Campo */


.ytiw-crm-field-wrapper {


    margin-bottom: var(--ytiw-crm-spacing);


    position: relative;


}





.ytiw-crm-field-wrapper > label {


    display: block;


    font-weight: 600;


    margin-bottom: 8px;


    font-size: 0.95rem;


    color: #374151;


}





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


    color: #dc2626;


    margin-left: 2px;


    font-weight: normal;


}





/* Estilos de Inputs (Texto, Email, etc) */


.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="date"],


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


.ytiw-crm-form textarea,


.ytiw-crm-form select {


    width: 100%;


    padding: 10px 12px;


    font-size: 1rem;


    line-height: 1.5;


    color: var(--ytiw-crm-text);


    background-color: var(--ytiw-crm-input-bg);


    background-clip: padding-box;


    border: 1px solid var(--ytiw-crm-border);


    border-radius: var(--ytiw-crm-radius);


    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;


    -webkit-appearance: none; /* Remove estilo nativo iOS */


    -moz-appearance: none;


    appearance: none;


}





/* Foco nos Inputs */


.ytiw-crm-form input:focus,


.ytiw-crm-form textarea:focus,


.ytiw-crm-form select:focus {


    border-color: var(--ytiw-crm-primary);


    outline: 0;


    box-shadow: 0 0 0 3px var(--ytiw-crm-focus-ring);


}





.ytiw-crm-form textarea {


    min-height: 120px;


    resize: vertical;


}





/* Estilos para Select (Seta Customizada) */


.ytiw-crm-form select {


    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");


    background-position: right 0.5rem center;


    background-repeat: no-repeat;


    background-size: 1.5em 1.5em;


    padding-right: 2.5rem;


}





/* Estilos para Radio e Checkbox */


.ytiw-crm-options-wrapper {


    margin-top: 8px;


    display: flex;


    flex-direction: column;


    gap: 8px;


}





.ytiw-crm-option-item {


    display: flex;


    align-items: center;


}





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


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


    width: 1.1em;


    height: 1.1em;


    margin-right: 10px;


    cursor: pointer;


    accent-color: var(--ytiw-crm-primary); /* Modern browsers */


}





.ytiw-crm-option-item label {


    font-weight: normal;


    margin-bottom: 0;


    cursor: pointer;


    font-size: 0.95rem;


}





/* Campo Composto de WhatsApp */


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


    display: flex;


    gap: 10px;


}





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


    width: 80px !important;


    text-align: center;


    background-color: #f9fafb;


    color: #6b7280;


    font-weight: 500;


}





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


    flex: 1;


}





/* Grid Layout Inteligente */


.ytiw-crm-fields-grid {


    display: flex;


    flex-wrap: wrap;


    gap: 0 20px; /* Espaçamento horizontal */


}





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


    width: 100%;


}





/* Campos que dividem linha em telas maiores */


@media (min-width: 600px) {


    .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-date,


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


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


        flex: 1;


        min-width: 45%;


    }


}





/* Botão de Envio */


.ytiw-crm-submit-wrapper {


    margin-top: 10px;


    text-align: center; /* Centraliza em mobile */


}





.ytiw-crm-submit-button {


    background-color: var(--ytiw-crm-primary);


    color: #ffffff;


    padding: 12px 24px;


    border: none;


    border-radius: var(--ytiw-crm-radius);


    cursor: pointer;


    font-size: 1rem;


    font-weight: 600;


    letter-spacing: 0.5px;


    transition: all 0.2s ease;


    width: 100%; /* Mobile first: full width */


    text-transform: uppercase;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


}





@media (min-width: 600px) {


    .ytiw-crm-submit-button {


        width: auto; /* Desktop: largura do conteúdo */


        min-width: 200px;


    }


    .ytiw-crm-submit-wrapper {


        text-align: left; /* Alinha à esquerda ou conforme design */


    }


}





.ytiw-crm-submit-button:hover {


    background-color: var(--ytiw-crm-primary-hover);


    transform: translateY(-1px);


    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);


}





.ytiw-crm-submit-button:active {


    transform: translateY(0);


    box-shadow: none;


}





/* Mensagens de Feedback */


.ytiw-crm-form-message {


    padding: 15px 20px;


    margin-bottom: 25px;


    border-radius: 6px;


    font-size: 0.95rem;


    line-height: 1.5;


    border-left: 4px solid transparent;


}





.ytiw-crm-form-message.success {


    color: #065f46;


    background-color: #d1fae5;


    border-left-color: #059669;


}





.ytiw-crm-form-message.error {


    color: #991b1b;


    background-color: #fee2e2;


    border-left-color: #dc2626;


}





/* Seções e HTML */


.ytiw-crm-section-break-wrapper {


    width: 100%;


    margin: 30px 0 20px 0;


}





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


    margin: 0 0 10px 0;


    padding: 0;


    font-size: 1.25rem;


    color: #111827;


    font-weight: 700;


}





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


    border: 0;


    border-top: 1px solid #e5e7eb;


    margin: 0;


}





.ytiw-crm-html-content-wrapper {


    width: 100%;


    margin-bottom: 20px;


    font-size: 0.95rem;


    color: #4b5563;


    line-height: 1.6;


}





/* Navegação Multi-paginas */


.ytiw-crm-navigation-wrapper {


    display: flex;


    justify-content: space-between;


    margin-top: 25px;


    border-top: 1px solid #e5e7eb;


    padding-top: 20px;


}





.ytiw-crm-navigation-wrapper .button {


    padding: 10px 20px;


    cursor: pointer;


    border: 1px solid #d1d5db;


    background-color: #f3f4f6;


    color: #374151;


    border-radius: var(--ytiw-crm-radius);


    font-weight: 500;


    transition: background-color 0.2s;


}





.ytiw-crm-navigation-wrapper .button:hover {


    background-color: #e5e7eb;


}





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


    margin-left: auto;


    background-color: var(--ytiw-crm-primary);


    color: #fff;


    border-color: transparent;


}





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


    background-color: var(--ytiw-crm-primary-hover);


}





/* Erros de Validação Inline */


.ytiw-crm-validation-error {


    color: #dc2626;


    font-size: 0.85rem;


    margin-top: 6px;


    font-weight: 500;


}





/* Campos de Endereço e Nome (Subcampos) */


.ytiw-crm-address-field-group,


.ytiw-crm-name-field-group {


    display: flex;


    flex-wrap: wrap;


    gap: 15px;


}





.ytiw-crm-address-subfield,


.ytiw-crm-name-subfield {


    flex: 1;


    min-width: 140px; /* Garante que não fique muito pequeno em mobile */


}





.ytiw-crm-address-subfield-street {


    flex-basis: 100%; /* Rua ocupa linha inteira */


}





.ytiw-crm-address-subfield > label,


.ytiw-crm-name-subfield > label {


    font-size: 0.85rem;


    font-weight: 500;


    color: #6b7280;


    margin-bottom: 4px;


    display: block;


}





/* reCAPTCHA */


.ytiw-crm-recaptcha-wrapper {


    margin-bottom: 20px;


    display: flex;


    justify-content: flex-start; /* Alinhamento padrão */


}