/* Base alert */
.alert {
  position: relative;
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 6px;
  font-size: 14px;
  opacity: 1;
  height: auto;
  overflow: hidden;
  transition:
    opacity 0.5s ease,
    max-height 0.5s ease,
    margin 0.5s ease,
    padding 0.5s ease;
  max-height: 200px; /* large enough to fit */
}

/* Success / warning / danger variations */
.alert-success { background: #d1e7dd; color: #0f5132; }
.alert-warning { background: #fff3cd; color: #664d03; }
.alert-danger  { background: #f8d7da; color: #842029; }

/* Close button */
.alert .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

/* Dismissed state */
.alert.hide {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0 16px; /* keep horizontal padding so button animates nicely */
}