/* ========================================
   App Store Badges Styles
   ======================================== */

/* App badges container - адаптация под существующую структуру футера */
#footer .app-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.5rem;
}

/* Individual badge link */
#footer .app-badge-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: transform 0.2s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

#footer .app-badge-link:hover {
  transform: scale(1.05);
}

#footer .app-badge-link:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 3px;
}

/* Progressive enhancement for modern browsers */
#footer .app-badge-link:focus:not(:focus-visible) {
  outline: none;
}

#footer .app-badge-link:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Badge image optimization - одинаковый размер для обоих баджей */
#footer .app-badge-link img {
  display: block;
  width: 135px;
  height: 40px;
  object-fit: contain;
  max-width: 100%;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Стили для секции мобильных приложений в существующей структуре */
#footer .foot-nav .app-badges {
  margin-top: 1rem;
}

#footer .foot-nav .app-badges + ul {
  display: none; /* Скрываем старый список "(в разработке)" */
}

/* ========================================
   Responsive Design
   ======================================== */

/* Mobile breakpoint */
@media (max-width: 768px) {
  /* Vertical stacking for badges on mobile */
  #footer .app-badges {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
  
  #footer .app-badge-link {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  
  /* Ensure minimum touch target size (WCAG 2.5.8) */
  #footer .app-badge-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  #footer .app-badge-link img {
    width: 140px;
  }
}

/* ========================================
   Styles for includes/footer.blade.php
   ======================================== */

/* Кнопки "Вход" и "Регистрация" в одну строку */
.footer__main-col-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Обертка для кнопок в одну строку */
.footer__main-col-user-auth {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px; /* Отступ перед секцией приложений (равен большому визуальному расстоянию после "Публичная оферта") */
}

.footer__main-col-user-auth .footer__main-login {
  margin-bottom: 0;
}

.footer__main-col-user-auth .footer__main-registr {
  margin-top: 0;
}

/* Секция приложений внутри колонки пользователя */
.footer__app-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.footer__app-title {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.footer__app-description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.4;
  color: #B0B0B0;
  margin: 0 0 12px 0;
  max-width: 300px;
}

/* Баджи в одну строку на десктопе */
.footer__app-badges {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: -10px; /* Сдвиг влево на 10px */
}

/* Individual badge link in new footer */
.footer__app-badge-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: transform 0.2s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}


.footer__app-badge-link:not(.footer__app-badge-link--google):hover {
  transform: scale(1.05);
}

.footer__app-badge-link--google:hover {
  transform: scale(1.05);
}

.footer__app-badge-link:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 3px;
}

/* Progressive enhancement for modern browsers */
.footer__app-badge-link:focus:not(:focus-visible) {
  outline: none;
}

.footer__app-badge-link:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Badge image optimization - одинаковый размер для обоих баджей */
.footer__app-badge-link img {
  display: block;
  width: 135px;
  height: 40px;
  object-fit: contain;
  max-width: 100%;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Google Play бадж - уменьшен на 10% от базового размера */
.footer__app-badge-link--google img {
  width: 122px;
  height: 36px;
}

/* ========================================
   Responsive Design for new footer
   ======================================== */

/* Mobile breakpoint */
@media (max-width: 768px) {
  /* Колонка пользователя по центру */
  .footer__main-col-user {
    align-items: center;
    width: 100%;
  }
  
  /* Кнопки "Вход" и "Регистрация" в одну строку и по центру */
  .footer__main-col-user-auth {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  /* Секция приложений по центру */
  .footer__app-section {
    align-items: center;
    width: 100%;
  }
  
  /* Заголовок "Играй везде" по центру */
  .footer__app-title {
    text-align: center;
    width: 100%;
  }
  
  /* Описание по центру */
  .footer__app-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Баджи в одну строку на мобильных и по центру */
  .footer__app-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  
  /* Баджи одинакового размера */
  .footer__app-badge-link {
    width: auto;
    max-width: none;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
  }
  
  .footer__app-badge-link img {
    width: 156px;
    height: 52px;
    display: block;
    object-fit: contain;
  }
  
  .footer__app-badge-link--google {
    transform: translateY(-2px) !important;
    align-self: flex-start;
  }
  
  .footer__app-badge-link--google img {
    width: 172px;
    height: 57px;
    display: block;
    object-fit: contain;
  }
  
  /* Ensure minimum touch target size (WCAG 2.5.8) */
  .footer__app-badge-link {
    min-height: 52px;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  /* Баджи увеличены и в строку */
  .footer__app-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  
  /* Баджи одинакового размера */
  .footer__app-badge-link img {
    width: 141px;
    height: 47px;
    display: block;
    object-fit: contain;
  }
  
  .footer__app-badge-link--google {
    transform: translateY(-2px) !important;
    align-self: flex-start;
  }
  
  .footer__app-badge-link--google img {
    width: 155px;
    height: 52px;
    display: block;
    object-fit: contain;
  }
  
  .footer__app-description {
    font-size: 13px;
    max-width: 100%;
  }
}

/* Print styles */
@media print {
  #footer .app-badges,
  .footer__app-badges {
    display: none;
  }
}