/* Accessibility Button
Added by: John Carlo Tulin @ 07/04/25*/

/* Drag indicator */
.accessibility-toggle::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.accessibility-toggle.dragging::after {
  border-color: rgba(46, 170, 66, 0.3);
  animation: dragPulse 1s infinite;
}

/* Widget UI */
.accessibility-toggle {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: #2eaa42;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: none;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  /* Drag animations */
  transition:
    left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.1s ease;
}

.accessibility-toggle.dragging {
  transition: none;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(46, 170, 66, 0.4);
}

.accessibility-toggle img {
  width: 30px;
  height: 30px;
}


/* Panel slide-in animation */
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Button hover animations */
.accessibility-toggle:hover {
  transform: translateY(-50%) scale(1.05);
  transition: transform 0.2s ease;
}

.accessibility-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

@keyframes dragPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

#accessibility-wrapper {
  margin: 40px;
  padding: 20px;
  border: 1px solid #ccc;
}

/* Accessibility Panel Attributes */
.accessibility-panel {
  font-size: 16px !important;
  position: fixed;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  border-radius: 20px;
  padding: 20px;
  z-index: 9999;
  width: 260px;
  display: none;
  flex-direction: column;
  gap: 15px;
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* This ensures Bootstrap's .card doesn't shrink or grow due to rem changes */
.accessibility-panel.card {
  font-size: 16px !important;
  padding: 20px !important;
  margin: 0 !important;
  border-radius: 20px !important;
}

/* Override Bootstrap rem styles inside panel only */
.accessibility-panel.card * {
  font-size: 16px !important;
  /* avoid rem inheritance */
  line-height: 1.4;
  /* Optional: stabilize layout */
}


.accessibility-panel.show {
  display: flex;
  animation: panelSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accessibility-panel.left-side {
  right: auto;
  left: 80px;
}

.accessibility-panel.right-side {
  left: auto;
  right: 80px;
}

#accessibilityPanel {
  font-size: 18px !important;
}

#accessibilityPanel.card {
  padding: 16px !important;
  margin: 10px !important;
  border-radius: 6px !important;
}

#accessibilityPanel.card * {
  font-size: 18px !important;
  padding: 5px !important;
  /* or use specific px values if needed */
  margin: 0px !important;
}

/* ------------------------------------
   1) Core dark‑mode: page background & text
--------------------------------------- */

.accessibility-dark {
  background-color: #000000;
  color: #ffffff !important;
}

.accessibility-dark a,
.accessibility-dark p,
.accessibility-dark h1,
h2,
h3,
h4,
h5,
h6,
.accessibility-dark small,
.accessibility-dark i,
.accessibility-dark .bi,
.accessibility-dark .fw-normal,
.accessibility-dark .fw-bold,
.accessibility-dark .text-black,
.accessibility-dark .text-secondary,
.accessibility-dark .text-white,
.accessibility-dark .text-muted,
.accessibility-dark .text-dark,
.accessibility-dark .link-dark {
  color: #fff !important;
}

.accessibility-dark input::placeholder,
.accessibility-dark textarea::placeholder {
  color: #e8e8e8 !important;
}

.accessibility-dark .card-body {
  background-color: #000 !important;
  background: #000 !important;
}

.accessibility-dark .card-header {
  background-color: #000 !important;
  background: #000 !important;
  border: 1px solid #fff;
}

/* Scrollbar */

.accessibility-dark::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.accessibility-dark::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.accessibility-dark::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
  border: 2px solid #1e1e1e;
}

/* Firefox */
.accessibility-dark {
  scrollbar-width: thin;
  scrollbar-color: #555 #1e1e1e;
}


.accessibility-dark .tag,
.accessibility-dark .navbar-btn,
.accessibility-dark #createAnAccountBtn,
.accessibility-dark dropdown,
.accessibility-dark .btn,
.accessibility-dark .rounded,
.accessibility-dark .border,
.accessibility-dark .social-circle,
.accessibility-dark .form-control,
.accessibility-dark #show-login-modal,
.accessibility-dark #contactForm_PWD {
  background-color: #000 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  /* white outline */
}

