@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);
/* Global Animation Fixes for Mobile */
@media (max-width: 768px) {
  /* Fix for mobile animation timing issues */
  * {
    animation-duration: calc(1 * 1.5) !important;
    animation-duration: calc(var(--animation-duration, 1) * 1.5) !important;
    transition-duration: calc(0.3s * 2) !important;
    transition-duration: calc(var(--transition-duration, 0.3s) * 2) !important;
  }
  
  /* Disable problematic animations entirely on mobile */
  *[class*="float"],
  *[class*="bounce"],
  *[class*="pulse"] {
    animation: none !important;
  }
  
  /* Force hardware acceleration only for animated elements */
  *[style*="transition"],
  *[style*="animation"],
  .animated-element {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: "DM Sans", sans-serif;
}

/* Ensure modals and overlays work properly on mobile */
@media (max-width: 768px) {
  /* Fix for React Portal z-index issues on mobile */
  [data-react-portal] {
    position: relative !important;
    z-index: 9999 !important;
  }
  
  /* Ensure fixed positioning works on mobile */
  .chakra-portal {
    position: relative !important;
    z-index: 9999 !important;
  }
  
  /* Fix viewport issues on mobile */
  html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }
  
  /* Prevent zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }
}

option {
  color: black;
}

iframe { display: none;}

.iframe {display:none;}


.apply-filters-button {
  display: block;
  margin: 20px auto 0; /* Adjust the margin-top value as needed */
}

/* Range Slider Thumb Styles for Better Mobile Support */
.range-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}

/* Chrome and Safari styling */
.range-slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #3182ce; /* Blue color */
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  will-change: transform;
}

/* Firefox styling */
.range-slider-thumb::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #3182ce; /* Blue color */
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  will-change: transform;
}

/* Edge and IE styling */
.range-slider-thumb::-ms-thumb {
  width: 24px;
  height: 24px;
  background: #3182ce; /* Blue color */
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  will-change: transform;
}

/* Active state for better touch feedback */
.range-slider-thumb:active::-webkit-slider-thumb {
  background: #2b6cb0; /* Darker blue when active */
  transform: scale(1.1) translateZ(0);
  -webkit-transition: transform 0.1s ease-out, background-color 0.1s ease-out;
  transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

.range-slider-thumb:active::-moz-range-thumb {
  background: #2b6cb0; /* Darker blue when active */
  transform: scale(1.1) translateZ(0);
  -moz-transition: transform 0.1s ease-out, background-color 0.1s ease-out;
  transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

.range-slider-thumb:active::-ms-thumb {
  background: #2b6cb0; /* Darker blue when active */
  transform: scale(1.1) translateZ(0);
  -ms-transition: transform 0.1s ease-out, background-color 0.1s ease-out;
  transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

/* Focus styles for accessibility */
.range-slider-thumb:focus {
  outline: none;
}

.range-slider-thumb:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
}

.range-slider-thumb:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
}

.range-slider-thumb:focus::-ms-thumb {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
}

/* Mobile specific optimizations */
@media (max-width: 768px) {
  /* Reduce animation complexities on mobile */
  * {
    transition-duration: 0.15s !important;
    animation-duration: 0.15s !important;
  }
  
  /* Enable hardware acceleration on interactive elements */
  button, 
  input, 
  .range-slider-thumb, 
  [role="button"],
  [role="slider"] {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
  }
  
  /* Simplify shadows on mobile for better performance */
  [class*="shadow"], 
  [style*="box-shadow"] {
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
  }
}