/* ===== FRAPPE LOGIN - CARL SPAETER ===== */

:root {
    --cs-green: #92c748;
    --cs-gray: #4A4A4A;
}

.for-forgot, .page-card form {
    max-width: 500px !important;
    margin: 0 auto !important;
}

.login-content .page-card-body .page-card-body::before,
.form-forgot .page-card-body::before,
.form-login-with-email-link .page-card-body::before {
    content: "" !important;
    display: block !important;
    width: 300px !important;
    height: 60px !important;
    margin: 0 auto 25px auto !important;
    background-image: url("/files/PH_CSH_Logo_neu_2021_2025-11-27.webp") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

@media (max-width: 400px) {
    .login-content .page-card-body .page-card-body::before,
    .form-forgot .page-card-body::before,
    .form-login-with-email-link .page-card-body::before {
        width: 250px !important;
        height: 50px !important;
    }
}

.login-content .page-card-head h4::after,
.for-login .page-card-head h4::after {
    content: "bereitgestellt von ZeptronIT";
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--cs-gray);
    margin-top: 8px;
}

/* Card Body */
.login-content .page-card-body {
    padding: 20px 20px !important;
}

.login-content .page-card-body .page-card-body {
    padding: 0 !important;
}

/* Header */
.login-content .page-card-head {
    padding: 30px 35px 15px !important;
}

.login-content .app-logo {
    height: 64px !important;
    width: auto !important;
}

.login-content .page-card-head h4 {
    font-size: 1.5rem !important;
    color: var(--cs-gray) !important;
}

/* Form Groups */
.login-content .form-group {
    margin-bottom: 1.25rem !important;
    width: 100% !important;
}

/* Input Container */
.login-content .email-field,
.login-content .password-field {
    position: relative !important;
    width: 100% !important;
}

/* Input Felder */
.login-content .form-control,
.login-content input.form-control,
#login_email,
#login_password {
    height: 52px !important;
    font-size: 18px !important;
    padding: 12px 14px 12px 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px !important;
}

.login-content .form-control:focus,
#login_email:focus,
#login_password:focus {
    border-color: var(--cs-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(146, 199, 72, 0.15) !important;
}

/* SVG Icons */
.login-content .field-icon,
.login-content svg.field-icon,
.email-field .field-icon,
.password-field .field-icon,
svg.email-icon,
svg.password-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card {
    padding: 25px 10px !important;
    border: 2px solid var(--cs-green) !important;
    max-width: 500px !important;
}

/* Anzeigen Toggle */
.login-content .toggle-password,
span.toggle-password {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--cs-gray) !important;
    z-index: 2 !important;
}

.for-login .page-card form {
    max-width: 100% !important;
}

/* Passwort vergessen */
.login-content .forgot-password-message {
    margin: 1rem 0 !important;
    text-align: center !important;
}

.login-content .forgot-password-message a {
    font-size: 14px !important;
    color: var(--cs-gray) !important;
}

/* Login Button */
.login-content .btn-login,
.login-content .btn-primary,
.page-card-actions .btn-primary,
button.btn-login {
    height: 52px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    width: 100% !important;
    background-color: var(--cs-green) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    color: white !important;
}

.login-content .btn-login:hover,
.login-content .btn-primary:hover {
    background-color: #7eb33d !important;
}

/* Divider */
.login-content .login-divider {
    margin: 1.5rem 0 !important;
    font-size: 14px !important;
}

/* E-Mail Link Button */
.login-content .btn-login-with-email-link,
a.btn-login-with-email-link {
    height: 48px !important;
    font-size: 15px !important;
    width: 100% !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-content .btn-login-with-email-link:hover {
    border-color: var(--cs-green) !important;
    color: var(--cs-gray) !important;
}