/* --- CROP CUT MODAL (limpo) --- */

/* Backdrop translúcido */
#cropperBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
}

/* Caixa do modal (opaca e acima do backdrop) */
#cropperBox{
  position: fixed;
  inset: 40px 20px;
  background: #fff;
  opacity: 1 !important;                /* ignora opacidades herdadas */
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 12px;
  display: none;                         /* aberto pelo JS */
  flex-direction: column;
  overflow: hidden;
  max-width: 1000px;
  margin: auto;
  box-shadow: 0 10px 30px #0003;
  z-index: 9999;
}

/* Cabeçalho / rodapé do modal */
#cropperBox .cropper-modal-header,
#cropperBox .cropper-modal-footer{
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#cropperBox .cropper-modal-header{
  border-bottom: 1px solid #eee;
  font-weight: 600;
}
#cropperBox .cropper-modal-footer{
  border-top: 1px solid #eee;
  justify-content: flex-end;
}

/* Corpo do modal: espaço pro recorte e sem scroll roubando o arrasto */
#cropperBox .cropper-modal-body{
  background: #fff;
  height: 72vh;
  padding: 10px;
  overflow: hidden;
}

/* Botões */
.btn-sec{
  background:#f2f2f2; color:#333; border:1px solid #ccc;
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.btn-pri{
  background:#004aad; color:#fff; border:0;
  padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600;
}

/* Prévia 3x4 do corte */
#preview3x4{
  width:150px; height:200px; border:1px solid #ddd;
  border-radius:8px; overflow:hidden; display:inline-block;
}

/* Evita downscale borrado do elemento de imagem do cropper */
#imagemCrop{ max-width: none !important; }

/* Gesto de toque pertence ao cropper (não à página) */
#cropperBox .cropper-container{ touch-action: none; }

/* Nitidez durante interação/transformações */
.cropper-container img,
.cropper-container canvas{
  image-rendering: auto;
  transform: translateZ(0);
  will-change: transform;
}
/* --- Mobile tweaks --- */
@media (max-width: 640px){
  #cropperBox{
    inset: 10px;                /* margem menor em telas pequenas */
    border-radius: 10px;
    max-width: none;
  }
  #cropperBox .cropper-modal-body{
    height: calc(100vh - 170px); /* mais espaço útil pro corte */
    padding: 8px;
  }
  .btn-sec,
  .btn-pri{
    padding: 10px 12px;
    font-size: 14px;
    min-height: 40px;            /* área de toque maior */
  }
}
/* garante que o gesto toque pertence ao cropper (evita “página rolando”) */
#cropperBox .cropper-container{ touch-action: none; }