/* Completion Screen (Step 9) */
.completion-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
}

.completion-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.completion-subtitle {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-light);
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.completion-steps-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-lighter);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.completion-steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-bottom: 40px;
}

/* When the Lunar opt-in callout follows the steps list, tighten the gap.
   The 40px above is the "comfortable air before the CTA" — appropriate
   when nothing sits between steps and button. With the callout present,
   it would isolate the callout in a void. 20px reads as "continuation of
   the same DET SKER NU section" instead of a separate floating block.
   :has() is widely supported by 2026; engines without it fall back to
   40px (still works, just less tight). Same logic for the Variant A
   .addon-lunar-optin completion card. 2026-05-23 evening polish. */
.completion-steps-list:has(+ .completion-lunar-callout),
.completion-steps-list:has(+ .addon-lunar-optin) {
    margin-bottom: 20px;
}

.completion-step-item {
    display: flex;
    align-items: center;
    /* Tightened from 16px to 14px to match the smaller numbered circles
       below — preserves the "circle hugs its label" relationship. */
    gap: 14px;
}

/* Numbered step markers. Refined 2026-05-23 evening for visual coherence
   with the rest of the funnel: previously 32px (ratio 2.13× the 15px
   text — chunky), now 26px (ratio 1.73× — proportionate). Variant C's
   preview bullets sit at 1.48× for reference. Solid dark fill retained
   (the numbers still need to read as primary system markers), but the
   smaller diameter, smaller numeral, and tighter kerning lift the
   overall feel from "Bootstrap stamp" to "premium step indicator". */
.completion-step-number {
    width: 26px;
    height: 26px;
    background: var(--color-text);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: -0.2px;
}

.completion-step-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
}

/* === LUNAR POST-OPT-IN CALLOUT === */
/* Distinct-but-quiet Lunar acknowledgment block on the completion screen.
   Sits between the 3-step "DET SKER NU" list and the SE DIN STATUSSIDE
   CTA. Light card on a light page — partner identity preserved (Lunar
   logo + green accent rule + "DIT TILVALG ✓" tag) but visual weight kept
   lower than the primary CTA below so the eye lands on the next-step
   button, not on this confirmation.
   First-pass (2026-05-23) used a dark Lunar takeover here — clashed with
   the surrounding RK chrome because the Lunar moment had already ended
   on Variant C. This light treatment reads as "calm acknowledgment of
   the Lunar moment that just happened" rather than re-opening it. */
.completion-lunar-callout {
    /* Top margin is 0 — the .completion-steps-list above owns the gap
       (20px when callout is present via :has() rule, 40px otherwise).
       Bottom margin 28px separates the callout from the primary CTA. */
    margin: 0 0 28px 0;
    padding: 16px 20px 16px 22px;
    background: #ffffff;
    color: var(--color-text);
    border-radius: var(--card-radius);
    /* Three-layer shadow:
       - inset 3px Lunar-green left accent rule (partner-signal)
       - inset 1px hairline border (defines edge without loud-border feel)
       - outer soft elevation (lifts the card off the page surface) */
    box-shadow: inset 3px 0 0 #00CB39,
                inset 0 0 0 1px rgba(15, 20, 30, 0.06),
                0 1px 3px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Soft fade-in to feel deliberate alongside the confetti animation. */
    opacity: 0;
    animation: lunarCalloutFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.15s;
}

@keyframes lunarCalloutFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .completion-lunar-callout {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.completion-lunar-callout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 22px;
}

.completion-lunar-callout-logo {
    /* Lunar's stacked B2B lockup (2026-06-11): 36px tall ≈ 62px wide is the
       smallest size keeping the LUNAR wordmark at the guide's 60px minimum. */
    height: 36px;
    width: auto;
    max-height: 36px;
    max-width: 70px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* Small status tag — right side of header. "DIT TILVALG ✓" reads as a badge
   confirming the user's choice. Brand-guide compliance (2026-06-11): green
   TEXT on white below headline size fails their own rule ("green text only
   ≥18pt on light backgrounds") and a darkened green is off-palette ("no dark
   greens, no muted greens"). So: text in Lunar's digital black #131414, and
   the green lives only in the ✓ badge — a small graphic element, which the
   palette rules explicitly allow on white. Black ✓ glyph on the green disc
   mirrors Lunar's own green-button-with-black-text treatment. */
.completion-lunar-callout-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: #131414;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
}

.completion-lunar-callout-tag-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #00CB39;
    color: #131414;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.completion-lunar-callout-message {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.55;
    text-wrap: balance;
}

/* Mobile: tighten paddings + keep tag readable. */
@media (max-width: 480px) {
    .completion-lunar-callout {
        padding: 16px 16px 16px 20px;
    }
    .completion-lunar-callout-tag {
        font-size: 10px;
        letter-spacing: 0.6px;
    }
}
/* === /LUNAR POST-OPT-IN CALLOUT === */

.completion-button {
    width: 100%;
    padding: 16px 24px;
    background: var(--color-brand-blue);
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
    display: block;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.completion-button:hover {
    background: var(--color-brand-blue-hover);
    transform: translateY(-1px);
}

.completion-button:active {
    transform: translateY(0);
}

/* === LUNAR OPT-IN ADD-ON === */
/* Slotted between the "DET SKER NU" steps list and the primary status-page CTA.
   Visually secondary so it never competes with the standard accountant-matching path. */
.addon-lunar-optin {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 28px 0;
    padding: 20px 20px 18px 20px;
    background: #f7f7fb;
    border: 1px solid #e6e6ee;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.addon-lunar-optin-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.addon-lunar-optin-eyebrow {
    font-size: 10px;
    font-weight: 600;
    color: #6b6b78;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.addon-lunar-optin-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.35;
}

.addon-lunar-optin-body {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.addon-lunar-optin-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    margin: 4px -10px 0 -10px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.addon-lunar-optin-checkbox:hover {
    background: rgba(0, 0, 0, 0.025);
}

.addon-lunar-optin-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #1a5f3d;
}

.addon-lunar-optin-checkbox-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
}

.addon-lunar-optin-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 12px;
    background: #e8f5ee;
    border-radius: 10px;
    color: #1a5f3d;
    font-size: 13px;
    font-weight: 500;
}

.addon-lunar-optin-confirm-icon {
    font-size: 14px;
    line-height: 1;
}
/* === /LUNAR OPT-IN ADD-ON === */