/*==============================================================
 * DOITUK - RENEWABLE STORE
 * DIVI 5 CHILD THEME - CUSTOM LOGIN CSS
 *==============================================================
 *
 * File: /css/custom-login.css
 * Related PHP: /inc/custom-login.php
 *
 * PURPOSE:
 * Styles WordPress login, registration and password
 * recovery screens using Renewable Store branding.
 *
 * The logo is supplied by Divi Theme Options.
 *
 *==============================================================*/


/*==============================================================
 * 1. LOGIN DESIGN VARIABLES
 *==============================================================*/

/*--------------------------------------------------------------
 * Renewable Store Colours and Layout
 *
 * Retains the original white and charcoal design.
 *--------------------------------------------------------------*/

:root {
--renew-login-primary: #3e3e3e;
--renew-login-primary-hover: #555555;

--renew-login-background: #ffffff;
--renew-login-card: #ffffff;

--renew-login-text: #333333;
--renew-login-muted: #555555;

--renew-login-border: #dddddd;
--renew-login-input: #ffffff;

--renew-login-focus: rgba(62, 62, 62, 0.18);

--renew-login-link: #3e3e3e;
--renew-login-link-hover: #555555;

--renew-login-width: 360px;
--renew-login-padding: 30px;
--renew-login-radius: 10px;

--renew-login-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);

--logo-width: 100%;
--logo-height: 84px;
}


/*==============================================================
 * 2. LOGIN PAGE BACKGROUND
 *==============================================================*/

/*--------------------------------------------------------------
 * Original White Background
 *--------------------------------------------------------------*/

body.login {
background: var(--renew-login-background);
color: var(--renew-login-text);
}


/*==============================================================
 * 3. MAIN LOGIN PANEL
 *==============================================================*/

/*--------------------------------------------------------------
 * Responsive Login Container
 *
 * Retains the original card appearance with improved
 * width handling and vertical positioning.
 *--------------------------------------------------------------*/

body.login #login {
width: var(--renew-login-width);
max-width: calc(100% - 30px);

margin: 7vh auto 0;
padding: var(--renew-login-padding);

background: var(--renew-login-card);

border-radius: var(--renew-login-radius);
box-shadow: var(--renew-login-shadow);

box-sizing: border-box;
}


/*==============================================================
 * 4. WEBSITE LOGO
 *==============================================================*/

/*--------------------------------------------------------------
 * Divi Theme Options Logo
 *
 * The image itself is supplied by custom-login.php.
 *--------------------------------------------------------------*/

body.login #login h1 {
margin: 0 0 25px;
}

body.login #login h1 a {
display: block;

width: var(--logo-width) !important;
height: var(--logo-height) !important;

margin: 0 auto;

background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}


/*==============================================================
 * 5. LOGIN FORM CONTAINER
 *==============================================================*/

/*--------------------------------------------------------------
 * Remove Default WordPress Form Card
 *
 * The outer #login container now provides the
 * background, padding and shadow.
 *--------------------------------------------------------------*/

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform {
margin: 0;
padding: 0;

background: transparent;
border: 0;
box-shadow: none;
}


/*==============================================================
 * 6. FORM LABELS
 *==============================================================*/

/*--------------------------------------------------------------
 * Renewable Store Form Label Styling
 *--------------------------------------------------------------*/

body.login label {
color: var(--renew-login-muted);
font-weight: 600;
}


/*==============================================================
 * 7. USERNAME, EMAIL AND PASSWORD FIELDS
 *==============================================================*/

/*--------------------------------------------------------------
 * Standard Form Input Appearance
 *--------------------------------------------------------------*/

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
min-height: 44px;

padding: 10px 12px;

background: var(--renew-login-input);
color: var(--renew-login-text);

border: 1px solid var(--renew-login-border);
border-radius: 5px;

box-shadow: none;
font-size: 15px;
}


/*--------------------------------------------------------------
 * Field Focus
 *--------------------------------------------------------------*/

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
border-color: var(--renew-login-primary);
outline: none;

box-shadow:
0 0 0 1px var(--renew-login-primary),
0 0 0 4px var(--renew-login-focus);
}


/*==============================================================
 * 8. PASSWORD VISIBILITY BUTTON
 *==============================================================*/

/*--------------------------------------------------------------
 * Retain WordPress Show/Hide Password
 *--------------------------------------------------------------*/

body.login .wp-hide-pw {
color: var(--renew-login-primary);
}

body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus {
color: var(--renew-login-primary-hover);
}


/*==============================================================
 * 9. REMEMBER ME CHECKBOX
 *==============================================================*/

