/* =============================================================================
   Accessibility — Focus rings, landmarks, SR-only utilities, non-color cues
   (Batch 5)
   -----------------------------------------------------------------------------
   Scope:
     Fills the a11y gaps not covered by Batches 1-4:
       - Global :focus-visible for interactive elements outside .btn/.input/.mg-*
       - .visually-hidden / .sr-only utilities (shared across all surfaces)
       - .skip-link that appears on keyboard focus
       - :disabled + [aria-disabled] non-color redundancy (cursor, opacity)
       - .text-danger::before warning glyph for form error hints
       - .checkout-status state icons (pending / error / ok)
       - aria-invalid="true" field error indicator

   Non-goals:
     - Does NOT override .btn* / .input / .mg-* focus rules (Batches 1-2).
     - Does NOT touch Bootstrap .form-check focus (keeps native state).
     - Does NOT inject content into arbitrary .text-danger on large pages —
       ONLY the <small class="text-danger"> pattern used in cart + search for
       "keine Zeiten verfügbar" style hints.

   Load order:
     After tokens.css / buttons.css / inputs.css / a11y-touch.css and before
     page-level CSS, so page-level rules can still override when intentional.

   Tokens consumed (from tokens.css):
     --color-brand-rgb, --color-danger-rgb, --color-warning-rgb,
     --color-success-rgb, --shadow-focus, --radius-sm, --space-*,
     --color-surface, --color-text-on-brand.
   ========================================================================== */


/* =============================================================================
   1) Screen-reader-only utilities (visually-hidden / sr-only)
   --------------------------------------------------------------------------
   Canonical pattern matching the existing definitions in cart.css and
   admin.css. Declared here globally so pages that load this file but do
   NOT load cart.css / admin.css (home, menu, legal, auth) still have it.
   The .sr-only alias matches Bootstrap's legacy name and what some devs
   expect. Both are safe to apply to elements that must remain in the
   accessibility tree (labels, skip-link target text, icon-button names).
   ========================================================================== */
.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Opt-in variant: element becomes visible on keyboard focus (used by .skip-link
   and by any sr-only text that should surface on focus). */
.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =============================================================================
   2) Skip-link (keyboard users jump over nav to <main>)
   --------------------------------------------------------------------------
   Rendered as the first focusable element on each page. Off-screen by
   default, slides into the top-inline-start corner on :focus-visible.
   Positioned via logical properties so RTL mirrors automatically.
   ========================================================================== */
