/* Fashionity Zavu Mobile OTP - compact login width */
#fashionity-zavu-otp.fashionity-zavu-otp {
    display: block !important;
    width: 550px !important;
    max-width: 550px !important;
    min-width: 0 !important;
    flex: 0 0 550px !important;
    margin: 0 auto 1.15rem !important;
    padding: 18px 0 4px !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}
#fashionity-zavu-otp.fashionity-zavu-otp,
#fashionity-zavu-otp.fashionity-zavu-otp * {
    box-sizing: border-box !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__heading {
    text-align: center !important;
    margin: 0 0 1rem !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__heading h3 {
    margin: 0 0 .3rem !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__heading p {
    margin: 0 !important;
    color: #777 !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
}
#fashionity-zavu-otp .form-row,
#fashionity-zavu-otp .form-row.form-row-wide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 .9rem !important;
    padding: 0 !important;
}
#fashionity-zavu-otp label {
    display: block !important;
    margin-bottom: .42rem !important;
}
#fashionity-zavu-otp input.input-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: text !important;
    opacity: 1 !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__send,
#fashionity-zavu-otp .fashionity-zavu-otp__verify {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__send {
    height: 52px !important;
}
.fashionity-zavu-otp__step--code[hidden],
.fashionity-zavu-otp__step--phone[hidden] {
    display: none !important;
}
.fashionity-zavu-otp__sent {
    margin: 0 0 1rem !important;
    text-align: center !important;
    color: #666 !important;
    font-size: .9rem !important;
}
.fashionity-zavu-otp__change,
.fashionity-zavu-otp__resend {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: .55rem 0 0 !important;
    color: var(--color-primary, #111) !important;
    cursor: pointer !important;
    font-size: .9rem !important;
}
.fashionity-zavu-otp__resend:disabled {
    color: #aaa !important;
    cursor: not-allowed !important;
}
.fashionity-zavu-otp__message {
    min-height: 1.25rem !important;
    margin-top: .65rem !important;
    text-align: center !important;
    font-size: .9rem !important;
}
.fashionity-zavu-otp__message.is-error { color: #d63638 !important; }
.fashionity-zavu-otp__message.is-success { color: #16803c !important; }
#fashionity-zavu-otp + .fashionity-zavu-otp__divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 550px !important;
    max-width: 550px !important;
    min-width: 0 !important;
    margin: .85rem auto 1.15rem !important;
    color: #999 !important;
    font-size: .8rem !important;
    box-sizing: border-box !important;
}
.fashionity-zavu-otp__divider::before,
.fashionity-zavu-otp__divider::after {
    content: '' !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: #e5e5e5 !important;
}
.fashionity-zavu-otp__divider span {
    padding: 0 4px !important;
}
@media (max-width: 600px) {
    #fashionity-zavu-otp.fashionity-zavu-otp,
    #fashionity-zavu-otp + .fashionity-zavu-otp__divider {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        flex-basis: auto !important;
    }
}

#fashionity-zavu-otp #fashionity_otp_code:focus,
#fashionity-zavu-otp #fashionity_otp_code:active {
    outline: 2px solid currentColor !important;
    outline-offset: 1px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}
#fashionity-zavu-otp .fashionity-zavu-otp__step--code {
    position: relative !important;
    z-index: 4 !important;
}

/* Fashionity first-visit login popup */
body.fashionity-login-modal-open { overflow: hidden !important; }
.fashionity-login-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.fashionity-login-modal.is-open { display: flex !important; }
.fashionity-login-modal__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(20, 20, 20, .48) !important;
    backdrop-filter: blur(4px) !important;
}
.fashionity-login-modal__dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 470px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 22px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,.18) !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    animation: fashionityLoginPop .25s ease-out !important;
}
@keyframes fashionityLoginPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fashionity-login-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f7f7f7 !important;
    color: #555 !important;
    font-size: 25px !important;
    line-height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.fashionity-login-modal__brand { display:flex !important; align-items:center !important; justify-content:center !important; margin-bottom:20px !important; padding:0 42px !important; }
