/*
|--------------------------------------------------------------------------
| KOZESPAY — LOADER GLOBAL
|--------------------------------------------------------------------------
|
| Ce fichier remplace assets/css/nimbapay-loader.css.
| Les couleurs existantes bleu nuit et or sont conservées.
|--------------------------------------------------------------------------
*/

.kp-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at top,
            rgba(245, 185, 66, .13),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );
    transition:
        opacity .38s ease,
        visibility .38s ease;
}

.kp-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.kp-scene {
    width: min(900px, 94vw);
    text-align: center;
    perspective: 900px;
}

.kp-logo-text {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0;
    color: #071526;
    font-size: clamp(58px, 11vw, 148px);
    font-weight: 950;
    letter-spacing: -.055em;
}

.kp-logo-text > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px) scale(.9);
    animation: kpWrite .42s forwards;
}

.kp-logo-text > span:nth-child(1) {
    animation-delay: .08s;
}

.kp-logo-text > span:nth-child(2) {
    animation-delay: .26s;
}

.kp-logo-text > span:nth-child(3) {
    animation-delay: .44s;
}

.kp-logo-text > span:nth-child(4) {
    animation-delay: .62s;
}

.kp-logo-text > span:nth-child(5) {
    animation-delay: .80s;
}

.kp-logo-text > span:nth-child(6) {
    animation-delay: .98s;
}

.kp-logo-text > span:nth-child(7) {
    animation-delay: 1.16s;
}

.kp-logo-text > span:nth-child(8) {
    animation-delay: 1.34s;
}

.kp-gold,
.kp-p-letter {
    color: #f5b942;
}

.kp-p-box {
    position: relative;
    width: .72em;
    transform-style: preserve-3d;
    animation: kpPremiumPulse 4.8s ease-in-out infinite;
    animation-delay: 1.85s;
}

.kp-p-letter {
    opacity: 1 !important;
}

.kp-ticket {
    position: absolute;
    width: .38em;
    height: .24em;
    left: .16em;
    top: .30em;
    z-index: 20;
    opacity: 0;
    border-radius: .05em;
    transform-style: preserve-3d;
    background:
        radial-gradient(
            circle at 0 50%,
            #ffffff 0 .035em,
            transparent .04em
        ),
        radial-gradient(
            circle at 100% 50%,
            #ffffff 0 .035em,
            transparent .04em
        ),
        linear-gradient(
            90deg,
            transparent 47%,
            rgba(255, 255, 255, .95) 49%,
            rgba(255, 255, 255, .95) 51%,
            transparent 53%
        ),
        linear-gradient(
            135deg,
            #ffd36b 0%,
            #f5b942 46%,
            #e7920b 100%
        );
    box-shadow: 0 .16em .28em rgba(0, 0, 0, .25);
    animation:
        kpTicketPremium
        4.8s
        cubic-bezier(.22, 1, .36, 1)
        infinite;
    animation-delay: 1.85s;
}

.kp-ticket::before {
    content: "";
    position: absolute;
    inset: .05em .07em;
    border: .012em solid rgba(255, 255, 255, .75);
    border-radius: .035em;
}

.kp-ticket::after {
    content: "";
    position: absolute;
    width: 1.4em;
    height: .045em;
    left: -.95em;
    top: 50%;
    opacity: 0;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245, 185, 66, .68),
            transparent
        );
    transform: translateY(-50%);
    animation: kpTicketTrail 4.8s ease-in-out infinite;
    animation-delay: 1.85s;
}

.kp-loader-box {
    position: relative;
    width: min(520px, 88vw);
    margin: 24px auto 0;
    padding: 20px 22px 22px;
    overflow: hidden;
    opacity: 0;
    border: 1px solid rgba(245, 185, 66, .28);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(255, 248, 232, .95)
        );
    box-shadow:
        0 24px 60px rgba(7, 21, 38, .17),
        0 10px 22px rgba(245, 185, 66, .12),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    transform: translateY(18px) scale(.96);
    animation: kpLoaderAppear .7s forwards;
    animation-delay: 1.75s;
}

.kp-loader-box::before {
    content: "";
    position: absolute;
    width: 175px;
    height: 175px;
    top: -90px;
    right: -70px;
    border-radius: 50%;
    background: rgba(245, 185, 66, .18);
}

.kp-loader-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, .38) 35%,
            transparent 62%
        );
    transform: translateX(-120%);
    animation: kpCardShine 3.8s ease-in-out infinite;
}

.kp-loader-badge {
    position: relative;
    z-index: 2;
    width: fit-content;
    padding: 7px 13px;
    border: 1px solid rgba(245, 185, 66, .28);
    border-radius: 999px;
    background: rgba(245, 185, 66, .14);
    color: #071526;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.5px;
}

