/* Подключаем шрифт */
@font-face {
  font-family: 'SourceSans3';
  src: url('../assets/fonts/SourceSans3-Regular.woff2') format('woff2'),
       url('../assets/fonts/SourceSans3-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Используем swap для улучшения загрузки */
}

/* connectWallet.css
   Стили для кнопки подключения кошелька (TonConnect) и всплывающего меню.
   --- Мои комментарии оставь и сделай комментарии к новым блокам кода при необходимости ---
*/

/* 
  Контейнер для кнопки подключения кошелька.
  Он размещён фиксированно, но точное положение
  может управляться из JS (initialization-page / reinitializeScripts).
*/
.connect-button-container {
  justify-content: center;  /* Выравниваем по центру горизонтали */
  align-items: center;      /* По центру вертикали */
  height: 5vh;             /* Высота (адаптивная) */
  z-index: 5;              /* НОВЫЙ КОММENТАРИЙ: Увеличен до 5, чтобы быть выше сферы (z-index: 2), но ниже шапки (z-index: 10) */
  position: relative;      /* НОВЫЙ КОММЕНТАРИЙ: Изменено на relative, так как теперь внутри .header-container */
  margin-top: 10px;        /* НОВЫЙ КОММЕНТАРИЙ: Отступ от шапки */
}

/* 
  Основная кнопка подключения кошелька.
  Делается под тёмную (ночную) тему, 
  но не слишком агрессивные цвета, 
  чтобы смотрелось нейтрально.
*/
.custom-connect-button {
  background-color: rgba(32, 32, 32, 0.8); /* Полупрозрачный тёмный фон */
  color: rgb(165, 165, 165);               /* Белый текст */
  border: 2px solid rgb(94, 94, 94);       /* Тонкая серая рамка */
  border-radius: 20px;                     /* Овальная кнопка */
  padding: 10px 22px 10px 18px;            /* Внутренние отступы */
  font-size: 15px;                         /* Размер шрифта, изменяйте вручную */
  font-family: 'SourceSans3', sans-serif;  /* Применяем шрифт из menu.css */
  font-weight: bold;                       /* Жирное начертание */
  text-align: center;
  display: flex;                           /* Иконка + текст в строку */
  align-items: center;                     /* Вертикальное выравнивание */
  white-space: nowrap;                     /* Не переносим текст */
  cursor: pointer;                         /* Курсор руки */
  transition: all 0.3s ease;              /* Плавные hover/active эффекты */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.7); /* Тень под кнопкой */
}

/* 
  Если кошелёк подключён и адрес длинный,
  уменьшаем шрифт. 
*/
.custom-connect-button.wallet-connected {
  font-size: 12px; /* Уменьшаем размер шрифта вручную */
}

/* Эффект при наведении */
.custom-connect-button:hover {
  background-color: rgba(55, 55, 55, 0.8); /* Лёгкая подсветка */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Эффект при нажатии */
.custom-connect-button:active {
  background-color: rgba(45, 45, 45, 0.8); /* Ещё чуть темнее */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Иконка внутри кнопки */
.custom-connect-button img {
  margin-right: 10px; /* Небольшой отступ справа от иконки */
  width: 17px;
  height: 17px;
}

/* 
  Выпадающее меню кошелька (Copy / Disconnect)
  Тоже делаем в тёмной гамме, 
  чтобы соответствовать ночной теме.
*/
.wallet-menu {
  background-color: rgba(0, 0, 0, 0.8);  /* Чёрный прозрачный фон */
  color: rgb(255, 255, 255);            /* Белый текст */
  border: 2px solid rgb(43, 43, 43);    /* Тёмно-серая рамка */
  border-radius: 20px;
  padding: 10px;
  font-size: 15px;                       /* Размер шрифта, изменяйте вручную */
  font-family: 'SourceSans3', sans-serif; /* Применяем шрифт из menu.css */
  font-weight: bold;
  text-align: center;
  z-index: 1000;
  width: auto;           /* Ширина задаётся скриптом */
  box-sizing: border-box;
  transition: opacity 0.3s ease-in-out; /* Плавное появление/исчезновение */
  position: absolute;   /* Абсолютное позиционирование (под кнопкой) */
  opacity: 0;           /* Будем анимировать через JS */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Кнопки внутри меню кошелька */
.wallet-menu button {
  display: block;
  background: none;
  border: none;
  color: rgb(128, 128, 128); /* Светло-серый */
  font-weight: bold;
  padding: 5px 10px;
  font-size: 15px;               /* Размер шрифта, изменяйте вручную */
  font-family: 'SourceSans3', sans-serif; /* Применяем шрифт из menu.css */
  width: 100%;
  margin: 0;
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
  cursor: pointer;
}

/* Эффект при hover на кнопках меню */
.wallet-menu button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

/* Иконка внутри меню */
.menuwallet-icon {
  width: 17px;
  height: 17px;
  margin-right: 10px;
  position: relative;
  top: 2px;
}

/* Для стрелочки */
.arrow-icon {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Новый блок: Стили для контейнера тостов */
#toast-container1 {
  position: fixed;
  top: 12px; /* Отступ сверху */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000; /* Выше заголовка (z-index: 1000) */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* Чтобы тосты не мешали взаимодействию */
}

/* Новый блок: Стили для тостов */
.toast-message {
  background-color: rgba(49, 49, 49, 0.9);
  color: #ffc14e;
  padding: 8px 20px;
  margin-bottom: 10px;
  border-radius: 15px;
  border: 2px solid rgb(109, 109, 109);
  text-align: center;
  font-family: 'SourceSans3', sans-serif;
  font-size: 14px;
  box-shadow: 0px 2px 16px rgba(24, 24, 24, 0.932);
  opacity: 0;
  transition: opacity 0.2s ease-in-out; /* НОВЫЙ КОММЕНТАРИЙ: Изменено с 0.3s на 0.2s для синхронизации с .page и .header-container */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.8);
}

/* Новый блок: Класс для показа тоста */
.toast-message.show {
  opacity: 1;
}

/* Новый блок: Стиль для тоста при отключении кошелька */
.toast-message.wallet-disconnected {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'SourceSans3', sans-serif;
  font-size: 14px;
}