/* ============================================================
   Zestio — Loader (herbruikbaar laadscherm)
   Overlay met het "Zestio aan het werk"-orb. Hergebruikt de ob-*
   animaties uit flow.css; laad flow.css of zorg dat die keyframes
   beschikbaar zijn. Tokens uit de :root van index.html.
   ============================================================ */

.zloader-overlay {
    position: fixed;
    inset: 0;
    /* boven de app-content, onder de auth-modals (overlay 500/modal 600) */
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 58px 32px 30px;
    text-align: center;
    font-family: 'Poppins', system-ui, sans-serif;
}
.zloader-overlay.hidden { display: none; }

.zloader-kicker {
    position: absolute;
    top: 62px; left: 0; right: 0;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent, #e8401a);
}

.zloader-orb { position: relative; width: 132px; height: 132px; margin-bottom: 26px; }
.zloader-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(232, 64, 26, 0.35);
}
.zloader-spin {
    position: absolute; inset: 8px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(232, 64, 26, 0.15), #e8401a, rgba(245, 166, 35, 0.6), transparent);
}
.zloader-core {
    position: absolute; inset: 16px; border-radius: 50%;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 12px 30px -10px rgba(232, 64, 26, 0.3);
    display: flex; align-items: center; justify-content: center;
}

.zloader-title {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary, #1a1a1a); letter-spacing: -0.01em;
}
.zloader-sub {
    font-size: 13.5px; color: var(--text-secondary, #555);
    margin-top: 8px; max-width: 250px; line-height: 1.5;
}

.zloader-bar {
    width: 150px; height: 4px; border-radius: 4px;
    background: var(--bg-elevated, #f0ebe2); overflow: hidden; margin-top: 18px;
}
.zloader-bar-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(135deg, #e8401a, #f5a623);
}

.zloader-chips {
    display: flex; flex-wrap: wrap; gap: 7px;
    justify-content: center; margin-top: 20px;
    max-width: 280px; min-height: 30px;
}
.zloader-chip {
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(232, 64, 26, 0.08);
    border: 1px solid rgba(232, 64, 26, 0.2);
    color: #c63a18;
    display: inline-flex; align-items: center; gap: 5px;
    opacity: 0.55; transition: opacity 0.3s ease;
}
.zloader-chip.done { opacity: 1; }
.zloader-chip.done::after {
    content: '✓'; font-size: 10px; font-weight: 700;
}