/* =============================================
   AVIXTIME - RED BLOOD THEME FOR EASYDONATE
   Версия: 2026 | ПОМЕХИ + КРОВАВЫЙ КУРСОР
   ============================================= */

:root {
    --blood-red: #cc0000;
    --dark-blood: #4a0000;
    --fresh-blood: #ff1a1a;
    --blood-black: #0a0000;
    --crimson-glow: rgba(204, 0, 0, 0.6);
    --glass-bg: rgba(10, 0, 0, 0.7);
    --text-blood: #ffb3b3;
}

/* ========== КАСТОМНЫЙ КУРСОР ========== */

/* Обычный курсор — кровавый меч / лезвие */
html, body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><polygon points="2,2 28,14 14,18 18,28 12,28 8,20 2,22" fill="%23cc0000" stroke="%23ff4d4d" stroke-width="1"/><circle cx="6" cy="6" r="2" fill="%23ff0000"/></svg>') 4 4, auto !important;
}

/* Курсор при наведении на кнопки и ссылки — капля крови */
a, button, .btn, .btn-info, .product-card, .card, input[type="submit"], [role="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16,4 C12,4 9,8 9,13 C9,19 14,23 16,27 C18,23 23,19 23,13 C23,8 20,4 16,4 Z" fill="%23cc0000" stroke="%23ff6666" stroke-width="1"/><circle cx="16" cy="11" r="2" fill="%23ffffff" opacity="0.8"/></svg>') 16 8, pointer !important;
}

/* Курсор при вводе текста (поле никнейм, email) — кровавый шприц */
input, textarea, .form-control {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="12" y="4" width="8" height="20" rx="2" fill="%23cc0000" stroke="%23ff4d4d" stroke-width="1"/><circle cx="16" cy="26" r="3" fill="%23ff0000"/><line x1="20" y1="10" x2="26" y2="8" stroke="%23cc0000" stroke-width="2"/></svg>') 16 16, text !important;
}

/* Курсор при загрузке / ожидании — красный череп */
.waiting, .loading, [disabled] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23330000" stroke="%23cc0000" stroke-width="2"/><circle cx="11" cy="13" r="2" fill="%23ff4444"/><circle cx="21" cy="13" r="2" fill="%23ff4444"/><path d="M12 20 L20 20" stroke="%23cc0000" stroke-width="2"/></svg>') 16 16, wait !important;
}

/* ========== ГЛОБАЛЬНЫЙ ФОН ========== */
body {
    background: radial-gradient(circle at 20% 30%, #1a0000 0%, #030000 100%) !important;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif !important;
}

/* ========== ЭФФЕКТ КАПЕЛЬ КРОВИ ========== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 800" opacity="0.08"><path fill="%23cc0000" d="M200,50 C160,50 130,100 130,150 C130,220 180,260 200,300 C220,260 270,220 270,150 C270,100 240,50 200,50 Z M80,400 C50,400 30,440 30,490 C30,550 60,590 80,590 C100,590 130,550 130,490 C130,440 110,400 80,400 Z M320,450 C290,450 270,490 270,540 C270,600 300,640 320,640 C340,640 370,600 370,540 C370,490 350,450 320,450 Z"/><circle cx="340" cy="180" r="22"/><circle cx="60" cy="280" r="18"/></svg>');
    background-repeat: repeat;
    background-size: 200px;
    pointer-events: none;
    z-index: 0;
}

/* ========== ПОМЕХИ НА ЭКРАНЕ (ТОЛЬКО CSS) ========== */

/* 1. СТАТИЧЕСКИЙ ШУМ / ЗЕРНИСТОСТЬ */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.1"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
    background-repeat: repeat;
    background-size: 250px;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: overlay;
    animation: staticShift 0.12s infinite;
}

/* 2. ДИНАМИЧЕСКИЙ ГЛИТЧ (ГОРИЗОНТАЛЬНЫЕ ПОЛОСЫ) — через псевдоэлемент */
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(204, 0, 0, 0.12) 0px,
        rgba(204, 0, 0, 0.12) 2px,
        transparent 2px,
        transparent 7px
    );
    animation: glitchFlicker 0.25s infinite;
}

