/* WCAG2-compliant notification banners.
   All color combinations meet AA contrast ratio (4.5:1 minimum).
   Each style uses a left border + icon prefix so meaning is not conveyed by color alone (1.4.1). */

.sjc-notifications-wrapper {
  visibility: hidden;
}

.sjc-notifications-wrapper.sjc-notifications--ready {
  visibility: visible;
}

.sjc-notification {
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  font-weight: 600;
  border-left: 5px solid transparent;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sjc-notification::before {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.sjc-notification a {
  text-decoration: underline;
  font-weight: 700;
}

/* Info — dark blue text on light blue background
   #004085 on #cce5ff = contrast 7.8:1 */
.sjc-notification--info {
  background-color: #cce5ff;
  color: #004085;
  border-left-color: #004085;
}
.sjc-notification--info::before {
  content: "\2139\FE0F";
}
.sjc-notification--info a {
  color: #002752;
}

/* Warning — dark brown text on light yellow background
   #856404 on #fff3cd = contrast 5.1:1 */
.sjc-notification--warning {
  background-color: #fff3cd;
  color: #856404;
  border-left-color: #856404;
}
.sjc-notification--warning::before {
  content: "\26A0\FE0F";
}
.sjc-notification--warning a {
  color: #533f03;
}

/* Success — dark green text on light green background
   #155724 on #d4edda = contrast 7.1:1 */
.sjc-notification--success {
  background-color: #d4edda;
  color: #155724;
  border-left-color: #155724;
}
.sjc-notification--success::before {
  content: "\2705";
}
.sjc-notification--success a {
  color: #0b2e13;
}

/* Alert — dark red text on light red background
   #721c24 on #f8d7da = contrast 7.3:1 */
.sjc-notification--alert {
  background-color: #f8d7da;
  color: #721c24;
  border-left-color: #721c24;
}
.sjc-notification--alert::before {
  content: "\274C";
}
.sjc-notification--alert a {
  color: #491217;
}