/* Accessibility styles for page-gutschein.php */

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Ensure labels are still accessible to screen readers but visually hidden */
label.sr-only {
  display: block !important;
  visibility: visible !important;
  z-index: -1;
}

/* Error message styling */
.error-message {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  text-align: left;
}

/* Success message styling */
.success-message {
  color: #2e7d32;
  font-size: 1rem;
  margin-top: 1rem;
  padding: 0.5rem;
  text-align: center;
  background-color: rgba(46, 125, 50, 0.1);
  border-radius: 4px;
}

/* Focus styles for better keyboard navigation */
.sh-delete-voucher:focus,
.sh-delete-voucher:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
  position: relative;
  z-index: 2;
}

/* Remove default focus styles for mouse users, but keep them for keyboard */
.sh-delete-voucher:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Make delete button more accessible */
.sh-delete-voucher {
  cursor: pointer;
}

/* Improve focus visibility on form elements */
input[aria-invalid="true"] {
  border-color: #d32f2f;
  background-color: rgba(211, 47, 47, 0.05);
}

/* Ensure sufficient contrast for placeholder text */
::placeholder {
  color: #767676;
  opacity: 1;
}