/* === Product Editor Container === */
#pe-editor {
  margin: 1.5rem auto;
  position: relative;
  max-width: 800px;
  width: 100%;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}
#pe-editor:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* === Canvas Body === */
#pe-body {
  margin: 0 auto;
  position: relative;
  max-width: 800px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
}

/* === Border Frame & Fallback === */
.pe-border-frame,
.pe-border-fallback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: 10px;
}
.pe-border-fallback {
  border: 6px solid transparent;
  border-image: linear-gradient(45deg, #007cba, #005a87, #007cba) 1;
  display: none;
}

/* === Canvas === */
#pe-canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.06);
  cursor: default;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
#pe-canvas.pe-canvas-draggable { cursor: grab; }
#pe-canvas.pe-canvas-dragging { cursor: grabbing; }
#pe-canvas.pe-empty-canvas {
  background-color: #f8f9fa;
  background-image:
    linear-gradient(#e9ecef 1px, transparent 1px),
    linear-gradient(90deg, #e9ecef 1px, transparent 1px);
  background-size: 20px 20px;
}

/* === Centered Add Image Button === */
#pe-load-border {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  background: #007cba;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}
#pe-load-border:hover {
  background: #005a87;
  transform: translate(-50%, -50%) scale(1.05);
}
#pe-load-border:focus {
  outline: 3px solid #80d0ff;
  outline-offset: 2px;
}

/* === Controls Toolbar === */
#pe-controls {
  margin-top: 1.25rem;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pe-btn {
  padding: 0.5rem 0.9rem;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pe-btn i { font-size: 0.9rem; }
.pe-btn:hover { background: #efefef; border-color: #ccc; }
.pe-btn:active { background: #e2e2e2; }
.pe-btn:focus { outline: 2px solid #007cba; outline-offset: 2px; }
.pe-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #f5f5f5;
  border-color: #e0e0e0;
}

/* === File Input (hidden) === */
#pe-file { display: none; }

/* === Status Messages === */
.pe-status-message {
  text-align: center;
  margin-top: .8rem;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-size: .9rem;
  display: none;
  transition: opacity .25s ease, transform .25s ease;
}
.pe-status-success {
  background: #e6f7ed;
  color: #17633d;
  border: 1px solid #b2e0c8;
}
.pe-status-error {
  background: #fdeaea;
  color: #a12d2d;
  border: 1px solid #f3b5b5;
}