/* ============================================
   SMART COURSE COMPANION — styleRegisterLogin.css
   Author : Constance Fleury
   Description : Styles for the login page
============================================ */
* {
    box-sizing : border-box; 
    margin : 0;
    padding : 0;
}
  
body {
    font-family :'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
    background-color : #f0f2f8;
    color : #1a1a2e;
    min-height : 100vh; /* fills the full screen height */
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 32px 16px;
}
  
.container {
    display : grid;
    grid-template-columns : 1fr 1fr;      /* two equal columns */
    max-width : 960px;
    width : 100%;
    background-color : #ffffff;
    border-radius: 24px;
    overflow : hidden;
    box-shadow : 0 4px 24px rgba(0, 0, 0, 0.07);
}
  
.leftSection {
    background-color : #f0f2f8;
    padding : 50px 40px;
    display : flex;
    flex-direction : column;
    gap : 32px;
}
  
/*
    Left Section
*/
/* Smart Course Companion description */
.logoSCC-description {
    display : flex;
    flex-direction : column;
    gap: 16px;
}
  
.logo {
    width : 50px;
    height : 50px;
    border-radius : 8px;
}
  
.leftSection h1 {
    font-size : 28px;
    color : #1a1a2e; 
}
  
.description {
    font-size: 15px;
    color : #555770;
    line-height : 1.6;
}
  
/* "For Students" and "For Instructors" blocks */
.feature {
    display : flex;
    align-items : flex-start;
    gap:14px;
}
  
.icon {
    width : 40px;
    height : 40px;
    border-radius : 999px;               
    object-fit : contain;
    padding : 6px;
} 

.feature-content h4 {
    font-size : 15px;
    font-weight : 700;
    margin-bottom : 4px;
    color  : #1a1a2e;
}
  
.feature-content p {
    font-size : 13px;
    color : #555770;
    line-height : 1.5;
}
  
  
/*  
    Right Section 
*/

.rightSection {
    background-color : #ffffff;
    padding : 48px 40px;
    display : flex;
    flex-direction : column;
    gap : 20px;
}
  
.rightSection h2 {
    font-size : 20px;
    font-weight : 700;
    color : #1a1a2e;
}
  
.subtitle {
    font-size : 13px;
    color : #9a9bb0; 
    margin-top : 2px;
}
  
  
/*  Login / Sign Up */

.tabs {
    display : flex;
    background-color : #f5f7fc;
    border-radius : 999px;
    padding : 4px;
  }
  
.tab {
    flex : 1;
    padding : 10px 0;
    border : none;
    border-radius : 999px;
    background-color : transparent;
    font-size : 14px;
    font-weight : 500;
    color : #555770;
    cursor : pointer;
    transition : background-color 0.2s, color 0.2s;
  }
  
/* Active tab — User friendly - white background + dark text */
.tab.active {
    background-color : #ffffff;
    color : #1a1a2e;
    font-weight : 600;
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.08);
}
  
  
/* Selevtor - Student / Instructor */

.selector {
    display : flex;
    flex-direction : column;
    gap : 10px;
}
  
.selector span {
    font-size : 13px;
    font-weight : 600;
    color : #1a1a2e;
}
  
.toggle-group {
    display : flex;
    background-color : #f5f7fc;
    border-radius : 14px;
    padding : 4px;
    gap : 4px;
}
  
.toggle {
    flex : 1;
    display : flex;
    align-items : center;
    justify-content : center;
    gap : 8px;
    padding : 10px 0;
    border : none;
    border-radius : 8px;
    background-color : transparent;
    font-size : 14px;
    font-weight : 500;
    color : #555770;
    cursor : pointer;
    transition : background-color 0.2s, color 0.2s;
}
  
/* Active role button — blue background */
.toggle.active {
    background-color : #7b9fd4;
    color : #ffffff;
    font-weight : 600;
}
  
/* Small icon inside the toggle button */
.toggle img {
    width : 18px;
    height : 18px;
}
  

form {
    display : flex;
    flex-direction : column;
    gap : 14px;
}
  
.form-group {
    display : flex;
    flex-direction : column;
    gap : 6px;
}
  
.form-group label {
    font-size : 13px;
    font-weight : 600;
    color : #1a1a2e;
}
  
.form-group input {
    padding : 12px 16px;
    border : 1.5px solid #e0e4f0;
    border-radius : 8px;
    background-color : #f5f7fc;
    font-size : 14px;
    color : #1a1a2e;
    outline : none;
    transition : border-color 0.2s;
  }
  
/* Focus effect — blue border when clicking into the field */
.form-group input:focus {
    border-color : #7b9fd4;
}
.form-group input::placeholder {
    color : #9a9bb0;
}
  
/* Submit */
  .submit-btn {
    width : 100%;
    padding : 14px;
    background-color : #7b9fd4; 
    color  : #ffffff;
    border : none;
    border-radius : 14px;
    font-size : 15px;
    font-weight : 600;
    cursor : pointer;
    margin-top : 4px;
    transition : background-color 0.2s, transform 0.1s;
  }
  
/* Slightly darker on hover */
.submit-btn:hover {
    background-color : #6a8ec0;
}
  
/* Slight press effect on click */
.submit-btn:active {
    transform : scale(0.98);
}