/* ==========================================================================
   SMART SCHOOL - MODERN LOGIN FORM CONTROLS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

input[type="text"], 
input[type="password"], 
textarea, 
textarea.form-control {
    height: 48px;
    margin: 0;
    padding: 0 16px;
    vertical-align: middle;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: normal;
    color: #1e293b;
    border-radius: 10px;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

textarea, 
textarea.form-control {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 24px;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
textarea.form-control:focus {
    outline: 0;
    background: #ffffff;
    border-color: #7367f0 !important;
    box-shadow: 0 0 0 3.5px rgba(115, 103, 240, 0.15);
}

input[type="text"]::placeholder, 
input[type="password"]::placeholder, 
textarea::placeholder, 
textarea.form-control::placeholder { 
    color: #94a3b8;
    font-weight: 400;
}

button.btn, button#submit1, button#submit2 {
    height: 48px;
    margin: 0;
    padding: 0 24px;
    vertical-align: middle;
    background: linear-gradient(135deg, #7367f0 0%, #6366f1 100%) !important;
    border: none !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 48px;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(115, 103, 240, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    width: 100%;
    display: block;
}

button.btn:hover, button#submit1:hover, button#submit2:hover { 
    opacity: 1 !important; 
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(115, 103, 240, 0.45) !important; 
    color: #ffffff !important; 
}

button.btn:active, button#submit1:active, button#submit2:active { 
    outline: 0; 
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(115, 103, 240, 0.3) !important; 
}

button.btn:focus, button#submit1:focus, button#submit2:focus { 
    outline: 0; 
    color: #ffffff !important; 
    box-shadow: 0 0 0 4px rgba(115, 103, 240, 0.25) !important; 
}