/*
 * BETCRAFT STUDIO LOGIN V1.1.0
 * -------------------------------------------------------
 * CLEAN LOGIN VISUAL LAYER
 *
 * Desktop:
 * - one uninterrupted stadium background
 * - brand composition floats directly over field
 * - login console floats right
 *
 * Mobile:
 * - dedicated portrait composition
 * - centered brand + login
 *
 * No left/right background panels.
 */

/* kill every previous temporary login presentation */
#betcraft-login-brand,
#betcraft-v1-corner {
    display: none !important;
}


/* =======================================================
   LOGIN LEGACY BACKGROUND NEUTRALIZATION
   ======================================================= */

body.betcraft-v1.betcraft-route-login {
    background: #020814 !important;
}

body.betcraft-v1.betcraft-route-login .app-container,
body.betcraft-v1.betcraft-route-login .app-main,
body.betcraft-v1.betcraft-route-login .app-main__outer,
body.betcraft-v1.betcraft-route-login .app-main__inner {
    background: transparent !important;
}

/* =======================================================
   REAL LOGIN VIEWPORT
   ======================================================= */

.betcraft-login-stage {
    position: relative !important;

    width: 100% !important;
    min-width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;

    overflow: hidden !important;

    background-color: #071a38 !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/*
 * Blue-white illumination.
 * This adds light rather than painting a dark veil.
 */
.betcraft-login-stage::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    /*
     * Neutral contrast only.
     * No cyan / pale-blue wash.
     * Preserve the actual stadium artwork colors.
     */
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .03) 0%,
            rgba(0, 0, 0, .015) 42%,
            rgba(0, 0, 0, .08) 100%
        );
}

/*
 * Very light edge control only.
 * Stadium remains fully visible.
 */
.betcraft-login-stage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 110px
        rgba(0, 6, 20, .22);
}

.betcraft-login-stage > * {
    position: relative;
    z-index: 2;
}

/* =======================================================
   LOGIN COMPONENT
   ======================================================= */

.betcraft-login-stage > .mx-auto {
    width: 100% !important;

    position: relative !important;

    z-index: 4 !important;
}

/* Card itself */
.betcraft-login-stage .main-card.card {
    overflow: hidden !important;

    margin: 0 !important;

    background:
        rgba(247, 250, 255, .96) !important;

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

    border-radius:
        24px !important;

    box-shadow:
        0 30px 90px
        rgba(0, 20, 60, .28) !important;

    backdrop-filter: none !important;
}

.betcraft-login-stage .card-body {
    padding:
        32px !important;
}

.betcraft-login-stage .card-title {
    margin-bottom:
        4px !important;

    color:
        #10254a !important;

    font-size:
        22px !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.025em !important;
}

.betcraft-login-stage .card-body > p,
.betcraft-login-stage .card-body .text-muted {
    color:
        #68758a !important;
}

.betcraft-login-stage .form-label {
    color:
        #263957 !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;
}

.betcraft-login-stage .form-control {
    min-height:
        52px !important;

    padding:
        0 15px !important;

    color:
        #152238 !important;

    background:
        #ffffff !important;

    border:
        1px solid
        #d8e0eb !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;

    font-size:
        15px !important;
}

.betcraft-login-stage .form-control:focus {
    border-color:
        #347dff !important;

    box-shadow:
        0 0 0 3px
        rgba(52,125,255,.12) !important;
}

.betcraft-login-stage .form-control::placeholder {
    color:
        #8b96a8 !important;
}

.betcraft-login-stage .btn-primary {
    min-height:
        52px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #155be8 0%,
            #208cff 100%
        ) !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    font-weight:
        900 !important;

    box-shadow:
        0 12px 28px
        rgba(27,112,238,.24) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

.betcraft-login-stage .btn-primary:hover {
    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 15px 34px
        rgba(27,112,238,.30) !important;
}

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

