/* Base reset — this project links neither Bootstrap nor a FluentLayout, so the browser's
   default body margin (8px) leaves a white frame around the portal shell, and headings/text
   fall back to a serif font. */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    color: #111827;
    background: #f4f5f7;
}

h1:focus {
    outline: none;
}

/* ---- Customer portal shared page bits (global so every page's isolated scope inherits) ---- */
.portal-page-note {
    margin-top: 16px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.portal-signout-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #b32121;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.portal-signout-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

/* No green "valid" outline on touched fields — only flag genuine errors. */
.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Mobile-first polish (customer portal is mostly used on phones) ----
   Global on purpose: these target Fluent web components / shadow parts that page-scoped CSS
   can't reach. */
img, video {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* iOS Safari zooms the page when a focused field's text is under 16px. Fluent inputs read
       their size from this token inside the shadow DOM, so bump it only for form controls. */
    fluent-text-input,
    fluent-textarea,
    fluent-number-input,
    fluent-combobox,
    fluent-select,
    fluent-dropdown,
    fluent-datepicker,
    fluent-text-area {
        --fontSizeBase300: 16px;
    }

    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Centered dialogs become bottom sheets: full width, rounded top, thumb-reachable actions.
       Start/end-positioned dialogs (drawers) keep Fluent's own layout. */
    fluent-dialog:not([position=start]):not([position=end])::part(dialog) {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0 0;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    fluent-dialog-body > div[slot=action] {
        width: 100%;
        flex-wrap: wrap;
    }

    fluent-dialog-body > div[slot=action] fluent-button {
        flex: 1 1 0;
        min-height: 44px;
    }

    /* Safety net: nothing should make the whole page scroll sideways. */
    .portal-content {
        overflow-x: clip;
    }
}

/* Pages with their own pinned action bar (product detail: Chat / Add to Cart / Buy Now, cart:
   Checkout) hide the layout's bottom tab bar, app-style, so the two bars don't stack and the
   tab bar can't cover the page's buttons. Global because :has() crosses component scopes. */
@media (max-width: 768px) {
    .portal-shell:has(.pdt-mbar, .crt-mbar) .portal-tabbar {
        display: none;
    }

    .portal-shell:has(.pdt-mbar, .crt-mbar) .portal-content-inner {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .portal-shell:has(.pdt-mbar, .crt-mbar) .portal-nav,
    .portal-shell:has(.pdt-mbar, .crt-mbar) .portal-nav-backdrop {
        bottom: 0;
    }
}

/* ---- Skeleton loading ----
   .sk is a shimmering placeholder block. Pages build their loading state from these inside
   their own layout classes, so the skeleton matches the real page at every breakpoint.
   Global so it works in every component's isolated scope. */
.sk {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceef1 0%, #f6f7f9 40%, #eceef1 80%) 0 0 / 300% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}

.sk-line { height: 12px; }
.sk-line-lg { height: 22px; }
.sk-pill { height: 22px; border-radius: 999px; }
.sk-fill { width: 100%; height: 100%; border-radius: inherit; }

.sk-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes sk-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
}