html, body{
    max-width:100%;
    overflow-x:hidden;
}

#login_wrap{
    overflow-x:hidden;
    background:#050914;
}

/* HERO */
.bnr-wrapper{
    position:relative;
    min-height:100dvh;
    padding-top:110px;
    padding-bottom:70px;
    overflow:hidden;
    color:#fff;
}

/* BACKGROUND IMAGE + DARK OVERLAY */
.bnr-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(5,9,20,.82), rgba(5,9,20,.88)),
        url("images/bg.jpg") center/cover no-repeat;
    z-index:0;
}

/* FLAG */
#intro_lang{
    position:absolute;
    top:18px;
    right:18px;
    padding:6px 8px;
    background:rgba(0,0,0,.4);
    border-radius:6px;
    z-index:5;
    cursor:pointer;
}
#intro_lang img{height:18px;}

/* CENTER */
.bnr-center{
    position:relative;
    z-index:3;
    margin:auto;
    max-width:420px;
    text-align:center;
}

.bnr-logo img{
    height:58px;
    margin-bottom:10px;
}

.bnr-title{
    font-size:26px;
    margin-bottom:14px;
    padding:0 20px;
    line-height:1.2;
}

/* CARD LOGIN */
.bnr-card{
    width:92%;
    max-width:340px;
    margin:auto;
    padding:22px 18px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    display:flex;
    flex-direction:column;
    gap:10px;
}

.bnr-card label{
    color:#e2e8f0;
    font-size:13px;
}

.full_input{
    height:40px;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.14);
    color:white;
}

.bnr-card button{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:none;
    font-weight:600;
}

.bnr-btn-login{background:linear-gradient(135deg,#00eaff,#00bcd4);}
.bnr-btn-guest{background:#2d3748;}
.bnr-btn-register{background:linear-gradient(135deg,#ff00c8,#ff4fd8);}

.bnr-new{font-size:13px;margin-top:4px;color:#e2e8f0;}

.bnr-forgot a{
    color:#7dd3fc;
    font-size:13px;
    cursor:pointer;
}

/* ABOUT (mic din card) */
.bnr-about{
    margin-top:10px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.15);
}
.bnr-about-title{
    font-weight:700;
    font-size:13px;
}
.bnr-about-text{
    font-size:12.5px;
    color:#e2e8f0;
}

/* ================= BUBBLES AVATAR ================= */

#bestnew_bubbles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.bubble{
    position:absolute;
    width:40px;
    height:40px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 18px rgba(0,234,255,.25);
    animation:float 14s infinite ease-in-out;
}

.bubble_avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}

@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-18px)}
    100%{transform:translateY(0)}
}

/* poziții bule */
.bubble_1{top:12%;left:6%;}
.bubble_2{top:20%;right:7%;}
.bubble_3{top:35%;left:4%;}
.bubble_4{top:45%;right:6%;}
.bubble_5{bottom:22%;left:7%;}
.bubble_6{bottom:18%;right:8%;}
.bubble_7{top:10%;left:18%;}
.bubble_8{top:28%;right:18%;}
.bubble_9{bottom:32%;left:18%;}
.bubble_10{bottom:28%;right:18%;}
.bubble_11{top:8%;left:30%;}
.bubble_12{top:15%;right:28%;}
.bubble_13{top:60%;left:22%;}
.bubble_14{top:68%;right:24%;}
.bubble_15{bottom:10%;left:35%;}
.bubble_16{bottom:14%;right:32%;}
.bubble_17{top:40%;left:45%;}
.bubble_18{top:35%;right:44%;}

/* ================= SOCIAL HERO (ORIGINAL PROBLEM FIX) ================= */

.bnr-wrapper .bnr-social{
    background:transparent;
    margin-top:60px;
    display:flex;
    justify-content:center;
    align-items:flex-start; /* AICI era problema */
    flex-wrap:nowrap;
    gap:34px;
    z-index:4;
    position:relative;
}


.bnr-wrapper .bnr-social-box{
    width:300px;
    min-height:220px;
    padding:28px 26px;

    border-radius:20px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.18);

    text-align:center;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}


