/* =========================================================================
   TOAST  -  one design for the whole panel        (patch O)
   =========================================================================
   Loaded LAST on every layout that can show a toast: the merchant panel, the
   admin panel and the sign in pages. Everything here is stated outright and
   marked !important, so it does not matter what the plugin's own stylesheet
   (js/jquery-toast/css/jquery.toast.css) sets, in what order the files load,
   or what the plugin writes into the element's style attribute at runtime.

   WHY THIS FILE EXISTS

   The plugin draws its icon as a background-image on the toast itself and
   keeps it clear of the words with nothing but a left padding:

       .jq-has-icon { padding: 20px 10px 20px 50px; background-position: 10px; }

   So any later rule that touches padding - and there were two of them, one in
   panel-ui.css and one in auth-ui.css, plus the admin panel which had no
   restyle at all and used the plugin's own 1990s look - moves the words on top
   of the icon. That is the overlap in his screenshot.

   The fix is to stop drawing the icon as the toast's own background. It is a
   ::before element now, in a gutter of its own, in a rounded tinted square.
   Even if some future stylesheet changes the padding, the icon cannot land
   under the text again, because the two are no longer the same box.

   THE DESIGN
   White card, thin border, one coloured edge on the left, the icon in a
   tinted square, dark text (not white on a shouting colour block), a soft
   shadow, and the timer as a hairline along the bottom edge.

   COLOURS ARE LITERAL HEX ON PURPOSE. The toast wrapper is appended to
   <body>, outside .au-page and outside the panel wrapper, so every CSS custom
   property this site defines is out of scope in here and would resolve to
   nothing.
   ========================================================================= */

.jq-toast-wrap {
  z-index: 20000 !important;
  width: auto !important;
  max-width: 380px !important;
  padding: 0 !important;
}

/* ---- the card ---------------------------------------------------------- */
/* NOTE - display is NOT set here, on purpose, and must never be.
   The plugin opens and closes a toast with jQuery's fadeIn / fadeOut, and
   both of those work by writing display into the element's style attribute:
   fadeOut animates the opacity to 0 and then sets display:none inline. An
   !important display in a stylesheet beats an inline one, so declaring
   "display: block !important" here stopped the toast from ever going away -
   it faded out and came straight back, opaque, and stayed on screen.
   The plugin's own stylesheet already sets display:block for this class, so
   there is nothing to state here anyway. */
.jq-toast-single {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 15px 40px 15px 62px !important;
  margin: 0 0 12px !important;
  border: 1px solid #e8eaf2 !important;
  border-left: 4px solid #a9b1c6 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #3b4459 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow: 0 14px 34px -14px rgba(38, 44, 74, .38) !important;
}

/* a toast asked for without an icon keeps its words where they are */
.jq-toast-single:not(.jq-has-icon) {
  padding-left: 18px !important;
}

.jq-toast-single h2,
.jq-toast-single .jq-toast-heading {
  display: block !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  color: #2f3650 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  background: none !important;
}

.jq-toast-single a {
  color: #5a5df0 !important;
  text-decoration: underline !important;
}

.jq-toast-single ul,
.jq-toast-single ul li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  color: inherit !important;
}

/* ---- the icon, in a gutter of its own ---------------------------------- */
.jq-toast-single.jq-has-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background-color: #eef0f7 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7793' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='17' r='1.3' fill='%236c7793' stroke='none'/%3E%3C/svg%3E") !important;
}

/* ---- the close cross, out of the way of the words ---------------------- */
.close-jq-toast-single {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 21px !important;
  height: 21px !important;
  line-height: 20px !important;
  text-align: center !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #a3aabd !important;
  background: transparent !important;
  opacity: 1 !important;
  transition: background .15s ease, color .15s ease;
}

.close-jq-toast-single:hover {
  background: #f1f2f8 !important;
  color: #5a6379 !important;
}

/* ---- the timer, a hairline on the bottom edge -------------------------- */
/* width is deliberately not set here: the plugin animates it from 0 to 100%
   and writes the duration into the style attribute. Only the look is ours.
   display is left un-important for the same reason as the card above. */
.jq-toast-loader {
  display: block;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: #cfd4e4 !important;
}

/* ---- success ----------------------------------------------------------- */
.jq-toast-single.jq-icon-success {
  border-left-color: #28c76f !important;
}

.jq-toast-single.jq-icon-success::before {
  background-color: #e4f8ed !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328c76f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") !important;
}

.jq-toast-single.jq-icon-success .jq-toast-loader {
  background: #28c76f !important;
}

/* ---- error / danger ---------------------------------------------------- */
.jq-toast-single.jq-icon-error,
.jq-toast-single.jq-icon-danger {
  border-left-color: #ea5455 !important;
}

.jq-toast-single.jq-icon-error::before,
.jq-toast-single.jq-icon-danger::before {
  background-color: #fdeaea !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea5455' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") !important;
}

.jq-toast-single.jq-icon-error .jq-toast-loader,
.jq-toast-single.jq-icon-danger .jq-toast-loader {
  background: #ea5455 !important;
}

/* ---- warning ----------------------------------------------------------- */
.jq-toast-single.jq-icon-warning {
  border-left-color: #ff9f43 !important;
}

.jq-toast-single.jq-icon-warning::before {
  background-color: #fff2e3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Ccircle cx='12' cy='17.6' r='1.35' fill='%23ff9f43' stroke='none'/%3E%3C/svg%3E") !important;
}

.jq-toast-single.jq-icon-warning .jq-toast-loader {
  background: #ff9f43 !important;
}

/* ---- info -------------------------------------------------------------- */
.jq-toast-single.jq-icon-info {
  border-left-color: #3abaf4 !important;
}

.jq-toast-single.jq-icon-info::before {
  background-color: #e6f6fe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233abaf4' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6.5'/%3E%3Ccircle cx='12' cy='6.9' r='1.35' fill='%233abaf4' stroke='none'/%3E%3C/svg%3E") !important;
}

.jq-toast-single.jq-icon-info .jq-toast-loader {
  background: #3abaf4 !important;
}

/* ---- phones ------------------------------------------------------------ */
@media (max-width: 575px) {
  .jq-toast-wrap {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .jq-toast-single {
    font-size: 13px !important;
    padding: 14px 38px 14px 58px !important;
  }

  .jq-toast-single.jq-has-icon::before {
    left: 12px !important;
    width: 32px !important;
    height: 32px !important;
  }
}