.thankyou-imw-loader {
    position: relative;
    margin-top: 16px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

.thankyou-imw-loader * {
    box-sizing: border-box;
}

/* ---------- Before / After visual ---------- */

.thankyou-imw-loader__visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 626px;
    margin: 0 auto 28px;
}

.thankyou-imw-loader__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 248px;
    aspect-ratio: 248 / 176;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(14deg, rgba(104, 187, 255, 0.5) 0%, rgba(2, 102, 184, 0.5) 86%);
    animation: thankyou-imw-card-glow 3.2s ease-in-out infinite;
}

.thankyou-imw-loader__card--after {
    animation-delay: 0.5s;
}

.thankyou-imw-loader__card--before {
    /* Distance the scan line travels, expressed relative to the card's own rendered
       height rather than a fixed px guess: the card's width (and therefore height,
       via aspect-ratio) is fluid and varies with the surrounding page layout/padding,
       so a hardcoded distance can overshoot on narrower containers. */
    --scan-distance: calc(100% - 3px);
}

.thankyou-imw-loader__badge {
    position: absolute;
    top: 8px;
    left: 13px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: normal;
    white-space: nowrap;
}

.thankyou-imw-loader__badge--before {
    background: #e5e5e5;
    color: #11161e;
}

.thankyou-imw-loader__badge--after {
    background: #ffffff;
    color: #3689f5;
}

.thankyou-imw-loader__badge--after svg {
    animation: thankyou-imw-sparkle 1.8s ease-in-out infinite;
}

.thankyou-imw-loader__card-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 6px;
    color: #ffffff;
    white-space: nowrap;
    z-index: 1;
}

.thankyou-imw-loader__watermark-text {
    /* Synced with the scan line + clean badge: fades out while the line sweeps
       down past it, fades back in on the way up. */
    animation: thankyou-imw-watermark-text 4s ease-in-out infinite;
}

.thankyou-imw-loader__clean-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 10px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #3689f5;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    /* Synced with the scan line + watermark text: same duration, same easing, no
       independent delay, so it only appears while the line is over the card. */
    animation: thankyou-imw-clean-badge 4s ease-in-out infinite;
}

.thankyou-imw-loader__clean-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.thankyou-imw-loader__scan-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
    pointer-events: none;
    animation: thankyou-imw-scan-line 4s ease-in-out infinite;
}

