/* Modernized alert boxes (delivery fee notice, form errors, website-closed banner) and the fancier flash-
   message/inline-notice treatment layered on top of them. Ported unchanged from legacy's application.css --
   class names and behavior are identical between Bootstrap 3 and 5 here. */

.alert {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(11, 30, 61, 0.08);
}
.alert-danger {
  background: linear-gradient(135deg, #FDECEC 0%, #ffffff 100%);
  color: var(--sn-navy);
  border-left: 4px solid var(--sn-red);
}
.alert-success {
  background: linear-gradient(135deg, #EAF7EE 0%, #ffffff 100%);
  color: var(--sn-navy);
  border-left: 4px solid var(--sn-green);
}

/* Fancier flash messages (form errors / success confirmations) -- icon badge + flex layout, scoped
   separately from plain .alert-danger/.alert-success uses (e.g. the website-closed banner) so their
   table-based markup is untouched. */
.snAlertModern {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 44px 14px 18px;
  position: relative;
}
.snAlertModern .snAlertIcon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 17px;
  box-shadow: 0 3px 8px rgba(11, 30, 61, 0.2);
}
.alert-danger .snAlertIcon {
  background: linear-gradient(135deg, var(--sn-red) 0%, var(--sn-red-dark) 100%);
}
.alert-success .snAlertIcon {
  background: linear-gradient(135deg, var(--sn-green) 0%, var(--sn-green-dark) 100%);
}
.snAlertModern .snAlertText {
  flex: 1 1 auto;
  line-height: 1.5;
}
/* Bootstrap 5 renamed .close to .btn-close (a background-image "x", not a glyph). A fixed top offset (what
   legacy used for its glyphicon-based .close) only looks centered for single-line messages -- this banner's
   text wraps to 2+ lines on longer errors, so centering needs to track the actual (variable) banner height
   instead of a fixed pixel guess. */
.snAlertModern .btn-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

/* ---- Fancier inline notice banner (e.g. Order Now same-day delivery notice) ---- */
.snNotice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sn-blue-light) 0%, #ffffff 100%);
  box-shadow: 0 2px 8px rgba(11, 30, 61, 0.06), 0 8px 20px rgba(11, 30, 61, 0.10);
  border-left: 4px solid var(--sn-pink);
}
.snNoticeIcon {
  width: 46px;
  height: 46px;
  font-size: 19px;
}
.snNoticeText {
  color: var(--sn-navy);
  line-height: 1.5;
}