/*
 * Full-screen completion stage for the seven-step experience.
 * Design authority: Mhzs20/nannovative-website@8473fe163c9e8c9f21a08697b98573e6c93ca300
 */

body[data-flow-state="achievement"] .modal-shell {
    width: min(100vw, 1440px);
    height: 100dvh;
    aspect-ratio: auto;
}

[data-screen="achievement"].flow-screen.is-active {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    padding: clamp(142px, 17dvh, 178px) clamp(16px, 4vw, 64px) clamp(28px, 6dvh, 64px);
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--nv-text);
    font-family: var(--nv-font-body);
    text-align: left;
}

.achievement-stage-layout {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: clamp(20px, 4vw, 52px);
    width: min(100%, 1160px);
    margin-inline: auto;
}

.achievement-portrait-wrap {
    position: sticky;
    top: 0;
    align-self: start;
    overflow: hidden;
    border: 1px solid var(--nv-accent);
    background: var(--nv-bg-deep);
    box-shadow: var(--nv-shadow-cyan), var(--nv-shadow-glass);
}

.achievement-portrait-wrap::after {
    content: "EXPERIENCE COMPLETE";
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    padding: 12px;
    border-left: 3px solid var(--nv-accent);
    background: var(--nv-bg-deep);
    color: var(--nv-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-align: center;
}

.achievement-portrait-wrap img {
    display: block;
    width: 100%;
    min-height: 520px;
    max-height: 720px;
    object-fit: cover;
    object-position: center top;
}

.achievement-seal {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 0;
    background: var(--nv-accent);
    color: var(--nv-bg-deep);
    font-size: 28px;
    box-shadow: 0 0 32px var(--nv-accent-30);
}

.achievement-success-details {
    display: grid;
    align-content: start;
    gap: 16px;
}

.achievement-success-details[hidden] {
    display: none;
}

.achievement-success-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--nv-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.achievement-badge-label {
    margin: 8px 0 -10px;
    color: var(--nv-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.achievement-success h1 {
    margin: 0;
    color: var(--nv-text);
    font-family: var(--nv-font-display);
    font-size: clamp(48px, 7vw, 92px);
    font-weight: 400;
    line-height: .9;
    text-transform: uppercase;
}

.achievement-success-message,
.achievement-success-description {
    margin: 0;
    color: var(--nv-text-soft);
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.55;
}

.achievement-success-message {
    padding: 14px 16px;
    border-left: 3px solid var(--nv-accent);
    background: var(--nv-accent-10);
    color: var(--nv-text);
}

.achievement-success-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--nv-border-strong);
    border-left: 1px solid var(--nv-border-strong);
}

.achievement-success-signals article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-right: 1px solid var(--nv-border-strong);
    border-bottom: 1px solid var(--nv-border-strong);
    background: var(--nv-glass-05);
}

.achievement-success-signals span,
.achievement-success-steps h2,
.achievement-success-share h2 {
    margin: 0;
    color: var(--nv-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.achievement-success-signals strong {
    color: var(--nv-text);
    font-size: 15px;
    line-height: 1.4;
}

.achievement-success-steps,
.achievement-success-share,
.achievement-delivery-state {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--nv-border-strong);
    background: var(--nv-glass-05);
}

.achievement-success-steps ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
    color: var(--nv-text-soft);
    font-size: 14px;
    line-height: 1.45;
}

.achievement-delivery-state {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

#achievementEmailIndicator {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: var(--nv-accent);
    box-shadow: 0 0 18px var(--nv-accent-30);
}

.achievement-delivery-state.is-pending #achievementEmailIndicator {
    background: var(--nv-text-muted);
    box-shadow: none;
}

.achievement-delivery-state p,
.achievement-success-share p,
.achievement-disclaimer {
    margin: 0;
    color: var(--nv-text-soft);
    font-size: 13px;
    line-height: 1.5;
}

.achievement-success-share p {
    padding-left: 12px;
    border-left: 3px solid var(--nv-accent);
}

.achievement-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.achievement-share-actions .nv-flow-button {
    min-width: 142px;
}

.achievement-success .success-close-button {
    width: 100%;
    min-height: 56px;
}

.achievement-disclaimer {
    color: var(--nv-text-muted);
    font-size: 11px;
}

@media (max-width: 760px) {
    [data-screen="achievement"].flow-screen.is-active {
        padding: 128px 12px 28px;
    }

    .achievement-stage-layout {
        grid-template-columns: 1fr;
    }

    .achievement-portrait-wrap {
        position: relative;
    }

    .achievement-portrait-wrap img {
        min-height: 0;
        max-height: 420px;
        aspect-ratio: 4 / 3;
    }

    .achievement-success-signals,
    .achievement-delivery-state {
        grid-template-columns: 1fr;
    }

    #achievementEmailIndicator {
        display: none;
    }

    .achievement-share-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .achievement-seal {
        box-shadow: none;
    }
}