/* EMERGENCY MOBILE CSS - OVERRIDES EVERYTHING */
/* This file forces iPhone compatibility with maximum priority */

/* Target ALL mobile devices aggressively */
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
  
  /* FORCE body and html to allow scrolling */
  html, body {
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* FORCE root container to be scrollable */
  #root {
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* EMERGENCY MODAL OVERRIDE - targets any fixed positioned div */
  div[style*="position: fixed"],
  div[style*="position:fixed"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  
  /* FORCE modal content to be properly sized */
  div[style*="borderRadius: 12"],
  div[style*="border-radius: 12"] {
    position: relative !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
    margin: 10px auto 60px auto !important;
    padding: 20px !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
  }
  
  /* FORCE form elements to be visible and accessible */
  form {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* FORCE all input fields to be visible */
  input[type="text"], 
  input[type="email"], 
  input[type="tel"], 
  input[type="number"],
  select, 
  textarea {
    width: 100% !important;
    min-height: 44px !important;
    margin-bottom: 15px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevents zoom on iPhone */
  }
  
  /* FORCE labels to be visible */
  label {
    display: block !important;
    margin-bottom: 5px !important;
    width: 100% !important;
  }
  
  /* FORCE buttons to be touch-friendly */
  button {
    min-height: 44px !important;
    margin: 15px 5px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
  }
  
  /* FORCE button containers to have extra space */
  div[style*="display: flex"][style*="justifyContent"],
  div[style*="display: flex"][style*="justify-content"] {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
  }
  
  /* ENSURE form elements have bottom spacing */
  form {
    padding-bottom: 120px !important;
    margin-bottom: 60px !important;
  }
  
  /* ENSURE modal content has massive bottom spacing for iPhone */
  div[style*="borderRadius: 12"] form,
  div[style*="border-radius: 12"] form {
    padding-bottom: 150px !important;
    margin-bottom: 80px !important;
  }
  
  /* FORCE button containers to be visible on iPhone */
  div[style*="justifyContent: space-between"],
  div[style*="justify-content: space-between"] {
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    padding: 20px 0 !important;
  }
  
  /* Remove any height restrictions */
  div[style*="maxHeight"],
  div[style*="max-height"] {
    max-height: none !important;
  }
  
  div[style*="height: 100vh"],
  div[style*="height:100vh"] {
    height: 100% !important;
  }
}

/* SUPER EMERGENCY - iPhone specific override */
@media screen and (max-width: 428px) {
  
  /* Nuclear option - override ALL positioning */
  * {
    box-sizing: border-box !important;
  }
  
  /* FORCE viewport to be taller */
  html {
    min-height: 200vh !important;
  }
  
  body {
    min-height: 200vh !important;
  }
  
  /* ULTRA aggressive modal content spacing */
  div[style*="background: #fff"] {
    padding-bottom: 300px !important;
    margin-bottom: 200px !important;
    min-height: calc(100vh + 300px) !important;
  }
  
  /* FORCE button container to be visible with massive spacing */
  div[style*="justifyContent: flex-end"] {
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    padding: 30px 0 !important;
    margin-top: 50px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    border-top: 1px solid #eee !important;
    z-index: 9999 !important;
  }
  
  /* Make buttons bigger for iPhone */
  button {
    min-height: 48px !important;
    font-size: 18px !important;
    padding: 15px 25px !important;
  }
  
  /* FORCE viewport to be taller */
  html {
    min-height: 200vh !important;
  }
  
  /* ULTRA aggressive modal content spacing */
  div[style*="background: #fff"] {
    padding-bottom: 200px !important;
    margin-bottom: 150px !important;
    min-height: calc(100vh + 200px) !important;
  }
  
  /* FORCE button container to bottom with massive spacing */
  div[style*="justifyContent: space-between"] {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    background: white !important;
    padding: 20px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    border-radius: 12px 12px 0 0 !important;
    z-index: 9999 !important;
  }
  
  /* Force ANY modal-like container to be scrollable */
  div[style*="zIndex: 1000"],
  div[style*="z-index: 1000"],
  div[style*="zIndex:1000"],
  div[style*="z-index:1000"] {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
  }
  
  /* Force content visibility */
  div[style*="background: #fff"],
  div[style*="background:#fff"],
  div[style*="background: rgb(255, 255, 255)"] {
    position: relative !important;
    height: auto !important;
    min-height: fit-content !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto 120px auto !important;
    padding-bottom: 120px !important;
  }
  
  /* ULTIMATE bottom spacing for all buttons */
  button[style*="marginRight"],
  button[style*="margin-right"],
  button {
    margin-bottom: 30px !important;
  }
}