/**
 * Arkusz stylów dla niestandardowego ekranu logowania Femetrica
 * Wersja 16.0 - Czysty, nowoczesny i kobiecy design w odcieniach różu i bieli.
 */

:root {
    --font-header: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    --color-primary-pink: #F4ABC4; /* Główny, jaśniejszy róż */
    --color-accent-pink: #EAA2B8;  /* Ciemniejszy róż akcentowy */
    --color-dark-text: #5D5C61;    /* Ciemny tekst */
    --color-light-text: #B2AFAF;   /* Jasny tekst dla linków */
    --color-bg: #FFF9FB;          /* Tło strony */
    --color-white: #FFFFFF;
    --border-color: #FCEFF3;
    --border-radius: 25px;
    --shadow: 0 20px 60px rgba(217, 139, 153, 0.2);
    --transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Tło z subtelnym wzorem --- */
body.login {
    background-color: var(--color-bg);
    /* Subtelny wzór w tle dodaje elegancji */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FCEFF3' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    font-family: var(--font-body);
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

body.login.loaded {
    opacity: 1;
}

/* --- Główny, czysty kontener logowania --- */
#login {
    width: 100% !important;
    max-width: 400px;
    padding: 50px 45px 45px 45px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    margin: 0;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s ease;
}

body.loaded #login {
    transform: translateY(0);
}


/* --- Logo Femetrica --- */
#login h1 { margin-bottom: 30px; padding: 0; }
#login h1 a {
    display: block;
    width: 100%;
    height: auto;
    background-image: none !important;
    font-family: var(--font-header);
    font-size: 3.2rem;
    color: var(--color-accent-pink);
    text-indent: 0;
    text-align: center;
    font-weight: 700;
    transition: var(--transition);
}
#login h1 a:hover { 
    transform: scale(1.05); 
    color: var(--color-primary-pink);
}
#login h1 a::after {
    content: "🌸"; /* Kwiat wiśni jako bardziej subtelny symbol */
    display: inline;
    margin-left: 10px;
    font-size: 2.8rem;
}

/* --- Stylowanie formularza --- */
#loginform, #registerform { padding: 0; margin: 0; background: none; border: none; box-shadow: none; }
#loginform p, #registerform p { margin-bottom: 20px; }
#loginform p label, #registerform p label {
    font-weight: 600;
    color: var(--color-dark-text);
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
#loginform .input, #loginform input[type="text"], #loginform input[type="password"], #loginform input[type="email"], #loginform #wordfence-2fa-code,
#registerform .input, #registerform input[type="text"], #registerform input[type="password"], #registerform input[type="email"] {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    transition: all var(--transition);
    box-shadow: none !important;
    background-color: var(--color-white) !important;
    line-height: normal !important;
    height: auto !important;
    color: var(--color-dark-text);
}

#loginform .input:focus, #loginform input[type="text"]:focus, #loginform input[type="password"]:focus, #loginform input[type="email"]:focus, #loginform #wordfence-2fa-code:focus,
#registerform .input:focus, #registerform input[type="text"]:focus, #registerform input[type="password"]:focus, #registerform input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary-pink) !important;
    box-shadow: 0 0 0 4px rgba(244, 171, 196, 0.3) !important;
}
#loginform .forgetmenot { display: flex; align-items: center; margin-bottom: 25px; font-size: 0.9rem; }
#loginform .forgetmenot label { margin: 0; }
#loginform .forgetmenot input { margin-right: 10px; }

/* --- Główny przycisk --- */
#loginform p.submit, #registerform p.submit { margin-top: 15px; margin-bottom: 0; }
#loginform #wp-submit, #registerform #wp-submit {
    width: 100%;
    height: auto;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(90deg, var(--color-accent-pink), var(--color-primary-pink));
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 5px 20px rgba(234, 162, 184, 0.5);
    text-shadow: none;
}
#loginform #wp-submit:hover, #registerform #wp-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(234, 162, 184, 0.6);
}

/* --- Nowa, minimalistyczna stopka --- */
.femetrica-login-footer {
    margin-top: 35px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
}
.femetrica-login-footer #nav,
.femetrica-login-footer #backtoblog {
    margin: 0 0 15px 0;
    padding: 0;
}
.femetrica-login-footer a {
    color: var(--color-light-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition);
}
.femetrica-login-footer a:hover {
    color: var(--color-accent-pink);
}

.femetrica-login-footer #nav a:not(:last-child)::after {
    content: "•";
    margin: 0 10px;
    color: var(--border-color);
}
.femetrica-login-footer #backtoblog a {
    display: block;
    margin-top: 10px;
}

/* --- Wiadomości o błędach --- */
.login #login_error, .login .message {
    border-radius: 12px;
    border-left: 4px solid #E57373; /* Softer red for errors */
    box-shadow: 0 5px 20px rgba(229, 115, 115, 0.15);
    margin: -15px auto 25px auto;
    width: 100%;
    padding: 15px;
    background-color: var(--color-white);
}
.login .message { border-left-color: #64B5F6; box-shadow: 0 5px 20px rgba(100, 181, 246, 0.1); }


/* --- Responsywność --- */
@media (max-width: 480px) {
    body.login { padding: 0; background-image: none; }
    #login {
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}