:root {
    --font-family-sans: 'Inter', sans-serif;
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-text-dark: #1f2937;
    --color-text-medium: #4b5563;
    --color-text-light: #ffffff;
    --border-radius-lg: 0.5rem; 
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --color-error-bg: #fee2e2;
    --color-error-text: #b91c1c;
    --color-error-border: #ef4444;
    --color-success-bg: #d1fae5; 
    --color-success-text: #047857; 
    --color-success-border: #10b981;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-family-sans);
    background-color: #f3f4f6; 
    color: var(--color-text-medium);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 0;
}
a { text-decoration: none; color: var(--color-primary); }
a:hover { text-decoration: underline; }
.register-container {
    background-color: var(--color-text-light);
    padding: 2rem 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 600px;
    margin-top: 1rem; 
    margin-bottom: 2rem;
}
.register-header { text-align: center; margin-bottom: 1.5rem; }
.register-header .logo { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.register-header .logo i { margin-right: 0.5rem; }
.register-header h1 { font-size: 1.75rem; color: var(--color-text-dark); margin-bottom: 0.5rem; }
.register-header p { color: var(--color-text-medium); font-size: 0.9rem; }
.teacher-register-info {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background-color: #eef2ff; 
    border: 1px solid #c7d2fe; 
    border-radius: var(--border-radius-lg);
    font-size: 0.9rem;
}
.teacher-register-info a { font-weight: 600; color: var(--color-primary); }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text-dark); margin-bottom: 0.375rem; }
 
.form-group .input-wrapper { /* Wrapper for input and icon */
    position: relative;
    display: flex;
    align-items: center;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%; padding: 0.625rem 0.875rem; border: 1px solid #d1d5db; 
    border-radius: var(--border-radius-lg); font-size: 0.9rem;
}
/* Adjust padding for password input if icon is inside */
.form-group .input-wrapper input[type="password"],
.form-group .input-wrapper input[type="text"] { /* For when type changes */
    padding-right: 2.8rem; /* Make space for the icon */
}
.form-group input:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25); }
 
/* Password toggle icon style */
.password-toggle-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-text-medium);
    z-index: 10;
    padding: 0.25rem; /* Make clickable area slightly larger */
}
.password-toggle-icon:hover {
    color: var(--color-primary);
}
 
/* === MODIFIED Avatar Selection Design === */

.avatar-selection-container {
    margin-bottom: 2rem; /* Increased bottom margin for more separation */
    background-color: #f8fafc; 
    padding: 1.75rem; /* Slightly increased padding */
    border-radius: var(--border-radius-lg);
    border: 1px solid #e2e8f0;
}

.avatar-selection-container > label:first-of-type { /* "Choose Your Avatar" heading */
    text-align: center; 
    font-size: 1.05rem; /* Slightly larger heading */
    font-weight: 600; 
    color: var(--color-text-dark);
    margin-bottom: 1.5rem; /* Increased space below heading */
    display: block;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Defines 4 equal columns */
    gap: 1rem; /* Adjusted gap for 4 columns, can be 1.25rem if space allows */
    /* justify-content: center; /* This might not be needed if grid fills container */
    max-width: 340px; /* (70px * 4) + (1rem * 3 gaps) approx. Adjust as needed */
    margin-left: auto;
    margin-right: auto;
}

.avatar-option {
    position: relative; 
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 70px; /* Larger avatars */
    height: 70px; /* Larger avatars */
    margin: 0 auto; /* Ensures avatar is centered if grid cell is wider */
    box-shadow: 0 2px 5px rgba(0,0,0,0.07); 
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-option:hover {
    border-color: rgba(79, 70, 229, 0.5); 
    transform: translateY(-5px); /* Slightly more lift on hover */
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.avatar-option.selected {
    border-color: var(--color-primary);
    transform: scale(1.12); /* Slightly more pronounced scale */
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35); 
}

.avatar-option.selected::after { /* Checkmark icon */
    content: '\f00c'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; 
    position: absolute;
    bottom: -3px; /* Adjusted for new size */
    right: -3px;  /* Adjusted for new size */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    font-size: 0.8rem; /* Slightly larger check icon font */
    width: 24px;  /* Larger checkmark circle */
    height: 24px; /* Larger checkmark circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-text-light);
}

input[type="radio"][name="avatar"] { 
    display: none; 
}
/* === END OF MODIFIED Avatar Selection Design === */

.btn-submit { display: block; width: 100%; background-color: var(--color-primary); color: var(--color-text-light); font-weight: 600; padding: 0.75rem 1.5rem; border-radius: var(--border-radius-lg); border: none; cursor: pointer; transition: background-color 0.2s ease-in-out; font-size: 1rem; margin-top: 1.5rem; }
.btn-submit:hover { background-color: var(--color-primary-hover); }
.login-link { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; }
.message-area { margin-bottom: 1.5rem; }
.message { padding: 0.75rem 1.25rem; border-radius: var(--border-radius-lg); font-size: 0.9rem; text-align: left; }
.message.error { background-color: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
.message.success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.message ul { list-style-position: inside; padding-left: 0.5rem;}
@media (max-width: 480px) { 
    .register-container { padding: 1.5rem; } 
    .avatar-grid { 
        grid-template-columns: repeat(4, 1fr); /* Keep 4 columns on smaller screens too */
        gap: 0.75rem; /* Slightly reduced gap for smaller screens */
        max-width: 100%; /* Allow it to take full width within padding */
    } 
    .avatar-option { 
        width: 100%; /* Make avatar take full width of its grid cell */
        padding-bottom: 100%; /* Maintain aspect ratio 1:1 */
        height: 0; /* Required for padding-bottom trick */
    } 
    .avatar-option img {
        position: absolute; /* Position image within the aspect ratio box */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .avatar-option.selected::after { /* Adjust checkmark for smaller avatars */
        width: 18px; /* Slightly smaller checkmark */
        height: 18px;
        font-size: 0.6rem;
        bottom: 2px; /* Adjust positioning */
        right: 2px;
    }
}