/*
 * Styles for Sky Law Web Loader
 * Archivo: inc/loader.css
 */

/* Contenedor principal del loader para posicionamiento y fondo */
.skylaw-loader-wrapper {
    position: fixed; /* Fija el loader en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #353535; /* CAMBIO AQUÍ: Fondo oscuro para mayor contraste */
    display: flex;
    justify-content: center; /* Centra horizontalmente el loader */
    align-items: center; /* Centra verticalmente el loader */
    z-index: 99999; /* Asegura que esté por encima de todo */
    transition: opacity 0.7s ease-out, visibility 0.7s ease-out; /* Transición suave al ocultarse */
    opacity: 1;
    visibility: visible;
}

/* Clase para ocultar el loader */
.skylaw-loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}

/* From Uiverse.io by mahiatlinux (Estilos originales encapsulados) */
.skylaw-loader-wrapper .loader {
    width: 10em;
    height: 3em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.skylaw-loader-wrapper .line {
    width: 1em;
    height: 1em;
    position: relative;
    background-color: #000000; /* Black bars */
    outline: 3px solid #ffffff; /* Thick white outline */
    border-radius: 1em;
    animation-name: skylaw-loader-animation-a; /* Prefijo para evitar conflictos */
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Aplicar el retraso de animación a las líneas específicas */
.skylaw-loader-wrapper .l1 {
    animation-delay: 0.4s;
}

.skylaw-loader-wrapper .l2 {
    animation-delay: 0.8s;
}

.skylaw-loader-wrapper .l3 {
    animation-delay: 1.2s;
}

.skylaw-loader-wrapper .l4 {
    animation-delay: 1.6s;
}

.skylaw-loader-wrapper .l5 {
    animation-delay: 2s;
}

/* Keyframes con prefijo para evitar conflictos */
@keyframes skylaw-loader-animation-a {
    0% {
        height: 1em;
    }
    50% {
        height: 3em;
        transform: translateY(-30%);
    }
    100% {
        height: 1em;
    }
}