/* PMPro Login Shortcode Custom Styles - WordPress.com style with dark theme */

/* Common form styling for login and credentials setup */
.pmpro_login_wrap .pmpro_card_content,
#pmpro_account-credentials-setup .pmpro_card_content {
    padding: 30px 24px !important;
}

/* Form field styling */
.pmpro_login_wrap .login-username,
.pmpro_form_field-login_username {
    position: relative;
    margin-bottom: 35px !important;
}

.pmpro_login_wrap .login-password,
.pmpro_form_field-password,
.pmpro_form_field-password_confirm {
    position: relative;
    margin-bottom: 4px !important;
}

/* Input styling across both forms */
.pmpro_login_wrap input[type="text"],
.pmpro_login_wrap input[type="password"],
.pmpro_form_input {
    border: 1px solid #b8aff56b !important;
    /* border-bottom: 4px solid #b8aff5 !important; */
    background-color: #1d1a21 !important;
    width: 100% !important;
    color: #e0e0e0 !important;
    transition: all 0.5s;
    font-size: 16px;
    padding: 10px 35px !important;
}

.pmpro_login_wrap input[type="text"]:focus,
.pmpro_login_wrap input[type="password"]:focus,
.pmpro_form_input:focus {
    box-shadow: 0 0 3px 0.1rem rgb(228 202 255 / 54%) !important;
} 

/* Submit button styling for both forms */
.login-submit input[type="submit"],
.pmpro_btn-submit-credentials {
    background: #B8AFF5 !important;
    margin-top: 12px;
    border-radius: 3px !important;
    color: #261b6f !important;
    font-size: 18px;
    font-weight: 550 !important;
    padding: 12px !important;
    width: 90% !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s;
    text-shadow: none !important;
}

.login-submit input[type="submit"]:hover,
.pmpro_btn-submit-credentials:hover {
    background-color: #9d95d0 !important;
}

/* Consolidate form submit containers */
.login-submit,
.pmpro_form_submit {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Common icon and input styling for both forms */
.pmpro-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.pmpro-field-icon {
    position: absolute;
    left: 10px;
    z-index: 1;
    color: #888;
}

.pmpro-field-icon i {
    font-size: 16px;
}

.pmpro-toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #888;
}

.pmpro-toggle-password:hover {
    color: #B8AFF5;
}

/* Style consistent labels */
.pmpro_form_label {
    display: block;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* OR divider */
.pmpro-login-or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #888;
}

.pmpro-login-or-divider::before,
.pmpro-login-or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #444;
}

.pmpro-login-or-divider span {
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
}

/* Social login styles */
.pmpro-login-social-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    align-items: center;
}

.pmpro-login-social-button,
.pmpro-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pmpro-login-option-patreon .pmpro-login-social-button,
.pmpro-patreon-button {
    background-color: #F96854;
}

.pmpro-login-option-patreon .pmpro-login-social-button:hover,
.pmpro-patreon-button:hover {
    background-color: #e05a47;
}

.pmpro-login-option-subscribestar .pmpro-login-social-button,
.pmpro-subscribestar-button {
    background-color: #009688;
}

.pmpro-login-option-subscribestar .pmpro-login-social-button:hover,
.pmpro-subscribestar-button:hover {
    background-color: #008275;
}

.pmpro-login-social-icon,
.pmpro-social-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmpro-login-option {
    width: 80%;
}

/* SVG Icons for Social Logins */
.pmpro-login-patreon-icon svg,
.pmpro-login-subscribestar-icon svg,
.pmpro-patreon-icon svg,
.pmpro-subscribestar-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Fix for social button text hover color */
.pmpro-login-social-text,
.pmpro-social-text {
    color: white;
    transition: none;
    font-size: 16px;
    text-shadow: 1px 1px 1px #000000c4;
}

.pmpro-login-social-button:hover .pmpro-login-social-text,
.pmpro-social-button:hover .pmpro-social-text {
    color: white !important;
    text-decoration: none;
}

/* SVG icon styling for both forms */
.pmpro-login-subscribestar-icon svg,
.pmpro-subscribestar-icon svg {
    stroke: #00000070;
    stroke-width: 11px;
}

.pmpro-login-patreon-icon svg,
.pmpro-patreon-icon svg {
    stroke: #00000070;
    stroke-width: 30px;
}

/* Hide default labels in login form */
.login-username label,
.login-password label {
    /* display: none; */
    margin-bottom: 5px !important;
}

/* Position Forgot Password link next to Remember Me */
.login-remember {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

.login-forgot-password {
    margin-left: 15px;
}

.login-forgot-password a {
    color: #ffffff42 !important;
    font-size: 16px !important;
    font-weight: 100 !important;
}

.login-forgot-password a:hover {
    color: #ffffff !important;
}

/* Style "Not a member? Join now" link */
.pmpro_actions_nav a[href*="levels"] {
    font-weight: 500;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}

.pmpro_actions_nav a[href*="levels"]:hover {
    border-bottom-style: solid;
}

.pmpro-login-card .pmpro_card_actions {
    justify-items: center;
}

/* Make the remember me text a bit smaller */
.login-remember label {
    font-size: 14px;
}

.pmpro_login_wrap #loginform .login-remember label {
    margin-top: 0 !important;
}