.accessibility-dark footer,
.accessibility-dark span,
.accessibility-dark #login-content,
.accessibility-dark .kickstart-hero-container {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

.accessibility-dark nav {
  background: #000;
  background-color: #000;
  color: #fff;
}

.accessibility-dark .navbar {
  background: #000;
  background-color: #000;
  color: #fff;
}

/* === Reset SweetAlert2 error icon background and colors inside accessibility-dark === */

/* White background for the SweetAlert popup container */
.accessibility-dark .swal2-popup {
  background-color: #000000 !important;
  color: #fff !important;
  /* default text color white */
  border: none !important;
  /* optional: remove border */
}

/* White text color for the title */
.accessibility-dark .swal2-title {
  color: #fff !important;
}

/* White text color for the body text */
.accessibility-dark .swal2-html-container {
  color: #fff !important;
}

/* Keep error icon red circle with white X */
.accessibility-dark .swal2-icon.swal2-error {
  background-color: #f27474 !important;
  /* red circle */
  border-color: #f27474 !important;
  color: #fff !important;
  filter: none !important;
}

/* White “X” lines inside the error icon */
.accessibility-dark .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: #fff !important;
}

/* Keep success icon green circle with white checkmark */
.accessibility-dark .swal2-icon.swal2-success {
  background-color: #a5dc86 !important;
  /* green circle */
  border-color: #a5dc86 !important;
  color: #fff !important;
  filter: none !important;
}

/* White checkmark lines inside the success icon */
.accessibility-dark .swal2-icon.swal2-success .swal2-success-line-tip,
.accessibility-dark .swal2-icon.swal2-success .swal2-success-line-long {
  background-color: #fff !important;
  border: none !important;
  opacity: 1 !important;
}


/* Remove filters or overrides on all SweetAlert icons */
.accessibility-dark .swal2-icon * {
  filter: none !important;
  color: initial !important;
  fill: initial !important;
  stroke: initial !important;
  background: none !important;
}


.accessibility-dark .btn-close {
  --bs-btn-close-color: #fff !important;
}

.accessibility-dark .create-account-banner {
  background: #000 !important;
  background-color: #000 !important;
  border-top: 1px solid #fff;
}

/* Dark mode for navbar dropdown */
.accessibility-dark .dropdown-menu {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff
}

.accessibility-dark .dropdown-menu .dropdown-item {
  background-color: transparent !important;
  color: #fff !important;
}

.accessibility-dark .dropdown-menu .dropdown-item:hover,
.accessibility-dark .dropdown-menu .dropdown-item:focus {
  background-color: #222 !important;
  color: #fff !important;
}

/* Also apply to nav button */
.accessibility-dark .nav-link,
.accessibility-dark .nav-link.dropdown-toggle {
  color: #fff !important;
}

/* ------------------------------------
   2) Dark‑mode for your widget UI
--------------------------------------- */
.accessibility-dark .accessibility-toggle {
  background-color: #000;
  /* darker button */
  color: #fff;
  /* invert icon color */
  border: 1px solid #fff;
  /* white outline */
}

.accessibility-dark .accessibility-panel {
  background-color: #000;
  /* darker panel */
  color: #fff;
  /* white labels/text */
  border: 1px solid #fff;
  /* white outline */
}

.accessibility-dark .accessibility-panel .option-group button {
  background-color: #000;
  /* button bg */
  color: #fff;
  /* button text */
  border: 1px solid #fff;
  /* white outline */
}

.accessibility-dark .accessibility-panel .option-group button.active {
  background-color: #fff;
  /* invert for “active” */
  color: #000;
}

.accessibility-dark,
.accessibility-dark .accessibility-toggle,
.accessibility-dark .accessibility-panel,
.accessibility-dark .accessibility-panel .option-group button,
.accessibility-dark .accessibility-panel .option-group button.active {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}


.accessibility-dark .modal-content {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff;
}

.accessibility-dark .modal-header,
.accessibility-dark .modal-body {
  border-color: #fff;
}

.accessibility-dark .modal-title {
  color: #fff !important;
}

.accessibility-dark .btn-close {
  filter: invert(1);
  /* white close icon */
}

.accessibility-dark .small,
.accessibility-dark p,
.accessibility-dark h6,
.accessibility-dark span,
.accessibility-dark strong {
  color: #fff !important;
}

.accessibility-dark .badge.bg-danger,
.accessibility-dark .badge.bg-success {
  color: #fff !important;
}

.accessibility-dark .border-success {
  border-color: #198754 !important;
}

