/**
 * Bust silhouette guide for player photo Cropper.js editors.
 * Scoped via [data-player-photo-editor] on the FileUpload wrapper.
 *
 * Square guide: 750×750 SVG, pixel-fitted from the 378×492 inspiration.
 * Podium guide: 378×492 SVG — 1:1 with saved transparent size / crop box.
 *
 * Solid red guide (no opacity) over a dimmed upload so framing is obvious.
 */

.fi-fo-file-upload[data-player-photo-editor] .cropper-canvas {
  opacity: 0.4;
}

.fi-fo-file-upload[data-player-photo-editor] .cropper-view-box {
  outline-color: rgba(255, 0, 0, 0.85) !important;
}

.fi-fo-file-upload[data-player-photo-editor] .cropper-face {
  background-color: transparent !important;
}

/* Solid red guide above the dimmed photo; clicks still drag the crop face. */
.fi-fo-file-upload[data-player-photo-editor] .cropper-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("/images/player-photo-silhouette.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  opacity: 1;
}

/* Tall podium frame: SVG viewBox is exactly 378×492 — stretch 1:1 to the crop box. */
.fi-fo-file-upload[data-player-photo-editor][data-player-photo-variant="podium"] .cropper-face::after {
  background-image: url("/images/player-photo-silhouette-podium.svg");
  background-position: 0 0;
  background-size: 100% 100%;
}