/* static/css/flash.css */
#flash-container {
  position: sticky;       /* stays under the top bar while scrolling */
  top: 0;
  z-index: 1030;
}

/* Base look */
.flash-banner {
  margin: 12px 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Text */
.flash-text { line-height: 1.3; }

/* Close button */
.flash-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-left: 12px;
  opacity: .7;
}
.flash-close:hover { opacity: 1; }

/* Variants (match Bootstrap-style colors) */
.flash-banner.success {
  background: #d1e7dd;    /* green bg */
  border-color: #badbcc;
  color: #0f5132;
}

.flash-banner.error,
.flash-banner.danger {
  background: #f8d7da;    /* red/pink */
  border-color: #f5c2c7;
  color: #842029;
}

.flash-banner.warning {
  background: #fff3cd;    /* yellow */
  border-color: #ffecb5;
  color: #664d03;
}

.flash-banner.info {
  background: #cff4fc;    /* cyan */
  border-color: #b6effb;
  color: #055160;
}