/* 3. КРОВАВЫЕ ВСПЫШКИ */
html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(204,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
    pointer-events: none;
    z-index: 9997;
    animation: randomFlicker 4s infinite;
    opacity: 0;
}

/* ========== АНИМАЦИИ ПОМЕХ ========== */
@keyframes staticShift {
    0% { transform: translate(0px, 0px); opacity: 0.5; }
    10% { transform: translate(-1px, 1px); opacity: 0.6; }
    20% { transform: translate(1px, -1px); opacity: 0.4; }
    30% { transform: translate(-1px, -1px); opacity: 0.7; }
    40% { transform: translate(1px, 1px); opacity: 0.5; }
    50% { transform: translate(0px, 1px); opacity: 0.6; }
    60% { transform: translate(-1px, 0px); opacity: 0.4; }
    70% { transform: translate(1px, -1px); opacity: 0.7; }
    80% { transform: translate(-1px, 1px); opacity: 0.5; }
    90% { transform: translate(1px, 0px); opacity: 0.6; }
    100% { transform: translate(0px, -1px); opacity: 0.5; }
}

@keyframes glitchFlicker {
    0% { opacity: 0.2; }
    5% { opacity: 0.7; }
    10% { opacity: 0.15; }
    15% { opacity: 0.8; }
    20% { opacity: 0.25; }
    50% { opacity: 0.35; }
    55% { opacity: 0.75; }
    60% { opacity: 0.15; }
    100% { opacity: 0.25; }
}

@keyframes randomFlicker {
    0% { opacity: 0; }
    3% { opacity: 0.2; background: radial-gradient(circle, rgba(204,0,0,0.35), transparent 70%); }
    5% { opacity: 0; }
    12% { opacity: 0.08; }
    14% { opacity: 0; }
    27% { opacity: 0.15; background: radial-gradient(circle at 70% 30%, rgba(204,0,0,0.4), transparent 80%); }
    29% { opacity: 0; }
    45% { opacity: 0.04; }
    47% { opacity: 0; }
    80% { opacity: 0.12; }
    82% { opacity: 0; }
    95% { opacity: 0.08; }
    100% { opacity: 0; }
}

/* ========== ОСНОВНЫЕ СТИЛИ EASYDONATE ========== */

/* КНОПКИ */
.btn-info {
    background: linear-gradient(95deg, #aa0000, #dd0000) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(180,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.btn-info:hover {
    background: linear-gradient(95deg, #ff1a1a, #cc0000) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(204,0,0,0.7) !important;
}

/* КАРТОЧКИ ТОВАРОВ — СТЕКЛО */
.card, .product-card, .donate-card {
    background: rgba(8, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(204, 0, 0, 0.4) !important;
    border-radius: 24px !important;
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
}

.card:hover, .product-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--blood-red) !important;
    box-shadow: 0 0 28px rgba(204, 0, 0, 0.4) !important;
}

/* ЦЕНА */
.price, .product-price {
    color: var(--fresh-blood) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 6px #8b0000 !important;
}

/* ЗАГОЛОВКИ */
h1, h2, h3, .title, .section-title {
    background: linear-gradient(135deg, #ff4d4d, #aa0000) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: 0 0 15px rgba(204,0,0,0.3) !important;
}

/* ПОЛЯ ВВОДА */
input, textarea, .form-control {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--blood-red) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

input:focus, textarea:focus {
    border-color: var(--fresh-blood) !important;
    box-shadow: 0 0 12px rgba(204, 0, 0, 0.5) !important;
}

/* ССЫЛКИ */
a {
    color: #ff8888 !important;
    transition: 0.2s !important;
}

a:hover {
    color: var(--fresh-blood) !important;
    text-shadow: 0 0 6px rgba(204,0,0,0.5) !important;
}

/* СКРОЛЛБАР */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0000;
}
::-webkit-scrollbar-thumb {
    background: var(--blood-red);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--fresh-blood);
}

/* ДОПОЛНИТЕЛЬНО: бейджи */
.badge, .label-info {
    background: var(--blood-red) !important;
    color: #fff !important;
}