.tavelo-notifications {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;
}

.tavelo-notification {
  width: min(32rem, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .9rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid #cfd8e3;
  border-left: .35rem solid #071d3b;
  border-radius: .9rem;
  background: #fff;
  color: #10213a;
  box-shadow: 0 1.25rem 3rem #071d3b38;
  font: 700 .95rem/1.45 system-ui, sans-serif;
  pointer-events: auto;
  animation: tavelo-notification-in .18s ease-out;
}

.tavelo-notification.error {
  border-color: #e7bbb4;
  border-left-color: #a73529;
  color: #7d281f;
}

.tavelo-notification.success {
  border-color: #b9d8c6;
  border-left-color: #315f49;
  color: #24543d;
}

.tavelo-notification.info {
  border-left-color: #071d3b;
}

.tavelo-notification-close {
  border: 0;
  padding: .1rem .35rem;
  background: transparent;
  color: currentColor;
  font: 800 1.2rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.tavelo-notification-close:hover,
.tavelo-notification-close:focus-visible {
  background: #0000000d;
}

@keyframes tavelo-notification-in {
  from { opacity: 0; transform: translateY(.4rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tavelo-notification { animation: none; }
}