/* CSS АНИМАЦИИ */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* СТИЛИ ДЛЯ УВЕДОМЛЕНИЙ */
.notification-item {
  background: #C58C89;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  border-left: 5px solid #A86E6B;
  margin-bottom: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  animation: slideIn 0.3s ease-out;
  max-width: 350px;
}

.notification-item.success {
  background: #70A79F;
  border-left-color: #5A8C85;
}

.notification-item.warning {
  background: #E9A95E;
  border-left-color: #D9944C;
}

/* АДАПТИВНЫЕ СТИЛИ */
.head_block {
  transition: background-image 0.8s ease !important;
}

@media (max-width: 768px) {
  .head_block {
    background-image: url(../templates/SolutionPink/img/headd_mobile.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 250px !important;
  }
}

@media (max-width: 480px) {
  .head_block {
    min-height: 200px !important;
  }
}

/* ДОПОЛНИТЕЛЬНЫЕ СТИЛИ */
.btn-primary, .btn-primary:hover, .btn-primary:focus {
  background-color: #70A79F !important;
  border-color: #70A79F !important;
}

.text-primary {
  color: #C58C89 !important;
}

.bg-primary {
  background-color: #2E2E34 !important;
}

.bx-user, .bx-lock-alt {
  font-size: 18px;
}

/* Стили для сообщений в форме регистрации */
#result2.text-success {
  color: #70A79F;
  background: rgba(112, 167, 159, 0.1);
  border: 1px solid rgba(112, 167, 159, 0.3);
  padding: 10px;
  border-radius: 5px;
  animation: pulse 2s infinite;
}

#result2.text-danger {
  color: #C58C89;
  background: rgba(197, 140, 137, 0.1);
  border: 1px solid rgba(197, 140, 137, 0.3);
  padding: 10px;
  border-radius: 5px;
}

/* Стили для индикаторов пароля */
.strength-weak .strength-fill {
  background: #C58C89 !important;
  width: 33% !important;
}

.strength-medium .strength-fill {
  background: #E9A95E !important;
  width: 66% !important;
}

.strength-strong .strength-fill {
  background: #70A79F !important;
  width: 100% !important;
}

.password-match {
  color: #70A79F !important;
}

.password-mismatch {
  color: #C58C89 !important;
}

/* Подсветка полей при ошибке */
.input-error {
  border-color: #C58C89 !important;
  box-shadow: 0 0 0 3px rgba(197, 140, 137, 0.2) !important;
}

.input-success {
  border-color: #70A79F !important;
  box-shadow: 0 0 0 3px rgba(112, 167, 159, 0.2) !important;
}

/* СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА РЕГИСТРАЦИИ */
#registration .modal-dialog {
    max-width: 420px !important;
    margin: 50px auto !important;
}

#registration .modal-content {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    max-height: 85vh !important;
}

#registration .modal-header {
    background: linear-gradient(90deg, #2E2E34, #70A79F) !important;
    color: white !important;
    padding: 15px 20px !important;
    border-bottom: 2px solid #C58C89 !important;
    border-radius: 12px 12px 0 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#registration .modal-header .modal-title {
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
}

#registration .modal-header .close {
    color: white !important;
    opacity: 0.8 !important;
    font-size: 24px !important;
    margin: -10px -15px -10px auto !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s !important;
}

#registration .modal-header .close:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.2) !important;
    transform: rotate(90deg) !important;
}

#registration .modal-body {
    padding: 25px !important;
    max-height: calc(85vh - 70px) !important;
    overflow-y: auto !important;
    background: rgba(46, 46, 52, 0.98) !important;
}

/* Компактные стили для формы */
#registration .form-group {
    margin-bottom: 15px !important;
}

#registration .form-control {
    padding: 10px 10px 10px 35px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
}

#registration button[type="submit"] {
    padding: 12px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

/* Мобильная версия */
@media (max-width: 768px) {
    #registration .modal-dialog {
        margin: 20px auto !important;
        max-width: 95% !important;
    }
    
    #registration .modal-content {
        max-height: 90vh !important;
    }
    
    #registration .modal-body {
        max-height: calc(90vh - 70px) !important;
        padding: 20px !important;
    }
}