/*
 * Contact page additions (kerem/contact-form block): availability badge and
 * quick contact buttons. The form panel is always light (#f7f7f2 / #181916),
 * so these colours are fixed rather than theme tokens.
 */

.contact-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  margin: 0 0 1.1rem;
  border: 1px solid rgb(24 25 22 / 0.16);
  border-radius: var(--radius-pill, 999px);
  background: #ffffff;
  color: #181916;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
}

.contact-availability__dot {
  position: relative;
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 0 0 3px rgb(31 157 85 / 0.18);
}

.contact-availability--limited .contact-availability__dot {
  background: #c27c0e;
  box-shadow: 0 0 0 3px rgb(194 124 14 / 0.2);
}

.contact-availability--closed .contact-availability__dot {
  background: #b42318;
  box-shadow: 0 0 0 3px rgb(180 35 24 / 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-availability--open .contact-availability__dot::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    content: "";
    animation: kerem-availability-pulse 2.4s ease-out infinite;
  }
}

@keyframes kerem-availability-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

.contact-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.contact-form-panel .contact-quick-actions__button {
  min-height: 46px;
  padding-inline: 1.15rem;
}

.contact-form-panel .contact-quick-actions__button--whatsapp {
  border-color: #181916;
  background: #181916;
  color: #f7f7f2;
}

.contact-form-panel .contact-quick-actions__button--email {
  border-color: rgb(24 25 22 / 0.3);
  background: transparent;
  color: #181916;
}

.contact-form-panel .contact-quick-actions__button--email:hover {
  border-color: #181916;
  background: #ffffff;
}

.contact-form-panel .contact-quick-actions__button:focus-visible {
  outline: 2px solid #181916;
  outline-offset: 3px;
}

.contact-quick-actions__icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  background: #25d366;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.2.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.2.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 520px) {
  .contact-quick-actions__button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Editor canvas: buttons hidden on the site (no number / e-mail) are shown faded. */
.contact-quick-actions .is-kerem-hidden {
  opacity: 0.45;
}