/* Onboarding Process Steps Hover Descriptions */
.step-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Ensure clicked state on mobile doesn't jump */
}

.step-item:hover,
.step-item.active {
    transform: translateY(-5px);
}

/* DESKTOP: Hide inline description, use central container */
@media (min-width: 769px) {
    .step-description {
        display: none;
    }

    #onboarding-desc-container {
        display: block;
        opacity: 0;
        animation: fadeIn 0.5s ease forwards;
        margin-top: 2rem;
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
}

/* MOBILE: Accordion Logic */
@media (max-width: 768px) {
    #onboarding-desc-container {
        display: none;
        /* Hide the desktop container */
    }

    .step-item {
        display: flex;
        flex-direction: row;
        /* Restore row layout for timeline look */
        align-items: flex-start;
        /* Align top to handle wrapping */
        flex-wrap: wrap;
        /* Allow description to wrap below */
        margin-bottom: 2rem;
        gap: 1rem;
        /* Space between circle and label */

        /* Remove mobile animations except expansion */
        transform: none !important;
        transition: none !important;
    }

    .step-circle {
        background: #E30B5C !important;
        /* Raspberry background on mobile */
    }

    .step-description {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 0.5rem;
        padding: 0;
        /* Indent to align with text (Circle width 40px + gap 1rem aprox) */
        padding-left: calc(40px + 1rem);
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
        max-width: 100%;
        text-align: left;
        /* Left align text */

        /* Accordion transition properties */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;

        flex-basis: 100%;
        /* Force new line */
    }

    /* Adjust label to fit in the row */
    .step-label {
        flex: 1;
        /* Take remaining width */
        display: flex;
        align-items: center;
        min-height: 40px;
        /* Align with circle height */
        padding: 0;
        text-align: left;
    }

    /* Active state for Mobile Accordion */
    .step-item.active .step-description {
        max-height: 200px;
        /* Arbitrary large height */
        opacity: 1;
        margin-top: 1rem;
        pointer-events: auto;
        max-width: 80vw;

    }

    /* Remove arrows on mobile */
    .step-description::before,
    .step-description::after {
        display: none;
    }
}