/* Base Bootstrap 5.3 alert with your padding/border tweaks */
.alert {
  /* Bootstrap’s CSS variables */
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 20px;   /* you wanted 15px 20px, so map it */
  --bs-alert-padding-y: 15px;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  --bs-alert-border-radius: 5px; /* your rounded corners */
  --bs-alert-link-color: inherit;

  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

/* Links inside alerts (your underline + hover) */
.alert a {
  color: #EEE;
  font-weight: 600;
  text-decoration: underline;
}
.alert a:hover { color: #FFF; }

/* Support for alert icons */
.alert .alert-icon {
  float: left;
  margin-right: 20px;
}

/* Alert content wrapper */
.alert .alert-container {
  position: relative;
  margin: 0 auto;
  color: white;
}

/* Custom close icon */
.alert .close-icon {
  float: right;
  color: #000;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
.alert .close-icon:before,
.alert .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}
.alert .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}
.alert .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}

/* Variant overrides (keeping your colors, but still tied to Bootstrap vars) */
.alert-info {
  --bs-alert-color: #fff;
  --bs-alert-bg: #41a1d6;
  --bs-alert-border-color: #41a1d6;
  font-size: 15px;
}
.alert-success {
  --bs-alert-color: #fff;
  --bs-alert-bg: #8bc34a;
  --bs-alert-border-color: #8bc34a;
}
.alert-warning {
  --bs-alert-color: #fff;
  --bs-alert-bg: #fc904e;
  --bs-alert-border-color: #e9884c;
}
.alert-danger {
  --bs-alert-color: #fff;
  --bs-alert-bg: #b85d59;
  --bs-alert-border-color: #812925;
  font-size: 14px;
}

/* Optional custom flavors */
.alert-custom {
  --bs-alert-color: #fff;
  --bs-alert-bg: #66615b;
  --bs-alert-border-color: #66615b;
}
.alert-outline {
  --bs-alert-color: #444;
  --bs-alert-bg: #f5f5f5;
  --bs-alert-border-color: #e6e5e5;
  font-size: 14px;
  line-height: 20px;
}
.alert-note {
  --bs-alert-color: #664d03;         /* dark golden text */
  --bs-alert-bg: #fff3cd;            /* pale yellow background */
  --bs-alert-border-color: #ffeeba;  /* matching subtle border */
}