/* Dark mode modal button */
.accessibility-dark .modal-btn {
  background-color: #000 !important;
  color: white !important;
  border: 1px solid white;
  border-radius: 10px;
}

.accessibility-dark #close-modal-button {
  background-color: #000 !important;
  color: white !important;
  border: 1px solid white;
  border-radius: 10px;
}

.accessibility-dark .information-entry-modal {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

.accessibility-dark .text-highlight {
  background-color: transparent !important;
  /* no highlight background */
  color: #adb5bd !important;
  /* Bootstrap text-secondary (muted gray) */
}

.accessibility-dark .text-mode-toggle {
  color: #fff !important;
  /* white */
}

.accessibility-dyslexia {
  font-family: 'Lexend', sans-serif !important;
}

/* Low Saturation */

.accessibility-low-saturation {
  position: relative;
  /* establish stacking context for the pseudo */
}

.accessibility-low-saturation .btn {
  /*background: linear-gradient(241deg, #6EBD6F 0%, #486946 100%);background: linear-gradient(241deg, #6EBD6F 0%, #486946 100%) !important;*/
  transition: background 0.3s ease;
  /* Ensures smooth animation */
}

/* 2) …and add a ::before that sits under your nav but over the content */
.accessibility-low-saturation::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  backdrop-filter: saturate(50%);
  -webkit-backdrop-filter: saturate(50%);
  z-index: 1;
  /* layer just above content */
}

/* High Saturation */

/* Establish a stacking context on the root element */
.accessibility-high-saturation {
  position: relative;
}

.accessibility-high-saturation .btn {
  /*background: linear-gradient(241deg, #00FF22 0%, #007F00 100%) !important;*/
  transition: background 0.3s ease;
  /* Ensures smooth animation */
}

/* Full‑page overlay that boosts saturation behind it */
.accessibility-high-saturation::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* let clicks pass through */
  backdrop-filter: saturate(150%);
  /* or whatever “high” value you prefer */
  -webkit-backdrop-filter: saturate(150%);
  z-index: 1;
  /* just above your content */
}

/* Invert contrast */

/* Establish stacking context on the root wrapper */
.accessibility-invert-contrast {
  position: relative;
}


.accessibility-invert-contrast .navbar {
  background: black !important;
}

.accessibility-invert-contrast.accessibility-dark .navbar {
  background: white !important;
}

/* Mobile Modal Landing Page */
.accessibility-invert-contrast .modal-content {
  filter: invert(100%) hue-rotate(0deg);
}

.accessibility-invert-contrast.accessibility-dark nav {
  background: transparent !important;
}

.accessibility-invert-contrast .navbar .text-black,
.accessibility-invert-contrast .navbar .dropdown-menu {
  background-color: black !important;
  color: white !important;
}

.accessibility-invert-contrast.accessibility-dark .navbar .text-black,
.accessibility-invert-contrast.accessibility-dark .navbar .dropdown-menu {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

.accessibility-invert-contrast .navbar .btn {
  background: black !important;
  border: 1px solid #F08BEB !important;
  color: #F08BEB !important;
}

.accessibility-invert-contrast.accessibility-dark .navbar .btn {
  background: rgb(255, 255, 255) !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
}

.accessibility-invert-contrast #createAnAccountBtn {
  background: black !important;
  color: #F08BEB !important;
  border: 1px solid #F08BEB !important;
}

.accessibility-invert-contrast.accessibility-dark #createAnAccountBtn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000 !important;
}



/* Pseudo‑element overlay to invert everything behind it */
.accessibility-invert-contrast::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  backdrop-filter: invert(100%);
  -webkit-backdrop-filter: invert(100%);
  z-index: 1;
}

.accessibility-invert-contrast img {
  filter: invert(100%) hue-rotate(180deg);
}

.accessibility-invert-contrast .modal-logo {
  filter: hue-rotate(0deg) !important;
}

.accessibility-invert-contrast .rounded-pill,
.accessibility-invert-contrast .card-title,
.accessibility-invert-contrast .card-text {
  filter: invert(100%) !important;
}

.accessibility-invert-contrast .background-lottie.bg-gradient {
  filter: invert(100%) hue-rotate(0deg);
}

.accessibility-invert-contrast .invert-safe {
  filter: invert();
  position: relative;
  z-index: 10;
}

.invert-image {
  filter: invert(100%) !important;
}