/* ND Accessibility – Native mode UI */

.nd-a11y-native {
  --nd-a11y-btn-fontsize: 1rem;
  --nd-a11y-trigger-bg: #000000;
  --nd-a11y-trigger-fg: #ffffff;
  --nd-a11y-native-z: 99999;
  --nd-a11y-native-radius: 0.5rem;
  --nd-a11y-native-gap: 20px;
  --nd-a11y-native-anim-duration: 500ms;
  --nd-a11y-native-anim-distance: 300px;
  font: inherit;
}

.nd-a11y-native__wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--nd-a11y-native-z);
  overflow: visible;
}

/* Launcher */
.nd-a11y-native .nd-a11y-native__launcher,
.nd-a11y-native .nd-a11y-native__launcher:hover,
.nd-a11y-native .nd-a11y-native__launcher:focus,
.nd-a11y-native .nd-a11y-native__launcher:focus-visible,
.nd-a11y-native .nd-a11y-native__launcher:active {
  align-items: center;
  background-color: var(--nd-a11y-trigger-bg) !important;
  border: 0 !important;
  border-top-right-radius: 7px;
  color: var(--nd-a11y-trigger-fg) !important;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 5px 13px;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.nd-a11y-native .nd-a11y-native__launcher:hover,
.nd-a11y-native .nd-a11y-native__launcher:focus-visible {
  opacity: 0.92;
}

.nd-a11y-native .nd-a11y-native__launcher:focus-visible {
  outline: 2px solid var(--nd-a11y-trigger-fg) !important;
  outline-offset: 2px;
}

.nd-a11y-native .nd-a11y-native__launcher .nd-a11y-native__icon svg,
.nd-a11y-native .nd-a11y-native__launcher .nd-a11y-native__icon svg path {
  fill: currentColor !important;
  width: 17px;
  height: 17px;
  display: block;
}

/* Panel */
.nd-a11y-native__panel {
  background-color: #fff;
  border-radius: var(--nd-a11y-native-radius);
  bottom: var(--nd-a11y-native-gap);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12);
  display: none;
  left: calc(100% + var(--nd-a11y-native-gap));
  max-height: calc(100vh - (var(--nd-a11y-native-gap) * 2));
  max-width: calc(100vw - (var(--nd-a11y-native-gap) * 2));
  overflow: auto;
  position: absolute;
  width: max-content;
  z-index: 1;
}

.nd-a11y-native__panel.is-open,
.nd-a11y-native__panel.is-animating-in,
.nd-a11y-native__panel.is-animating-out {
  display: block;
}

.nd-a11y-native__panel.is-animating-in {
  animation: nd-a11y-fade-in-up var(--nd-a11y-native-anim-duration) ease forwards;
}

.nd-a11y-native__panel.is-animating-out {
  animation: nd-a11y-fade-out-down var(--nd-a11y-native-anim-duration) ease forwards;
}

@keyframes nd-a11y-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(var(--nd-a11y-native-anim-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nd-a11y-fade-out-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(var(--nd-a11y-native-anim-distance));
  }
}

.nd-a11y-native__close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
  cursor: pointer;
  line-height: 0;
  min-width: 0;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}

.nd-a11y-native__close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.nd-a11y-native__close svg {
  width: 12px;
  height: 12px;
  display: block;
}

.nd-a11y-native__close svg rect {
  fill: #000 !important;
}

.nd-a11y-native__inner {
  display: flex;
  flex-direction: column;
  margin: 30px;
  row-gap: 20px;
  text-align: left;
}

.nd-a11y-native__header {
  align-self: flex-start;
  align-items: center;
  column-gap: 0.5em;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  letter-spacing: 0.03em;
  min-height: 1.2em;
}

.nd-a11y-native__header .nd-a11y-native__icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.nd-a11y-native__header .nd-a11y-native__icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  display: block;
}

.nd-a11y-native__title {
  display: flex;
  align-items: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  margin: 0;
}

.nd-a11y-native__hint {
  color: #333;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
  min-width: 100%;
  overflow-wrap: break-word;
  width: 0;
}

/* Toolbar inside native panel (DEV styling) */
.nd-a11y-native .nd-a11y-toolbar {
  --nd-a11y-gap: 0.5rem;
  --nd-a11y-btn-minw: 4em;
  --nd-a11y-btn-fontsize: 1rem;
  --nd-a11y-radius: var(--nd-a11y-native-radius);
  --nd-a11y-ring: #000;
  --nd-a11y-fg: #000;
  --nd-a11y-border: #000;
  --nd-a11y-bg: #fff;
  align-self: flex-start;
  margin: 0;
  width: max-content;
}

.nd-a11y-native .nd-a11y-toolbar .nd-a11y-btn,
.nd-a11y-native .nd-a11y-toolbar .nd-a11y-toggle {
  background-color: #fff !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  font-size: var(--nd-a11y-btn-fontsize, 1rem);
}

.nd-a11y-native .nd-a11y-toolbar .nd-a11y-btn[aria-checked="true"],
.nd-a11y-native .nd-a11y-toolbar .nd-a11y-toggle[aria-pressed="true"] {
  background-color: #000 !important;
  border-color: #000 !important;
  box-shadow: none;
  color: #fff !important;
}

/* Button-Zeilen nebeneinander, solange das Panel breit genug ist */
.nd-a11y-native .nd-a11y-group {
  flex-wrap: nowrap;
}

@media (max-width: 767px) {
  .nd-a11y-native .nd-a11y-group {
    flex-wrap: wrap;
  }

  .nd-a11y-native__panel {
    bottom: calc(100% + var(--nd-a11y-native-gap));
    left: var(--nd-a11y-native-gap);
    max-width: calc(100vw - (var(--nd-a11y-native-gap) * 2));
    width: calc(100vw - (var(--nd-a11y-native-gap) * 2));
  }

  .nd-a11y-native__inner {
    margin: 20px;
  }

  .nd-a11y-native .nd-a11y-toolbar {
    width: 100%;
  }

  .nd-a11y-native__hint {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-a11y-native__panel.is-animating-in,
  .nd-a11y-native__panel.is-animating-out {
    animation: none;
  }
}

@media print {
  .nd-a11y-native {
    display: none !important;
  }
}