/* ==========================
   MODAL LIVE
========================== */

.live-modal {

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);

    display:none;

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

    z-index:99999;

}


.live-modal.active {

    display:flex;

}



/* ==========================
   CAIXA
========================== */


.live-box {

    width:460px;
    max-width:90%;

    background:
    linear-gradient(
        145deg,
        #151b2b,
        #0f121a
    );


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

    border-radius:22px;

    padding:30px;


    display:flex;
    flex-direction:column;


    box-shadow:

    0 25px 80px rgba(0,0,0,.65),

    0 0 40px rgba(59,130,246,.15);


    animation:abrirModal .25s ease;

}



@keyframes abrirModal {

    from {

        opacity:0;
        transform:translateY(20px) scale(.95);

    }


    to {

        opacity:1;
        transform:translateY(0) scale(1);

    }

}



/* ==========================
   TITULO
========================== */


.live-box h2 {

    color:#fff;

    font-size:24px;

    margin-bottom:25px;

}



/* ==========================
   CAMPOS
========================== */


.live-box input,
.live-box textarea,
.live-box select {


    width:100%;


    box-sizing:border-box;


    padding:14px 16px;


    margin-bottom:15px;


    background:#0b0f18;


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


    border-radius:12px;


    color:#fff;


    font-size:14px;


    outline:none;


    transition:.25s;

}



.live-box input:focus,
.live-box textarea:focus,
.live-box select:focus {


    border-color:#3b82f6;


    box-shadow:
    0 0 15px rgba(59,130,246,.25);

}



.live-box textarea {


    min-height:110px;

    resize:none;

}



/* ==========================
   AÇÕES
========================== */


.live-actions {


    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:10px;

}



.live-actions button {


    padding:12px 20px;


    border:none;


    border-radius:12px;


    cursor:pointer;


    font-weight:600;


    transition:.25s;

}



#cancelarLive {


    background:#252b38;

    color:#ddd;

}



#cancelarLive:hover {

    background:#343c4d;

}



#iniciarLive {


    background:

    linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );


    color:white;


    box-shadow:

    0 0 20px rgba(59,130,246,.35);

}



#iniciarLive:hover {

    transform:translateY(-2px);

}



/* ==========================
   MENU CRIAR
========================== */


.create-menu {


    position:absolute;

    top:calc(100% + 10px);

    right:0;


    width:340px;


    background:rgba(20,20,20,.96);


    backdrop-filter:blur(12px);


    border-radius:18px;


    overflow:hidden;


    display:none;


    z-index:9999;

}



.create-menu.active {

    display:block;

}



.create-option {


    width:100%;


    display:flex;

    align-items:center;


    gap:18px;


    padding:18px 22px;


    border:none;


    background:none;


    color:white;


    cursor:pointer;

}



.create-option:hover {

    background:#202734;

}

/* ==========================
   BOTÃO CRIAR
========================== */

.create-post-btn {

    display:flex;

    align-items:center;

    gap:8px;


    background:
    linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );


    color:#fff;


    border:none;


    padding:10px 18px;


    border-radius:12px;


    font-size:14px;


    font-weight:600;


    cursor:pointer;


    box-shadow:

    0 0 20px rgba(59,130,246,.25);


    transition:.25s;

}


.create-post-btn i {

    font-size:15px;

}


.create-post-btn:hover {


    transform:translateY(-2px);


    box-shadow:

    0 0 30px rgba(59,130,246,.45);

}