/* Основной фон и стили для текста */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}

/* Заголовок */
header {
    background-color: #0078D7;
    color: white;
    padding: 20px 0;
}

/* Основной контент */
main {
    margin: 50px;
}

/* Кнопки тарифов */
.plan {
    display: inline-block;
    padding: 20px 40px;
    margin: 10px;
    background-color: #0078D7;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.plan:hover {
    background-color: #005bb5;
}

/* Контейнер для ключа и кнопки копирования */
.key-container {
    background-color: #2c2c2c;
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    word-wrap: break-word;
    margin-top: 30px;
}

/* Текст ключа */
.key-container pre {
    margin: 0;
    font-size: 14px;
    font-family: monospace;
}

/* Стиль для кнопки копирования */
.btn-copy {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-copy:hover {
    background-color: #444;
}

/* Для Materialize Toast */
.toast {
    font-size: 14px;
    background-color: #333;
}

<style>
.tariff-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tariff-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.tariff-card.selected {
    border: 2px solid #007bff;
    background-color: #e9f5ff;
}

#confirmButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>

/* Стили для выделенной карточки */
.tariff-card.selected {
    border: 2px solid #007bff;  /* Синий бордер */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Легкая тень для выделения */
}

.tariff-card:hover {
    cursor: pointer; /* Указатель при наведении */
}

/* Уменьшаем ширину карточек тарифов */
#tariff-list .list-group-item {
    width: 220px; /* Устанавливаем фиксированную ширину карточки */
    margin: 5px auto; /* Центрируем карточки и добавляем отступы */
    padding: 10px; /* Добавляем внутренние отступы для карточек */
}

/* Уменьшаем отступы и размер шрифта для карточек */
#tariff-list .list-group-item h5 {
    font-size: 16px; /* Уменьшаем размер шрифта заголовка тарифа */
    margin-bottom: 5px; /* Уменьшаем отступы между заголовком и описанием */
}

#tariff-list .list-group-item p {
    font-size: 14px; /* Уменьшаем размер шрифта описания тарифа */
    margin-bottom: 10px; /* Уменьшаем отступ между описанием и кнопкой */
}

/* Уменьшаем отступы у кнопки */
#tariff-list .list-group-item .btn {
    font-size: 14px; /* Уменьшаем размер шрифта на кнопке */
    padding: 5px 15px; /* Уменьшаем внутренние отступы на кнопке */
    margin-top: 10px; /* Добавляем отступ сверху для кнопки */
}

/* Для центровки и ограничения ширины */
#tariff-list {
    max-width: 300px; /* Ограничиваем максимальную ширину списка тарифов */
    margin: 0 auto; /* Центрируем контейнер с тарифами */
}

/* Для кнопки "Подтвердить выбор" */
#confirmButton {
    width: 100%; /* Делает кнопку широкой, чтобы она заполнила доступное пространство */
    max-width: 200px; /* Ограничивает максимальную ширину */
    margin: 20px auto; /* Центрирует кнопку */
}

/* Стили для выделенной карточки */
.tariff-card.selected {
    border: 2px solid #007bff;  /* Синий бордер */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Легкая тень для выделения */
}

.tariff-card:hover {
    cursor: pointer; /* Указатель при наведении */
}

/* Уменьшаем фон и стиль для общего контента */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0;
}