/* ============================================
   VivoShop - Auth Pages Style v2.0
   ============================================ */

.auth-page {
    min-height: 100vh; display: flex; justify-content: center;
    align-items: center; padding: 20px;
}

.auth-container { width: 100%; max-width: 450px; animation: fadeIn 0.6s ease; }
.auth-container.wide { max-width: 550px; }

.auth-logo { text-align: center; font-family: 'Lalezar'; font-size: 42px; color: #e94560; margin-bottom: 5px; }
.auth-title { text-align: center; font-family: 'Lalezar'; font-size: 24px; color: white; margin-bottom: 25px; }
.auth-subtitle { text-align: center; color: #a8b2d1; font-size: 14px; margin-bottom: 20px; line-height: 1.8; }

/* Step Indicator */
.step-indicator { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.step {
    width: 35px; height: 35px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Lalezar'; font-size: 16px; color: #a8b2d1; transition: all 0.3s;
}
.step.active { background: #e94560; color: white; box-shadow: 0 0 20px rgba(233, 69, 96, 0.5); }
.step.completed { background: #4caf50; color: white; }
.step-line { width: 50px; height: 2px; background: rgba(255, 255, 255, 0.2); margin: 0 10px; }
.step-line.completed { background: #4caf50; }

/* Form Sections */
.form-section { display: none; animation: slideIn 0.4s ease; }
.form-section.active { display: block; }

/* Password Strength */
.password-strength { margin-top: 10px; }
.strength-bar { height: 4px; border-radius: 2px; transition: all 0.3s; margin-bottom: 5px; }
.strength-text { font-size: 12px; color: #a8b2d1; }

/* Test Account */
.test-account {
    background: rgba(233, 69, 96, 0.1); padding: 15px; border-radius: 12px;
    margin-top: 20px; border: 1px solid rgba(233, 69, 96, 0.3);
}
.test-account p { color: #a8b2d1; font-size: 13px; margin: 5px 0; }
.test-account .test-label { color: #e94560; font-family: 'Lalezar'; font-size: 16px; }

/* Security Question */
.security-question-display {
    background: rgba(233, 69, 96, 0.15); padding: 15px; border-radius: 12px;
    border: 1px solid rgba(233, 69, 96, 0.3); margin-bottom: 20px; text-align: center;
}
.security-question-display h4 { color: #e94560; font-family: 'Lalezar'; font-size: 18px; }
.security-question-display p { color: white; font-size: 16px; margin-top: 10px; }

/* Links */
.links { text-align: center; margin-top: 25px; }
.links a { color: #e94560; font-family: 'Lalezar'; font-size: 16px; }
.links p { color: #a8b2d1; margin-top: 10px; font-size: 14px; }
.back-link { display: block; text-align: center; margin-top: 20px; color: #a8b2d1; font-family: 'Lalezar'; font-size: 14px; }
.back-link:hover { color: white; }

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

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}