/* Eén voelbare rand voor actieknoppen, formulieren en hulp op alle schermen. */
html body :is(.button.button.button, button) {
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #00000012,
              0 5px 0 var(--button-edge, #b7a78f), 0 10px 16px #49351e20;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
html body .button:not(.ghost) { --button-edge: #843b15; }
html body .button.help-launch { --button-edge: #b7a78f; }
html body .button.whatsapp-launch { --button-edge: #08652f; }
html body :is(.button.button.button, button):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 7px;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.button.button.button, button):not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 #ffffff70, 0 6px 0 var(--button-edge, #b7a78f), 0 12px 18px #49351e25;
  }
}
html body :is(.button.button.button, button):not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 #ffffff50, 0 2px 0 var(--button-edge, #b7a78f), 0 4px 8px #49351e20;
}
html body :is(.button.button.button, button):disabled {
  box-shadow: inset 0 1px 0 #ffffff50, 0 2px 0 var(--button-edge, #b7a78f);
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.button.button.button, button) { transition: none; }
}
