/* ═══════════════════════════════════════════════════════════════
   Tejorder Loader v1 — top progress bar + branded overlay
   Logic: static/js/tj-loader.js
   ═══════════════════════════════════════════════════════════════ */

/* ── Top progress bar ─────────────────────────────────────────── */
.tjl-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 2147483001; pointer-events: none;
    background: linear-gradient(90deg, #FF8A3D, #ED1A3B 45%, #FF4D6A);
    box-shadow: 0 0 10px rgba(237, 26, 59, .55);
    transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.tjl-bar.tjl-run {
    opacity: 1; transform: scaleX(.88);
    transition: transform 9s cubic-bezier(.08, .75, .15, 1), opacity .15s;
}
.tjl-bar.tjl-done {
    opacity: 0; transform: scaleX(1);
    transition: transform .22s ease-out, opacity .3s .18s;
}

/* ── Overlay ──────────────────────────────────────────────────── */
.tjl-overlay {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(247, 247, 248, .62);
    -webkit-backdrop-filter: blur(7px) saturate(150%);
    backdrop-filter: blur(7px) saturate(150%);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
    font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.tjl-overlay.tjl-on { opacity: 1; visibility: visible; transition: opacity .22s ease; }

.tjl-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 34px 22px; border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(20, 20, 30, .04),
                0 24px 60px -12px rgba(237, 26, 59, .22),
                0 12px 30px rgba(20, 20, 30, .08);
    transform: translateY(8px) scale(.97);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1.2);
}
.tjl-on .tjl-card { transform: none; }

/* Logo + ring */
.tjl-mark { position: relative; width: 84px; height: 84px; margin-bottom: 8px; }
.tjl-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: tjl-rot 1.6s linear infinite; }
.tjl-track { fill: none; stroke: #F3E2E5; stroke-width: 4; }
.tjl-arc {
    fill: none; stroke: url(#tjlGrad); stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 1 220; animation: tjl-dash 1.6s ease-in-out infinite;
}
.tjl-logo {
    position: absolute; inset: 13px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: inset 0 0 0 1px #F2F2F4, 0 6px 16px rgba(237, 26, 59, .18);
    animation: tjl-breathe 2.4s ease-in-out infinite;
}
.tjl-logo img { width: 62%; height: 62%; object-fit: contain; }
.tjl-logo span { font: 800 26px/1 'Poppins', sans-serif; color: #ED1A3B; }
.tjl-logo::after {
    content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-18deg); animation: tjl-shine 2.4s ease-in-out infinite;
}

.tjl-brand { font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #17171A; }
.tjl-msg { font-size: 12px; color: #6A6A72; min-height: 18px; transition: opacity .25s; }
.tjl-msg.tjl-fade { opacity: 0; }

html.tjl-busy { cursor: progress; }

@keyframes tjl-rot { to { transform: rotate(360deg); } }
@keyframes tjl-dash {
    0%   { stroke-dasharray: 1 220;   stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 140 220; stroke-dashoffset: -30; }
    100% { stroke-dasharray: 140 220; stroke-dashoffset: -219; }
}
@keyframes tjl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tjl-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

@media (max-width: 600px) {
    .tjl-card { padding: 20px 26px 18px; border-radius: 20px; }
    .tjl-mark { width: 72px; height: 72px; }
    .tjl-logo { inset: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .tjl-ring, .tjl-arc, .tjl-logo, .tjl-logo::after { animation: none; }
    .tjl-arc { stroke-dasharray: 90 220; }
    .tjl-bar.tjl-run { transition: none; }
}