/* Easy Elements Preloader */

.easyel-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--easyel-preloader-bg, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity var(--easyel-preloader-fadeout, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
                visibility var(--easyel-preloader-fadeout, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    visibility: visible;
}

.easyel-preloader.easyel-preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.easyel-preloader-logo {
    margin-bottom: 20px;
    text-align: center;
}

.easyel-preloader-logo img {
    max-width: 180px;
    max-height: 80px;
    height: auto;
    width: auto;
}

.easyel-preloader-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Style 1: Circle ----- */
.easyel-preloader-style-circle .easyel-preloader-circle {
    width: var(--easyel-preloader-size, 60px);
    height: var(--easyel-preloader-size, 60px);
    border: 3px solid var(--easyel-preloader-secondary, #e0e0e0);
    border-top-color: var(--easyel-preloader-color, #5933ff);
    border-right-color: var(--easyel-preloader-color, #5933ff);
    border-radius: 50%;
    animation: easyel-preloader-rotate var(--easyel-preloader-speed, 1s) cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
    will-change: transform;
}

@keyframes easyel-preloader-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- Style 1b: Dotted Circle (lds-roller pattern: 8 dots orbiting) ----- */
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle {
    display: inline-block;
    position: relative;
    width: var(--easyel-preloader-size, 80px);
    height: var(--easyel-preloader-size, 80px);
}

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: easyel-preloader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation-duration: var(--easyel-preloader-speed, 1.2s);
}

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div::after {
    content: " ";
    display: block;
    position: absolute;
    width: calc(var(--easyel-preloader-size, 80px) * 0.075);
    height: calc(var(--easyel-preloader-size, 80px) * 0.075);
    border-radius: 50%;
    background: var(--easyel-preloader-color, #5933ff);
    margin: calc(var(--easyel-preloader-size, 80px) * -0.025) 0 0
            calc(var(--easyel-preloader-size, 80px) * -0.025);
}

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(1) { animation-delay: -0.036s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(1)::after { top: 78.75%; left: 78.75%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(2) { animation-delay: -0.072s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(2)::after { top: 85%; left: 70%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(3) { animation-delay: -0.108s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(3)::after { top: 88.75%; left: 60%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(4) { animation-delay: -0.144s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(4)::after { top: 90%; left: 50%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(5) { animation-delay: -0.18s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(5)::after { top: 88.75%; left: 40%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(6) { animation-delay: -0.216s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(6)::after { top: 85%; left: 30%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(7) { animation-delay: -0.252s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(7)::after { top: 78.75%; left: 21.25%; }

.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(8) { animation-delay: -0.288s; }
.easyel-preloader-style-dotted_circle .easyel-preloader-dotted-circle div:nth-child(8)::after { top: 70%; left: 15%; }

@keyframes easyel-preloader-roller {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- Style 2: Dots ----- */
.easyel-preloader-style-dots .easyel-preloader-spinner {
    gap: calc(var(--easyel-preloader-size, 60px) * 0.2);
}

.easyel-preloader-style-dots .easyel-preloader-dot {
    width: calc(var(--easyel-preloader-size, 60px) * 0.25);
    height: calc(var(--easyel-preloader-size, 60px) * 0.25);
    background: var(--easyel-preloader-color, #5933ff);
    border-radius: 50%;
    display: inline-block;
    animation: easyel-preloader-bounce var(--easyel-preloader-speed, 1s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite both;
    will-change: transform, opacity;
}

.easyel-preloader-style-dots .easyel-preloader-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.easyel-preloader-style-dots .easyel-preloader-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes easyel-preloader-bounce {
    0%   { transform: scale(0.3); opacity: 0.4; }
    50%  { transform: scale(1);   opacity: 1;   }
    100% { transform: scale(0.3); opacity: 0.4; }
}

/* ----- Style 3: Bars ----- */
.easyel-preloader-style-bars .easyel-preloader-spinner {
    gap: calc(var(--easyel-preloader-size, 60px) * 0.1);
    height: var(--easyel-preloader-size, 60px);
    align-items: center;
}

.easyel-preloader-style-bars .easyel-preloader-bar {
    display: inline-block;
    width: calc(var(--easyel-preloader-size, 60px) * 0.12);
    height: 100%;
    background: var(--easyel-preloader-color, #5933ff);
    border-radius: 4px;
    transform-origin: center;
    animation: easyel-preloader-bars var(--easyel-preloader-speed, 1s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: transform;
}

.easyel-preloader-style-bars .easyel-preloader-bar:nth-child(1) {
    animation-delay: -1.1s;
}
.easyel-preloader-style-bars .easyel-preloader-bar:nth-child(2) {
    animation-delay: -1s;
}
.easyel-preloader-style-bars .easyel-preloader-bar:nth-child(3) {
    animation-delay: -0.9s;
}
.easyel-preloader-style-bars .easyel-preloader-bar:nth-child(4) {
    animation-delay: -0.8s;
}

@keyframes easyel-preloader-bars {
    0%   { transform: scaleY(0.35); opacity: 0.6; }
    50%  { transform: scaleY(1);    opacity: 1;   }
    100% { transform: scaleY(0.35); opacity: 0.6; }
}

/* ----- Style 4: Pulse (double pulse for premium feel) ----- */
.easyel-preloader-style-pulse .easyel-preloader-spinner {
    position: relative;
    width: var(--easyel-preloader-size, 60px);
    height: var(--easyel-preloader-size, 60px);
}

.easyel-preloader-style-pulse .easyel-preloader-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--easyel-preloader-color, #5933ff);
    border-radius: 50%;
    animation: easyel-preloader-pulse var(--easyel-preloader-speed, 1s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity;
}

.easyel-preloader-style-pulse .easyel-preloader-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--easyel-preloader-color, #5933ff);
    border-radius: 50%;
    animation: easyel-preloader-pulse var(--easyel-preloader-speed, 1s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: calc(var(--easyel-preloader-speed, 1s) * -0.5);
    will-change: transform, opacity;
}

@keyframes easyel-preloader-pulse {
    0%   { transform: scale(0);   opacity: 1;   }
    100% { transform: scale(1.1); opacity: 0;   }
}

/* ----- Style 5: Custom Logo (Circle Spinner border + logo centered, upright) ----- */
.easyel-preloader-style-custom_logo .easyel-preloader-spinner {
    position: relative;
    width: var(--easyel-preloader-size, 60px);
    height: var(--easyel-preloader-size, 60px);
    display: inline-block;
}

.easyel-preloader-style-custom_logo .easyel-preloader-logo-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--easyel-preloader-secondary, #e0e0e0);
    border-top-color: var(--easyel-preloader-color, #5933ff);
    border-right-color: var(--easyel-preloader-color, #5933ff);
    border-radius: 50%;
    animation: easyel-preloader-rotate var(--easyel-preloader-speed, 1s) cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
    box-sizing: border-box;
    will-change: transform;
}

.easyel-preloader-style-custom_logo .easyel-preloader-logo-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}