/*======================================
LOGIN REQUIRED MODAL
======================================*/

.login-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s ease;

    z-index:99999;

}

.login-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/*======================================
OVERLAY
======================================*/

.login-modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

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

}


/*======================================
CARD
======================================*/

.login-modal-card{

    position:relative;

    width:100%;

    max-width:480px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:32px;

    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    animation:loginModalShow .3s ease;

    z-index:2;

}


/*======================================
CLOSE
======================================*/

.login-modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:var(--transition);

}

.login-modal-close:hover{

    background:var(--danger);

    color:#fff;

    transform:rotate(90deg);

}

.login-modal-close svg{

    width:20px;

    height:20px;

}


/*======================================
ICON
======================================*/

.login-modal-icon{

    width:90px;

    height:90px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(59,130,246,.12);

}

.login-modal-icon svg{

    width:42px;

    height:42px;

    color:var(--primary);

}


/*======================================
TEXT
======================================*/

.login-modal-card h2{

    font-size:1.8rem;

    font-weight:700;

    color:var(--text);

    margin-bottom:14px;

}

.login-modal-card p{

    color:var(--text-muted);

    line-height:1.7;

    margin-bottom:28px;

}


/*======================================
BENEFITS
======================================*/

.login-benefits{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:30px;

}

.login-benefits div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;

    border-radius:14px;

    background:var(--surface);

    color:var(--text);

}

.login-benefits svg{

    width:20px;

    height:20px;

    color:var(--primary);

}

.login-benefits span{

    font-size:.9rem;

    font-weight:600;

}


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

.login-modal-buttons{

    display:flex;

    gap:14px;

    margin-bottom:18px;

}

.login-modal-buttons .btn{

    flex:1;

}


/*======================================
CONTINUE
======================================*/

.continue-guest{

    width:100%;

    background:none;

    border:none;

    color:var(--text-muted);

    font-size:.95rem;

    cursor:pointer;

    transition:var(--transition);

}

.continue-guest:hover{

    color:var(--primary);

}


/*======================================
ANIMATION
======================================*/

@keyframes loginModalShow{

    from{

        opacity:0;

        transform:translateY(25px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


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

@media(max-width:768px){

    .login-modal{

        align-items:flex-end;

        padding:12px;

    }

    .login-modal-card{

        max-width:100%;

        border-radius:24px 24px 0 0;

        padding:24px;

    }

    .login-benefits{

        grid-template-columns:1fr;

    }

    .login-modal-buttons{

        flex-direction:column;

    }

}