/* Notisen som visas när ett kontaktformulär skickats (js/kontakt.js). Laddas på alla sidor. */

.notis{
  position: fixed; z-index: 200; left: 50%; bottom: 24px;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 14px 14px 14px 18px; border-radius: 16px;
  background: #221E1B; color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 24px 50px -18px rgba(34,30,27,.6);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity .25s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s linear .45s;
}
.notis.is-visible{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s; }
.notis-dot{ width: 10px; height: 10px; border-radius: 50%; background: #008780; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(0,135,128,.3); }
.notis.is-error .notis-dot{ background: #D12421; box-shadow: 0 0 0 4px rgba(209,36,33,.3); }
.notis-text{ margin: 0; }
.notis-close{
  width: 28px; height: 28px; border: 0; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.notis-close:hover{ background: rgba(255,255,255,.2); }

/* Skicka-knappen medan anropet pågår */
button[type=submit][aria-busy="true"]{ opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce){
  .notis{ transition: none; }
}