/**
 * Loyalty Toast Notification Styles
 * Toast đẹp hiển thị giữa màn hình với animation mượt
 * Version 2.0 - Redesigned
 */

/* Container */
#loyalty-toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  pointer-events: none;
  width: 90%;
  max-width: 450px;
}

/* Toast Base */
.loyalty-toast {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 40px 36px;
  min-height: 180px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85) translateY(-30px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Show Animation */
.loyalty-toast-show {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* Hide Animation */
.loyalty-toast-hide {
  opacity: 0 !important;
  transform: scale(0.85) translateY(30px) !important;
}

/* Icon - Lớn, đẹp, nổi bật ở giữa trên cùng */
.loyalty-toast-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 14px;
  margin-bottom: 8px;
}

.loyalty-toast-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.5;
}

/* Content */
.loyalty-toast-content {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.loyalty-toast-message {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  word-break: break-word;
  letter-spacing: 0.2px;
}

.loyalty-toast-message strong {
  font-weight: 800;
  color: inherit;
}

/* Close Button - Góc phải trên */
.loyalty-toast-close {
  position: absolute;
  top: 16px;
  right: 16px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loyalty-toast-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
  transform: scale(1.1);
}

.loyalty-toast-close svg {
  width: 16px;
  height: 16px;
}

/* Progress Bar */
.loyalty-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  transform-origin: left;
  animation: loyalty-toast-progress 5s linear forwards;
  border-radius: 0 0 24px 24px;
}

@keyframes loyalty-toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ============================================
   TYPE VARIATIONS - MÀU NHẸ NHÀNG, DỄ ĐỌC
   ============================================ */

/* Success - Xanh lá nhạt */
.loyalty-toast-success {
  background: linear-gradient(135deg, #e8f8f0 0%, #dcf5ea 100%);
  border: 2px solid #34d399;
}

.loyalty-toast-success .loyalty-toast-icon {
  background: #34d399;
  color: #ffffff;
}

.loyalty-toast-success .loyalty-toast-message {
  color: #065f46;
}

.loyalty-toast-success .loyalty-toast-close {
  color: #065f46;
}

.loyalty-toast-success .loyalty-toast-progress {
  background: linear-gradient(90deg, #34d399, #10b981);
}

/* Error - Đỏ nhạt */
.loyalty-toast-error {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 2px solid #f87171;
}

.loyalty-toast-error .loyalty-toast-icon {
  background: #f87171;
  color: #ffffff;
}

.loyalty-toast-error .loyalty-toast-message {
  color: #991b1b;
}

.loyalty-toast-error .loyalty-toast-close {
  color: #991b1b;
}

.loyalty-toast-error .loyalty-toast-progress {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* Warning - Vàng cam nhạt */
.loyalty-toast-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #fbbf24;
}

.loyalty-toast-warning .loyalty-toast-icon {
  background: #fbbf24;
  color: #ffffff;
}

.loyalty-toast-warning .loyalty-toast-message {
  color: #78350f;
}

.loyalty-toast-warning .loyalty-toast-close {
  color: #78350f;
}

.loyalty-toast-warning .loyalty-toast-progress {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* Info - Xanh dương nhạt */
.loyalty-toast-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #60a5fa;
}

.loyalty-toast-info .loyalty-toast-icon {
  background: #60a5fa;
  color: #ffffff;
}

.loyalty-toast-info .loyalty-toast-message {
  color: #1e3a8a;
}

.loyalty-toast-info .loyalty-toast-close {
  color: #1e3a8a;
}

.loyalty-toast-info .loyalty-toast-progress {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  #loyalty-toast-container {
    width: 90%;
    max-width: none;
  }

  .loyalty-toast {
    padding: 32px 24px;
    min-height: 160px;
    gap: 12px;
  }

  .loyalty-toast-icon {
    width: 56px;
    height: 56px;
    padding: 12px;
  }

  .loyalty-toast-message {
    font-size: 16px;
  }

  .loyalty-toast-close {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .loyalty-toast {
    background: #1f2937;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .loyalty-toast-close {
    background: rgba(255, 255, 255, 0.1);
  }

  .loyalty-toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Dark mode colors */
  .loyalty-toast-success {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: #34d399;
  }

  .loyalty-toast-success .loyalty-toast-message {
    color: #d1fae5;
  }

  .loyalty-toast-error {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    border-color: #f87171;
  }

  .loyalty-toast-error .loyalty-toast-message {
    color: #fecaca;
  }

  .loyalty-toast-warning {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: #fbbf24;
  }

  .loyalty-toast-warning .loyalty-toast-message {
    color: #fef3c7;
  }

  .loyalty-toast-info {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border-color: #60a5fa;
  }

  .loyalty-toast-info .loyalty-toast-message {
    color: #dbeafe;
  }
}

/* Animation cho nhiều toast */
.loyalty-toast + .loyalty-toast {
  margin-top: 16px;
}

/* Accessibility */
.loyalty-toast:focus-within {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* Print - Hide toasts */
@media print {
  #loyalty-toast-container {
    display: none !important;
  }
}

/* Hover effect */
.loyalty-toast:hover {
  transform: scale(1.02);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}