/* ============================================================================
   wwwroot/css/marketplace-register-uploads.css   (NEW — Phase 3, v7)
   ----------------------------------------------------------------------------
   Adds visual states for the v7 image upload pipeline:

     • [data-uploading="true"]      — spinner overlay while a POST is in flight
     • [data-upload-complete="true"]— quiet "✓" checkmark in the corner
     • [data-upload-error="true"]   — red ring + inline error message
     • .mp-uploader-error            — inline error text (created by JS)
     • .mp-uploader-note             — inline informational note (compact image)

   This file is OPTIONAL — if you don't include it, the upload pipeline still
   works (the JS sets attributes regardless), users just won't see the visual
   feedback. Include it in Register.cshtml's @section Styles:

       <link rel="stylesheet" href="~/css/marketplace-register-uploads.css"
             asp-append-version="true" />

   Brand tokens (--mp-sunset, --mp-ink, --mp-cloud-2) are inherited from the
   surrounding .mp-page context — same pattern as marketplace-category.css.
   If the register page uses different token names, alias them at the
   selector below.
   ============================================================================ */

[data-mp-uploader] {
    position: relative;
}

/* ── Uploading: dim the preview + show a centred spinner ─────────────── */
[data-mp-uploader][data-uploading="true"] {
    pointer-events: none;
}

[data-mp-uploader][data-uploading="true"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
}

[data-mp-uploader][data-uploading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(0, 0, 0, 0.10);
    border-top-color: #F58220;            /* fall back to sunset */
    border-radius: 50%;
    animation: mp-uploader-spin 0.9s linear infinite;
    z-index: 3;
}

@keyframes mp-uploader-spin {
    to { transform: rotate(360deg); }
}


/* ── Upload complete: quiet check overlay (fades) ─────────────────────── */
[data-mp-uploader][data-upload-complete="true"]:not([data-uploading="true"]) {
    /* Subtle 1px ring in the brand accent to confirm success. */
    box-shadow: 0 0 0 2px rgba(86, 196, 248, 0.45);
}


/* ── Upload error: red ring + the inline error span ───────────────────── */
[data-mp-uploader][data-upload-error="true"] {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.55);
}

.mp-uploader-error {
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.08);
    color: #B02A37;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}


/* ── Informational note (e.g. compact-image cue) ──────────────────────── */
.mp-uploader-note {
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 130, 32, 0.08);   /* sunset @ 8% */
    color: #8C3E00;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
}


/* ── Reduced motion: drop the spin ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-mp-uploader][data-uploading="true"]::after {
        animation: none;
        border-top-color: rgba(0, 0, 0, 0.30);
    }
}