.wp-block-group.step-card.last-opened-card {
    background-color: #493ca9 !important; /* Meeldiv heleroheline */
    border: 5px solid #ffffff;
    border-radius: 50px; /* Ümaramad nurgad sobivad paremini */
    transition: background-color 0.4s ease-in-out, border 0.4s ease-in-out; /* Üleminekud */
}

/* Stiilid modaali vaatamiste loendurile, kui see on nupu all */
.modal-view-counter-below-button {
    display: block; /* Tee loendurist plokk-element, et see alustaks uuelt realt */
    text-align: center; /* Keskenda tekst */
    margin-top: 5px; /* Ruumi nupu ja loenduri vahele */
    font-size: 0.8em; /* Fonti suurus */
    opacity: 0.7; /* Läbipaistvus */
    /* Võid lisada siia ka muid stiile, nt. värv, polsterdus jne. */
}

/* Veendu, et modaali konteiner võimaldaks nupu ja loenduri vertikaalset paigutust */
.wp-block-mymodal-modal {
    /* Kui see on display:inline-flex või display:flex, siis see võib rikkuda loenduri display:block käitumist.
       Võimalikud lahendused: */
    display: block !important; /* Sunnib konteineri plokk-elemendiks, mis on lihtsaim lahendus */
    text-align: center; /* Keskendab sisu (nupu ja loenduri) */
    /* Või kui soovid paindlikkust, kasuta flexboxi ja flex-direction: column */
    /*
    display: flex !important;
    flex-direction: column;
    align-items: center; // Keskendab elemendid horisontaalselt
    */
}

/* Kui soovid, et nupp ise oleks keskel .wp-block-mymodal-modal sees */
.mymodal-trigger-btn {
    display: inline-block; /* Või block, kui soovid, et nupp võtaks kogu laiuse */
    margin-left: auto;
    margin-right: auto;
}

.mymodal-button-wrapper {
    width: 101%;
}