/* ==========================================================================
   Authentic Nepal Government PMO Accessibility Widget Styles
   Pixel-perfect replication modeled on opmcm.gov.np
   Color Theme: Official Government Blue (#0066cc)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Transformations (Applied to HTML/Body, Widget excluded)
   -------------------------------------------------------------------------- */

/* 1. Text Size */
html.snn-text-size-1 { font-size: 114% !important; }
html.snn-text-size-2 { font-size: 128% !important; }
html.snn-text-size-3 { font-size: 142% !important; }

/* 2. High Contrast */
html.snn-high-contrast-medium body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: contrast(1.35) !important;
}

html.snn-high-contrast-high,
html.snn-high-contrast-high body {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
}
html.snn-high-contrast-high body *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button):not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

html.snn-high-contrast-ultra,
html.snn-high-contrast-ultra body {
  background-color: #000000 !important;
  color: #ffff00 !important;
}
html.snn-high-contrast-ultra body *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button):not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

/* 3. Text Alignment */
html.snn-text-align-left p,
html.snn-text-align-left h1,
html.snn-text-align-left h2,
html.snn-text-align-left h3,
html.snn-text-align-left h4,
html.snn-text-align-left h5,
html.snn-text-align-left span,
html.snn-text-align-left li,
html.snn-text-align-left a {
  text-align: left !important;
}

html.snn-text-align-center p,
html.snn-text-align-center h1,
html.snn-text-align-center h2,
html.snn-text-align-center h3,
html.snn-text-align-center h4,
html.snn-text-align-center h5,
html.snn-text-align-center span,
html.snn-text-align-center li,
html.snn-text-align-center a {
  text-align: center !important;
}

html.snn-text-align-right p,
html.snn-text-align-right h1,
html.snn-text-align-right h2,
html.snn-text-align-right h3,
html.snn-text-align-right h4,
html.snn-text-align-right h5,
html.snn-text-align-right span,
html.snn-text-align-right li,
html.snn-text-align-right a {
  text-align: right !important;
}

/* 4. Color Filters */
html.snn-filter-protanopia body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: url('#protanopia-filter') !important;
}
html.snn-filter-deuteranopia body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: url('#deuteranopia-filter') !important;
}
html.snn-filter-tritanopia body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: url('#tritanopia-filter') !important;
}
html.snn-filter-grayscale body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: grayscale(100%) !important;
}

/* 5. Text Spacing */
html.snn-text-spacing-light *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
}
html.snn-text-spacing-medium *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  letter-spacing: 0.14em !important;
  word-spacing: 0.32em !important;
}
html.snn-text-spacing-heavy *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  letter-spacing: 0.22em !important;
  word-spacing: 0.55em !important;
}

/* 6. Line Height */
html.snn-line-height-1 *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  line-height: 1.8 !important;
}
html.snn-line-height-2 *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  line-height: 2.2 !important;
}
html.snn-line-height-3 *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  line-height: 2.6 !important;
}

/* 7. Font Selection */
html.snn-font-arial *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
html.snn-font-times *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  font-family: "Times New Roman", Times, Georgia, serif !important;
}
html.snn-font-verdana *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* 8. Saturation */
html.snn-saturation-low body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: saturate(0.4) !important;
}
html.snn-saturation-high body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: saturate(2.4) !important;
}
html.snn-saturation-none body > *:not(#snn-accessibility-backdrop):not(#snn-accessibility-menu):not(#snn-accessibility-fixed-button) {
  filter: grayscale(100%) !important;
}

/* 9. Dyslexia Friendly */
html.snn-dyslexia-font *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  font-family: "OpenDyslexic", "Comic Sans MS", "Chalkboard SE", cursive, sans-serif !important;
}

/* 10. Bigger Cursor */
html.snn-bigger-cursor,
html.snn-bigger-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='%230066cc' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M3 3l7.5 18 2.5-7.5 7.5-2.5z'/%3E%3C/svg%3E"), auto !important;
}
html.snn-bigger-cursor a,
html.snn-bigger-cursor button,
html.snn-bigger-cursor [role="button"],
html.snn-bigger-cursor select,
html.snn-bigger-cursor input {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='%230066cc' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M3 3l7.5 18 2.5-7.5 7.5-2.5z'/%3E%3Ccircle cx='18' cy='18' r='4' fill='%23ef4444' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E"), pointer !important;
}

