.login-container {
    width: 450px;
    margin: 80px auto;
    padding: 40px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 8px;
    border:#000 solid 2px;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.035) 0px,
            rgba(0,0,0,0.035) 1px,
            transparent 1px,
            transparent 9px,
            rgba(0,0,0,0.035) 9px,
            rgba(0,0,0,0.035) 10px,
            transparent 10px,
            transparent 18px,
            rgba(0,0,0,0.035) 18px,
            rgba(0,0,0,0.035) 19px,
            transparent 19px,
            transparent 27px,
            rgba(0,0,0,0.035) 27px,
            rgba(0,0,0,0.035) 28px,
            transparent 28px,
            transparent 36px,
            rgba(0,0,0,0.035) 36px,
            rgba(0,0,0,0.035) 37px,
            transparent 37px,
            transparent 75px
        ),
        #ffffff;
}

.login-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    letter-spacing: 2px;
}

.login-container > p {
    width: 100%;
    margin: 0 auto 30px;
    margin-top: 15px;

    padding: 12px 16px;
    background-color: #f8f8f8;          
    border-left: 4px solid #000;  
    border-radius: 4px;

    font-style: italic;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

.login-container > p > a {
    color: #000;
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.login-container > p > a:hover {
    background-color: #000;
    color: #fff;
}


form {
    position: relative;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 3px;
    background: none;
    outline: none;
    border: 1px solid #646262;
    transition: border-color 0.35s ease-out, box-shadow 0.35s ease-out;
}

.form-group input:hover {
    border-color: #504f4f;
    box-shadow: 0 0 0 1px #504f4f;
}

.form-group label {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
    background-color: white;
    padding: 0 4px;
}

.form-group input:focus {
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -10px;
    left: 8px;
    font-size: 12px;
    color: #000000;
}

.btn {
    width: 100%;
    padding: 12px;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: #000;
    color: #fff;
}

.form-error {
    background-color: #ffebee;
    color: #c62828;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ef9a9a;
    border-radius: 4px;
    font-weight: bold;
}

/* Styl pro chybové hlášky */
.errorlist {
    margin-top: 6px;
    margin-bottom: 15px;
    padding-left: 0;
    color: #d32f2f;  /* tmavě červená */
    font-weight: 500;
    list-style-type: none;
    font-size: 0.95rem;
}

.errorlist li {
    background-color: #fdecea;  /* světle červené pozadí */
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    border-radius: 4px;
}


/* Override pro autofill, aby se zabránilo pozadí a zachovalo se konzistentní zobrazení */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s;
}