/*
Plugin Name: TBOC Admin Login
Plugin URI: https://tacticalbeardownersclub.com
Description: Adds TBOC corporate design to the Login Page.
Version: 1.3.0
Author: Tactical Beard Owners Club
Author URI: https://tacticalbeardownersclub.com
*/

/***************/
/* Main Styles */
/***************/

body.login,
body.login p {
    font-family: var(--tboc-font-body);
    font-size: var(--tboc-font-size-medium);
    color: var(--tboc-color-text-body);
}

body.login {
    background-color: #000;
    position: relative;
    min-height: 100vh;
}

body.login::before {
   content: '';
   position: fixed;
   z-index: -1;
   display: block;
   top: 0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
   background-image: var(--tboc-bg-tboc-admin-login);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.login a {
    color: var(--tboc-color-text-body);
}

.login a:active, .login a:hover {
    color: var(--tboc-color-text-link);
}

.login { /* Center the Login Form (Custom) */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login h1 a,
.login .wp-login-logo a {
    background-image: var(--tboc-logo-tboc-full-color-small); /* Uncomment this line to add a custom logo */
    width: 287px; /* Uncomment this line to make the logo full width */
    height: 287px; /* Uncomment this line to change the height of the logo */
    background-size: 100%;
    filter: drop-shadow(var(--tboc-drop-shadow-logo-full));
    overflow: visible;
}

.login #login {
    /* background-color: #ffffff; */ /* Uncomment this line to change the background color of the login box */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */ /* Uncomment this line to add a box shadow to the login box */
    /* border: 1px solid #dddddd; */ /* Uncomment this line to add a border to the login box */
    padding: var(--tboc-gutter-medium) 0 !important;
}

.login #login h1 a {
    margin: 0 auto var(--tboc-gutter-medium);
    /* color: #333333; */ /* Uncomment this line to change the color of the "Powered by WordPress" text */
    /* text-shadow: none; */ /* Uncomment this line to remove the text shadow from the "Powered by WordPress" text */
}

.login #backtoblog a,
.login #nav a {
    color: var(--tboc-color-widget-bg); /* Uncomment this line to change the color of the "Back to Blog" and "Lost your password?" links */
}

.login #backtoblog a:hover,
.login #nav a:hover {
    color: var(--tboc-color-form-field-bg); /* Uncomment this line to change the color of the "Back to Blog" and "Lost your password?" links on hover */
}

.login form {
    background-color: var(--tboc-color-widget-bg);
    border-radius: var(--tboc-border-radius-large);
    padding: var(--tboc-gutter-large);
    box-shadow: var(--tboc-drop-shadow-popup);
    border: none;
    /* margin-top: 20px; */ /* Uncomment this line to add a margin to the login form */
    margin: 0 auto var(--tboc-gutter-medium);
}

.login form input {
    border-radius: var(--tboc-border-radius-medium);
}

.login form input[type=checkbox], 
.login form input[type=radio] {
    width: 24px !important;
    height: 24px !important;
}

.login form input[type=checkbox], 
.login form input[type=radio], 
.login form input[type=date], 
.login form input[type=datetime-local], 
.login form input[type=datetime], 
.login form input[type=email], 
.login form input[type=month], 
.login form input[type=number], 
.login form input[type=password], 
.login form input[type=search], 
.login form input[type=tel], 
.login form input[type=text], 
.login form input[type=time], 
.login form input[type=url], 
.login form input[type=week] {
    background-color: var(--tboc-color-form-field-bg) !important;
    border-color: var(--tboc-color-neutral) !important;
    outline: none;
    box-shadow: none;
    font-size: var(--tboc-font-size-medium);
    font-weight: var(--tboc-font-weight-regular);
    color: var(--tboc-color-text-body);
    line-height: 1;
}

.login form input[type=checkbox]:checked,
.login form input[type=checkbox]:checked:hover  {
    background-color: var(--tboc-color-primary) !important;
    border-color: var(--tboc-color-neutral) !important;
    /* Checkbox Tick Animation */
    animation: check-tick 180ms ease-in-out;
}

.login form input[type=checkbox]:checked::before {
    content: '.';
    color: transparent;
    display: inline-block;
    height: 12px;
    width: 16px;
    background-color: var(--tboc-color-widget-bg);
    mask-image: var(--tboc-icon-solid-check);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center center;
    margin-left: 3px;
    margin-top: 5px;
}

.login form input[type=checkbox]:hover, 
.login form input[type=radio]:hover, 
.login form input[type=color]:focus, 
.login form input[type=date]:focus, 
.login form input[type=datetime-local]:focus, 
.login form input[type=datetime]:focus, 
.login form input[type=email]:focus, 
.login form input[type=month]:focus, 
.login form input[type=number]:focus, 
.login form input[type=password]:focus, 
.login form input[type=search]:focus, 
.login form input[type=tel]:focus, 
.login form input[type=text]:focus, 
.login form input[type=time]:focus, 
.login form input[type=url]:focus, 
.login form input[type=week]:focus, 
select:focus, textarea:focus {
    background-color: var(--tboc-color-form-field-bg-active) !important;
    border-color: var(--tboc-color-primary) !important;
    outline: none;
    box-shadow: none;
}

.login form .wp-hide-pw>.dashicons {
    font-size: 26px;
}

