/* SignWell iframe styles for cross-platform mobile support (iOS and Android) */

/* Wrapper for SignWell iframes - enables horizontal scrolling on mobile devices */
.signwell-iframe-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100vh; /* fallback for browsers without dvh support */
  height: 100dvh; /* dynamic viewport height - adjusts when keyboard appears */
  position: relative;
}

/* Fix for mobile iframe scrolling issues (iOS Safari and Android Chrome) */
iframe {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

/* SignWell iframe styles - allow iframe to expand beyond viewport width for wide PDFs */
.signwell-iframe-wrapper iframe,
[id*="signwell"] iframe,
[class*="signwell"] iframe,
[id*="SignWell"] iframe,
[class*="SignWell"] iframe {
  min-width: 100%;
  width: 100%;
  max-width: none; /* Allow iframe to be wider than container when content requires it */
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  border: none;
  display: block;
}

/* Ensure parent containers allow scrolling and don't constrain width */
/* But exclude modal containers to prevent clipping */
[id*="signwell"]:not([id*="Modal"]):not([id*="modal"]),
[class*="signwell"]:not([class*="modal"]):not([class*="Modal"]),
[id*="SignWell"]:not([id*="Modal"]):not([id*="modal"]),
[class*="SignWell"]:not([class*="Modal"]):not([class*="modal"]) {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

/* Fix for SignWell modal dialog - make it readable without affecting iframe */
/* Only fix overflow and positioning - don't force display property */
#SignWell-Modal-Embedded-CloseConfirmationModal {
  overflow: visible !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  /* Don't force display - let SignWell control visibility */
}

#SignWell-Modal-Embedded-CloseConfirmationModal-Overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  overflow: visible !important;
  z-index: 99998 !important;
  pointer-events: auto !important;
}

#SignWell-Modal-Embedded-CloseConfirmationModal-Content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-color: white !important;
  border-radius: 8px !important;
  padding: 24px !important;
  max-width: 400px !important;
  width: 90% !important;
  overflow: visible !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
}

#SignWell-Modal-Embedded-CloseConfirmationModal-Title,
#SignWell-Modal-Embedded-CloseConfirmationModal-Actions,
#SignWell-Modal-Embedded-CloseConfirmationModal-Cancel,
#SignWell-Modal-Embedded-CloseConfirmationModal-Confirm {
  overflow: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* Safari-specific fixes for modal buttons */
@supports (-webkit-touch-callout: none) {
  /* Safari-specific styles */
  #SignWell-Modal-Embedded-CloseConfirmationModal-Content {
    pointer-events: auto !important;
  }
  
  /* Apply user-select: none only to interactive controls to prevent accidental selection during interactions */
  #SignWell-Modal-Embedded-CloseConfirmationModal-Cancel,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Confirm,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Actions button,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Actions a,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Content button,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Content .close-button,
  #SignWell-Modal-Embedded-CloseConfirmationModal-Content .confirm-button {
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2) !important;
    touch-action: manipulation !important;
  }
}

/* Ensure parent containers don't clip the modal */
#SignWell-Modal-Embedded,
#SignWell-Modal-Embedded-IframeContainer,
#SignWell-Embedded-Iframe-Container {
  overflow: visible !important;
}

/* Additional fix for mobile devices (iOS and Android) - ensure body/html allow scrolling */
@media (max-width: 768px) {
  html, body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Enable smooth scrolling on Android Chrome */
    scroll-behavior: smooth;
  }
  
  .signwell-iframe-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    overflow-y: auto;
    /* Force hardware acceleration for smooth scrolling on iOS and Android */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
    /* Android Chrome benefits from overscroll-behavior to prevent pull-to-refresh interference */
    overscroll-behavior: contain;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }
  
  .signwell-iframe-wrapper iframe,
  [id*="signwell"] iframe,
  [class*="signwell"] iframe,
  [id*="SignWell"] iframe,
  [class*="SignWell"] iframe {
    /* Use max-content with fallback for older devices */
    min-width: 100%;
    width: auto;
    /* For devices that support max-content (iOS 11+, Android Chrome 46+) */
    min-width: max-content;
    /* Fallback: allow iframe to grow to accommodate content */
    max-width: 2000px; /* Large enough for most PDFs, prevents excessive width */
    /* Ensure smooth scrolling on Android */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Ensure iframes on Android can scroll smoothly */
    overscroll-behavior: contain;
  }
}
