/* =========================================================
   USER FEEDBACK
   Incorrect information correction system
========================================================= */


/* =========================================================
   CORRECTION BANNER
========================================================= */


.info-correction-banner {

    position: sticky;

    top: var(--space-3);

    z-index: 50;


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-4);


    padding:

        var(--space-4);


    margin-bottom:

        var(--space-5);


    background:

        var(--surface);


    border:

        1px solid

        var(--border-light);


    border-radius:

        var(--radius-lg);


    box-shadow:

        var(--shadow);


}



.info-correction-banner div {

    font-weight:

        600;

    color:

        var(--text);

}



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


.feedback-modal {

    position:fixed;

    inset:0;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:

        var(--space-4);


    background:

        rgba(20,30,20,.55);


    backdrop-filter:

        blur(5px);


    z-index:

        var(--z-modal);


    opacity:1;

    pointer-events:auto;


    transition:

        opacity var(--transition);

}



.feedback-modal.hidden {

    opacity:0;

    pointer-events:none;

}



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


.feedback-box {

    width:100%;

    max-width:480px;


    background:

        var(--card);


    border:

        1px solid

        var(--border-light);


    border-radius:

        var(--radius-xl);


    box-shadow:

        var(--shadow-lg);


    padding:

        var(--space-6);


    position:relative;


    transform:

        translateY(0);


}



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


#feedback-close {


    position:absolute;


    top:

        var(--space-3);


    right:

        var(--space-3);


    width:36px;

    height:36px;


    padding:0;


    border-radius:

        var(--radius-round);


}



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


.feedback-box label {


    display:block;


    margin-top:

        var(--space-4);


    margin-bottom:

        var(--space-2);


    font-size:

        var(--font-size-sm);


    font-weight:

        600;


    color:

        var(--primary);

}



.feedback-box input,
.feedback-box textarea {


    width:100%;


    padding:

        var(--space-3);


    border:

        1px solid

        var(--border);


    border-radius:

        var(--radius);


    background:

        var(--surface);


    color:

        var(--text);


}



.feedback-box textarea {


    min-height:

        120px;


    resize:

        vertical;


}



.feedback-box input:focus,
.feedback-box textarea:focus {


    outline:none;


    border-color:

        var(--accent);


}



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


#feedback-submit {


    width:100%;


    margin-top:

        var(--space-5);


}



/* =========================================================
   STATUS MESSAGE
========================================================= */


#feedback-status {


    margin-top:

        var(--space-4);


    text-align:center;


    font-size:

        var(--font-size-sm);


    color:

        var(--primary);


}



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


@media(max-width:600px){


.info-correction-banner {


    flex-direction:column;


    align-items:stretch;


}



.feedback-box {


    padding:

        var(--space-5);


}


}

/* =========================================================
   FEEDBACK ACTION BUTTON
========================================================= */


.feedback-action-btn {

    background: var(--secondary);


    color: var(--secondary);


    font-weight:

        700;


    border:

        none;


    padding:

        var(--space-3)
        var(--space-5);


    border-radius:

        var(--radius);


    cursor:

        pointer;


    box-shadow:

        0 4px 12px rgba(0,0,0,.18);


    transition:

        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}



.feedback-action-btn:hover {


    transform:

        translateY(-2px);


    box-shadow:

        0 8px 18px rgba(0,0,0,.25);


    background:

        var(--primary);

}



.feedback-action-btn:active {


    transform:

        translateY(0);

}