/* /css/first_login.css */
/* Styles for the multi-step onboarding modal. */

/* ==========================================================================
   1.0 Modal & Layout
   ========================================================================== */

.onboarding-modal-content {
    max-width: 28rem; /* 448px */
    width: 100%;
    padding: 2rem; /* Increased padding */
    text-align: center;
    position: relative;
    overflow: hidden; /* Prevent content overflow during transitions */
}

#onboarding-steps-container {
    position: relative;
    min-height: 350px; /* Set a min-height to prevent layout shifts */
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.onboarding-step {
    width: 100%;
    flex-shrink: 0;
    display: none; /* Hide all steps by default */
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.onboarding-step.active {
    display: flex; /* Show only the active step */
}

.onboarding-title {
    font-family: var(--font-serif);
    font-size: 1.75rem; /* 28px */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.onboarding-description {
    color: var(--text-muted);
    margin-bottom: 1rem;
    max-width: 90%;
}

.onboarding-footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.skip-link {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.skip-link:hover {
    color: var(--color-primary-accent);
}


/* ==========================================================================
   2.0 Progress Bar
   ========================================================================== */

.progress-bar-container {
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
}
.progress-bar-track {
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
}
.progress-bar-fill {
    height: 100%;
    width: 0%; /* Starts at 0, controlled by JS */
    background-color: var(--color-primary-accent);
    border-radius: 2px;
    transition: width 0.4s ease-in-out;
}
.progress-steps {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
}
.progress-step {
    width: 12px;
    height: 12px;
    background-color: var(--color-border);
    border-radius: 50%;
    transition: background-color 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.progress-step.active {
    background-color: var(--color-primary-accent);
    transform: scale(1.2);
}


/* ==========================================================================
   3.0 Step-Specific Content
   ========================================================================== */

/* Step 1: Business Details */
.logo-uploader {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed var(--color-border);
    background-color: var(--color-background);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
}
.logo-uploader:hover {
    border-color: var(--color-primary-accent);
    background-color: #fefcf9;
}

.logo-uploader .uploader-prompt i { font-size: 1.5rem; color: var(--text-muted); }
.logo-uploader .uploader-prompt span { font-size: 0.75rem; color: var(--text-muted); }
.logo-uploader .uploader-preview {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Step 2: Moodboard */
.moodboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}
.moodboard-uploader {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-background);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    overflow: hidden;
}
.moodboard-uploader:hover {
    border-color: var(--color-primary-accent);
}
.moodboard-uploader i { font-size: 1.5rem; color: var(--text-muted); }
.moodboard-uploader .uploader-preview {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Step 3: Success Animation */
.success-animation {
    margin: 2rem 0;
}
.checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 3; stroke: var(--color-primary-accent); stroke-miterlimit: 10; }
.checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: var(--color-primary-accent); fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }


/* ==========================================================================
   4.0 Confirmation Dialog
   ========================================================================== */

.skip-confirmation-dialog {
    position: absolute;
    inset: 0;
    background-color: var(--color-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 10;
    transition: opacity 0.3s ease;
}
.skip-confirmation-dialog.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Fix for logo uploader text alignment */
.logo-uploader .uploader-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}