/* Подключаем шрифт */
@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;
}

/* Для стрелочки */
.wallet-menu {
  min-width: 0;
  max-width: calc(100vw - 24px);
  width: max-content;
  padding: 7px;
}

.wallet-menu button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 8px;
  line-height: 1.2;
}

.wallet-menu .menuwallet-icon {
  position: static;
  flex: 0 0 17px;
  margin: 0;
}

.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;
}

/* Stable initial geometry: wallet status and font loading must not resize it. */
.custom-connect-button {
  width: 172px;
  min-width: 172px;
  max-width: 172px;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  box-sizing: border-box;
  padding: 0 18px;
  justify-content: center;
  font-weight: 600;
  transition: opacity .3s ease, background-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.custom-connect-button::after {
  content: '';
  position: absolute;
  top: -65%;
  bottom: -65%;
  left: -42%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 155, .22), transparent);
  transform: translate3d(0, 0, 0) skewX(-20deg);
  will-change: transform;
  animation: connectButtonShine 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.custom-connect-button img {
  flex: 0 0 17px;
  object-fit: contain;
}

/* GRAM coin moves on its own composited layer without changing button layout. */
.custom-connect-button > img:first-child {
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform, filter;
  animation: gramCoinFloat 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes gramCoinFloat {
  0%, 100% {
    transform: translate3d(0, .4px, 0) rotate(-.7deg);
    filter: brightness(.94) saturate(.95) drop-shadow(0 0 2px rgba(255, 188, 34, .2));
  }
  50% {
    transform: translate3d(0, -1.3px, 0) rotate(.7deg);
    filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 6px rgba(255, 205, 65, .72));
  }
}

@keyframes connectButtonShine {
  0%, 22% { transform: translate3d(0, 0, 0) skewX(-20deg); opacity: 0; }
  28% { opacity: 1; }
  68% { opacity: .85; }
  76%, 100% { transform: translate3d(610%, 0, 0) skewX(-20deg); opacity: 0; }
}

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