/* HC Site Messages — compact, viewport-centred yellow notice.
 * Only the backdrop and transparent .modal layer cover the screen.
 */
#hc-site-messages-modal.modal {
  --bs-modal-width: 620px !important;
  --bs-modal-bg: #fee58e;
  --bs-modal-color: #000;
  --bs-modal-border-color: #000;
  --bs-modal-border-radius: 0.25rem;
  --bs-modal-header-border-color: rgba(0, 0, 0, 0.25);
  --bs-modal-footer-border-color: rgba(0, 0, 0, 0.25);
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  color: #000;
}

/* Target the exact Bootstrap dialog emitted by the plugin JS.
 * Explicit fixed positioning overrides inherited full-width / top-aligned
 * Bootstrap and theme rules, including dialog scroll/centre helpers.
 */
#hc-site-messages-modal.modal .modal-dialog,
#hc-site-messages-modal.modal .modal-dialog.modal-lg,
#hc-site-messages-modal.modal .modal-dialog.modal-dialog-centered {
  /* Override Bootstrap's modal-lg width and theme dialog sizing. */
  --bs-modal-width: 620px !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(620px, calc(100vw - 32px)) !important;
  max-width: 620px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

/* The yellow dialog is the only visible panel; it grows with content. */
#hc-site-messages-modal.modal > .modal-dialog > .modal-content {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden;
  background: #fee58e !important;
  color: #000 !important;
  /* border: 1px solid #000; */
  border-radius: 0.25rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

#hc-site-messages-modal .modal-header,
#hc-site-messages-modal .modal-footer {
  flex: 0 0 auto;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.25);
}

#hc-site-messages-modal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: transparent !important;
  text-align: left;
}

#hc-site-messages-modal .modal-title,
#hc-site-messages-modal .hc-site-message-title,
#hc-site-messages-modal .hc-site-message-content,
#hc-site-messages-modal .hc-site-message-content :is(h1, h2, h3, h4, h5, h6, p, li, a, strong, em) {
  color: #000 !important;
}

#hc-site-messages-modal .hc-site-message-content a {
  text-decoration: underline;
}

#hc-site-messages-modal .hc-site-message + .hc-site-message {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

#hc-site-messages-modal .hc-site-message-title {
  margin-bottom: 0;
}

#hc-site-messages-modal .hc-site-message-content > :last-child {
  margin-bottom: 0;
}

#hc-site-messages-modal .hc-site-message-content img {
  max-width: 100%;
  height: auto;
}

#hc-site-messages-modal .btn-close {
  opacity: 1;
  filter: none;
}

#hc-site-messages-modal .modal-footer .btn {
  background: transparent;
  border: 1px solid #000;
  color: #000;
  border-radius: 0.25rem;
}

#hc-site-messages-modal .modal-footer .btn:hover,
#hc-site-messages-modal .modal-footer .btn:focus-visible {
  background: #000;
  border-color: #000;
  color: #fee58e !important;
}

/* Darken the website behind the notice, not the yellow panel. */
body:has(#hc-site-messages-modal.show) > .modal-backdrop.show {
  background-color: #000;
  opacity: 0.5;
}