/*
 * Custom four-digit Password Protected login.
 * Location: wp-content/themes/hello-theme-child/password-protected-login.css
 * Loaded automatically by Password Protected on login pages.
 * Keep selector scope narrow so the regular WordPress admin login is unaffected.
 */

.pp-pin-page {
    background-color: #0e0d11;
    font-family: Inter, sans-serif;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
}

.pp-pin-page .grecaptcha-badge {
    visibility: hidden !important;
}

.pp-pin-page #login {
    display: flex;
    flex-direction: column-reverse;
    width: 100% !important;
    padding: 0 !important;
}

.pp-pin-page #password-protected-logo,
.pp-pin-page #wp-submit,
.pp-pin-page .submit,
.pp-pin-page hr {
    display: none;
}

.pp-pin-page #loginform,
.pp-pin-page #login_error,
.pp-pin-page .message {
    margin-bottom: 0;
}

.pp-pin-page #loginform {
    margin-top: 0;
    font-weight: 400;
    transition: all 300ms ease-in;
}

.pp-pin-page .field-align-box {
    display: flex;
    flex-direction: column;
}

.pp-pin-page .field-align {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 111px;
    margin-top: 27vh;
    z-index: 0;
}

.pp-pin-page .field-align>input[type="hidden"] {
    display: none;
}

.pp-pin-page .pinnfield {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    visibility: hidden;
}

/* Entrance animation. Replaces four identical animation declarations. */
.pp-pin-page .pinnfield.pin-enter {
    visibility: visible;
    opacity: 0;
    transform: scale(.77);
    animation: pin-enter 800ms cubic-bezier(.4, 0, .6, 1) 500ms forwards;
}

@keyframes pin-enter {
    0% {
        opacity: 0;
        transform: scale(.77);
    }

    10% {
        opacity: 1;
        transform: scale(1.1);
    }

    20%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Password rather than number inputs reliably mask digits and enforce maxlength. */
.pp-pin-page .pin-input {
    box-sizing: border-box;
    height: 95px !important;
    background: transparent !important;
    border: 1px solid #626358;
    color: #e5e3cb;
    text-align: center !important;
    font-family: Inter, sans-serif;
    font-size: 40px;
    font-weight: 300;
    font-optical-sizing: auto;
    margin: 0 !important;
    padding: 0 0 1px;
    box-shadow: none !important;
    transition: border-color 200ms ease-in;
    -webkit-tap-highlight-color: transparent;
}

.pp-pin-page .pin-input.exxpand {
    color: #7c7c6f99;
    border-color: #7c7c6fc4;
}

.pp-pin-page #codeBox1 {
    width: 70px !important;
    border-radius: 23px;
}

.pp-pin-page #codeBox2 {
    width: 95px !important;
    border-radius: 10000px;
}

.pp-pin-page #codeBox3 {
    width: 60px !important;
    border-radius: 1000px;
}

.pp-pin-page #codeBox4 {
    width: 94px !important;
    border-radius: 23px;
}

.pp-pin-page .pin-input:focus {
    outline: none;
    border-color: #fffce1 !important;
    box-shadow: 0 0 0 1px #fffce1 !important;
}

.pp-pin-page .pin-input.pin-filled {
    border-color: #dddbc2;
    color: transparent;
    animation: pin-tap 200ms cubic-bezier(.4, 0, .6, 1);
}

