/* ============================
   СБРОС
============================ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; font-family:Arial,sans-serif; }

body {
    background-color: #d1d1ce;
    color:#333;
    overflow-x: hidden;
}

/* ============================
   КОНТЕЙНЕРЫ
============================ */
.wrapper {
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:20px;
}

main {
    width:100%;
    margin:0 auto;
}

/* ============================
   VIP-БЛОК
============================ */
.vip-info-box {
    background:#1a1a1a;
    border:1px solid #333;
    padding:20px;
    border-radius:10px;
    max-width:500px;
    margin:20px auto;
    color:#fff;
    text-align:center;
}

.vip-title {
    font-size:24px;
    margin-bottom:15px;
}

.vip-text {
    font-size:18px;
    line-height:1.5;
}

/* ============================
   КОНТЕНТ-БЛОК
============================ */
.content-block {
    max-width:700px;
    margin:20px auto;
    padding:20px;
    background:rgba(255,255,255,0.9);
    border-radius:10px;
    text-align:center;
    line-height:1.6;
}

/* ============================
   ИНФО-БЛОКИ
============================ */
.info, .info_2, .info_3 {
    padding:15px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    width:100%;
    max-width:800px;
    margin:20px auto;
    text-align:center;
}

.info { background:#5d5b5b; color:#fff; }
.info_2 { background:#0000008b; color:#fff; }
.info_3 { background:#fff; color:#000; }

/* ============================
   КАРТИНКА
============================ */
.image-block {
    max-width:700px;
    margin:20px auto;
    text-align:center;
}
.image-block img {
    width:100%;
    height:auto;
    border-radius:10px;
}

/* ============================
   КНОПКИ
============================ */
.buttons {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
}

.file {
    background:#fff;
    border:3px solid #0e8843;
    border-radius:8px;
    width:150px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
}

.file a {
    color:#000;
    text-decoration:none;
    font-weight:bold;
}

.file:hover {
    background:#FF00FF !important;
    border: 3px solid #0e8843 !important; /* зелёная рамка */
}
.file:hover a {
    color:#fff !important;
}

button.file {
    color:black;
    transition:0.2s;
}
button.file:hover {
    color:white;
}

/* ============================
   АДАПТИВ ДЛЯ ВСЕГО САЙТА
============================ */
@media (max-width:600px) {
    .content-block,
    .info,
    .info_2,
    .info_3,
    .vip-info-box {
        max-width:95%;
    }

    .file {
        width:130px;
        height:45px;
    }

    .vip-text {
        font-size:16px;
    }
}

/* ============================
   ПЛАВАЮЩЕЕ ОКНО (ОСНОВНОЕ)
============================ */
#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
    overflow: hidden;
}

/* АДАПТИВНОЕ ПЛАВАЮЩЕЕ ОКНО */
.floating-window {
    position: absolute;
    background: #111;
    padding: 20px;
    border-radius: 12px;
    text-align: center;

    width: 85vw;          /* адаптивная ширина */
    max-width: 360px;     /* для больших экранов */
    min-width: 240px;     /* для маленьких телефонов */

    color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.25);
    overflow: hidden;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .floating-window {
        padding: 15px;
        width: 90vw;
        max-width: 300px;
    }

    .floating-window h2 {
        font-size: 20px;
    }

    .floating-window input {
        font-size: 14px;
    }
}

/* ============================
   ЭЛЕМЕНТЫ ВНУТРИ ОКНА
============================ */
.floating-window input {
    width: 90%;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
}

.floating-window button {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: #4CAF50;
    color: #fff;
}

.error {
    color: #ff4444;
    margin-top: 10px;
}

/* ============================
   ПЛАВАЮЩАЯ КНОПКА ОПЛАТЫ
============================ */
.floating-pay-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background:#ff9900;
    color:#000;
    padding:15px 25px;
    border-radius:10px;
    font-weight:bold;
    text-decoration:none;
    border:2px solid #000;
    z-index:9998;
    transition:0.3s;
}

.floating-pay-btn:hover {
    background:#000;
    color:#fff;
}

/* ============================
   ТЕКСТЫ В ОКНЕ
============================ */
.access-title {
    margin-bottom: 5px;
    text-align: center;
    color: #CC33FF;
    font-size: 22px;
    font-weight: bold;
}

.access-subtitle {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.access-code {
    color:red;
    font-size:32px;
    font-weight:bold;
    text-align:center;
    margin:15px 0;
}

.denied-red {
    color: red;
}

.enter-lower {
    margin-top: 15px;
    text-align: center;
    font-size: 16px;
}


button.file.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.commingsoon {
    background: #FF00FF !important;       /* сиреневый фон */
    border: 3px solid #0e8843 !important; /* зелёная рамка */
    color: #fff !important;               /* белый текст */
    font-weight: bold !important;

    cursor: not-allowed !important;
    pointer-events: none !important;

    border-radius: 8px;
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}