/* Стили для мобильной версии */

/* Скрываем мобильное меню в десктопной версии */
.hamburger-menu {
  display: none;
}

.mobile-menu {
  display: none;
}

/* Скрываем мобильные кнопки действий в десктопной версии */
.mobile-action-buttons {
  display: none;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  /* Общие контейнеры */
  .container {
    padding: 0;
    gap: 2px;
  }
  
  /* Адаптация хедера */
  .header1 {
    flex-direction: row;
    height: 60px;
    padding: 0 15px;
    position: relative;
    justify-content: center;
  }
  
  .header1 .logo {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .header1 .nav-buttons,
  .header1 .user-actions {
    display: none;
  }
  
  /* Гамбургер-меню - скрываем в мобильной версии */
  .hamburger-menu {
    display: none; /* Изменено с block на none, чтобы скрыть гамбургер-меню */
  }
  
  /* Скрываем мобильное меню и все его компоненты */
  .mobile-menu,
  .mobile-menu.active {
    display: none;
  }
  
  /* Стили для блоков баланса в мобильной версии */
  .balance-info {
    margin-top: 15px;
    width: 100%;
    padding: 8px 10px;
    background-color: #1A1C24;
    border-radius: 4px;
  }
  
  /* Переупорядочиваем содержимое в crypto-info для мобильной версии */
  .crypto-info {
    display: flex;
    flex-direction: column;
  }
  
  .pair-info {
    order: 1;
  }
  
  .stats-container {
    order: 2;
  }
  
  .usdt-balance, .btc-balance {
    order: 3;
  }
  
  /* Стили для кнопки Trading AI на мобильных устройствах */
  .trading-ai-button {
    position: static;
    transform: none;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 12px;
  }
  
  /* Создаем контейнер для кнопок в header2 */
  .header2 .header-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 0;
  }
  
  /* Перемещаем кнопки Deposit и Withdraw в header2 под Trading AI */
  .mobile-action-buttons {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
  }
  
  .header2 .buy-button,
  .header2 .sell-button {
    flex: 1;
    padding: 8px;
    font-size: 20px;
    border-radius: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  
  .header2 .buy-button {
    background-color: #02b97d;
  }
  
  .header2 .sell-button {
    background-color: #f13c54;
  }
  
  /* Скрываем оригинальные кнопки в блоке Trade */
  .block3 .trade-buttons {
    display: none;
  }
  
  /* Изменяем структуру header2 для мобильной версии */
  .header2 {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }
  
  .ai-icon {
    font-size: 14px;
  }
  
  .ai-text {
    font-size: 20px;
  }
  
  .header2 .pair-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .header2 .price {
    font-size: 24px;
    text-align: left;
    margin-top: 2px;
    font-weight: bold;
  }
  
  /* Переопределяем стили десктопа для мобильной версии */
  .header2 .stats-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  
  .header2 .stats-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  
  .header2 .stat-item {
    margin-bottom: 0;
  }
  
  .header2 .stat-label {
    font-size: 14px;
  }
  
  .header2 .stat-value {
    font-size: 16px;
  }
  
  /* Вертикальное расположение основного контента */
  .content {
    flex-direction: column;
    gap: 2px;
  }
  
  .block1 {
    width: 100%;
    flex: none;
    height: 400px; /* Уменьшаем высоту графика на мобильном */
  }
  
  .middle-column {
    width: 100%;
    flex: none;
    height: auto;
  }
  
  .order-book {
    height: 400px; /* Фиксированная высота для книги ордеров на мобильном */
  }
  
  .block3 {
    width: 100%;
    flex: none;
    height: auto;
  }
  
  /* Вертикальное расположение футера */
  .footer {
    flex-direction: column;
    height: auto;
    gap: 2px;
  }
  
  .block4 {
    width: 100%;
    flex: none;
    height: 350px; /* Фиксированная высота для ордеров на мобильном */
  }
  
  .block5 {
    width: 100%;
    flex: none;
    height: 450px; /* Уменьшенная высота для активов на мобильном */
  }
  
  /* Адаптация таблиц */
  .orders-table {
    display: block;
    overflow-x: auto;
  }
  
  .orders-table-header th {
    white-space: nowrap;
    padding: 8px;
  }
  
  /* Адаптация элементов формы */
  .form-input {
    font-size: 16px; /* Предотвращаем авто-масштабирование на iOS */
  }
  
  .trade-buttons {
    gap: 5px;
  }
  
  .order-type-buttons {
    overflow-x: auto;
    justify-content: flex-start;
  }
  
  .order-type-button {
    white-space: nowrap;
  }
  
  /* Уменьшаем отступы для мобильной версии */
  .block3-content {
    padding: 10px;
  }
  
  .form-group {
    margin-bottom: 8px;
  }
  
  .slider-container {
    margin: 8px 0;
  }
  
  /* Адаптация книги ордеров */
  .order-book-content {
    flex: 1;
    overflow-y: auto;
  }
  
  .order-book-row {
    padding: 3px 8px;
  }
  
  .order-book-cell {
    font-size: 0.8rem;
  }
  
  /* Скрываем блоки статистики в мобильной версии */
  .stats-container .stats-column {
    display: none;
  }
  
  /* Гамбургер меню и мобильное меню - скрываем в мобильной версии */
  .hamburger-menu {
    display: none; /* Изменено с flex на none */
  }
  
  .mobile-menu.active {
    display: none; /* Изменено с flex на none */
  }
  
  /* Адаптивная верстка для основного контента */
  .content {
    flex-direction: column;
  }
  
  .block1, .middle-column, .block3 {
    width: 100%;
    flex: none;
  }
  
  /* Адаптивная верстка для футера */
  .footer {
    flex-direction: column;
  }
  
  .block4, .block5 {
    width: 100%;
  }
  
  /* Уменьшаем размер шрифта и подгоняем некоторые элементы */
  .pair-name {
    font-size: 1.2rem;
  }
  
  .price {
    font-size: 1.5rem;
  }
  
  /* Адаптивная верстка для хедера */
  .header2 {
    flex-direction: column;
  }
  
  .crypto-info {
    width: 100%;
    gap: 0px;
  }
  
  /* Адаптация для Trading AI на мобильной версии */
  .trading-ai-button {
    width: 100%;
    margin-top: 15px;
    padding: 12px 16px;
  }
  
  .popup-content {
    width: 90%;
    max-width: 350px;
  }
  
  .popup-header h3 {
    font-size: 18px;
  }
  
  .popup-body {
    padding: 15px;
  }
  
  .popup-body p {
    font-size: 14px;
  }
  
  .feature-icon {
    font-size: 20px;
    width: 40px;
    height: 40px;
  }
  
  .feature-text {
    font-size: 12px;
  }
  
  .ai-action-button {
    font-size: 14px;
    padding: 10px;
  }
  
  .ai-working-content {
    max-width: 90%;
  }
  
  .ai-brain {
    width: 80px;
    height: 80px;
  }
  
  .brain-icon {
    font-size: 40px;
  }
  
  .ai-stats {
    flex-direction: column;
    gap: 10px;
  }
  
  .ai-stat {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .log-container {
    max-height: 100px;
  }
  
  .result-title {
    font-size: 20px;
  }
  
  .result-amount {
    font-size: 30px;
  }
  
  .result-details {
    flex-direction: column;
    width: 100%;
  }
  
  .result-stat {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .deposit-popup .popup-content,
  .withdrawal-popup .popup-content {
    width: 90%;
    max-width: 350px;
  }
  
  .deposit-popup .form-input,
  .withdrawal-popup .form-input {
    font-size: 16px;
  }
  
  .deposit-popup .form-label,
  .withdrawal-popup .form-label {
    font-size: 14px;
  }
  
  .deposit-popup #deposit-button,
  .withdrawal-popup #withdrawal-button {
    font-size: 16px;
    padding: 12px;
  }
  
  .max-button {
    font-size: 11px;
    padding: 2px 4px;
  }
  
  .success-icon {
    font-size: 60px;
  }
  
  .success-title {
    font-size: 20px;
  }
  
  .deposit-amount,
  .withdrawal-amount {
    font-size: 24px;
  }
  
  .balance-update {
    padding: 10px;
  }
  
  .balance-label,
  .balance-value {
    font-size: 14px;
  }
  
  /* Увеличенный шрифт для кнопки Trading AI */
  .header2 .ai-icon {
    font-size: 18px;
  }
  
  .header2 .ai-text {
    font-size: 20px;
  }
  
  /* Увеличенный шрифт для pair-name в header2 */
  .header2 .pair-name {
    font-size: 18px;
    font-weight: bold;
  }
}