/* ============================================
   COMPONENTS: Alerts
   ============================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-md);
}

.alert-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.alert-danger,
.alert-error {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.alert-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

.alert-info {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border: 1px solid var(--color-info);
}

/* Dismissible Alert */
.alert-dismissible {
  padding-right: var(--spacing-2xl);
  position: relative;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  padding: var(--spacing-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert-dismissible .btn-close:hover {
  opacity: 1;
}

/* =================== Info Box (prototype callout) =================== */
.info-box {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 14px;
  background: var(--color-info-light, rgba(110, 168, 255, 0.06));
  border: 1px solid rgba(110, 168, 255, 0.20);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.info-box > i {
  color: var(--color-info);
  flex-shrink: 0;
  margin-top: 2px;
}
.info-box strong {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
}