/* Registration Form Styles - Component-specific styles only */
/* Common styles are imported via common.css */

/* Main container for the whole registration block */
.registration-form-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    padding: 40px 32px; /* Vertical and horizontal padding, consistent with login */
    gap: 30px; /* Gap between direct children: title, form, login link. User CSS had 22px for inner form, this is for outer elements */
    max-width: 1030px; /* Width of the overall container */
    background: #FFFFFF;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    margin: 50px auto; /* Center the container on the page */
    box-sizing: border-box;
}

/* Registration Title */
.registration-title {
    font-family: 'Plus Jakarta Sans', sans-serif; /* From user CSS for title */
    font-style: normal;
    font-weight: 700;
    font-size: 32px; /* From user CSS */
    line-height: 120%;
    text-align: center;
    color: #000000;
    margin: 0; /* Remove default h1 margin */
    /* height: 76px; */ /* Height will be auto based on content and line-height */
}

/* Form element */
#vesesslabs_vesessauth-registration-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Increased gap between form elements to account for labels */
    width: 480px; /* Fixed width for the form content area */
}

/* Form row containing an input */
.passwordless-form .form-row:not(.button-row) {
    width: 100%; /* Take full width of the form (480px) */
}

/* Input fields (email, username, display_name) */
#vesesslabs_vesessauth-registration-form input[type="email"],
#vesesslabs_vesessauth-registration-form input[type="text"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 18px 14px; /* Padding inside the input field */
    width: 100%; /* Full width of its container */
    height: 60px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #000000; /* Text color when typing */
    box-sizing: border-box;
}

#vesesslabs_vesessauth-registration-form input[type="email"]::placeholder,
#vesesslabs_vesessauth-registration-form input[type="text"]::placeholder {
    color: rgba(0, 0, 0, 0.6); /* Placeholder text color */
}

/* Submit button row */
.passwordless-form .button-row {
    width: 100%; /* Take full width of the form (480px) */
    margin-top: 0; /* User CSS had gap:32px for inputs, then button is order:3. The form gap:24px should cover this. */
    display: flex;
    justify-content: center;
}

/* Submit Button */
#vesesslabs_vesessauth-registration-form input[type="submit"] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 0px;
    gap: 8px;
    width: 100%; /* Full width of its 480px container */
    height: 48px;
    background: #0F172A; /* From user CSS for button */
    border: 1px solid #0F172A; /* From user CSS for button */
    border-radius: 8px; /* From user CSS for button */
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF; /* From user CSS for button text */
    cursor: pointer;
}

#vesesslabs_vesessauth-registration-form input[type="submit"]:hover {
    background-color: #1e293b; /* Darken a bit on hover */
}

/* "Already have an account? Log In" link area */
.login-link { /* Changed from .login-register-link to be specific if needed, or reuse if styles are identical */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Gap between the text and the link */
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: #666666; /* Text color from user CSS */
    margin: 0; /* Reset default paragraph margin */
}

.login-link a {
    color: #000000; /* Link color from user CSS for "Sign Up" which is now "Log In" */
    text-decoration: underline;
}

/* Style for labels */
.passwordless-form .form-row label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #000000;
    margin-bottom: 8px;
}

/* Style for required field indicator */
.passwordless-form .form-row label .required {
    color: #FF0000;
    margin-left: 2px;
}

/* Style for field descriptions */
.passwordless-form .form-row .description {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: #666666;
    margin-top: 4px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    /* Adjust container padding and gaps for medium screens */
    .registration-form-container {
        padding-left: 20px;
        padding-right: 20px;
        gap: 25px;
    }

    /* Make form and its key elements full width or constrained */
    #vesesslabs_vesessauth-registration-form,
    .passwordless-form .form-row, /* Ensures input fields take available width */
    #vesesslabs_vesessauth-registration-form input[type="submit"],
    .login-link {
        width: 100%;
        max-width: 480px; /* Retain a max-width for form elements */
        margin-left: auto;
        margin-right: auto;
    }

    #vesesslabs_vesessauth-registration-form input[type="email"],
    #vesesslabs_vesessauth-registration-form input[type="text"] {
        width: 100%; /* Already 100% of their parent form-row */
    }    #vesesslabs_vesessauth-registration-form {
        gap: 25px; /* Adjusted gap for responsive design with labels */
    }

    .registration-title {
        font-size: 28px; /* Slightly smaller title */
    }
}

@media (max-width: 500px) {
    /* Container adjustments for small screens, complementing common.css */
    .registration-form-container {
        padding-left: 15px;
        padding-right: 15px;
        gap: 20px; /* Further reduce gap */
    }

    #vesesslabs_vesessauth-registration-form,
    .passwordless-form .form-row,
    #vesesslabs_vesessauth-registration-form input[type="submit"],
    .login-link {
        max-width: 100%; /* Allow full bleed on small screens */
    }    #vesesslabs_vesessauth-registration-form {
        gap: 20px; /* Adjusted gap for mobile view with labels */
    }    .registration-title {
        font-size: 24px; /* Smaller title for mobile */
    }
    
    /* Adjust label font size for mobile */
    .passwordless-form .form-row label {
        font-size: 14px;
    }    #vesesslabs_vesessauth-registration-form input[type="email"],
    #vesesslabs_vesessauth-registration-form input[type="text"],
    #vesesslabs_vesessauth-registration-form input[type="submit"] {
        height: 50px;
        font-size: 15px;
        padding: 10px 14px; /* Adjust padding for new height */
    }
      /* Padding already set above */

    #vesesslabs_vesessauth-registration-form input[type="submit"] {
        padding: 10px 0px; /* Adjust padding for new height */
    }

    .login-link {
        font-size: 13px; /* Slightly smaller text */
    }
}