/* =========================================================
   REPORT PAGE
========================================================= */

.report-section{

    min-height: 100vh;

    padding: 140px 8% 80px;

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

    color: white;

    position: relative;

    overflow: hidden;
}



/* =========================
   BACKGROUND GLOW EFFECTS
========================= */

.report-section::before{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

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

    filter: blur(120px);

    top: -120px;

    left: -120px;
}


.report-section::after{

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

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

    filter: blur(120px);

    bottom: -150px;

    right: -120px;
}



/* =========================================================
   REPORT CONTAINER
========================================================= */

.report-container{

    max-width: 1300px;

    margin: auto;

    position: relative;

    z-index: 1;
}






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

.report-header{

    text-align: center;

    margin-bottom: 60px;
}



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

.report-header h2{

    font-size: 58px;

    margin-bottom: 20px;

    font-weight: 800;
}



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

.report-header p{

    max-width: 700px;

    margin: auto;

    font-size: 20px;

    line-height: 1.8;

    color:
    rgba(255,255,255,0.8);
}






/* =========================================================
   CATEGORY GRID
========================================================= */

.category-grid{

    display: grid;

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

    gap: 20px;

    margin-bottom: 60px;
}



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

.category-card{

    padding: 22px 20px;

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

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

    border-radius: 20px;

    backdrop-filter: blur(12px);

    cursor: pointer;

    transition: 0.3s;

    font-size: 17px;

    font-weight: 600;

    text-align: center;
}



/* =========================
   CATEGORY HOVER
========================= */

.category-card:hover{

    transform: translateY(-6px);

    background:
    rgba(139,92,246,0.25);

    border-color:
    rgba(255,255,255,0.2);
}



/* =========================
   ACTIVE CATEGORY
========================= */

.active-category{

    background:
    rgba(139,92,246,0.35);

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

    transform: translateY(-6px);

    box-shadow:
    0 10px 25px rgba(139,92,246,0.25);
}



/* =========================
   SENSITIVE CATEGORY
========================= */

.sensitive{

    border:
    1px solid rgba(255,80,80,0.3);

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






/* =========================================================
   REPORT FORM
========================================================= */

.report-form{

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

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

    border-radius: 30px;

    padding: 50px;

    backdrop-filter: blur(14px);

    box-shadow:
    0 15px 40px rgba(0,0,0,0.25);
}



/* =========================================================
   INPUT GROUP
========================================================= */

.input-group{

    display: flex;

    flex-direction: column;

    margin-bottom: 30px;
}



/* =========================
   LABELS
========================= */

.input-group label{

    margin-bottom: 12px;

    font-size: 17px;

    font-weight: 600;
}



/* =========================
   INPUTS & TEXTAREA
========================= */

.input-group input,
.input-group textarea{

    width: 100%;

    padding: 18px 20px;

    border-radius: 16px;

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

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

    color: white;

    font-size: 16px;

    outline: none;

    transition: 0.3s;
}



/* =========================
   INPUT FOCUS
========================= */

.input-group input:focus,
.input-group textarea:focus{

    border-color: #8b5cf6;

    box-shadow:
    0 0 20px rgba(139,92,246,0.3);
}



/* =========================
   TEXTAREA
========================= */

.input-group textarea{

    min-height: 160px;

    resize: vertical;
}



/* =========================
   PLACEHOLDER
========================= */

.input-group input::placeholder,
.input-group textarea::placeholder{

    color:
    rgba(255,255,255,0.5);
}






/* =========================================================
   FILE INPUT
========================================================= */

input[type="file"]{

    padding: 14px;

    cursor: pointer;
}






/* =========================================================
   MEDIA PREVIEW
========================================================= */

.media-preview{

    margin-top: 25px;

    display: grid;

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

    gap: 20px;
}



/* =========================
   IMAGES & VIDEOS
========================= */

.media-preview img,
.media-preview video{

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 18px;

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

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






/* =========================================================
   ANONYMOUS OPTION
========================================================= */

.anonymous-box{

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;

    font-size: 17px;
}



/* =========================
   CHECKBOX
========================= */

.anonymous-box input{

    width: 20px;

    height: 20px;

    accent-color: #8b5cf6;
}






/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit-btn{

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 18px;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
    );

    color: white;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;
}



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

.submit-btn:hover{

    transform: translateY(-4px);

    box-shadow:
    0 10px 30px rgba(139,92,246,0.4);
}






/* =========================================================
   SUCCESS POPUP
========================================================= */

.success-popup{

    position: fixed;

    inset: 0;

    background:
    rgba(0,0,0,0.6);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    pointer-events: none;

    transition: 0.3s;

    z-index: 9999;
}



/* =========================
   SHOW SUCCESS POPUP
========================= */

.success-popup.show{

    opacity: 1;

    pointer-events: auto;
}



/* =========================================================
   ERROR POPUP
========================================================= */

.error-popup{

    position: fixed;

    inset: 0;

    background:
    rgba(0,0,0,0.6);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    pointer-events: none;

    transition: 0.3s;

    z-index: 9999;
}



/* =========================
   SHOW ERROR POPUP
========================= */

.error-popup.show{

    opacity: 1;

    pointer-events: auto;
}






/* =========================================================
   POPUP BOX
========================================================= */

.popup-box{

    width: 90%;

    max-width: 420px;

    background:
    rgba(15,23,42,0.95);

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

    border-radius: 28px;

    padding: 40px 30px;

    text-align: center;

    backdrop-filter: blur(14px);

    transform: scale(0.8);

    transition: 0.3s;
}



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

.success-popup.show .popup-box,
.error-popup.show .popup-box{

    transform: scale(1);
}



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

.popup-icon{

    font-size: 70px;

    margin-bottom: 20px;
}



/* =========================
   POPUP TITLE
========================= */

.popup-box h3{

    font-size: 32px;

    margin-bottom: 15px;
}



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

.popup-box p{

    color:
    rgba(255,255,255,0.75);

    line-height: 1.7;

    margin-bottom: 30px;
}



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

.close-popup,
.close-error-popup{

    padding: 14px 28px;

    border: none;

    border-radius: 16px;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
    );

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}



/* =========================
   POPUP BUTTON HOVER
========================= */

.close-popup:hover,
.close-error-popup:hover{

    transform: translateY(-2px);
}






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

@media(max-width:768px){



    /* =========================
       REPORT SECTION
    ========================= */

    .report-section{

        padding: 120px 20px 60px;
    }



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

    .report-header h2{

        font-size: 40px;
    }


    .report-header p{

        font-size: 17px;
    }



    /* =========================
       FORM
    ========================= */

    .report-form{

        padding: 30px 20px;
    }



    /* =========================
       CATEGORY GRID
    ========================= */

    .category-grid{

        grid-template-columns: 1fr;
    }



    /* =========================
       POPUP BOX
    ========================= */

    .popup-box{

        padding: 35px 22px;
    }


    .popup-box h3{

        font-size: 26px;
    }

}