/* =========================================================================
   Telehealth – prominent system messages (Joomla + HikaShop)
   Helix Ultimate > Template Options > Custom Code > Custom CSS.
   Colours approved by client 2026-10-29: success green, info teal, error red.
   Covers both Joomla 5's <joomla-alert> markup and Bootstrap .alert markup,
   since template overrides may output either one.
   ========================================================================= */

/* ---- 1. Placement: fixed banner, top-centre of the screen --------------- */
#system-message-container {
  position: fixed !important;
  top: 24px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 32px)) !important;
  max-width: none !important;
  z-index: 10050;
}

/* ---- 2. Size and shape (every message type) ---------------------------- */
#system-message-container joomla-alert,
#system-message-container .alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 18px 56px 18px 20px;
  font-size: 18px !important;    /* Helix Ultimate sets 13px */
  line-height: 1.4 !important;
  font-weight: 700;
  border: 2px solid;
  border-left-width: 10px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  animation: tmh-alert-in .35s ease-out;
}
#system-message-container .alert-heading { display: none; }
#system-message-container .alert-message,
#system-message-container .alert-wrapper { font: inherit; color: inherit; }

/* Icon in a circle */
#system-message-container joomla-alert::before,
#system-message-container .alert::before {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

/* Close button: bigger target */
#system-message-container .joomla-alert--close,
#system-message-container .btn-close,
#system-message-container .close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  font-size: 26px;
  line-height: 1;
  opacity: .75;
  color: inherit;
  background-color: transparent;
  border: 0;
}

/* ---- 3. Colours ---------------------------------------------------------
   Errors and warnings ("Username and password do not match" is sent by
   Joomla as a warning) use the same red as the existing coupon/login boxes. */
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="warning"],
#system-message-container .alert-danger,
#system-message-container .alert-error,
#system-message-container .alert-warning {
  background: #fbe3e3;
  border-color: #cc0000;
  color: #b00000;
}
#system-message-container joomla-alert[type="danger"]::before,
#system-message-container joomla-alert[type="warning"]::before,
#system-message-container .alert-danger::before,
#system-message-container .alert-error::before,
#system-message-container .alert-warning::before {
  content: "!";
  background: #cc0000;
}

/* Information (brand teal) */
#system-message-container joomla-alert[type="info"],
#system-message-container .alert-info {
  background: #e3f4f4;
  border-color: #0f9a9c;
  color: #0b5f61;
}
#system-message-container joomla-alert[type="info"]::before,
#system-message-container .alert-info::before {
  content: "i";
  font-family: Georgia, serif;
  background: #0f9a9c;
}

/* Success (green) */
#system-message-container joomla-alert[type="success"],
#system-message-container .alert-success {
  background: #e5f4e6;
  border-color: #2e8540;
  color: #1e5e2c;
}
#system-message-container joomla-alert[type="success"]::before,
#system-message-container .alert-success::before {
  content: "\2713";
  background: #2e8540;
}

@keyframes tmh-alert-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 4. Phones: full-width strip at the very top ----------------------- */
@media (max-width: 600px) {
  #system-message-container {
    top: 8px !important;
    width: calc(100% - 16px) !important;
  }
  #system-message-container joomla-alert,
  #system-message-container .alert {
    font-size: 16px !important;
    padding: 14px 48px 14px 14px;
  }
}