/* BlizzLogin – front-end forms. Three templates (zarinpal / digikala / rtl) sharing one form markup.
   Values are kept 1:1 with the reference demo; Elementor style controls override them per widget. */
:root { --bzl-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --bzl-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --bzl-mask-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --bzl-mask-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.bzl-zarinpal, .bzl-digikala, .bzl-rtl, .bzl-modal, .bzl-hb { direction: rtl; box-sizing: border-box; }
.bzl-zarinpal *, .bzl-digikala *, .bzl-rtl *, .bzl-modal *, .bzl-hb * { box-sizing: border-box; }
.bzl-form-holder form { position: relative; }
.bzl-step { display: none; }
.bzl-step.is-active { display: block; }
.bzl-error { display: none; }
.bzl-error.is-visible { display: block; }
.bzl-hidden { display: none !important; }
.bzl-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bzl-none {
    display: none !important;
}

.bzl-block {
    display: block !important;
}

.bzl-captcha {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.bzl-captcha input {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    direction: ltr !important;
    margin: auto 0 !important;
}

.bzl-form-holder .bzl-is-abroad .bzl-abroad-wrap {
    display: none;
}

.bzl-form-holder .bzl-captcha input::placeholder {
    opacity: 1 !important;
    direction: rtl !important;
    color: inherit !important;
    text-align: right !important;
}

.bzl-zp-init .bzl-mail-main .bzl-captcha {
    margin-bottom: 25px;
}

.bzl-captcha .bzl-captcha-img {
    height: 50px;
    width: 120px;
}

.bzl-captcha-img {
    position: relative;
    width: 120px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    /* skeleton background */
    background: linear-gradient(90deg, #eee, #ddd, #eee);
    background-size: 200% 100%;
    animation: rec-skel 1.2s linear infinite;
}

.bzl-captcha-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes rec-skel {
    0% {
        background-position: 200% 0
    }
    100% {
        background-position: -200% 0
    }
}

.bzl-input-wrap {
    position: relative;
}

.bzl-head.has-error input {
    border: 1px solid #e3122a !important;
}

.bzl-error {
    font-size: 14px;
    text-align: right;
    margin: -20px 5px 15px;
    color: #e3122a !important;
}

.bzl-step-code .bzl-resend {
    display: none;
    color: #c36;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    border-radius: 9px;
    padding: 16px 10px;
    background-color: transparent;
    border: none !important;
}

.bzl-step-code .bzl-resend:hover {
    background: transparent;
    color: #c36;
}

.bzl-form.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-loading .bzl-submit {
    color: transparent !important;
}

.bzl-step-code.bzl-loading .bzl-submit-code {
    color: transparent !important;
}

.bzl-step-code.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-load {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.bzl-load-anim {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 45px;
}

.bzl-load-anim div {
    position: absolute;
    top: 20px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.bzl-load-anim div:nth-child(1) {
    left: 8px;
    animation: bzl-load1 0.6s infinite;
}

.bzl-load-anim div:nth-child(2) {
    left: 8px;
    animation: bzl-load2 0.6s infinite;
}

.bzl-load-anim div:nth-child(3) {
    left: 32px;
    animation: bzl-load2 0.6s infinite;
}

.bzl-load-anim div:nth-child(4) {
    left: 56px;
    animation: bzl-load3 0.6s infinite;
}

@keyframes bzl-load1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bzl-load3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes bzl-load2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

/* toast */
.bzl-toast {
    visibility: hidden;
    width: fit-content;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 100px;
    padding: 10px 30px;
    position: fixed;
    z-index: 99999999;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 30px;
    font-size: 17px;
}

.bzl-toast.show {
    visibility: visible;
    -webkit-animation: bzl-fadein 0.5s, bzl-fadeout 0.5s 2.5s;
    animation: bzl-fadein 0.5s, bzl-fadeout 0.5s 2.5s;
}

@-webkit-keyframes bzl-fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 30px;
        opacity: 1;
    }
}

@keyframes bzl-fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes bzl-fadeout {
    from {
        top: 30px;
        opacity: 1;
    }
    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes bzl-fadeout {
    from {
        top: 30px;
        opacity: 1;
    }
    to {
        top: 0;
        opacity: 0;
    }
}

/*Start Password Page*/
.bzl-pass-field {
    position: relative;
    margin-bottom: 12px;
}

.bzl-step-pass .bzl-pass-field .bzl-pass-new {
    margin-bottom: 0;
}

.bzl-newpass-title {
    text-align: center;
    font-size: 14px;
    margin: 0;
}

.bzl-step-pass .bzl-pass-input, .bzl-step-pass .bzl-pass-new {
    width: 100%;
    font-size: 1em;
    color: #030a16;
    line-height: 24px;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 12px;
    background-color: #fff;
    border: 1px solid #e0e0e2;
    outline: none !important;
}

.bzl-step-pass.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-step-pass.bzl-loading .bzl-submit-code {
    color: transparent !important;
}

.bzl-step-pass .bzl-to-code {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    margin: auto 0;
}

.bzl-pass-rules {
    list-style: none;
    padding: 0;
}

.bzl-pass-rules li {
    margin: 5px 0;
    font-size: 12px;
    padding-left: 20px;
    position: relative;
    transition: color 0.3s ease-in-out;
}

.bzl-pass-rules li .bzl-dot {
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #e6e6e6;
    transition: background-color 0.3s ease-in-out;
}

.bzl-pass-rules li.invalid {
    color: #D72638;
}

.bzl-pass-rules li.valid {
    color: #00A86B;
}

span.bzl-eye {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out;
}

span.bzl-eye svg {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease-in-out, transform 0.2s ease-in-out;
}

span.bzl-eye .bzl-eye-path {
    fill: #aaa;
    transition: fill 0.3s ease-in-out;
}

span.bzl-eye:hover .bzl-eye-path {
    fill: #666;
}

span.bzl-eye.active .bzl-eye-path {
    fill: #007bff;
}

/*Start Account Verify*/
.bzl-verify {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999999;
    display: flex;
    width: 100%;
    height: 100%;
}

.bzl-verify:before {
    content: '';
    opacity: 0.5;
    background: #000;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.bzl-verify-box {
    margin: auto;
    padding: 35px;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    display: inline-block;
}

.bzl-verify-box .bzl-submit {
    width: 320px;
    font-size: 14px;
    margin-top: 15px;
    padding: 17px 15px;
    position: relative;
    border-radius: 9px !important;
    outline: none !important;
    box-shadow: none !important;
}

.bzl-verify .bzl-verify-box .bzl-verify-btn {
    border: none;
    color: #ffffff;
    background: #998bf0;
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
}

.bzl-verify-box .bzl-verify-input {
    width: 320px;
    padding: 15px;
    font-size: 14px;
    text-align: center;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 7px !important;
}

.bzl-verify-box .bzl-verify-input::-webkit-outer-spin-button,
.bzl-verify-box .bzl-verify-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bzl-verify-head p {
    text-align: center;
    margin-bottom: 16px;
    font-size: 15px;
}

.bzl-verify.has-error .bzl-input {
    border: 1px solid #e3122a !important;
}

.bzl-verify .bzl-error {
    margin: 8px 0 0 0;
}

.bzl-verify .bzl-step-code {
    position: relative;
    display: inline-block;
    margin: auto;
    background: #ffffff;
    padding: 35px;
    border-radius: 10px;
}

.bzl-verify .bzl-step-code .bzl-submit-code {
    position: relative;
    width: 100%;
    border-radius: 7px;
}

.bzl-verify-code {
    display: inline-block;
    position: relative;
    margin: auto;
    width: 450px;
    padding: 35px;
    background: #ffffff;
    border-radius: 10px;
}

.bzl-verify-code .bzl-verify-title {
    text-align: center;
}

.bzl-verify-code .bzl-verify-code-input {
    width: 100%;
    margin: 15px 0;
    padding: 15px 5px;
    text-align: center;
    border-radius: 7px;
    letter-spacing: 10px;
    outline: none !important;
    box-shadow: none !important;
}

.bzl-verify-code .bzl-submit-code {
    position: relative;
    width: 100%;
    border-radius: 7px;
    padding: 20px 10px;
}

.bzl-verify-code .bzl-resend {
    display: none;
    width: 100%;
    border-radius: 7px;
    padding: 20px 10px;
}

.bzl-verify-code .bzl-expire {
    margin-bottom: 10px;
}

.bzl-verify-code .bzl-verify-code-head {
    display: flex;
    justify-content: space-between;
}

.bzl-verify-code .bzl-verify-code-head span {
    font-size: 14px;
}

.bzl-verify-code .bzl-verify-code-head .bzl-code-phone {
    font-weight: 500;
}

.bzl-verify.bzl-loading .bzl-verify-btn {
    color: transparent !important;
}

.bzl-verify.bzl-loading .bzl-verify-btn .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-logo-img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 22px auto;
}

.bzl-title2 {
    display: inline-block;
    font-weight: 400;
    line-height: 2.17;
    margin-bottom: 16px;
}

.bzl-arrow {
    border: solid #424750;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
}

.bzl-arrow:before {
    content: '';
    position: absolute;
    top: 0;
    width: 15px;
    height: 1px;
    right: -2px;
    display: block;
    background: #424750;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.bzl-arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.bzl-form-holder form {
    position: relative;
}

.bzl-block-email, .bzl-block-phone {
    display: block;
    text-align: center;
    margin: 0 !important;
}

.bzl-not-form {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 55px 5px;
}

.bzl-modal-btn {
    cursor: pointer;
    padding: 15px 22px;
    font-size: 15px;
    line-height: 23px;
    border-radius: 12px;
    color: #fff;
    background: #1276d1;
    display: inline-block;
}

.bzl-modal {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    overflow: auto;
    position: fixed;
    text-align: center;
    box-sizing: border-box;
    background-color: rgba(6, 6, 6, .8);
}

.bzl-modal.open {
    display: flex;
}

.bzl-modal-box {
    position: relative;
    margin: auto;
    display: block;
}

.bzl-modal-box .bzl-modal-close {
    top: 0;
    opacity: .8;
    z-index: 30;
    right: 0;
    cursor: pointer;
    font-size: 28px;
    font-weight: 700;
    padding: 5px 20px;
    position: absolute;
    line-height: initial;
    transition: all .2s ease;
    color: rgb(109, 109, 109);
    -webkit-transition: all .2s ease;
}

.bzl-modal-box .bzl-toast {
    border: 2px solid #ffffff;
    color: #ffffff;
}

.bzl-modal-box .bzl-modal-close:hover {
    opacity: 1;
}

.bzl-modal.bzl-modal--rtl .bzl-modal-box {
    width: 100%;
    max-width: 460px;
}

.bzl-modal.bzl-modal--zarinpal {
    text-align: right;
}

.bzl-modal.bzl-modal--zarinpal .bzl-modal-close {
    right: unset;
    left: 0;
}

.bzl-modal.bzl-modal--digikala .bzl-dg-content {
    width: 400px;
    max-width: 400px;
    text-align: right;
    background: #ffffff;
}

.bzl-abroad-wrap {
    text-align: right;
}

.bzl-abroad-wrap .bzl-abroad {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    text-align: right;
    padding-right: 5px;
}

.bzl-busy {
    position: relative;
}

.bzl-busy:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: 5;
    content: "";
    width: 45px;
    height: 45px;
    margin: auto;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ffffff;
    border-left-color: #1a203f;
    transition: opacity .2s ease;
    animation: bzl-rotate 450ms infinite linear;
}

.bzl-busy:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: auto;
    opacity: 0.5;
    position: absolute;
    background: #ffffff;
    border-radius: 40px;
}

.bzl-abroad-back-wrap {
    text-align: right;
}

.bzl-abroad-back i:before {
    content: unset;
}

.bzl-abroad-back-wrap .bzl-abroad-back {
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    font-weight: 300;
    text-align: right;
    padding-right: 5px;
}

.bzl-abroad-back-wrap .bzl-abroad-back i {
    top: 0.5px;
    opacity: 0.5;
    position: relative;
}

.bzl-forgot-wrap {
    text-align: right;
}

.bzl-forgot-wrap .bzl-forgot {
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
}

@media (max-width: 576px) {
    .bzl-modal.bzl-modal--digikala .bzl-dg-content {
        width: 100%;
    }

    .bzl-modal.bzl-modal--rtl .bzl-modal-box {
        margin: auto 20px;
    }
}

@keyframes bzl-rotate {
    100% {
        transform: rotate(360deg);
    }
}

.bzl-google-btn {
    width: 100%;
    display: flex;
    padding: 13px;
    cursor: pointer;
    border-radius: 8px;
    justify-content: center;
    border: 1px solid #D6DADE;
}

.bzl-google-btn svg {
    width: 22px;
    height: auto;
    margin-left: 10px;
}

.bzl-google-btn span {
    color: #061136;
    margin: auto 0;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
}

.bzl-google-line {
    position: relative;
    margin: 44px 0 40px;
    border-top: 1px solid #caced873;
}

.bzl-google-line p {
    left: 0;
    right: 0;
    top: -12px;
    margin: auto;
    color: #CACED8;
    padding: 0 22px;
    font-size: 13px;
    background: #fff;
    position: absolute;
    width: fit-content;
}

.bzl-modal.open .bzl-modal-box .bzl-rtl,
.bzl-modal.open .bzl-modal-box .bzl-zarinpal {
    opacity: 0;
    animation: 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards running bzl-body;
}

body form .bzl-code-input {
    direction: ltr;
}

body form button.bzl-submit-code:disabled {
    pointer-events: none;
    opacity: 0.5 !important;
}

.bzl-modal.open .bzl-modal-box .bzl-init .bzl-title, .bzl-modal.open .bzl-modal-box input, .bzl-modal.open .bzl-modal-box button, .bzl-modal.open .bzl-modal-box p, .bzl-modal.open .bzl-modal-box span, .bzl-modal.open .bzl-modal-box img {
    opacity: 0;
    animation-delay: 0.1s;
    animation: 0.8s ease-out 0s 1 normal forwards running bzl-content;
}

@keyframes bzl-body {
    0% {
        transform: translateY(-100px) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@keyframes bzl-content {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        filter: blur(0px);
    }
}

.bzl-reset-ok p {
    color: #000;
    padding: 10px;
    margin: 45px 0;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
}

body .bzl-reset-ok .bzl-back {
    top: unset !important;
    padding: 12px !important;
    display: block !important;
    cursor: pointer !important;
    position: relative !important;
    border-radius: 7px;
    text-align: center;
    border: 1px solid #ccc;
}

.bzl-reset-ok p.woo {
    font-size: 17px;
    margin-bottom: 15px;
}

body .bzl-reset-ok div {
    opacity: 0.7;
    font-size: 14px;
    text-align: justify;
    margin-bottom: 20px;
}

.bzl-login-toggle .bzl-just-login button {
    position: relative;
    margin-top: 15px;
    width: 200px;
    max-width: 100%;
}

.bzl-login-toggle .bzl-just-login .bzl-error {
    margin-top: 10px;
    margin-bottom: 5px;
}

.bzl-login-toggle .bzl-just-login .bzl-resend {
    display: none;
}

.bzl-login-toggle .bzl-just-login .bzl-code-footer {
    margin-top: 15px;
}

.bzl-login-toggle .bzl-just-login .bzl-back {
    float: right;
    margin-left: 30px;
}

.bzl-login-toggle .bzl-just-login .bzl-code-head {
    margin-bottom: 15px;
}

.bzl-login-toggle .bzl-just-login .bzl-code-input {
    text-align: center;
    letter-spacing: 15px;
}

.bzl-login-toggle .bzl-just-login .bzl-act {
    margin-top: 22px;
    cursor: pointer;
}

.bzl-login-toggle .bzl-just-login img {
    display: none;
}

.bzl-login-toggle .bzl-just-login .bzl-back {
    cursor: pointer;
}

.bzl-login-toggle .bzl-just-login .bzl-back {
    font-size: 0;
    line-height: 33px;
}

.bzl-login-toggle .bzl-just-login .bzl-back i {
    font-size: 16px;
}

.bzl-login-toggle .bzl-to-code {
    margin-top: 22px;
    cursor: pointer;
}

.bzl-hb-login:hover .bzl-hb-menu2 {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}

.bzl-hb-menu2 {
    left: 0;
    width: 226px;
    top: -webkit-calc(100% + 10px);
    top: -moz-calc(100% + 10px);
    top: calc(100% + 10px);
    overflow: hidden;
    background: #fff;
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 4px 8px rgb(0 0 0 / 12%);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.bzl-hb-menu2 ul {
    list-style: none;
    margin: 0 !important;
    padding: 10px !important;
}

.bzl-hb-menu2 ul li a {
    display: flex;
    color: #3f4064;
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
    margin-bottom: 10px;
    padding-right: 10px;
    transition: 0.3s all;
}

.bzl-hb-menu2 ul li a:hover {
    opacity: 0.7;
}

.bzl-hb-menu2 ul li:last-child a {
    margin-bottom: 0;
}

.bzl-hb-menu2 ul li a svg {
    width: 24px;
    margin: auto;
}

.bzl-hb-menu2 ul li a span {
    display: block;
    padding: 8px 20px 8px 4px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.bzl-roles p {
    font-size: 14px;
}

.bzl-info.mandatory {
    position: fixed;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.bzl-info.mandatory:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #000;
    opacity: 0.5;
}

.bzl-info.mandatory .bzl-info-holder {
    margin: auto;
    width: 580px;
    padding: 10px;
    max-width: 100%;
    background: #fff;
    position: relative;
    border-radius: 15px;
}

.bzl-info.mandatory .bzl-info-holder .bzl-info-inner {
    height: 100%;
    padding: 7px 15px;
    overflow-y: auto;
    max-height: 450px;
}

/* width */
.bzl-info.mandatory .bzl-info-holder .bzl-info-inner::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.bzl-info.mandatory .bzl-info-holder .bzl-info-inner::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #e0e0e0;
}

/* Handle */
.bzl-info.mandatory .bzl-info-holder .bzl-info-inner::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 10px;
}

/* Handle on hover */
.bzl-info.mandatory .bzl-info-holder .bzl-info-inner::-webkit-scrollbar-thumb:hover {
    background: #909090;
}

.bzl-info.mandatory .bzl-info-holder input {
    border-radius: 7px;
}

.bzl-info.mandatory .bzl-info-holder .bzl-submit {
    width: 100%;
    color: #fff;
    display: block;
    padding: 10px 5px;
    border-radius: 7px;
    position: relative;
    background-color: #1e90ff;
    border: 1px solid #1e90ff;
    outline: none !important;
    box-shadow: none !important;
}


.bzl-info.mandatory .bzl-info-holder .bzl-submit:hover {
    color: #1e90ff;
    background: transparent;
}

.bzl-info.mandatory .bzl-info-holder .bzl-submit .bzl-load-anim {
    height: auto;
}

.bzl-info.mandatory .bzl-info-holder .bzl-submit .bzl-load-anim div {
    top: 50%;
    background: #0d70d1;
}

.bzl-info form .bzl-roles label {
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 0;
    margin-right: 15px;
    display: inline-block !important;
}

.bzl-roles input[type="radio"] {
    top: 0;
    bottom: 0;
    margin: 0;
    right: 10px;
    width: 12px;
    height: auto;
    cursor: pointer;
    position: absolute;
    display: inline-block;
}

.bzl-info form .bzl-roles .bzl-role-item {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    display: flex;
    padding: 12px 0;
    position: relative;
    text-align: center;
    border-radius: 7px;
    background: #f8f9fa;
    justify-content: center;
}

.bzl-info form .bzl-roles .bzl-role-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

body form .bzl-birthday {
    display: flex;
    margin-bottom: 20px;
    border-radius: 7px;
    border: 1px solid #c3c3ce !important;
    padding: 5px;
}

body form .bzl-birthday select {
    text-align: center;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body form .bzl-birthday .bzl-bd-arrow {
    margin: auto 0;
    color: #c3c3ce;
}

.bzl-roles {
    margin-bottom: 25px;
}

.bzl-code-boxes {
    display: flex;
    direction: ltr;
    margin-bottom: 15px;
    justify-content: center;
}

.bzl-code-boxes input {
    height: 48px;
    padding: 5px;
    font-size: 20px;
    margin: auto 5px;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
    width: 45px !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    border: 1px solid #80868a !important;
}

body .bzl-form-holder .bzl-input.bzl-phone {
    direction: ltr;
}

.bzl-zarinpal .bzl-row {
    display: flex;
    margin: auto;
    flex-wrap: unset;
    width: fit-content;
    justify-content: center;
    -webkit-box-shadow: 0 5px 10px 0 #c8ccd5;
    box-shadow: 0 5px 15px 0 rgba(31, 32, 35, .07);
    border-radius: 10px;
}

.bzl-zp-content {
    /*height: 530px;*/
    padding: 22px 33px;
    background-color: #fff;
    max-width: 383px !important;
    border-radius: 0 10px 10px 0;
}

.bzl-zp-content .bzl-init {
    margin-top: 40px;
}

.bzl-zp-content .bzl-init .bzl-title {
    color: #000;
    font-size: 24px;
    text-align: right;
    font-weight: 900;
    margin: 0;
}

.bzl-zp-content .bzl-init .bzl-desc {
    color: #424242;
    margin: 7px 0 22px 0;
    font-size: 14px;
    font-weight: 400;
}

.bzl-init .bzl-desc .bzl-change-id {
    color: #187ff7;
    font-size: 15px;
    cursor: pointer;
}

.bzl-zp-init .bzl-input {
    width: 100%;
    height: 46px;
    direction: ltr;
    color: #80868a;
    display: block;
    font-size: 13px;
    padding: 0 13px;
    text-align: left;
    line-height: 46px;
    border-radius: 5px;
    font-family: inherit;
    outline: none !important;
    border: 1px solid #80868a;
    box-shadow: none !important;
    background: transparent !important;
}

.bzl-zp-init .bzl-head .bzl-input:focus,
.bzl-zp-init .bzl-head-email .bzl-input:focus {
    border-color: #0170b9;
    outline: none !important;
    background: transparent !important;
}

.bzl-zp-init .bzl-head .bzl-input:-webkit-autofill,
.bzl-zp-init .bzl-head-email .bzl-input:-webkit-autofill {
    background: transparent !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.bzl-zp-init .bzl-input:not([value=""]) ~ .bzl-label,
.bzl-zp-init .bzl-input:focus ~ .bzl-label {
    transform: translateY(-20px) !important;
    color: #0170b9;
}

.bzl-zp-init .bzl-head .bzl-input:focus + label,
.bzl-zp-init .bzl-head .bzl-input:active + label {
    transform: translateY(-20px) !important;
    color: #0170b9;
}

.bzl-zp-init .bzl-input::placeholder {
    color: transparent !important;
}

.bzl-zp-init .bzl-head {
    position: relative;
    margin-top: 16px;
    margin-bottom: 26px;
    transition: transform .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}

.bzl-zp-init label.bzl-label {
    left: auto;
    order: -1;
    right: 16px;
    bottom: 13px;
    padding: 0 5px;
    color: #80868a;
    font-size: 13px;
    background: #fff;
    line-height: initial;
    position: absolute;
    pointer-events: none;
    margin: 0 !important;
    transition: 300ms ease all;
    -webkit-transition: 300ms ease all;
}

.bzl-zp-init .bzl-footer {
    position: relative;
    text-align: left;
}

.bzl-zp-init .bzl-submit {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 24px;
    line-height: 22px;
    position: relative;
    border-radius: 21px;
    border: none !important;
    outline: none !important;
    background-color: #ffe53b;
    box-shadow: 0 6px 20px 0 rgba(255, 237, 0, .39);
}

.bzl-zp-init .bzl-submit:hover {
    color: #000;
    box-shadow: none;
    background-color: #ffe53b;
}

.bzl-zp-banner {
    width: 530px;
    height: 530px;
}

.bzl-row .bzl-zp-banner img {
    display: block;
    width: auto;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.bzl-zp-init .bzl-head.has-error .bzl-label {
    color: #e3122a;
}

.bzl-zp-init .bzl-head-email.has-error .bzl-label {
    color: #e3122a;
}

.bzl-zp-init .bzl-head-email {
    position: relative;
    margin-top: 16px;
    margin-bottom: 26px;
}

.bzl-zp-init .bzl-load-anim div {
    top: 13px;
}

.bzl-zp-init .bzl-block-email, .bzl-zp-init .bzl-block-phone {
    margin-top: 55px !important;
    padding: 10px 5px;
    border-radius: 9px;
    font-size: 14px !important;
    border: 1px solid #42424252;
}

.bzl-zp-init .bzl-zp-footer {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.bzl-zp-form .bzl-to-pass {
    margin: auto 0;
    cursor: pointer;
}

.bzl-zp-form .bzl-code-boxes {
    display: flex;
    direction: ltr;
    justify-content: center;
    margin-bottom: 15px;
}

.bzl-zp-form .bzl-code-boxes input {
    box-sizing: border-box;
    height: 48px;
    width: 45px;
    border: 1px solid #80868a;
    border-radius: 5px;
    background-color: #fff;
    margin: auto 5px;
    padding: 5px;
    font-size: 20px;
    text-align: center;
}

.bzl-zp-form .bzl-expire .bzl-expire-counter {
    width: 35px;
}

.bzl-zp-form .bzl-code-footer {
    margin-bottom: 22px;
}

.bzl-zp-content .bzl-zp-form .bzl-pass-input {
    margin: 0 !important;
    color: #80868a;
    border-radius: 5px;
}

.bzl-zp-init .bzl-info-holder {
    margin-top: 25px;
    text-align: left;
}

.bzl-zp-init .bzl-info .bzl-desc {
    margin-top: 0;
}

.bzl-zp-init .bzl-info-holder input {
    width: 100%;
    height: 46px;
    color: #80868a;
    display: block;
    font-size: 13px;
    padding: 0 13px;
    line-height: 46px;
    border-radius: 5px;
    margin-bottom: 22px;
    font-family: inherit;
    outline: none !important;
    border: 1px solid #80868a;
    box-shadow: none !important;
    background: transparent !important;
}

.bzl-info-holder.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-zp-form.bzl-busy:after {
    border-radius: 0;
}

.bzl-zp-form .bzl-footer .bzl-abroad {
    position: absolute;
    top: 10px;
    right: 0;
}

.bzl-zp-form .bzl-abroad-back-wrap .bzl-abroad-back {
    position: relative;
    margin-top: 5px;
    top: 20px;
}

.bzl-zp-form .bzl-abroad-back-wrap .bzl-abroad-back i {
    display: none;
}

.bzl-zp-form .bzl-form-holder {
    position: relative;
}

.bzl-zp-form .bzl-forgot-wrap {
    position: absolute;
    bottom: -65px;
    right: 0;
}

.bzl-zp-init .bzl-phone-main .bzl-error {
    margin-top: 10px;
}

.bzl-zarinpal .bzl-error {
    margin-top: 5px !important;
    margin-right: 2px !important;
}

@media (max-width: 992px) {
    .bzl-zarinpal .bzl-zp-banner {
        display: none;
    }

    .bzl-zarinpal .bzl-zp-content {
        border-radius: 10px;
    }
}

.bzl-dg-content {
    border: 1px solid #e0e0e6;
    border-radius: 8px;
    padding: 32px;
}

.bzl-dg-logo {
    display: block;
    text-align: center;
}

.bzl-dg-logo img {
    width: 150px;
    height: auto;
    margin: 0 auto;
}

.bzl-dg-content .bzl-title {
    display: inline-block;
    color: #080a38;
    font-size: 19px;
    font-weight: 700;
    margin-top: 16px;
    text-align: right;
}

.bzl-dg-content .bzl-desc {
    margin: 16px 0;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}

.bzl-dg-content .bzl-input {
    display: block;
    width: 100%;
    padding: 8px 16px;
    color: #3f4064;
    font-size: 15px;
    font-weight: 400;
    border-radius: 8px;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #c3c3ce !important;
}

.bzl-dg-content .bzl-input::placeholder {
    opacity: 0;
    color: inherit;
}

.bzl-dg-content .bzl-head label {
    display: none;
}

.bzl-dg-content .bzl-footer {
    margin-top: 32px;
}

.bzl-dg-content .bzl-submit {
    position: relative;
    width: 100%;
    color: #ffffff;
    border-radius: 8px;
    background: #ef4056;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 10px 16px 10px 16px;
    outline: none !important;
}

.bzl-dg-content .bzl-error {
    margin: 0 5px;
    font-size: 12px;
    line-height: 26px;
    text-align: right;
}

.bzl-dg-content .bzl-rules {
    color: #3f4064;
    font-size: 11px;
    font-weight: 400;
    margin-top: 16px;
}

.bzl-dg-content .bzl-rules a {
    color: #008eb2;
}

.bzl-dg-content .bzl-rules p {
    margin: 0 !important;
}

.bzl-dg-content .bzl-dg-init .bzl-code-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 40px;
    margin-top: 16px;
    margin-bottom: 0;
    text-align: right;
}

.bzl-dg-content .bzl-dg-init .bzl-back {
    top: -58px;
    cursor: pointer;
    padding: 5px 15px;
    position: absolute;
}

.bzl-dg-content .bzl-dg-init .bzl-code-head {
    font-size: 13px;
    font-weight: 300;
    line-height: 26px;
    margin: 16px 0;
    text-align: right;
}

.bzl-dg-content .bzl-dg-init .bzl-code-input {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    padding: 8px 16px;
    color: #3f4064;
    border-radius: 8px;
    outline: none !important;
    box-shadow: none !important;
    text-align: center;
    letter-spacing: 15px;
    box-sizing: border-box;
    border: 1px solid #c3c3ce !important;
}

.bzl-dg-content .bzl-dg-init .bzl-to-pass {
    color: #19bfd3;
    font-size: 12px;
    font-weight: 700;
    margin-top: 16px;
    line-height: 26px;
    cursor: pointer;
    padding: 4px 16px;
    display: inline-block;
}

.bzl-arrow2 {
    border: solid #19bfd3;
    border-width: 0 2.5px 2.5px 0;
    display: inline-block;
    padding: 3px;
    border-radius: 2px;
    position: relative;
    left: -5px;
    top: 1px;
}

.bzl-arrow2.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.bzl-dg-content .bzl-dg-init .bzl-expire {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    padding: 8px 0;
    margin-top: 16px;
    margin-bottom: 24px;
    color: rgb(63, 64, 100);
}

.bzl-dg-content .bzl-dg-init .bzl-submit-code {
    position: relative;
    width: 100%;
    color: #ffffff;
    border-radius: 8px;
    background: #ef4056;
    border: none;
    box-shadow: none;
    outline: none !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 10px 16px 10px 16px;
}

.bzl-dg-init .bzl-resend {
    background: transparent !important;
    padding: 8px 0;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 24px;
    outline: none !important;
    box-shadow: none !important;
}

.bzl-dg-content .bzl-step-pass .bzl-code-title {
    text-align: right;
}

.bzl-dg-content .bzl-step-pass .bzl-submit-code {
    margin-top: 16px;
}

.bzl-dg-content .bzl-block-email, .bzl-dg-content .bzl-block-phone {
    margin-top: 25px !important;
}

.bzl-dg-content .bzl-step-pass .bzl-to-code {
    margin-top: 12px;
    display: inline-block;
    margin-bottom: 24px;
    padding: 4px 16px;
    color: #19BFD3;
}

.bzl-info-holder {
    margin-top: 22px;
}

.bzl-info-holder input {
    display: block;
    width: 100%;
    padding: 10px 16px;
    color: #3f4064;
    font-size: 15px;
    font-weight: 400;
    border-radius: 8px;
    margin-bottom: 20px;
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #c3c3ce !important;
}

.bzl-info-holder.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-dg-form.bzl-busy:after {
    border-radius: 0;
}

.bzl-dg-form .bzl-forgot-wrap .bzl-forgot {
    color: #19bfd3;
    font-size: 12px;
    font-weight: 700;
    margin-top: 16px;
    line-height: 26px;
    cursor: pointer;
    padding: 4px 16px;
    display: inline-block;
}

.bzl-dg-form .bzl-forgot-wrap .bzl-forgot:after {
    content: '';
    border: solid #19bfd3;
    border-width: 0 2.5px 2.5px 0;
    display: inline-block;
    padding: 3px;
    border-radius: 2px;
    position: relative;
    left: -5px;
    top: 1px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.bzl-dg-form .bzl-step-pass .bzl-to-code {
    margin-bottom: 0;
}

.bzl-dg-form .bzl-forgot-wrap {
    margin-bottom: 24px;
}

.bzl-dg-form .bzl-abroad-wrap .bzl-abroad {
    margin: 27px 0 7px;
}

.bzl-dg-form .bzl-abroad-back-wrap .bzl-abroad-back {
    top: 35px;
    right: 15px;
    cursor: pointer;
    padding: 5px 15px;
    position: absolute;
}

.bzl-rt-logo {
    display: block;
    text-align: center;
    margin-bottom: 75px;
}

.bzl-rt-logo img {
    width: 151px;
    height: auto;
}

.bzl-rt-content .bzl-rt-init {
    background-color: #fff;
    padding: 35px 40px 31px;
    border-radius: 4px;
    box-shadow: 0 4px 40px rgba(119, 132, 157, .1);
    -webkit-box-shadow: rgba(119, 132, 157, .1) 0 4px 40px;
}

.bzl-rt-init .bzl-title {
    margin-bottom: 37px;
    text-align: center;
    display: block;
    font-size: 19px;
    font-weight: 500;
    line-height: 38px;
    color: #53565d;
}

.bzl-rt-content form input {
    display: block;
    width: 100%;
    background-color: #f8f9fa;
    padding: 0 15px;
    height: 54px;
    line-height: 54px;
    color: #6a6a6a;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    margin-bottom: 20px;
    outline: none !important;
}

.bzl-rt-content form input.bzl-value {
    padding-right: 46px;
}

.bzl-rt-content form > div.bzl-head:before {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46px;
    height: 54px;
    position: absolute;
    display: inline-block;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: var(--bzl-icon-user);
}

.bzl-rt-content form input:focus {
    color: #53565d;
}

.bzl-rt-content form label {
    display: none !important;
}

.bzl-rt-content .bzl-submit {
    color: #fff;
    padding: 16px;
    display: block;
    font-size: 15px;
    margin-top: 25px;
    position: relative;
    text-align: center;
    background-color: #8ed557;
    width: 100%;
    border: none;
    outline: none !important;
    line-height: 22px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.bzl-rt-rules {
    font-size: 12px;
    text-align: center;
    color: #b3b3b3;
    direction: rtl;
    width: 90%;
    display: block;
    margin: 30px auto 0;
}

.bzl-rt-content .bzl-error {
    margin: -10px 5px 15px;
}

.bzl-rt-init .bzl-step-pass .bzl-back {
    position: absolute;
    bottom: -80px;
    right: -33px;
    opacity: .5;
    color: #6a6a6a;
    font-size: 13px;
    cursor: pointer;
    transition: all .3s;
}

.bzl-rt-init .bzl-step-pass .bzl-back .bzl-arrow {
    border-color: #6a6a6a !important;
    border-width: 0 1px 1px 0;
    margin-left: 5px;
    padding: 2.5px;
}

.bzl-rt-init .bzl-step-pass .bzl-back .bzl-arrow:before {
    content: unset;
}

.bzl-rt-init .bzl-step-pass .bzl-back:hover {
    opacity: 1;
    color: #4d535b;
    padding-right: 10px;
}

.bzl-rt-init .bzl-step-pass .bzl-code-title {
    margin-bottom: 37px;
    text-align: center;
    display: block;
    font-size: 19px;
    font-weight: 500;
    line-height: 38px;
    color: #53565d;
}

.bzl-rt-init .bzl-step-pass .bzl-submit-code {
    color: #fff;
    padding: 16px;
    display: block;
    font-size: 15px;
    margin-top: 25px;
    position: relative;
    text-align: center;
    background-color: #8ed557;
    width: 100%;
    border: none;
    outline: none !important;
    line-height: 22px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.bzl-rt-init .bzl-step-pass .bzl-pass-input,
.bzl-rt-init .bzl-step-pass .bzl-pass-one,
.bzl-rt-init .bzl-step-pass .bzl-pass-new {
    display: block;
    background-color: #f8f9fa;
    padding: 0 46px 0 15px;
    height: 54px;
    line-height: 54px;
    color: #6a6a6a;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    margin-bottom: 20px;
    outline: none !important;
    text-align: right;
}

.bzl-rt-init .bzl-step-pass .bzl-pass-input:focus,
.bzl-rt-init .bzl-step-pass .bzl-pass-one:focus {
    color: #53565d;
}

.bzl-rt-init .bzl-step-pass .bzl-pass-wrap {
    position: relative;
}

.bzl-rt-init .bzl-step-pass .bzl-pass-wrap:before {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 46px;
    height: 54px;
    position: absolute;
    display: inline-block;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: var(--bzl-icon-lock);
}

.bzl-rt-init .bzl-step-pass .bzl-code-head > span {
    display: none;
}

.bzl-rt-init .bzl-step-pass .bzl-code-head .bzl-code-phone {
    opacity: 0;
    display: block;
    position: absolute;
}

.bzl-rt-init .bzl-block-email {
    font-size: 14px;
    font-family: inherit;
}

.bzl-rt-init:is(.bzl-step-pass) .bzl-rt-rules {
    display: none;
}

.bzl-rt-init .bzl-step-code .bzl-back {
    position: absolute;
    bottom: -80px;
    right: -33px;
    opacity: .5;
    color: #6a6a6a;
    font-size: 13px;
    cursor: pointer;
    transition: all .3s;
}

.bzl-rt-init .bzl-step-code .bzl-back .bzl-arrow {
    border-color: #6a6a6a !important;
    border-width: 0 1px 1px 0;
    margin-left: 5px;
    padding: 2.5px;
}

.bzl-rt-init .bzl-step-code .bzl-back .bzl-arrow:before {
    content: unset;
}

.bzl-rt-init .bzl-step-code .bzl-back:hover {
    opacity: 1;
    color: #4d535b;
    padding-right: 10px;
}

.bzl-rt-init .bzl-step-code .bzl-submit-code {
    color: #fff;
    padding: 16px;
    display: block;
    font-size: 15px;
    margin-top: 25px;
    position: relative;
    text-align: center;
    background-color: #8ed557;
    width: 100%;
    border: none;
    outline: none !important;
    line-height: 22px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.bzl-rt-init .bzl-step-code .bzl-code-input {
    text-align: center;
    letter-spacing: 20px;
    margin-bottom: 7px;
    direction: ltr;
}

.bzl-rt-init .bzl-step-code .bzl-expire {
    text-align: left;
}

.bzl-rt-init .bzl-step-code .bzl-expire .bzl-expire-counter {
    font-size: 12px;
    font-weight: 700;
    color: #6a6a6a;
}

.bzl-rt-init .bzl-step-code .bzl-act {
    color: #6a6a6a;
    margin: 15px 0;
    font-size: 13px;
    cursor: pointer;
    text-align: right;
    transition: all .3s;
}

.bzl-rt-init .bzl-step-code .bzl-act:after {
    content: '';
    top: 1px;
    right: 5px;
    padding: 2.5px;
    margin-left: 5px;
    position: relative;
    transition: all .3s;
    display: inline-block;
    border: solid #6a6a6a;
    transform: rotate(130deg);
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(130deg);
}

.bzl-rt-init .bzl-step-code .bzl-act:hover:after {
    right: 10px;
}

.bzl-rt-init .bzl-step-code .bzl-code-footer .bzl-resend {
    font-size: 12px;
    font-weight: 700;
    color: #6a6a6a;
    padding: 0;
    text-align: left;
    outline: none !important;
    background: transparent !important;
}

.bzl-rt-init .bzl-step-code .bzl-code-title {
    margin-bottom: 37px;
    text-align: center;
    display: block;
    font-size: 19px;
    font-weight: 400;
    line-height: 38px;
    color: #53565d;
}

.bzl-rt-init .bzl-step-code .bzl-code-head span {
    display: block;
    color: #6a6a6a;
    font-size: 13px;
    text-align: center;
    margin-bottom: 30px;
}

.bzl-rt-init .bzl-step-code .bzl-code-head .bzl-code-phone {
    opacity: 0;
    z-index: -5;
    position: absolute;
}

.bzl-rt-init .bzl-step-pass .bzl-to-code {
    color: #6a6a6a;
    margin: 33px 0 15px;
    font-size: 13px;
    cursor: pointer;
    text-align: right;
    transition: all .3s;
}

.bzl-rt-init .bzl-step-pass .bzl-to-code:after {
    content: '';
    right: 5px;
    padding: 2.5px;
    margin-left: 5px;
    position: relative;
    transition: all .3s;
    display: inline-block;
    border: solid #6a6a6a;
    transform: rotate(130deg);
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(130deg);
}

.bzl-rt-init .bzl-step-pass .bzl-to-code:hover:after {
    right: 10px;
}

.bzl-rt-init .bzl-info .bzl-submit {
    margin-bottom: 0;
}

.bzl-rt-init .bzl-forgot {
    color: #6a6a6a;
    margin: 15px 0;
    font-size: 13px;
    cursor: pointer;
    text-align: right;
    line-height: 19px;
    transition: all .3s;
}

.bzl-rt-init .bzl-forgot:after {
    content: '';
    top: 1px;
    right: 5px;
    padding: 2.5px;
    margin-left: 5px;
    position: relative;
    transition: all .3s;
    display: inline-block;
    border: solid #6a6a6a;
    transform: rotate(130deg);
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(130deg);
}

.bzl-rt-init .bzl-forgot:hover:after {
    right: 10px;
}

.bzl-info-holder.bzl-loading .bzl-load {
    opacity: 1;
    visibility: unset;
}

.bzl-info-holder.bzl-loading .bzl-load .bzl-load-anim {
    top: 3px;
}

.bzl-rt-forgot .bzl-head {
    position: relative;
}

.bzl-rt-forgot .bzl-head input {
    padding-right: 46px;
}

.bzl-hb .bzl-hb-in {
    display: flex;
    width: fit-content;
    transition: 0.3s all;
    outline: none !important;
    text-decoration: none !important;
}

.bzl-hb .bzl-hb-in svg {
    display: inline-block;
    margin-left: 10px;
}

.bzl-hb .bzl-hb-in i {
    display: inline-block;
    margin: auto 0;
}

.bzl-hb .bzl-hb-in i.bzl-right {
    margin: auto 0 auto 10px;
}

.bzl-hb .bzl-hb-in span {
    margin: auto 0;
    display: inline-block;
}

.bzl-hb .bzl-hb-out {
    display: flex;
    cursor: pointer;
    width: fit-content;
    transition: 0.3s all;
    outline: none !important;
    text-decoration: none !important;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.bzl-hb .bzl-hb-out svg {
    display: inline-block;
    margin-left: 10px;
}

.bzl-hb .bzl-hb-out i {
    display: inline-block;
    margin: auto 0;
}

.bzl-hb .bzl-hb-out i.bzl-right {
    margin: auto 0 auto 10px;
}

.bzl-hb .bzl-hb-out span {
    margin: auto 0;
    display: inline-block;
}

.bzl-hb:hover .bzl-hb-menu {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}

.bzl-hb-menu {
    left: 0;
    z-index: 500;
    width: 211px;
    top: -webkit-calc(100% + 10px);
    top: -moz-calc(100% + 10px);
    top: calc(100% + 10px);
    overflow: hidden;
    background: #fff;
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 4px 8px rgb(0 0 0 / 12%);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.bzl-hb-menu ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.bzl-hb-menu ul li a {
    display: flex;
    color: #3f4064;
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.3s all;
}

.bzl-hb-menu ul li:last-child a {
    margin-bottom: 0 !important;
}

.bzl-hb-menu ul li a:hover {
    background-color: #f0f0f1;
}

.bzl-hb-menu ul li a svg {
    width: 24px;
    height: auto;
}

.bzl-hb-menu ul li a i {
    width: 24px;
    margin: auto;
    font-size: 22px;
    text-align: center;
}

.bzl-hb-menu ul li a span {
    display: block;
    padding: 8px 20px 8px 4px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    /*border-bottom: 1px solid #f0f0f1;*/
}

.bzl-hb-toggle {
    cursor: pointer;
}

.bzl-open {
    display: block;
}

.bzl-hb .bzl-hb-toggle .bzl-hb-caret {
    margin: auto 11px auto 0;
}

.bzl-hb-caret {
    padding: 3px;
    border: solid black;
    display: inline-block;
    transform: rotate(45deg);
    border-width: 0 1.5px 1.5px 0;
    -webkit-transform: rotate(45deg);
}
/* ---- additions on top of the reference stylesheet ---- */
.bzl-zarinpal .bzl-zp-content > a { display: inline-block; }
.bzl-zarinpal .bzl-zp-banner img { object-fit: cover; }
.bzl-dg-content { background: #fff; }
.bzl-rt-content { max-width: 460px; margin: 0 auto; }
.bzl-submit, .bzl-submit-code { cursor: pointer; font-family: inherit; }
.bzl-input, .bzl-code-input, .bzl-pass-input, .bzl-pass-new { font-family: inherit; box-sizing: border-box; }
.bzl-load { display: flex; align-items: center; justify-content: center; visibility: hidden; }
.bzl-loading .bzl-submit, .bzl-loading .bzl-submit-code { color: transparent !important; pointer-events: none; }
.bzl-loading .bzl-load { opacity: 1; visibility: visible; }
.bzl-load-anim div { background: currentColor; }
.bzl-submit .bzl-load-anim div, .bzl-submit-code .bzl-load-anim div { background: #fff; }
.bzl-zp-init .bzl-submit .bzl-load-anim div { background: #000; }
.bzl-google-btn { text-decoration: none !important; }
.bzl-google-btn svg { width: 22px; height: auto; margin-left: 10px; }
.bzl-expire { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.bzl-expire-counter { direction: ltr; display: inline-block; }
.bzl-resend[hidden] { display: none !important; }
.bzl-resend.is-on { display: block; }
.bzl-code-boxes input { font-family: inherit; }
.bzl-code-boxes input.is-filled { border-color: #19bfd3 !important; }
.bzl-back, .bzl-to-pass, .bzl-to-code, .bzl-forgot, .bzl-act, .bzl-abroad, .bzl-abroad-back, .bzl-resend { cursor: pointer; background: none; border: none; font-family: inherit; }
.bzl-step-pass .bzl-pass-field { position: relative; }
.bzl-eye { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; display: flex; align-items: center; }
.bzl-eye svg { width: 24px; height: 24px; }
.bzl-eye { color: #aaa; }
.bzl-eye:hover { color: #666; }
.bzl-eye.active { color: #007bff; }
/* jalali date selects (custom "date" fields) */
.bzl-birthday { display: flex; gap: 6px; align-items: center; margin-bottom: 20px; padding: 5px; border: 1px solid #c3c3ce !important; border-radius: 7px; direction: rtl; }
.bzl-birthday select.bzl-input { flex: 1; height: 40px !important; min-height: 0; margin: 0 !important; padding: 0 8px !important; border: none !important; background: transparent !important; text-align: center; font-size: 14px; }
.bzl-birthday select.bzl-input:nth-child(3) { flex: 1.6; }
.bzl-birthday .bzl-bd-arrow { color: #c3c3ce; }
.bzl-protected-msg { margin: 0 0 18px; text-align: center; font-size: 15px; }
.bzl-protected { max-width: 920px; margin: 0 auto; }
.bzl-info-holder select { display: block; width: 100%; }
.bzl-roles .bzl-role-item label { cursor: pointer; }
.bzl-step-done { text-align: center; padding: 30px 0 10px; }
.bzl-step-done svg { color: #00a86b; }
.bzl-step-done p { margin: 14px 0 0; font-size: 15px; font-weight: 600; }
.bzl-modal { align-items: center; }
.bzl-modal.open { display: flex; }
.bzl-modal .bzl-modal-box { margin: auto; max-height: 100vh; overflow: auto; padding: 20px; }
.bzl-modal--zarinpal .bzl-modal-box { width: auto; }
.bzl-modal--digikala .bzl-modal-box { width: 400px; max-width: 100%; }
.bzl-modal .bzl-modal-close { color: #fff; }
.bzl-modal--digikala .bzl-modal-close, .bzl-modal--rtl .bzl-modal-close { color: rgb(109,109,109); }
body.bzl-modal-open { overflow: hidden; }
.bzl-modal .bzl-popup-page { background: #fff; border-radius: 12px; padding: 24px; width: min(100vw - 40px, 960px); text-align: right; }
.bzl-checkout-login { margin-bottom: 28px; }
.bzl-checkout-note { margin: 0 0 12px; font-size: 14px; }
.bzl-zp-form.bzl-compact .bzl-zp-banner { display: none; }
.bzl-zarinpal.bzl-compact .bzl-zp-content { border-radius: 10px; max-width: 100% !important; width: 100%; height: auto; }
.bzl-zarinpal.bzl-compact .bzl-row { width: 100%; }
.bzl-digikala.bzl-compact .bzl-dg-content, .bzl-rtl.bzl-compact .bzl-rt-content { max-width: 100%; width: 100%; }
.bzl-logged { text-align: center; }
.bzl-logged a { display: inline-block; margin-top: 10px; }
/* values measured on the live demo pages (they differ slightly from the shipped sheet) */
.bzl-zarinpal .bzl-zp-content .bzl-init .bzl-title { font-weight: 600; line-height: 36px; }
.bzl-zarinpal .bzl-zp-content .bzl-init .bzl-desc, .bzl-zarinpal .bzl-zp-content .bzl-init .bzl-desc p { font-size: 15px; line-height: 25px; }
.bzl-zarinpal .bzl-zp-init .bzl-step--start .bzl-submit { font-size: 13px; display: inline-block; }
/* widget widths the demo pages set in Elementor */
.bzl-digikala { width: 400px; max-width: 100%; margin-left: auto; margin-right: auto; }
.bzl-rtl { width: 460px; max-width: 100%; margin-left: auto; margin-right: auto; }
.bzl-digikala.bzl-compact, .bzl-rtl.bzl-compact { width: 100%; }
.bzl-dg-content .bzl-dg-init .bzl-title { font-weight: 600; }
.bzl-dg-content .bzl-dg-init .bzl-desc, .bzl-dg-content .bzl-dg-init .bzl-desc p { font-size: 13px; line-height: 26px; }
.bzl-dg-content .bzl-input { font-size: 16px; }
.bzl-dg-content .bzl-rules, .bzl-dg-content .bzl-rules p, .bzl-dg-content .bzl-rules a { font-size: 12px; }
.bzl-rt-content .bzl-submit { font-weight: 300; }
/* phone-only mode types left-to-right like the reference; mixed mode stays rtl */
.bzl-identifier { direction: inherit; text-align: start; }
.bzl-identifier.bzl-ltr { direction: ltr; text-align: left; }
.bzl-zp-init .bzl-identifier { direction: ltr; text-align: left; }
/* zarinpal: code / password steps (the reference sheet only styles the first step here) */
.bzl-zp-init .bzl-back { display: inline-flex; align-items: center; gap: 8px; color: #187ff7; font-size: 13px; margin: 0 0 14px; }
.bzl-zp-init .bzl-back .bzl-arrow { border-color: #187ff7; padding: 3px; margin-left: 2px; }
.bzl-zp-init .bzl-back .bzl-arrow:before { content: none; }
.bzl-zp-init .bzl-code-title { margin: 0 0 6px; color: #000; font-size: 18px; font-weight: 700; }
.bzl-zp-init .bzl-code-head { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; color: #424242; font-size: 14px; }
.bzl-zp-init .bzl-code-head .bzl-code-phone { direction: ltr; font-weight: 700; }
.bzl-zp-init .bzl-code-boxes input { font-size: 20px; }
.bzl-zp-init .bzl-expire { margin: 6px 0 16px; color: #424242; }
.bzl-zp-init .bzl-code-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bzl-zp-init .bzl-resend { color: #187ff7; font-size: 13px; padding: 0; }
.bzl-zp-init .bzl-to-pass, .bzl-zp-init .bzl-to-code, .bzl-zp-init .bzl-forgot { display: inline-block; margin-top: 8px; color: #187ff7; font-size: 13px; cursor: pointer; }
.bzl-zp-init .bzl-forgot-wrap { margin-top: 10px; }
.bzl-zp-init .bzl-pass-field { margin: 0 0 20px; }
.bzl-zp-init .bzl-pass-field .bzl-pass-input { width: 100%; height: 46px; margin: 0; padding: 0 44px 0 13px; direction: ltr; text-align: left; font-size: 13px; color: #80868a; background: transparent; border: 1px solid #80868a; border-radius: 5px; outline: none !important; }
.bzl-zp-init .bzl-pass-field .bzl-pass-input:focus { border-color: #0170b9; }
.bzl-zp-init .bzl-info-holder .bzl-submit { width: 100%; border-radius: 5px; }
/* digikala / rtl: shared bits the reference leaves to the theme */
.bzl-dg-init .bzl-code-head, .bzl-rt-init .bzl-code-head { color: #6a6a6a; font-size: 13px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.bzl-dg-init .bzl-code-head .bzl-code-phone, .bzl-rt-init .bzl-code-head .bzl-code-phone { direction: ltr; font-weight: 700; }
.bzl-dg-init .bzl-back { position: relative; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 10px; color: #19bfd3; font-size: 13px; }
.bzl-dg-init .bzl-back .bzl-arrow { border-color: #19bfd3; padding: 3px; } .bzl-dg-init .bzl-back .bzl-arrow:before { content: none; }
.bzl-dg-init .bzl-code-boxes { display: flex; direction: ltr; justify-content: center; gap: 8px; margin-bottom: 15px; }
.bzl-dg-init .bzl-code-boxes input, .bzl-rt-init .bzl-code-boxes input { width: 45px; height: 48px; padding: 5px; text-align: center; font-size: 20px; border: 1px solid #c3c3ce; border-radius: 8px; background: #fff; outline: none !important; }
.bzl-rt-init .bzl-code-boxes { display: flex; direction: ltr; justify-content: center; gap: 8px; margin-bottom: 15px; }
.bzl-rt-init .bzl-code-boxes input { background: #f8f9fa; border-color: transparent; border-radius: 4px; height: 54px; width: 48px; margin: 0; }
.bzl-rt-init .bzl-back { position: relative; bottom: auto; right: auto; opacity: 1; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; }
.bzl-rt-init .bzl-expire { color: #6a6a6a; font-size: 12px; margin-bottom: 10px; }
.bzl-rt-init .bzl-pass-field .bzl-pass-input { width: 100%; }
.bzl-dg-init .bzl-pass-field .bzl-pass-input { width: 100%; text-align: right; padding-left: 44px; }
.bzl-dg-init .bzl-code-footer, .bzl-rt-init .bzl-code-footer { display: flex; flex-direction: column; gap: 6px; }
.bzl-rt-init .bzl-resend { display: block; width: 100%; text-align: center; }
/* steps after the first one replace the intro block, like the reference */
[data-bzl]:not([data-step="start"]) .bzl-init { display: none; }
[data-bzl]:not([data-step="start"]) .bzl-zp-init .bzl-form-holder { margin-top: 40px; }
.bzl-dg-content .bzl-input { line-height: 32px; }
.bzl-dg-content .bzl-dg-init .bzl-step-code .bzl-back, .bzl-dg-content .bzl-dg-init .bzl-step-pass .bzl-back { position: relative; top: 0; padding: 0; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 6px; color: #19bfd3; font-size: 13px; }
.bzl-dg-content .bzl-dg-init .bzl-step-code .bzl-code-title { margin-top: 4px; }
.bzl-rt-init .bzl-step-code .bzl-back, .bzl-rt-init .bzl-step-pass .bzl-back { position: relative; bottom: auto; right: auto; opacity: 1; margin: 0 0 12px; display: inline-flex; align-items: center; gap: 6px; color: #6a6a6a; font-size: 13px; }
.bzl-rt-init .bzl-step-code .bzl-code-head .bzl-code-phone, .bzl-rt-init .bzl-step-pass .bzl-code-head .bzl-code-phone { opacity: 1; position: static; z-index: auto; display: inline; }
.bzl-rt-init .bzl-step-code .bzl-code-head span { display: inline; margin-bottom: 0; }
.bzl-rt-init .bzl-step-code .bzl-code-head { justify-content: center; margin-bottom: 30px; }
.bzl-rt-init .bzl-step-pass .bzl-code-head { justify-content: center; margin-bottom: 20px; }
.bzl-zp-init .bzl-pass-field .bzl-pass-input { direction: rtl; text-align: right; padding: 0 13px 0 44px; }
.bzl-zp-init .bzl-step-pass .bzl-to-code { display: block; margin-top: 14px; }
.bzl-zp-init .bzl-step-pass .bzl-submit, .bzl-zp-init .bzl-step-code .bzl-submit, .bzl-zp-init .bzl-step--newpass .bzl-submit { display: inline-block; }
.bzl-dg-init .bzl-step-pass .bzl-to-code, .bzl-rt-init .bzl-step-pass .bzl-to-code { display: block; }
/* header button */
.bzl-hb { position: relative; display: inline-block; }
.bzl-hb .bzl-hb-in, .bzl-hb .bzl-hb-out { align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; font-size: 14px; }
.bzl-hb .bzl-hb-menu li a { align-items: center; }
.bzl-hb .bzl-hb-menu ul li a span { padding-right: 10px; }
@media (max-width: 992px) { .bzl-zarinpal .bzl-row { width: 100%; } .bzl-zarinpal .bzl-zp-content { max-width: 100% !important; width: 100%; height: auto; } }
@media (max-width: 480px) { .bzl-dg-content { padding: 24px 18px; } .bzl-rt-init { padding: 28px 20px 24px; } .bzl-zp-content { padding: 22px 18px; } }

/* ==== BlizzLogin polish: the default look is untouched at rest (colours, sizes, borders, shadows);
   only interaction states, motion and real bugs are improved ==== */
.bzl-zarinpal, .bzl-digikala, .bzl-rtl { -webkit-tap-highlight-color: transparent; }
[data-bzl] .bzl-input, [data-bzl] .bzl-pass-input, [data-bzl] .bzl-code-boxes input { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
/* wrong code: boxes flash red and shake once */
[data-bzl].is-error .bzl-code-boxes input { border-color: #e3122a !important; }
[data-bzl].is-error .bzl-code-boxes { animation: bzl-shake .35s ease; }
/* buttons: gentle hover / press */
[data-bzl] .bzl-submit, [data-bzl] .bzl-submit-code { transition: transform .15s ease, filter .2s ease; }
[data-bzl] .bzl-submit:hover, [data-bzl] .bzl-submit-code:hover { filter: brightness(1.05); transform: translateY(-1px); }
[data-bzl] .bzl-submit:active, [data-bzl] .bzl-submit-code:active { transform: translateY(0) scale(.985); }
[data-bzl] .bzl-submit:focus-visible, [data-bzl] .bzl-submit-code:focus-visible { outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }
[data-bzl] .bzl-submit:disabled:hover, [data-bzl] .bzl-submit-code:disabled:hover { transform: none; filter: none; }
/* links */
[data-bzl] .bzl-resend:hover, [data-bzl] .bzl-to-pass:hover, [data-bzl] .bzl-to-code:hover, [data-bzl] .bzl-forgot:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-bzl] .bzl-back { transition: opacity .2s ease; }
[data-bzl] .bzl-back:hover { opacity: .75; }
/* error text fades in */
[data-bzl] .bzl-error.is-visible { animation: bzl-in .22s ease; }
/* bug fixes: zarinpal banner of any ratio stays inside its square, logo stays logo-sized */
.bzl-zarinpal .bzl-zp-banner { overflow: hidden; }
.bzl-zarinpal .bzl-zp-banner img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bzl-zarinpal .bzl-zp-content > a img, .bzl-zarinpal .bzl-zp-content > img { max-width: 150px; max-height: 64px; width: auto; height: auto; }
@media (min-width: 993px) { .bzl-zarinpal .bzl-zp-content { width: 383px; } } /* reference width on every step */
/* bug fix: forms fit inside the popup (no sideways scroll) */
.bzl-modal .bzl-digikala, .bzl-modal .bzl-rtl { width: 100%; }
.bzl-modal .bzl-dg-content { width: 100%; max-width: 100%; }
/* popup: dimmed, lightly blurred page behind; only the form card is visible (no white sheet, also for a popup page) */
.bzl-modal { background-color: rgba(14, 14, 26, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bzl-modal .bzl-modal-box { background: transparent; box-shadow: none; overflow: visible; }
.bzl-modal .bzl-popup-page { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.bzl-modal .bzl-modal-box.bzl-modal-box--page { width: auto !important; max-width: calc(100vw - 32px); padding: 20px 0; }
.bzl-modal .bzl-popup-page .elementor-section, .bzl-modal .bzl-popup-page .e-con { background-color: transparent; }
/* close button: a quiet round button inside the card's top corner */
.bzl-modal .bzl-modal-box .bzl-modal-close { position: absolute; top: 14px; left: 14px; right: auto; bottom: auto; z-index: 40; display: grid; place-items: center;
  width: 34px !important; height: 34px !important; min-width: 0; min-height: 0; max-width: none; padding: 0 !important; margin: 0; text-transform: none; letter-spacing: 0;
  border: 0 !important; border-radius: 50% !important; background: #f2f2f6 !important; color: #55556a; opacity: 1; cursor: pointer; font: inherit; line-height: 1; box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease; }
.bzl-modal .bzl-modal-box .bzl-modal-close svg { width: 17px; height: 17px; display: block; stroke-width: 2.25; }
.bzl-modal .bzl-modal-box .bzl-modal-close:hover { background: #e6e6ee !important; color: #1f1f2b; }
.bzl-modal .bzl-modal-box .bzl-modal-close:focus-visible { outline: 2px solid #8b83ff; outline-offset: 2px; }
.bzl-modal .bzl-modal-box > .bzl-modal-close:not(.is-on-card) { top: 0; left: 0; }
/* texts the form prints outside its card (rtl footer) sit on the dark overlay in the popup: keep them readable */
.bzl-modal .bzl-rt-rules, .bzl-modal .bzl-rt-rules p, .bzl-modal .bzl-rt-rules a { color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* info step: the field with a problem gets a red border and its own message */
[data-bzl] .bzl-field.has-error .bzl-input, [data-bzl] .bzl-birthday.has-error { border-color: #e3122a !important; }
[data-bzl] .bzl-field-err { display: block; margin: 6px 4px 0; color: #c8102e; font-size: 12.5px; line-height: 1.6; text-align: right; animation: bzl-in .2s ease; }
[data-bzl] .bzl-field.has-error { margin-bottom: 14px; }
/* success: a check that draws itself, the message, and a calm "taking you there" bar */
[data-bzl] .bzl-step-done { text-align: center; padding: 22px 0 6px; }
[data-bzl] .bzl-expire-counter:empty { display: none; }

/* ================= فرم 1 (modern): clean card, soft inputs, button that turns solid when ready ================= */
.bzl-modern { --md-ac: #1a6dff; --md-ac-top: var(--md-ac); --md-ring: color-mix(in srgb, var(--md-ac) 16%, transparent); --md-soft: color-mix(in srgb, var(--md-ac) 17%, #fff); --md-soft-ink: color-mix(in srgb, var(--md-ac) 88%, #000); --md-ink: #101828; --md-mute: #667085; --md-faint: #98a2b3; --md-field: #fff; --md-field-h: #fff; --md-border: rgba(0, 0, 0, .23); --md-ease: cubic-bezier(.16, 1, .3, 1); direction: rtl; text-align: center; }
.bzl-modern .bzl-md-content { position: relative; max-width: 420px; margin: 0 auto; padding: 40px 34px 28px; background: #fff; border-radius: 28px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 64px -20px rgba(16, 24, 40, .22); box-sizing: border-box; }
.bzl-modern .bzl-md-content.is-morph { overflow: hidden; transition: height .4s var(--md-ease); }
.bzl-modern .bzl-md-logo, .bzl-modern .bzl-logo-wrap { display: flex; justify-content: center; margin: 0 auto 26px; }
.bzl-modern .bzl-md-logo img, .bzl-modern .bzl-logo-wrap img { max-height: 46px; max-width: 170px; width: auto; height: auto; }
.bzl-modern .bzl-init .bzl-title { display: block; margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.55; letter-spacing: -.2px; color: var(--md-ink); }
.bzl-modern .bzl-init .bzl-desc p { margin: 0 0 26px; font-size: 13.5px; line-height: 1.9; color: var(--md-mute); }
.bzl-modern:not([data-step="start"]) .bzl-init { display: none; }
.bzl-modern .bzl-label { display: none !important; }
.bzl-modern .bzl-input-wrap { position: relative; }
/* fields: soft grey, white with a ring on focus */
.bzl-modern .bzl-input, .bzl-modern .bzl-pass-input, .bzl-modern .bzl-code-input, .bzl-modern .bzl-info-fields select { width: 100%; height: 56px; margin: 0; padding: 0 18px; border: 1px solid var(--md-border) !important; border-radius: 14px !important; background: #fff !important; color: var(--md-ink); font-size: 16px; font-family: inherit; box-shadow: none; outline: none; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.bzl-modern .bzl-input:hover, .bzl-modern .bzl-pass-input:hover, .bzl-modern .bzl-info-fields select:hover { border-color: rgba(0, 0, 0, .55) !important; }
.bzl-modern .bzl-input:focus, .bzl-modern .bzl-pass-input:focus, .bzl-modern .bzl-code-input:focus, .bzl-modern .bzl-info-fields select:focus { border-color: var(--md-ac) !important; box-shadow: inset 0 0 0 1px var(--md-ac) !important; }
.bzl-modern .bzl-identifier { direction: ltr; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: 1px; }
.bzl-modern .bzl-input::placeholder, .bzl-modern .bzl-pass-input::placeholder { color: #a7adb8; font-weight: 400; opacity: 1; }
.bzl-modern .bzl-identifier::placeholder { letter-spacing: 1.5px; }
.bzl-modern .bzl-info-fields .bzl-field, .bzl-modern .bzl-info-fields .bzl-birthday { margin-bottom: 12px; }
.bzl-modern .bzl-info-fields .bzl-input { text-align: right; }
.bzl-modern .bzl-info-title { margin: 0 0 18px; font-size: 18px; font-weight: 800; color: var(--md-ink); }
/* main button */
.bzl-modern .bzl-submit { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin: 18px 0 0; padding: 0 16px; border: 0; border-radius: 14px; background: var(--md-soft) !important; background-image: none !important; color: var(--md-soft-ink) !important; font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: none; transition: background-color .25s, color .25s, box-shadow .25s, transform .15s; }
.bzl-modern .bzl-submit.is-ready { background: var(--md-ac) !important; background-image: none !important; color: #fff !important; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--md-ac) 70%, transparent); }
.bzl-modern .bzl-submit.is-ready:hover { filter: brightness(1.06); }
.bzl-modern .bzl-submit:active { transform: translateY(0) scale(.985); }
/* code step */
.bzl-modern .bzl-step--code, .bzl-modern .bzl-step--password { display: none; flex-direction: column; }
.bzl-modern .bzl-step--code.is-active, .bzl-modern .bzl-step--password.is-active { display: flex; }
.bzl-modern .bzl-code-title { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.2px; color: var(--md-ink); }
.bzl-modern .bzl-code-head { margin: 0 0 6px; font-size: 13.5px; line-height: 1.9; color: var(--md-mute); }
.bzl-modern .bzl-code-phone { font-weight: 800; color: var(--md-ink); direction: ltr; unicode-bidi: isolate; }
.bzl-modern .bzl-code-boxes { display: flex; justify-content: center; gap: 12px; margin: 24px 0 6px; direction: ltr; }
.bzl-modern .bzl-code-boxes input { width: 60px; height: 68px; margin: 0; padding: 0; border: 1.5px solid color-mix(in srgb, var(--md-ac) 22%, #e4e7ec) !important; border-radius: 16px !important; background: #fff !important; color: var(--md-ink); font-size: 24px; font-weight: 800; text-align: center; box-shadow: none; outline: none; caret-color: var(--md-ac); transition: border-color .2s, box-shadow .2s, transform .15s; }
.bzl-modern .bzl-code-boxes input:focus { border-color: color-mix(in srgb, var(--md-ac) 80%, #101828) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-ac) 14%, transparent) !important; }
.bzl-modern .bzl-code-boxes input.is-filled { border-color: color-mix(in srgb, var(--md-ac) 55%, #d0d5dd) !important; animation: bzl-md-tick .22s var(--md-ease); }
.bzl-modern .bzl-code-input { margin-top: 20px; direction: ltr; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 8px; }
.bzl-modern .bzl-expire { justify-content: center; min-height: 24px; margin: 14px 0 0; font-size: 12.5px; color: var(--md-faint); }
.bzl-modern .bzl-expire-time { color: var(--md-mute); }
.bzl-modern .bzl-expire .bzl-resend { color: var(--md-ac); font-weight: 800; font-size: 13px; transition: opacity .2s; }
.bzl-modern .bzl-expire .bzl-resend:hover { opacity: .8; text-decoration: none; }
.bzl-modern .bzl-code-footer { display: block; }
.bzl-modern .bzl-step .bzl-back { order: 99; display: inline-flex; align-self: center; align-items: center; justify-content: center; gap: 6px; margin: 16px auto 0; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: #475467; cursor: pointer; transition: background-color .2s, color .2s; }
.bzl-modern .bzl-step .bzl-back:hover { background: var(--md-field); color: var(--md-ink); text-decoration: none; }
.bzl-modern .bzl-step .bzl-back .bzl-arrow { display: none; }
.bzl-modern .bzl-to-pass, .bzl-modern .bzl-to-code, .bzl-modern .bzl-forgot { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--md-ac); }
.bzl-modern .bzl-error { margin: 10px 0 0; font-size: 12.5px; color: #d92d20; text-align: center; }
.bzl-modern .bzl-pass-desc { font-weight: 800; color: var(--md-ink); }
.bzl-modern.is-error .bzl-step.is-active .bzl-code-boxes, .bzl-modern.is-error .bzl-step.is-active .bzl-input-wrap { animation: bzl-md-shake .42s ease; }
.bzl-modern.is-error .bzl-step.is-active .bzl-code-boxes input { border-color: #f04438 !important; }
/* footer note + rules */
.bzl-modern .bzl-md-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 12px; color: var(--md-faint); }
.bzl-modern .bzl-md-note .bzl-ic { width: 15px; height: 15px; color: #12b76a; }
.bzl-modern:not([data-step="start"]) .bzl-md-note { display: none; }
.bzl-modern .bzl-md-rules { margin: 14px -6px 0; padding-top: 14px; border-top: 1px solid #f2f4f7; font-size: 11.5px; line-height: 1.9; color: var(--md-faint); }
.bzl-modern .bzl-md-rules a { color: var(--md-mute); text-decoration: underline; text-underline-offset: 3px; }
.bzl-modern .bzl-google-line p { margin: 18px 0 10px; font-size: 12.5px; color: var(--md-faint); }
.bzl-modern .bzl-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border: 1.5px solid #eaecf0; border-radius: 16px; color: var(--md-ink); font-weight: 700; transition: background-color .2s; }
.bzl-modern .bzl-google-btn:hover { background: var(--md-field); }
/* welcome: green circle, check draws itself, two soft rings spread out, message rises */
.bzl-modern .bzl-step--done { padding: 14px 0 4px; }
.bzl-modern[data-bzl] .bzl-done-ic { position: relative; width: 86px; height: 86px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ecfdf3, #d1fadf); color: #12b76a; animation: bzl-md-done-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.bzl-modern .bzl-done-ic::before, .bzl-modern .bzl-done-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(18, 183, 106, .35); animation: bzl-md-ring 1.2s ease-out .3s both; }
.bzl-modern .bzl-done-ic::after { animation-delay: .55s; }
.bzl-modern[data-bzl] .bzl-done-ic svg { width: 46px; height: 46px; }
.bzl-modern .bzl-done-c { display: none; }
.bzl-modern[data-bzl] .bzl-done-k { stroke-width: 4; stroke-dasharray: 34; stroke-dashoffset: 34; animation: bzl-draw .42s cubic-bezier(.65, 0, .35, 1) .28s forwards; }
.bzl-modern[data-bzl] .bzl-step-done .bzl-done-msg { margin: 20px 0 0; font-size: 19px; font-weight: 900; line-height: 1.7; color: var(--md-ink); animation: bzl-md-up .5s cubic-bezier(.16, 1, .3, 1) .38s both; }
.bzl-modal.bzl-modal--modern.open .bzl-modal-box .bzl-modern .bzl-step-done .bzl-done-msg { animation: bzl-md-up .5s cubic-bezier(.16, 1, .3, 1) .38s both !important; }
@keyframes bzl-md-done-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes bzl-md-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.85); } }
@keyframes bzl-md-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bzl-modern[data-step="done"] .bzl-md-rules { display: none; }
/* page behind any open popup stays still (some themes scroll <html>, not <body>) */
html.bzl-lock, html.bzl-lock body, body.bzl-modal-open { overflow: hidden !important; }
.bzl-modal { overscroll-behavior: contain; }
/* the X inside the فرم 1 card */
.bzl-modal.bzl-modal--modern .bzl-modal-box .bzl-md-content > .bzl-modal-close { position: absolute !important; z-index: 3; margin: 0 !important; }
.bzl-modern[data-bzl] .bzl-submit:disabled, .bzl-modern[data-bzl] .bzl-submit-code:disabled { opacity: 1 !important; }
.bzl-modern[data-bzl] .bzl-step.bzl-loading .bzl-submit, .bzl-modern[data-bzl] .bzl-step.bzl-loading .bzl-submit.is-ready, .bzl-modern[data-bzl] .bzl-step.bzl-loading .bzl-submit-code { color: transparent !important; }
/* the card's top stays put; a taller step only grows downwards (centring made it jump up) */
.bzl-modal.bzl-modal--modern.open { align-items: flex-start !important; padding: max(24px, 11vh) 12px 24px !important; overflow-y: auto; }
/* steady card: the logo keeps its box before the image loads (no jump when it arrives) */
.bzl-modern .bzl-md-logo, .bzl-modern .bzl-logo-wrap { height: 46px; align-items: center; }
.bzl-modern .bzl-md-logo img, .bzl-modern .bzl-logo-wrap img { max-height: 46px; }
/* loading: a small, smooth ring instead of the big dots */
.bzl-modern[data-bzl] .bzl-submit .bzl-load { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; }
.bzl-modern[data-bzl] .bzl-submit .bzl-load-anim { position: relative; width: 22px !important; height: 22px !important; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bzl-md-spin .7s linear infinite; }
.bzl-modern[data-bzl] .bzl-submit:not(.is-ready) .bzl-load-anim { border-color: color-mix(in srgb, var(--md-ac) 25%, transparent); border-top-color: var(--md-ac); }
.bzl-modern[data-bzl] .bzl-submit .bzl-load-anim div { display: none !important; }
@keyframes bzl-md-spin { to { transform: rotate(360deg); } }
.bzl-modal.bzl-modal--modern.open .bzl-modal-box .bzl-modern .bzl-step.bzl-loading .bzl-load-anim { animation: bzl-md-spin .7s linear infinite !important; }
/* step change: slides in from the reading direction, back = the other way */
.bzl-modern .bzl-step.is-entering { animation: bzl-md-in .42s var(--md-ease) both; }
.bzl-modern .bzl-step.is-entering.is-back { animation-name: bzl-md-in-back; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input { animation: bzl-md-pop .5s var(--md-ease) both; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(1) { animation-delay: .06s; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(2) { animation-delay: .1s; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(3) { animation-delay: .14s; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(4) { animation-delay: .18s; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(5) { animation-delay: .22s; }
.bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input:nth-child(6) { animation-delay: .26s; }
@keyframes bzl-md-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes bzl-md-in-back { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes bzl-md-pop { from { opacity: 0; transform: translateY(10px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes bzl-md-tick { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes bzl-md-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
/* the popup around فرم 1: page behind blurred, the card springs in */
.bzl-modal--modern { background-color: rgba(16, 18, 40, .35); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); overscroll-behavior: contain; }
.bzl-modal--modern .bzl-modal-box { width: min(440px, calc(100vw - 24px)); background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: auto; }
.bzl-modal--modern.open .bzl-modal-box { animation: none; }
.bzl-modal--modern .bzl-md-content { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 32px 80px -24px rgba(10, 12, 40, .45); }
.bzl-modal--modern.is-js { opacity: 0; transition: opacity .24s ease; }
.bzl-modal--modern.is-js .bzl-md-content { opacity: 0; transform: translateY(18px) scale(.96); transition: transform .5s var(--md-ease, cubic-bezier(.16, 1, .3, 1)), opacity .3s ease; }
.bzl-modal--modern.is-js.is-in { opacity: 1; }
.bzl-modal--modern.is-js.is-in .bzl-md-content { opacity: 1; transform: none; }
.bzl-modal--modern.is-js.is-out { opacity: 0; transition-duration: .2s; }
.bzl-modal--modern.is-js.is-out .bzl-md-content { opacity: 0; transform: translateY(10px) scale(.98); transition-duration: .2s; }
/* the reference popup fades every element in with a blur: not inside فرم 1 (it has its own motion) */
.bzl-modal.bzl-modal--modern.open .bzl-modal-box :is(input, button, p, span, img, a) { opacity: 1 !important; filter: none !important; }
.bzl-modal.bzl-modal--modern.open .bzl-modal-box .bzl-modern :is(input, button, p, span, img, a):not(.bzl-code-boxes input) { animation: none !important; }
.bzl-modal.bzl-modal--modern.open .bzl-modern .bzl-step--code.is-entering .bzl-code-boxes input { animation: bzl-md-pop .5s cubic-bezier(.16, 1, .3, 1) both; }
.bzl-modal.bzl-modal--modern.open .bzl-modern .bzl-code-boxes input.is-filled { animation: bzl-md-tick .22s cubic-bezier(.16, 1, .3, 1); }
.bzl-modal.bzl-modal--modern .bzl-modal-box .bzl-modal-close { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: transparent !important; color: #667085 !important; transition: background-color .2s, transform .25s cubic-bezier(.16, 1, .3, 1) !important; }
.bzl-modal.bzl-modal--modern .bzl-modal-box .bzl-modal-close:hover { background: #f2f4f7 !important; color: #101828 !important; }
.bzl-modal.bzl-modal--modern .bzl-modal-box .bzl-modal-close.is-on-card { top: 16px !important; left: 16px !important; right: auto !important; }
.bzl-modal.bzl-modal--modern .bzl-modal-box .bzl-modal-close .bzl-ic { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .bzl-modern .bzl-md-content { padding: 34px 20px 22px; border-radius: 24px; }
  .bzl-modern .bzl-code-boxes { gap: 8px; }
  .bzl-modern .bzl-code-boxes input { width: 50px; height: 58px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .bzl-modern *, .bzl-modal--modern, .bzl-modal--modern * { animation: none !important; transition: none !important; } }
/* password field: the eye sits in the middle of the input (the wrapper used to include the input's bottom margin) */
[data-bzl] .bzl-pass-field { position: relative; margin-bottom: 12px; }
[data-bzl] .bzl-zp-init .bzl-pass-field { margin-bottom: 20px; }
[data-bzl] .bzl-pass-field > .bzl-pass-input { margin-bottom: 0 !important; }
[data-bzl] .bzl-pass-field > .bzl-eye { top: 50% !important; bottom: auto !important; left: 12px; right: auto; height: 24px; transform: translateY(-50%) !important; color: #9aa0ab; }
[data-bzl] .bzl-pass-field > .bzl-eye:hover { color: #5b6170; }
/* manager two-step login */
[data-bzl] .bzl-step--password.is-2fa .bzl-to-code, [data-bzl] .bzl-step--password.is-2fa .bzl-forgot-wrap { display: none !important; }
[data-bzl] .bzl-tfa-note { margin: 2px 0 14px; font-size: 12.5px; line-height: 1.9; color: #5b6170; text-align: center; }
[data-bzl] .bzl-tfa-note:empty { display: none; }
[data-bzl] .bzl-tfa-lost { display: inline-block; margin-top: 4px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
/* the resend link replaces the timer on the same line: the card keeps its height */
[data-bzl] .bzl-expire { min-height: 24px; }
[data-bzl] .bzl-expire .bzl-resend { margin: 0; padding: 0; line-height: 24px; height: 24px; width: auto; text-align: inherit; }
[data-bzl] .bzl-expire-label:empty { display: none; }
[data-bzl] .bzl-expire-label .bzl-expire-time { font-weight: 800; unicode-bidi: isolate; }
[data-bzl] .bzl-done-ic { width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: #eaf8ef; color: #16a34a; animation: bzl-pop .45s cubic-bezier(.2,1.3,.4,1); }
[data-bzl] .bzl-done-ic svg { width: 46px; height: 46px; color: inherit; }
[data-bzl] .bzl-done-c { stroke-dasharray: 145; stroke-dashoffset: 145; animation: bzl-draw .55s ease-out .1s forwards; opacity: .35; }
[data-bzl] .bzl-done-k { stroke-dasharray: 34; stroke-dashoffset: 34; animation: bzl-draw .35s ease-out .5s forwards; }
[data-bzl] .bzl-step-done .bzl-done-msg { margin: 16px 0 0; font-size: 15px; font-weight: 700; color: #1f2430; }
@keyframes bzl-draw { to { stroke-dashoffset: 0; } }
/* popup opens softly */
.bzl-modal.open .bzl-modal-box { animation: bzl-pop-in .28s cubic-bezier(.2,.9,.3,1.1); }
/* phones: 16px fields stop iOS from zooming the page when typing */
@media (max-width: 480px) { [data-bzl] .bzl-input, [data-bzl] .bzl-pass-input { font-size: 16px !important; } }
/* loading dots: box exactly as wide/tall as the three visible dots, so they sit dead centre */
[data-bzl] .bzl-load { display: flex; align-items: center; justify-content: center; }
[data-bzl] .bzl-load-anim { width: 77px !important; height: 13px !important; flex: none; }
[data-bzl] .bzl-load-anim div { top: 0 !important; }
/* field icons (Lucide user / lock): grey like the default, red on error */
.bzl-rt-content form > div.bzl-head:before, .bzl-rt-init .bzl-step-pass .bzl-pass-wrap:before {
  background-image: none !important; background-color: #c9c9c9; transition: background-color .2s ease;
  -webkit-mask: var(--bzl-mask-user) center / 22px 22px no-repeat; mask: var(--bzl-mask-user) center / 22px 22px no-repeat; }
.bzl-rt-init .bzl-step-pass .bzl-pass-wrap:before { -webkit-mask-image: var(--bzl-mask-lock); mask-image: var(--bzl-mask-lock); }
.bzl-rt-content form > div.bzl-head.has-error:before, .bzl-rt-init .bzl-step-pass .bzl-pass-wrap.has-error:before { background-color: #e3122a; }
@keyframes bzl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bzl-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bzl-pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bzl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { [data-bzl] *, .bzl-modal * { animation: none !important; transition: none !important; } }

.bzl-modal .bzl-modal-logout { display: block; margin: 10px auto 0; width: fit-content; font-size: 13px; color: #6b6670; text-decoration: underline; text-underline-offset: 4px; }
.bzl-modal .bzl-modal-logout:hover { color: #b42318; }
/* ==== header login button (guest button / account dropdown) ==== */
.bzl-hb { position: relative; display: inline-block; direction: rtl; }
.bzl-hb .bzl-hb-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 9px 16px; border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; font-size: 14px; line-height: 1.4; text-decoration: none !important; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bzl-hb .bzl-hb-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bzl-hb--icon-end .bzl-hb-btn { flex-direction: row-reverse; }
.bzl-hb .bzl-hb-i { display: inline-flex; line-height: 0; margin: 0; }
.bzl-hb .bzl-hb-i svg { width: 20px; height: 20px; margin: 0; }
.bzl-hb .bzl-hb-i i { font-size: 20px; margin: 0; }
.bzl-hb .bzl-hb-text { display: inline-block; margin: 0; white-space: nowrap; }
.bzl-hb .bzl-hb-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.bzl-hb .bzl-hb-caret { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; transform: none; transition: transform .2s ease; flex: none; }
.bzl-hb--hover:hover .bzl-hb-caret, .bzl-hb.is-open .bzl-hb-caret { transform: rotate(180deg); }
.bzl-hb .bzl-hb-menu { position: absolute; top: calc(100% + 10px); left: 0; right: auto; z-index: 999; width: 211px; background: #fff; border-radius: 12px; overflow: visible;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -8px rgba(20,20,50,.2); display: none; opacity: 1; visibility: visible; transform: none; }
.bzl-hb--menu-start .bzl-hb-menu { right: 0; left: auto; }
.bzl-hb--hover .bzl-hb-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.bzl-hb--hover:hover .bzl-hb-menu, .bzl-hb--hover:focus-within .bzl-hb-menu, .bzl-hb.is-open .bzl-hb-menu { display: block; animation: bzl-hb-in .18s ease; }
.bzl-hb--flip.bzl-hb--menu-end .bzl-hb-menu { left: auto; right: 0; }
.bzl-hb--flip.bzl-hb--menu-start .bzl-hb-menu { right: auto; left: 0; }
@keyframes bzl-hb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bzl-hb .bzl-hb-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f2; border-radius: 12px 12px 0 0; background: #fafafc; text-align: right; }
.bzl-hb .bzl-hb-head strong { font-size: 14px; font-weight: 700; color: #24242f; }
.bzl-hb .bzl-hb-head small { font-size: 12px; color: #63636f; text-align: right; }
.bzl-hb .bzl-hb-menu ul { list-style: none; margin: 0 !important; padding: 6px !important; }
.bzl-hb .bzl-hb-menu ul li { margin: 0; padding: 0; }
.bzl-hb .bzl-hb-menu ul li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #3f4064; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.bzl-hb .bzl-hb-menu ul li a span { padding: 0; flex: 1 1 auto; }
.bzl-hb .bzl-hb-menu ul li a:hover { background-color: #f3f3f7; }
.bzl-hb .bzl-hb-menu .bzl-hb-mi-wrap { display: inline-flex; flex: none; color: #7a7a8c; line-height: 0; }
.bzl-hb .bzl-hb-menu .bzl-hb-mi-wrap svg { width: 18px; height: 18px; }
.bzl-hb .bzl-hb-menu .bzl-hb-mi-wrap i { font-size: 17px; width: 18px; text-align: center; }
.bzl-hb .bzl-hb-menu .bzl-hb-item--logout a, .bzl-hb .bzl-hb-menu .bzl-hb-item--logout .bzl-hb-mi-wrap { color: #c0392b; }
@media (max-width: 767px) { .bzl-hb--compact .bzl-hb-text { display: none; } .bzl-hb--compact .bzl-hb-btn { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .bzl-hb .bzl-hb-menu { animation: none !important; } .bzl-hb .bzl-hb-caret { transition: none; } }