/**

 * Stylesheet per la pagina di login di Labcucus

 * Versione modernizzata con CSS aggiornato

 */



/* ========= VARIABLES ========= */

:root {

    --primary: #3498db;

    --primary-dark: #2C6C96;

    --primary-light: #73B6E2;

    --secondary: #e74c3c;

    --secondary1: #2ecc71;

    --light: #ecf0f1;

    --dark: #2c3e50;

    --success: #2ecc71;

    --warning: #f39c12;

    --error: #e74c3c;

    --bg-light: #ffffff;

    --text-dark: #333333;

    --border-light: #EDEDED;

    --shadow: rgba(0, 0, 0, 0.15);

    --transition-speed: 0.3s;

}



/* ========= foNT FACES ========= */

@font-face {

    font-family: 'Bellota-LightItalic';

    src: url('../fonts/Bellota-LightItalic.otf') format('opentype');

    font-display: swap;

}



@font-face {

    font-family: 'Bellota-BoldItalic';

    src: url('../fonts/Bellota-BoldItalic.otf') format('opentype');

    font-display: swap;

}



/* ========= RESET & BASE ========= */

html, body {

    height: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

    font-family: 'Bellota-LightItalic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: var(--text-dark);

    background-color: #f5f5f5;

}



a {

    text-decoration: none;

    color: var(--primary);

    transition: color var(--transition-speed) ease;

}



a:hover {

    color: var(--primary-dark);

    text-decoration: underline;

}



.start_heading {

    display: none;

}



/* ========= WRAPPER & LOGIN BOX ========= */

.wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 20px;

    box-sizing: border-box;

}



.login_box {

    position: relative;

    width: 100%;

    max-width: 450px;

    background-color: var(--bg-light);

    border: 1px solid var(--border-light);

    border-radius: 7px;

    padding: 5px;

    box-shadow: 0 0 20px var(--shadow);

    opacity: 0.98;

    transition: all var(--transition-speed) ease-in-out;

    margin: 2rem auto;

    overflow: hidden;

}



.login_header {

    background-color: var(--primary);

    padding: 15px;

    border-radius: 7px 7px 0 0;

    color: white;

    text-align: center;

    min-height: 90px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.login_header i {

    font-size: 2em;

    margin-right: 10px;

}



.login_header span {

    font-size: 1.5rem;

    color: white;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}



.login_header h1 {

    font-family: 'Bellota-BoldItalic', sans-serif;

    margin: 0;

    color: var(--primary-dark);

    text-shadow: var(--primary-light) 0.5px 0.5px 0;

    font-size: 2.5rem;

}



/* ========= FORM CONTAINERS ========= */

#first, #second {

    padding: 20px;

    width: 100%;

    box-sizing: border-box;

}



#second {

    display: none;

}



form {

    text-align: center;

}



/* ========= FORM ELEMENTS ========= */

/* Base input styles (excluding those with .exclude class) */

input:not(.exclude) {

    width: 70%;

    max-width: 320px;

    height: 40px;

    margin: 8px 0;

    padding: 8px 12px;

    border: 1px solid var(--border-light);

    border-radius: 4px;

    box-sizing: border-box;

    transition: all var(--transition-speed) ease;

}



input:not(.exclude):hover {

    border-color: var(--primary);

}



input:not(.exclude):focus {

    border-color: var(--primary);

    outline: none;

    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);

    background-color: var(--primary);

    color: white;

}



/* Button styles */

input[type="submit"]:not(.exclude),

input[type="button"]:not(.exclude) {

    width: 40%;

    background-color: var(--primary);

    color: var(--primary-dark);

    text-shadow: var(--primary-light) 0.5px 0.5px 0;

    font-family: 'Bellota-BoldItalic', sans-serif;

    font-size: 1rem;

    border: 1px solid var(--primary);

    border-radius: 4px;

    padding: 8px 16px;

    margin: 10px 5px;

    cursor: pointer;

}



input[type="submit"]:not(.exclude):hover,

input[type="button"]:not(.exclude):hover {

    background-color: var(--primary-dark);

    color: white;

    text-shadow: none;

}



input[type="submit"]:disabled,

input[type="button"]:disabled {

    background-color: #cccccc;

    border-color: #bbbbbb;

    color: #666666;

    cursor: not-allowed;

    text-shadow: none;

}



/* ========= CHECKBOX STYLING ========= */

.form-check {

    display: flex;

    align-items: center;

    margin: 15px 0;

    justify-content: center;

}



/* Apply specific styles only to checkboxes with .exclude class */

.form-check-input.exclude {

    width: auto;

    height: auto;

    margin-right: 10px;

    transition: none; 

    border: 1px solid var(--primary);

}



.form-check-label.exclude {

    font-size: 0.85rem;

    color: var(--dark);

}



#privacy {

    font-size: 0.75rem;

    line-height: 1.2;

    color: var(--dark);

    text-align: justify;

    display: inline-block;

    max-width: 250px;

}



/* Regular checkbox styling */

.form-check-input:not(.exclude) {

    margin-right: 8px;

    width: auto;

    height: auto;

}



/* ========= IMAGE STYLING ========= */

#img_1, #img_2, #img_3, #img_4, #img_5, #img_6,

#log_img_1, #log_img_2 {

    border: 2px solid var(--primary);

    border-radius: 50%;

    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);

    transition: transform var(--transition-speed) ease;

}



#img_1:hover, #img_2:hover, #img_3:hover, 

#img_4:hover, #img_5:hover, #img_6:hover,

#log_img_1:hover, #log_img_2:hover {

    transform: scale(1.05);

}



/* ========= VALIDATION STYLES ========= */

.border-red {

    border-color: var(--error) !important;

    color: var(--error) !important;

}



.border-green {

    border-color: var(--success) !important;

    color: var(--success) !important;

}



.error-text {

    color: var(--error);

    font-size: 0.85rem;

    margin-top: -5px;

    margin-bottom: 10px;

}



.success-text {

    color: var(--success);

    font-weight: bold;

}



/* ========= SIGNUP/SIGNIN TOGGLES ========= */

.signup, .signin {

    display: inline-block;

    margin-top: 15px;

    color: var(--primary);

    font-weight: bold;

    cursor: pointer;

}



.signup:hover, .signin:hover {

    text-decoration: underline;

}



/* ========= RESPONSIVE STYLING ========= */

@media only screen and (max-width: 768px) {

    .login_box {

        width: 90%;

    }

    

    .login_header h1 {

        font-size: 2rem;

    }

    

    .login_header i {

        font-size: 1.5em;

    }

    

    .login_header span {

        font-size: 1.2rem;

    }

    

    input:not(.exclude) {

        width: 80%;

    }

    

    #wrapper {

        font-size: 0.9em;

    }

    

    #privacy {

        font-size: 0.7rem;

    }

}



@media only screen and (max-width: 480px) {

    .login_header {

        min-height: 70px;

        padding: 10px;

    }

    

    .login_header h1 {

        font-size: 1.5rem;

    }

    

    .login_header span {

        font-size: 1rem;

    }

    

    input[type="submit"]:not(.exclude),

    input[type="button"]:not(.exclude) {

        width: 45%;

        margin: 8px 4px;

        padding: 10px;

        font-size: 0.9rem;

    }

    

    input:not(.exclude) {

        font-size: 0.9rem;

        padding: 8px;

        margin-bottom: 10px;

    }

    

    #privacy {

        font-size: 0.65rem;

        max-width: 130px;

    }

    

    .form-check {

        margin: 10px 0;

    }

}