.accessibility-controls-panel {
  position: fixed;
  top: 80px;
  right: -560px; /* დამალული მარჯვენ მხარეს */
  width: 544px;
  max-height: calc(100vh - 84px); /* Dynamic height based on viewport */
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
  border-radius: 4px;
  border: 0.5px solid var(--sds-color-border-brand-tertiary);
  background: var(--sds-color-background-default-secondary);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

/* პანელის გახსნილი მდგომარეობა */
.accessibility-controls-panel.open {
  right: 0px;
}

/* Backdrop overlay */
.accessibility-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.accessibility-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.header_accessibility_controls {
  display: flex;
  padding: 12px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: var(--sds-color-background-brand-tertiary);
}

.header_accessibility_title {
  color: var(--sds-color-text-brand-secondary);
  font-family: var(--font-family);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;

}

.reset_accessibility_btn {
 cursor: pointer;
  background-color: transparent;
}

.body_accessibility_controls {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.accessibility_btn_box_dif {
  width: calc(50% - 8px); /* 50% minus half of the gap */
  height: 180px;
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: 0.5px solid var(--sds-color-border-neutral-tertiary);
  background: var(--sds-color-background-default-secondary);
  transition: all 0.3s ease;

}

.accessibility_btn_box_dif:hover {
  border: 0.5px solid var(--sds-color-border-brand-default);
  background: var(--sds-color-background-brand-tertiary);
  transition: all 0.3s ease;
}

.accessibility_active {
  border: 0.5px solid var(--sds-color-border-brand-default)!important;
  background: var(--sds-color-background-brand-tertiary-hover)!important;
}

/* Clickable accessibility box - როდესაც მთელი box არის დაჭერადი */
.accessibility_clickable_box {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.accessibility_clickable_box:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

.accessibility_clickable_box:active {
  transform: scale(0.98);
}

/* Hide Images Mode - სურათების დამალვა */
body.hide-images img:not(.napr_icons):not([src*="logo"]):not(.icon),
body.hide-images picture,
body.hide-images video,
body.hide-images iframe[src*="youtube"],
body.hide-images iframe[src*="vimeo"],
body.hide-images [style*="background-image"]:not(body):not(html) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* არ დამალოს Material Icons და სხვა icon fonts მხოლოდ header და accessibility panel-ში */
body.hide-images .container .material-symbols-outlined,
body.hide-images .accessibility-controls-panel .material-symbols-outlined,
body.hide-images .mob_burger_content .material-symbols-outlined,
body.hide-images .accessibility_new_image,
body.hide-images .sun_moon_image,
body.hide-images .material-icons,
body.hide-images [class*="icon-"],
body.hide-images svg:not(.backgrop_background_search svg) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Optional: ჩვენება placeholder-ის */
body.hide-images img:not(.napr_icons):not([src*="logo"])::before {
  content: attr(alt);
  display: block;
  padding: 20px;
  background: var(--sds-color-background-default-tertiary);
  border: 1px dashed var(--sds-color-border-default);
  color: var(--sds-color-text-default-secondary);
  text-align: center;
  font-size: 14px;
}





.accessibility_btn_box {
  width: calc(50% - 8px); /* 50% minus half of the gap */
  height: 180px;
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: 0.5px solid var(--sds-color-border-neutral-tertiary);
  background: var(--sds-color-background-default-secondary);
  transition: all 0.3s ease;
}

.accessibility_btn_box:hover {
  border: 0.5px solid var(--sds-color-border-brand-default);
  background: var(--sds-color-background-brand-tertiary);
  transition: all 0.3s ease;
}

.accessibility_btn_box_full {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
   border-radius: 4px;
  border: 0.5px solid var(--sds-color-border-neutral-tertiary);
  background: var(--sds-color-background-default-secondary);
  transition: all 0.3s ease;
  height: 180px;
}

.accessibility_btn_box_full:hover {
  border: 0.5px solid var(--sds-color-border-brand-default);
  background: var(--sds-color-background-brand-tertiary);
  transition: all 0.3s ease;
}

.box_accessibility_item_center {
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
}

.circle_icon_acc {
  display: flex;
  padding: 12px;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  border: 1px solid var(--sds-color-border-neutral-tertiary);
  background: var(--Background-Default-Primary, #FAFAFA);
}

.header_accessibility_subtitle {
  color: var(--sds-color-text-brand-secondary);
  font-family: var(--font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.box_accessibility_item {
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: flex-start;
}
.acc_col_flex {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.default_accessibility_settings {
   display: flex;
  width: 100%;
  padding: var(--Space-100, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--Space-050, 4px);
  align-self: stretch;
  border-radius: var(--Space-050, 4px);
  cursor: pointer;
  background: var(--sds-color-background-disabled-default);
}

.default_accessibility_settings.reset_accessibility_settings {
   background: var(--sds-color-background-brand-default)!important;
   cursor: pointer;
}

.default_accessibility_text {
  color: var(--sds-color-text-disabled-default);
   /* Georgian/Label/Small */
  font-family: var(--font-family);
  font-size: var(--Scales-Scale-03, 13px);
  font-style: normal;
  font-weight: var(--Weights-Weight-Medium, 500);
  line-height: var(--Line-Heights-Line-Height-01, 20px); /* 153.846% */
  letter-spacing: 0.13px;
}

.default_accessibility_text.reset_accessibility_text {
  color: var(--sds-color-text-brand-on-brand)!important;
}

.default_accessibility_icon {
  /* SVG-ს Mask მეთოდი - როგორც accessibility_new_image-ში */
  -webkit-mask: url(/assets/icons/refresh.svg) no-repeat center;
  mask: url(/assets/icons/refresh.svg) no-repeat center;
  -webkit-mask-size: contain; /* contain ინარჩუნებს aspect ratio-ს და ხარისხს */
  mask-size: contain;
  background-color: #B0B0B0; /* Default ფერი - ნაცრისფერი */
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Active state - თეთრი ფერი როცა reset button active-ია */
.default_accessibility_settings.reset_accessibility_settings .default_accessibility_icon {
  background-color: #FFFFFF; /* Active ფერი - თეთრი */
}

.footer_accessibility_controls {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: var(--sds-color-background-default-secondary);
  position: relative;
  z-index: 10;
}


.active_accessibility {
  border-radius: 18px;
  border: 0.25px solid var(--sds-color-border-neutral-secondary);
  background: var(--sds-color-background-brand-default)!important;
}




.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-label {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.font-size-controls,
.contrast-controls {
    display: flex;
    gap: 8px;
}








/* კონტრასტის ღილაკები */
.contrast-btn {
    flex: 1;
}

.contrast-btn.active {
    background: rgba(74, 144, 226, 0.3);
    border-color: #4A90E2;
}

.contrast-icon {
    font-weight: bold;
    font-size: 18px;
}

.contrast-icon.high {
    text-shadow: 0 0 4px white;
}

.contrast-icon.bw {
    color: white;
    background: black;
    padding: 4px 8px;
    border-radius: 2px;
}

/* Screen reader only */
.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;
}

/* Accessibility - Focus indicators for interactive spans */
.close_icon_position_main:focus,
.delete_icon_position_main:focus,
.burger_bar:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Voice Assistant Controls */
.voice-assistant-controls {
    display: flex;
    gap: 8px;
}

.voice-assistant-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-width: auto;
}

.voice-assistant-btn .voice-icon {
    font-size: 20px;
}

.voice-assistant-btn .voice-status {
    font-size: 14px;
    font-weight: 500;
}

.voice-assistant-btn.active {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4CAF50;
}

.voice-assistant-btn:not(.active) {
    background: rgba(244, 67, 54, 0.3);
    border-color: #F44336;
}

.voice-assistant-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}

/* Georgian Voice Warning */
.georgian-warning {
    margin-top: 4px;
}

.georgian-warning small {
    color: #FFA500;
    font-size: 11px;
    display: block;
    line-height: 1.3;
}

/* Cursor Size Controls */
.cursor-size-controls {
    display: flex;
    gap: 8px;
}

.cursor-size-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-width: auto;
}

.cursor-size-btn .cursor-icon {
    font-size: 20px;
}

.cursor-size-btn .cursor-status {
    font-size: 14px;
    font-weight: 500;
}

.cursor-size-btn.active {
    background: rgba(255, 152, 0, 0.3);
    border-color: #FF9800;
}

/* Custom Default Cursor - cursor20.svg (20x20) */
body {
    cursor: url('/assets/icons/cursor20.svg') 6 6, auto;
}

/* Large Cursor Mode - Enlarge ALL cursors with CSS transform */
body.large-cursor {
    cursor: url('/assets/icons/cursor.svg') 12 12, auto !important;
}

body.large-cursor * {
    cursor: inherit;
}

/* Enlarge pointer cursor for interactive elements */
body.large-cursor a,
body.large-cursor button,
body.large-cursor [role="button"],
body.large-cursor input[type="submit"],
body.large-cursor input[type="button"] {
    cursor: url('/assets/icons/cursor-pointer.svg') 16 6, pointer !important;
}

body.large-cursor input:not([type="submit"]):not([type="button"]),
body.large-cursor textarea,
body.large-cursor select {
    cursor: url('/assets/icons/cursor-text.svg') 24 24, text !important;
}




.accessibility_new_image {
    width: 24px;
    height: 24px;
   -webkit-mask: url(/assets/icons/accessibility_icon.svg) no-repeat center;
  mask: url(/assets/icons/accessibility_icon.svg) no-repeat center;
  -webkit-mask-size: cover;
  mask-size: cover;
    background-color: var(--text-primary, #000);
}

.active_accessibility_icon_white {
    background-color: var(--sds-color-text-on-brand, #FFF)!important;
}

.accessibility_new_switch {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
       border: 1px solid var(--outline, #888);
    border-color: rgba(136, 136, 136, 0.25);
    background: var(--background-dim, #f6f6f6);
    cursor: pointer;
    transition: all 0.3s linear;

}
.accessibility_new_switch:hover {
    background: var(--sds-color-background-default-secondary-hover);
  transition: all 0.3s linear;
}

.accessibility_new_switch:hover .accessibility_new_image,
.accessibility_new_switch:focus .accessibility_new_image {
    background-color: var(--primary, #4A90E2);
    transition: all 0.3s linear;
}

/* ============================================================================
   RESPONSIVE STYLES - ACCESSIBILITY PANEL
   ============================================================================ */

/* Tablet - 768px - 1024px */
@media (max-width: 1024px) {
  .accessibility-controls-panel {
    width: 480px;
    right: -480px;
    max-height: calc(100vh - 80px);
    top: 80px;
  }

  .accessibility-controls-panel.open {
    right: 0;
  }

  .accessibility_btn_box,
  .accessibility_btn_box_dif {
    width: calc(50% - 8px); /* 50% minus half of the gap */
    height: 160px;
    padding: 12px;
  }

  .circle_icon_acc {
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .circle_icon_acc img {
    width: 24px;
    height: 24px;
  }

  .header_accessibility_title {
    font-size: 16px;
    line-height: 24px;
  }

  .header_accessibility_subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  .body_accessibility_controls {
    padding: 12px;
    gap: 12px;
  }

  .accessibility_btn_box_full {
    height: 160px;
  }
}

/* Mobile Large - 481px - 767px */
@media (max-width: 767px) {
  .accessibility-controls-panel {
    width: 100%;
    right: -100%;
    top: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .accessibility-controls-panel.open {
    right: 0;
  }

  .body_accessibility_controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;
    padding-bottom: 80px;
    gap: 12px;
  }

  .accessibility_btn_box,
  .accessibility_btn_box_dif {
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 16px;
  }

  .accessibility_btn_box_full {
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 16px;
    grid-column: 1 / -1; /* Full width - spans both columns */
  }

  .header_accessibility_controls {
    padding: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .header_accessibility_title {
    font-size: 16px;
    line-height: 24px;
  }

  .header_accessibility_subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .circle_icon_acc {
    width: 52px;
    height: 52px;
    padding: 12px;
  }

  .circle_icon_acc img {
    width: 28px;
    height: 28px;
  }

  /* Font size controls - რესპონსიულ განლაგება */
  .accessibility_btn_box_dif {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .box_accessibility_item {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .acc_col_flex {
    flex-direction: row;
    gap: 12px;
    width: 100%;
    justify-content: flex-end;
  }

  .acc_col_flex button {
    flex: 0 0 auto;
  }

  .footer_accessibility_controls {
    padding: 16px;
    position: sticky;
    bottom: 0;
    background: var(--sds-color-background-default-secondary);
    border-top: 0.5px solid var(--sds-color-border-brand-tertiary);
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }

  .default_accessibility_settings {
    padding: 12px 16px;
  }

  .default_accessibility_text {
    font-size: 14px;
  }

  /* Backdrop უფრო მუქი მობილურზე */
  .accessibility-backdrop {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* Mobile Small - 320px - 480px */
@media (max-width: 480px) {
  .accessibility-controls-panel {
    width: 100%;
    right: -100%;
  }

  .header_accessibility_title {
    font-size: 14px;
    line-height: 20px;
  }

  .header_accessibility_subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  .body_accessibility_controls {
    padding: 12px;
    gap: 10px;
  }

  .accessibility_btn_box,
  .accessibility_btn_box_dif,
  .accessibility_btn_box_full {
    min-height: 100px;
    padding: 12px;
  }

  .circle_icon_acc {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .circle_icon_acc img {
    width: 24px;
    height: 24px;
  }

  .header_accessibility_controls,
  .footer_accessibility_controls {
    padding: 12px;
  }

  .default_accessibility_settings {
    padding: 10px 12px;
  }

  .default_accessibility_text {
    font-size: 13px;
  }

  .reset_accessibility_btn img {
    width: 20px;
    height: 20px;
  }
}

/* Landscape orientation - მობილური landscape რეჟიმში */
@media (max-width: 767px) and (orientation: landscape) {
  .accessibility-controls-panel {
    max-height: 100vh;
    overflow-y: auto;
  }

  .header_accessibility_controls,
  .footer_accessibility_controls {
    position: static;
  }

  .body_accessibility_controls {
    padding-bottom: 80px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .accessibility-controls-panel {
    border: 2px solid var(--sds-color-border-brand-default);
  }

  .accessibility_btn_box,
  .accessibility_btn_box_dif,
  .accessibility_btn_box_full {
    border: 2px solid var(--sds-color-border-neutral-tertiary);
  }

  .accessibility_active {
    border: 2px solid var(--sds-color-border-brand-default) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .accessibility-controls-panel,
  .accessibility-backdrop,
  .accessibility_clickable_box,
  .reset_accessibility_btn {
    transition: none !important;
    animation: none !important;
  }
}

/* Dark mode adjustments for accessibility panel */
@media (prefers-color-scheme: dark) {
  .accessibility-backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
}