/* CPV4 Preloader Styles */
#cpv4-preloader.cpv4-preloader{
    position: fixed;
    inset: 0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--cpv4-bg, #ffffff);
    z-index:999999;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
.cpv4-preloader.cpv4-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.cpv4-inner{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding: 20px;
    max-width:95%;
    box-sizing:border-box;
}

/* logo */
.cpv4-logo img{ max-height:90px; width:auto; display:block; }

/* default text */
.cpv4-text{ color: var(--cpv4-text-color,#222); font-weight:600; font-size:30px; }

/* Spinner */
.cpv4-spinner{
    width:72px; height:72px; border-radius:50%;
    border:10px solid rgba(0,0,0,0.08);
    border-top:10px solid var(--cpv4-spinner-color,#3498db);
    animation: cpv4-spin 1s linear infinite;
}
@keyframes cpv4-spin{100%{transform:rotate(360deg);}}

/* Dots */
.cpv4-dots{ display:flex; gap:8px; justify-content:center; }
.cpv4-dots span{ width:14px; height:14px; border-radius:50%; background:var(--cpv4-spinner-color,#3498db); animation: cpv4-bounce 1s infinite ease-in-out; opacity:0.85;}
.cpv4-dots span:nth-child(2){ animation-delay:0.12s; } .cpv4-dots span:nth-child(3){ animation-delay:0.24s; }
@keyframes cpv4-bounce{ 0%,100%{transform:translateY(0); opacity:0.4;} 50%{transform:translateY(-8px); opacity:1;}}

/* Bar */
.cpv4-bar{ width:180px; height:8px; background: rgba(0,0,0,0.06); border-radius:6px; overflow:hidden; }
.cpv4-bar div{ width:35%; height:100%; background:var(--cpv4-spinner-color,#3498db); transform:translateX(-120%); animation: cpv4-bar 1s infinite linear; }
@keyframes cpv4-bar{100%{transform:translateX(300%);}}

/* Letter Animation (your design) */
.cpv4-letter-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.cpv4-letter-spinner{
    width:50px; height:50px; border-radius:50%;
    border:6px solid rgba(0,0,0,0.08);
    border-top:6px solid var(--cpv4-spinner-color,#3498db);
    animation: cpv4-spin 1s linear infinite;
	font-size:30px;
}
.cpv4-txt-loading{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; font-weight:700; font-size:28px; color:var(--cpv4-text-color,#222); }
@media (max-width:768px){ .cpv4-txt-loading{ font-size:22px; } .cpv4-letter-spinner{ width:40px; height:40px; } }
@media (max-width:420px){ .cpv4-txt-loading{ font-size:18px; } .cpv4-letter-spinner{ width:34px; height:34px; } }

/* each letter animated with custom delay from inline style --delay */
.cpv4-letters{
    opacity:0; display:inline-block; transform:translateY(18px);
    animation: cpv4-letter var(--cpv4-speed,900ms) ease-in-out infinite;
    animation-delay: var(--delay, 0ms);
}
@keyframes cpv4-letter{
    0%{ opacity:0; transform:translateY(18px); }
    30%{ opacity:1; transform:translateY(0); }
    70%{ opacity:1; transform:translateY(0); }
    100%{ opacity:0; transform:translateY(-18px); }
}

/* Wave */
.cpv4-wave{ display:flex; gap:6px; align-items:flex-end; }
.cpv4-wave span{ width:6px; height:18px; background:var(--cpv4-spinner-color,#3498db); display:inline-block; animation: cpv4-wave 1s infinite linear; }
.cpv4-wave span:nth-child(1){ animation-delay:0s; } .cpv4-wave span:nth-child(2){ animation-delay:0.08s; }
.cpv4-wave span:nth-child(3){ animation-delay:0.16s; } .cpv4-wave span:nth-child(4){ animation-delay:0.24s; }
.cpv4-wave span:nth-child(5){ animation-delay:0.32s; }
@keyframes cpv4-wave{ 0%{height:10px;}50%{height:28px;}100%{height:10px;}}

/* Bounce */
.cpv4-bounce span{ width:14px; height:14px; border-radius:50%; background:var(--cpv4-spinner-color,#3498db); display:inline-block; animation: cpv4-bounce2 0.9s infinite; margin:0 6px;}
.cpv4-bounce span:nth-child(2){ animation-delay:0.12s; } .cpv4-bounce span:nth-child(3){ animation-delay:0.24s; }
@keyframes cpv4-bounce2{ 0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* Fade */
.cpv4-fade div{ width:40px; height:10px; background:var(--cpv4-spinner-color,#3498db); border-radius:6px; animation: cpv4-fade 1s infinite; }
@keyframes cpv4-fade{ 0%{opacity:0.2;}50%{opacity:1;}100%{opacity:0.2;} }

/* Accessibility reduce motion */
@media (prefers-reduced-motion: reduce){
    .cpv4-spinner, .cpv4-letter-spinner, .cpv4-dots span, .cpv4-bar div, .cpv4-wave span, .cpv4-bounce span, .cpv4-fade div {
        animation: none !important;
        opacity: .9;
    }
}