/* Soft 3D + satin sheen for enabled controls; preserve brand colours. */
:where(button:not(.video-play), a.btn[href], [role="button"], .video-play .play):not(:disabled):not([aria-disabled="true"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Keep the play icon centred and the WhatsApp shortcut fixed. */
.video-play .play { position: absolute; }
a.wa[href] { overflow: hidden; isolation: isolate; }
:where(button:not(.video-play), a.btn[href], a.wa[href], [role="button"]):not(:disabled):not([aria-disabled="true"])::after,
.video-play:not(:disabled):not([aria-disabled="true"]) .play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.33) 50%, rgba(255,255,255,.03) 65%, transparent 80%);
  transform: translateX(-150%);
  animation: iris-button-shine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes iris-button-shine {
  0%, 25% { transform: translateX(-150%); }
  60%, 100% { transform: translateX(150%); }
}
/* Layered light and shade give the original fill a soft, rounded finish. */
:is(button:not(.video-play), a.btn[href], a.wa[href], [role="button"]):not(:disabled):not([aria-disabled="true"]),
.video-play:not(:disabled):not([aria-disabled="true"]) .play {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 rgba(6,60,63,.32), 0 9px 20px rgba(6,60,63,.16) !important;
  transition: translate .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (hover: hover) {
  :is(button:not(.video-play), a.btn[href], a.wa[href], [role="button"]):not(:disabled):not([aria-disabled="true"]):hover {
    transform: none;
    translate: 0 -2px;
  }
}
:is(button:not(.video-play), a.btn[href], a.wa[href], [role="button"]):not(:disabled):not([aria-disabled="true"]):active,
.video-play:not(:disabled):not([aria-disabled="true"]):active .play {
  translate: 0 3px;
  box-shadow: inset 0 1px 3px rgba(6,60,63,.2), 0 1px 0 rgba(6,60,63,.32) !important;
}
@media (prefers-reduced-motion: reduce) {
  :is(button, a.btn, a.wa, [role="button"]), .video-play .play {
    transition: none !important;
    translate: none !important;
  }
}
@media (prefers-reduced-motion: reduce), print {
  :where(button, a.btn, a.wa, [role="button"])::after,
  .video-play .play::after { animation: none !important; content: none !important; }
}