/*
 * Shared page-transition loader — logo + spinning ring — used identically
 * across the public site, admin panel, and client dashboard. Each of those
 * has its own dark theme, so this reads two CSS custom properties
 * (--ot-loader-bg / --ot-loader-accent) that each theme file defines to
 * point at its own tokens, rather than hardcoding one palette here.
 */
.ot-page-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ot-loader-bg, #05070d);
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease-out, visibility 0ms linear 0ms;
}
.ot-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease-in, visibility 0ms linear 220ms;
}

.ot-page-loader-ring {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ot-page-loader-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.09);
    border-top-color: var(--ot-loader-accent, #2563EB);
    animation: ot-loader-spin 850ms linear infinite;
}
.ot-page-loader-ring img {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.6);
}

@keyframes ot-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Static ring, no implied motion — still a visible loading cue. */
    .ot-page-loader-ring::before { animation: none; border-color: var(--ot-loader-accent, #2563EB); opacity: 0.35; }
    .ot-page-loader { transition: none; }
    .ot-page-loader.is-hidden { transition: none; }
}