@keyframes pin-tap {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* Filled-dot graphic that originally used four separate JS functions. */
.pp-pin-page .pin-indicator {
    position: absolute;
    width: 49px;
    height: 67px;
    background: #0e0d11;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pp-pin-page .pin-indicator::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #dddbc1;
    border-radius: 50%;
    transition: transform 100ms cubic-bezier(.4, 0, .6, 1);
}

.pp-pin-page .pinnfield.pin-has-value .pin-indicator {
    visibility: visible;
    opacity: 1;
}

/* Staggered exit animation mirrors original 300, 400, 500, 600ms delays. */
.pp-pin-page .pinnfield.pin-submitting:nth-of-type(1) {
    --pin-delay: 300ms;
}

.pp-pin-page .pinnfield.pin-submitting:nth-of-type(2) {
    --pin-delay: 400ms;
}

.pp-pin-page .pinnfield.pin-submitting:nth-of-type(3) {
    --pin-delay: 500ms;
}

.pp-pin-page .pinnfield.pin-submitting:nth-of-type(4) {
    --pin-delay: 600ms;
}

.pp-pin-page .pin-submitting .pin-input {
    animation: pin-exit 900ms cubic-bezier(.4, 0, .6, 1) var(--pin-delay) forwards;
}

.pp-pin-page .pin-submitting .pin-indicator {
    animation: pin-dot-exit 900ms cubic-bezier(.4, 0, .6, 1) var(--pin-delay) forwards;
}

@keyframes pin-exit {

    0%,
    10% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: scale(.9);
        opacity: 1;
    }

    30%,
    100% {
        transform: scale(.9);
        opacity: 0;
    }
}

@keyframes pin-dot-exit {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(.7) translateY(10px);
    }

    20% {
        transform: scale(.7) translateY(-10px);
    }

    30%,
    100% {
        transform: scale(.7);
    }
}

/* Only incorrect passcodes get the small custom "Try again" notice. */
.pp-pin-page #login_error {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    padding: 11px 0 0 !important;
    width: 378px;
    font: 400 12px/1.5 Inter, sans-serif;
    color: #fffce1;
}

.pp-pin-page.pp-pin-incorrect #login_error {
    font-size: 0;
}

.pp-pin-page.pp-pin-incorrect #login_error::before {
    content: "Try again";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0e0d11;
    background: #cccab1;
    width: 70px;
    height: 26px;
    border-radius: 999px;
    padding-bottom: 1px;
    font: 400 11px Inter, sans-serif;
    opacity: 0;
    animation: pin-error 8000ms ease 700ms;
}

@keyframes pin-error {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    1% {
        opacity: .5;
        transform: translate(6px, 0);
    }

    2% {
        opacity: 1;
        transform: translate(-6px, 0);
    }

    3% {
        opacity: 1;
        transform: translate(3px, 0);
    }

    4%,
    40%,
    99% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translateY(5px);
    }
}

.pp-pin-page #login_error.pin-error-clearing {
    animation: pin-error-clear 200ms cubic-bezier(.4, 0, .6, 1) forwards;
}

@keyframes pin-error-clear {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

.pp-pin-page .password-protected-text-above {
    text-align: center;
    margin-bottom: 10px;
}

.pp-pin-page .password-protected-text-below {
    display: inline-block;
    text-align: center;
    margin-top: 30px;
}

/* Keep legitimate CAPTCHA controls and technical error messages visible. */
.pp-pin-page .notice,
.pp-pin-page .message,
.pp-pin-page .success {
    box-shadow: none;
}

@media screen and (max-width: 501px) {
    .pp-pin-page .field-align {
        position: fixed;
        width: 100%;
        gap: 12px;
        margin-top: 130px !important;
    }

    .pp-pin-page .pin-input {
        height: 75px !important;
        font-size: 22px;
    }

    .pp-pin-page #codeBox1 {
        width: 50px !important;
        border-radius: 20px;
    }

    .pp-pin-page #codeBox2 {
        width: 75px !important;
    }

    .pp-pin-page #codeBox3 {
        width: 48px !important;
    }

    .pp-pin-page #codeBox4 {
        width: 73px !important;
        border-radius: 20px;
    }

    .pp-pin-page .pin-indicator {
        width: 34px;
        height: 60px;
    }

    .pp-pin-page .pin-indicator::after {
        transform: scale(.65);
    }

    .pp-pin-page #login_error {
        width: 287px;
        padding-top: 241px !important;
    }

    @keyframes pin-dot-exit {
        0% {
            transform: scale(1);
        }

        10% {
            transform: translateY(-6px);
        }

        20% {
            transform: scale(.7) translateY(6px);
        }

        30%,
        100% {
            transform: scale(.7);
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    .pp-pin-page .pin-input,
    .pp-pin-page .pin-enter,
    .pp-pin-page .pin-submitting .pin-indicator,
    .pp-pin-page .pin-submitting .pin-input,
    .pp-pin-page #login_error {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}