/* Peak Member Access — member sign-in form.
   Colors and type come from the Elementor kit (with fallbacks), so the form follows the site's brand.
   Selectors use two classes so the theme's global input/button resets don't override them. */

.pma-login {
    --pma-primary: var(--e-global-color-primary, #134f91);
    --pma-primary-dark: var(--e-global-color-bfed721, #0c335d);
    --pma-accent: var(--e-global-color-accent, #fdc558);
    --pma-accent-dark: var(--e-global-color-8c4906a, #ca9d46);
    --pma-text: var(--e-global-color-text, #5a5b5c);
    --pma-heading: var(--e-global-color-secondary, #1f1f1f);
    --pma-border: var(--e-global-color-3e615d0, #b1b1b1);
    --pma-error: #b3261e;

    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
    color: var(--pma-text);
    text-align: left;
}

.pma-login .pma-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

.pma-login .pma-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pma-login [hidden] {
    display: none !important;
}

.pma-login .pma-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pma-heading);
}

.pma-login .pma-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem; /* 16px+ keeps iOS from zooming in */
    color: var(--pma-heading);
    background-color: #fff;
    border: 1px solid var(--pma-border);
    border-radius: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pma-login #pma-member-id {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pma-login #pma-member-id::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.pma-login .pma-input:focus {
    outline: none;
    border-color: var(--pma-primary);
    box-shadow: 0 0 0 3px rgb(19 79 145 / 20%);
}

.pma-login .pma-input[aria-invalid="true"] {
    border-color: var(--pma-error);
}

.pma-login .pma-hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--pma-text);
}

.pma-login .pma-message {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 4px solid;
}

.pma-login .pma-message--error {
    color: #8a1c14;
    background-color: #fdecea;
    border-color: var(--pma-error);
}

.pma-login .pma-message--info {
    color: var(--pma-primary-dark);
    background-color: #eaf1f9;
    border-color: var(--pma-primary);
}

.pma-login .pma-submit {
    position: relative;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.7em 1.2em;
    font-family: var(--e-global-typography-accent-font-family, "Roboto"), sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--pma-primary);
    background-color: var(--pma-accent);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pma-login .pma-submit:hover,
.pma-login .pma-submit:focus-visible {
    color: #fff;
    background-color: var(--pma-accent-dark);
}

.pma-login .pma-submit:focus-visible {
    outline: 3px solid var(--pma-primary);
    outline-offset: 2px;
}

.pma-login .pma-submit:disabled {
    cursor: progress;
}

.pma-login .pma-submit.is-busy .pma-submit__label {
    visibility: hidden;
}

.pma-login .pma-submit__busy {
    display: none;
    position: absolute;
    inset: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pma-spin 0.7s linear infinite;
}

.pma-login .pma-submit.is-busy .pma-submit__busy {
    display: block;
}

@keyframes pma-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pma-login .pma-submit__busy {
        animation-duration: 2.5s;
    }
}

/* Already signed in */
.pma-login--signed-in {
    text-align: center;
}

.pma-login .pma-login__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.pma-login .pma-button {
    display: inline-block;
    padding: 0.7em 1.4em;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pma-primary);
    background-color: var(--pma-accent);
}

.pma-login .pma-button:hover,
.pma-login .pma-button:focus-visible {
    color: #fff;
    background-color: var(--pma-accent-dark);
}

.pma-logout {
    color: inherit;
    text-decoration: underline;
}