/* Place my video (place-content.blade.php). Full screen on phones, like the corner editor. */
.place-content .modal-dialog { width: min(480px, calc(100% - 24px)); margin: 12px auto; }
/* Start your Magoo's language (2026-10-24): 28 px corners, 24 px padding and 24 px between blocks. */
.place-content .modal-content { border: 0; border-radius: 28px; overflow: hidden; padding: 24px; display: flex; flex-direction: column; gap: 24px; background: #fff; }
.place-content-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.custom-modal .place-content-title { font-size: 21px; }
.custom-modal p.place-content-copy { margin: 0; padding: 0; font-size: 14px; line-height: 1.35; color: #5E6070; text-align: center; }
/* The stage: dark around the picture, so a box that goes past it still shows. */
.place-content-stage { position: relative; width: 100%; height: clamp(260px, calc(100dvh - 250px), 620px); border-radius: 12px; overflow: hidden; background: #2B2B2B; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.place-content-picture { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; }
.place-content-box { position: absolute; left: 0; top: 0; box-sizing: border-box; cursor: grab; outline: 2px solid #fff; box-shadow: 0 0 0 4px rgba(204, 0, 0, .85), 0 6px 18px rgba(0, 0, 0, .35); touch-action: none; }
.place-content-box:active { cursor: grabbing; }
.place-content-box:focus-visible { outline: 3px solid #FFB242; }
.place-content-media { position: absolute; inset: 0; overflow: hidden; background: #111; }
.place-content-media > img, .place-content-media > canvas { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.place-content-media .place-content-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .8; }
/* Corner handles: drawn small, touched big. */
.place-content-handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; touch-action: none; }
.place-content-handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 3px solid #CC0000; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.place-content-handle[data-corner="tl"] { left: 0; top: 0; cursor: nwse-resize; }
.place-content-handle[data-corner="tr"] { left: 100%; top: 0; cursor: nesw-resize; }
.place-content-handle[data-corner="br"] { left: 100%; top: 100%; cursor: nwse-resize; }
.place-content-handle[data-corner="bl"] { left: 0; top: 100%; cursor: nesw-resize; }
.custom-modal p.place-content-loading { position: absolute; inset: 0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
.place-content-stage.is-ready .place-content-loading { display: none; }
.place-content-stage:not(.is-ready) .place-content-box { visibility: hidden; }
/* When a finger lifts, the view zooms out (or in) to show the photo and the
   whole box: a short glide, none with reduced motion (place-content.js). */
.place-content-stage.is-refitting .place-content-picture,
.place-content-stage.is-refitting .place-content-box { transition: transform .22s ease, width .22s ease, height .22s ease; }
@media (prefers-reduced-motion: reduce) { .place-content-stage.is-refitting .place-content-picture, .place-content-stage.is-refitting .place-content-box { transition: none; } }
.custom-modal p.place-content-error { margin: -12px 0 0; padding: 0; color: #CC0000; font-size: 14px; text-align: center; }
.custom-modal p.place-content-error:empty { display: none; }
.place-content-actions { display: flex; align-items: center; gap: 12px; }
.place-content-actions .place-content-done { flex: 1 1 auto; width: auto; }
.place-content-level-up { display: block; align-self: center; margin: -12px auto 0; }
.place-content-level-up[hidden] { display: none; }
.place-content-actions .place-content-reset { flex: none; }
.place-content button:focus-visible { outline: 3px solid #FFB242; outline-offset: 3px; }
@media (max-width: 575.98px), (max-height: 600px) {
    .place-content .modal-dialog { width: 100%; max-width: none; margin: 0; height: 100vh; height: 100dvh; }
    /* Still full screen, with the same header and padding as every window. */
    .place-content .modal-content { height: 100%; border-radius: 0; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
    .place-content-stage { flex: 1 1 auto; height: auto; min-height: 200px; }
}