/* ============================================================ 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); }