/* gargle-motion-controls.css (gargle-wp-converter v2.38, Stage 4A) — the pause/play (and prev/next) control
 * motion-controls.js puts on every auto-moving region, for WCAG 2.2.2 Pause, Stop, Hide.
 * Every rule is scoped to .gada-mc, which only ever exists inside a [data-gargle-ada] node, so at rest
 * nothing here touches the page and the delta gate (which skips [data-gargle-ada]) stays exact.
 * Everything is !important because Elementor kits style bare `button` with higher specificity.
 *
 * Colours are FIXED, not taken from the brand: the control sits over whatever the region happens to show
 * (a photo, a video frame, a slide that changes), so there is no background to solve against. #ffffff on
 * #111111 is 18.1:1 — it clears 1.4.3 and the 1.4.11 non-text contrast of its own border over anything.
 * 44x44 clears 2.5.8 target size with room to spare (our own check wants 24).
 */
.gada-mc {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  top: auto !important;
  z-index: 2147482000 !important;   /* over slides and overlays, under the a11y toolbar (2147483000) */
  display: flex !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  direction: ltr !important;
}
.gada-mc .gada-mc-b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-transform: none !important;
  transform: none !important;
}
.gada-mc .gada-mc-b svg { width: 20px !important; height: 20px !important; display: block !important; }
.gada-mc .gada-mc-b:hover { background: #000000 !important; }
/* two rings so the focus state reads on a dark frame and on a light one */
.gada-mc .gada-mc-b:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #111111 !important; }
.gada-mc .gada-mc-b:focus { outline: 3px solid #ffffff !important; outline-offset: 2px !important; }

@media (max-width: 767px) {
  .gada-mc { right: 8px !important; bottom: 8px !important; gap: 4px !important; }
}
/* Windows High Contrast / forced colours: keep the control visible when our colours are discarded */
@media (forced-colors: active) {
  .gada-mc .gada-mc-b { border: 2px solid ButtonText !important; background: ButtonFace !important; color: ButtonText !important; }
}