.top-btns-container {
    display: flex;
    justify-content: center;
    background-color: #fff;
    margin: 10px auto;
    gap: 35px;
}

.topButton {
    /* background: linear-gradient(#44ea76, #39fad7); */
    background: linear-gradient(#159f33, #34d164);

    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.downButton {
    background: linear-gradient(#f0714b, #fa393c);

    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.iconWrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

/* .downButton .iconWrapper {
    rotate: 180deg;
} */

.svgIcon {
    width: 20px;
    height: 20px;
    position: absolute;
    transition: all 0.3s ease;
}

.iconHover {
    transform: translateY(100%);
    opacity: 0;
}

.buttonText {
    font-size: 0;
    color: white;
    transition: font-size 0.3s ease;
    z-index: 1;
    display: block;
    /* ✅ so it's always in the layout */
    white-space: nowrap;
    /* prevent line breaks if needed */
}

.downButton:hover {
    border-radius: 50px;
    background: linear-gradient(#fa393c, #f0714b);
}

.topButton:hover {
    border-radius: 50px;
    /* background: linear-gradient(#39fad7, #44ea76); */
    background: linear-gradient(#159f33, #34d164);
}

.topButton:active .iconDefault,
.topButton:hover .iconDefault {
    transform: translateY(-100%);
    opacity: 0;
}

.downButton:active .iconDefault,
.downButton:hover .iconDefault {
    transform: translateY(-100%);
    opacity: 0;
}

.downButton:hover .iconHover,
.topButton:hover .iconHover {
    transform: translateY(0);
    opacity: 1;
}

.downButton.clicked .iconWrapper,
.topButton.clicked .iconWrapper {
    display: none;
}

.downButton.clicked .buttonText,
.topButton.clicked .buttonText {
    font-size: 15px;
    z-index: 3;
    font-weight: 500;
    font-family: "rubik";
    color: white;
}

.downButton.clicked {
    width: 70px;
    border-radius: 10px;
    background: linear-gradient(#fa393c, #f0714b);
}

.topButton.clicked {
    width: 70px;
    border-radius: 10px;
    /* background: linear-gradient(#39fad7, #44ea76); */
    background: linear-gradient(#159f33, #34d164);
}