html {
    scroll-behavior: smooth;
    scrollbar-color: #fff #000;
}

body {
    font-family: "Roboto", sans-serif;
    color: #fff;
    background-color: #000;
}

a {
    text-decoration: none;
    color: #fff;
}

header {
  display: flex;           /* 1. Включает режим Flexbox для контейнера */
  align-items: center;   /* 2. Это главное свойство, которое выравнивает все дочерние элементы по центру по вертикали */
  
  /* Опционально, для красивого расположения по горизонтали: */
  justify-content: space-between; /* 3. Раздвигает элементы по краям: ссылки будут слева, а кнопка - справа */
  padding: 0 20px; /* Добавляет отступы по бокам для пространства */
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: right;
}
  
nav li {
    margin-right: 15px;
    padding-top: 15px;
}

.standard-li {
    position: relative;
    top: 10px;
}

h1, h2, .info, .about, .email {
    text-align: center;
}

h1 {
    font-size: 80px;
    margin-top: 300px;
}

h2 {
    font-size: 64px;
}

.info {
    font-size: 52px;
    margin-bottom: 300px;
    opacity: 0;
    animation: ani 3.5s forwards;
}
  
@keyframes ani {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.about {
    font-size: 38px;
    margin-bottom: 250px;
}

.tab {
    display: flex;
    flex-wrap: wrap;
}
  
.tab > input[type="radio"] {
    display: none;
}
  
.tab-content {
    display: none;
    width: 100%;
    margin-top: 1rem;
}
  
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
    display: block;
    
}
  
.tab > label {
    display: block;
    margin: 30px 7.5% 0px 7.5%;
    padding: 0.5rem 1rem;
    font-size: 36px;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    text-decoration: none;
    color: #fff;
    border: 0;
    border-radius: 0.375rem;
    background: 0 0;
}
  
.tab > input[type="radio"]:checked + label {
    cursor: default;
    color: #000;
    background-color: #fff;
}

.container {
    display: flex; /* Использовать flexbox для расположения карточек в ряд */
    justify-content: space-around; /* Распределить карточки равномерно по ширине */
    align-items: stretch;  /* Растянуть карточки по высоте */
    padding: 20px;
    box-sizing: border-box;
    flex-wrap: wrap; /*  Позволяет карточкам переноситься на новую строку, если места недостаточно */

}

.card {
    width: 24%; /* Установить ширину каждой карточки (с учетом небольшого промежутка) */
    height: 400px;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 25px;
    padding: 20px;
    text-align: center;
    box-sizing: border-box; /* Включить padding и border в ширину */
    margin-bottom: 20px;
}

.card h3 {
    margin-top: 0;
}

@media (max-width: 768px) {
    .container {
        justify-content: center; /* Центрировать карточки на небольших экранах */
    }

    .card {
        width: 48%;  /*  Две карточки в ряд на средних экранах */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* Одна карточка в ряд на самых маленьких экранах */
    }
}

.email {
    font-size: 32px;
}

footer ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

/* --- Стили для блока ввода кода (темная тема) --- */

/* Блок с балансом (теперь он сверху) */
#wallet-info {
  /* Позиционирование */
  position: absolute;
  top: 100%; /* Сразу под родительским элементом (кнопкой кошелька) */
  right: 0;  /* Прижимаем к правому краю */
  margin-top: 10px; /* Небольшой отступ сверху */

  /* Внешний вид */
  background: #000;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 175px;
  text-align: center;
  word-break: break-word;

  /* Важно: это свойство добавляется JavaScript'ом, но мы его предусматриваем */
  display: none; 
}

/* Блок для ввода кода (теперь он ниже) */
#code-input-block {
  /* Позиционирование */
  position: absolute;
  /* Располагаем его ниже блока с балансом. Значение возможно придется немного подстроить. */
  top: calc(100% + 95px); 
  right: 0; /* Прижимаем к правому краю */
  min-width: 175px;
  /* Внешний вид, как у блока с балансом */
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  padding: 15px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  width: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* По умолчанию скрыт */
  display: none;
}

/* --- Стили для элементов внутри блока ввода кода --- */

#code-input-block label {
  font-weight: bold;
  font-size: 14px;
}

#code-input-block input {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  width: 160px;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 4px;
}

#code-input-block #code-status {
  margin-top: 10px;
  font-size: 12px;
  color: #ffffff;
  min-height: 14px;
}

#code-input-block #code-balance {
  margin-top: 8px;
  font-size: 16px;
  font-weight: bold;
}

/* Стили для текста баланса */
#code-display-state #code-balance {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

/* Стили для блока с балансом и кнопкой Swap (остаются) */
#code-display-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Общие стили для ОБЕИХ кнопок: "Проверить" и "Swap" */
#swap-btn {
  padding: 5px 15px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* Начальные стили: белый фон, черный текст */
  background-color: #ffffff;
  color: #000000;
  /* ИЗМЕНЕНИЕ ЗДЕСЬ: рамка всегда белая */
  border: 1px solid #ffffff;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ для ОБЕИХ кнопок (остается прежним) */
#swap-btn:hover {
  background-color: #000000;
  color: #ffffff;
  /* Рамка остается белой */
  border-color: #ffffff; 
}

#swap-btn:disabled,
#swap-btn:disabled:hover {
  background-color: #ffffff;  /* Светло-серый фон */
  color: #000000;            /* Неактивный серый текст */
  border-color: #ffffff;      /* Светло-серая рамка */
  cursor: not-allowed;        /* Курсор "запрещено" */
}

/* Стиль для заблокированной кнопки "Проверить" */
#submit-code-btn:disabled {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #ffffff; /* Рамка также остается белой */
  cursor: not-allowed;
}

/* Стиль для заблокированной кнопки "Проверить" при наведении (чтобы эффект не срабатывал) */
#submit-code-btn:disabled:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: #ffffff;
}

#swap-status {
  /* Расположение и размер */
  margin-left: 15px;
  font-size: 13px;
  font-weight: bold;
  
  /* По умолчанию текст нейтрального цвета */
  color: #555;
}