/* ===========================================================================
   RECORTE DE FOTO
   A janela onde o dono posiciona a foto antes de ela subir. O palco é escuro
   de propósito: a foto precisa ser a única coisa que puxa o olho.
   =========================================================================== */

.rec-fundo {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
  background: rgba(14, 14, 18, .6); backdrop-filter: blur(5px);
  animation: kortei-fade .18s ease;
}
body.rec-travado { overflow: hidden; }

.rec-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px;
  width: 100%; max-width: 460px; box-sizing: border-box;
  max-height: calc(100vh - 40px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(14, 14, 18, .28);
  animation: kortei-pop .2s cubic-bezier(.16, 1, .3, 1);
  text-align: center;
}
.rec-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin: 0; }
.rec-dica { margin: 6px 0 16px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

.rec-palco {
  position: relative; margin: 0 auto;
  border-radius: var(--r-md); overflow: hidden;
  background: #17171c;
  cursor: grab; touch-action: none; user-select: none;
}
.rec-palco.rec-arrastando { cursor: grabbing; }
.rec-palco--circulo { border-radius: 50%; }
.rec-tela { display: block; }

/* O contorno mostra onde a foto vai ser cortada, sem tapar a imagem. */
.rec-mascara {
  position: absolute; inset: 0; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(14, 14, 18, .35) inset;
}

.rec-zoom { display: flex; align-items: center; gap: 10px; margin: 16px auto 0; max-width: 320px; }
.rec-barra { flex: 1; accent-color: var(--orange); cursor: pointer; }
.rec-lupa {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
}
.rec-lupa:hover { background: var(--blue-soft); color: var(--orange); border-color: var(--orange); }

.rec-acoes {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.rec-acoes .btn-fechar { margin-right: auto; }

@media (max-width: 480px) {
  .rec-card { padding: 18px; }
  .rec-acoes { justify-content: stretch; }
  .rec-acoes .btn { flex: 1 1 auto; }
  .rec-acoes .btn-fechar { margin-right: 0; }
}