/* === Стили для модальных окон === */

/* Общие стили для модальных окон */
.modal-content {
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-content.scale-100 {
  transform: scale(1);
}

.modal-content.opacity-100 {
  opacity: 1;
}

/* Стили для модального окна уведомлений */
#notificationsModal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#notificationsModal .max-h-96::-webkit-scrollbar {
  width: 4px;
}

#notificationsModal .max-h-96::-webkit-scrollbar-track {
  background: rgba(106, 142, 106, 0.1);
  border-radius: 2px;
}

#notificationsModal .max-h-96::-webkit-scrollbar-thumb {
  background: rgba(106, 142, 106, 0.4);
  border-radius: 2px;
}

#notificationsModal .max-h-96::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 142, 106, 0.6);
}

/* Стили для модального окна профиля */
#userProfileModal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#userProfileModal .scale-100 {
  transform: scale(1);
}

#userProfileModal .opacity-100 {
  opacity: 1;
}

#userProfileModal .max-h-96::-webkit-scrollbar {
  width: 4px;
}

#userProfileModal .max-h-96::-webkit-scrollbar-track {
  background: rgba(106, 142, 106, 0.1);
  border-radius: 2px;
}

#userProfileModal .max-h-96::-webkit-scrollbar-thumb {
  background: rgba(106, 142, 106, 0.4);
  border-radius: 2px;
}

#userProfileModal .max-h-96::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 142, 106, 0.6);
}

/* Hover эффекты для кнопок профиля */
.btn-profile {
  transition: all 0.2s ease;
}

.btn-profile:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(106, 142, 106, 0.3);
}

.btn-profile:active {
  transform: scale(0.98);
  transition: all 0.1s;
}

/* Стили для полей ввода */
.profile-input {
  transition: all 0.2s ease;
}

.profile-input:focus {
  outline: none;
  border-color: rgba(106, 142, 106, 0.5);
  box-shadow: 0 0 0 2px rgba(106, 142, 106, 0.2);
}

/* Hover эффекты для ссылок профиля */
.profile-link {
  transition: all 0.2s ease;
}

.profile-link:hover {
  background: rgba(106, 142, 106, 0.1);
  transform: translateX(4px);
  border-left: 3px solid #6B8E6B;
  padding-left: 0.625rem;
}

/* Эффекты для кнопок редактирования и копирования */
.edit-btn, .copy-btn {
  transition: all 0.2s ease;
}

.edit-btn:hover, .copy-btn:hover {
  background: rgba(106, 142, 106, 0.2);
  transform: scale(1.1);
}

.edit-btn:active, .copy-btn:active {
  transform: scale(0.9);
  transition: all 0.1s;
}

/* Эффект свечения для аватара */
#userProfileModal .centered img {
  transition: all 0.3s ease;
}

#userProfileModal .centered:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Анимация для баланса */
#userProfileModal .bold[style*="color: #6B8E6B"] {
  text-shadow: 0 0 8px rgba(106, 142, 106, 0.5);
}

/* Pulse эффект для индикатора уведомлений */
/* .pageHead-notifications__indicator {
  animation: pulseGlow 2s ease-in-out infinite;
} */

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 8px rgba(106, 142, 106, 0.4);
  }
  50% {
    box-shadow: 0 0 16px rgba(106, 142, 106, 0.8);
  }
  100% {
    box-shadow: 0 0 8px rgba(106, 142, 106, 0.4);
  }
}

/* Анимации для модальных окон */
@keyframes modalSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes modalSlideOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
}

/* Shimmer эффект для заголовков */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.shimmer-effect {
  background: linear-gradient(90deg, transparent, rgba(106, 142, 106, 0.2), transparent);
  background-size: 200px 100%;
  animation: shimmer 2s infinite;
}

/* Адаптивность для мобильных устройств */
/* === Прелоадер для аватара === */
.avatar-loader {
  position: relative;
  background: linear-gradient(135deg, #1a1f1a 0%, #2a3f2a 50%, #1a1f1a 100%);
  background-size: 200% 200%;
  border-radius: 50%;
  overflow: hidden;
  animation: avatarPulse 2s ease-in-out infinite;
}

.avatar-loader::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, #6B8E6B 0%, #5A7A5A 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
  animation: avatarGlow 2s ease-in-out infinite alternate;
}

.avatar-loader::after {
  content: '👤';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(106, 142, 106, 0.6);
  animation: avatarIcon 2s ease-in-out infinite;
}

/* Прелоадер для аватара в хедере (48x48) */
.pageHead-user__avatar-img .avatar-loader::after {
  font-size: 20px;
}

/* Прелоадер для аватара в модальном окне (64x64) */
#userProfileModal .avatar-loader::after {
  font-size: 28px;
}

@keyframes avatarPulse {
  0%, 100% {
    background-position: 0% 50%;
    transform: scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.05);
  }
}

@keyframes avatarGlow {
  0% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes avatarIcon {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ═══════════════════════════════════════════════════════════
   📦 ПРЕЛОАДЕР АВТОРИЗАЦИИ
   ═══════════════════════════════════════════════════════════ */
.auth-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* По умолчанию показываем прелоадер (скроется после авторизации) */
  opacity: 1;
  visibility: visible;
}

.auth-preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-preloader__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(9, 10, 9, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.auth-preloader__content {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.auth-preloader__spinner {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(111, 209, 98, 0.2);
  border-top-color: #6FD162;
  border-radius: 50%;
  animation: authSpinner 1s linear infinite;
}

.auth-preloader__text {
  color: #E8F5E8;
  font-size: 1rem;
  font-weight: 500;
  font-family: 'Gilroy', sans-serif;
  letter-spacing: 0.05em;
  animation: authPulse 2s ease-in-out infinite;
}

@keyframes authSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes authPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* === Адаптивность === */
@media (max-width: 768px) {
  .modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
  }
  
  #userProfileModal .modal-content,
  #notificationsModal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .auth-preloader__spinner {
    width: 48px;
    height: 48px;
    border-width: 3px;
  }
  
  .auth-preloader__text {
    font-size: 0.875rem;
  }
}