/* "Was this page helpful?" card, under the service content.
 *
 * Theme variables only, so it follows the brand palette.
 */

.service-feedback {
    margin-top: 40px;
    padding: 30px 35px;
    background-color: var(--thm-light-bg);
    border-top: 3px solid var(--thm-primary);
}

.service-feedback h4 {
    margin-bottom: 8px;
    font-size: 20px;
}

.service-feedback p {
    margin-bottom: 20px;
    font-size: 15px;
}

.service-feedback-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.service-feedback .btn {
    padding: 12px 32px;
    font-size: 15px;
}

.service-feedback .btn i {
    margin-right: 8px;
}

/* "No" is the quieter of the two, so the pair does not read as a prompt
 * to answer one way.
 */
.service-feedback .btn-outline {
    background-color: transparent;
    border: 1px solid var(--thm-border);
    color: var(--thm-black);
    transition: all 500ms ease;
}

.service-feedback .btn-outline:hover {
    background-color: var(--thm-black);
    border-color: var(--thm-black);
    color: #fff;
}

/* Undo, after voting: a link rather than a button, so it does not compete
 * with the page's real actions.
 */
.service-feedback-change {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--thm-primary);
    text-decoration: underline;
}

.service-feedback-change:hover {
    color: var(--thm-black);
}

/* While a vote is in flight. Brief, but it stops a second click landing
 * before the first has answered.
 */
.service-feedback.is-busy {
    opacity: 0.6;
}

.service-feedback.is-busy button {
    cursor: progress;
}