/* assets/css/frontend.css (v2.0 - Figma Design Implementation) */

/* ---------- Layout / Wrapper ---------- */
.onboarding-wrapper{
    max-width:1000px;
    margin:0 auto;
    padding:40px 20px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color:var(--onb-bg, #f8f9fa);
    min-height:100vh;
}

.onboarding-title{
    font-size:32px;
    font-weight:700;
    margin-bottom:16px;
    text-align:center;
    color:#1a1a1a;
    line-height:1.2;
}
.onboarding-group-description{
    font-size:18px;
    color:#6b7280;
    margin-bottom:48px;
    line-height:1.6;
    text-align:center;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------- Progress ---------- */
.onboarding-progress{
    margin-bottom:48px;
    text-align:center;
}
.onboarding-progress p{
    font-size:16px;
    margin-bottom:16px;
    color:#374151;
    font-weight:500;
}
.onboarding-progress div{
    background:#e5e7eb;
    border-radius:12px;
    overflow:hidden;
    height:8px;
    max-width:400px;
    margin:0 auto;
}
.onboarding-progress div>div{
    background:#10b981;
    height:8px;
    display:block;
    border-radius:12px;
    transition:width .6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Step card ---------- */
.onboarding-step{
    border:1px solid #e5e7eb;
    padding:24px;
    margin-bottom:16px;
    border-radius:12px;
    background:#ffffff;
    transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:16px;
}
.onboarding-step:hover{
    box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform:translateY(-2px);
}
.onboarding-step.disabled{
    opacity:.6;
    transform:none;
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.onboarding-step.step-done{
    border-left:4px solid #10b981;
    background-color:#f0fdf4;
}
.onboarding-step.waiting-approval{
    border-left:4px solid #f59e0b;
    background-color:#fffbeb;
}

/* Disabled/waiting interaction locks */
.onboarding-step.disabled .step-button,
.onboarding-step.disabled .done-button{
    pointer-events:none;
    cursor:not-allowed;
}
.onboarding-step.waiting-approval .done-button{
    background:#f59e0b;
    border-color:#f59e0b;
    color:#fff;
}

/* ---------- Header ---------- */
.step-header{
    display:flex;
    align-items:center;
    gap:16px;
    justify-content:space-between;
}
.step-info{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
}
.step-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.step-icon i{
    font-size:20px;
    color:#6b7280;
    width:20px;
    text-align:center;
}
.step-text{
    flex:1;
}
.step-title{
    font-size:18px;
    color:#111827;
    margin:0;
    font-weight:600;
    line-height:1.4;
}
.step-description{
    font-size:14px;
    color:#6b7280;
    margin:4px 0 0;
    line-height:1.5;
}

/* ---------- Buttons ---------- */
.step-button{
    height:40px;
    padding:0 20px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    color:#374151;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
    font-size:14px;
    transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-shrink:0;
    min-width:80px;
}
.step-button:hover{
    background:var(--onb-primary, #635BFF);
    color:#ffffff;
    border-color:var(--onb-primary, #635BFF);
    transform:translateY(-1px);
    box-shadow:0 2px 4px 0 rgba(99, 91, 255, 0.3);
}
.step-button[disabled]{
    background:#f3f4f6;
    color:#9ca3af;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.step-button::after{
    content:'\25BC';
    font-size:10px;
    color:#6b7280;
    margin-left:4px;
    transition:color .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-button:hover::after{
    color:#ffffff;
}

/* Done button – outlined by default, filled on hover */
.done-button{
    margin-left:auto;
    height:40px;
    padding:0 20px;
    border:2px solid var(--onb-primary, #635BFF);
    border-radius:8px;
    background:transparent;
    color:var(--onb-primary, #635BFF);
    cursor:pointer;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .2s,color .2s,border-color .2s;
}
.done-button:hover{background:var(--onb-primary, #635BFF);color:#fff}
.done-button[disabled]{
    border-color:#ccc;
    color:#ccc;
    background:#f9f9f9;
    cursor:not-allowed;
    opacity:.7;
}

/* ---------- Accordion ---------- */
.step-accordion-content{
    display:none;
    margin-top:15px;
    border-top:1px solid #eee;
    padding-top:15px;
}

.accordion-actions{text-align:right;margin-top:15px}

/* ---------- Thank-you page ---------- */
.onboarding-thank-you-wrapper{
    text-align:center;
}
.onboarding-thank-you{
    margin-top:48px;
    text-align:center;
}
.thankyou-icon{
    margin:24px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.thankyou-icon i{
    color:var(--onb-primary, #635BFF);
    font-size:64px;
}

/* ---------- Mobile Responsiveness ---------- */
@media (max-width: 768px) {
    .onboarding-wrapper{
        padding:24px 16px;
    }
    .onboarding-title{
        font-size:28px;
        margin-bottom:12px;
    }
    .onboarding-group-description{
        font-size:16px;
        margin-bottom:32px;
    }
    .onboarding-step{
        padding:20px 16px;
    }
    .step-header{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }
    .step-info{
        width:100%;
    }
    .step-button{
        align-self:flex-end;
        width:auto;
    }
}

/* ---------- Thank You Continue Button ---------- */
.thankyou-continue{
    text-align:center;
    margin-top:32px;
}

.continue-button{
    display:inline-block;
    height:48px;
    padding:0 32px;
    background:var(--onb-primary, #635BFF);
    color:#ffffff;
    border:none;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor:pointer;
}

.continue-button:hover{
    background:var(--onb-primary, #635BFF);
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(99, 91, 255, 0.3);
    text-decoration:none;
    color:#ffffff;
}

/* Pulsing Animation */
.pulse-animation{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(99, 91, 255, 0.4);
    }
    70%{
        box-shadow:0 0 0 15px rgba(99, 91, 255, 0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(99, 91, 255, 0);
    }
}

/* Mobile responsive for continue button */
@media (max-width: 768px) {
    .continue-button{
        height:44px;
        padding:0 24px;
        font-size:15px;
    }
}