.fashionity-login-modal__brand img { display:block !important; width:auto !important; max-width:250px !important; height:auto !important; max-height:62px !important; object-fit:contain !important; }
.fashionity-login-modal__intro { text-align:center !important; margin-bottom:24px !important; }
.fashionity-login-modal__intro h2 { margin:0 0 6px !important; font-size:27px !important; line-height:1.2 !important; font-weight:600 !important; }
.fashionity-login-modal__intro p { margin:0 !important; color:#777 !important; font-size:14px !important; }
.fashionity-login-option {
    display:flex !important; align-items:center !important; width:100% !important; min-height:76px !important;
    border:1px solid #e8e8e8 !important; border-radius:15px !important; background:#fff !important;
    padding:13px 15px !important; margin:0 0 12px !important; text-align:left !important; cursor:pointer !important;
    transition:all .18s ease !important;
}
.fashionity-login-option:hover { border-color:#cfcfcf !important; transform:translateY(-1px) !important; box-shadow:0 8px 24px rgba(0,0,0,.06) !important; }
.fashionity-login-option__icon { display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; flex:0 0 44px !important; border-radius:12px !important; background:#f6f6f6 !important; color:#222 !important; font-size:20px !important; }
.fashionity-login-option__text { display:flex !important; flex-direction:column !important; gap:4px !important; flex:1 !important; min-width:0 !important; padding-left:12px !important; }
.fashionity-login-option__text strong { font-size:15px !important; font-weight:600 !important; color:#111 !important; }
.fashionity-login-option__text small { font-size:12px !important; color:#888 !important; line-height:1.3 !important; }
.fashionity-login-option__arrow { font-size:25px !important; color:#999 !important; padding-left:8px !important; }
.fashionity-login-back { border:0 !important; background:transparent !important; padding:0 !important; margin:0 0 18px !important; color:#666 !important; font-size:13px !important; cursor:pointer !important; }
.fashionity-login-back:hover { color:#111 !important; }
.fashionity-login-modal__panel { display:none !important; }
.fashionity-login-modal__panel[hidden] { display:none !important; }
.fashionity-login-modal__panel.is-active { display:block !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; flex:none !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__heading h3,
.fashionity-email-login__heading h3 { font-size:21px !important; font-weight:600 !important; margin:0 0 5px !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__heading p,
.fashionity-email-login__heading p { font-size:13px !important; color:#777 !important; margin:0 0 20px !important; line-height:1.5 !important; }
.fashionity-email-login__heading { text-align:left !important; margin-bottom:20px !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup input.input-text,
.fashionity-email-login__form input.input-text { height:50px !important; border:1px solid #ddd !important; border-radius:9px !important; padding:0 14px !important; background:#fff !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__send,
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__verify,
.fashionity-email-login__submit { height:50px !important; border:0 !important; border-radius:9px !important; background:#111 !important; color:#fff !important; font-size:14px !important; font-weight:600 !important; cursor:pointer !important; }
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__send:hover,
.fashionity-login-modal .fashionity-zavu-otp--popup .fashionity-zavu-otp__verify:hover,
.fashionity-email-login__submit:hover { opacity:.9 !important; }
.fashionity-email-login__remember { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:3px 0 17px !important; font-size:12px !important; }
.fashionity-email-login__remember label { margin:0 !important; display:flex !important; align-items:center !important; gap:6px !important; }
.fashionity-email-login__remember input { margin:0 !important; }
.fashionity-email-login__remember a,
.fashionity-email-login__register a { color:#222 !important; text-decoration:underline !important; }
.fashionity-email-login__message { min-height:18px !important; margin:8px 0 !important; text-align:center !important; font-size:13px !important; }
.fashionity-email-login__message.is-error { color:#d63638 !important; }
.fashionity-email-login__message.is-success { color:#16803c !important; }
.fashionity-email-login__register { margin:18px 0 0 !important; text-align:center !important; color:#777 !important; font-size:12px !important; }
@media (max-width:600px) {
    .fashionity-login-modal { padding:12px !important; }
    .fashionity-login-modal__dialog { max-height:calc(100vh - 24px) !important; border-radius:18px !important; padding:24px 18px !important; }
    .fashionity-login-modal__intro h2 { font-size:24px !important; }
}

.fashionity-login-option--register { border-color:#f3d8e1 !important; background:#fff8fa !important; }
.fashionity-login-option--register .fashionity-login-option__icon { background:#fde9ef !important; }
.fashionity-register__heading { text-align:left !important; margin-bottom:20px !important; }
.fashionity-register__heading h3 { font-size:21px !important; font-weight:600 !important; margin:0 0 5px !important; }
.fashionity-register__heading p { font-size:13px !important; color:#777 !important; margin:0 !important; line-height:1.5 !important; }
.fashionity-register__form input.input-text { width:100% !important; height:50px !important; border:1px solid #ddd !important; border-radius:9px !important; padding:0 14px !important; background:#fff !important; }
.fashionity-register__submit { width:100% !important; height:50px !important; border:0 !important; border-radius:9px !important; background:#f1255b !important; color:#fff !important; font-size:14px !important; font-weight:600 !important; cursor:pointer !important; }
.fashionity-register__submit:hover { opacity:.92 !important; }
.fashionity-register__message { min-height:18px !important; margin:8px 0 !important; text-align:center !important; font-size:13px !important; }
.fashionity-register__message.is-error { color:#d63638 !important; }
.fashionity-register__message.is-success { color:#16803c !important; }
.fashionity-register__note { margin:0 0 18px !important; padding:12px 13px !important; border-radius:9px !important; background:#fafafa !important; color:#777 !important; font-size:12px !important; line-height:1.5 !important; }


/* Fashionity v1.1.2 - ONLY requested change: smaller popup logo */
.fashionity-login-modal .fashionity-login-modal__brand > img {
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 46px !important;
    object-fit: contain !important;
}
@media (max-width: 600px) {
    .fashionity-login-modal .fashionity-login-modal__brand > img {
        width: 150px !important;
        max-width: 150px !important;
        max-height: 40px !important;
    }
}


/* Fashionity v1.1.3 - new mobile number account notice */
.fashionity-zavu-otp__new-account-notice {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border: 1px solid #f2d6df;
    border-radius: 9px;
    background: #fff6f8;
    text-align: center;
    line-height: 1.45;
}
.fashionity-zavu-otp__new-account-notice strong,
.fashionity-zavu-otp__new-account-notice span {
    display: block;
}
.fashionity-zavu-otp__new-account-notice strong {
    font-size: 13px;
    color: #222;
    margin-bottom: 2px;
}
.fashionity-zavu-otp__new-account-notice span {
    font-size: 12px;
    color: #666;
    margin-bottom: 9px;
}
.fashionity-zavu-otp__create-account {
    display: inline-block;
    border: 0;
    border-radius: 7px;
    padding: 8px 15px;
    background: #3b3b3b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.fashionity-zavu-otp__create-account:hover {
    background: #222;
}

/* v1.1.4 - new customer notice shown BEFORE any paid OTP is sent */
.fashionity-zavu-otp__new-account-notice {
    margin: 10px 0 12px !important;
    padding: 11px 13px !important;
    border: 1px solid #ead6dc !important;
    border-radius: 9px !important;
    background: #fff8fa !important;
    text-align: center !important;
}
.fashionity-zavu-otp__new-account-notice strong,
.fashionity-zavu-otp__new-account-notice span {
    display:block !important;
}
.fashionity-zavu-otp__new-account-notice strong {
    margin-bottom:3px !important;
    font-size:13px !important;
}
.fashionity-zavu-otp__new-account-notice span {
    margin-bottom:8px !important;
    font-size:12px !important;
}
.fashionity-zavu-otp__new-account-notice .fashionity-zavu-otp__create-account {
    display:inline-block !important;
    width:auto !important;
    min-height:36px !important;
    height:36px !important;
    padding:7px 14px !important;
    border-radius:7px !important;
    background:#3b3b3b !important;
    color:#fff !important;
}

/* v1.1.7 - actual popup input, interaction only */
#fashionity_otp_phone_popup {
    pointer-events:auto !important;
    cursor:text !important;
    user-select:text !important;
    -webkit-user-select:text !important;
    touch-action:auto !important;
    position:relative !important;
    z-index:9999 !important;
}

/* v1.1.8 - exact phone field hit area */
#fashionity-zavu-otp-popup .fashionity-zavu-otp__step--phone,
#fashionity-zavu-otp-popup .fashionity-zavu-otp__step--phone > .form-row,
#fashionity-zavu-otp-popup #fashionity_otp_phone_popup {
    position:relative !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
}
#fashionity-zavu-otp-popup #fashionity_otp_phone_popup {
    cursor:text !important;
    user-select:text !important;
    -webkit-user-select:text !important;
}
#fashionity-zavu-otp-popup .fashionity-zavu-otp__new-account-notice,
#fashionity-zavu-otp-popup .fashionity-zavu-otp__message {
    pointer-events:none !important;
}

/* v1.1.9 - verified mobile customer profile completion */
.fashionity-mobile-profile__heading { text-align:left !important; margin-bottom:20px !important; }
.fashionity-mobile-profile__heading h3 { font-size:21px !important; font-weight:600 !important; margin:0 0 5px !important; }
.fashionity-mobile-profile__heading p { font-size:13px !important; color:#777 !important; margin:0 !important; line-height:1.5 !important; }
.fashionity-mobile-profile__form input.input-text {
    width:100% !important;
    height:50px !important;
    border:1px solid #ddd !important;
    border-radius:9px !important;
    padding:0 14px !important;
    background:#fff !important;
}
.fashionity-mobile-profile__submit {
    width:100% !important;
    height:50px !important;
    border:0 !important;
    border-radius:9px !important;
    background:#111 !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:600 !important;
    cursor:pointer !important;
}
.fashionity-mobile-profile__submit:hover { opacity:.9 !important; }
.fashionity-mobile-profile__message {
    min-height:18px !important;
    margin:8px 0 !important;
    text-align:center !important;
    font-size:13px !important;
}
.fashionity-mobile-profile__message.is-error { color:#d63638 !important; }
.fashionity-mobile-profile__message.is-success { color:#16803c !important; }

/* v1.2.2 - selected login method only: never show the method cards together with a panel */
.fashionity-login-modal__choice[hidden] { display:none !important; }
.fashionity-login-modal__choice { width:100% !important; }
.fashionity-login-modal__panel[hidden] { display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }
.fashionity-login-modal__panel.is-active { display:block !important; visibility:visible !important; height:auto !important; overflow:visible !important; }
