/*
  UDRINK - Mis Direcciones (Stitch)
  CSS especializado (único) para todos los HTML/Modales de Mis Direcciones.
  Regla: TODO va scopeado bajo .ud-mis-direcciones para evitar choques con pantallas actuales/futuras.
*/

.ud-mis-direcciones .bg-navy-blue { background-color: #0a2540; }
.ud-mis-direcciones .text-navy-blue { color: #0a2540; }
.ud-mis-direcciones .hover\:text-navy-blue:hover { color: #0a2540; }

.ud-mis-direcciones .text-success-green { color: #10b981; }
.ud-mis-direcciones .bg-success-soft { background-color: #f0fdf4; }
.ud-mis-direcciones .bg-success-green\/10 { background-color: rgba(16, 185, 129, 0.10); }
.ud-mis-direcciones .border-success-green\/20 { border-color: rgba(16, 185, 129, 0.20); }
.ud-mis-direcciones .border-success-green\/30 { border-color: rgba(16, 185, 129, 0.30); }

.ud-mis-direcciones .focus\:border-success-green:focus { border-color: #10b981; }
.ud-mis-direcciones .focus\:ring-success-green\/10:focus {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.10);
}

.ud-mis-direcciones .font-vietnam { font-family: "Be Vietnam Pro", sans-serif; }

/* Animaciones custom del diseño Stitch */
@keyframes ud-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.ud-mis-direcciones .animate-pulse-soft {
  animation: ud-pulse-soft 1.6s ease-in-out infinite;
}

@keyframes ud-spin-custom {
  to { transform: rotate(360deg); }
}
.ud-mis-direcciones .animate-spin-custom {
  animation: ud-spin-custom 1.1s linear infinite;
}

/*
  IMPORTANTE:
  Cuando el icono está centrado verticalmente con `top-1/2` + `-translate-y-1/2`,
  una animación que solo rota (transform: rotate) reemplaza el translate y provoca
  el “salto” arriba/abajo. Esta variante mantiene el translate dentro del keyframe.
*/
@keyframes ud-spin-custom-center {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.ud-mis-direcciones .animate-spin-custom-center {
  animation: ud-spin-custom-center 1.1s linear infinite;
}

/* Barra de carga (validando cobertura) */
@keyframes ud-progress-loading {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
}
.ud-mis-direcciones .progress-bar-loading {
  position: relative;
  overflow: hidden;
}
.ud-mis-direcciones .progress-bar-loading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 45%;
  background-color: rgba(15, 102, 189, 0.45);
  border-radius: 9999px;
  animation: ud-progress-loading 1.2s ease-in-out infinite;
}

/* Barra de progreso (dirección confirmada) */
@keyframes ud-progress-fill {
  0% { width: 0%; }
  100% { width: 100%; }
}
.ud-mis-direcciones .progress-bar-fill {
  width: 0%;
  animation: ud-progress-fill 2.2s ease-out forwards;
}