/* Accessibility bar and high-contrast (classic-theme, customer menu) */
.mv-a11y {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: rgba(0,0,0,.85); /* fallback baseline for browsers without blur */
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Flex gap fallback (Safari < 14.1) - consolidated 8px block */
@supports not (gap: 8px) {
  .mv-a11y { margin: -4px; }
  .mv-a11y > * { margin: 4px; }
}
/* Mobile tap targets: ensure controls are easy to hit */
.mv-a11y__btn,
.mv-a11y__select {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px; /* modest increase */
  line-height: 1.1;
  font-weight: 800;
  cursor: pointer;
}

/* High contrast mode */
body.mv-contrast {
  background: #000 !important;
  color: #fff !important;
  --mv-contrast-outline: 2px solid #fff;
  --mv-contrast-outline-offset: 2px;
}

/* High-contrast focus outlines: scoped to content areas to avoid overriding app chrome/nav */
body.mv-contrast .mv-a11y a,
body.mv-contrast .mv-a11y button,
body.mv-contrast .mv-drink a,
body.mv-contrast .mv-drink button,
body.mv-contrast main a,
body.mv-contrast main button,
body.mv-contrast [role="main"] a,
body.mv-contrast [role="main"] button,
/* Modern theme content wrapper */
body.mv-contrast #content a,
body.mv-contrast #content button,
/* Classic theme content wrappers */
body.mv-contrast .content-right-offset a,
body.mv-contrast .content-right-offset button,
/* Fallback: classic pages that only use .container (keep last) */
body.mv-contrast .container a,
body.mv-contrast .container button {
  outline: var(--mv-contrast-outline);
  outline-offset: var(--mv-contrast-outline-offset);
}

/* Prevent filter effects from interfering with high-contrast mode */
body.mv-contrast img,
body.mv-contrast video {
  filter: none;
}

/* Mobile optimization for sticky accessibility bar */
@media (max-width: 768px) {
  .mv-a11y {
    padding: 8px;
  }
}

/* Very small screens: tighter spacing for 5 controls */
@media (max-width: 375px) {
  .mv-a11y {
    gap: 6px; /* Slightly tighter spacing on very small screens */
  }
  .mv-a11y__btn,
  .mv-a11y__select {
    padding: 10px 12px; /* Slightly smaller padding to fit better */
  }
}