/*
 * Fotoklub Hartkirchen – Member Area & Login Styles
 * Gilt für: wp-login.php, Elementor Login-Widget,
 *           Passwortschutz-Seiten, Mitgliederbereich
 * Nordlicht GmbH | studio-nordlicht.com
 */

/* ═══════════════════════════════════════════════════════════════
   A. WP-LOGIN.PHP – Branded Login-Seite
   ═══════════════════════════════════════════════════════════════ */

body.login {
    background-color: var(--fk-dark, #111111);
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

/* Login-Box */
#login {
    width: 360px;
    max-width: 94vw;
}

/* Logo-Bereich */
#login h1 a,
.login h1 a {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    height: 70px;
    margin: 0 auto var(--fk-sp-md, 2rem);
    display: block;
    /* Logo-URL hier eintragen: */
    /* background-image: url('../images/logo-light.svg'); */
    text-indent: -9999px;
}

/* Formular-Box */
.login #loginform,
.login #lostpasswordform,
.login #registerform {
    background: var(--fk-dark-soft, #1C1C1C);
    border: 1px solid var(--fk-border-dark, #2E2E2E);
    border-radius: var(--fk-radius-md, 8px);
    box-shadow: var(--fk-shadow-lg, 0 8px 48px rgba(0,0,0,0.18));
    padding: 2rem 2.5rem;
}

/* Labels */
.login label {
    color: var(--fk-text-light, #E8E4DC);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
    display: block;
}

/* Eingabefelder */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background: var(--fk-dark, #111111) !important;
    border: 1px solid var(--fk-border-dark, #2E2E2E) !important;
    border-radius: var(--fk-radius-sm, 4px) !important;
    color: var(--fk-text-light, #E8E4DC) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1rem !important;
    padding: 0.75em 1em !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--fk-gold, #C9A84C) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
    outline: none !important;
}

/* Login-Button */
.login .button-primary,
#login .button-primary {
    background: var(--fk-gold, #C9A84C) !important;
    border: none !important;
    border-radius: var(--fk-radius-sm, 4px) !important;
    color: var(--fk-dark, #111111) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.85em 2em !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.28s ease, box-shadow 0.28s ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.login .button-primary:hover,
#login .button-primary:hover {
    background: var(--fk-gold-dark, #A8873C) !important;
    box-shadow: 0 4px 20px rgba(201,168,76,0.3) !important;
}

/* "Angemeldet bleiben" Checkbox */
.login .forgetmenot {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1rem;
}
.login .forgetmenot label {
    color: var(--fk-muted, #7A7672);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

/* Links */
.login #nav a,
.login #backtoblog a {
    color: var(--fk-gold, #C9A84C);
    font-size: 0.8rem;
    transition: color 0.28s ease;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--fk-gold-light, #DFC07A);
}
.login #nav,
.login #backtoblog {
    text-align: center;
    color: var(--fk-muted, #7A7672);
}

/* Fehlermeldungen */
.login #login_error,
.login .message,
.login .updated {
    border-left: 4px solid var(--fk-gold, #C9A84C);
    background: var(--fk-dark-soft, #1C1C1C);
    color: var(--fk-text-light, #E8E4DC);
    border-radius: var(--fk-radius-sm, 4px);
    font-size: 0.875rem;
    padding: 0.75em 1em;
    margin-bottom: 1rem;
}
.login #login_error {
    border-left-color: var(--fk-error, #C0392B);
}


/* ═══════════════════════════════════════════════════════════════
   B. ELEMENTOR PRO LOGIN WIDGET
   ═══════════════════════════════════════════════════════════════ */

.elementor-widget-login .elementor-field-group input[type="text"],
.elementor-widget-login .elementor-field-group input[type="password"] {
    border: 1px solid var(--fk-border-light, #E0DDD6);
    border-radius: var(--fk-radius-sm, 4px);
    padding: 0.75em 1em;
    font-family: var(--fk-font-body, 'Lato', sans-serif);
    font-size: var(--fk-size-base, 1rem);
    background: var(--fk-white, #FFFFFF);
    transition: border-color 0.28s ease, box-shadow 0.28s ease;
    width: 100%;
}
.elementor-widget-login .elementor-field-group input:focus {
    outline: none;
    border-color: var(--fk-gold, #C9A84C);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.elementor-widget-login .elementor-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-text-dark, #1A1A1A);
}

/* Login-Button im Widget */
.elementor-widget-login .elementor-button {
    background-color: var(--fk-gold, #C9A84C);
    color: var(--fk-dark, #111111);
    border: none;
    border-radius: var(--fk-radius-sm, 4px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 0.85em 2em;
    transition: background-color 0.28s ease;
    width: 100%;
}
.elementor-widget-login .elementor-button:hover {
    background-color: var(--fk-gold-dark, #A8873C);
}

/* Logout-Button */
.elementor-widget-login .elementor-widget-login__logged-in-section .elementor-button {
    background-color: transparent;
    border: 2px solid var(--fk-gold, #C9A84C);
    color: var(--fk-gold, #C9A84C);
}
.elementor-widget-login .elementor-widget-login__logged-in-section .elementor-button:hover {
    background-color: var(--fk-gold, #C9A84C);
    color: var(--fk-dark, #111111);
}

/* Links (Passwort vergessen etc.) */
.elementor-widget-login a {
    color: var(--fk-gold, #C9A84C);
    font-size: 0.8rem;
    transition: color 0.28s ease;
}
.elementor-widget-login a:hover {
    color: var(--fk-gold-dark, #A8873C);
}


/* ═══════════════════════════════════════════════════════════════
   C. PASSWORTSCHUTZ-SEITE (Elementor Pro Members)
   ═══════════════════════════════════════════════════════════════ */

.post-password-form {
    max-width: 420px;
    margin: var(--fk-sp-lg, 4rem) auto;
    padding: var(--fk-sp-md, 2rem);
    background: var(--fk-warm-white, #F8F5EF);
    border-radius: var(--fk-radius-md, 8px);
    border: 1px solid var(--fk-border-light, #E0DDD6);
    text-align: center;
}
.post-password-form p:first-child {
    color: var(--fk-muted, #7A7672);
    font-size: 0.875rem;
    margin-bottom: var(--fk-sp-md, 2rem);
}
.post-password-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-text-dark, #1A1A1A);
    margin-bottom: 0.5em;
    text-align: left;
}
.post-password-form input[type="password"] {
    width: 100%;
    border: 1px solid var(--fk-border-light, #E0DDD6);
    border-radius: var(--fk-radius-sm, 4px);
    padding: 0.75em 1em;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    margin-bottom: var(--fk-sp-sm, 1rem);
    transition: border-color 0.28s ease;
}
.post-password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--fk-gold, #C9A84C);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.post-password-form input[type="submit"] {
    background: var(--fk-gold, #C9A84C);
    color: var(--fk-dark, #111111);
    border: none;
    border-radius: var(--fk-radius-sm, 4px);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.85em 2em;
    cursor: pointer;
    transition: background-color 0.28s ease;
}
.post-password-form input[type="submit"]:hover {
    background-color: var(--fk-gold-dark, #A8873C);
}


/* ═══════════════════════════════════════════════════════════════
   D. MITGLIEDERBEREICH – Inhaltsbereich (nach Login)
   ═══════════════════════════════════════════════════════════════ */

/* Member-Willkommens-Bar */
.fk-member-bar {
    background: var(--fk-dark-soft, #1C1C1C);
    color: var(--fk-text-light, #E8E4DC);
    padding: 0.6em 0;
    font-size: 0.8125rem;
    border-bottom: 2px solid var(--fk-gold, #C9A84C);
}
.fk-member-bar .fk-member-bar-inner {
    max-width: var(--fk-container, 1240px);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fk-member-bar a {
    color: var(--fk-gold, #C9A84C);
    font-weight: 700;
    transition: color 0.28s ease;
}
.fk-member-bar a:hover {
    color: var(--fk-gold-light, #DFC07A);
}

/* Mitgliederprofil-Card */
.fk-member-card {
    display: flex;
    align-items: center;
    gap: var(--fk-sp-sm, 1rem);
    padding: var(--fk-sp-md, 2rem);
    background: var(--fk-white, #FFFFFF);
    border-radius: var(--fk-radius-md, 8px);
    box-shadow: var(--fk-shadow-sm, 0 2px 8px rgba(0,0,0,0.10));
    border: 1px solid var(--fk-border-light, #E0DDD6);
}
.fk-member-card__avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--fk-gold, #C9A84C);
}
.fk-member-card__name {
    font-family: var(--fk-font-heading, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fk-text-dark, #1A1A1A);
    margin-bottom: 0.15em;
}
.fk-member-card__meta {
    font-size: 0.8rem;
    color: var(--fk-muted, #7A7672);
}