/* Floating Feedback Button */
#feedbackBtn {
    position: fixed;
    top: 100px;
    right: 300px;
    z-index: 1050;
    background: transparent;
    border: none;
    cursor: grab;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    #feedbackBtn.show {
        opacity: 1;
        transform: scale(1);
    }

    #feedbackBtn.hide {
        opacity: 0;
        transform: scale(0.7);
        pointer-events: none;
    }

    #feedbackBtn img {
        width: 70px;
        height: 50px;
        animation: bounceBtn 2s infinite;
    }

/* Bounce Button Animation */
@keyframes bounceBtn {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-12px);
    }

    60% {
        transform: translateY(-6px);
    }
}

#feedbackBtn img:hover {
    transform: scale(1.1);
}

/* Star Rating */
.rating {
    display: inline-flex;
    flex-direction: row-reverse; /* reverse order so highlight flows left → right */
    gap: 5px;
    justify-content: center;
}

    .rating input {
        display: none;
    }

    .rating label {
        font-size: 2rem;
        color: #ccc;
        cursor: pointer;
        transition: transform 0.2s, color 0.2s;
    }

        /* Hover: highlight all previous stars */
        .rating label:hover,
        .rating label:hover ~ label {
            color: #ffc107;
            transform: scale(1.2);
        }

    /* Checked: keep stars yellow from start to selected */
    .rating input:checked ~ label {
        color: #ffc107;
        text-shadow: 0 0 5px #ffecb3, 0 0 10px #ffca28;
    }


/* Modal header gradient */
.modal-header-success {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
}

.btn-success-gradient {
    background: linear-gradient(135deg, #28a745, #218838);
    border: none;
    color: white;
    transition: opacity 0.2s ease-in-out;
}

    .btn-success-gradient:hover {
        opacity: 0.9;
        color: white;
    }