/* ============================================================
   GirlsWiki 2.0 — image cropper styles
   Shared by the public upload forms and the admin panel.
   ============================================================ */
.crop-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(10,10,14,.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.crop-box {
  background: var(--card); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-lg); max-width: 520px; width: 100%;
}
.crop-head { padding: 22px 26px 12px; }
.crop-head h3 { margin: 0 0 4px; font-size: 19px; }
.crop-head p  { margin: 0; color: var(--text-soft); font-size: 13px; }

.crop-stage { display: flex; justify-content: center; padding: 6px 26px 14px; }
.crop-frame {
  position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4000px rgba(10,10,14,.35);
}
.crop-canvas { display: block; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }

.crop-tools {
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px 16px;
}
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-btn {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--content-bg);
  color: var(--text); font-size: 15px; line-height: 1;
}
.crop-btn:hover { border-color: var(--accent); color: var(--accent); }

.crop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 26px; border-top: 1px solid var(--border); background: var(--content-bg);
}
.crop-name {
  font-size: 12px; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.crop-actions { display: flex; gap: 8px; }

.crop-preview { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.crop-thumb { margin: 0; }
.crop-thumb img {
  width: 60px; height: 80px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.crop-hint { font-size: 12px; color: var(--text-mute); }

@media (max-width: 560px) {
  .crop-head, .crop-stage, .crop-tools, .crop-foot { padding-left: 16px; padding-right: 16px; }
  .crop-name { display: none; }
}

/* The cropper ships its own button styling so it looks the same in the
   admin panel, which does not load the public stylesheet. */
.crop-box .btn {
  border: none; border-radius: 30px; padding: 9px 18px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.crop-box .btn-primary { background: linear-gradient(135deg, #ff2d78, #e91e63); color: #fff; }
.crop-box .btn-ghost   { background: transparent; border: 1px solid #d7d7e0; color: #565663; }
.crop-box .btn-ghost:hover { border-color: #e91e63; color: #e91e63; }
body.modal-open { overflow: hidden; }

/* ---------- paste / drop zone ---------- */
.crop-paste {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 12px 15px;
  border: 1px dashed #d0d0db; border-radius: 10px;
  background: rgba(0,0,0,.015); cursor: pointer;
  font-size: 13px; color: #565663; outline: none;
  transition: border-color .2s, background .2s;
}
.crop-paste:hover,
.crop-paste.armed,
.crop-paste.over { border-color: #e91e63; background: rgba(233,30,99,.05); }
.crop-paste.armed { box-shadow: 0 0 0 3px rgba(233,30,99,.12); }
.crop-paste .cp-icon { font-size: 20px; color: #e91e63; line-height: 1; }
.crop-paste .cp-text b { color: #1c1c24; }