/**
 * DW Brazilian Validator Document - Frontend Styles
 * Estilos para validação de documentos e feedback visual
 */

/* Estilos base para campos de documento */
.dw-bvd-cpf-field,
.dw-bvd-cnpj-field,
.dw-bvd-document-field {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estados de validação */
.dw-bvd-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.dw-bvd-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.dw-bvd-loading {
    border-color: #007cba !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25) !important;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23007cba" stroke-width="2" stroke-dasharray="10.99 10.99" stroke-dashoffset="10.99"><animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

/* Mensagens de validação */
.dw-bvd-message {
    display: block;
    margin-top: 5px;
    font-size: 0.875em;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dw-bvd-message.dw-bvd-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.dw-bvd-message.dw-bvd-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.dw-bvd-message.dw-bvd-loading {
    color: #004085;
    background-color: #cce7ff;
    border: 1px solid #99d3ff;
}

/* Ícones para mensagens */
.dw-bvd-message::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: text-top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.dw-bvd-message.dw-bvd-success::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23155724" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 6.1L7.1 10.5c-.2.2-.4.3-.7.3s-.5-.1-.7-.3L3.5 8.3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.5 1.5 3.6-3.6c.4-.4 1-.4 1.4 0s.5 1 .1 1.3z"/></svg>');
}

.dw-bvd-message.dw-bvd-error::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23721c24" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3s-.5-.1-.7-.3L8 9.4l-2.1 2.1c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.4-.4-.4-1 0-1.4L6.6 8 4.5 5.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0L8 6.6l2.1-2.1c.4-.4 1-.4 1.4 0s.4 1 0 1.4L9.4 8l2.1 2.1z"/></svg>');
}

.dw-bvd-message.dw-bvd-loading::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23004085" stroke-width="2" stroke-dasharray="10.99 10.99" stroke-dashoffset="10.99"><animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="1s" repeatCount="indefinite"/></circle></svg>');
}

/* Estado de foco */
.dw-bvd-focused {
    position: relative;
}

.dw-bvd-focused::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(0, 124, 186, 0.3);
    border-radius: 6px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Responsividade */
@media (max-width: 768px) {
    .dw-bvd-message {
        font-size: 0.8em;
        padding: 3px 6px;
    }
    
    .dw-bvd-message::before {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
}

/* Integração com temas populares */

/* Storefront */
.storefront .dw-bvd-message {
    margin-top: 8px;
}

/* Astra */
.astra-theme .dw-bvd-message {
    border-radius: 3px;
}

/* OceanWP */
.oceanwp-theme .dw-bvd-message {
    font-size: 13px;
}

/* GeneratePress */
.generate-theme .dw-bvd-message {
    margin-top: 6px;
}

/* Customizações para WooCommerce */
.woocommerce .dw-bvd-message {
    clear: both;
    width: 100%;
}

.woocommerce-checkout .dw-bvd-message {
    margin-bottom: 0;
}

.woocommerce-account .dw-bvd-message {
    margin-top: 8px;
}

/* Animações */
@keyframes dw-bvd-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dw-bvd-message {
    animation: dw-bvd-fade-in 0.3s ease-out;
}

/* Estados de hover para melhor UX */
.dw-bvd-cpf-field:hover,
.dw-bvd-cnpj-field:hover,
.dw-bvd-document-field:hover {
    border-color: #007cba;
}

/* Placeholder personalizado */
.dw-bvd-cpf-field::placeholder {
    color: #999;
    font-style: italic;
}

.dw-bvd-cnpj-field::placeholder {
    color: #999;
    font-style: italic;
}

/* Estilos para campos desabilitados */
.dw-bvd-cpf-field:disabled,
.dw-bvd-cnpj-field:disabled,
.dw-bvd-document-field:disabled {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

/* Estilos para modo escuro (se suportado pelo tema) */
@media (prefers-color-scheme: dark) {
    .dw-bvd-message.dw-bvd-success {
        color: #d1e7dd;
        background-color: #0f5132;
        border-color: #146c43;
    }
    
    .dw-bvd-message.dw-bvd-error {
        color: #f8d7da;
        background-color: #842029;
        border-color: #b02a37;
    }
    
    .dw-bvd-message.dw-bvd-loading {
        color: #cce7ff;
        background-color: #003d82;
        border-color: #0056b3;
    }
}

/* Acessibilidade */
.dw-bvd-message {
    role: alert;
    aria-live: polite;
}

/* Impressão */
@media print {
    .dw-bvd-message {
        display: none !important;
    }
    
    .dw-bvd-valid,
    .dw-bvd-invalid,
    .dw-bvd-loading {
        border-color: #000 !important;
        box-shadow: none !important;
        background-image: none !important;
    }
}