/* Kinnoo loading feedback (store + admin). Used by js/kn-loading.js */
#kn-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--kn-primary, #cf4408);
    box-shadow: 0 0 10px rgba(207, 68, 8, .55);
    z-index: 2147483000; opacity: 0; pointer-events: none;
    transition: width .35s ease, opacity .25s ease;
}
#kn-progress.is-on { opacity: 1; }

/* Busy buttons/links: spinner after the label, no double clicks */
.kn-busy { pointer-events: none !important; opacity: .82; cursor: progress !important; }
button.kn-busy::after, a.kn-busy::after, .kn-busy-spin::after {
    content: ""; display: inline-block; flex: none;
    width: .95em; height: .95em; margin-left: .5em; vertical-align: -.14em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: kn-spin .7s linear infinite;
}

/* Small round icon buttons: swap the icon for the spinner */
.action-btn.kn-busy > i, .kn-icon-btn.kn-busy > i { display: none; }
.action-btn.kn-busy::after, .kn-icon-btn.kn-busy::after { margin-left: 0; }

/* Full-screen overlay for steps the customer must wait on (payment) */
.kn-overlay {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    padding: 1.5rem; text-align: center;
    background: rgba(255, 255, 255, .92);
    color: #111927; font-weight: 800; font-size: 1.05rem;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.kn-overlay.is-on { opacity: 1; visibility: visible; }
.kn-overlay small { display: block; font-weight: 500; font-size: .88rem; color: #4b5563; margin-top: .35rem; }
.kn-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid rgba(207, 68, 8, .18); border-top-color: var(--kn-primary, #cf4408);
    animation: kn-spin .8s linear infinite;
}

@keyframes kn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .kn-spinner, .kn-busy::after, .kn-busy-spin::after { animation-duration: 1.6s; }
    #kn-progress { transition: none; }
}
