/* ============================================================
   Auth pages — two-column design (from billionmarkets.com demo)
   ============================================================ */
.bm-auth-wrap {
    min-height: 100vh;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}
.bm-auth-wrap::before,
.bm-auth-wrap::after {
    content: '';
    position: absolute;
    width: 24rem;
    height: 24rem;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
}
.bm-auth-wrap::before { top: -6rem; left: -6rem; background: var(--color-red); }
.bm-auth-wrap::after { bottom: -6rem; right: -6rem; background: var(--color-green-500); }

.bm-auth-grid {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 991.98px) {
    .bm-auth-grid { grid-template-columns: 1fr; max-width: 540px; }
    .bm-auth-wrap::before,
    .bm-auth-wrap::after { display: none; }
}

/* Left image panel */
.bm-auth-image {
    display: none;
    background: var(--color-primary);
    overflow: hidden;
}
@media (min-width: 992px) {
    .bm-auth-image { display: block; }
}
.bm-auth-image img {
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: cover;
    display: block;
}

/* Right form panel */
.bm-auth-form {
    background: transparent;
    padding: 2.5rem 2.25rem;
}
.bm-auth-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
@media (min-width: 768px) {
    .bm-auth-head { align-items: flex-start; }
}
.bm-auth-head .custom_link { display: inline-block; }
.bm-auth-logo { max-width: 160px; height: auto; }
.bm-auth-head h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}
.bm-auth-head p { color: var(--color-gray-400); margin: 0; font-size: .95rem; }

.bm-auth-input {
    width: 100%;
    border-radius: 8px;
    padding: .7rem .9rem;
    border: 1px solid #fff;
    background: #62091C;
    color: var(--color-white);
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.bm-auth-input::placeholder { color: var(--color-gray-500); }
.bm-auth-input:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(164, 7, 110, .25);
    background: #62091C;
    color: var(--color-white);
}

/* intl-tel-input country-code phone field (dark theme) */
.bm-auth-form .iti,
.bm-auth-form .iti.iti--allow-dropdown { width: 100%; }
.bm-auth-form .iti__flag-container { border-right: 1px solid #fff; }
.bm-auth-form .iti__selected-flag {
    border-radius: 8px 0 0 8px;
}
.bm-auth-form .iti__selected-flag .iti__selected-dial-code { color: #fff; }
.bm-auth-form .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.bm-auth-form .iti__flag-container .iti__selected-flag:hover {
    background: rgba(0, 0, 0, .28);
}
.bm-auth-form .iti__arrow { border-top-color: #fff; }
.bm-auth-form .iti--separate-dial-code .iti__selected-dial-code { color: #fff; }
.bm-auth-form input.iti__tel-input {
    border: 1px solid #fff;
    background: #62091C;
    color: var(--color-white);
}
.bm-auth-form input.iti__tel-input:focus {
    border-color: #fff;
    outline: none;
    background: #62091C;
    color: var(--color-white);
}
.iti__country-list {
    background: #4A081A;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    margin-top: .3rem;
    width: 100%;
    min-width: 260px;
}
.iti__country-list .iti__country { color: #fff; }
.iti__country-list .iti__country:hover,
.iti__country-list .iti__country.iti__highlight { background: rgba(255, 255, 255, .12); }
.iti__country-list .iti__country-name,
.iti__country-list .iti__dial-code { color: #fff; }
.iti__country-list .iti__divider { border-bottom-color: rgba(255, 255, 255, .2); }
.bm-auth-form .form-label { font-weight: 600; color: var(--color-white); margin-bottom: .35rem; }

/* Auth submit buttons — brand background with always-visible dot border */
.ant-btn.ant-btn-dashed,
.ant-btn.ant-btn-dashed:hover,
.ant-btn.ant-btn-dashed:focus,
.ant-btn.ant-btn-dashed:active {
    background: #64091B !important;
    border: 1px dashed hsla(0, 0%, 100%, .5) !important;
    border-radius: 10px;
}
.bm-auth-form .alert {
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid hsla(0, 0%, 100%, .2);
    border-radius: 8px;
    font-size: .9rem;
}
.bm-auth-form .form-check-input {
    background-color: var(--color-primary);
    border-color: hsla(0, 0%, 100%, .3);
}
.bm-auth-form .form-check-input:checked { background-color: var(--color-pink-700); border-color: var(--color-pink-700); }

.bm-auth-switch {
    color: var(--color-gray-300);
    font-size: .95rem;
    text-decoration: none;
    transition: color .2s;
}
.bm-auth-switch:hover { color: var(--color-white); }
.bm-auth-switch span { color: var(--color-red); font-weight: 600; }

/* "Create New Account" — plain text link with hover */
.bm-auth-create {
    display: inline-block;
    color: var(--color-gray-300);
    font-size: .95rem;
    text-decoration: none;
    transition: color .2s;
}
.bm-auth-create:hover { color: var(--color-red); }

/* Live username availability status */
.bm-username-status {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
    min-height: 1rem;
}
.bm-username-status-checking { color: var(--color-gray-400); }
.bm-username-status-ok { color: var(--color-green-500); }
.bm-username-status-taken { color: var(--color-red); }

/* Email verification popup (after registration) */
.bm-verify-modal,
.bm-verify-modal .modal-content,
.bm-verify-modal .modal-body {
    background: #4A081A !important;
    background-color: #4A081A !important;
    color: #fff !important;
}
.bm-verify-modal {
    border: 2px solid var(--color-pink-700);
    border-radius: 50% !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.bm-verify-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-primary);
    border: 1px dashed var(--color-pink-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--color-red);
}
.bm-verify-email {
    color: var(--color-white);
    font-weight: 600;
    word-break: break-all;
    margin-bottom: .25rem;
}
.bm-verify-modal .modal-body .form-label,
.bm-verify-modal h3 { color: var(--color-white); }
.bm-verify-modal h3,
.bm-verify-modal p,
.bm-verify-modal .text-muted { color: #fff !important; }
/* OTP round-box inputs */
.bm-otp-boxes {
    display: flex;
    justify-content: center;
    gap: .65rem;
}
.bm-otp-box {
    width: 50px;
    height: 54px;
    border-radius: 50%;
    background: #4A081A;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    caret-color: #fff;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.bm-otp-box::placeholder { color: #fff; font-weight: 400; }
.bm-otp-box:focus {
    outline: none;
    border-color: #fff;
    border-style: solid;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .3);
    background: #4A081A;
    color: #fff;
}
@media (max-width: 420px) {
    .bm-otp-box { width: 40px; height: 44px; font-size: 1.15rem; }
    .bm-otp-boxes { gap: .45rem; }
}

/* Bootstrap modal overlay on dark background */
body:has(.bm-verify-modal) .modal-backdrop.show { opacity: .8; }