/* Onboarding flow styles */

/* Shared circle-icon utility — size, bg, color, and font-size set per usage */
.onboarding-circle-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --icon-bg: var(--color-bg-primary-soft);
    --icon-fg: var(--bs-primary);
    background: var(--icon-bg);
    color: var(--icon-fg);

    &.success { --icon-bg: var(--color-success-bg); --icon-fg: var(--color-success-fg); }
    &.warning { --icon-bg: var(--color-warning-bg); --icon-fg: var(--color-warning-fg); }
    &.danger  { --icon-bg: var(--color-danger-bg);  --icon-fg: var(--color-danger-fg);  }
}

.onboarding-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-2xl);

    & #intake-form {
        width: 100%;
    }
}

.onboarding-progress {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-3xl);
    overflow-x: auto;
    max-width: 90svw;
    padding-block: var(--space-lg);

    & .onboarding-step-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        min-width: 90px;
        position: relative;
        z-index: 1;
    }

    & .onboarding-step-badge {
        width: 36px;
        height: 36px;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-body);
        transition: background 0.3s, color 0.3s;

        &.active    { --icon-bg: var(--bs-primary);       --icon-fg: var(--color-text-inverse); }
        &.completed { --icon-bg: var(--color-success-bg); --icon-fg: var(--color-success-fg); }

        /* The check and the number are both always in the DOM so advancing a
           step is a pure class toggle for JS; only one is ever visible. */
        & .fa-check { display: none; }
        &.completed .fa-check { display: inline; }
        &.completed .onboarding-step-number { display: none; }
    }

    & .onboarding-step-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-medium);
        text-align: center;
    }

    & .onboarding-step-line {
        flex: 1;
        height: 2px;
        background: var(--color-border);
        margin: 1rem var(--space-sm) var(--space-xl);
        min-width: 24px;
    }
}


.onboarding-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-3xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: var(--space-3xl);
    width: 100%;

    & h2 {
        font-size: var(--font-size-title);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        margin-bottom: var(--space-xl);
    }

    & .onboarding-subtitle {
        color: var(--color-text-body);
        margin-block-end: var(--space-xl);
        margin-inline: auto;
        max-width: 750px;
    }
}

.onboarding-card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
    margin: 0 auto var(--space-xl);
}

.onboarding-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.onboarding-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);

    & label {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-body);
        color: var(--color-text-primary);
    }

    & input,
    & select,
    & textarea {
        background: var(--color-bg-surface);
        padding: var(--space-sm) var(--space-md);
        border: 1px solid var(--color-border-input);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-subtitle);
        transition: border-color 0.2s;

        &:focus {
            outline: none;
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
        }
    }
}

.onboarding-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);

    & .onboarding-marketplace-icon {
        width: 1.33em;
        height: 1.33em;
    }

    & .onboarding-marketplace-option {
        position: relative;

        & input[type="checkbox"] {
            display: none;
        }

        & label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-lg);
            border: 2px solid var(--color-border);
            border-radius: var(--radius-2xl);
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-subtitle);
            text-align: center;
            transition: border-color 0.2s, background 0.2s;

            &:has(input:checked) {
                border-color: var(--bs-primary);
                background: var(--color-bg-primary-soft);
            }
        }
    }

    & .onboarding-marketplace-icon-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.33em;
    }
}

.onboarding-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.onboarding-category-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;

    & input[type="checkbox"] {
        display: none;
    }

    &:has(input[type="checkbox"]:checked) {
        border-color: var(--bs-primary);
        background: var(--color-bg-primary-soft);
    }
}

.onboarding-category-other {
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);

    & .onboarding-category-item {
        max-width: 200px;
    }
}

.onboarding-setup-section {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-bottom: var(--space-2xl);

    & .onboarding-setup-header {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-xl);
        background: var(--color-bg-muted);
        border-bottom: 1px solid var(--color-border);

        & h4 {
            margin: 0;
            font-weight: var(--font-weight-bold);
            color: var(--color-text-heading);
        }
    }

    & .onboarding-setup-body {
        padding: var(--space-xl);

        & ol {
            padding-left: var(--space-xl);
            margin: 0;
        }

        & li {
            margin-bottom: var(--space-md);
            line-height: 1.6;
            color: var(--color-text-body);
        }
    }
}

.onboarding-address-box {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-sm);
    font-weight: var(--font-weight-medium);
}

