/* ==========================================================================
   DERMAX CORE — FORM STATES + TOASTS
   ========================================================================== */

.dermax-honeypot {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

button.is-loading {
  position: relative;
  cursor: wait !important;
  opacity: .76;
}

button.is-loading::after {
  content: "";

  width: 14px;
  height: 14px;

  margin-left: 8px;

  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;

  animation: dermaxButtonSpin .7s linear infinite;
}

@keyframes dermaxButtonSpin {
  to {
    transform: rotate(360deg);
  }
}


/* Toast region */
.dermax-toast-region {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100500;

  width: min(390px, calc(100vw - 32px));

  display: grid;
  gap: 10px;

  pointer-events: none;
}

body.admin-bar .dermax-toast-region {
  top: 56px;
}

.dermax-toast {
  display: grid;
  grid-template-columns: 30px 1fr 32px;
  align-items: center;
  gap: 10px;

  min-height: 58px;

  padding: 10px 10px 10px 13px;

  border: 1px solid var(--color-border);
  border-radius: 13px;

  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  color: var(--color-text);

  box-shadow: var(--shadow-md);

  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);

  opacity: 0;
  transform: translateY(-8px) translateX(8px);

  pointer-events: auto;

  transition:
    opacity 220ms ease,
    transform 220ms var(--ease);
}

.dermax-toast.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.dermax-toast-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(183, 138, 67, .10);
  color: var(--color-gold-dark);

  font-size: 12px;
  font-weight: 800;
}

.dermax-toast--success .dermax-toast-icon {
  background: rgba(58, 128, 82, .11);
  color: #3a8052;
}

.dermax-toast--error .dermax-toast-icon {
  background: rgba(174, 60, 60, .10);
  color: #ae3c3c;
}

.dermax-toast-text {
  color: var(--color-text-secondary);

  font-size: 12px;
  line-height: 1.5;
}

.dermax-toast-close {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: transparent;
  color: var(--color-text-muted);

  font-size: 19px;

  cursor: pointer;
}

.dermax-toast-close:hover {
  background: rgba(183, 138, 67, .08);
  color: var(--color-text);
}

@media (max-width: 650px) {
  .dermax-toast-region {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;

    width: auto;
  }

  body.admin-bar .dermax-toast-region {
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.is-loading::after {
    animation-duration: 1.2s;
  }

  .dermax-toast {
    transition: none;
  }
}