/* BHAVYA_AUTH_POLISH_V3
   Registration • Login • Activation • Reset
   Desktop • Tablet • Mobile
========================================================= */

.modal.auth-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    box-sizing: border-box !important;

    display: none;

    align-items: center !important;
    justify-content: center !important;

    padding:
        max(14px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left))
        !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(0,229,255,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(124,58,237,.16),
            transparent 34%
        ),
        rgba(2,6,18,.91)
        !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    z-index: 60000 !important;
}


/* ===================== MAIN AUTH CARD ===================== */

.auth-shell {
    width: min(100%, 1040px) !important;

    max-height:
        calc(100dvh - 28px) !important;

    min-height: 0 !important;

    overflow: hidden !important;

    border-radius: 26px !important;

    border:
        1px solid rgba(255,255,255,.11)
        !important;

    box-shadow:
        0 35px 100px rgba(0,0,0,.70),
        0 0 65px rgba(0,229,255,.08)
        !important;
}


/* ===================== LEFT BRAND ===================== */

.auth-brand-panel {
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;

    background:
        radial-gradient(
            circle at 15% 7%,
            rgba(0,229,255,.20),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            #06101d 0%,
            #0c1930 52%,
            #1b1532 100%
        )
        !important;
}


.auth-brand-logo {
    filter:
        drop-shadow(
            0 10px 22px
            rgba(0,0,0,.35)
        )
        drop-shadow(
            0 0 16px
            rgba(0,229,255,.18)
        )
        !important;
}


/* ===================== RIGHT FORM ===================== */

.auth-form-panel {
    min-width: 0 !important;
    min-height: 0 !important;

    max-height:
        calc(100dvh - 28px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;

    padding-bottom: 46px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(59,130,246,.08),
            transparent 32%
        ),
        linear-gradient(
            150deg,
            rgba(14,20,37,.99),
            rgba(7,11,22,.99)
        )
        !important;
}


.auth-form-panel::-webkit-scrollbar,
.auth-brand-panel::-webkit-scrollbar {
    width: 6px;
}


.auth-form-panel::-webkit-scrollbar-thumb,
.auth-brand-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        linear-gradient(
            #00e5ff,
            #6366f1
        );
}


/* ===================== HEADER ===================== */

