/* Общие настройки */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    color: white; 
    padding: 20px; 
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; /* Улучшение шрифтов на Mac/iOS */
}

/* Эффект пыли/частиц */
.dust-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
}

.dust { 
    position: absolute; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%; 
    animation: fly linear infinite; 
}

@keyframes fly { 
    from { transform: translateY(110vh); } 
    to { transform: translateY(-10vh); } 
}

/* Контейнер-обертка */
.wrapper { 
    width: 100%; 
    max-width: 400px; 
    z-index: 10; 
    padding-top: 80px; /* Увеличено, чтобы лого не перекрывало верх */
}

/* Основное окно (модалка) */
.modal {
    background: rgba(30, 30, 30, 0.95); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* Для корректной работы на iPhone */
    width: 100%; 
    padding: 85px 25px 30px 25px; 
    border-radius: 40px;
    position: relative; 
    border: 1px solid rgba(214, 90, 90, 0.15); /* Цветная рамка для сочности */
    margin-bottom: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    will-change: transform;
}

/* Логотип */
.logo-badge {
    position: absolute; 
    top: -110px; 
    left: 50%; 
    transform: translateX(-50%);
    z-index: 25;
    pointer-events: none;
    display: flex;
    justify-content: center;
    width: 100%;
}

.logo-badge img { 
    width: 200px; /* Немного уменьшим для скорости */
    height: auto;
    max-width: 90vw;
    display: block;
    
    /* Ускорение рендеринга */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    
    /* Если изображение всё равно лагает, можно временно отключить тень 
       для теста, удалив строку ниже. Если без неё всё ок — значит файл слишком большой */
    filter: drop-shadow(0 0 15px rgba(214, 90, 90, 0.6));
}

/* Поля ввода */
.input-group { 
    position: relative; 
    margin-bottom: 12px; 
}

.input-group i { 
    position: absolute; 
    left: 18px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #d65a5a; 
    font-size: 14px; 
}

input {
    width: 100%; 
    background: #111; 
    border: 1px solid rgba(255,255,255,0.05);
    padding: 14px 14px 14px 45px; 
    border-radius: 12px; 
    color: white; 
    outline: none; 
    transition: 0.3s;
    font-size: 16px; /* Предотвращает зум на iPhone при фокусе */
}

input:focus { 
    border-color: #d65a5a; 
    background: #151515; 
    box-shadow: 0 0 10px rgba(214, 90, 90, 0.1);
}

/* Убираем стрелочки выбора у поля чисел */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

/* Отображение цены */
.price-display { 
    margin: 15px 0; 
    text-align: center; 
    color: #888; 
    font-size: 13px; 
}

#rub-amount { 
    color: #d65a5a; 
    font-weight: bold; 
    font-size: 18px; 
}

/* Кнопка оплаты */
.pay-button {
    width: 100%; 
    padding: 16px; 
    border: none; 
    border-radius: 15px;
    background: linear-gradient(135deg, #d65a5a, #a33b3b);
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-tap-highlight-color: transparent; /* Убирает синюю вспышку при нажатии на телефоне */
}

.pay-button:active { 
    transform: scale(0.98); 
}

@media (hover: hover) {
    .pay-button:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 8px 20px rgba(214, 90, 90, 0.4); 
    }
}

/* Контейнер последних покупок */
.purchases-container {
    width: 100%; 
    background: rgba(25, 25, 25, 0.85); 
    border-radius: 35px;
    padding: 35px 15px 20px 15px; 
    position: relative; 
    border: 1px solid rgba(255,255,255,0.04);
}

.purchases-header {
    position: absolute; 
    top: -16px; 
    left: 50%; 
    transform: translateX(-50%);
    background: linear-gradient(180deg, #d65a5a, #9e3f3f);
    padding: 7px 25px; 
    border-radius: 50px; 
    font-size: 11px; 
    font-weight: bold; 
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.purchases-list { 
    display: flex; 
    justify-content: space-between; 
    gap: 8px; 
}

/* Карточка покупки */
.purchase-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 32%; 
    text-align: center; 
}

.purchase-card img { 
    width: 48px; 
    height: 48px; 
    border-radius: 12px; 
    margin-bottom: 8px; 
    border: 1px solid rgba(255,255,255,0.1); 
    object-fit: cover;
}

.p-name { 
    font-size: 11px; 
    font-weight: bold; 
    color: #fff; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 100%; 
}

.p-rank { 
    font-size: 9px; 
    color: #ff9f9f; 
    text-transform: uppercase; 
    background: rgba(214, 90, 90, 0.15); 
    padding: 3px 6px; 
    border-radius: 6px; 
    margin-top: 4px;
    font-weight: bold;
    border: 1px solid rgba(214, 90, 90, 0.2);
}

/* Адаптивность для маленьких телефонов */
@media (max-width: 360px) {
    .p-name { font-size: 9px; }
    .p-rank { font-size: 8px; }
    .logo-badge { top: -90px; }
}