/*
=========================================================
Market UI v2 - Auth Pages
=========================================================
*/

html,
body.m-auth-page {
    min-block-size: 100%;
}

body.m-auth-page {
    min-block-size: var(--auth_page_min_height);
    margin: 0;
    background: var(--auth_page_bg);
    color: var(--m-context-text, #334155);
}

.m-auth-page__main,
.m-auth-layout {
    min-block-size: var(--auth_page_min_height);
}

.m-auth-page .aiz-main-wrapper {
    min-block-size: var(--auth_page_min_height);
    padding: var(--auth_page_padding_y) var(--auth_page_padding_x);
    background: transparent !important;
}

.m-auth-page section.bg-white,
.m-auth-page .bg-white {
    background: transparent !important;
}

.m-auth-page .row {
    min-inline-size: 0;
}

.m-auth-page .col-xxl-6.col-xl-9,
.m-auth-page .col-xl-9,
.m-auth-page .col-lg-10 {
    inline-size: min(100%, var(--auth_card_max_width));
    max-inline-size: var(--auth_card_max_width);
}

.m-auth-page .card.market-auth-card,
.m-auth-page .card:not(.dropdown-menu) {
    border: 1px solid var(--auth_card_border) !important;
    border-radius: var(--auth_card_radius) !important;
    background: var(--auth_card_bg);
    box-shadow: var(--auth_card_shadow);
    overflow: hidden;
}

.m-auth-page .card > .row.no-gutters,
.m-auth-page .market-auth-card > .row.no-gutters {
    min-block-size: min(var(--auth_visual_min_height), calc(100vh - 7rem));
}

.m-auth-page .market-auth-visual,
.m-auth-page .card > .row.no-gutters > .col-lg-6:first-child {
    position: relative;
    min-block-size: var(--auth_visual_min_height);
    background: var(--m-context-surface-soft, #f8fafc);
    overflow: hidden;
}

.m-auth-page .market-auth-visual::after,
.m-auth-page .card > .row.no-gutters > .col-lg-6:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--auth_visual_overlay);
    pointer-events: none;
}

.m-auth-page .market-auth-visual__image,
.m-auth-page .card > .row.no-gutters > .col-lg-6:first-child > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: var(--auth_visual_min_height);
    object-fit: cover;
}

.m-auth-page .right-content,
.m-auth-page .market-auth-panel {
    min-block-size: 100%;
    padding: var(--auth_panel_padding) !important;
    border: 0 !important;
    background: var(--m-context-surface, #fff);
}

.m-auth-page .market-auth-logo,
.m-auth-page .size-48px {
    inline-size: var(--auth_logo_size) !important;
    block-size: var(--auth_logo_size) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-lg, .875rem);
    background: var(--m-context-surface-soft, #f8fafc);
    box-shadow: 0 10px 28px -24px rgba(15, 23, 42, .34);
    overflow: hidden;
}

.m-auth-page .market-auth-logo img,
.m-auth-page .size-48px img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: .45rem;
}

