/**
 * 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;
}

/* Estilos específicos para mensagens do WooCommerce */
.woocommerce-message.dw-bvd-validated {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  border-left: 4px solid #28a745;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 4px;
  font-size: 0.875em;
}

.woocommerce-message.dw-bvd-validated::before {
  content: "✓ ";
  font-weight: bold;
  color: #28a745;
}

/* 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;
  }
}