/* icon */
.social-icon{
    width:58px;
    height:58px;
    margin:0 auto 14px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:linear-gradient(135deg,#00eaff,#ff00c8);
}

/* ================= DESPRE NOI GLASS BOX ================= */

.bnr-about-bottom{
    background:#050914;
    padding:110px 20px 130px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:relative;
    text-align:center;
}

/* glass card */
.bnr-about-bottom::before{
    content:"";
    position:absolute;
    width:720px;
    max-width:92%;
    height:260px;
    background:rgba(255,255,255,.06);
    border-radius:28px;
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.bnr-about-bottom h2{
    position:relative;
    font-size:30px;
    margin-bottom:18px;
}

.bnr-about-bottom p{
    position:relative;
    max-width:620px;
    color:#cbd5e1;
    line-height:1.8;
    font-size:16px;
}

/* MOBILE */
@media(max-width:768px){

    .bnr-wrapper .bnr-social{
        flex-direction:column;
        flex-wrap:wrap;
        align-items:center;
        gap:18px;
    }

    .bnr-wrapper .bnr-social-box{
        width:92%;
        max-width:320px;
    }

    .bubble{width:32px;height:32px;}

}
/* ===== FORCE DESKTOP LAYOUT FIX ===== */

#login_wrap .bnr-social{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:flex-start !important;
    flex-wrap:nowrap !important;
    gap:34px !important;
}

#login_wrap .bnr-social-box{
    width:300px !important;
    min-height:230px !important;
    display:flex !important;
    flex-direction:column !important;
}

#login_wrap .bnr-social-box h3{
    font-size:19px !important;
    margin:12px 0 10px !important;
}

#login_wrap .bnr-social-box p{
    font-size:14.5px !important;
    line-height:1.6 !important;
}

/* MOBILE rămâne vertical */
@media(max-width:768px){
    #login_wrap .bnr-social{
        flex-direction:column !important;
        align-items:center !important;
    }
}
/* ===== LOGIN HERO CARDS FIX ===== */

#login_wrap .bnr-social{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:34px;
}

#login_wrap .bnr-social-box{
    width:300px;
    min-height:230px;
    display:flex;
    flex-direction:column;
    padding:28px 26px;
}

#login_wrap .bnr-social-box h3{
    font-size:19px;
    margin:12px 0 10px;
}

#login_wrap .bnr-social-box p{
    font-size:14.5px;
    line-height:1.6;
}
/* ===== FIX CULOARE TEXT HERO ===== */

/* titlurile */
#login_wrap .bnr-social-box h3{
    color:#ffffff !important;
}

/* descrierile */
#login_wrap .bnr-social-box p{
    color:#dbeafe !important;
}

/* iconurile raman luminoase */
#login_wrap .bnr-social-box{
    color:#fff;
}

/* DESPRE NOI */
#login_wrap .bnr-about-bottom h2{
    color:#ffffff !important;
}

#login_wrap .bnr-about-bottom p{
    color:#e2e8f0 !important;
}
/* ===== MOBILE FIX - SOCIAL BOX VIZIBIL ===== */
@media(max-width:768px){

    #login_wrap .bnr-social-box{
        background:rgba(20,28,45,0.75) !important;
        border:1px solid rgba(255,255,255,0.18) !important;
        box-shadow:0 18px 40px rgba(0,0,0,0.55);
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

}
/* ===== DESKTOP SOCIAL CARDS BORDER ===== */

#login_wrap .bnr-social-box{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.05) 100%
    );
    
    border:1.5px solid rgba(255,255,255,0.28);
    border-radius:22px;

    box-shadow:
        0 18px 55px rgba(0,0,0,0.60),
        inset 0 1px 0 rgba(255,255,255,0.25);

    transition:transform .25s ease, box-shadow .25s ease;
}

/* efect hover PC */
#login_wrap .bnr-social-box:hover{
    transform:translateY(-6px);
    box-shadow:
        0 28px 75px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.35);
}
/* ===== CENTER SOCIAL CARD CONTENT ===== */

#login_wrap .bnr-social-box{
    text-align:center;
    align-items:center;
}

/* titlul */
#login_wrap .bnr-social-box h3{
    width:100%;
    text-align:center;
}

/* descrierea */
#login_wrap .bnr-social-box p{
    width:100%;
    text-align:center;
    max-width:240px;
}
/* ===== PROTECTION MESSAGE BOX ===== */

#protect_alert{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.9);
    background:linear-gradient(180deg,rgba(20,28,45,.95),rgba(10,15,28,.95));
    color:#fff;
    padding:22px 26px;
    width:320px;
    max-width:90%;
    text-align:center;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 25px 80px rgba(0,0,0,.7);
    backdrop-filter:blur(14px);
    z-index:999999;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}

#protect_alert.show{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

#protect_alert h3{
    margin-bottom:8px;
    font-size:18px;
    color:#fff;
}

#protect_alert p{
    font-size:14px;
    color:#cbd5e1;
}

/* background blur */
#protect_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    z-index:999998;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}

#protect_overlay.show{
    opacity:1;
}