.kp-loader-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 13px;
    color: #071526;
    font-size: clamp(13px, 2vw, 17px);
    font-weight: 900;
}

.kp-loader-top span {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
}

.kp-loader-top span::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f5b942;
    animation: kpConnectionDot 1.35s infinite;
}

.kp-loader-top strong {
    min-width: 60px;
    padding: 8px 10px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #071526,
            #102a4c
        );
    box-shadow: 0 10px 22px rgba(7, 21, 38, .22);
    color: #ffffff;
    text-align: center;
}

.kp-loader-track {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(7, 21, 38, .10);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, .13),
        0 10px 24px rgba(7, 21, 38, .09);
}

.kp-loader-progress {
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #071526 0%,
            #102a4c 46%,
            #f5b942 100%
        );
    box-shadow:
        0 0 16px rgba(245, 185, 66, .5),
        0 0 26px rgba(7, 21, 38, .22);
    transition: width .12s ease;
}

.kp-loader-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, .62) 45%,
            transparent 70%
        );
    transform: translateX(-100%);
    animation: kpLoaderShine 1.2s linear infinite;
}

.kp-loader-info {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    color: rgba(7, 21, 38, .66);
    font-size: 12px;
    font-weight: 750;
    text-align: left;
}

@keyframes kpWrite {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kpTicketPremium {
    0%,
    8% {
        opacity: 0;
        transform:
            translate3d(0, 0, 0)
            rotateZ(0)
            rotateY(0)
            scale(.55);
    }

    13% {
        opacity: 1;
        transform:
            translate3d(.02em, -.05em, .15em)
            rotateZ(-6deg)
            rotateY(25deg)
            scale(.85);
    }

    25% {
        opacity: 1;
        transform:
            translate3d(.10em, -.32em, .35em)
            rotateZ(-18deg)
            rotateY(120deg)
            scale(1.08);
    }

    42% {
        opacity: 1;
        transform:
            translate3d(.78em, -.86em, .20em)
            rotateZ(18deg)
            rotateY(260deg)
            scale(1);
    }

    62% {
        opacity: 1;
        transform:
            translate3d(1.65em, -1.15em, 0)
            rotateZ(12deg)
            rotateY(430deg)
            scale(.82);
    }

    78% {
        opacity: .9;
        transform:
            translate3d(1.95em, -.45em, 0)
            rotateZ(-10deg)
            rotateY(540deg)
            scale(.72);
    }

    92% {
        opacity: 0;
        transform:
            translate3d(.28em, .05em, 0)
            rotateZ(0)
            rotateY(720deg)
            scale(.48);
    }

    100% {
        opacity: 0;
        transform:
            translate3d(0, 0, 0)
            rotateZ(0)
            rotateY(0)
            scale(.55);
    }
}

@keyframes kpTicketTrail {
    0%,
    12%,
    92%,
    100% {
        opacity: 0;
        transform: translateY(-50%) scaleX(.2);
    }

    30%,
    65% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }

    80% {
        opacity: .45;
        transform: translateY(-50%) scaleX(.65);
    }
}

@keyframes kpPremiumPulse {
    0%,
    100% {
        transform: scale(1);
        filter:
            drop-shadow(
                0 0 0 rgba(245, 185, 66, 0)
            );
    }

    13% {
        transform: scale(1.055);
        filter:
            drop-shadow(
                0 0 .08em rgba(245, 185, 66, .45)
            );
    }

    25% {
        transform: scale(1);
        filter:
            drop-shadow(
                0 0 0 rgba(245, 185, 66, 0)
            );
    }
}

@keyframes kpLoaderAppear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kpLoaderShine {
    to {
        transform: translateX(100%);
    }
}

@keyframes kpCardShine {
    0%,
    45% {
        transform: translateX(-120%);
    }

    70%,
    100% {
        transform: translateX(120%);
    }
}

@keyframes kpConnectionDot {
    0% {
        box-shadow:
            0 0 0 0
            rgba(245, 185, 66, .55);
        transform: scale(1);
    }

    70% {
        box-shadow:
            0 0 0 9px
            rgba(245, 185, 66, 0);
        transform: scale(1.08);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(245, 185, 66, 0);
        transform: scale(1);
    }
}

@media (max-width: 520px) {
    .kp-loader {
        padding: 14px;
    }

    .kp-loader-box {
        width: min(440px, 91vw);
        margin-top: 20px;
        padding: 18px 17px 20px;
        border-radius: 22px;
    }

    .kp-loader-top {
        gap: 9px;
        font-size: 12px;
    }

    .kp-loader-top strong {
        min-width: 52px;
        padding: 7px;
    }

    .kp-loader-info {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kp-loader {
        display: none !important;
    }
}