/**
 * Estilos del Formulario de Contacto Drian Agent
*/
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/static/Outfit-Regular.ttf') format('truetype');
}

/* Contenedor principal del formulario */
.drian-contact-form-container {
    display: flex;
    padding: 4rem 2rem 5rem 2rem;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    align-self: stretch;
    border-radius: 1.0625rem;
    border: 1px solid #2856EA;
    background: #2856EA;
}

/* Formulario */
.drian-contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Pregunta principal */
.drian-contact-question {
    color: #FFF;
    font-family: 'Outfit';
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin-bottom: 0 !important;
}

/* Fila de campos */
.drian-contact-fields-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    align-items: stretch;
}

/* Grupo de campos */
.drian-contact-form-group {
    display: flex;
    flex-direction: column;
}

.drian-contact-input-group {
    flex: 1;
    min-width: 0;
}

.drian-contact-select-group {
    flex: 0 0 auto;
    width: auto;
}

.drian-contact-button-group {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: stretch;
}

/* Input de texto */
.drian-contact-input {
    border-radius: 0.625rem !important;
    background: #FFF !important;
    padding: 1rem 1.5rem !important;
    color: #0F0D0E !important;
    font-family: 'Outfit' !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.0225rem !important;
    height: auto !important;
    width: 100%;
    box-sizing: border-box;
}

.drian-contact-input::placeholder {
    color: #0F0D0E !important;
}

/* Select de sectores */
.drian-contact-select {
    border-radius: 0.625rem !important;
    background-color: #FFF !important;
    padding: 1rem 1.5rem !important;
    color: #0F0D0E !important;
    font-family: 'Outfit' !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.0225rem !important;
    height: auto !important;
    max-width: 10.25rem;
    min-width: 150px;
    /* Ocultar el icono por defecto del navegador */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Icono personalizado */
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 44px !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box;
}

/* Botón de envío - Estilos específicos para evitar sobrescritura de plantillas */
.drian-contact-form-container .drian-contact-form .drian-contact-submit,
.drian-contact-form-container button.drian-contact-submit,
#drianContactFormContainer .drian-contact-submit,
#drianContactSubmit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 200px !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.0225rem !important;
    color: #2856EA !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0.625rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    height: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.drian-contact-form-container .drian-contact-form .drian-contact-submit:hover,
.drian-contact-form-container button.drian-contact-submit:hover,
#drianContactFormContainer .drian-contact-submit:hover,
#drianContactSubmit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #2856EA !important;
    border: none !important;
    border-width: 0 !important;
    text-decoration: none !important;
}

.drian-contact-form-container .drian-contact-form .drian-contact-submit:active,
.drian-contact-form-container button.drian-contact-submit:active,
#drianContactFormContainer .drian-contact-submit:active,
#drianContactSubmit:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #2856EA !important;
    border: none !important;
}

.drian-contact-form-container .drian-contact-form .drian-contact-submit:focus,
.drian-contact-form-container button.drian-contact-submit:focus,
#drianContactFormContainer .drian-contact-submit:focus,
#drianContactSubmit:focus {
    outline: 3px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #2856EA !important;
    border: none !important;
}

.drian-contact-form-container .drian-contact-form .drian-contact-submit:disabled,
.drian-contact-form-container button.drian-contact-submit:disabled,
#drianContactFormContainer .drian-contact-submit:disabled,
#drianContactSubmit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #2856EA !important;
}

.drian-contact-form-container .drian-contact-submit svg,
#drianContactSubmit svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    color: inherit !important;
}

.drian-contact-form-container .drian-contact-submit:hover svg,
#drianContactSubmit:hover svg {
    transform: translateX(3px) !important;
    stroke: currentColor !important;
    color: inherit !important;
}

.drian-contact-form-container .drian-contact-submit span,
#drianContactSubmit span {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Estados de carga */
.drian-contact-form.loading .drian-contact-submit {
    opacity: 0.7;
    cursor: wait;
    position: relative;
}

.drian-contact-form.loading .drian-contact-submit::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(40, 86, 234, 0.3);
    border-top-color: #2856EA;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.drian-contact-form.loading .drian-contact-input,
.drian-contact-form.loading .drian-contact-select {
    opacity: 0.7;
    pointer-events: none;
}

/* Responsive - Tablets y móviles grandes */
@media (max-width: 768px) {
    .drian-contact-form-container {
        padding: 3rem 1.5rem 4rem 1.5rem;
    }
    
    .drian-contact-form {
        gap: 24px;
        width: 100%;
    }
    
    .drian-contact-question {
        font-size: 1.25rem;
        line-height: 1.5rem;
        text-align: center;
    }
    
    .drian-contact-fields-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .drian-contact-input-group,
    .drian-contact-select-group,
    .drian-contact-button-group {
        width: 100%;
    }
    
    .drian-contact-select {
        max-width: 100% !important;
        width: 100%;
    }
    
    .drian-contact-input,
    .drian-contact-select {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .drian-contact-form-container .drian-contact-submit,
    #drianContactSubmit {
        width: 100% !important;
        min-width: 100% !important;
        padding: 14px 16px !important;
        font-size: 1rem !important;
        height: auto !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

/* Responsive - Móviles pequeños */
@media (max-width: 480px) {
    .drian-contact-form-container {
        padding: 2rem 1rem 3rem 1rem;
        border-radius: 0.75rem;
    }
    
    .drian-contact-form {
        gap: 20px;
    }
    
    .drian-contact-question {
        font-size: 1.125rem;
        line-height: 1.375rem;
        padding: 0 0.5rem;
    }
    
    .drian-contact-fields-row {
        gap: 12px;
    }
    
    .drian-contact-input,
    .drian-contact-select {
        padding: 12px 14px !important;
        font-size: 0.9375rem !important;
        border-radius: 0.5rem !important;
    }
    
    .drian-contact-form-container .drian-contact-submit,
    #drianContactSubmit {
        padding: 12px 16px !important;
        font-size: 0.9375rem !important;
        border-radius: 0.5rem !important;
        gap: 6px !important;
    }
    
    .drian-contact-form-container .drian-contact-submit svg,
    #drianContactSubmit svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Responsive - Móviles muy pequeños */
@media (max-width: 360px) {
    .drian-contact-form-container {
        padding: 1.5rem 0.75rem 2.5rem 0.75rem;
    }
    
    .drian-contact-question {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    
    .drian-contact-input,
    .drian-contact-select {
        padding: 10px 12px !important;
        font-size: 0.875rem !important;
    }
    
    .drian-contact-form-container .drian-contact-submit,
    #drianContactSubmit {
        padding: 10px 12px !important;
        font-size: 0.875rem !important;
    }
}

/* Mensaje de error */
.drian-contact-error {
    padding: 12px 16px;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drian-contact-form-container {
    animation: fadeIn 0.3s ease-out;
}