/* Roxi member login popup R1. Namespaced to avoid changing the user's CSS/menu. */
.rx-auth-overlay[hidden], .rx-auth-message[hidden] { display: none !important; }
body.rx-auth-open { overflow: hidden !important; }
.rx-auth-overlay {
    position: fixed;
    z-index: 2147481000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
}
.rx-auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(22, 21, 40, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rx-auth-dialog {
    width: min(830px, 100%);
    max-height: min(95vh, 820px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
    position: relative;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(6, 10, 34, .36);
    overflow: visible;
    font-family: Gilroy, 'Arial', sans-serif;
    color: #283047;
    outline: none;
    animation: rx-auth-enter .23s ease-out;
}
@keyframes rx-auth-enter { from { opacity: 0; transform: translateY(14px) scale(.987); } to { opacity: 1; transform: translateY(0) scale(1); } }
.rx-auth-close {
    position: absolute;
    right: -48px;
    top: -30px;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #242338;
    background: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 10px #0002;
}
.rx-auth-close:hover, .rx-auth-close:focus-visible { background: #ffe9ef; color: #e82958; }
.rx-auth-dialog .rx-auth-form-side {
    min-width: 0;
    padding: 42px 40px 28px;
    background: #fff;
    border-radius: 26px 0 0 26px;
    overflow-y: auto;
    max-height: inherit;
    position: relative;
}
.rx-auth-form-side::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background: repeating-radial-gradient(ellipse at 6% 3%, transparent 0,transparent 19px,#f6eef2 20px,transparent 21px);
}
.rx-auth-form-side > * { position: relative; }
.rx-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f14262;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px;
    margin-bottom: 10px;
}
.rx-auth-eyebrow i { font-size: 15px; }
.rx-auth-form-side h2 {
    margin: 0 0 5px;
    color: #24283d;
    font-size: clamp(25px, 3vw, 31px);
    line-height: 1.18;
    font-weight: 600;
}
.rx-auth-form-side h2 span { color: #f23f63; }
.rx-auth-description { color: #737e98; font-size: 13px; line-height: 1.5; margin: 0 0 22px; }
.rx-auth-message {
    color: #9c284e;
    background: #fff0f3;
    border: 1px solid #ffd5de;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 15px;
}
.rx-auth-message.rx-auth-success { color: #22784b; background: #eefbf3; border-color: #c9ebd7; }
.rx-auth-form { display: grid; grid-template-columns: 1fr; gap: 0; }
.rx-auth-form > label { color: #555e73; font-size: 13px; font-weight: 600; margin-bottom: 7px; line-height: 1.4; }
.rx-auth-input-wrap {
    display: flex;
    align-items: center;
    height: 51px;
    border: 1px solid #d5dbeb;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 17px;
    transition: border-color .2s ease,box-shadow .2s ease;
}
.rx-auth-input-wrap:focus-within { border-color: #f04468; box-shadow: 0 0 0 3px rgba(240, 68, 104, .1); }
.rx-auth-input-wrap > i { width: 48px; min-width: 48px; text-align: center; font-size: 18px; color: #909bb1; border-right: 1px solid #eef0f5; }
.rx-auth-input-wrap input {
    min-width: 0;
    flex: 1;
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 12px;
    height: 100%;
    color: #263048;
    font: 14px Gilroy, 'Arial', sans-serif;
}
.rx-auth-input-wrap input::placeholder { color: #a3adc0; opacity: 1; }
.rx-auth-password-toggle {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8e99ad;
    cursor: pointer;
    margin-right: 5px;
    font-size: 17px;
}
.rx-auth-password-toggle:hover { background: #fff0f3; color: #e83159; }
.rx-auth-help { text-align: right; margin: -2px 0 17px; }
.rx-auth-help a { font-size: 12px; font-weight: 600; color: #636c84; text-decoration: none; }
.rx-auth-help a:hover { color: #e82f58; }
.rx-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 49px;
    padding: 12px 15px;
    border: 0;
    border-radius: 10px;
    background: #ee1752;
    color: white;
    font: 600 15px Gilroy,'Arial',sans-serif;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(237,23,83,.16);
    transition: background .16s ease, transform .16s ease;
}
.rx-auth-submit:not(:disabled):hover { background: #d30a43; transform: translateY(-1px); }
.rx-auth-submit:disabled { cursor: wait; opacity: .6; box-shadow: none; }
.rx-auth-registration { text-align: center; margin-top: 22px; color: #606b84; font-size: 13px; font-weight: 600; }
.rx-auth-registration a { color: #e71e51; font-weight: 600; text-decoration: none; }
.rx-auth-registration a:hover { text-decoration: underline; }
.rx-auth-bottom { border-top: 1px solid #edf0f5; color: #929bb0; font-size: 11px; line-height: 1.5; text-align: center; padding-top: 16px; margin-top: 22px; }
.rx-auth-bottom i { color: #e72e59; margin-right: 3px; }
.rx-auth-art {
    min-width: 0;
    min-height: 515px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    border-radius: 0 26px 26px 0;
    background: radial-gradient(circle at 70% 48%, #ff9a9d 0%, #f95479 43%, #e82860 75%, #a71d53 110%);
    color: white;
}
.rx-auth-art::before {
    content: '';
    position: absolute;
    width: 390px;
    height: 390px;
    left: 10px;
    bottom: 8px;
    background: #fff3;
    border-radius: 50%;
    box-shadow: 0 0 0 38px #fff1, 0 0 0 79px #fff1;
    z-index: -1;
}
.rx-auth-art::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -15%;
    height: 45%;
    background: linear-gradient(0deg, #d70852 16%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.rx-auth-art-top { position: absolute; z-index: 2; top: 31px; left: 30px; display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 1px; font-weight: 600; }
.rx-auth-art-icon { border: 1px solid #ffffff78; border-radius: 10px; width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px; background: #fff2; }
.rx-auth-art-headline { position: absolute; top: 81px; left: 30px; z-index: 2; line-height: 1.13; font-size: 26px; font-weight: 600; text-shadow: 0 1px 5px #c3285555; }
.rx-auth-art-headline strong { font-weight: 700; }
.rx-auth-art-glow { position: absolute; inset: 18% -30% -18% 4%; background: radial-gradient(circle, #ffd1b366, transparent 67%); }
.rx-auth-art img { position: absolute; width: min(103%, 435px); max-width: none; height: auto; bottom: -61px; left: 50%; transform: translateX(-50%); z-index: 0; filter: drop-shadow(0 12px 22px rgba(97,7,46,.19)); }
.rx-auth-art-foot { position: absolute; bottom: 27px; left: 22px; right: 22px; z-index: 3; text-align: center; border: 1px solid #ffffff47; background: #c50d4e75; backdrop-filter: blur(7px); padding: 11px; border-radius: 11px; color: white; font-size: 12px; font-weight: 600; }
.rx-auth-art-foot span { font-size: 16px; padding-right: 5px; }
@media (max-width: 900px) {
    .rx-auth-close { right: -8px; top: -45px; }
    .rx-auth-dialog { width: min(790px, 100%); }
    .rx-auth-dialog .rx-auth-form-side { padding: 36px 30px 25px; }
}
@media (max-width: 650px) {
    .rx-auth-overlay { padding: 55px 12px 18px; align-items: flex-start; }
    .rx-auth-dialog { display: block; width: min(435px, 100%); max-height: none; border-radius: 19px; margin: auto; }
    .rx-auth-dialog .rx-auth-form-side { max-height: none; padding: 29px 22px 22px; border-radius: 19px; }
    .rx-auth-art { display: none; }
    .rx-auth-close { top: -42px; right: 1px; width: 35px; height: 35px; }
    .rx-auth-description { margin-bottom: 18px; }
    .rx-auth-bottom { margin-top: 17px; }
}
@media (max-height: 650px) and (min-width: 651px) {
    .rx-auth-overlay { align-items: flex-start; }
    .rx-auth-dialog .rx-auth-form-side { padding-top: 22px; padding-bottom: 17px; }
    .rx-auth-art { min-height: 485px; }
}
@media (prefers-reduced-motion: reduce) { .rx-auth-dialog, .rx-auth-submit { animation: none; transition: none; } }

/* R2: multi-step registration and password recovery in the same popup.
   No selector outside .rx-auth-* is modified; site's custom style.css is untouched. */
.rx-auth-screen[hidden], .rx-auth-form[hidden], .rx-auth-result[hidden] { display: none !important; }
.rx-auth-form-side h2 .rx-auth-title-core { color: #24283d; }
.rx-auth-screen[data-rx-auth-screen="register"] .rx-auth-input-wrap { margin-bottom: 12px; }
.rx-auth-screen[data-rx-auth-screen="register"] .rx-auth-form > label { margin-bottom: 5px; }
.rx-auth-hint { margin: 0 0 17px; color: #7d879e; font-size: 12px; line-height: 1.55; }
.rx-auth-result { padding: 7px 0 3px; text-align: center; }
.rx-auth-result-icon { width: 56px; height: 56px; margin: 0 auto 13px; border-radius: 16px; display: grid; place-items: center; background: #eefbf3; color: #22a362; font-size: 28px; }
.rx-auth-result strong { display: block; color: #283047; font-size: 17px; font-weight: 600; }
.rx-auth-result p { color: #78849d; font-size: 13px; line-height: 1.55; margin: 9px 0 17px; }
.rx-auth-result-button { text-decoration: none !important; font-size: 12px; }
.rx-auth-screen[data-rx-auth-screen="register"] .rx-auth-registration { margin-top: 14px; }
.rx-auth-screen[data-rx-auth-screen="forgot"] .rx-auth-registration, .rx-auth-screen[data-rx-auth-screen="resend"] .rx-auth-registration { margin-top: 24px; }
@media (max-height: 720px) and (min-width: 651px) {
  .rx-auth-screen[data-rx-auth-screen="register"] .rx-auth-input-wrap { height: 45px; margin-bottom: 9px; }
  .rx-auth-screen[data-rx-auth-screen="register"] .rx-auth-hint { margin-bottom: 10px; }
}

/* R3.3: keep the header account label stable while identity loads.
   The icon remains visible and the original card dimensions are untouched. */
header:not(.customer-header) .navbar-action-area .customer-account-trigger[data-rx-customer-status="pending"] [data-rx-customer-label] {
  visibility: hidden;
}