/* Shared CSS. Admin preview and front end use the same classes. One source of truth. */

.fpu-stage{
  position: relative;
  width: 100%;
  background: var(--fpu-stage-bg, #e9e5df);
  overflow: hidden;
}

.fpu-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  pointer-events: none; /* layer does not block dragging; prints re-enable */
}

.fpu-print{
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  pointer-events: auto; /* MUST be interactive */
  user-select: none;
  touch-action: none;
}

.fpu-print.is-selected{
  outline: 2px solid rgba(0, 122, 255, 0.9);
  outline-offset: 2px;
}

.fpu-paper{
  display: block;
  background: transparent;
  padding: 0;
  border: 0 solid transparent;
  box-shadow: var(--fpu-shadow, 0 18px 60px rgba(0,0,0,0.18));
}

.fpu-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Crop shell */
.fpu-crop-shell{
  width: 100%;
  overflow: hidden;
  position: relative;
  /* The renderer uses the padding-top aspect-ratio technique (height via padding).
     In that model, the <img> must be absolutely positioned to fill the shell,
     otherwise height:100% resolves to 0 and the image appears “missing”. */
}

.fpu-crop-shell .fpu-img{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  z-index: 1;
}

/* WordPress admin CSS sometimes forces height:auto on images.
   This guarantees fill behavior inside our absolute crop shell. */
.fpu-stage img.fpu-img{
  height: 100% !important;
}

/* If an image fails to load, make it obvious instead of silently blank. */
.fpu-img-error{
  outline: 2px solid rgba(220, 38, 38, 0.9);
  background: repeating-linear-gradient(45deg, rgba(220,38,38,0.12), rgba(220,38,38,0.12) 10px, rgba(220,38,38,0.05) 10px, rgba(220,38,38,0.05) 20px);
}

/* Admin layout */
.fpu-admin .fpu-admin-grid{
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}

.fpu-preview-shell{
  border: 1px solid #d0d7de;
  border-radius: 10px;
  background: #fff;
  overflow: visible;
}

.fpu-preview-shell.is-guarded{
  height: 80vh;
  overflow: auto;
}

.fpu-guard-msg{
  background: #fff7d6;
  border: 1px solid #f1cf6a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.fpu-guard-toggle{
  display: inline-flex;
  gap: 8px;
  margin-left: 10px;
  align-items: center;
}

.fpu-controls-sticky{
  position: sticky;
  top: 32px;
}

.fpu-panel{
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.fpu-panel h2{
  margin: 0 0 10px 0;
  font-size: 14px;
}

.fpu-field{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.fpu-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.fpu-hint{
  font-size: 12px;
  color: #555;
  margin-bottom: 10px;
}

.fpu-status{
  margin-left: 10px;
  font-size: 12px;
  color: #1d2327;
}

.fpu-seg{
  display: inline-flex;
  gap: 6px;
}

.fpu-seg button{
  border: 1px solid #d0d7de;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.fpu-seg button.is-active{
  background: #1d2327;
  color: #fff;
  border-color: #1d2327;
}

.fpu-selected.is-hidden{
  display: none;
}

.fpu-check{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-right: 12px;
}

.fpu-list{
  display: grid;
  gap: 8px;
}

.fpu-item{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
}

.fpu-thumb{
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
}

.fpu-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fpu-item .fpu-item-actions{
  display: inline-flex;
  gap: 6px;
}

.fpu-help{font-size:12px;opacity:.75;margin-top:4px;line-height:1.3}
.fpu-inline-check{display:flex;gap:8px;align-items:center}