#sf-feedback {
    display: grid;
    justify-items: center;
    margin-block: 2rem;
}

#sf-smiley-container img {
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin: 5px;
    transition: transform 0.2s;
}
#sf-smiley-container img:hover {
    transform: scale(1.1);
}

#sf-popup {
    padding: 20px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    max-width: 440px;
    text-align: center;
}

#sf-popup::backdrop {
    background: rgba(0,0,0,0.3);
}

#sf-popup textarea {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    padding: 7px;
    border-radius: 5px;
    resize: vertical;
}
#sf-popup textarea:focus-visible {
    outline: none;
}

#sf-popup button {
    padding: 7px 20px;
    background: transparent;
    border: 2px solid #006e95;
}

#sf-popup button#sf-submit {
    border-color: transparent;
    background: #006e95;
    color: white;
}

#sf-selected-smiley img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}