/* =========================================================================
 * MIVB — Photo Step (Sprint 3)
 * ========================================================================= */
.mivb-photo-step { padding-top: 4px; }

.mivb-photo-profile { margin-bottom: 28px; }

/* Outer wrapper: relative container for action buttons positioned outside overflow:hidden */
.mivb-photo-profile-wrap {
    position: relative;
    display: inline-block;
    width: 160px;
}

/* Circle image container — overflow:hidden only here, buttons live outside */
.mivb-photo-profile-slot {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.mivb-photo-profile-slot:hover { border-color: #ff7396; background: #fff5f7; }
.mivb-photo-empty {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #64748b; font-size: 13px; text-align: center; padding: 12px;
    gap: 8px;
}
.mivb-photo-empty i { font-size: 28px; color: #94a3b8; }
.mivb-photo-input { display: none; }

.mivb-photo-counter {
    margin-left: auto;
    font-size: 12px; font-weight: 500; color: #64748b;
}
.filed-label:has(.mivb-photo-counter) { display: flex; align-items: center; gap: 8px; }

.mivb-photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
    min-height: 4px;
}
.mivb-photo-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mivb-photo-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 2px dashed #ff7396;
    color: #ff7396;
    border-radius: 8px;
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.mivb-photo-add-btn:hover { background: #ff7396; color: #fff; }
.mivb-photo-tip { color: #94a3b8; font-size: 12px; }

.mivb-photo-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mivb-photo-item:active { cursor: grabbing; }
.mivb-photo-item.mivb-photo-dragging { opacity: .4; }
.mivb-photo-item.mivb-photo-dragover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255,115,150,.35); }
.mivb-photo-thumb {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;
}
.mivb-photo-remove {
    position: absolute; top: 4px; right: 4px;
    width: 24px; height: 24px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff;
    font-size: 15px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.5);
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.mivb-photo-item:hover .mivb-photo-remove { opacity: 1; }
.mivb-photo-remove:hover { background: #ef4444; }
.mivb-photo-status {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.7); color: #ff7396; font-weight: 700;
    pointer-events: none;
}
.mivb-photo-item.is-uploading .mivb-photo-status,
.mivb-photo-item.is-error .mivb-photo-status { display: flex; }
.mivb-photo-item.is-error { box-shadow: 0 0 0 2px #ef4444 inset; }
.mivb-photo-item.is-error .mivb-photo-status { color: #ef4444; }

/* Profile slot — full-bleed thumb inside the circle */
.mivb-photo-profile-slot .mivb-profile-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Profile action buttons: positioned on the wrapper (outside overflow:hidden) */
.mivb-profile-adjust,
.mivb-profile-remove {
    position: absolute;
    width: 28px; height: 28px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.7); color: #fff;
    font-size: 13px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,.6);
    transition: background .15s ease, box-shadow .15s ease;
    z-index: 2;
}
.mivb-profile-adjust { bottom: 6px; left: 6px; }
.mivb-profile-remove { top: 6px; right: 6px; font-size: 16px; }
.mivb-profile-adjust:hover { background: #ff7396; box-shadow: 0 0 0 2px #ff7396; }
.mivb-profile-remove:hover { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }

.mivb-profile-status {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.7); color: #ff7396; font-weight: 700;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}
.mivb-profile-status:not(:empty) { display: flex; }

/* "Adjust focal point" button on gallery items */
.mivb-photo-adjust {
    position: absolute; top: 4px; left: 4px;
    width: 24px; height: 24px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff;
    font-size: 11px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.5);
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.mivb-photo-item:hover .mivb-photo-adjust { opacity: 1; }
.mivb-photo-adjust:hover { background: #ff7396; }

/* =========================================================================
 * Smart Adjuster Modal
 * ========================================================================= */
.mivb-adj-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .65);
    display: flex; align-items: center; justify-content: center;
    z-index: 100000;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.mivb-adj-overlay.is-open { opacity: 1; pointer-events: auto; }
.mivb-adj-card {
    background: #fff;
    border-radius: 12px;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
}
.mivb-adj-header {
    display: flex; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.mivb-adj-title { margin: 0; font-size: 16px; font-weight: 600; flex: 1; color: #0f172a; }
.mivb-adj-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: #64748b;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.mivb-adj-close:hover { background: #f1f5f9; color: #0f172a; }

.mivb-adj-stage { padding: 18px; }
.mivb-adj-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mivb-adj-ghost {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: .25;
    pointer-events: none;
    user-select: none;
}
.mivb-adj-frame {
    position: relative;
    /* Centred. Largest dim hits 88% of the canvas; the other auto-derives
       from aspect-ratio set inline by the JS opener. */
    max-width: 88%;
    max-height: 88%;
    aspect-ratio: 1 / 1; /* overridden inline */
    background: #000;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 8px 24px rgba(0,0,0,.45);
}
.mivb-adj-frame.is-dragging { cursor: grabbing; }
.mivb-adj-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    will-change: object-position, transform;
}
.mivb-adj-crosshair {
    position: absolute;
    width: 18px; height: 18px;
    margin-left: -9px; margin-top: -9px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    pointer-events: none;
}
.mivb-adj-loader {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .75);
    color: #fff; font-size: 28px;
    z-index: 10;
    border-radius: 8px;
}
.mivb-adj-hint {
    margin: 10px 0 0;
    font-size: 12px; color: #64748b; text-align: center;
}

.mivb-adj-controls { padding: 0 18px 8px; }
.mivb-adj-zoom {
    display: flex; align-items: center; gap: 12px;
    color: #475569;
}
.mivb-adj-zoom i { font-size: 14px; }
.mivb-adj-zoom-input {
    flex: 1;
    accent-color: #ff7396;
    cursor: pointer;
}

.mivb-adj-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.mivb-adj-spacer { flex: 1; }
.mivb-adj-footer button {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
.mivb-adj-reset { background: transparent; color: #64748b; }
.mivb-adj-reset:hover { color: #0f172a; background: #f1f5f9; }
.mivb-adj-cancel { background: #fff; color: #475569; border-color: #e2e8f0; }
.mivb-adj-cancel:hover { background: #f1f5f9; }
.mivb-adj-save { background: #ff7396; color: #fff; }
.mivb-adj-save:hover { background: #ff5a82; }