/* Soubor css/styles_login-forms.css */ 

body {

    display: flex;

    justify-content: center;

    align-items: center;

}



.container {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    box-sizing: border-box;

}





/* --- LOGIN FORM --- */

.login-form {

    text-align: center;

    max-width: 400px;

    margin: 0 auto;

    background: white;

    padding: 30px 20px;

    border-radius: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.login-form h2 {

    margin-bottom: 20px;

}



/* Pole formuláře */

.login-form input[type="text"],

.login-form input[type="password"],

.login-form input[type="email"] {

    width: 100%;

    max-width: 320px;

    padding: 14px;

    font-size: 1.1em;

    border: 1px solid #ccc;

    border-radius: 8px;

    display: block;

    margin: 10px auto;

    text-align: center;

}



/* Heslo s ikonou */

.password-wrapper {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}



.password-wrapper input[type="password"] {

    padding-right: 40px;

}



.toggle-icon {

    position: absolute;

    right: calc(50% - 140px);

    cursor: pointer;

    font-size: 1.3em;

    color: #555;

    user-select: none;

    transition: color 0.2s ease;

}



.toggle-icon:hover {

    color: #007bff;

}



/* Chyby */

.error {

    color: #b30000;

    background: #ffe6e6;

    border: 1px solid #ffb3b3;

    padding: 10px;

    border-radius: 8px;

    margin-bottom: 10px;

}



/* =========================================

  Tlačítka pro Potvrdit

========================================= */

.confirm-button {

    display: inline-block;

    padding: 12px 20px;

    background-color: #28a745;

    color: #fff;

    text-decoration: none;

    border-radius: 6px;

    margin-top: 20px;

    border: none;

    cursor: pointer;

    font-size: 1.1em;

    transition: background-color 0.2s ease;

}



.confirm-button:hover {

    background-color: #33cc66;

}



/* =========================================

   Mobilní optimalizace

========================================= */

@media (max-width: 600px) {

    body {

        align-items: flex-start;

        padding-top: 40px;

        font-size: 1.05em;

        line-height: 1.4em;

    }



    .container {

        width: 100%;

        max-width: 100%;

        padding: 10px;

    }



    .login-form {

        max-width: 100%;

        border-radius: 0;

        padding: 20px 10px;

        box-shadow: none;

    }



    .login-form h2 {

        font-size: 1.4em;

    }



    .login-form input,

    .login-form button {

        font-size: 1.1em;

        padding: 12px 20px;

        box-sizing: border-box;

    }

}



/* Bezpečné box modely */

* {

    box-sizing: border-box;

}