/* Mobile Modal Fix - Load last to override everything else */

/* Only apply these styles when on mobile devices */
body[data-is-mobile="true"] #mobile-only-modal {
  /* Force modal to use fixed positioning at viewport level */
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  z-index: 9999 !important; /* Very high to ensure it's on top */
}

/* Override Bootstrap's transform that might interfere */
body[data-is-mobile="true"] #mobile-only-modal.modal.fade.show {
  transform: none !important;
}

/* Ensure backdrop covers everything */
body[data-is-mobile="true"] .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9998 !important;
}

/* Modal dialog specific overrides */
body[data-is-mobile="true"] #mobile-only-modal .modal-dialog {
  /* Reset Bootstrap's margins and positioning */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  
  /* Apply centering with transform */
  transform: translate(-50%, -50%) scale(var(--inverse-scale, 1)) !important;
  transform-origin: center center !important;
  
  /* Size based on inverse scale */
  width: min(90vw, calc(350px * var(--inverse-scale, 1))) !important;
  max-width: none !important;
  
  /* Ensure it doesn't go off screen */
  max-height: 90vh !important;
}

/* Alternative approach using viewport units directly */
@media (max-width: 768px) {
  body[data-is-mobile="true"] #mobile-only-modal .modal-dialog {
    /* Calculate size based on actual device dimensions */
    width: calc(var(--device-width, 375px) * 0.9) !important;
    font-size: calc(16px * var(--inverse-scale, 1)) !important;
  }
  
  body[data-is-mobile="true"] #mobile-only-modal .modal-content {
    /* Ensure content doesn't overflow */
    max-height: calc(var(--device-height, 812px) * 0.85) !important;
    overflow: hidden !important;
  }
  
  body[data-is-mobile="true"] #mobile-only-modal .modal-body {
    /* Make body scrollable with proper height */
    max-height: calc(var(--device-height, 812px) * 0.7) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Force hardware acceleration for smooth scaling */
body[data-is-mobile="true"] #mobile-only-modal,
body[data-is-mobile="true"] #mobile-only-modal .modal-dialog {
  will-change: transform;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Prevent any zoom/scale on the modal content itself */
body[data-is-mobile="true"] #mobile-only-modal .modal-content {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Debug helper - add red border to see actual modal bounds */
.debug-modal body[data-is-mobile="true"] #mobile-only-modal .modal-dialog {
  border: 3px solid red !important;
}

.debug-modal body[data-is-mobile="true"] #mobile-only-modal .modal-content {
  border: 3px solid blue !important;
}