/* Notebook Security - CSS Protection Styles */

/* --- BẢO MẬT CẤP ĐỘ CSS (QUAN TRỌNG CHO MOBILE) --- */
body.notebook-security-active {
    /* 1. Chống bôi đen cơ bản */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;

    /* 2. CHẶN MENU KHI ẤN GIỮ TRÊN IPHONE (iOS Safari) */
    -webkit-touch-callout: none !important;
    
    /* 3. Chặn hành động kéo thả ảnh ra ngoài */
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
}

body.notebook-security-active * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* --- SECURITY OVERLAY (Màn hình đen) --- */
#notebook-security-alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(0, 0, 0, 0.204), rgba(0, 0, 0, 0.165));
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(1px);
}

.notebook-security-alert__content {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 24px;
    padding: 32px;
    max-width: 420px;
    text-align: center;
    color: #0f172a;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(6px);
}

.notebook-security-alert__badge {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fda4af, #fb7185);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 12px 30px rgba(251, 113, 133, 0.3);
}

#notebook-security-alert h2 {
    color: #0f172a;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

#notebook-security-alert p {
    margin-bottom: 20px;
    color: #475569;
}

.notebook-security-alert__note {
    display: block;
    margin-bottom: 24px;
    color: #94a3b8;
    font-size: 0.92rem;
}

.notebook-security-btn-unlock {
    padding: 12px 30px;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    margin-top: 20px;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.3);
}

.notebook-security-btn-unlock:hover {
    background: linear-gradient(135deg, #fb923c, #fdba74);
}

/* Blur Effect */
body.notebook-security-blur-active > *:not(#notebook-security-alert) {
    filter: blur(8px) grayscale(25%);
    transition: filter 0.05s;
}

@media (max-width: 768px) {
    body.notebook-security-blur-active > *:not(#notebook-security-alert) {
        filter: blur(12px) brightness(0.95);
        opacity: 0.55;
    }
    
    body.notebook-security-active.mobile-protected::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        z-index: 99998;
        opacity: 0.9;
    }
}