/**
 * Enhanced Accessibility Widget Styles
 * Provides comprehensive styling for accessibility features
 */

/* Floating Accessibility Widget Styles */
.floating-accessibility-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.floating-accessibility-trigger {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #01c18b, #006098);
  color: white;
  border: none;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.floating-accessibility-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 123, 255, 0.5);
  color: white;
}

.floating-accessibility-trigger:focus {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
  color: white;
}

.floating-accessibility-widget .accessibility-dropdown {
  position: absolute;
  left: 70px;
  bottom: 0;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  border: 0.5px solid #006098;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

  /* Mobile adjustments - Desktop: bottom left, Mobile: bottom right */
  @media (max-width: 768px) {
    .floating-accessibility-widget {
      right: 15px;
      left: auto;
      bottom: 100px;
    }
    
    .floating-accessibility-trigger {
      width: 50px;
      height: 50px;
      font-size: 1.3rem;
    }
    
    .floating-accessibility-widget .accessibility-dropdown {
      right: 0 !important;
      left: auto !important;
      bottom: 60px !important;
      top: auto !important;
      /* width: 310px !important; */
      transform: none !important;
    }
  }

  @media (max-width: 480px) {
    .floating-accessibility-widget .accessibility-dropdown {
      right: 0 !important;
      left: auto !important;
      bottom: 60px !important;
      top: auto !important;
      /* width: 310px !important; */
      transform: none !important;
    }
  }

/* Widget Base Styles */
.accessibility-widget .accessibility-trigger {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.2em;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.accessibility-widget .accessibility-trigger:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.accessibility-dropdown {
  border: 2px solid #007bff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  overflow-y: auto;
  /* Let Bootstrap 5 handle all positioning */
}

/* Accessibility sections */
.accessibility-section {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1rem;
}

.accessibility-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.accessibility-section h5 {
  color: #495057;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Form Controls */
.accessibility-dropdown .form-check {
  margin-bottom: 0.5rem;
}

.accessibility-dropdown .form-check-label {
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.accessibility-dropdown .form-check-input {
  cursor: pointer;
}

.accessibility-dropdown .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Font Size Controls */
.font-size-indicator {
  font-weight: 600;
  color: #495057;
  min-width: 80px;
  text-align: center;
  font-size: 0.85rem;
}

/* Header styling */
.accessibility-header {
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.accessibility-header h4 {
  color: #343a40;
  font-weight: 600;
  margin: 0;
}

/* Accessibility Features CSS */

/* High Contrast Mode */
.accessibility-high-contrast {
  background: #000000 !important;
  color: #ffffff !important;
}

.accessibility-high-contrast * {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.accessibility-high-contrast a,
.accessibility-high-contrast button {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

.accessibility-high-contrast a:hover,
.accessibility-high-contrast button:hover {
  color: #ffffff !important;
  background-color: #ffff00 !important;
}

.accessibility-high-contrast input,
.accessibility-high-contrast textarea,
.accessibility-high-contrast select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

.accessibility-high-contrast .accessibility-dropdown {
  background: #000000 !important;
  border-color: #ffffff !important;
}

/* Highlight Links */
.accessibility-highlight-links a {
  background-color: #F4C55C !important;
  /* background-color: #01c18b !important; */
  color: #000000 !important;
  text-decoration: underline !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-weight: bold !important;
  box-shadow: 0 0 3px rgba(255, 255, 0, 0.5) !important;
}

.accessibility-highlight-links a:hover {
  background-color: #006098 !important;
  color: #ffffff !important;
}

/* Big Cursor */
.accessibility-big-cursor,
.accessibility-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><polygon points="0,0 0,24 8,18 12,26 18,22 10,16 24,16" fill="black" stroke="white" stroke-width="2"/></svg>') 2 2, auto !important;
}

.accessibility-big-cursor a,
.accessibility-big-cursor button,
.accessibility-big-cursor [role="button"],
.accessibility-big-cursor input[type="submit"],
.accessibility-big-cursor input[type="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="blue" stroke="white" stroke-width="2"/><polygon points="16,8 20,12 18,12 18,20 14,20 14,12 12,12" fill="white"/></svg>') 16 16, pointer !important;
}

/* Pause Animations */
.accessibility-no-animations *,
.accessibility-no-animations *::before,
.accessibility-no-animations *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
}

/* Dyslexia-Friendly Font */
.accessibility-dyslexia-font,
.accessibility-dyslexia-font * {
  font-family: 'Comic Sans MS', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.8 !important;
}

/* Text Spacing */
.accessibility-text-spacing {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.8 !important;
}

.accessibility-text-spacing * {
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
  line-height: inherit !important;
}

.accessibility-text-spacing p,
.accessibility-text-spacing div,
.accessibility-text-spacing span,
.accessibility-text-spacing li {
  margin-bottom: 0.5em !important;
}