/* ============================================================
MODERNIZAÇÃO DAS CARINHAS DE AVALIAÇÃO (CSAT)
PARA A PÁGINA DO TICKET DO FRESHDESK
============================================================ */
/* container dos ícones */
#rating_block,
#csat_rating,
.fw-csat-container {
display: flex !important;
gap: 14px !important;
align-items: center;
}
/* cada carinha é um com escondido */
#rating_block label,
#csat_rating label,
.fw-csat-container label {
cursor: pointer !important;
width: 48px;
height: 48px;
border-radius: 14px !important;
border: 2px solid #e4e8ef !important;
background: #fff !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: 0.25s ease !important;
position: relative;
}
/* remove as imagens feias do Freshdesk */
#rating_block label img,
#csat_rating label img,
.fw-csat-container label img {
width: 26px !important;
height: 26px !important;
object-fit: contain;
filter: grayscale(100%) brightness(0.4);
transition: 0.25s ease;
}
/* hover */
#rating_block label:hover,
#csat_rating label:hover,
.fw-csat-container label:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(10, 87, 122, 0.15);
border-color: #0A577A !important;
}
/* quando selecionado */
#rating_block input:checked + img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
filter: brightness(1) grayscale(0);
}
#rating_block input:checked + img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
filter: none;
}
#rating_block input:checked + img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
transform: scale(1.15);
}
/* quadrado selecionado */
#rating_block input:checked + img,
#rating_block input:checked ~ img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
filter: none !important;
}
#rating_block input:checked + img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
filter: none !important;
}
#rating_block input:checked,
#csat_rating input:checked,
.fw-csat-container input:checked {
font-weight: bold;
}
#rating_block input:checked + img,
#csat_rating input:checked + img,
.fw-csat-container input:checked + img {
filter: none;
}
#rating_block input:checked ~ label,
#csat_rating input:checked ~ label,
.fw-csat-container input:checked ~ label {
border-color: #0A577A !important;
background: #0A577A !important;
}
#rating_block input:checked ~ label img,
#csat_rating input:checked ~ label img,
.fw-csat-container input:checked ~ label img {
filter: brightness(5) invert(1);
}