/* TGF.FeedbackFormular — öffentliches Feedback-Formular (Aufführung + Sterne + Kommentar).
   Liegt im Creme-Leseband (.reading.band): feste Leseband-Farben statt var(--text)/var(--muted). */

.tgf-fbf {
    color: inherit;
}

.tgf-fbf-feld {
    margin: 1.5rem 0;
}
.tgf-fbf-label {
    display: block;
    font-weight: 600;
    color: #2a2016;
    margin-bottom: .5rem;
}
.tgf-fbf .form-select,
.tgf-fbf .form-control {
    max-width: 40rem;
}

/* ---------- Smiley-Rating (Klick, 5-stufig rot→grün) ---------- */
.tgf-fbf-smilies {
    display: inline-flex;
    gap: .7rem;
    flex-wrap: wrap;
}
.tgf-fbf-smiley {
    background: none;
    border: 0;
    padding: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.tgf-fbf-smiley svg {
    display: block;
    width: 100%;
    height: 100%;
}
.tgf-fbf-smiley:hover {
    transform: scale(1.1);
}
/* Sobald eine Auswahl getroffen ist, treten die übrigen zurück, die gewählte wird betont. */
.tgf-fbf-smilies.has-selection .tgf-fbf-smiley:not(.is-selected) {
    opacity: .38;
}
.tgf-fbf-smiley.is-selected {
    transform: scale(1.16);
    box-shadow: 0 0 0 3px rgba(36, 27, 18, .28);
}

/* ---------- Senden-Button ---------- */
.tgf-fbf-btn {
    background-color: var(--red, #c90000);
    color: #fff;
    border: 0;
    padding: .6rem 1.7rem;
    border-radius: var(--radius, 4px);
    font-weight: 600;
}
.tgf-fbf-btn:hover:not(:disabled) {
    background-color: #a60000;
    color: #fff;
}
/* Deaktiviert: klar als (inaktiver) Button erkennbar — voller Body, dezenter Rahmen,
   gedämpfte Farben statt durchscheinend. */
.tgf-fbf-btn:disabled {
    background-color: #e4dccb;
    color: #8a7d66;
    border: 1px solid rgba(36, 27, 18, .22);
    opacity: 1;
    cursor: not-allowed;
}

/* ---------- Bestätigung ---------- */
.tgf-fbf-danke {
    text-align: center;
    padding: 1.5rem 0 .5rem;
}
.tgf-fbf-check {
    font-size: 3rem;
    color: #3a9d3a;
    display: block;
    margin-bottom: .6rem;
}