.twofa-emergency-barcode {

    width: 100%;

    max-width: 100%;

    border-radius: 12px !important;

    border-color: rgba(237, 108, 2, 0.35) !important;

    background: linear-gradient(165deg, #fffaf3 0%, #ffffff 42%, #f5f7ff 100%) !important;

    padding: 0.85rem 0.9rem !important;

    box-sizing: border-box;

    overflow: hidden;

    direction: rtl;

    text-align: right;

}



.twofa-emergency-barcode__stack {

    width: 100%;

    direction: rtl;

    text-align: right;

}



.twofa-emergency-barcode__title-row {

    direction: rtl;

    width: 100%;

    justify-content: flex-start;

}



.twofa-emergency-barcode__title {

    font-weight: 700;

    text-align: right;

}



.twofa-emergency-barcode__hint {

    text-align: right;

    line-height: 1.65;

    width: 100%;

}



.twofa-emergency-barcode__qr-wrap {

    width: 100%;

    padding: 0.15rem 0 0.1rem;

}



.twofa-emergency-barcode__qr-frame {

    position: relative;

    width: min(100%, 280px);

    aspect-ratio: 1;

    margin: 0 auto;

    border-radius: 14px;

    border: 2px dashed rgba(237, 108, 2, 0.42);

    background:

        radial-gradient(circle at 18% 16%, rgba(237, 108, 2, 0.09) 0%, transparent 38%),

        radial-gradient(circle at 82% 84%, rgba(26, 35, 126, 0.08) 0%, transparent 40%),

        linear-gradient(145deg, #ffffff 0%, #fafbff 55%, #fff9f0 100%);

    box-sizing: border-box;

    overflow: hidden;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);

}



.twofa-emergency-barcode__qr-watermark {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.07;

    pointer-events: none;

    z-index: 0;

}



.twofa-emergency-barcode__qr-watermark .mud-icon-root {

    font-size: clamp(4.5rem, 38vw, 7rem) !important;

    width: clamp(4.5rem, 38vw, 7rem) !important;

    height: clamp(4.5rem, 38vw, 7rem) !important;

}



.twofa-emergency-barcode__qr-canvas {

    position: absolute;

    inset: clamp(0.55rem, 3.5vw, 0.85rem);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 2px 12px rgba(26, 35, 126, 0.08);

}



.twofa-emergency-barcode__qr-canvas svg {

    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: 100%;

    max-height: 100%;

}



.twofa-emergency-barcode__visual {

    width: 100%;

    max-width: 100%;

    margin-top: 0.35rem;

    padding: 0.45rem 0.35rem 0.15rem;

    border-radius: 10px;

    background: #fff;

    border: 1px dashed rgba(26, 35, 126, 0.18);

    box-sizing: border-box;

    overflow: hidden;

}



.twofa-emergency-barcode__visual svg {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

}



.twofa-emergency-barcode__code-row {

    width: 100%;

    justify-content: flex-start;

    margin-top: 0.2rem;

}



.twofa-emergency-barcode__code {

    letter-spacing: 0.28em;

    font-weight: 800 !important;

    color: #1a237e !important;

    text-align: left !important;

    direction: ltr;

    unicode-bidi: plaintext;

}



.twofa-emergency-barcode__visual--barcode svg {

    max-height: 200px;

    min-height: 120px;

}



@media (max-width: 420px) {

    .twofa-emergency-barcode__qr-frame {

        width: min(100%, 240px);

    }

}



@media (min-width: 600px) {

    .twofa-emergency-barcode__qr-frame {

        width: min(100%, 300px);

    }

}



.login-page--2fa .login-2fa-card .mud-button-root.login-submit-btn {

    direction: rtl;

    justify-content: center;

}



.login-page--2fa .login-2fa-card .mud-button-root.login-submit-btn .mud-button-label {

    text-align: right;

}



.login-page--2fa .login-2fa-card .mud-button-root.login-2fa-cancel-btn {

    direction: rtl;

    justify-content: flex-start;

}



.login-page--2fa .login-2fa-content {

    width: 100%;

    direction: rtl;

    text-align: right;

}



.login-page--2fa .login-2fa-loading {

    width: 100%;

    direction: rtl;

    align-items: flex-end !important;

}



.login-page--2fa .mud-alert-message,

.login-page--2fa .mud-alert-content {

    text-align: right !important;

    width: 100%;

}



.login-2fa-messenger-hints {

    border-radius: 12px;

    border: 1px solid rgba(25, 118, 210, 0.25);

    background: #f8fbff;

    padding: 0.75rem 0.85rem;

    margin-bottom: 0.5rem;

}



.login-2fa-messenger-hints__row {

    direction: rtl;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.login-2fa-messenger-hints__item {

    display: flex;

    align-items: center;

    gap: 0.35rem;

}



.login-2fa-messenger-hints__item--off {

    opacity: 0.38;

}