/* ==========================================================
   EASYDONATE CUSTOM CSS — ТЁМНО-ОГНЕННЫЙ СТИЛЬ (MAGMA / EMBER)
   Полная адаптация под дизайн clrdt.easydonate.ru
   ========================================================== */

:root {
    --bg-color: #080605;
    --card-bg: rgba(20, 14, 11, 0.85);
    --card-border: rgba(255, 106, 0, 0.18);
    --card-border-hover: #ff6a00;
    --accent-orange: #ff6a00;
    --accent-gradient: linear-gradient(135deg, #ff6a00 0%, #ff3c00 100%);
    --accent-hover: #e05d00;
    --text-white: #ffffff;
    --text-gray: #9c9189;
    --input-bg: #140e0b;
    --glow-orange: rgba(255, 106, 0, 0.35);
}

/* 1. Глобальный фон сайта с неоновым магма-свечением */
html, body {
    background-color: var(--bg-color) !important;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 106, 0, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255, 60, 0, 0.1) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
    color: var(--text-white) !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* 2. Шапка сайта (Навбар) */
header, .navbar, .header, nav {
    background: rgba(12, 8, 6, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 14px !important;
    margin-top: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

/* Ссылки в меню навигации */
.nav-link, .navbar a, .nav-item a {
    color: var(--text-gray) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
}

.nav-link:hover, .nav-link.active, .navbar a:hover {
    color: #fff !important;
    text-shadow: 0 0 12px var(--glow-orange) !important;
}

/* 3. Главный баннер (Hero / Banner clrdt) */
.banner, .hero, .banner-box, [class*="banner"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.6) !important;
}

/* Заголовок баннера (clrdt) */
.banner h1, .banner-title, .hero h1 {
    font-size: 46px !important;
    font-weight: 900 !important;
    color: var(--text-white) !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 25px rgba(255, 106, 0, 0.4) !important;
}

/* Бейджи онлайна и версий */
.badge, [class*="badge"], .online-count {
    background: rgba(255, 106, 0, 0.12) !important;
    border: 1px solid rgba(255, 106, 0, 0.3) !important;
    color: var(--accent-orange) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
}

/* 4. Блок «Наши серверы» и карточки серверов */
.servers-container, .server-card, .server-item, [class*="server"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.server-card:hover, .server-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: 0 12px 35px rgba(255, 106, 0, 0.2) !important;
}

/* Название сервера (argva) */
.server-name, .server-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #fff !important;
}

/* Кнопка с IP (argva.ru:19139) */
.server-ip, [class*="ip"], .copy-ip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.server-ip:hover, .copy-ip:hover {
    background: rgba(255, 106, 0, 0.15) !important;
    border-color: var(--accent-orange) !important;
    color: var(--accent-orange) !important;
}

/* Полоса онлайна (Progress Bar) */
.progress, [class*="progress"] {
    background: rgba(255, 255, 255, 0.05) !important;
    height: 8px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.progress-bar, [class*="progress-bar"], [class*="fill"] {
    background: var(--accent-gradient) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.6) !important;
}

/* 5. Карточки товаров и доната */
.product-card, .shop-item, .card, [class*="product"] {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    transition: all 0.25s ease !important;
}

.product-card:hover, .shop-item:hover, .card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--accent-orange) !important;
    box-shadow: 0 10px 30px rgba(255, 106, 0, 0.2) !important;
}

/* Название привилегии */
.product-title, .item-title, .card-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--accent-orange) !important;
}

/* Цена */
.product-price, .price, .item-price {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 8px 0 !important;
}

/* 6. Поля ввода (Никнейм, промокод) */
input[type="text"], input[type="email"], .form-control, select {
    background: var(--input-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

input:focus, select:focus, .form-control:focus {
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.2) !important;
}

/* 7. Все кнопки (Купить, Перейти, Оплатить) */
.btn-primary, .btn-buy, .button, button[type="submit"], [class*="btn-main"] {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 26px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.35) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-primary:hover, .btn-buy:hover, button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 26px rgba(255, 106, 0, 0.55) !important;
    filter: brightness(1.08) !important;
}

/* 8. Модальные окна покупки */
.modal-content, [class*="modal-dialog"] {
    background: #0f0a08 !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
}

/* 9. Подвал сайта (Footer) */
footer, .footer {
    background: #050302 !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-gray) !important;
    margin-top: 60px !important;
    padding: 35px 0 !important;
}

footer a, .footer a {
    color: var(--text-gray) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

footer a:hover, .footer a:hover {
    color: var(--accent-orange) !important;
}