.login .button.wp-hide-pw .dashicons {
    height: 20px;
    width: 26px;
    top: 1px;
    right: var(--tboc-gutter-small);
}

.login form .dashicons-visibility::before {
    color: transparent;
    display: inline-block;
    height: 20px;
    width: 26px;
    background-color: var(--tboc-color-neutral);
    mask-image: var(--tboc-icon-solid-eye);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center center;
}

.login form .dashicons-hidden::before {
    color: transparent;
    display: inline-block;
    height: 20px;
    width: 26px;
    background-color: var(--tboc-color-neutral);
    mask-image: var(--tboc-icon-solid-eye-slash);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center center;
}

.login form .dashicons {
    color: var(--tboc-color-neutral);
}

.login form input[type=password]:focus + button .dashicons::before,
.login form input[type=text]:focus + button .dashicons::before {
    background-color: var(--tboc-color-primary);
}

.login label {
    font-size: var(--tboc-font-size-medium); /* Uncomment this line to change the font size of the labels */
    font-weight: var(--tboc-font-weight-medium); /* Uncomment this line to make the labels bold */
    /* color: #333333; */ /* Uncomment this line to change the color of the labels */
}

.login input[type=radio] + label, 
.login input[type=checkbox] + label {
    font-weight: var(--tboc-font-weight-regular);
}

.login #login .message {
    background-color: var(--tboc-color-accent-neutral);
    border-radius: var(--tboc-border-radius-large);
    box-shadow: var(--tboc-drop-shadow-popup);
    margin: 0 auto var(--tboc-gutter-medium);
    padding: var(--tboc-gutter-large);
    padding-left: 96px;
    position: relative;
    border-left: none;
    min-height: 96px;
}

    .login #login .message::before {
        display: block;
        content: 'Information';
        text-indent: -72px;
        text-transform: uppercase;
        font-weight: var(--tboc-font-weight-medium);
        padding-bottom: var(--tboc-gutter-small);
    }

    .login #login .message::after {
        position: absolute;
        left: 24px;
        top: 60px;
        width: 56px;
        height: 56px;
        content: '.';
        background-color: var(--tboc-color-text-body);
        mask-image: var(--tboc-icon-regular-circle-info);
        mask-size: cover;
        mask-repeat: no-repeat;
        mask-position: center center;
        margin: 0 var(--tboc-gutter-medium) 100px 0;
    }

.login #login_error {
    position: relative;
    background-color: var(--tboc-color-accent-error); /* Uncomment this line to change the background color of the error message */
    /* border-color: #ebccd1; */ /* Uncomment this line to change the border color of the error message */
    border-left: none;
    border-radius: var(--tboc-border-radius-large);
    /* color: #a94442; */ /* Uncomment this line to change the color of the error message */
    margin: 0 auto var(--tboc-gutter-medium);
    padding: var(--tboc-gutter-large);
    padding-left: 96px;
    min-height: 112px;
    box-shadow: var(--tboc-drop-shadow-popup);
}

    .login #login_error strong {
        display: none;
    }

    .login #login_error::before {
        display: block;
        content: 'Error';
        text-indent: -72px;
        text-transform: uppercase;
        font-weight: var(--tboc-font-weight-medium);
        padding-bottom: var(--tboc-gutter-small);
    }

    .login #login_error::after {
        position: absolute;
        left: 24px;
        top: 60px;
        width: 56px;
        height: 56px;
        content: '.';
        background-color: var(--tboc-color-text-body);
        mask-image: var(--tboc-icon-regular-triangle-exclamation);
        mask-size: cover;
        mask-repeat: no-repeat;
        mask-position: center center;
    }

.login .button {
    border-radius: var(--tboc-border-radius-buttons);
    border-width: 2px;
    padding: 8px 24px 10px 24px !important;
    max-height: 40px;
    line-height: 20px !important;
    font-size: var(--tboc-font-size-medium);
    font-weight: var(--tboc-font-weight-bold);
}

.login .button.button-primary {
    background-color: var(--tboc-color-primary);
    color: var(--tboc-color-widget-bg);
    border-radius: var(--tboc-border-radius-buttons);
    border-color: var(--tboc-color-primary);
}

    .login .button.button-primary:hover {
        background-color: var(--tboc-color-form-field-bg);
        color: var(--tboc-color-primary);
    }

.login .button-primary-disabled, 
.login .button-primary.disabled, 
.login .button-primary:disabled,
.login .button-primary[disabled] {
    background-color: var(--tboc-color-primary) !important;
    color: var(--tboc-color-widget-bg) !important;
    border-radius: var(--tboc-border-radius-buttons) !important;
    border-color: var(--tboc-color-primary) !important;
    opacity: 0.5 !important;
}

/* Administration Email Verification Form */

.login-action-confirm_admin_email #login {
    margin-top: auto !important;
}

.login-action-confirm_admin_email #login .admin-email-confirm-form .admin-email__heading {
    border-color: var(--tboc-color-neutral);
}

.login-action-confirm_admin_email #login .admin-email-confirm-form .admin-email__actions-primary a.button {
    background-color: var(--tboc-color-secondary);
    border-color: var(--tboc-color-secondary);
    color: var(--tboc-color-widget-bg);
}

    .login-action-confirm_admin_email #login .admin-email-confirm-form .admin-email__actions-primary a.button:hover {
        background-color: var(--tboc-color-form-field-bg);
        color: var(--tboc-color-primary);
    }