/* 
 * Diginew Skill & Development Centre
 * Auth Page Styles
 * Modern EdTech / SaaS Style
 */

:root {
    --primary-color: #4e54c8; /* Indigo */
    --primary-gradient: linear-gradient(to right, #4e54c8, #8f94fb);
    --accent-color: #00d2ff; /* Teal/Cyan */
    --text-dark: #333333;
    --text-muted: #6c757d;
    --bg-light: #f8f9fa;
    --input-bg: #f8f9fa;
    --input-border: #e9ecef;
    --input-focus-border: #8f94fb;
    --radius-lg: 1rem;
    --transition-speed: 0.3s;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* --------------------------------------------------
   LEFT SIDE: BRANDING & ILLUSTRATION
   -------------------------------------------------- */
.branding-section {
    background: var(--primary-gradient);
    min-height: 100vh;
    overflow: hidden;
}

/* Glassmorphism Overlay Effect */
.branding-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 0;
}

/* Decorative Shapes */
.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
    animation: floatShape 20s infinite linear;
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -50px;
    left: -50px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

@keyframes floatShape {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(50px, 50px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* Floating Illustration Animation */
.floating-animation {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* --------------------------------------------------
   RIGHT SIDE: FORMS
   -------------------------------------------------- */
.form-section {
    min-height: 100vh;
    background: #ffffff;
}

.auth-container {
    animation: fadeIn 0.8s ease-out;
}

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

/* Inputs */
.form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    padding-left: 1rem;
    height: 3.5rem; /* Taller inputs */
    transition: all var(--transition-speed);
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px rgba(78, 84, 200, 0.1); /* Soft primary glow */
}

/* Floating Labels Fix */
.form-floating > label {
    padding-left: 1rem;
    color: var(--text-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--primary-color);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Input Icons inside floating labels? 
   Bootstrap floating labels don't support icons easily inside the input text flow visually 
   without overlapping text. 
   We used icons in the label text in HTML. Let's style them.
*/
.form-floating > label > i {
    opacity: 0.7;
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    z-index: 5;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--primary-color);
}

/* Buttons */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    transition: all var(--transition-speed);
}

.btn-primary:hover {
    background: linear-gradient(to right, #3f44a5, #7a7fe0);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 84, 200, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-secondary:hover {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border-color: var(--text-muted);
}

.social-btn:hover {
    background-color: #f1f3f5;
    transform: translateY(-1px);
}

/* Role Selection Radio Buttons */
.btn-check:checked + .btn-outline-primary {
    background-color: #edf2ff; /* Light blue tint instead of solid primary for better aesthetics */
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.btn-check:checked + .btn-outline-primary i {
    color: var(--primary-color);
}

/* Form Transition Animation */
.fade-in {
    animation: fadeEffect 0.5s;
}

@keyframes fadeEffect {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Password Strength Bar */
.progress-bar {
    transition: width 0.3s ease, background-color 0.3s ease;
}
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-success { background-color: #198754 !important; }

/* Responsive Tweaks */
@media (max-width: 991.98px) {
    .branding-section {
        display: none; /* Already handled by d-none d-lg-flex in HTML, but good to enforce */
    }
    
    .form-section {
        background: var(--bg-light); /* Softer background on mobile */
    }
    
    .auth-container {
        background: #fff;
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
}