/* Layout general pentru pagina de autentificare */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.login-page {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(to bottom, #f4f4f9 50%, #ffffff 100%);
    position: relative;
}

/* Header stilizat */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* Ajustat pentru a centra logo-ul */
    background-color: #22223b;
    color: white;
    padding: 40px 20px;
    z-index: 1000; /* Asigură-te că header-ul stă deasupra altor elemente */
}

/* Secțiunea de informații */
.info-section {
    width: 50%;
    padding: 40px;
    background-color: #4a4e69;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.info-section h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.info-section p {
    font-size: 1em;
    margin-bottom: 20px;
}

.info-image {
    max-width: 150px;
    margin: 20px auto 0;
    background-color: white;
    border-radius: 50%;
}

/* Secțiunea de formular */
.form-section {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Formularul */
.form-container {
    width: 400px;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

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

.textbox input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    background-color: #fef9c3; /* Fundal deschis */
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.textbox input:focus {
    border-color: #4a4e69;
    background-color: #fdf6b2;
}

/* Etichetă stilizată */
.textbox label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #aaa;
    pointer-events: none;
    transition: all 0.3s ease;
}

.textbox input.has-content + label,
.textbox input:focus + label {
    top: -10px;
    font-size: 0.85em;
    color: #4a4e69;
    background: #fff;
    padding: 0 5px;
    border-radius: 4px;
    left: 10px;
}

.has-content + label {
    top: -10px;
    font-size: 0.85em;
    color: #4a4e69;
}

/* Buton de autentificare */
.btn {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #4a4e69;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #9a8c98;
}

/* Link sub formular */
.bottom {
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: 550;
}

/* Footer */
.main-footer {
    color: rgba(131, 131, 131, 0.77);
    text-align: center;
    padding: 10px;
    font-size: 0.9em;
    margin-top: auto;
}

.main-footer a {
    color: #8c8c8c;
    text-decoration: none;
    font-weight: bold;
}

.main-footer a:hover {
    text-decoration: underline;
}

/* Responsivitate */
@media (max-width: 768px) {
    .login-page {
        flex-direction: column;
    }

    .info-section {
        width: 100%;
        clip-path: none;
        padding: 20px;
    }

    .form-section {
        width: 100%;
        padding: 20px;
    }

    .form-container {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .info-section h2 {
        font-size: 1.2em;
    }

    .info-section p {
        font-size: 0.9em;
    }

    .textbox input {
        font-size: 0.9em;
    }

    .btn {
        font-size: 0.9em;
    }
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-password {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #555;
}

.toggle-password:hover {
    color: #000;
}


input:-webkit-autofill {
    background-color: #fef9c3 !important;
    color: inherit;
}

input:-webkit-autofill + label {
    top: -10px;
    font-size: 0.85em;
    color: #4a4e69;
    background: #fff;
    padding: 0 5px;
    border-radius: 4px;
    left: 10px;
}

.header-logo {
    width: 180px; /* Ajustează dimensiunea după cum este necesar */
    height: auto;
    filter: invert(100%);
}

/*!* Layout general pentru pagina de autentificare *!*/
/*body, html {*/
/*    height: 100%;*/
/*    margin: 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/
/*.login-page {*/
/*    display: flex;*/
/*    min-height: 100vh;*/
/*    !*min-height: calc(100vh - 80px);*!*/
/*    background: linear-gradient(to bottom, #f4f4f9 50%, #ffffff 100%);*/
/*    position: relative;*/
/*}*/
/*.main-header {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center; !* Ajustat pentru a centra logo-ul *!*/
/*    background-color: #22223b;*/
/*    color: white;*/
/*    padding: 40px 20px;*/
/*    z-index: 1000; !* Asigură-te că header-ul stă deasupra altor elemente *!*/
/*}*/

/*!* Secțiunea de informații *!*/
/*.info-section {*/
/*    width: 50%;*/
/*    padding-right: 80px;*/
/*    background-color: #4a4e69;*/
/*    color: white;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    text-align: center;*/
/*    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);*/
/*    padding-top: 80px;*/
/*}*/

/*.info-section h2 {*/
/*    font-size: 1.8em;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.info-section p {*/
/*    font-size: 1.1em;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.info-image {*/
/*    max-width: 30%;*/
/*    margin: 0 auto;*/
/*    background-color: white;*/
/*    border-radius: 50%;*/
/*}*/

/*!* Secțiunea de formular *!*/
/*.form-section {*/
/*    width: 50%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*!* Containerul formularului *!*/
/*.form-container {*/
/*    width: 400px;*/
/*    padding: 30px;*/
/*    background-color: #fff;*/
/*    border-radius: 8px;*/
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
/*    text-align: center;*/
/*}*/

/*!* Headerul pentru comutare Login/Register *!*/
/*.header {*/
/*    display: flex;*/
/*    justify-content: space-around;*/
/*    margin-bottom: 20px;*/
/*}*/

/*.switch-btn {*/
/*    text-decoration: none;*/
/*    font-weight: bold;*/
/*    color: #666;*/
/*    padding: 10px 20px;*/
/*    border-radius: 4px;*/
/*}*/

/*.switch-btn.active {*/
/*    background-color: #29a91f;*/
/*    color: white;*/
/*}*/

/*!* Stilizarea câmpurilor și butonului *!*/
/*.textbox {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    margin-bottom: 15px;*/
/*}*/

/*.textbox label {*/
/*    font-size: 0.9em;*/
/*    color: #333;*/
/*    font-weight: bold;*/
/*    text-align: left;*/
/*    margin-bottom: 5px;*/
/*}*/

/*.textbox input[type="text"],*/
/*.textbox input[type="password"] {*/
/*    padding: 10px;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 4px;*/
/*    font-size: 1em;*/
/*}*/

/*.btn {*/
/*    width: 100%;*/
/*    padding: 10px;*/
/*    font-size: 1em;*/
/*    color: white;*/
/*    background-color: #4a4e69;*/
/*    border: none;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.3s;*/
/*}*/

/*.btn:hover {*/
/*    background-color: #9a8c98;*/
/*}*/

/*!* Fundal pentru "munți" *!*/
/*.login-page::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 200px;*/
/*    background: linear-gradient(to bottom, transparent 0%, #c8e5b5 100%);*/
/*    clip-path: polygon(0 100%, 25% 85%, 50% 100%, 75% 80%, 100% 100%);*/
/*    z-index: -1;*/
/*}*/

/*!* Footer *!*/
/*.main-footer {*/
/*    color: rgba(131, 131, 131, 0.77);*/
/*    text-align: center;*/
/*    padding: 7px;*/
/*    font-size: 0.9em;*/
/*}*/

/*.main-footer a {*/
/*    color: #8c8c8c;*/
/*    text-decoration: none;*/
/*    font-weight: bold;*/
/*}*/

/*.main-footer a:hover {*/
/*    text-decoration: underline;*/
/*}*/

/*!* Logo în header *!*/
/*.header-logo {*/
/*    width: 180px;*/
/*    height: auto;*/
/*    filter: invert(100%);*/
/*}*/