/* Base alert */
.cordon-alert {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 500px;
  width: auto;
  z-index: 2000;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  animation: fade-slide-down 0.4s ease-out;
}

/* Hide when not visible */
.cordon-alert.hidden {
  display: none;
}

.cordon-alert-content {
  display: flex;
  align-items: stretch; /* Ensures icon spans the full height of content */
  flex-wrap: nowrap;
  background-color: var(--base-color);
  color: white;
  border-radius: 8px;
  padding: 12px;
  border: 2px solid transparent;
  animation: flash-border 2.5s ease-in-out infinite;
  word-wrap: break-word;
  white-space: normal;
}


.cordon-alert.info .cordon-alert-content,
.cordon-alert.success .cordon-alert-content,
.cordon-alert.warning .cordon-alert-content {
  border: none;
  animation: none;
}
.cordon-alert.danger .cordon-alert-content {
  border-color: #ef4444;
  animation: flash-border-red 2.5s ease-in-out infinite;
}

.cordon-alert-progress {
  height: 4px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  position: absolute;
  bottom: 0;
  left: 0;
}


.cordon-alert-progress-bar {
  height: 100%;
  transform: scaleX(1);
  transform-origin: left;
  animation: progress-bar-shrink 5s linear forwards;
}

/* Match colors */
.cordon-alert.info .cordon-alert-progress-bar {
  background-color: #3b82f6; /* blue */
}
.cordon-alert.success .cordon-alert-progress-bar {
  background-color: #10b981; /* green */
}
.cordon-alert.warning .cordon-alert-progress-bar {
  background-color: #facc15; /* yellow */
}


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

@keyframes flash-border-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.15); }
  50% { box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.4); }
}

@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.cordon-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Stretch vertically to match content */
  padding: 6px;
  margin-right: 10px;
}
.cordon-alert.info .cordon-alert-icon { color: #3b82f6; }
.cordon-alert.success .cordon-alert-icon { color: #10b981; }
.cordon-alert.warning .cordon-alert-icon { color: #facc15; }
.cordon-alert.danger .cordon-alert-icon { color: #ef4444; }

/* Text content */
.cordon-alert-text {
  flex: 1;
  word-break: break-word;
}

.cordon-alert-title {
  margin: 0;
  font-weight: bold;
}

.cordon-alert-desc {
  margin: 4px 0 0;
  color: #ddd;
  font-size: 12px;
  line-height: 1.4;
}

/* Close button */
.cordon-alert-close {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.cordon-alert-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}