.auth-topbar {
    position: sticky !important;

    top: -1px !important;

    z-index: 20 !important;

    margin:
        -5px -4px
        20px !important;

    padding:
        5px 4px
        13px !important;

    background:
        linear-gradient(
            180deg,
            rgba(10,15,29,.99) 0%,
            rgba(10,15,29,.96) 78%,
            rgba(10,15,29,0) 100%
        )
        !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ===================== INPUTS ===================== */

.auth-field label {
    color: #dce7f5 !important;

    font-size: 11px !important;

    letter-spacing: .25px;
}


.auth-input-wrap input {
    min-height: 52px !important;

    border-radius: 13px !important;

    background:
        rgba(13,22,40,.92)
        !important;
}


.auth-input-wrap input:focus {
    border-color:
        rgba(0,229,255,.72)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(0,229,255,.09),
        0 12px 30px
        rgba(0,0,0,.22)
        !important;
}


/* ===================== BUTTONS ===================== */

.auth-primary-btn {
    min-height: 54px !important;

    border-radius: 13px !important;

    letter-spacing: .1px;

    touch-action: manipulation;
}


.auth-primary-btn.green {
    box-shadow:
        0 12px 28px
        rgba(0,230,118,.20)
        !important;
}


/* ===================== BOXES ===================== */

.auth-note,
.auth-security-box,
.auth-terms,
.auth-captcha {
    border-radius: 13px !important;
}


/* Helpful line above Registration button */

.auth-submit-hint {
    margin:
        3px 0
        10px;

    padding:
        9px 11px;

    border-radius: 10px;

    text-align: center;

    color: #8fa1b7;

    background:
        rgba(0,229,255,.045);

    border:
        1px solid
        rgba(0,229,255,.10);

    font-size: 10px;

    line-height: 1.55;
}


/* ===================== NOTIFICATION ===================== */

.notification {
    position: fixed !important;

    top:
        max(
            12px,
            env(safe-area-inset-top)
        )
        !important;

    left: 50% !important;
    right: auto !important;

    width:
        min(
            calc(100vw - 24px),
            520px
        )
        !important;

    max-width:
        520px !important;

    box-sizing: border-box !important;

    padding:
        14px 17px !important;

    border-radius:
        14px !important;

    color:
        #f8fafc !important;

    background:
        rgba(8,15,29,.98)
        !important;

    border:
        1px solid
        rgba(255,255,255,.13);

    box-shadow:
        0 22px 60px
        rgba(0,0,0,.52)
        !important;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    text-align: center;

    font-size: 13px;

    font-weight: 800 !important;

    line-height: 1.55;

    z-index:
        999999 !important;

    transform:
        translateX(-50%)
        !important;
}


.notification.show {
    display:
        block !important;
}


.notification.success {
    border-color:
        rgba(0,230,118,.45)
        !important;
}


.notification.error {
    border-color:
        rgba(255,82,82,.55)
        !important;
}


.notification.warning {
    border-color:
        rgba(251,191,36,.50)
        !important;
}


.notification.info {
    border-color:
        rgba(0,229,255,.45)
        !important;
}


/* ===================== TABLET ===================== */

@media (max-width: 850px) {

    .modal.auth-modal {
        align-items:
            flex-start !important;

        padding-top:
            max(
                9px,
                env(safe-area-inset-top)
            )
            !important;

        padding-bottom:
            max(
                18px,
                env(safe-area-inset-bottom)
            )
            !important;
    }


    .auth-shell {
        width:
            min(
                100%,
                650px
            )
            !important;

        max-height:
            none !important;

        grid-template-columns:
            1fr !important;

        overflow:
            visible !important;

        margin:
            auto 0 !important;
    }


    .auth-brand-panel {
        min-height:
            auto !important;

        max-height:
            none !important;

        overflow:
            hidden !important;

        padding:
            20px 22px !important;
    }


    .auth-form-panel {
        max-height:
            none !important;

        overflow:
            visible !important;

        padding:
            22px 22px
            42px !important;
    }
}


/* ===================== MOBILE ===================== */

@media (max-width: 560px) {

    .modal.auth-modal {
        padding:
            max(
                7px,
                env(safe-area-inset-top)
            )
            7px
            max(
                16px,
                env(safe-area-inset-bottom)
            )
            !important;
    }


    .auth-shell {
        width: 100% !important;

        border-radius:
            19px !important;
    }


    .auth-brand-panel {
        padding:
            14px 15px !important;
    }


    .auth-brand-logo {
        width:
            44px !important;

        height:
            44px !important;

        margin:
            0 11px 0 0
            !important;
    }


    .auth-brand-kicker {
        font-size:
            8px !important;

        margin-bottom:
            3px !important;
    }


    .auth-brand-title {
        font-size:
            18px !important;

        line-height:
            1.18 !important;
    }


    .auth-brand-text,
    .auth-benefits,
    .auth-trust-strip {
        display:
            none !important;
    }


    .auth-form-panel {
        padding:
            17px 13px
            38px !important;
    }


    .auth-topbar {
        margin:
            -2px -2px
            17px !important;

        padding:
            2px 2px
            11px !important;
    }


    .auth-heading {
        font-size:
            21px !important;
    }


    .auth-subheading {
        font-size:
            11px !important;

        line-height:
            1.55 !important;
    }


    .auth-grid-2 {
        grid-template-columns:
            1fr !important;
    }


    .auth-field {
        margin-bottom:
            12px !important;
    }


    .auth-input-wrap input {
        min-height:
            52px !important;

        font-size:
            16px !important;
    }


    .auth-primary-btn {
        min-height:
            54px !important;

        font-size:
            13px !important;
    }


    .auth-progress {
        gap:
            4px !important;
    }


    .auth-progress-item {
        padding:
            7px 3px !important;

        font-size:
            8.5px !important;
    }


    .notification {
        width:
            calc(100vw - 16px)
            !important;

        font-size:
            12px !important;

        padding:
            12px 13px !important;
    }
}


/* ===================== VERY SMALL PHONE ===================== */

@media (max-width: 360px) {

    .auth-form-panel {
        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }


    .auth-heading {
        font-size:
            19px !important;
    }
}


/* ===================== SHORT DESKTOP ===================== */

@media (max-height: 720px) and (min-width: 851px) {

    .auth-shell {
        max-height:
            calc(100dvh - 14px)
            !important;
    }


    .auth-brand-panel,
    .auth-form-panel {
        max-height:
            calc(100dvh - 14px)
            !important;

        overflow-y:
            auto !important;
    }
}


/* BHAVYA_AUTH_USERID_PIN_V4 */

.auth-login-mode-switch {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:5px;
    margin-bottom:17px;
    border:1px solid rgba(25,221,228,.14);
    border-radius:14px;
    background:rgba(5,9,20,.56);
}

.auth-login-mode-btn {
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px;
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    color:#8396ac;
    background:transparent;
    font-size:11px;
    font-weight:850;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.auth-login-mode-btn:hover {
    color:#f5f9ff;
    border-color:rgba(25,221,228,.20);
    transform:translateY(-1px);
}

.auth-login-mode-btn.active {
    color:#ffffff;
    border-color:rgba(25,221,228,.26);
    background:
        linear-gradient(
            135deg,
            #2D58C3,
            #6127CB
        );
    box-shadow:
        0 9px 25px rgba(45,88,195,.16),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.auth-pin-input {
    letter-spacing:.22em !important;
    font-variant-numeric:tabular-nums;
    font-weight:900 !important;
}

.auth-pin-create-box {
    margin:4px 0 18px;
    padding:14px;
    border:1px solid rgba(218,162,7,.17);
    border-radius:15px;
    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(97,39,203,.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(45,88,195,.06),
            rgba(184,87,14,.045)
        );
}

.auth-pin-create-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.auth-pin-create-head strong {
    display:block;
    color:#f5f9ff;
    font-size:13px;
    font-weight:900;
}

.auth-pin-create-head span {
    display:block;
    margin-top:3px;
    color:#8194aa;
    font-size:10px;
    line-height:1.45;
}

.auth-pin-create-head > i {
    flex:0 0 auto;
    color:#DAA207;
    font-size:22px;
}

.auth-pin-privacy {
    display:flex;
    align-items:flex-start;
    gap:7px;
    margin-top:3px;
    color:#72869d;
    font-size:9.5px;
    line-height:1.45;
}

.auth-pin-privacy i {
    margin-top:2px;
    color:#37AF79;
}

.auth-heading {
    text-shadow:
        0 0 18px
        rgba(25,221,228,.035);
}

@media (max-width:560px) {

    .auth-login-mode-switch {
        gap:5px;
        padding:4px;
        margin-bottom:14px;
    }

    .auth-login-mode-btn {
        min-height:44px;
        padding:7px 4px;
        font-size:10px;
    }

    .auth-pin-create-box {
        padding:11px;
        border-radius:13px;
    }

    .auth-pin-create-head strong {
        font-size:12px;
    }

    .auth-pin-create-head span {
        font-size:9px;
    }
}


/* BHAVYA_PIN_MANAGEMENT_V5 */

.bh-pin-code-btn {
    width:100%;
    min-height:44px;
    margin:-2px 0 14px;
    border:1px solid rgba(25,221,228,.18);
    border-radius:11px;
    background:rgba(25,221,228,.055);
    color:#c8f9ff;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.bh-pin-code-btn:hover {
    border-color:rgba(25,221,228,.35);
    background:rgba(45,88,195,.10);
}

.bh-pin-rule {
    margin:-3px 0 15px;
    color:#7f92aa;
    font-size:9.5px;
    line-height:1.45;
}