.onboarding-permission-item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.onboarding-verification-status {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.onboarding-verification-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);

    &.unverified {
        background: var(--color-bg-muted);
        color: var(--color-text-secondary);
    }

    &.verified {
        background: var(--color-success-bg);
        color: var(--color-success-fg);
    }
}

.onboarding-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2xl);
    width: 100%;

    &.has-back { justify-content: space-between; }
}

.onboarding-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    width: 100%;
    max-width: 800px;
    margin: var(--space-3xl) auto 0;
}

/* Accent is read from --solution-accent/-hover/--solution-tint, set by a
   .theme-* class as on .solution-page and .home-solution-card. Defaults to
   primary, so the card itself knows nothing about which service it shows. */
.onboarding-service-card {
    --solution-accent: var(--bs-primary);
    --solution-accent-hover: var(--bs-primary);
    --solution-tint: var(--color-bg-primary-soft);

    background: var(--color-bg-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-3xl);
    padding: var(--space-3xl);
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);

    &.theme-green {
        --solution-accent: var(--color-accent);
        --solution-accent-hover: var(--color-accent-hover);
        --solution-tint: var(--color-bg-accent-soft);
    }

    &.theme-gold {
        --solution-accent: var(--color-liquidation);
        --solution-accent-hover: var(--color-liquidation-hover);
        --solution-tint: var(--color-liquidation-soft);
    }

    /* After the themes so these override them: the outcome of a decision is a
       state, not a service. Completed rides on :has(input:checked), which is
       already true for it; rejected is disabled but deliberately unchecked, so
       it paints itself. */
    &.onboarding-service-card-completed {
        --solution-accent: var(--color-accent);
        --solution-tint: var(--color-bg-accent-soft);
    }

    &.onboarding-service-card-rejected {
        --solution-accent: var(--color-danger);
        --solution-tint: var(--color-danger-bg);

        border-color: var(--solution-accent);
        background: var(--solution-tint);
    }

    &:not(.onboarding-service-card-blocked):hover {
        border-color: var(--solution-accent-hover);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
        color: inherit;
        text-decoration: none;
    }

    & input.onboarding-service-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    &:has(input:checked) {
        border-color: var(--solution-accent);
        background: var(--solution-tint);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

    &.onboarding-service-card-blocked {
        cursor: not-allowed;
        opacity: 0.55;
        user-select: none;
    }

    & h3 {
        font-size: var(--font-size-subtitle);
        font-weight: var(--font-weight-bold);
        margin: 0;
        color: var(--color-text-heading);
    }

    & p {
        font-size: var(--font-size-body);
        color: var(--color-text-body);
        margin: 0;
    }
}

.onboarding-service-card-wrapper {
    position: relative;

    & .onboarding-service-card {
        height: 100%;
    }
}

.onboarding-service-status-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    font-size: var(--font-size-subtitle);
    z-index: 1;

    &.danger {
        --icon-bg: var(--color-danger);
        --icon-fg: var(--color-text-inverse);
    }
}

.onboarding-service-status-caption {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);

    &.danger { color: var(--color-danger-fg); }

    & a {
        color: var(--color-text-secondary);
    }
}

.onboarding-all-completed-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    margin-bottom: var(--space-xl);
}

.onboarding-all-completed-notice {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-warning-fg);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.onboarding-checkbox-inline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.onboarding-template-note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-block-end: var(--space-xl);
    color: var(--color-text-body);

    p {
        margin: 0;
    }
}

.onboarding-template-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-liquidation);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;

    &:hover {
        color: var(--color-liquidation-hover);
    }
}

.onboarding-service-icon {
    --icon-bg: var(--solution-tint);
    --icon-fg: var(--solution-accent);
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.onboarding-help-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
    border-block-start: 1px solid var(--color-border);
    text-align: center;

    & p {
        color: var(--color-text-secondary);
        margin: 0;
    }

    & .option-button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        background: var(--color-accent-strong);
        color: var(--color-text-inverse);
        padding: var(--space-md) var(--space-xl);
        border-radius: var(--radius-lg);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        transition: background 0.2s ease;
    }

    & .option-button:hover {
        background: var(--color-accent-dark);
    }
}

@media (max-width: 640px) {
    .onboarding-form-row         { grid-template-columns: 1fr; }
    .onboarding-landing-grid     { grid-template-columns: 1fr; }
    .onboarding-marketplace-grid { grid-template-columns: 1fr 1fr; }
    .onboarding-category-grid    { grid-template-columns: 1fr; }
    .onboarding-card             { padding: var(--space-xl); }
    .onboarding-step-label       { font-size: var(--font-size-caption); }
}