{# Crop modal — requires avatarUpload() Alpine component on a parent element #}
<div x-show="showModal" x-cloak class="crop-overlay" @click.self="cancelCrop()">
  <div class="crop-modal">
    <div class="crop-modal-header">
      <span>Position your photo</span>
      <button type="button" class="icon-btn" @click="cancelCrop()">✕</button>
    </div>
    <div class="crop-container">
      <img x-ref="cropImg" :src="previewUrl" style="max-width:100%;">
    </div>
    <p class="crop-hint">Pinch or scroll to zoom · drag to reposition</p>
    <div class="crop-modal-actions">
      <button type="button" class="btn btn-ghost" style="width:auto;" @click="cancelCrop()">Cancel</button>
      <button type="button" class="btn btn-primary" style="width:auto;" @click="confirmCrop()">Use photo</button>
    </div>
  </div>
</div>