/*
 * The notice and the field marks drawn by form-feedback.js, every page.
 */

/* --- The notice ---------------------------------------------------------------
   Above every pop-up (it sat at z-index 999, under some of them), a sign for what
   kind of notice it is, and large enough to read at a glance. */
#toast.toast {
  z-index: 100000 !important;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 36px 12px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.45 !important;
  box-shadow: 0 12px 32px rgba(13, 27, 62, .28);
  pointer-events: none;
}

#toast.toast.show {
  pointer-events: auto;
  cursor: pointer;
}

#toast.toast::before {
  content: "\2713";
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, .24);
}

#toast.toast-error::before,
#toast.toast-warn::before {
  content: "!";
}

#toast.toast-warn::before {
  background: rgba(0, 0, 0, .12);
}

#toast.toast-info {
  background: #1a2d5a;
  color: #fff;
}

#toast.toast-info::before {
  content: "i";
}

/* The way to dismiss it early: a tap anywhere on it. */
#toast.toast::after {
  content: "\00d7";
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  opacity: .75;
}

@media (max-width: 768px) {
  #toast.toast {
    left: 16px !important;
    right: 16px !important;
    max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Clear of the phone's tab bar, which covered it. */
  body.mapp-has-tabbar #toast.toast {
    bottom: calc(var(--mapp-tabbar-height, 58px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* --- The field ----------------------------------------------------------------- */
input.ff-invalid,
select.ff-invalid,
textarea.ff-invalid,
input.lf-invalid {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .18) !important;
}

/* A loan's tenure over its loan type's limit (loan-form.js): the same red line. */
.lf-tenure-alert {
  margin: .35rem 0 .1rem;
  color: #b02a2a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* A box standing in for a hidden control: a file drop zone, the plan cards. */
.ff-invalid:not(input):not(select):not(textarea) {
  outline: 2px solid #d64545 !important;
  outline-offset: 3px;
  border-radius: 8px;
}

label.ff-invalid-label {
  color: #b02a2a !important;
}

.ff-msg {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: .35rem 0 .1rem;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #b02a2a;
  text-align: left;
}

.ff-msg::before {
  content: "!";
  flex: 0 0 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #d64545;
}

@keyframes ff-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.ff-invalid.ff-nudge {
  animation: ff-nudge .3s ease 1;
}

@media (prefers-reduced-motion: reduce) {
  .ff-invalid.ff-nudge {
    animation: none;
  }
}