/* ========== АЧИВКИ ==========
   Оверлей/окно — тот же паттерн, что и у referral_styles.css/friends_styles.css
   (position:fixed + центрирование, общие .admin-header/.close-shop-btn/.item-btn). */

#achievementsOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

#achievementsWindow {
  background: white;
  width: 94%;
  max-width: 560px; /* было 520px — с 5-й вкладкой ("Стрик") впритык не влезало, гнало окно в горизонтальный скролл */
  max-height: 85vh;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

#achievementsContent {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden; /* без явного overflow-x тут же неявно становится auto (см. overflow-y) и тянет горизонтальный скролл, даже когда .achievements-tabs теперь переносится и реально не вылезает за рамку */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* .admin-tabs (admin_styles.css) — свой padding/border рассчитан на тёмный заголовок
   админки, здесь вкладки просто ряд внутри уже отступающего #achievementsContent.
   flex-wrap — 5 вкладок ("Стрик" добавилась последней) не всегда влезают в одну
   строку, особенно на телефоне (окно 90%/94% от узкого экрана) — перенос на вторую
   строку вместо горизонтального скролла/обрезки. */
.achievements-tabs {
  padding: 0 0 10px;
  margin-bottom: -4px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.achievements-tab-btn {
  padding: 8px 10px; /* было 8px 16px (.admin-tab-btn) — теснее, чтобы больше вкладок влезало в строку до переноса */
}

.achievements-category h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #444;
}

.achievements-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.achievements-row + .achievements-row {
  border-top: 1px solid #f0f0f5;
}

/* Уже полученные ачивки не убираем из списка (чтобы был виден весь путь по тирам),
   просто приглушаем — прогресс-бар и так на 100%, а кнопку заменяет .achievements-claimed-label. */
.achievements-row-claimed {
  opacity: 0.6;
}

.achievements-row-bar-wrap {
  flex: 1;
  min-width: 0;
}

.achievements-progress-track {
  height: 8px;
  border-radius: 4px;
  background: #eee;
  overflow: hidden;
}

.achievements-progress-fill {
  height: 100%;
  background: #667eea;
  border-radius: 4px;
  transition: width 0.3s;
}

.achievements-progress-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
}

.achievements-row-action {
  flex-shrink: 0;
}

.achievements-claim-btn {
  white-space: nowrap;
}

.achievements-claimed-label {
  font-size: 13px;
  font-weight: 600;
  color: #4caf50;
  white-space: nowrap;
}

.achievements-reward-hint {
  font-size: 13px;
  color: #aaa;
  white-space: nowrap;
}

/* ===== Вкладка "Стрик" — см. renderLoginStreakTab в js/achievements.js =====
   Была отдельным оверлеем/окном (своя кнопка в шапке) — перенесена сюда как
   вкладка внутри уже существующей панели ачивок, чтобы не плодить кнопки. */
.loginstreak-count {
  margin: 0 0 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #444;
}

.loginstreak-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.loginstreak-day {
  position: relative;
  width: 72px;
  padding: 10px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #f2f2f7;
  color: #999;
}

.loginstreak-day-number {
  font-size: 11px;
}

.loginstreak-day-reward {
  font-size: 14px;
  font-weight: 600;
}

.loginstreak-day-today {
  background: #eef0ff;
  color: #444;
  box-shadow: 0 0 0 2px #667eea inset;
}

.loginstreak-day-done {
  background: #eafaf0;
  color: #4caf50;
}

.loginstreak-day-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
}

.loginstreak-claim-row {
  display: flex;
  justify-content: center;
}