.skip-link {
  position: absolute;
  inset-block-start: -9999px;
  inset-inline-start: 8px;
  z-index: 100000;
  padding: 8px 16px;
  background: var(--color-brand, #2563eb);
  color: var(--color-text-on-brand, #ffffff);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.18));
  transition: inset-block-start 120ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  inset-block-start: 8px;
  outline: 3px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}


/* =============================================================================
   3) Global :focus-visible fallback for interactive elements
   --------------------------------------------------------------------------
   Batches 1-2 covered .mg-*, .btn, .input. This block catches everything
   else: plain <button>, <a>, [role="button"], [role="menuitem"],
   [role="switch"], [tabindex]. The rule only fires on :focus-visible
   (keyboard nav), never on mouse click — so visible hover/active styles
   remain untouched.

   The selector explicitly excludes classes that already ship their own
   focus ring (.btn, .input, .mg-option, .aw-option, .rt-lang-menu__*,
   .admin-sidebar__*) to avoid double outlines.
   ========================================================================== */
:where(a, button, [role="button"], [role="menuitem"], [role="menuitemradio"],
       [role="switch"], [role="tab"], [role="link"], summary, [tabindex]):not(
         .btn, [class*="btn-"], [class*="btn_"],
         .input,
         .mg-option, .mg-option *, .aw-option, .aw-option *,
         .rt-lang-menu__toggle, .rt-lang-menu__item,
         .admin-sidebar__link, .admin-sidebar__tree-summary, .admin-sidebar__tree-link,
         .admin-nav-btn, .admin-section__info-btn,
         .form-check-input
       ):focus-visible {
  outline: 2px solid var(--color-brand, #2563eb);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(37, 99, 235, 0.35));
}

/* Safety net for elements inside lightboxes / modals with low contrast
   backgrounds — ensure a visible ring on dark overlays too. */
.modal :focus-visible,
.showcase-lightbox :focus-visible,
[role="dialog"] :focus-visible {
  outline-color: var(--color-brand, #2563eb);
}


/* =============================================================================
   4) :disabled + [aria-disabled] non-color redundancy
   --------------------------------------------------------------------------
   Color alone is insufficient; add cursor + opacity cue so colour-blind
   and low-vision users can also tell an element is non-interactive.
   ========================================================================== */
:where(button, input, select, textarea, fieldset):disabled,
:where(button, [role="button"], a, input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Re-enable pointer events for [aria-disabled] elements that still need to
   show a tooltip on hover (the element is semantically disabled but the
   wrapping control keeps its focus ring). */
[aria-disabled="true"] > * {
  pointer-events: none;
}


/* =============================================================================
   5) Form error cues — non-color redundancy
   --------------------------------------------------------------------------
   - Adds a warning glyph before every non-empty <small class="text-danger">.
     Scope is limited to <small> + :not(:empty) to avoid decorating the
     many legitimate .text-danger text nodes in paragraphs / cart summary.
   - Adds an icon + cue for fields marked [aria-invalid="true"] via the
     adjacent error container. Pair with the existing .input--error rule
     from Batch 2 for the border color.
   ========================================================================== */
small.text-danger:not(:empty)::before,
.form-error:not(:empty)::before {
  content: "\26A0\FE0F\00A0"; /* ⚠ + variation selector + NBSP */
  display: inline-block;
  margin-inline-end: 4px;
  font-weight: 700;
  color: currentColor;
}

/* Field-level invalid state. Complements .input[aria-invalid="true"] from
   inputs.css (Batch 2) with a non-color cue inline with the field. */
[aria-invalid="true"]:not(.input):not([type="radio"]):not([type="checkbox"]) {
  box-shadow: inset 0 0 0 1px var(--color-danger, #dc2626);
}


/* =============================================================================
   6) Checkout status — non-color state icons
   --------------------------------------------------------------------------
   .checkout-status exists in checkout_step.html with three modifier
   variants (.pending / .error / .ok). Today `.pending` ships a visible
   .checkout-spinner (non-color motion cue), so only `.error` and `.ok`
   rely on background-color alone — these are the two that need a glyph.
   Add it via ::before; the glyph is aria-hidden by default (it's
   decorative; the status text itself remains the accessible name).

   No base .checkout-status rule here — existing inline page styles
   already provide display/gap/padding. We only inject the glyph.
   ========================================================================== */
.checkout-status.error::before,
.checkout-status--error::before {
  content: "\26A0\FE0F"; /* ⚠ warning */
  margin-inline-end: 4px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.checkout-status.ok::before,
.checkout-status--ok::before {
  content: "\2713"; /* ✓ check */
  margin-inline-end: 4px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}


/* =============================================================================
   7) Admin toggle label redundancy
   --------------------------------------------------------------------------
   Admin uses Bootstrap's .form-check + role="switch" for service / sound /
   printer / payment toggles. The visual state on a 20px switch is a
   background-color swap only — combined with the existing knob animation.
   Add a subtle "ON" / "OFF" indicator via ::after on the associated label
   row so colour-blind admins have a second cue. Scoped tightly to admin
   surfaces via the .admin-toggle-row opt-in class so Bootstrap defaults
   elsewhere remain untouched.
   ========================================================================== */
.admin-toggle-row {
  position: relative;
}

.admin-toggle-row .form-check-input[role="switch"]:checked + .form-check-label::after,
.admin-toggle-row .form-check-input[role="switch"] + .form-check-label::after {
  content: attr(data-toggle-state);
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.12));
  color: var(--color-text-muted, #475569);
}

.admin-toggle-row .form-check-input[role="switch"]:checked + .form-check-label::after {
  background: var(--color-success-bg, #ecfdf5);
  border-color: var(--color-success, #059669);
  color: var(--color-success-strong, #047857);
}


/* =============================================================================
   8) Prefers-reduced-motion — preserve our additions
   --------------------------------------------------------------------------
   Only the .skip-link has a transition; respect user preference.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}