/* Password strength meter consistency */
#pass-strength-result {
    margin-top: 8px !important;
    border-radius: 4px !important;
    background-color: #f0f0f1 !important;
    color: #50575e !important;
    padding: 8px 12px !important;
}

/* Make the glowing effect consistent */
.pmpro_login_wrap .pmpro_card {
    box-shadow: 0 0 15px rgb(255 248 224 / 78%) !important;
}

/* Form alerts consistent styling */
.pmpro_message {
    margin-bottom: 1.5em !important;
}

.credentials_alert p {
    margin-top: unset !important;
}

/* Add a placeholder style that's visible immediately */
.pmpro_login_wrap form .login-username,
.pmpro_login_wrap form .login-password {
    position: relative;
}

/* Pre-style the form to minimize visual shift */
.pmpro_login_wrap .pmpro_card {
    box-shadow: 0 0 15px rgb(255 248 224 / 78%) !important;
    transition: none !important;
}

/* Keep only the essential styling for login form */

/* Consistent card styling */
.pmpro_login_wrap .pmpro_card,
#pmpro_account-credentials-setup .pmpro_card {
    box-shadow: 0 0 15px rgb(255 248 224 / 78%) !important;
}

/* Social login styles */
.pmpro-login-or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #888;
}

.pmpro-login-or-divider::before,
.pmpro-login-or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #444;
}

.pmpro-login-or-divider span {
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
}

/* Social login options styling */
.pmpro-login-social-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    align-items: center;
}

.pmpro-login-option {
    width: 80%;
}

/* Social buttons styling */
.pmpro-login-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s ease;
    width: 100%;
}

.pmpro-login-option-patreon .pmpro-login-social-button {
    background-color: #F96854;
}

.pmpro-login-option-patreon .pmpro-login-social-button:hover {
    background-color: #e05a47;
}

.pmpro-login-option-subscribestar .pmpro-login-social-button {
    background-color: #009688;
}

.pmpro-login-option-subscribestar .pmpro-login-social-button:hover {
    background-color: #008275;
}

.pmpro-login-social-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmpro-login-social-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Text in social buttons */
.pmpro-login-social-text {
    color: white;
    transition: none;
    font-size: 16px;
    text-shadow: 1px 1px 1px #000000c4;
}

.pmpro-login-social-button:hover .pmpro-login-social-text {
    color: white !important;
    text-decoration: none !important;
}

/* Icon styling */
.pmpro-login-subscribestar-icon svg {
    stroke: #00000070;
    stroke-width: 11px;
}

.pmpro-login-patreon-icon svg {
    stroke: #00000070;
    stroke-width: 30px;
}

/* Password toggle button styling - matching the credentials form */
.pmpro-toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--pmpro--color--accent, #B8AFF5);
    display: flex;
    align-items: center;
}

/* Login form input styling to match credentials form */
.pmpro_login_wrap .login-username input,
.pmpro_login_wrap .login-password input {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #b8aff56b !important;
    /* border-bottom: 4px solid #b8aff5 !important; */
    background-color: #1d1a21 !important;
    color: #e0e0e0 !important;
    transition: all 0.5s;
}

/* Position Forgot Password link next to Remember Me */
.login-remember {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

.login-forgot-password {
    margin-left: 15px;
}

.login-forgot-password a {
    color: #ffffff42 !important;
    font-size: 16px !important;
    font-weight: 100 !important;
}

.login-forgot-password a:hover {
    color: #ffffff !important;
}

/* Submit button styling to match credentials form */
#wp-submit {
    background: #B8AFF5 !important;
    margin-top: 12px;
    border-radius: 3px !important;
    color: #261b6f !important;
    font-size: 18px;
    font-weight: 550 !important;
    padding: 12px !important;
    width: 90% !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

#wp-submit:hover {
    background-color: #9d95d0 !important;
}

.login-submit {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Center the 'Join Now' message */
.pmpro_card_actions {
    text-align: center !important;
}

/* Style the native password toggle to match our theme */
.pmpro_btn-password-toggle {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--pmpro--color--primary) !important;
}

.pmpro_btn-password-toggle:hover {
    color: var(--pmpro--color--accent) !important;
}

/* Ensure the button text is visible */
.pmpro_form_field-password-toggle-state {
    display: inline-block !important; 
}

/* Enhanced logged-in experience */
.pmpro-login-actions {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pmpro-login-actions li {
    margin-bottom: 12px;
}

.pmpro-login-actions a {
    display: inline-block;
    padding: 10px 15px;
    background-color: #B8AFF5;
    color: #261b6f;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}

.pmpro-login-actions a:hover {
    background-color: #9d95d0;
    color: #261b6f !important; /* Important to override theme hover colors */
    text-decoration: none !important;
}

/* Dark theme styles no longer needed since we're using the consistent button style */