/**
 * iOS Safari Specific Fixes for Checkboxes
 * Addresses rendering issues on iPhone 12 mini and other iOS devices
 */

/* Reset default iOS checkbox appearance for custom styling */
@supports (-webkit-touch-callout: none) {
  /* Target all checkboxes in the modal */
  .modal-content input[type="checkbox"],
  .acknowledgment-checkbox {
    /* Remove default iOS styling */
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* Force GPU acceleration for better rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Prevent iOS tap highlighting */
    -webkit-tap-highlight-color: transparent;
    
    /* Ensure proper sizing */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    
    /* Custom checkbox design */
    background-color: white;
    border: 2px solid #9ca3af;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    margin-top: 2px;
    cursor: pointer;
    
    /* Smooth transitions */
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  /* Checked state */
  .modal-content input[type="checkbox"]:checked,
  .acknowledgment-checkbox:checked {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
  }
  
  /* Custom checkmark for checked state */
  .modal-content input[type="checkbox"]:checked::after,
  .acknowledgment-checkbox:checked::after {
    content: '';
    position: absolute;
    display: block;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* Focus state for accessibility */
  .modal-content input[type="checkbox"]:focus,
  .acknowledgment-checkbox:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  /* Ensure label is properly aligned */
  .acknowledgment-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: pointer;
    padding: 20px 16px;
  }
  
  /* Prevent zoom on double-tap */
  .acknowledgment-label,
  .acknowledgment-checkbox {
    touch-action: manipulation;
  }
}

/* Additional fixes for smaller iOS devices */
@media only screen 
  and (max-width: 428px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
  .acknowledgment-checkbox {
    /* Slightly larger touch targets on small screens */
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  .acknowledgment-checkbox:checked::after {
    /* Adjust checkmark position for larger checkbox */
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
  }
  
  .acknowledgment-label {
    /* Better spacing on mobile */
    padding: 16px 12px;
    gap: 16px;
  }
  
  .acknowledgment-text {
    /* Ensure text doesn't get too small */
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Landscape orientation fixes */
@media only screen 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  
  .modal-body {
    /* Reduce padding in landscape to show more content */
    padding: 16px 20px;
  }
  
  .acknowledgment-label {
    padding: 12px 16px;
  }
}

/* Dark mode support for iOS */
@media (prefers-color-scheme: dark) {
  @supports (-webkit-touch-callout: none) {
    .acknowledgment-checkbox {
      background-color: #1f2937;
      border-color: #6b7280;
    }
    
    .acknowledgment-checkbox:checked {
      background-color: #10b981 !important;
      border-color: #10b981 !important;
    }
  }
}

/* Prevent text selection issues on iOS */
.modal-content * {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.modal-content input,
.modal-content textarea,
.acknowledgment-text {
  -webkit-user-select: text;
}

/* Fix for iOS 15+ where checkboxes might appear too small */
@supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
  .acknowledgment-checkbox {
    zoom: 1.2;
  }
}