:root {
  --app-tabbar-height: 64px; /* Mobile bottom navigation bar height */
}

html,
body,
#root,
#root > div {
  width: 100%;
  height: 100%;
  height: 100dvh; /* Use dynamic viewport height for better mobile support */
  min-height: 100vh; /* Fallback for older browsers */
}

/* iPhone specific fixes */
@supports (-webkit-touch-callout: none) {
  html,
  body,
  #root,
  #root > div {
    height: 100%;
    height: 100dvh;
    min-height: 100vh;
  }
}
/* @media screen and (max-width: 768px) {
  html,
  body,
  #root,
  #root > div {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
} */


body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > iframe {
  display: none!important;
  z-index: -99999 !important;
}

.custom-slider{
  width: 100% !important;
}

/* Mobile viewport fixes */
@media screen and (max-width: 768px) {
  html,
  body,
  #root,
  #root > div {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Ensure full screen on mobile */
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Prevent mobile zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Material-UI specific selectors */
  .MuiInputBase-input,
  .MuiOutlinedInput-input,
  .MuiFilledInput-input,
  .MuiInput-input {
    font-size: 16px !important;
  }
  
  /* React-phone-number-input specific */
  .PhoneInputInput {
    font-size: 16px !important;
  }
}