/* ==========================================================
   JOBMATCH
   FEED TIPO TIKTOK + LINKEDIN
   DARK MODE
   MOBILE FIRST
========================================================== */

:root {

    --bg: #0f0f10;
    --card: #16181c;
    --card-hover: #1d2128;

    --text: #ffffff;
    --text-secondary: #b5b5b5;

    --primary: #00c896;
    --primary-hover: #00e6aa;

    --danger: #ff3355;

    --border: rgba(255,255,255,.08);

    --shadow:
        0 10px 30px rgba(0,0,0,.35);

    --radius: 18px;

}

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    overflow-x:hidden;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#2a2a2a;
    border-radius:20px;
}

/* ==========================================================
   APP
========================================================== */

#app{

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

}

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

.top-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:70px;

    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 20px;

    backdrop-filter:blur(20px);

    background:
        rgba(15,15,16,.70);

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

/* ==========================================================
   LOGO
========================================================== */

.logo-area h1{

    font-size:24px;
    font-weight:800;

    color:var(--primary);

    letter-spacing:.5px;
}

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

.header-actions{

    display:flex;
    align-items:center;
    gap:12px;
}

.header-actions button{

    position:relative;

    width:44px;
    height:44px;

    border:none;

    border-radius:50%;

    background:var(--card);

    color:var(--text);

    cursor:pointer;

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

    transition:.3s;
}

.header-actions button:hover{

    background:var(--card-hover);

    transform:translateY(-2px);
}
.header-actions button i{

    font-size:18px;
}

.notification-badge{

    position:absolute;

    top:-2px;
    right:-2px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#ff3355;

    color:#fff;

    font-size:10px;
    font-weight:700;

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

    border:2px solid var(--bg);
}
/* ==========================================================
   FEED
========================================================== */

.feed-container{

    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    padding-top:90px;
    padding-bottom:100px;

    gap:40px;
}

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

.job-card{

    position:relative;

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

    min-height:88vh;

    background:var(--card);

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

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

/* ==========================================================
   VIDEO
========================================================== */

.job-video{

    position:relative;

    width:100%;
    height:70vh;

    background:#000;
}

.job-video video{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* ==========================================================
   INFO
========================================================== */

.job-info{

    padding:20px;
}

.job-company{

    display:flex;
    flex-direction:column;
    gap:5px;
}

.job-company h2{

    font-size:20px;
    font-weight:700;
}

.job-company span{

    color:var(--text-secondary);
    font-size:14px;
}

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

.job-title{

    margin-top:15px;
}

.job-title h3{

    font-size:22px;
    font-weight:700;
}

/* ==========================================================
   DESCRIÇÃO
========================================================== */

.job-description{

    margin-top:12px;
}

.job-description p{

    line-height:1.6;
    color:var(--text-secondary);
}

/* ==========================================================
   TAGS
========================================================== */

.job-tags{

    margin-top:20px;

    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.job-tags span{

    padding:8px 14px;

    border-radius:50px;

    background:
        rgba(0,200,150,.12);

    color:var(--primary);

    font-size:13px;
    font-weight:600;
}

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

.job-actions{

    position:absolute;

    right:12px;
    bottom:170px;

    display:flex;
    flex-direction:column;

    gap:18px;
}

.job-actions button{

    width:64px;
    height:64px;

    border:none;

    border-radius:50%;

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

    color:white;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    transition:.25s;
}

.job-actions button:hover{

    transform:scale(1.08);
}

.job-actions span{

    font-size:20px;
}

.job-actions strong{

    margin-top:3px;

    font-size:11px;
}

/* ==========================================================
   CANDIDATAR
========================================================== */

.job-apply{

    padding:20px;
}

.job-apply button{

    width:100%;

    border:none;

    padding:16px;

    border-radius:14px;

    background:var(--primary);

    color:#000;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.job-apply button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);
}

/* ==========================================================
   MENU INFERIOR
========================================================== */
/*
.bottom-navigation{

    position:fixed;

    bottom:0;
    left:0;

    width:100%;
    height:80px;

    background:
        rgba(15,15,16,.95);

    backdrop-filter:blur(20px);

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

    display:flex;

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

    z-index:9999;
}

.bottom-navigation a{

    display:flex;
    flex-direction:column;

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

    gap:4px;

    text-decoration:none;

    color:var(--text-secondary);

    font-size:11px;

    transition:.3s;
}

.bottom-navigation a i{

    font-size:22px;
}

.bottom-navigation a:hover{

    color:var(--primary);

    transform:translateY(-2px);
}

.publish-btn{

    width:62px;
    height:62px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #00c896,
            #00e6aa
        );

    display:flex !important;

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

    margin-top:-30px;

    box-shadow:
        0 10px 25px rgba(0,200,150,.45);

    color:#000 !important;
}
.publish-btn i{

    font-size:28px !important;
    font-weight:900;
}
.publish-btn:hover{

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 15px 35px rgba(0,200,150,.6);
}

*/
/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }
}

.job-card{

    animation:
        fadeUp .4s ease;
}

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

@media (min-width:992px){

    .feed-container{

        width:100%;
        max-width:700px;

        margin:0 auto;

        padding-top:90px;
        padding-bottom:100px;
        padding-left:20px;
        padding-right:20px;
    }

    .job-card{

        width:100%;
        max-width:700px;
    }

}

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

@media (max-width:768px){

    .header-actions button{

        padding:8px 12px;
        font-size:12px;
    }

    .job-title h3{

        font-size:20px;
    }

}

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

@media (max-width:480px){

    .job-card{

        border-radius:0;

        min-height:100vh;
        max-width:100%;
    }

    .job-video{

        height:65vh;
    }

    .job-actions{

        right:8px;
        bottom:160px;
    }

    .job-actions button{

        width:58px;
        height:58px;
    }

}


/* ==========================================================
   PAGINAÇÃO
========================================================== */

.pagination{

    display:flex;

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

    flex-wrap:wrap;

    gap:10px;

    margin:30px 0 120px;
}

.pagination a{

    min-width:44px;
    height:44px;

    padding:0 16px;

    display:flex;

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

    text-decoration:none;

    border-radius:12px;

    background:var(--card);

    color:var(--text);

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

    transition:.25s;
}

.pagination a:hover{

    background:var(--card-hover);

    transform:translateY(-2px);
}

.pagination a.active{

    background:var(--primary);

    color:#000;

    font-weight:700;

    border-color:var(--primary);
}

.btn-like.active {
    color: #ff2e63;
}

.btn-like.active span {
    transform: scale(1.15);
}