@media (min-width: 901px) {

    .betcraft-login-stage {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        padding:
            54px
            clamp(60px, 7vw, 130px)
            54px
            clamp(60px, 7vw, 130px)
            !important;

        background-image:
            url("./media/betcraft-login-bg-desktop.jpg")
            !important;

        background-position:
            center center !important;
    }

    /*
     * The actual LoginComponent is right aligned.
     * No black side block.
     */
    .betcraft-login-stage > .mx-auto {
        width:
            450px !important;

        max-width:
            450px !important;

        margin:
            0 !important;
    }

    /*
     * Remove duplicated centered brand above login on desktop.
     * Desktop identity lives in the open field at left.
     */
    .betcraft-login-brand-block {
        display:
            none !important;
    }

    /* Brand statement floating directly over stadium */
    #betcraft-login-v110-intro {
        position:
            absolute !important;

        left:
            clamp(62px, 7vw, 140px);

        top:
            50%;

        z-index:
            3 !important;

        width:
            min(42vw, 610px);

        transform:
            translateY(-50%);

        color:
            #ffffff;

        pointer-events:
            none;
    }

    .bc-v110-intro-logo {
        display:
            block;

        width:
            150px;

        height:
            auto;

        margin-bottom:
            22px;

        filter:
            drop-shadow(
                0 8px 24px
                rgba(0,0,0,.24)
            );
    }

    .bc-v110-eyebrow {
        margin-bottom:
            14px;

        color:
            #a9d5ff;

        font-size:
            13px;

        font-weight:
            900;

        letter-spacing:
            .22em;

        text-transform:
            uppercase;

        text-shadow:
            0 2px 14px
            rgba(0,0,0,.24);
    }

    .bc-v110-title {
        margin:
            0;

        color:
            #ffffff;

        font-size:
            clamp(
                58px,
                5.4vw,
                86px
            );

        line-height:
            .92;

        font-weight:
            900;

        letter-spacing:
            -.065em;

        text-shadow:
            0 8px 38px
            rgba(0,15,45,.34);
    }

    .bc-v110-copy {
        max-width:
            480px;

        margin:
            24px 0 0;

        color:
            rgba(
                240,
                248,
                255,
                .86
            );

        font-size:
            16px;

        line-height:
            1.65;

        font-weight:
            550;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.24);
    }

    .bc-v110-line {
        width:
            62px;

        height:
            3px;

        margin:
            28px 0 16px;

        border-radius:
            999px;

        background:
            #67b8ff;
    }

    .bc-v110-foot {
        color:
            rgba(
                224,
                242,
                255,
                .70
            );

        font-size:
            11px;

        font-weight:
            850;

        letter-spacing:
            .18em;

        text-transform:
            uppercase;
    }
}

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

@media (max-width: 900px) {

    .betcraft-login-stage {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        padding:
            30px 18px !important;

        background-image:
            url("./media/betcraft-login-bg-mobile.jpg")
            !important;

        background-position:
            center top !important;
    }

    /*
     * Desktop field statement is intentionally gone.
     * Mobile has its own compact identity.
     */
    #betcraft-login-v110-intro {
        display:
            none !important;
    }

    .betcraft-login-stage > .mx-auto {
        width:
            100% !important;

        max-width:
            420px !important;

        margin:
            0 auto !important;
    }

    .betcraft-login-brand-block {
        display:
            block !important;

        position:
            relative !important;

        margin-bottom:
            24px !important;

        padding-top:
            116px !important;

        text-align:
            center !important;
    }

    .betcraft-login-brand-block::before {
        content:
            "" !important;

        position:
            absolute !important;

        top:
            0 !important;

        left:
            50% !important;

        width:
            104px !important;

        height:
            104px !important;

        transform:
            translateX(-50%) !important;

        background:
            url("./media/betcraft-studio-v1.png")
            center / contain
            no-repeat !important;

        filter:
            drop-shadow(
                0 7px 22px
                rgba(0,0,0,.25)
            );
    }

    .betcraft-login-brand-block .display-6 {
        margin:
            0 0 5px !important;

        color:
            #ffffff !important;

        font-size:
            30px !important;

        line-height:
            1.05 !important;

        font-weight:
            900 !important;

        letter-spacing:
            -.04em !important;

        text-shadow:
            0 3px 20px
            rgba(0,0,0,.34) !important;
    }

    .betcraft-login-brand-block .text-muted {
        color:
            rgba(
                236,
                247,
                255,
                .82
            ) !important;

        font-size:
            12px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .11em !important;

        text-transform:
            uppercase !important;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.30);
    }

    .betcraft-login-stage .main-card.card {
        border-radius:
            22px !important;

        box-shadow:
            0 24px 70px
            rgba(0,18,55,.28) !important;
    }

    .betcraft-login-stage .card-body {
        padding:
            26px !important;
    }
}

/* =======================================================
   BETCRAFT LOGO LUMINANCE V1.1.2
   Logo only — no scene/layout/form modification
   ======================================================= */

/* Desktop real logo */
.bc-v110-intro-logo {
    width: 180px !important;

    filter:
        brightness(1.42)
        saturate(1.22)
        contrast(1.08)
        drop-shadow(0 0 10px rgba(255,255,255,.22))
        drop-shadow(0 5px 20px rgba(255,190,70,.28))
        drop-shadow(0 12px 32px rgba(0,0,0,.22))
        !important;
}

/* Mobile real logo */
.betcraft-login-brand-block::before {
    width: 118px !important;
    height: 118px !important;

    filter:
        brightness(1.42)
        saturate(1.22)
        contrast(1.08)
        drop-shadow(0 0 9px rgba(255,255,255,.20))
        drop-shadow(0 5px 18px rgba(255,190,70,.25))
        drop-shadow(0 10px 26px rgba(0,0,0,.20))
        !important;
}