/* === lock.css — Стили PRO-окна === */

/* Фон-затемнение */
.modal-overlay {
    position: fixed; inset: 0; 
    background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(8px);
    display: none; /* Скрыто по умолчанию */
    align-items: center; justify-content: center; 
    z-index: 9999; /* Поверх всего */
    animation: fadeInLock 0.3s ease;
}

@keyframes fadeInLock { from { opacity: 0; } to { opacity: 1; } }

/* Само окно */
.modal-pro {
    background: #16161a; 
    width: 90%; max-width: 400px;
    padding: 30px; border-radius: 24px;
    border: 1px solid rgba(122, 77, 245, 0.3);
    box-shadow: 0 0 50px rgba(122, 77, 245, 0.15);
    text-align: center; 
    position: relative; 
    overflow: hidden;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Декор: фиолетовое свечение сверху */
.modal-pro::before {
    content: ''; position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 100px; background: #7a4df5; 
    filter: blur(60px); opacity: 0.4; pointer-events: none;
}

.modal-icon { font-size: 40px; margin-bottom: 15px; display: block; }

.modal-pro h3 { 
    margin: 0 0 10px; font-size: 22px; color: #fff; font-weight: 800; 
}

.modal-pro p { 
    color: #aaa; font-size: 14px; line-height: 1.6; margin-bottom: 25px; 
}

/* Кнопка действия (Купить) */
.btn-modal-action {
    width: 100%; padding: 14px; border-radius: 12px; font-weight: 700;
    background: linear-gradient(135deg, #7a4df5, #38e8c5); 
    color: #000; border: none; cursor: pointer;
    font-size: 15px; margin-bottom: 10px; transition: 0.2s;
}
.btn-modal-action:hover { 
    transform: scale(1.02); 
    box-shadow: 0 5px 20px rgba(122, 77, 245, 0.4); 
}

/* Кнопка закрыть */
.btn-modal-close {
    background: transparent; border: none; 
    color: #666; font-size: 13px; cursor: pointer; 
    text-decoration: underline; transition: 0.2s;
}
.btn-modal-close:hover { color: #fff; }

/* Стиль для заблокированной кнопки (вешается на элементы страницы) */
.btn-locked {
    background: linear-gradient(135deg, rgba(255, 180, 0, 0.1), rgba(0,0,0,0)) !important;
    border: 1px solid rgba(255, 180, 0, 0.3) !important;
    color: #ffda6b !important;
    position: relative;
    padding-right: 34px !important; /* Место под замок */
}
.btn-locked::after {
    content: '🔒'; position: absolute; right: 12px; font-size: 12px; opacity: 0.8;
}
.btn-locked:hover {
    background: rgba(255, 180, 0, 0.15) !important;
    box-shadow: 0 0 20px rgba(255, 180, 0, 0.15);
    border-color: #ffda6b !important;
}