/**
 * Estilos para el formulario de reporte de vehículos
 * Basado en la imagen de referencia
 * 
 * @package MotaiListingPlugin
 */

.motai-default-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* Resetear estilos de Bootstrap */
.motai-default-form.container {
  max-width: 1200px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Contenedor del formulario - Grid de 2 columnas */
.motai-default-form .row {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 30px !important; /* Solo gap horizontal, sin gap vertical */
}

.motai-default-form .col-12 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 20px !important;
}

.motai-default-form .col-md-6 {
  grid-column: span 1 !important;
  width: auto !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 20px !important;
}

/* Labels - Texto blanco, espaciado compacto */
.motai-default-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: white;
  font-size: 14px;
  line-height: 1.4;
}

/* Inputs y Select - Fondo blanco, bordes redondeados */
.motai-default-form input,
.motai-default-form select,
.motai-default-form textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  color: #333 !important;
  background-color: #fff !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  margin: 0 !important;
  font-family: inherit !important;
  height: auto !important;
}

.motai-default-form input:focus,
.motai-default-form select:focus,
.motai-default-form textarea:focus {
  outline: 0 !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Botón - Turquesa vibrante como en la imagen original */
.motai-default-form button {
  display: inline-block !important;
  width: 100% !important;
  padding: 18px 24px !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  margin-top: 15px !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  user-select: none !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  background-color: #00B6C8 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Barra de progreso dentro del botón */
.motai-default-form button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: 1 !important;
}

/* Barra de progreso de fondo */
.motai-default-form button::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0% !important;
  height: 100% !important;
  background-color: rgba(255,255,255,0.4) !important;
  transition: width 0.8s ease !important;
  z-index: 0 !important;
}

/* Estados de progreso del botón */
.motai-default-form button.progress-25::after {
  width: 25% !important;
  background-color: rgba(255,255,255,0.3) !important;
}

.motai-default-form button.progress-50::after {
  width: 50% !important;
  background-color: rgba(255,255,255,0.4) !important;
}

.motai-default-form button.progress-75::after {
  width: 75% !important;
  background-color: rgba(255,255,255,0.5) !important;
}

.motai-default-form button.progress-100::after {
  width: 100% !important;
  background-color: rgba(255,255,255,0.6) !important;
}

/* Efecto de brillo durante la carga */
.motai-default-form button.loading::before {
  left: 100% !important;
  animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Texto del botón por encima de la barra de progreso */
.motai-default-form button span {
  position: relative !important;
  z-index: 2 !important;
}

.motai-default-form button:hover {
  background-color: #0099A8 !important;
  box-shadow: 0 4px 8px rgba(0, 182, 200, 0.4) !important;
  transform: translateY(-1px) !important;
}

.motai-default-form button:active {
  background-color: #008A99 !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 182, 200, 0.3) !important;
}

/* Botón deshabilitado */
.motai-default-form button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #ccc !important;
  color: #666 !important;
}

/* Checkbox de términos y condiciones */
.motai-default-form .checkbox-group {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.motai-default-form .checkbox-group input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
  cursor: pointer !important;
  margin-top: 2px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative !important;
}

.motai-default-form .checkbox-group input[type="checkbox"]:checked {
  background-color: #fff !important;
  border-color: #007bff !important;
}

.motai-default-form .checkbox-group input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #007bff !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

.motai-default-form .checkbox-group label {
  font-weight: normal !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.motai-default-form .checkbox-text {
  line-height: 1.5 !important;
  font-size: 14px !important;
  color: white !important;
}

.motai-default-form .checkbox-text a:hover {
  color: #00B6C8 !important;
}

/* Validación personalizada */
.invalid-feedback {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 4px;
}

/* Mostrar errores cuando el campo tiene la clase error */
.motai-default-form .field-error .invalid-feedback {
  display: block;
}

/* Bordes rojos para campos con errores */
.motai-default-form .field-error input,
.motai-default-form .field-error select,
.motai-default-form .field-error textarea {
  border-color: #dc3545 !important;
}

/* Bordes verdes para campos válidos */
.motai-default-form .field-valid input,
.motai-default-form .field-valid select,
.motai-default-form .field-valid textarea {
  border-color: #28a745 !important;
}

/* Estilo especial para checkbox de términos cuando es inválido */
.motai-default-form .field-error input[type="checkbox"] {
  outline: 2px solid #dc3545 !important;
  outline-offset: 2px !important;
}

.motai-default-form .field-valid input[type="checkbox"] {
  outline: 2px solid #28a745 !important;
  outline-offset: 2px !important;
}

/* Mensaje de error general */
.text-danger {
  color: #dc3545;
  font-size: 14px;
  margin-top: 10px;
}

/* Loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsivo: una columna en móvil */
@media (max-width: 768px) {
  .motai-default-form .row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  
  .motai-default-form .col-md-6 {
    grid-column: 1 / -1 !important;
  }
  
  .motai-default-form {
    padding: 0 !important;
  }
  
  .motai-default-form.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Estilos para el contenedor de resultado */
#vehicle-result-container h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Tabla simple para mostrar los datos (estilo minimalista como el formulario) */
.result-table {
  width: 100%;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
}

.result-table th,
.result-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: white;
  text-align: left;
}

.result-table th {
  font-weight: 500;
  width: 40%;
}

.result-table td {
  font-weight: 400;
}

.result-table tr:last-child th,
.result-table tr:last-child td {
  border-bottom: none;
}

/* Estilos adicionales */
.motai-default-form .col-12,
.motai-default-form .col-md-6 {
  margin-bottom: 20px;
}

#vehicle-result-container .col-12 {
  margin-bottom: 0;
}

#vehicle-result-container button {
  margin-bottom: 0;
  margin-right: 12px;
}

#vehicle-result-container button:last-child {
  margin-right: 0;
}

.alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}

#vehicle-result-container {
  background: transparent;
  padding: 20px 0;
}