/* Mountain Diary — the login page (Account): the login box of [md_login] as one opaque card over
   the background photo, readable in both colour modes; the photo goes by the page's body class,
   which every translation has. Colours come from the design tokens, the fields' look from Form
   controls. */

/* The card: the whole login box sits on the paper of the page, raised over
   the background photo, so it reads in both modes */
#wpuf-login-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: var(--md-bg) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow) !important;
    padding: 40px !important;
    color: var(--md-text) !important;
}

/* The form fills the card */
.wpuf-login-form {
    background: transparent !important;
    padding: 0 !important;
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-shadow: none !important;
}

/* No background on anything inside the form but its fields and the button */
/* stylelint-disable-next-line selector-not-notation -- one :not() per field keeps the selector's specificity */
.wpuf-login-form *:not(input[type="text"]):not(input[type="email"]):not(input[type="password"]):not(input[type="submit"]) {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Labels: the text colour, 16 px semibold */
.wpuf-login-form label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--md-text) !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.wpuf-login-form label[for="wpuf-user_login"]::after,
.wpuf-login-form label[for="wpuf-user_pass"]::after {
    content: ":";
}

/* Input fields - size and spacing only; colours, border, corners and focus
   come from Form controls */
.wpuf-login-form input[type="text"],
.wpuf-login-form input[type="email"],
.wpuf-login-form input[type="password"] {
    width: 100% !important;
    padding: 12px !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

/* Remember me - on the left, 15px */
.wpuf-remember-me {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

.wpuf-remember-me input[type="checkbox"] {
    margin: 0 !important;
    width: auto !important;
}

/* The label of the check box keeps the weight of the text */
.wpuf-remember-me label {
    margin: 0 !important;
    display: inline !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

/* Log in: the one filled main action */
.wpuf-login-form input[type="submit"] {
    background-color: var(--md-primary) !important;
    border: none !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: var(--md-radius) !important;
    color: var(--md-on-primary) !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
}

.wpuf-login-form input[type="submit"]:hover:not(:disabled) {
    background-color: var(--md-primary-hover) !important;
}

/* Lost password - centred, 15px */
.wpuf-lost-password,
.wpuf-login-form .wpuf-lost-password {
    text-align: center !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    display: block !important;
}

.wpuf-lost-password a {
    color: var(--md-text) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.wpuf-lost-password a:hover {
    text-decoration: underline !important;
    color: var(--md-accent-text) !important;
}

/* Join us - styled like Lost password, 15px. It is the last link of the form,
   matched by its place, as its address differs per language */
/* stylelint-disable-next-line no-descending-specificity -- the snippet's order, which the cascade keeps */
.wpuf-login-form > a {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    color: var(--md-text) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpuf-login-form > a:hover {
    text-decoration: underline !important;
    color: var(--md-accent-text) !important;
}

/* The background photo of the page */
body.md-slug-login {
    background-image: url('https://mountaindiary.com/wp-content/uploads/2025/10/DSC_0020-scaled.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* The photo covers the whole page */
body.md-slug-login #page,
body.md-slug-login .site {
    min-height: 100vh !important;
}

/* Log in waits, faded, until both fields are filled in (login-page.js) */
/* stylelint-disable-next-line no-descending-specificity -- the snippet's order, which the cascade keeps */
.wpuf-login-form input[type="submit"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}