/*--------------------------------------------------------------
 * Charcoal Checkbox Accent
 *--------------------------------------------------------------*/

body.login input[type="checkbox"] {
accent-color: var(--renew-login-primary);
border-color: var(--renew-login-border);
}

body.login input[type="checkbox"]:checked,
body.login input[type="checkbox"]:focus {
border-color: var(--renew-login-primary);
}


/*==============================================================
 * 10. LOGIN AND PASSWORD RESET BUTTONS
 *==============================================================*/

/*--------------------------------------------------------------
 * Renewable Store Charcoal Buttons
 *--------------------------------------------------------------*/

body.login #wp-submit,
body.login .button-primary {
min-height: 42px;

padding: 0 20px;

background: var(--renew-login-primary);
color: #ffffff;

border: 1px solid var(--renew-login-primary);
border-radius: 5px;

font-weight: 600;

text-shadow: none;
box-shadow: none;

cursor: pointer;

transition: background-color 0.2s ease;
}


/*--------------------------------------------------------------
 * Button Hover and Focus
 *--------------------------------------------------------------*/

body.login #wp-submit:hover,
body.login #wp-submit:focus,
body.login .button-primary:hover,
body.login .button-primary:focus {
background: var(--renew-login-primary-hover);
color: #ffffff;

border-color: var(--renew-login-primary-hover);

box-shadow: 0 0 0 3px var(--renew-login-focus);
}


/*==============================================================
 * 11. LOGIN NOTIFICATIONS
 *==============================================================*/

/*--------------------------------------------------------------
 * Shared Message Styling
 *--------------------------------------------------------------*/

body.login .message,
body.login .success,
body.login #login_error {
margin: 0 0 20px;
padding: 12px 15px;

border: 1px solid transparent;
border-radius: 5px;

box-shadow: none;

font-size: 14px;
line-height: 1.5;
}


/*--------------------------------------------------------------
 * Information and Success Messages
 *--------------------------------------------------------------*/

body.login .message,
body.login .success {
background: #e5f5e0;
color: #27652f;
border-color: #34a853;
}


/*--------------------------------------------------------------
 * Error Messages
 *--------------------------------------------------------------*/

body.login #login_error {
background: #ffebe8;
color: #990000;
border-color: #cc0000;
}


/*==============================================================
 * 12. LOGIN NAVIGATION LINKS
 *==============================================================*/

/*--------------------------------------------------------------
 * Lost Password and Return to Website Links
 *--------------------------------------------------------------*/

body.login #nav,
body.login #backtoblog {
margin: 18px 0 0;
padding: 0;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
color: var(--renew-login-link);
text-decoration: none;
}


/*--------------------------------------------------------------
 * Link Hover and Focus
 *--------------------------------------------------------------*/

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus {
color: var(--renew-login-link-hover);
text-decoration: underline;
}


/*==============================================================
 * 13. LANGUAGE SELECTOR
 *==============================================================*/

/*--------------------------------------------------------------
 * Optional WordPress Language Controls
 *--------------------------------------------------------------*/

body.login .language-switcher {
margin: 25px auto 0;
text-align: center;
}

body.login .language-switcher form {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 6px;
margin: 0;
}

body.login .language-switcher select {
min-height: 38px;
padding: 0 32px 0 10px;

background: #ffffff;

border: 1px solid var(--renew-login-border);
border-radius: 5px;
}

body.login .language-switcher .button {
min-height: 38px;

background: #ffffff;
color: var(--renew-login-primary);

border: 1px solid var(--renew-login-primary);
border-radius: 5px;

box-shadow: none;
}

body.login .language-switcher .button:hover,
body.login .language-switcher .button:focus {
background: var(--renew-login-primary);
color: #ffffff;
}


/*==============================================================
 * 14. KEYBOARD ACCESSIBILITY
 *==============================================================*/

/*--------------------------------------------------------------
 * Visible Focus for Navigation Links
 *--------------------------------------------------------------*/

body.login a:focus-visible {
outline: 2px solid var(--renew-login-primary);
outline-offset: 3px;
}


/*==============================================================
 * 15. MOBILE LOGIN LAYOUT
 *==============================================================*/

/*--------------------------------------------------------------
 * Responsive Sizing for Small Screens
 *--------------------------------------------------------------*/

@media screen and (max-width: 480px) {

body.login #login {
width: calc(100% - 30px);
margin-top: 20px;
padding: 24px 20px;
}

body.login #login h1 a {
height: 75px !important;
}

}


/*==============================================================
 * END OF RENEWABLE STORE CUSTOM LOGIN CSS
 *==============================================================*/