/* 11. Hide Images */
html.snn-hide-images img:not(#snn-accessibility-menu img):not(#snn-accessibility-fixed-button img),
html.snn-hide-images picture:not(#snn-accessibility-menu picture),
html.snn-hide-images video,
html.snn-hide-images iframe:not(#snn-accessibility-menu iframe),
html.snn-hide-images [style*="background-image"]:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *) {
  opacity: 0.05 !important;
  visibility: hidden !important;
}

/* 12. Pause Animations */
html.snn-pause-animations *:not(#snn-accessibility-menu *):not(#snn-accessibility-fixed-button *),
html.snn-pause-animations *::before,
html.snn-pause-animations *::after {
  animation: none !important;
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Floating Trigger Button (#snn-accessibility-fixed-button)
   -------------------------------------------------------------------------- */

#snn-accessibility-fixed-button {
  position: fixed !important;
  bottom: 22px !important;
  right: 22px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

#snn-accessibility-button {
  background: #0066cc !important;
  border: 2.5px solid #ffffff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  width: 56px !important;
  height: 56px !important;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  outline: none !important;
  color: #ffffff !important;
}

#snn-accessibility-button:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.45) !important;
}

#snn-accessibility-button:active {
  transform: scale(0.96) !important;
}

#snn-accessibility-button svg {
  width: 32px !important;
  height: 32px !important;
  fill: #ffffff !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Backdrop Overlay
   -------------------------------------------------------------------------- */

#snn-accessibility-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.38) !important;
  z-index: 999998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

#snn-accessibility-backdrop.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   Side Drawer Modal (#snn-accessibility-menu)
   -------------------------------------------------------------------------- */

#snn-accessibility-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 350px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: #e5e8ec !important;
  z-index: 999999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

#snn-accessibility-menu.snn-menu-open {
  transform: translateX(0) !important;
}

/* Widget Container Isolation - NEVER affected by accessibility filters */
#snn-accessibility-menu,
#snn-accessibility-fixed-button,
#snn-accessibility-menu *,
#snn-accessibility-fixed-button * {
  filter: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Header Bar
   -------------------------------------------------------------------------- */

.snn-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: #0066cc !important;
  height: 60px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

.snn-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  flex: 1 !important;
  text-align: left !important;
  letter-spacing: 0.3px !important;
}

.snn-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.snn-reset-button,
.snn-close {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.2s ease !important;
  outline: none !important;
}

.snn-reset-button:hover,
.snn-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.snn-reset-button:focus,
.snn-close:focus {
  outline: 2px solid #ffffff !important;
}

.snn-reset-button svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.snn-close {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   Scrollable Body & Grid
   -------------------------------------------------------------------------- */

.snn-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 10px !important;
  scrollbar-width: thin !important;
}

.snn-options-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Option Card (.snn-accessibility-option)
   -------------------------------------------------------------------------- */

.snn-accessibility-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2.5px solid transparent !important;
  border-radius: 8px !important;
  padding: 10px 4px 8px 4px !important;
  min-height: 104px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  user-select: none !important;
  position: relative !important;
  width: 100% !important;
}

.snn-accessibility-option:hover {
  border-color: #0066cc !important;
  box-shadow: 0 3px 10px rgba(0, 102, 204, 0.18) !important;
  transform: translateY(-1px) !important;
}

.snn-accessibility-option:active {
  transform: translateY(0) !important;
}

.snn-accessibility-option.active {
  border-color: #0066cc !important;
}

.snn-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  color: #222222 !important;
  flex-shrink: 0 !important;
}

.snn-icon svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: block !important;
}

.snn-button-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  text-align: center !important;
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
}

/* --------------------------------------------------------------------------
   Step Indicators (3 horizontal dashes)
   -------------------------------------------------------------------------- */

.snn-option-steps {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.snn-option-step {
  width: 22px !important;
  height: 4.5px !important;
  border-radius: 2.5px !important;
  background-color: #cbd5e1 !important;
  transition: background-color 0.2s ease !important;
}

.snn-option-step.active {
  background-color: #0066cc !important;
}

/* Responsive adjustment */
@media (max-width: 480px) {
  #snn-accessibility-menu {
    width: 320px !important;
  }
  .snn-options-grid {
    gap: 8px !important;
  }
  .snn-accessibility-option {
    min-height: 98px !important;
  }
}