/* Shop-owned presentation, including the published Roggemans checkout panel.
   Loaded after isolated component styles so every error uses the same identity. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --shop-error-accent: var(--mud-palette-primary, #ffa500);
    --shop-error-ink: #242424;
    --shop-error-muted: #595959;
    --shop-error-danger: #a32719;
    --shop-error-surface: #fff;
    --shop-error-tint: #fff8eb;
}

body :is(.ShopError, .Order_StatusPanel) {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    width: 100%;
    min-width: 0;
    font-family: 'Nunito', sans-serif;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Card, .Order_StatusPanel_Card) {
    box-sizing: border-box;
    width: min(100%, 760px);
    min-width: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--shop-error-accent);
    border-top: 5px solid var(--shop-error-accent);
    border-radius: 15px;
    background: var(--shop-error-surface);
    box-shadow: 0 8px 24px rgb(0 0 0 / 5%);
    color: var(--shop-error-ink);
    overflow-wrap: anywhere;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Kicker, .Order_StatusPanel_Kicker) {
    margin: 0 0 1rem;
    color: var(--shop-error-ink);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Card, .Order_StatusPanel_Card) :is(h1, h2) {
    margin: 0 0 1rem;
    color: var(--shop-error-ink);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Card, .Order_StatusPanel_Card) p {
    line-height: 1.65;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Hint, .Order_StatusPanel_Hint) {
    margin-top: 1rem;
    color: var(--shop-error-muted);
}

.ShopError_Actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Action, .Order_StatusPanel_Action),
body #blazor-error-ui .ShopError_Action,
body .ShopError_Actions > :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: .75rem 1.25rem;
    border: 2px solid var(--shop-error-accent);
    border-radius: 10px;
    background: var(--shop-error-accent);
    color: var(--shop-error-ink);
    font: inherit;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

body :is(.ShopError, .Order_StatusPanel) :is(.ShopError_Action, .Order_StatusPanel_Action):hover,
body #blazor-error-ui .ShopError_Action:hover,
body .ShopError_Actions > :is(a, button):hover {
    background: var(--shop-error-tint);
    color: var(--shop-error-ink);
    box-shadow: none;
    transform: none;
}

body .ShopError .ShopError_Action--secondary {
    background: var(--shop-error-surface);
}

:is(.ShopError, .Order_StatusPanel, #blazor-error-ui) :is(a, button):focus-visible,
.ShopErrorPage a:focus-visible {
    outline: 3px solid var(--shop-error-ink);
    outline-offset: 3px;
}

.ShopError_Request {
    font-size: .875rem;
    color: var(--shop-error-muted);
}

.ShopError_Request code { color: inherit; overflow-wrap: anywhere; }

/* Inline messages retain their error semantics, including readable red text. */
:root body :is(.ShopInlineError, p[role="alert"], .Login_Error, .Register_Error, .LoginError, .alert-danger,
    .mud-alert-normal-error, .mud-alert-outlined-error, .mud-alert-filled-error) {
    padding: .9rem 1rem;
    border: 1px solid var(--shop-error-accent);
    border-left: 4px solid var(--shop-error-danger);
    border-radius: 10px;
    background: var(--shop-error-tint);
    color: var(--shop-error-danger);
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body :is(.validation-message, .field-validation-error, .validation-summary-errors,
    .validation-summary-errors ul, .text-danger, .mud-error-text, .mud-input-error .mud-input-helper-text) {
    color: var(--shop-error-danger) !important;
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
}

body :is(.validation-summary-errors, .LoginError):empty { display: none; }

/* This layout works without the catalog, session or interactive rendering. */
body.ShopErrorPage { display: flex; flex-direction: column; min-height: 100vh; }
.ShopErrorPage_Header { padding: 1.5rem; text-align: center; }
.ShopErrorPage_Header img { width: 140px; max-width: 100%; height: auto; }
.ShopErrorPage_Main { flex: 1; padding: 0 1rem; }
.ShopErrorPage_Footer { padding: 1.5rem; text-align: center; }
.ShopErrorPage_Footer a { color: var(--shop-error-ink); text-decoration: underline; }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 1rem 1rem;
    z-index: 3000;
    box-sizing: border-box;
    padding: 1.25rem 3.5rem 1.25rem 1.25rem;
    border: 2px solid var(--shop-error-accent);
    border-radius: 15px;
    background: var(--shop-error-surface);
    color: var(--shop-error-ink);
    box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
    font-family: 'Nunito', sans-serif;
}

#blazor-error-ui > :is(strong, span) { display: block; margin-bottom: .5rem; }
#blazor-error-ui .dismiss {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--shop-error-ink);
    font-size: 1.75rem;
    cursor: pointer;
}

#components-reconnect-modal { display: none; }
#components-reconnect-modal:is(.components-reconnect-show, .components-reconnect-failed,
    .components-reconnect-rejected, .components-reconnect-paused, .components-reconnect-resume-failed) {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 3001;
    padding: 1rem;
    background: rgb(0 0 0 / 40%);
}
#components-reconnect-modal :is(.ShopReconnect_Failed, .ShopReconnect_Paused) { display: none; }
#components-reconnect-modal:is(.components-reconnect-failed, .components-reconnect-rejected,
    .components-reconnect-paused, .components-reconnect-resume-failed) .ShopReconnect_Connecting { display: none; }
#components-reconnect-modal:is(.components-reconnect-failed, .components-reconnect-rejected,
    .components-reconnect-resume-failed) .ShopReconnect_Failed { display: block; }
#components-reconnect-modal.components-reconnect-paused .ShopReconnect_Paused { display: block; }

@media (max-width: 600px) {
    body :is(.ShopError, .Order_StatusPanel) { margin: 1rem 0; }
    .ShopError_Actions { flex-direction: column; }
    /* The shell's desktop gutters otherwise leave too little room for errors. */
    div#Div_Contenu:has(.ShopError, .Order_StatusPanel) { width: calc(100% - 1.5rem); padding: .5rem; }
    div#Div_Contenu:has(.ShopError, .Order_StatusPanel) article.content { padding: .5rem !important; }
}