/* =========================================================
   ISSUES HERO SECTION
========================================================= */

.issues-hero{

    padding: 140px 8% 80px;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b,
    #312e81
    );

    text-align: center;

    position: relative;

    overflow: hidden;
}



/* =========================
   HERO GLOW EFFECTS
========================= */

.issues-hero::before{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    background:
    rgba(124,58,237,0.18);

    filter: blur(120px);

    top: -150px;

    left: -100px;
}


.issues-hero::after{

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background:
    rgba(59,130,246,0.16);

    filter: blur(120px);

    bottom: -150px;

    right: -100px;
}



/* =========================
   HERO CONTENT
========================= */

.issues-hero-content{

    position: relative;

    z-index: 1;
}


.issues-hero-content h1{

    font-size: 60px;

    color: white;

    margin-bottom: 20px;
}


.issues-hero-content p{

    color: #d1d5db;

    font-size: 20px;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;
}






/* =========================================================
   SEARCH BOX
========================================================= */

.search-box{

    max-width: 700px;

    margin: 40px auto 0;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    backdrop-filter: blur(12px);
}



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

.search-box i{

    color: white;

    font-size: 18px;
}



/* =========================
   SEARCH INPUT
========================= */

.search-box input{

    width: 100%;

    background: transparent;

    border: none;

    outline: none;

    color: white;

    font-size: 16px;
}


.search-box input::placeholder{

    color: #9ca3af;
}






/* =========================================================
   COMMON SECTION STYLING
========================================================= */

.trending-section,
.category-section,
.all-issues-section{

    padding: 80px 8%;

    background: #050816;
}



/* =========================
   SECTION TITLE
========================= */

.section-title{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

    gap: 20px;
}


.section-title h2{

    color: white;

    font-size: 36px;
}



/* =========================
   VIEW MORE BUTTON
========================= */

.view-more-btn{

    text-decoration: none;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    color: white;

    padding: 12px 22px;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 600;

    transition: 0.3s;
}


.view-more-btn:hover{

    transform: translateY(-3px);

    box-shadow:
    0 10px 25px rgba(124,58,237,0.3);
}






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

.issue-card{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 22px;

    padding: 25px;

    backdrop-filter: blur(10px);

    transition: 0.3s;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.2);
}


.issue-card:hover{

    transform: translateY(-6px);

    box-shadow:
    0 12px 35px rgba(0,0,0,0.28);
}



/* =========================
   ISSUE TOP
========================= */

.issue-top{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

    flex-wrap: wrap;
}



/* =========================
   CATEGORY BADGE
========================= */

.issue-category{

    background:
    rgba(124,58,237,0.2);

    color: #c4b5fd;

    padding: 8px 14px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;
}



/* =========================
   ISSUE TIME
========================= */

.issue-time{

    color: #9ca3af;

    font-size: 14px;
}



/* =========================
   ISSUE TITLE
========================= */

.issue-title{

    color: white;

    font-size: 28px;

    margin-bottom: 15px;

    line-height: 1.3;
}



/* =========================
   ISSUE DESCRIPTION
========================= */

.issue-description{

    color: #d1d5db;

    line-height: 1.8;

    margin-bottom: 20px;
}



/* =========================
   ISSUE LOCATION
========================= */

.issue-location{

    color: #a78bfa;

    margin-bottom: 20px;

    font-size: 15px;
}






/* =========================================================
   ISSUE ACTION BUTTONS
========================================================= */

.issue-actions{

    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}



/* =========================
   COMMON ACTION BUTTON
========================= */

.action-btn{

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    color: white;

    padding: 10px 18px;

    border-radius: 12px;

    cursor: pointer;

    font-size: 14px;

    transition: 0.3s;
}



/* =========================
   ACTION BUTTON HOVER
========================= */

.action-btn:hover{

    background: #7c3aed;

    transform: translateY(-2px);
}



/* =========================
   LIKE BUTTON
========================= */

