/* =====================================================
   TUTOR MONK — LOGIN PAGE
   Complete Login Styling
   ===================================================== */


/* =====================================================
   LOGIN PAGE BACKGROUND
   ===================================================== */

.tm-login-page {
    min-height: clamp(520px, 74vh, 920px) !important;
    padding: 48px 20px 64px !important;
    background: #f8f5e1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}


/* =====================================================
   LOGIN CARD
   ===================================================== */

.tm-login-card {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    padding: 34px 40px 38px !important;
    border: 3px solid #e8dfc9 !important;
    border-radius: 26px !important;
    box-shadow: 0 15px 35px rgba(29, 43, 83, 0.08) !important;
}


/* =====================================================
   LOGO
   ===================================================== */

.tm-login-brand {
    text-align: center !important;
    margin: 0 0 5px !important;
}

.tm-login-brand img {
    width: 84px !important;
    height: auto !important;
    display: inline-block !important;
}


/* =====================================================
   WELCOME BACK TITLE
   ===================================================== */

.tm-login-card h1 {
    margin: 3px 0 3px !important;
    padding: 0 !important;

    text-align: center !important;

    color: #1d2b53 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* =====================================================
   SUBTITLE
   ===================================================== */

.tm-login-subtitle {
    margin: 0 0 20px !important;
    padding: 0 !important;

    text-align: center !important;

    color: #59657d !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* =====================================================
   THEME MY LOGIN FORM
   ===================================================== */

.tm-login-form {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =====================================================
   FORM LABELS
   ===================================================== */

.tm-login-form label {
    color: #1d2b53 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}


/* =====================================================
   INPUT FIELDS
   ===================================================== */

.tm-login-form input[type="text"],
.tm-login-form input[type="email"],
.tm-login-form input[type="password"] {

    width: 100% !important;

    height: 50px !important;
    min-height: 50px !important;

    padding: 0 15px !important;
    margin-top: 6px !important;

    background: #eef4ff !important;

    border: 2px solid #dce5f3 !important;
    border-radius: 12px !important;

    color: #1d2b53 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;

    box-shadow: none !important;
    outline: none !important;

    transition: all 0.25s ease !important;
}


/* =====================================================
   INPUT FOCUS
   ===================================================== */

.tm-login-form input[type="text"]:focus,
.tm-login-form input[type="email"]:focus,
.tm-login-form input[type="password"]:focus {

    background: #ffffff !important;

    border-color: #f47b34 !important;

    box-shadow: 0 0 0 3px rgba(244, 123, 52, 0.12) !important;

    outline: none !important;
}


/* =====================================================
   FORM FIELD SPACING
   ===================================================== */

.tm-login-form .tml-user-login,
.tm-login-form .tml-user-pass {
    margin-bottom: 15px !important;
}


/* =====================================================
   SHOW / HIDE PASSWORD
   ===================================================== */

.tm-password-wrap {
    position: relative !important;
    width: 100% !important;
}


/* Make room for Show/Hide button */

.tm-password-wrap input[type="password"],
.tm-password-wrap input[type="text"] {
    padding-right: 75px !important;
}


/* Show / Hide Button */

.tm-toggle-password {

    position: absolute !important;

    right: 14px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    color: #1d2b53 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    cursor: pointer !important;

    padding: 4px 2px !important;

    margin: 0 !important;

    width: auto !important;

    min-width: auto !important;

    height: auto !important;
}


/* Show / Hide Hover */

.tm-toggle-password:hover {
    color: #f47b34 !important;

    background: transparent !important;

    transform: translateY(-50%) !important;
}


/* =====================================================
   REMEMBER ME
   ===================================================== */

.tm-login-form .tml-rememberme {

    margin: 8px 0 14px !important;

    padding: 0 !important;

    text-align: left !important;
}


/* CHECKBOX */

.tm-login-form input[type="checkbox"] {

    accent-color: #f47b34 !important;

    width: 18px !important;

    height: 18px !important;

    margin-right: 5px !important;

    vertical-align: middle !important;
}


/* REMEMBER ME TEXT */

.tm-login-form .tml-rememberme label {

    font-size: 15px !important;

    font-weight: 600 !important;

    color: #1d2b53 !important;
}


/* =====================================================
   LOGIN BUTTON
   ===================================================== */

.tm-login-form input[type="submit"],
.tm-login-form button[type="submit"] {

    display: block !important;

    width: auto !important;

    min-width: 150px !important;

    margin: 8px auto 18px !important;

    padding: 11px 32px !important;

    background: #f47b34 !important;

    color: #ffffff !important;

    border: 3px solid #2a1f1b !important;

    border-radius: 50px !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    box-shadow: 5px 5px 0 #2a1f1b !important;

    cursor: pointer !important;

    transition: all 0.25s ease !important;
}


/* =====================================================
   LOGIN BUTTON HOVER
   ===================================================== */

.tm-login-form input[type="submit"]:hover,
.tm-login-form button[type="submit"]:hover {

    background: #f47b34 !important;

    color: #ffffff !important;

    transform: translateY(-3px) !important;

    box-shadow: 7px 7px 0 #2a1f1b !important;
}


/* =====================================================
   RESET PASSWORD AREA
   ===================================================== */

.tm-login-form .tml-lostpassword {

    list-style: none !important;

    text-align: center !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* Remove bullet */

.tm-login-form .tml-lostpassword::marker {
    display: none !important;
}


/* =====================================================
   RESET PASSWORD BUTTON
   ===================================================== */

.tm-login-form .tml-lostpassword a,
.tm-login-form a[href*="lostpassword"],
.tm-login-form a[href*="resetpass"] {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    min-width: 170px !important;

    margin: 0 auto !important;

    padding: 11px 28px !important;

    background: #ffffff !important;

    color: #000000 !important;

    border: 3px solid #2a1f1b !important;

    border-radius: 50px !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 0 !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-decoration: none !important;

    box-shadow: 5px 5px 0 #2a1f1b !important;

    transition: all 0.25s ease !important;
}


/* RESET PASSWORD TEXT */

.tm-login-form .tml-lostpassword a::after,
.tm-login-form a[href*="lostpassword"]::after,
.tm-login-form a[href*="resetpass"]::after {

    content: "Reset Password" !important;

    display: inline-block !important;

    color: #000000 !important;

    font-family: 'Poppins', sans-serif !important;

    font-size: 15px !important;

    font-weight: 700 !important;
}


/* RESET PASSWORD HOVER */

.tm-login-form .tml-lostpassword a:hover,
.tm-login-form a[href*="lostpassword"]:hover,
.tm-login-form a[href*="resetpass"]:hover {

    background: #ffffff !important;

    color: #000000 !important;

    transform: translateY(-3px) !important;

    box-shadow: 7px 7px 0 #2a1f1b !important;
}


/* =====================================================
   OTHER LOGIN LINKS
   ===================================================== */

.tm-login-form a {

    font-family: 'Poppins', sans-serif !important;

    font-weight: 600 !important;

    color: #1d2b53 !important;
}


.tm-login-form a:hover {
    color: #f47b34 !important;
}


/* Don't allow general link styling
   to override Reset Password */

.tm-login-form .tml-lostpassword a,
.tm-login-form a[href*="lostpassword"],
.tm-login-form a[href*="resetpass"] {

    color: #000000 !important;
}


/* =====================================================
   REMOVE UNNECESSARY LIST SPACING
   ===================================================== */

.tm-login-form ul {

    margin: 0 !important;

    padding: 0 !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .tm-login-page {

        padding: 20px 12px 40px !important;

    }


    .tm-login-card {

        max-width: 100% !important;

        padding: 25px 20px 28px !important;

        border-radius: 22px !important;

    }


    .tm-login-brand {

        margin-bottom: 4px !important;

    }


    .tm-login-brand img {

        width: 68px !important;

    }


    .tm-login-card h1 {

        font-size: 27px !important;

    }


    .tm-login-subtitle {

        font-size: 13px !important;

        margin-bottom: 18px !important;

    }


    .tm-login-form input[type="text"],
    .tm-login-form input[type="email"],
    .tm-login-form input[type="password"] {

        height: 50px !important;

        min-height: 50px !important;

    }


    .tm-login-form input[type="submit"],
    .tm-login-form button[type="submit"] {

        min-width: 140px !important;

        padding: 10px 28px !important;

    }


    .tm-login-form .tml-lostpassword a,
    .tm-login-form a[href*="lostpassword"],
    .tm-login-form a[href*="resetpass"] {

        min-width: 160px !important;

        padding: 10px 24px !important;

    }

}

/* =====================================================
   FORM LAYOUT FIXES (supports Theme My Login v6 + v7 markup)
   ===================================================== */
.tm-login-form form { margin: 0 !important; padding: 0 !important; }
.tm-login-form .tml-field-wrap,
.tm-login-form .tml-user-login,
.tm-login-form .tml-user-pass,
.tm-login-form p { margin: 0 0 16px !important; padding: 0 !important; }
.tm-login-form label,
.tm-login-form .tml-label { display: block !important; text-align: left !important; }
.tm-login-form input.tml-field,
.tm-login-form input[type="text"],
.tm-login-form input[type="email"],
.tm-login-form input[type="password"] { box-sizing: border-box !important; display: block !important; }

/* remember me: checkbox + text on one clean line */
.tm-login-form .tml-rememberme-wrap,
.tm-login-form .tml-rememberme,
.tm-login-form .forgetmenot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 4px 0 18px !important;
    float: none !important;
}
.tm-login-form .tml-rememberme-wrap label,
.tm-login-form .tml-rememberme label,
.tm-login-form .forgetmenot label { display: inline !important; margin: 0 !important; }
.tm-login-form input[type="checkbox"] { margin: 0 !important; flex: 0 0 18px !important; }

/* submit */
.tm-login-form .tml-submit-wrap,
.tm-login-form .submit { margin: 0 !important; text-align: center !important; float: none !important; }
.tm-login-form input[type="submit"],
.tm-login-form button[type="submit"] { float: none !important; }

/* links list (lost password etc.) */
.tm-login-form .tml-links,
.tm-login-form .tml-lostpassword,
.tm-login-form .tml-lostpassword-link {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tm-login-form .tml-links li { list-style: none !important; margin: 0 !important; }
.tm-login-form .tml-links a[href*="lostpassword"],
.tm-login-form .tml-links a[href*="resetpass"] { margin: 0 auto !important; }

/* TML messages */
.tm-login-form .tml-message,
.tm-login-form .tml-errors,
.tm-login-form .tml-error {
    margin: 0 0 18px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    text-align: left !important;
    background: #fff3ea !important;
    border: 1px solid #f9c9a8 !important;
    color: #7a2e00 !important;
}

/* =========================================================
   PASSWORD SHOW / HIDE  (matches login.js: .tm-password-wrapper / .tm-password-toggle)
========================================================= */
.tm-password-wrapper { position: relative !important; width: 100% !important; display: block !important; }
.tm-password-wrapper input[type="password"],
.tm-password-wrapper input[type="text"] { padding-right: 72px !important; }
.tm-password-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 3px 0 0 !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #59657d !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    transition: color .2s ease !important;
}
.tm-password-toggle:hover,
.tm-password-toggle:focus-visible { color: #f47b34 !important; background: transparent !important; transform: translateY(-50%) !important; }

@media (max-width: 480px) {
    .tm-login-page { padding: 28px 12px 44px !important; min-height: 0 !important; }
    .tm-login-card { padding: 26px 20px 30px !important; }
}

/* eye icon button (used by site snippets as .tm-password-eye) */
.tm-password-eye {
    position: absolute !important; right: 12px !important; top: 50% !important;
    transform: translateY(-50%) !important; width: 34px !important; height: 34px !important;
    margin: 3px 0 0 !important; padding: 0 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: #59657d !important; font-size: 19px !important; cursor: pointer !important; z-index: 5 !important;
}
.tm-password-eye:hover { color: #f47b34 !important; background: transparent !important; transform: translateY(-50%) !important; }