.pp-personalization-modal .modal-content {
    border-radius: 8px;
}

/* Fabric.js canvas — replaces the old per-zone <div> boxes entirely (see
   personalization-canvas.js). The canvas element's own pixel width/height
   are set by JS (to the product image's natural size, scaled to fit via
   fabric's zoom — see resizeCanvas()); this wrapper just centers it and
   caps how much modal height it can take, mirroring the old image's
   max-height:60vh. */
.pp-personalization-canvas-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    max-height: 60vh;
    overflow: hidden;
}

.pp-personalization-canvas-wrap canvas {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    touch-action: none;
}

/* Shown until Fabric.js + the canvas engine finish loading and the first
   render completes (both are lazy-loaded on modal open — see
   personalization-frontend.js) — a blank modal body for a few hundred ms
   otherwise reads as broken, especially on a slower mobile connection. */
.pp-canvas-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.9rem;
}

.pp-canvas-loading[hidden] {
    display: none;
}

.pp-personalization-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-personalization-field label {
    font-weight: 600;
    margin-bottom: 6px;
}

.pp-zone-fields-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.pp-personalization-zone-fields {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.pp-personalization-zone-fields:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.pp-zone-char-counter {
    font-size: 0.75rem;
    color: #64748b;
    text-align: right;
    margin-top: 2px;
}

.pp-personalization-image-status {
    font-size: 0.85rem;
    color: #64748b;
}

.pp-personalization-image-status.is-error {
    color: #dc2626;
}

.pp-personalization-image-status.is-success {
    color: #16a34a;
}