/* Mobile Optimizations for Salik Website */

/* Общие мобильные стили */
@media (max-width: 767px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  .content-wrap {
    padding: 0 10px;
  }

  .header {
    position: relative;
  }

  .salik_logo {
    text-align: center;
  }

  .logo-brand {
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* Форма оптимизации */
  .user-form-row {
    margin-bottom: 20px;
  }

  .user-form-title {
    margin-bottom: 8px;
  }

  .user-form-data input,
  .user-form-data select {
    width: 100%;
    font-size: 16px; /* Предотвращает зум на iOS */
  }

  /* Кнопки */
  .panel-buttons {
    flex-direction: column-reverse;
  }

  .panel-buttons_left,
  .panel-buttons_right {
    width: 100%;
    margin-bottom: 10px;
  }

  .btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
  }

  /* Выбор суммы */
  .choise-select-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .choise-select-list li {
    margin-bottom: 10px;
  }

  .choise-select-list label {
    display: block;
    text-align: center;
    padding: 15px;
  }

  /* Шаги */
  .tags-holder {
    overflow-x: auto;
  }

  .mob-step {
    display: inline !important;
  }

  /* Футер */
  .footer-menu {
    text-align: center;
  }

  .footer-menu .col-sm-3 {
    margin-bottom: 20px;
  }

  .social-networks {
    justify-content: center;
  }
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 1024px) {
  .content-wrap-medium {
    max-width: 90%;
  }

  .user-form-row {
    display: flex;
    align-items: center;
  }

  .user-form-title {
    width: 30%;
    margin-bottom: 0;
  }

  .user-form-data {
    width: 70%;
  }
}

/* Улучшения доступности */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Высокая контрастность */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid;
  }

  input, select {
    border: 2px solid #333;
  }
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
  /* Здесь можно добавить стили для темной темы если потребуется */
}