/*
 * OLC updating overlay - web standard "Updating overlay for in-page updates" v1.0
 * ECCO theme copy (brand "me"). The other themes have their own copy in Themes/<theme>/Content/css.
 */

:root {
    --olc-upd-primary: #0068B3;
    --olc-upd-primary-label-size: 16px;
    --olc-upd-primary-label-weight: 600;
    --olc-upd-busy: #005595;
    --olc-upd-spinner-arc: #0068B3;
    --olc-upd-spinner-track: #E6E6E6;
    --olc-upd-text: #002A49;
    --olc-upd-text-secondary: #002A49;
    --olc-upd-accent: #0068B3;
    --olc-upd-radius: 6px;
    --olc-upd-disabled-bg: #E6E6E6;
    --olc-upd-disabled-text: #838D95;
}

/* ---- area being updated ---- */

.olc-upd-area {
    position: relative;
}

/* no clicks reach the area while it updates; the overlay itself (and its buttons) stays clickable */
.olc-upd-area--busy {
    pointer-events: none;
}

.olc-upd-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: auto;
    cursor: progress;
}

.olc-upd-overlay--fixed {
    position: fixed;
    z-index: 100000;
}

.olc-upd-overlay--slow,
.olc-upd-overlay--error {
    cursor: default;
}

/* ---- panel ---- */

.olc-upd-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 26px 28px 24px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--olc-upd-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-family: "Source Sans Pro", Arial, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: default;
}

/* placed by script on the visible part of the area */
.olc-upd-panel--placed {
    transform: translateX(-50%);
}

.olc-upd-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 4px solid var(--olc-upd-spinner-track);
    border-top-color: var(--olc-upd-spinner-arc);
    border-radius: 50%;
    animation: olc-upd-spin 0.8s linear infinite;
}

.olc-upd-overlay--error .olc-upd-spinner {
    display: none;
}

.olc-upd-message {
    margin: 14px 0 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--olc-upd-text);
}

.olc-upd-overlay--error .olc-upd-message {
    margin-top: 0;
}

.olc-upd-detail {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--olc-upd-text-secondary);
}

.olc-upd-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.olc-upd-actions[hidden] {
    display: none;
}

/* Try again / Reload page. Page and theme button styles must not recolour these (the brand rule "white 19 px bold
   label on OLC red" is a contrast requirement), hence the extra specificity and !important on colour and type. */
.olc-upd-overlay .olc-upd-actions .olc-upd-btn {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 44px;
    margin: 0;
    padding: 8px 20px;
    border-radius: var(--olc-upd-radius) !important;
    font-family: "Source Sans Pro", Arial, sans-serif !important;
    line-height: 1.2;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* primary: brand fill, white bold label (OLC red #FF4848 / ME-Esonic blue #0068B3) */
.olc-upd-overlay .olc-upd-actions .olc-upd-btn--primary {
    background: var(--olc-upd-primary) !important;
    border: 1px solid var(--olc-upd-primary) !important;
    color: #FFFFFF !important;
    font-size: var(--olc-upd-primary-label-size) !important;
    font-weight: var(--olc-upd-primary-label-weight) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

/* pressed / hover: OLC deep blue (no darker-red tint), ME-Esonic press blue */
.olc-upd-overlay .olc-upd-actions .olc-upd-btn--primary:hover,
.olc-upd-overlay .olc-upd-actions .olc-upd-btn--primary:active {
    background: var(--olc-upd-busy) !important;
    border-color: var(--olc-upd-busy) !important;
    color: #FFFFFF !important;
}

/* secondary: white with a brand outline and label (OLC deep blue / ME-Esonic blue), light brand grey on hover */
.olc-upd-overlay .olc-upd-actions .olc-upd-btn--secondary {
    background: #FFFFFF !important;
    border: 1px solid var(--olc-upd-accent) !important;
    color: var(--olc-upd-accent) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.olc-upd-overlay .olc-upd-actions .olc-upd-btn--secondary:hover,
.olc-upd-overlay .olc-upd-actions .olc-upd-btn--secondary:active {
    background: var(--olc-upd-spinner-track) !important;
    color: var(--olc-upd-accent) !important;
}

.olc-upd-overlay .olc-upd-actions .olc-upd-btn:focus-visible {
    outline: 2px solid var(--olc-upd-accent);
    outline-offset: 2px;
}

/* ---- other controls in the area while the overlay shows (brand "Disabled controls": solid fill, no opacity fade).
   Not applied in the first 400 ms, so fast updates never flicker; never to the busy control or the overlay buttons. ---- */

.olc-upd-area--overlay button:not(.olc-upd-btn):not(.olc-upd-trigger-busy),
.olc-upd-area--overlay input[type="submit"]:not(.olc-upd-trigger-busy),
.olc-upd-area--overlay input[type="button"]:not(.olc-upd-trigger-busy),
.olc-upd-area--overlay .btn:not(.olc-upd-btn):not(.olc-upd-trigger-busy),
.olc-upd-area--overlay [data-olc-updating-button]:not(.olc-upd-trigger-busy) {
    background-color: var(--olc-upd-disabled-bg) !important;
    border-color: var(--olc-upd-disabled-bg) !important;
    color: var(--olc-upd-disabled-text) !important;
    opacity: 1 !important;
}

/* ---- the control the customer used ---- */

.olc-upd-trigger-busy {
    pointer-events: none;
    cursor: progress;
}

.olc-upd-trigger-busy--button,
.olc-upd-trigger-busy--button:hover,
.olc-upd-trigger-busy--button:focus {
    background: var(--olc-upd-busy) !important;
    border-color: var(--olc-upd-busy) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* "Updating..." label: the original content is hidden, not removed (bare text is wrapped in .olc-upd-hidden-text by the script) */
.olc-upd-trigger-busy--label > :not(.olc-upd-busy-label) {
    display: none !important;
}

.olc-upd-busy-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-transform: none;
}

.olc-upd-busy-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: olc-upd-spin 0.8s linear infinite;
}

/* ---- short confirmation ---- */

.olc-upd-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--olc-upd-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    color: var(--olc-upd-text);
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.olc-upd-toast--visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.olc-upd-toast-check {
    display: inline-block;
    width: 6px;
    height: 11px;
    margin: 0 4px 3px 2px;
    border: solid var(--olc-upd-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes olc-upd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* reduced motion: the spinner stops rotating, the text stays */
@media (prefers-reduced-motion: reduce) {
    .olc-upd-spinner,
    .olc-upd-busy-spinner {
        animation: none;
    }

    .olc-upd-toast,
    .olc-upd-toast--visible {
        transition: none;
    }
}