/* ================================
   FISH SHAPE BUTTON
   ================================ */
.btn-fish {
    position: relative;
    background: linear-gradient(90deg, #0099e6 0%, #005580 100%);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.6rem 2rem 0.6rem 2.5rem;
    /* Extra padding for tail and head */
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;

    /* The Fish Shape */
    clip-path: polygon(0% 0%,
            /* Tail Top */
            85% 0%,
            /* Body Top */
            100% 50%,
            /* Head/Nose */
            85% 100%,
            /* Body Bottom */
            0% 100%,
            /* Tail Bottom */
            15% 50%
            /* Tail Notch */
        );

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fish Eye */
.btn-fish::after {
    content: '';
    position: absolute;
    right: 20%;
    top: 35%;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
}

.btn-fish:hover {
    transform: translateX(-5px) scale(1.05);
    /* Swim backward slightly then pop */
    background: linear-gradient(90deg, #0077b3 0%, #003d5c 100%);
    box-shadow: -5px 5px 15px rgba(0, 85, 128, 0.4);
}

.btn-fish:active {
    transform: scale(0.95);
}

.btn-fish svg {
    margin-right: -4px;
    /* Adjust spacing */
}