#cpx-auth-modal {
    width: 280px;
}

#cpx-auth-modal .cpx-modal__panel {
    max-height: inherit;
}

#cpx-auth-modal .cpx-modal__body {
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
}

.cpx-auth__title,
:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__title {
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
    color: var(--cpx-text);
}

.cpx-auth__title:focus {
    outline: none;
}

.cpx-auth-page {
    box-sizing: border-box;
    width: 280px;
    max-width: 100%;
    margin: 24px auto;
    padding: 24px 25px 20px;
    border-radius: 25px;
    background: var(--cpx-white-2);
    box-shadow: 0 0 7.7px rgb(47 47 47 / 20%);
}

#cpx-auth-modal [data-cpx-auth-page-title] {
    display: none;
}
:is(#cpx-auth-modal, .cpx-auth-page) [hidden] {
    display: none !important;
}

:is(#cpx-auth-modal, .cpx-auth-page)
    :is(
        .wa-login-form-wrapper,
        .wa-signup-form-wrapper,
        .wa-forgotpassword-form-wrapper,
        .wa-set-password-form-wrapper
    ) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--cpx-text);
}

:is(#cpx-auth-modal, .cpx-auth-page) :is(form, .wa-form, .js-wa-form-item) {
    margin: 0;
    padding: 0;
}

:is(#cpx-auth-modal, .cpx-auth-page)
    :is(.wa-field, .wa-field-terms, .wa-field-wrapper) {
    display: block;
    width: 100%;
    margin: 0 0 9px;
    padding: 0;
}

:is(#cpx-auth-modal, .cpx-auth-page) .wa-value {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

:is(#cpx-auth-modal, .cpx-auth-page) .wa-value > p {
    margin: 0;
}
:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__agreement-text {
    min-width: 0;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__field > .wa-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__input {
    display: flex;
    width: 100%;
    min-height: 34px;
    padding: 0 14px;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__input input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__input input::placeholder {
    color: var(--cpx-grey-2);
    opacity: 1;
}
:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__input:has(.wa-error) {
    border-color: var(--cpx-red);
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__password {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    min-height: 0;
    margin: 0 -7px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cpx-grey-3);
    cursor: pointer;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__password .cpx-icon:last-child,
:is(#cpx-auth-modal, .cpx-auth-page)
    .cpx-auth__password[aria-pressed="true"]
    .cpx-icon:first-child {
    display: none;
}
:is(#cpx-auth-modal, .cpx-auth-page)
    .cpx-auth__password[aria-pressed="true"]
    .cpx-icon:last-child {
    display: inline-flex;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__submit {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 49px;
    height: auto;
    margin: 0;
    padding: 10px 8px;
    border-radius: 33px;
    border: 1px solid transparent;
    background: var(--cpx-brand-yellow);
    color: var(--cpx-text);
    box-shadow: none;
    white-space: normal;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__submit:hover {
    background: var(--cpx-yellow-1);
}

:is(#cpx-auth-modal, .cpx-auth-page)
    :is(
        .wa-login-form-actions,
        .wa-signup-form-actions,
        .wa-set-password-form-actions
    ) {
    margin: 20px 0 0;
}
:is(#cpx-auth-modal, .cpx-auth-page)
    :is(
        .wa-buttons-wrapper,
        .wa-forgotpassword-button,
        .wa-confirm-signup-button-wrapper
    ) {
    margin: 12px 0 0;
    padding: 0;
}
:is(#cpx-auth-modal, .cpx-auth-page)
    :is(.wa-login-url, .wa-signup-url, .wa-login-forgotpassword-url) {
    display: none;
}

:is(#cpx-auth-modal, .cpx-auth-page) .cpx-auth__agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

:is(#cpx-auth-modal, .cpx-auth-page) input.cpx-checkbox {
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
}

:is(#cpx-auth-modal, .cpx-auth-page)
    :is(.wa-error-msg, .wa-info-msg, .wa-uncaught-errors, .wa-info-messages) {
    display: block;
    margin: 6px 0;
    padding: 0;
    overflow-wrap: anywhere;
}

:is(#cpx-auth-modal, .cpx-auth-page) .wa-error-msg {
    color: var(--cpx-red);
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-info-msg {
    color: var(--cpx-text);
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-info-messages:empty {
    display: none;
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-captcha-field {
    margin: 12px 0;
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-captcha img {
    max-width: 100%;
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-adapters-section {
    margin-top: 16px;
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-adapters-section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0;
}
:is(#cpx-auth-modal, .cpx-auth-page) .wa-adapters-section li {
    list-style: none;
}

.cpx-auth__nav {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    text-align: center;
}
.cpx-auth__nav p {
    margin: 0;
}
:is(#cpx-auth-modal, .cpx-auth-page) a,
.cpx-auth__link {
    color: var(--cpx-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cpx-auth__link {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.cpx-auth__nav a:hover,
.cpx-auth__link:hover {
    color: var(--cpx-green-1);
}
:is(#cpx-auth-modal, .cpx-auth-page)
    :is(a, button, input[type="checkbox"]):focus-visible {
    outline: 2px solid var(--cpx-brand-yellow);
    outline-offset: 3px;
}
.cpx-auth__loading,
.cpx-auth__status {
    text-align: center;
}
.cpx-auth__error {
    color: var(--cpx-red);
}
.cpx-auth__error .cpx-auth__link {
    display: block;
    margin-top: 8px;
}
.cpx-auth__notice {
    text-align: center;
}