#global-alert-container {
  position: fixed;

  top: 25px;
  right: 25px;

  width: 380px;

  display: flex;
  flex-direction: column;

  gap: 14px;

  z-index: 9999999;

  pointer-events: none;
}

.global-alert {
  width: 360px;
  pointer-events: auto;
  display: flex;

  align-items: flex-start;

  gap: 15px;

  padding: 18px;

  border-radius: 14px;

  background: #1b1b1b;

  color: #fff;

  border-left: 5px solid #d4a017;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);

  transform: translateX(120%);

  opacity: 0;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.global-alert.show {
  transform: translateX(0);

  opacity: 1;
}

.alert-icon {
  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 24px;

  color: white;

  flex-shrink: 0;
}
.alert-icon ion-icon {
  font-size: 30px;
}
.global-alert.success .alert-icon {
  background: #1ed760;
}

.global-alert.error .alert-icon {
  background: #ff3b30;
}

.global-alert.warning .alert-icon {
  background: #ffb300;
}

.global-alert.info .alert-icon {
  background: #2196f3;
}

.alert-content h3 {
  margin: 0;

  color: #d4a017;

  font-size: 18px;
}

.alert-content p {
  margin-top: 6px;

  color: #ddd;

  line-height: 1.5;
}
/* ==========================================
   PROGRESS BAR
========================================== */

.alert-progress {
  width: 100%;

  height: 4px;

  background: rgba(255, 255, 255, 0.08);

  margin-top: 14px;

  border-radius: 999px;

  overflow: hidden;
}

.alert-progress-bar {
  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, #d4a017, #ffcb47);

  transform-origin: left;

  animation-name: alertProgress;

  animation-timing-function: linear;

  animation-fill-mode: forwards;
}

@keyframes alertProgress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}
.global-alert.success {
  border-left: 5px solid #2ecc71;
}

.global-alert.success .alert-icon {
  background: #2ecc71;
}
.global-alert.error {
  border-left: 5px solid #ff4d4f;
}

.global-alert.error .alert-icon {
  background: #ff4d4f;
}
.global-alert.warning {
  border-left: 5px solid #ffb300;
}

.global-alert.warning .alert-icon {
  background: #ffb300;
}
.global-alert.info {
  border-left: 5px solid #3498db;
}

.global-alert.info .alert-icon {
  background: #3498db;
}
.alert-close {
  border: none;

  background: none;

  color: #fff;

  cursor: pointer;

  font-size: 22px;

  opacity: 0.65;

  transition: 0.25s;

  margin-left: 10px;
}

.alert-close:hover {
  opacity: 1;

  transform: scale(1.15);
}

.alert-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 18px;
}

.alert-btn {
  border: none;

  border-radius: 8px;

  padding: 10px 18px;

  cursor: pointer;

  font-weight: 600;

  transition: 0.25s;
}

.alert-btn:hover {
  transform: translateY(-2px);
}

.alert-btn.cancel {
  background: #333;

  color: #fff;
}

.alert-btn.confirm {
  background: #d4a017;

  color: #111;
}