/*
 * Login popup in the checkout's style (CheckoutWC look), for pages outside the checkout:
 * the partner page's "Partner-Login" (assets/js/partner-login.js). Same rules as the
 * "Login popup" part of block-checkout.css.
 */
@keyframes evc-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes evc-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes evc-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes evc-modal-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
@keyframes evc-shake { 0% { transform: translate(30px); } 20% { transform: translate(-30px); } 40% { transform: translate(15px); } 60% { transform: translate(-15px); } 80% { transform: translate(8px); } to { transform: translate(0); } }
html.evc-modal-open, html.evc-modal-open body { overflow: hidden; }
.evc-modal-root { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; font-size: 16px; letter-spacing: .3px; color: #333; }
.evc-modal-root.is-open { display: block; }
.evc-modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); animation: evc-overlay-in .3s ease forwards; }
.evc-modal-container { position: relative; display: flex; align-items: center; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; text-align: center; }
.evc-modal { position: relative; display: inline-block; width: 100%; max-width: 840px; max-height: 80%; min-height: fit-content; margin: auto; padding: 32px; overflow-y: auto; background: #fff; border-radius: 5px; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .25); text-align: left; vertical-align: middle; outline: none; animation: evc-modal-in .3s ease forwards; }
.evc-modal-root.is-closing .evc-modal-overlay { animation: evc-overlay-out .3s ease forwards; }
.evc-modal-root.is-closing .evc-modal { animation: evc-modal-out .3s ease forwards; }
.evc-modal *, .evc-modal *::before, .evc-modal *::after { box-sizing: border-box; }
.evc-modal form { font-size: 16px; line-height: 18.4px; margin: 0; }
.evc-modal form[hidden] { display: none; }
.evc-modal h3 { margin: 0 0 24px; font-family: inherit; font-size: 24px; line-height: 27.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #333; }
.evc-modal p { margin: 0 0 12.8px; font-size: 16px; line-height: 18.4px; font-weight: 400; letter-spacing: .3px; color: #333; }
.evc-modal .evc-modal-intro { font-weight: 400; }
.evc-modal .evc-lost-form .evc-modal-intro { margin-bottom: 16px; }
.evc-mfield { position: relative; }
.evc-mfield label { position: absolute; top: 0; left: 0; margin-top: 3px; padding: 0 13.92px; font-size: 12px; line-height: 19.5px; color: #737373; white-space: nowrap; opacity: 0; pointer-events: none; user-select: none; transition: all .2s ease-out; z-index: 1; }
.evc-mfield.is-floated label { opacity: 1; }
.evc-mfield input { display: block; width: 100%; height: 46px; margin: 0; padding: 13.12px; font: inherit; font-size: 16px; letter-spacing: normal; color: #333; background: #fff; border: 1px solid #d9d9d9; border-radius: 5px; box-shadow: none; outline: 0; -webkit-appearance: none; appearance: none; transition: all .2s ease-out; }
.evc-mfield input::placeholder { color: #737373; opacity: 1; }
.evc-mfield input:focus { border-color: #d9d9d9; box-shadow: 0 0 0 1px #333; outline: 0; }
.evc-mfield.is-floated input { padding: 21.6px 12.8px 4.48px; }
.evc-mfield input[type=password], .evc-mfield input#evc-login-pass { padding-right: 52px; }
.evc-pass-toggle { position: absolute; top: 11px; right: 16px; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; color: #999; cursor: pointer; }
.evc-pass-toggle:hover { color: #666; }
.evc-pass-toggle svg { display: block; width: 24px; height: 24px; }
.evc-pass-toggle .evc-eye-shut, .evc-pass-toggle.is-shown .evc-eye-open { display: none; }
.evc-pass-toggle.is-shown .evc-eye-shut { display: block; }
.evc-modal-footer { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 12.8px; }
.evc-remember { display: flex; align-items: center; margin: 8px 0 20.8px; cursor: pointer; font-size: 16px; line-height: 18.4px; color: #333; }
.evc-remember input[type=checkbox] { appearance: none; -webkit-appearance: none; position: relative; width: 18px; height: 18px; min-width: 18px; margin: 0 8px 0 0; padding: 0; background: #fff; border: 1px solid #d9d9d9; border-radius: 5px; box-shadow: inset 0 0 0 0 #000; cursor: pointer; transition: all .2s ease-in-out; }
.evc-remember input[type=checkbox]:checked { border: none; box-shadow: inset 0 0 0 10px #000; }
.evc-remember input[type=checkbox]::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 8px; margin: -4px 0 0 -5px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC4zIiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjguOSAwLjMgMTAuMyA4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTIuNiA4LjEgOC45IDQuM2wxLTEuMSAyLjcgMi43TDE4LjEuNWwxIDF6Ii8+PC9zdmc+) no-repeat; opacity: 0; transform: scale(.2); transition: all .2s ease-in-out .1s; }
.evc-remember input[type=checkbox]:checked::after { opacity: 1; transform: scale(1); }
.evc-lost-link { font-size: 14px; line-height: 32px; color: #0073aa !important; text-decoration: none; }
.evc-modal-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 25.6px 0 12.8px; }
.evc-modal-btn { position: relative; display: inline-block; min-width: 200px; height: 58px; padding: 19px 15px; font: inherit; font-size: 16px; line-height: 18.4px; letter-spacing: normal; color: #fff; background: #333; border: 1px solid #333; border-radius: 5px; cursor: pointer; transition: all .3s ease-in-out; }
.evc-modal-btn:hover { background: #555; border-color: #555; }
.evc-modal-btn:focus { outline-style: none; }
.evc-modal-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333; }
.evc-modal-btn.is-loading { color: transparent; }
.evc-modal-btn.is-loading::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1.2em; height: 1.2em; margin: auto; border: 2px solid transparent; border-top-color: #fff; border-radius: 50%; animation: evc-spin 1s ease infinite; }
@keyframes evc-spin { to { transform: rotate(1turn); } }
.evc-modal-guest { margin-top: 12.8px; font-size: 16px; line-height: 18.4px; color: #0073aa !important; text-decoration: none; }
.evc-lost-submit { margin: 0; }
.evc-modal-close { position: absolute; top: 14px; right: 14px; display: flex; padding: 0; margin: 0; border: none; background: none; color: #000; cursor: pointer; }
.evc-modal-close svg { fill: currentColor; }
.evc-alert { margin: 0 0 16px; padding: 15px; border: 1px solid transparent; border-radius: 5px; font-size: 16px; }
.evc-alert .message { line-height: 1.625; }
.evc-alert a { color: inherit; text-decoration: underline; }
.evc-alert-error { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.evc-alert-success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.evc-alert.is-shaking { animation: evc-shake .5s linear 1; }
.evc-remember span { margin-left: 5px; }

/* Partner page: a narrower popup than the checkout's (only the login form) */
.evp-login-modal .evc-modal { max-width: 520px; }
.evp-login-modal .evc-modal h3 { text-transform: none; }
@media (max-width: 599px) { .evp-login-modal .evc-modal { padding: 28px 18px; } }