/* MudBlazor provides the design system; only app-shell helpers and the pre-Blazor
   loading / error UI live here. */

html, body { margin: 0; }
h1:focus { outline: none; }

/* Selected wig card highlight */
.wig-selected { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }

/* Previous-photo thumbnails: square, cropped (never distorted) */
.thumb { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.thumb-sel { border-color: var(--mud-palette-primary); }
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Result before/after: equal, bounded size side by side */
.result-img { width: 100%; height: 440px; object-fit: contain; display: block; border-radius: 12px; background: var(--mud-palette-surface); }
@media (max-width: 600px) { .result-img { height: 320px; } }

/* Small helpers not in MudBlazor's utility set */
.h-100 { height: 100%; }
.text-center { text-align: center; }

/* ── Pre-Blazor loading screen ──────────────────────────────────────────── */
.loading-progress {
    position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto;
}
    .loading-progress circle {
        fill: none; stroke: #e7e3f2; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg);
    }
        .loading-progress circle:last-child {
            stroke: #6d28d9;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }
.loading-progress-text {
    position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
    .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ── Blazor error UI ────────────────────────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
    .blazor-error-boundary::after { content: "An error has occurred."; }