/*
 * Flash / status messages on the customer-facing pages (layouts/front: checkout, cart,
 * My Account, reservation...). Replaces the solid red/green bar from custom.css with a
 * light card: tinted background, coloured left edge and icon, dark text, quiet close.
 */
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 40px 12px 14px !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.35);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

/* icon in a small round badge (custom.css draws it with boxicons) */
.alert::before,
.alert:before {
  position: static !important;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #ffffff;
  transform: none !important;
}

.alert.alert-success,
.alert.alert-success * {
  color: #14532d !important;
}

.alert.alert-success {
  border-color: #bbf7d0 !important;
  border-left-color: #16a34a !important;
  background: #f0fdf4 !important;
}

.alert.alert-success::before {
  content: "\2713"; /* check mark: plain text, no icon font needed */
  font-family: inherit !important;
  font-weight: 800;
  background: #16a34a;
  color: #ffffff !important;
}

.alert.alert-danger,
.alert.alert-danger * {
  color: #7f1d1d !important;
}

.alert.alert-danger {
  border-color: #fecaca !important;
  border-left-color: #dc2626 !important;
  background: #fef2f2 !important;
}

.alert.alert-danger::before {
  content: "!";
  font-family: inherit !important;
  font-weight: 800;
  background: #dc2626;
  color: #ffffff !important;
}

.alert.alert-warning,
.alert.alert-warning * {
  color: #78350f !important;
}

.alert.alert-warning {
  border-color: #fde68a !important;
  border-left-color: #d97706 !important;
  background: #fffbeb !important;
}

.alert.alert-warning::before {
  content: "!";
  font-family: inherit !important;
  font-weight: 800;
  background: #d97706;
  color: #ffffff !important;
}

.alert.alert-info,
.alert.alert-info * {
  color: #1e3a8a !important;
}

.alert.alert-info {
  border-color: #bfdbfe !important;
  border-left-color: #2563eb !important;
  background: #eff6ff !important;
}

.alert.alert-info::before {
  content: "i";
  font-family: Georgia, serif !important;
  font-weight: 700;
  font-style: italic;
  background: #2563eb;
  color: #ffffff !important;
}

/* close button: vertically centred on the right edge */
.alert {
  align-items: center;
}

.alert .close {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 10px !important;
  left: auto !important;
  width: 28px !important;
  height: 28px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  float: none !important;
  transform: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.55 !important;
  text-shadow: none !important;
  cursor: pointer;
}

.alert .close:hover {
  opacity: 0.9 !important;
  background: rgba(15, 23, 42, 0.06);
}

.alert .close span {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}