.iuw-container { position: relative; }

/* Preview wrap — responsive */
.iuw-preview-wrap {
    position: relative;
    width: 100%;
    min-height: 120px;
    margin: 0 auto 12px;
    border: 2px dashed var(--mv-border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
    background: #f8f9fa;
}

/* Shape: square — fixed aspect ratio, centered */
.iuw-shape-square .iuw-preview-wrap {
    width: 280px;
    height: 280px;
    margin: 0 auto 12px;
}

/* Shape: circle — same size, round mask */
.iuw-shape-circle .iuw-preview-wrap {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    margin: 0 auto 12px;
}

.iuw-preview-wrap:hover,
.iuw-preview-wrap.iuw-drag-over { border-color: #0d6efd; background: #e7f1ff; }

/* Default image (rectangle mode) */
.iuw-preview-wrap > img:not(.iuw-masked-img) {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    display: block;
}

/* Masked image (circle/square mode) — positioned absolutely, draggable */
.iuw-masked-img {
    position: absolute;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.iuw-masked-img:active {
    cursor: grabbing;
}

/* Hint text below image */
.iuw-mask-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--mv-text-secondary, #6c757d);
    padding: 0.35rem 0;
}

.iuw-placeholder {
    text-align: center;
    color: #6c757d;
    font-size: 0.85rem;
    padding: 30px 10px;
}
.iuw-placeholder i { font-size: 2rem; display: block; margin-bottom: 6px; }
.iuw-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.iuw-actions .btn { font-size: 0.8rem; padding: 2px 10px; }
.iuw-url-row { display: flex; gap: 6px; }
.iuw-url-row input { flex: 1; font-size: 0.85rem; }
.iuw-url-row .btn { font-size: 0.8rem; white-space: nowrap; }
.iuw-file-input { display: none; }

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .iuw-preview-wrap {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .iuw-preview-wrap:hover,
[data-bs-theme="dark"] .iuw-preview-wrap.iuw-drag-over {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.15);
}
[data-bs-theme="dark"] .iuw-placeholder {
    color: var(--mv-text-muted);
}