/* ============================================================
   IMMAGINI – Crop manuale (single image only) – FIX ratio + slider brand
   ============================================================ */

.crop-frame{
  width: 520px;      /* regola SOLO questo per la grandezza preview */
  max-width: 100%;
  margin: 12px auto;

  aspect-ratio: var(--crop-ratio, 16 / 9);

  background: var(--gray-50);
  border: 1.5px dashed var(--gray-300);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.crop-frame:active{ cursor: grabbing; }

.crop-frame img{
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  pointer-events: none;
  max-width: none;
}

/* Slider zoom – stile Abitare (rosso + track grigio) */
#CropZoom{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    to right,
    var(--red) 0 var(--fill, 0%),
    var(--gray-200) var(--fill, 0%) 100%
  );
}

#CropZoom::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--red);
  border: 2px solid var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
}

#CropZoom::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--red);
  border: 2px solid var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
}