.m-auth-page .market-auth-title,
.m-auth-page h1.fs-20 {
    margin: 0;
    color: var(--m-context-text-strong, #0f172a) !important;
    font-size: var(--auth_title_size) !important;
    font-weight: 850 !important;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
}

.m-auth-page .market-auth-subtitle,
.m-auth-page h5.fs-14,
.m-auth-page .text-gray {
    color: var(--m-context-text-muted, #64748b) !important;
}

.m-auth-page .pt-3.pt-lg-4 {
    padding-block-start: clamp(1rem, 2.4vw, 1.6rem) !important;
}

.m-auth-page form {
    display: grid;
    gap: .9rem;
}

.m-auth-page .form-group {
    margin-block-end: .75rem;
}

.m-auth-page .form-group.mb-0 {
    margin-block-end: .25rem !important;
}

.m-auth-page .m-password-field {
    margin-block-end: .75rem;
}

.m-auth-page .m-password-field.mb-0 {
    margin-block-end: .25rem !important;
}

.m-auth-page label,
.m-auth-page .fs-12.fw-700.text-soft-dark {
    margin-block-end: .4rem;
    color: var(--auth_field_label) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.35;
}

.m-auth-page .position-relative {
    min-inline-size: 0;
}

.m-auth-page .submit-button,
.m-auth-page .m-btn-block {
    inline-size: 100%;
}

.m-auth-page .alert {
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-lg, .875rem);
    background: var(--m-context-surface-soft, #f8fafc);
    color: var(--m-context-text, #334155);
}

.m-auth-page .alert-soft-warning {
    border-color: color-mix(in srgb, var(--m-context-warning, #f59e0b) 34%, var(--m-context-border-subtle));
    background: color-mix(in srgb, var(--m-context-warning, #f59e0b) 10%, var(--m-context-surface));
}

.m-auth-page .alert-soft-primary {
    border-color: color-mix(in srgb, var(--auth_accent) 28%, var(--m-context-border-subtle));
    background: color-mix(in srgb, var(--auth_accent) 8%, var(--m-context-surface));
}

.m-auth-page .market-auth-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.8rem;
    block-size: 1.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-context-warning, #f59e0b) 14%, var(--m-context-surface));
}

.m-auth-page .invalid-feedback,
.m-auth-page .text-danger {
    color: var(--m-context-danger, #dc2626) !important;
    font-size: .76rem;
    font-weight: 700;
}

.m-auth-page .policy-links a,
.m-auth-page .animate-underline-primary,
.m-auth-page .hov-text-primary:hover {
    color: var(--auth_accent) !important;
    text-decoration: none;
}

.m-auth-page .market-auth-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    inline-size: max-content;
    max-inline-size: 100%;
    color: var(--auth_accent) !important;
    text-decoration: none;
}

.m-auth-page .social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
}

.m-auth-page .social .list-inline-item {
    margin: 0;
}

.m-auth-page .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-md, .75rem);
    background: var(--m-context-surface-soft, #f8fafc);
    color: var(--m-context-text-strong, #0f172a);
    box-shadow: none;
}

.m-auth-page .modal-content {
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-xl, 1rem);
    background: var(--m-context-surface, #fff);
    box-shadow: 0 24px 70px -40px rgba(15, 23, 42, .48);
}

.m-auth-modal-meta {
    display: none;
}

.m-auth-page .lockout-ring {
    position: relative;
    inline-size: 7.5rem;
    block-size: 7.5rem;
}

.m-auth-page .lockout-ring svg {
    display: block;
}

.m-auth-page .lockout-ring__track {
    stroke: var(--m-context-border-subtle, #e2e8f0);
}

.m-auth-page .lockout-ring__progress {
    stroke: var(--auth_accent);
}

.m-auth-page .lockout-ring__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.m-auth-page .lockout-ring__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.m-auth-page .lockout-ring__label {
    margin-block-start: .125rem;
    color: var(--m-context-text-muted, #64748b);
    font-size: .75rem;
}

.m-auth-page .verification-code {
    direction: ltr;
}

.m-auth-page .verification-code input {
    inline-size: 100%;
}

.m-auth-page .table {
    color: var(--m-context-text, #334155);
}

.m-auth-page .table-bordered td {
    border-color: var(--m-context-border-subtle, #e2e8f0);
}

.m-auth-layout--user-data {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-block-size: var(--auth_page_min_height);
    padding: clamp(1.25rem, 4vh, 3rem) var(--auth_page_padding_x);
}

.market-auth-profile-shell {
    inline-size: min(100%, 50rem);
    margin-inline: auto;
}

.market-auth-profile-card {
    overflow: visible;
}

.market-auth-profile-body {
    display: grid;
    gap: .85rem;
}

.market-auth-profile-form {
    display: grid;
    gap: .78rem;
}

.market-auth-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .78rem .9rem;
    min-inline-size: 0;
}

.market-auth-profile-grid > *,
.market-auth-profile-form > * {
    min-inline-size: 0;
}

.market-auth-profile-alert {
    margin-block-end: .15rem;
}

.market-auth-field-message {
    min-block-size: .85rem;
    margin: -.42rem 0 0;
    color: var(--m-context-danger);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.4;
}

.market-auth-profile-actions {
    margin-block-start: .35rem;
}

.market-auth-profile-back {
    margin-block-start: .85rem;
    inline-size: max-content;
    max-inline-size: 100%;
}

.m-auth-layout--authorization {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--auth_page_min_height);
    padding: clamp(1.25rem, 4vh, 3rem) var(--auth_page_padding_x);
}

.market-auth-authorization-shell {
    inline-size: min(100%, 44rem);
    margin-inline: auto;
}

.market-auth-authorization-card {
    overflow: visible;
}

.market-auth-authorization-card .m-card__header {
    padding-block: .9rem;
}

.market-auth-authorization-body {
    display: grid;
    gap: 1rem;
}

.market-auth-authorization-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .95rem;
    min-inline-size: 0;
}

.market-auth-authorization-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border: 1px solid color-mix(in srgb, var(--auth_accent) 18%, transparent);
    border-radius: var(--m-radius-xl, 1rem);
    background: color-mix(in srgb, var(--auth_accent) 10%, var(--m-context-surface, #fff));
    color: var(--auth_accent);
    box-shadow: 0 18px 46px -34px color-mix(in srgb, var(--auth_accent) 58%, transparent);
    font-size: 1.65rem;
}

.market-auth-authorization-icon.is-danger {
    border-color: color-mix(in srgb, var(--m-context-danger, #ef4444) 18%, transparent);
    background: color-mix(in srgb, var(--m-context-danger, #ef4444) 9%, var(--m-context-surface, #fff));
    color: var(--m-context-danger, #ef4444);
}

.market-auth-authorization-copy {
    display: grid;
    gap: .32rem;
    min-inline-size: 0;
}

.market-auth-authorization-title {
    margin: 0;
    color: var(--m-context-text-strong, #0f172a);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: 0;
}

.market-auth-authorization-subtitle,
.market-auth-authorization-target {
    margin: 0;
    color: var(--m-context-text-muted, #64748b);
    font-size: .92rem;
    line-height: 1.5;
}

.market-auth-authorization-target {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    max-inline-size: 100%;
    padding: .42rem .66rem;
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-lg, .875rem);
    background: var(--m-context-surface-soft, #f8fafc);
    color: var(--m-context-text-strong, #0f172a);
    overflow-wrap: anywhere;
}

.market-auth-authorization-alert {
    min-inline-size: 0;
}

.market-auth-authorization-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .75rem;
    min-inline-size: 0;
}

.market-auth-authorization-stat {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .34rem;
    min-inline-size: 0;
    min-block-size: 7.35rem;
    padding: .82rem;
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-xl, 1rem);
    background: color-mix(in srgb, var(--m-context-surface-soft, #f8fafc) 72%, var(--m-context-surface, #fff));
}

.market-auth-authorization-stat__label,
.market-auth-authorization-stat__hint {
    color: var(--m-context-text-muted, #64748b);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.market-auth-authorization-stat__value {
    color: var(--m-context-text-strong, #0f172a);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.market-auth-authorization-stat__value span {
    color: var(--m-context-text-muted, #64748b);
    font-size: .82rem;
}

.market-auth-authorization-countdown {
    justify-self: center;
}

.market-auth-channel-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    min-inline-size: 0;
}

.market-auth-channel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-block-size: 2.45rem;
    padding-inline: .82rem;
    border: 1px solid var(--m-context-border-subtle, #e2e8f0);
    border-radius: var(--m-radius-lg, .875rem);
    background: var(--m-context-surface, #fff);
    color: var(--m-context-text, #334155);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
    transition: background-color var(--auth_transition), border-color var(--auth_transition), color var(--auth_transition), box-shadow var(--auth_transition);
}

.market-auth-channel-link:hover,
.market-auth-channel-link.is-active {
    border-color: color-mix(in srgb, var(--auth_accent) 38%, transparent);
    background: color-mix(in srgb, var(--auth_accent) 11%, var(--m-context-surface, #fff));
    color: var(--auth_accent);
    text-decoration: none;
    box-shadow: 0 14px 38px -30px color-mix(in srgb, var(--auth_accent) 62%, transparent);
}

.market-auth-authorization-form {
    display: grid;
    gap: .9rem;
}

.m-verification-code-field {
    display: grid;
    justify-items: center;
    gap: .5rem;
    min-inline-size: 0;
}

.m-verification-code-field__label {
    justify-self: start;
}

.m-verification-code-field .m-verification-code {
    direction: ltr;
    max-inline-size: 100%;
    overflow-x: auto;
    padding: .25rem;
}

.m-verification-code-field .m-input-field__error {
    justify-self: stretch;
    margin: 0;
    color: var(--m-context-danger, #ef4444);
    font-size: .78rem;
    font-weight: 800;
    text-align: start;
}

.m-verification-code-field.is-invalid .m-verification-code .boxes > span {
    border-color: color-mix(in srgb, var(--m-context-danger, #ef4444) 46%, var(--m-context-border-subtle, #e2e8f0));
}

.market-auth-authorization-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    min-inline-size: 0;
}

.market-auth-authorization-actions > .m-btn,
.market-auth-authorization-actions > .market-auth-authorization-logout,
.market-auth-authorization-actions > .market-auth-authorization-logout > .m-btn {
    flex: 1 1 12rem;
}

.m-auth-page .market-auth-authorization-logout {
    display: contents;
}

.market-auth-ban-reason {
    white-space: pre-wrap;
}

@media (max-width: 991.98px) {
    .m-auth-page .aiz-main-wrapper {
        padding: .8rem;
    }

    .m-auth-page .market-auth-visual,
    .m-auth-page .card > .row.no-gutters > .col-lg-6:first-child {
        display: none;
    }

    .m-auth-page .card > .row.no-gutters,
    .m-auth-page .market-auth-card > .row.no-gutters {
        min-block-size: auto;
    }

    .m-auth-page .right-content,
    .m-auth-page .market-auth-panel {
        border-radius: 0;
        min-block-size: auto;
    }
}

@media (max-width: 575.98px) {
    .m-auth-page .row .col-sm-6 {
        margin-block-end: .75rem;
    }

    .m-auth-layout--user-data {
        padding: .8rem;
    }

    .market-auth-profile-grid {
        grid-template-columns: 1fr;
    }

    .m-auth-layout--authorization {
        align-items: flex-start;
        padding: .8rem;
    }

    .market-auth-authorization-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .market-auth-authorization-target {
        justify-self: center;
    }

}