@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* =========================================================
   HARD RESET (SAFE)
========================================================= */
body.login *,
body.login *::before,
body.login *::after {
    box-sizing: border-box;
}

#backtoblog {
    display: none !important;
}

#login h1 {
    display: none;
}


/* =========================================================
   BASE
========================================================= */
body.login {
    font-family: 'DM Sans', sans-serif;
    background: #f9fbfa;
    padding: 3vh;
    color: #111827;
    height: unset;
}

/* Remove WordPress branding */
.login .wp-login-logo,
.login .wp-login-powered-by {
    display: none !important;
}

/* =========================================================
   APP LAYOUT
========================================================= */
.trsn-login-app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f9fbfa;
    border-radius: 28px;
    min-height: calc(100vh - 6vh);

}

/* =========================================================
   LEFT – AUTH PANEL
========================================================= */
.trsn-login-left {
    margin: 1.5rem;
    padding: 4.5rem 5rem;
    background: #f7f7f7;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Inner column */
#login {
    width: 100%;
    margin-top: 3rem;
    padding: 0;
    background: transparent;
}

/* =========================================================
   CUSTOM HEADING
========================================================= */
.trsn-login-heading {
    margin-bottom: 2.4rem;
    animation: fadeUp .6s cubic-bezier(.25,.8,.25,1) both;
    text-align: left;
}

.trsn-login-heading h1 {
    font-size: 56px;
    line-height: 64px;
    font-weight: 400;
    margin-bottom: 1.4rem;
    text-align: left;
}

.trsn-login-heading p {
    font-size: 18px;
    color: #6b7280;
    line-height: 1.6;
}

/* =========================================================
   FORM
========================================================= */
.login form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    background: transparent;
    animation: fadeUp .7s cubic-bezier(.25,.8,.25,1) both;
    animation-delay: .05s;
    border: none;
}

/* =========================================================
   LABELS
========================================================= */
.login label {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    margin-bottom: 0.8rem;
}

/* =========================================================
   INPUTS
========================================================= */
.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    height: 64px;
    padding: 0 1.2rem;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.login input:hover {
    transform: translateY(-1px);
}

.login input:focus {
    outline: none;
    border-color: #226735;
    box-shadow: 0 0 0 2px rgba(34,103,53,.15);
    transform: translateY(-1px);
}

/* Hide WP password eye */
.wp-pwd button {
    display: none;
}

/* =========================================================
   CUSTOM CHECKBOX
========================================================= */
.login .forgetmenot {
    display: flex;
    align-items: center;
}

.login .forgetmenot label {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
}

/* hide native */
.login .forgetmenot input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    display: grid;
    place-items: center;
    transition:
            border-color .2s ease,
            background-color .2s ease,
            box-shadow .2s ease;
}


.login .forgetmenot input[type="checkbox"]:checked {
    border-color: #226735;
    background: rgba(34,103,53,.08);
}

.login .forgetmenot input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.login .forgetmenot input[type="checkbox"]:hover {
    box-shadow: 0 0 0 4px rgba(34,103,53,.12);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */
.login input[type="submit"] {
    cursor: pointer;
    width: 100%;
    height: 64px;
    margin-top: .8rem;
    font-size: 18px;
    font-weight: 400;
    border-radius: 999px;
    background: #226735;
    color: #ffffff;
    text-align: center;
    transition:
            all .25s cubic-bezier(.4,0,.2,1),
            box-shadow .25s cubic-bezier(.4,0,.2,1);
}

.login input[type="submit"]:hover {
    transform: translateY(-2px);
    background: #083615;
}

.login input[type="submit"]:active {
    transform: translateY(0);
}

/* =========================================================
   LINKS (WAUW-STYLE)
========================================================= */
.login a {
    position: relative;
    font-size: 14px;
    color: #226735;
    text-decoration: none;
}

.login a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.login a:hover::after {
    transform: scaleX(1);
}

.login #nav {
    margin-top: 1rem;
    text-align: center;
}

/* =========================================================
   MESSAGES
========================================================= */
#login_error,
.login .message,
.login .notice,
.login .success {
    padding: .9rem 1.2rem;
    border-radius: 14px;
    background: #ffffff;
    font-size: .85rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* =========================================================
   RIGHT – HERO PANEL
========================================================= */
.trsn-login-right {
    position: relative;
    margin: 1.5rem;
    border-radius: 22px;
    max-height: calc(100vh - 6vh);
}

.trsn-login-right::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 9;
    background: linear-gradient(160deg, rgba(34,103,53,.75), rgba(34,103,53,.45));
}

.trsn-login-right img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    aspect-ratio: 5/4;

    object-fit: cover;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
    position: relative;

}

.trsn-login-hero {
    position: absolute;
    color: #ffffff;
    animation: fadeUp .8s cubic-bezier(.25,.8,.25,1) both;
    z-index: 11;
    background: rgb(30 76 43 / 49%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7px);
    border: 1px solid rgb(240 240 240 / 24%);
    padding: 1.6rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    border-radius: 22px;
}

.trsn-login-hero h2 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: .6rem;
}

.trsn-login-hero p {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 420px;
    opacity: .95;
}

/* =========================================================
   MOTION
========================================================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {

    body.login {
        padding: 1.5rem;
    }

    .trsn-login-app {
        grid-template-columns: 1fr;
    }

    .trsn-login-right {
        display: none;
    }

    .trsn-login-left {
        margin: 0;
        padding: 2.5rem 2rem;
    }

    #login {
        margin-top: 1.5rem;
    }

    .trsn-login-heading h1 {
        font-size: 38px;
        line-height: 46px;
    }
}


.login .button.wp-hide-pw {
    bottom: 0;
    min-height: 64px;
    right: 1rem;
}


.trsn-login-hero ul {
    margin-top: 1.5rem;
    margin-left: 1rem;
}

.trsn-login-hero li {
    font-size: .95rem;
    margin-bottom: .6rem;
    opacity: .9;
}

/* =========================================================
   HERO LIST WITH ICONS
========================================================= */
.trsn-hero-list {
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.trsn-hero-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .7rem;
    font-size: .95rem;
    opacity: .95;
}

/* icon */
.trsn-hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
}


#wp-auth-check-wrap #wp-auth-check {
    border-radius: 22px;
    width: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #f9fbfa;
}