/* Feedback-Box (Like-Button + Kommentarfeld) */

.feedback-box {
    position: sticky;
    top: 110px; /* etwas mehr Abstand zur Navbar, damit oben nichts abgeschnitten wird */
    align-self: start;
}

.feedback-box-inner {
    border-radius: 1rem; /* passend zu .card */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 1rem;
    background-color: #ffffff;
    color: #000000;
}

.dark-mode .feedback-box-inner {
    background-color: #2d2d2f;
    color: #f1f1f1;
}

@media (max-width: 991.98px) {
    .feedback-box {
        position: static;
        margin-top: 2rem;
    }
}

/* Like-Button im SciMate-Lila: ein einziger Lila-Ton für alle "aktiven" Zustände */
.btn-feedback-like {
    background-color: transparent;
    border: 2px solid #8677de;
    color: #8677de;
    font-weight: bold;
}

.btn-feedback-like:hover,
.btn-feedback-like.liked {
    background-color: #8677de;
    border-color: #8677de;
    color: #ffffff;
}

.dark-mode .btn-feedback-like {
    border-color: #9393ba;
    color: #ddd;
}

.dark-mode .btn-feedback-like:hover,
.dark-mode .btn-feedback-like.liked {
    background-color: #8677de;
    border-color: #8677de;
    color: #ffffff;
}

.feedback-like-count {
    background-color: #8677de;
    color: #ffffff;
}

/* Label über dem Kommentarfeld */
.feedback-label {
    color: #8677de;
    font-weight: 600;
}

.dark-mode .feedback-label {
    color: #b0a8e8;
}

/* Absenden-Button: derselbe Lila-Ton wie der Like-Button im aktiven Zustand */
.btn-feedback-send {
    background-color: #8677de;
    border-color: #8677de;
    color: #ffffff;
    font-weight: bold;
}

.btn-feedback-send:hover {
    background-color: #6f5fcf;
    border-color: #6f5fcf;
    color: #ffffff;
}

.dark-mode .btn-feedback-send {
    background-color: #8677de;
    border-color: #8677de;
    color: #ffffff;
}

.dark-mode .btn-feedback-send:hover {
    background-color: #6f5fcf;
    border-color: #6f5fcf;
    color: #ffffff;
}