/* =============================================================================
   Note dialog (#modal-note)

   The site-wide MicroModal note that carries every short message - "Order
   recreated", "Please enter your registration number and postcode", save
   confirmations in the garage portal. Compiled on its own to
   /_common/css/note-dialog.css and linked from MasterPageGlobal.master.

   Success and error messages share this one dialog with no class to tell
   them apart, so the treatment stays neutral: a red accent, the message,
   and a single OK button in place of the close cross. The button is the
   dialog's own close control, so nothing about how it opens or closes
   changes.
   ========================================================================== */
#modal-note .modal__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(420px, 100vw - 32px);
  max-width: none;
  padding: 32px 28px 26px;
  border-top: 5px solid #ff0801;
  border-radius: 16px;
  text-align: center;
}
#modal-note .modal__container .modal__content {
  order: 1;
  margin: 0;
  color: #10131a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
#modal-note .modal__container .modal__content p {
  margin: 0;
}
#modal-note .modal__container .modal__header {
  order: 2;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
#modal-note .modal__container {
  /* the title is normally empty; when a page does set one it sits above
     the button as a heading */
}
#modal-note .modal__container .modal__title {
  order: -1;
  margin: 0 0 6px;
  color: #10131a;
  font-size: 18px;
  font-weight: 700;
}
#modal-note .modal__container .modal__title:empty {
  display: none;
}
#modal-note .modal__container .modal__close {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  background-color: #ff0801;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#modal-note .modal__container .modal__close::before {
  content: "OK";
}
#modal-note .modal__container .modal__close:hover {
  background-color: #d90600;
}