/**
 * Animaciones y transiciones para address-express-component
 * Mejoras de UX para el componente de dirección de Express
 */

/* Transición suave para icon bar */
.address-icon-bar-row {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación de entrada para los botones del icon bar */
.address-icon-bar-btn {
    transition: all 0.2s ease-in-out;
}

.address-icon-bar-btn:hover {
    transform: scale(1.1);
}

/* Animación para el cambio de estado de botones */
.address-icon-bar-btn.active {
    animation: pulse-once 0.4s ease-in-out;
}

@keyframes pulse-once {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Transición para expansión de campos */
.custom-address-detail {
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

/* Fade in para snackbar */
.v-snackbar {
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Transición suave para aparición de icon bar cuando se selecciona país */
.address-icon-bar-row {
    opacity: 0;
    animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mejorar la transición de los campos de dirección cuando se expanden */
.address-from-row {
    transition: all 0.3s ease-in-out;
}

/* Animación para el botón de limpiar (broom) */
.address-icon-bar-btn .v-icon.mdi-broom {
    transition: transform 0.2s ease-in-out;
}

.address-icon-bar-btn:hover .v-icon.mdi-broom {
    transform: rotate(-15deg);
}

/* Animación para el botón de favorito (star) */
.address-icon-bar-btn .v-icon.mdi-star,
.address-icon-bar-btn .v-icon.mdi-star-outline {
    transition: all 0.2s ease-in-out;
}

.address-icon-bar-btn:hover .v-icon.mdi-star,
.address-icon-bar-btn:hover .v-icon.mdi-star-outline {
    transform: scale(1.2);
}

/* Animación para el ícono de ojo (AI fields) */
.address-icon-bar-btn .v-icon.mdi-eye,
.address-icon-bar-btn .v-icon.mdi-eye-off {
    transition: all 0.2s ease-in-out;
}

.address-icon-bar-btn:hover .v-icon.mdi-eye,
.address-icon-bar-btn:hover .v-icon.mdi-eye-off {
    transform: scale(1.15);
}

/* Transición para el checkbox de store */
.address-icon-bar-btn .v-icon.mdi-check {
    transition: all 0.2s ease-in-out;
}

.address-icon-bar-btn:hover .v-icon.mdi-check {
    transform: scale(1.1);
}

/* Mejorar la experiencia de carga del componente completo */
.address-component-wrapper {
    animation: componentFadeIn 0.5s ease-in-out;
}

@keyframes componentFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Transición suave cuando se oculta el loading */
.address-compoment-inner-wrapper {
    transition: opacity 0.3s ease-in-out;
}

.address-compoment-inner-wrapper.hide {
    opacity: 0;
}