.contact-glass-panel {
  transition: border-color 500ms ease, background 500ms ease, box-shadow 500ms ease;
}

.contact-glass-panel.contact-form-success {
  border-color: rgba(76, 210, 137, 0.58);
  background:
    linear-gradient(145deg, rgba(61, 190, 119, 0.17), rgba(35, 124, 82, 0.08) 52%, rgba(201, 169, 110, 0.035)),
    rgba(7, 28, 28, 0.7);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 0 34px rgba(61, 190, 119, 0.13), inset 0 1px 0 rgba(171, 255, 205, 0.22);
}

.contact-glass-panel.contact-form-error {
  border-color: rgba(239, 112, 112, 0.62);
  background:
    linear-gradient(145deg, rgba(197, 61, 76, 0.18), rgba(126, 35, 51, 0.09) 52%, rgba(201, 169, 110, 0.025)),
    rgba(31, 10, 25, 0.72);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 0 34px rgba(214, 64, 85, 0.13), inset 0 1px 0 rgba(255, 190, 190, 0.2);
}

.contact-form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.5;
  font-family: 'Outfit', sans-serif;
  animation: contactStatusIn 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.contact-form-status span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.contact-form-status.is-success {
  color: #b8f6cf;
  border-color: rgba(76, 210, 137, 0.34);
  background: rgba(38, 157, 96, 0.14);
}

.contact-form-status.is-success span {
  color: #062519;
  background: #76e6a7;
}

.contact-form-status.is-error {
  color: #ffc3c3;
  border-color: rgba(239, 112, 112, 0.38);
  background: rgba(177, 46, 63, 0.16);
}

.contact-form-status.is-error span {
  color: #351017;
  background: #ff9b9b;
}

@keyframes contactStatusIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}