/* Global styles for responsive design */

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  /* Chakra UI components */
  .chakra-container, .chakra-stack, .chakra-box {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure buttons and inputs are properly sized */
  .chakra-button, .chakra-input {
    height: auto !important;
    min-height: 44px !important;
  }
  
  /* Form elements */
  input, button, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* Specific layout improvements */
  .chakra-heading {
    font-size: 1.75rem !important;
  }
  
  .chakra-text {
    font-size: 1rem !important;
  }
}

/* Fix for Flex components in mobile view */
@media (max-width: 480px) {
  /* Ensure proper scaling on very small screens */
  html {
    font-size: 14px;
  }
  
  /* Adjust Flex components to stack properly */
  .chakra-flex {
    flex-direction: column !important;
  }
  
  /* Ensure Box containers fit mobile screens */
  .chakra-box {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 1rem !important;
  }
}