#modalaction {
    display: none;
}

#modalaction2 {
    display: none;
}

@media only screen and (max-width: 580px) {
    #modalaction,
    #modalaction2 {
        display: flex;
    }

    #modalaction.hidden,
    #modalaction2.hidden {
        /* display: none; */
        visibility: hidden;
        transition: ease visibility 0.1s;
    }

    #modalaction.block,
    #modalaction2.block {
        /* display: block; */
        visibility: visible;
        transition: ease visibility 0.1s;
    }

    .modal-action,
    .modal-action2 {
        width: 100%;
        height: 100%;
        /* background-color: red; */
        position: fixed;
        left: 0;
        top: 0;
        z-index: 5;
    }

    .modal-bg,
    .modal-bg2 {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #00000090;
        z-index: 5;
        position: absolute;
    }

    .hidden .modal-action-content {
        opacity: 0;
        transform: translateY(100%); /* Modal dimulai dari bawah */
        transition: transform 0.3s ease-in-out; /* Animasi opacity dan transform */
    }

    /* Modal yang terlihat (setelah transisi) */
    .block .modal-action-content {
        opacity: 1;
        transform: translateY(0%);
        transition: transform 0.3s ease-in-out; /* Animasi opacity dan transform */
    }

    .modal-action-content {
        display: flex;
        width: 100%;
        border-radius: 16px 16px 0 0;
        background-color: white;
        /* position: absolute; */
        bottom: 0;
        flex-direction: column;
        gap: 4px;
        z-index: 6;
        position: fixed;
    }

    .modal-action2 .modal-action-content {
        padding-bottom: 24px;
    }

    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 20px;
        background-color: #00000005;
    }

    .modal-line {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #00000020;
    }

    .modal-action-menu {
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 16px;
        color: #171717;
        padding: 12px 20px;
    }

    .modal-action-menu:hover {
        background-color: #00000005;
    }
}