.like-btn.active-like{

    background: #16a34a;

    border-color: #16a34a;
}



/* =========================
   DISLIKE BUTTON
========================= */

.dislike-btn.active-dislike{

    background: #dc2626;

    border-color: #dc2626;
}






/* =========================================================
   ISSUES GRID
========================================================= */

.issues-grid{

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap: 25px;
}



/* =========================
   ALL ISSUES CONTAINER
========================= */

.all-issues-container{

    display: flex;

    flex-direction: column;

    gap: 25px;
}






/* =========================================================
   DISCUSSION BOX
========================================================= */

.discussion-box{

    margin-top: 20px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    padding: 20px;

    backdrop-filter: blur(10px);
}






/* =========================================================
   DISCUSSION INPUT
========================================================= */

.discussion-input{

    width: 100%;

    min-height: 110px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    padding: 14px 16px;

    color: white;

    outline: none;

    resize: vertical;

    margin-bottom: 15px;

    line-height: 1.7;

    font-size: 15px;
}


.discussion-input::placeholder{

    color: #9ca3af;
}






/* =========================================================
   COMMENT BUTTON
========================================================= */

.comment-btn{

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    color: white;

    border: none;

    padding: 12px 20px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 600;

    transition: 0.3s;
}



/* =========================
   COMMENT BUTTON HOVER
========================= */

.comment-btn:hover{

    transform: translateY(-2px);

    box-shadow:
    0 10px 25px rgba(124,58,237,0.3);
}






/* =========================================================
   COMMENTS CONTAINER
========================================================= */

.comments-container{

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    max-height: 300px;

    overflow-y: auto;

    padding-right: 5px;
}



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

.comments-container::-webkit-scrollbar{

    width: 6px;
}


.comments-container::-webkit-scrollbar-thumb{

    background: #7c3aed;

    border-radius: 20px;
}






/* =========================================================
   COMMENT ITEM
========================================================= */

.comment-item{

    margin-top: 5px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.05);

    padding: 16px;

    border-radius: 14px;

    color: #d1d5db;

    line-height: 1.8;

    animation:
    fadeIn 0.3s ease;
}



/* =========================
   COMMENT USERNAME
========================= */

.comment-item strong{

    color: #c084fc;

    font-size: 15px;
}






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

@keyframes fadeIn{

    from{

        opacity: 0;

        transform: translateY(10px);
    }

    to{

        opacity: 1;

        transform: translateY(0);
    }

}






/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media(max-width:768px){



    /* =========================
       HERO SECTION
    ========================= */

    .issues-hero{

        padding: 120px 6% 70px;
    }


    .issues-hero-content h1{

        font-size: 42px;
    }


    .issues-hero-content p{

        font-size: 16px;
    }



    /* =========================
       SECTION TITLES
    ========================= */

    .section-title{

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .section-title h2{

        font-size: 28px;
    }



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

    .issue-title{

        font-size: 22px;
    }


    .issue-actions{

        gap: 10px;
    }


    .action-btn{

        width: 100%;

        justify-content: center;
    }



    /* =========================
       SEARCH BOX
    ========================= */

    .search-box{

        padding: 16px 18px;
    }



    /* =========================
       VIEW MORE BUTTON
    ========================= */

    .view-more-btn{

        width: 100%;

        text-align: center;
    }



    /* =========================
       DISCUSSION INPUT
    ========================= */

    .discussion-input{

        min-height: 90px;
    }

}

.issue-card{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.1);

    padding:
    20px;

    margin-bottom:
    20px;

    border-radius:
    16px;

}



.issue-category{

    color:
    #9f7aea;

    font-weight:
    700;

    margin-bottom:
    10px;

}



.issue-user{

    margin-top:
    15px;

    opacity:
    0.8;

}



.issue-location{

    margin-top:
    10px;

}



.issue-likes{

    margin-top:
    10px;

    color:
    #8b5cf6;

}