:root {
    --login-primary: #c9182b;
    --login-primary-dark: #941525;
    --login-accent: #f4c430;
    --login-ink: #102033;
    --login-muted: #607086;
    --login-border: #d9e2ec;
    --login-surface: #ffffff;
    --login-soft: #fffaf0;
    --login-danger: #c73535;
    --login-shadow: 0 24px 70px rgba(16, 32, 51, 0.16);
}

.login-portal-wrapper {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
    color: var(--login-ink);
    /*background: #f7f2e8;*/
    /*background:#fbf1e5;*/
    background:#FECA4A;
}

.login-box-wrapper {
    position: relative;
    width: min(100%, 430px);
}

.login-logo {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    text-align: center;
}

.login-logo img {
    width: 150px;
    height: auto;
    /*padding: 12px;*/
    /*border-radius: 8px;*/
    /*background: rgba(255, 255, 255, 0.86);*/
    /*box-shadow: 0 12px 34px rgba(148, 21, 37, 0.12);*/
}

.login-intro {
    max-width: 390px;
    color: var(--login-muted);
    line-height: 1.55;
}

.login-intro p {
    margin: 0;
}

.login-intro .intro-title {
    margin-bottom: 8px;
    color: var(--login-ink);
    font-size: 1rem;
    font-weight: 700;
}

.login-intro .intro-text {
    font-size: 0.9rem;
}

.login-intro strong {
    color: var(--login-primary);
    font-weight: 700;
}

.login-box {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(217, 226, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--login-shadow);
    backdrop-filter: blur(14px);
}
/*
.login-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--login-accent);
}
*/
.login-box form {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
}

.login-message {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 4px solid var(--login-danger);
    border-radius: 4px;
    background: #fff1f1;
    color: var(--login-danger);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.login-box p {
    margin: 0;
}

.login-box label {
    display: block;
    margin-bottom: 8px;
    color: var(--login-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid var(--login-border);
    border-radius: 8px;
    color: var(--login-ink);
    background: var(--login-soft);
    font-size: 1rem;
    line-height: 1.35;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
    border-color: var(--login-primary);
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 24, 43, 0.14);
}

.login-box .login-password input {
    padding-right: 50px;
}

.login-box .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--login-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.login-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--login-border);
    border-radius: 4px;
    accent-color: var(--login-primary);
}

.wp-core-ui .login-box .button-primary,
.login-box input[type="submit"] {
    width: 100%;
    min-height: 50px;
    margin: 2px 0 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--login-primary);
    /*box-shadow: 0 14px 28px rgba(201, 24, 43, 0.24);*/
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.wp-core-ui .login-box .button-primary:hover,
.login-box input[type="submit"]:hover {
    filter: brightness(1.03);
    /*transform: translateY(-1px);*/
    /*box-shadow: 0 18px 32px rgba(201, 24, 43, 0.28);*/
}

.wp-core-ui .login-box .button-primary:focus,
.login-box input[type="submit"]:focus {
    outline: 0;
    /*
    box-shadow:
        0 18px 32px rgba(201, 24, 43, 0.28),
        0 0 0 4px rgba(244, 196, 48, 0.42);
        */
}

.wp-core-ui .login-box .button-primary:active,
.login-box input[type="submit"]:active {
    transform: translateY(0);
    /*box-shadow: 0 10px 22px rgba(201, 24, 43, 0.22);*/
}

.login-footer {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--login-border);
    text-align: center;
}

.login-footer a {
    color: var(--login-primary-dark);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.login-footer a:hover,
.login-footer a:focus {
    color: var(--login-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--login-muted);
    background: transparent;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease;
}

.toggle-password:hover,
.toggle-password:focus {
    color: var(--login-primary);
    background: rgba(244, 196, 48, 0.2);
    outline: 0;
}

.login-wrapper {
    max-width: 430px;
    margin: 64px auto;
    padding: 28px;
    border: 1px solid var(--login-border);
    border-radius: 8px;
    background: #fff;
    /*box-shadow: 0 18px 42px rgba(16, 32, 51, 0.12);*/
    text-align: center;
}

@media (max-width: 520px) {
    .login-portal-wrapper {
        align-items: flex-start;
        padding: 32px 16px;
    }

    .login-logo {
        gap: 14px;
        margin-bottom: 18px;
    }

    .login-logo img {
        width: 96px;
    }

    .login-intro .intro-title {
        font-size: 0.95rem;
    }

    .login-intro .intro-text {
        font-size: 0.84rem;
    }

    .login-box {
        padding: 28px 22px;
    }
}