/* === DEMO OVERLAY ROOT === */
.demo-overlay {
    position: fixed;
    inset: 0; /* shorthand voor top/left/right/bottom */

    pointer-events: none; /* site blijft klikbaar */
    z-index: 9999;
}

/* === BADGE LINKS BOVEN === */
.demo-badge {
    position: absolute;
    top: 20px;
    left: 20px;

    background: rgba(0, 0, 0, 0.75);
    color: #fff;

    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,0.15);
}

/* === ACTION PANEL RECHTS === */
.demo-actions {
    position: absolute;
    top: 20px;
    right: 20px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px;
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

    pointer-events: auto; /* knoppen klikbaar */
}

/* === BUTTONS === */
.demo-btn {
    padding: 10px 14px;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    text-decoration: none;

    background: rgba(255, 122, 0, 0.9);
    color: white;

    transition: all 0.2s ease;
}

/* Hover effect */
.demo-btn:hover {
    background: rgba(255, 122, 0, 1);
    transform: translateY(-1px);
}



/* Secondary knop */
.demo-btn.secondary {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Secondary hover */
.demo-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* === OPTIONAL: subtle entry animation === */
.demo-actions,
.demo-badge {
    animation: demoFadeIn 0.25s ease;
}

@keyframes demoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}