/* ================================================= */
/* CSS для Неоновой Кнопки               */
/* ================================================= */

/* 1. Настройка цвета неона по умолчанию */
.neon-button {
    /* ✨ ЛЕГКО МЕНЯТЬ ЦВЕТ ЗДЕСЬ ✨ */
    --neon-color: #00ffcc; 
    
    /* Дополнительные переменные */
    --font-color: #ffffff;
    --hover-color: #f0f0f0;

    /* 2. Стиль Кнопки */
    padding: 5px 15px;
    margin: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    
    /* 3. Цвет и Контур */
    background-color: transparent; /* Тёмный фон должен быть у родителя или body */
    color: var(--font-color);
    border: 2px solid var(--neon-color); 
    border-radius: 6px;
    
    /* 4. Неоновый Эффект: ЗНАЧЕНИЯ УМЕНЬШЕНЫ ДЛЯ БОЛЕЕ СЛАБОГО СВЕЧЕНИЯ */
    box-shadow: 
        0 0 3px var(--neon-color), /* Уменьшили с 5px */
        0 0 7px var(--neon-color), /* Уменьшили с 10px */
        0 0 10px var(--neon-color) inset; /* Уменьшили с 20px */
    text-shadow: 
        0 0 1px var(--neon-color); /* Уменьшили с 2px */
    
    /* 5. Плавный переход */
    /* Уменьшил время с 1s до 0.5s для более стандартного эффекта */
    transition: 
        box-shadow 0.5s ease-in-out, 
        color 0.5s ease-in-out; 
}

/* 6. Эффект при наведении (Hover): ЗНАЧЕНИЯ УМЕНЬШЕНЫ */
.neon-button:hover {
    /* Усиление свечения: ЗНАЧЕНИЯ УМЕНЬШЕНЫ */
    box-shadow: 
        0 0 5px var(--neon-color), /* Уменьшили с 10px */
        0 0 10px var(--neon-color), /* Уменьшили с 20px */
        0 0 15px var(--neon-color), /* Уменьшили с 30px */
        0 0 20px var(--neon-color) inset; /* Уменьшили с 40px */
    
    color: var(--hover-color);
    text-shadow: 
        0 0 2px var(--neon-color); /* Уменьшили с 4px */

    /* Убрал лишний transition: 1s; */
}

/* 7. Классы для других цветов (Примеры) */

.neon-button.red {
    --neon-color: #ff0066; 
}

.neon-button.blue {
    --neon-color: #0099ff; 
}