.thankyou-imw-loader__arrows {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.thankyou-imw-loader__arrow {
    display: flex;
    animation: thankyou-imw-arrow-pulse 1.6s ease-in-out infinite;
}

.thankyou-imw-loader__arrow--1 {
    animation-delay: 0s;
}

.thankyou-imw-loader__arrow--2 {
    animation-delay: 0.18s;
}

.thankyou-imw-loader__arrow--3 {
    animation-delay: 0.36s;
}

/* Stop the decorative visual once processing has finished (success or error) */
.thankyou-imw-loader.is-ready .thankyou-imw-loader__scan-line,
.thankyou-imw-loader.is-error .thankyou-imw-loader__scan-line {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.thankyou-imw-loader.is-ready .thankyou-imw-loader__card,
.thankyou-imw-loader.is-error .thankyou-imw-loader__card,
.thankyou-imw-loader.is-ready .thankyou-imw-loader__arrow,
.thankyou-imw-loader.is-error .thankyou-imw-loader__arrow,
.thankyou-imw-loader.is-ready .thankyou-imw-loader__badge--after svg,
.thankyou-imw-loader.is-error .thankyou-imw-loader__badge--after svg,
.thankyou-imw-loader.is-ready .thankyou-imw-loader__watermark-text,
.thankyou-imw-loader.is-error .thankyou-imw-loader__watermark-text,
.thankyou-imw-loader.is-ready .thankyou-imw-loader__clean-badge,
.thankyou-imw-loader.is-error .thankyou-imw-loader__clean-badge {
    animation: none;
}

.thankyou-imw-loader.is-ready .thankyou-imw-loader__arrow {
    opacity: 1;
}

/* Ready or errored: the Before card always reverts to showing the original watermark
   (either the job is done and the loader is switching to the After result via the
   Clean badge going away, or it failed and nothing was actually cleaned). */
.thankyou-imw-loader.is-ready .thankyou-imw-loader__watermark-text,
.thankyou-imw-loader.is-error .thankyou-imw-loader__watermark-text {
    opacity: 1;
}

/* Final state: the Clean badge is only meaningful mid-animation. Once ready, the
   result is communicated elsewhere (steps, ETA, download button) -- keep the After
   card plain. On error nothing was cleaned, so hide it too. */
.thankyou-imw-loader.is-ready .thankyou-imw-loader__clean-badge,
.thankyou-imw-loader.is-error .thankyou-imw-loader__clean-badge {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.92);
}

/* ---------- Title ---------- */

.thankyou-imw-loader__title {
    margin: 0 0 16px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #11161e;
}

/* ---------- Progress ---------- */

.thankyou-imw-loader__progress-track {
    position: relative;
    width: 100%;
    height: 12px;
    background: #e5e5e5;
    border: 1.25px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}

.thankyou-imw-loader__progress-bar {
    width: 0%;
    height: 100%;
    background: #3689f5;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.thankyou-imw-loader__progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 24px;
    font-family: Poppins, sans-serif;
    font-size: 14px;
}

.thankyou-imw-loader__percent {
    font-weight: 600;
    color: #3689f5;
    white-space: nowrap;
}

.thankyou-imw-loader__eta {
    display: inline-flex;
    align-items: center;
    min-height: 1.35em;
    font-weight: 400;
    color: #8d8d8f;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
    will-change: opacity, transform, filter;
}

/* Transient state applied for ~180ms while the late-stage message text swaps
   (see setImwEta in thankyou.blade.php) — not used for normal countdown ticks. */
.thankyou-imw-loader__eta.is-changing {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(2px);
}

.thankyou-imw-loader__eta.is-animated {
    color: #6b6b6d;
}

/* ---------- Steps ---------- */

.thankyou-imw-loader__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.thankyou-imw-loader__step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.thankyou-imw-loader__step-main {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.thankyou-imw-loader__step-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    position: relative;
    /* Muted ring: static grey arc on a light grey track (Figma "future step" spinner) */
    background: conic-gradient(from -20deg, #8d8d8f 0deg 100deg, #e5e5e5 100deg 360deg);
}

.thankyou-imw-loader__step-icon::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.thankyou-imw-loader__step.is-active .thankyou-imw-loader__step-icon {
    /* Animated ring: blue arc on a pale blue track, rotated as a whole to spin the gradient */
    background: conic-gradient(from -20deg, #3689f5 0deg 100deg, rgba(54, 137, 245, 0.2) 100deg 360deg);
    animation: thankyou-imw-spin 0.9s linear infinite;
}

.thankyou-imw-loader.is-error .thankyou-imw-loader__step.is-active .thankyou-imw-loader__step-icon {
    animation: none;
    background: conic-gradient(from -20deg, #c0392b 0deg 100deg, rgba(192, 57, 43, 0.2) 100deg 360deg);
}

.thankyou-imw-loader__step.is-done .thankyou-imw-loader__step-icon {
    /* Final completed state (Figma): outlined blue check-circle, no fill */
    background: url('/icons/doctool/new/loaders/check-circle.svg') center / contain no-repeat;
    animation: none;
}

.thankyou-imw-loader__step.is-done .thankyou-imw-loader__step-icon::before {
    content: none;
}

.thankyou-imw-loader__step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.thankyou-imw-loader__step-title {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #11161e;
}

.thankyou-imw-loader__step-desc {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: #8d8d8f;
}

.thankyou-imw-loader__step-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: #8d8d8f;
    background: #e5e5e5;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.thankyou-imw-loader__step-badge-done {
    display: none;
    align-items: center;
    gap: 4px;
}

.thankyou-imw-loader__step-badge-done-icon {
    width: 12px;
    height: 12px;
    display: block;
}

.thankyou-imw-loader__step.is-active .thankyou-imw-loader__step-badge {
    color: #11161e;
    background: rgba(54, 137, 245, 0.3);
}

.thankyou-imw-loader__step.is-done .thankyou-imw-loader__step-badge {
    /* Final completed state (Figma): green "Done" badge with checkmark */
    color: #11161e;
    background: rgba(52, 199, 89, 0.3);
}

.thankyou-imw-loader__step.is-done .thankyou-imw-loader__step-badge-label {
    display: none;
}

.thankyou-imw-loader__step.is-done .thankyou-imw-loader__step-badge-done {
    display: inline-flex;
}

/* ---------- Error ---------- */

.thankyou-imw-loader__error {
    display: none;
    margin: 14px 0 0;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: #c0392b;
}

.thankyou-imw-loader.is-error .thankyou-imw-loader__error {
    display: block;
}

/* ---------- Keyframes ---------- */

@keyframes thankyou-imw-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes thankyou-imw-scan-line {
    0% {
        top: 0;
    }
    45% {
        top: var(--scan-distance);
    }
    55% {
        top: var(--scan-distance);
    }
    100% {
        top: 0;
    }
}

@keyframes thankyou-imw-watermark-text {
    0%,
    20% {
        opacity: 1;
    }
    45%,
    55% {
        opacity: 0;
    }
    80%,
    100% {
        opacity: 1;
    }
}

@keyframes thankyou-imw-clean-badge {
    0%,
    20% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
    45%,
    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
}

@keyframes thankyou-imw-card-glow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(54, 137, 245, 0);
    }
    50% {
        box-shadow: 0 0 24px rgba(54, 137, 245, 0.35);
    }
}

@keyframes thankyou-imw-arrow-pulse {
    0%,
    100% {
        opacity: 0.25;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
    }
}

@keyframes thankyou-imw-sparkle {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {

    .thankyou-imw-loader {
        padding: 16px;
        border-radius: 16px;
    }

    .thankyou-imw-loader__visual {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }

    .thankyou-imw-loader__card {
        width: 100%;
        max-width: 248px;
        flex: 0 0 auto;
    }

    .thankyou-imw-loader__arrows {
        flex-direction: column;
        gap: 0;
    }

    .thankyou-imw-loader__arrow svg {
        transform: rotate(90deg);
    }

    .thankyou-imw-loader__title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .thankyou-imw-loader__progress-meta {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .thankyou-imw-loader__steps {
        gap: 14px;
    }

    .thankyou-imw-loader__step {
        justify-content: flex-start;
    }

    .thankyou-imw-loader__step-badge {
        display: none;
    }

    .thankyou-imw-loader__step-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .thankyou-imw-loader__scan-line,
    .thankyou-imw-loader__watermark-text,
    .thankyou-imw-loader__card,
    .thankyou-imw-loader__arrow,
    .thankyou-imw-loader__badge--after svg,
    .thankyou-imw-loader__clean-badge,
    .thankyou-imw-loader__step.is-active .thankyou-imw-loader__step-icon {
        animation: none !important;
    }

    .thankyou-imw-loader__arrow {
        opacity: 1;
    }

    /* Stable processing state: no sweeping line, watermark stays put, no badge
       claiming the file is clean until it actually is (handled by the .is-ready /
       .is-error rules above, which win on specificity over these two). */
    .thankyou-imw-loader__scan-line {
        opacity: 0;
    }

    .thankyou-imw-loader__watermark-text {
        opacity: 1;
    }

    .thankyou-imw-loader__clean-badge {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }

    .thankyou-imw-loader__progress-bar {
        transition: none;
    }

    .thankyou-imw-loader__eta {
        transition: none;
    }

    .thankyou-imw-loader__eta.is-changing {
        opacity: 1;
        transform: none;
        filter: none;
    }
}