:root {
  --error-bg: #fff5f5;      /* Soft red background */
  --error-border: #feb2b2;  /* Light border */
  --error-accent: #e53e3e;  /* Strong accent red */
  --error-text: #9b2c2c;    /* Dark readable text */
  
  
  --info-bg: #ebf8ff;      /* Very soft blue background */
  --info-border: #bee3f8;  /* Light blue border */
  --info-accent: #3182ce;  /* Strong professional blue accent */
  --info-text: #2c5282;    /* Dark blue readable text */
  
  --success-bg: #f0fff4;
  --success-border: #c6f6d5;
  --success-accent: #38a169;
}

.error-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 20px 0;
  background-color: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 5px solid var(--error-accent); /* Elegant accent stripe */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--error-text);
  line-height: 1.5;
}

.error-icon {
  color: var(--error-accent);
  display: flex;
  flex-shrink: 0;
}

.error-title {
  font-weight: 700;
  margin-right: 4px;
}

.error-message {
  font-weight: 400;
}

.error-card {
  position: relative;
  margin-top: 25px;
  padding: 20px;
  background-color: var(--error-bg); /* Use your soft blue bg */
  border: 1.5px solid var(--error-border);
  border-radius: 8px;
  color: var(--error-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.error-label {
  position: absolute;
  top: -12px; 
  left: 15px;
  /* Crucial: match the background color so the border is masked */
  background-color: var(--error-bg); 
  padding: 0 10px;
  
  display: flex;
  align-items: center;
  gap: 6px;
  
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--error-accent);
}

  .info-card {
    position: relative;
    margin: 40px 20px;
    padding: 20px;
    background-color: var(--info-bg);
    border: 1.5px solid var(--info-border);
    border-radius: 8px;
    color: var(--info-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  .info-label {
    position: absolute;
    top: -12px; 
    left: 15px;
    background-color: var(--info-bg); 
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--info-accent);
  }

  .info-title {
    font-weight: 700;
  }

  .info-message {
    font-weight: 400;
    display: block;
    margin-top: 4px;
  }




.success-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 20px 0;
  background-color: var(--success-bg);
  border: 1px solid var(--success-border);
  border-left: 5px solid var(--success-accent); /* Elegant accent stripe */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--success-text);
  line-height: 1.5;
}

.success-icon {
  color: var(--success-accent);
  display: flex;
  flex-shrink: 0;
}

.success-title {
  font-weight: 700;
  margin-right: 4px;
}

.success-message {
  font-weight: 400;
}

.success-card {
  position: relative;
  margin-top: 25px;
  padding: 20px;
  background-color: var(--success-bg); /* Use your soft blue bg */
  border: 1.5px solid var(--success-border);
  border-radius: 8px;
  color: var(--success-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.success-label {
  position: absolute;
  top: -12px; 
  left: 15px;
  /* Crucial: match the background color so the border is masked */
  background-color: var(--success-bg); 
  padding: 0 10px;
  
  display: flex;
  align-items: center;
  gap: 6px;
  
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success-accent);
}


/* 1. Define the animation */
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-10px); /* Starts slightly above its position */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* Ends in its natural spot */
  }
}

/* 2. Apply it to your cards */
.info-card, .error-card, .warning-card {
  animation: slideDownFade 0.4s ease-out forwards;
}

.second-message {
  animation-delay: 0.2s;
}