@media only screen and (min-width: 320px) {
    :root {
        --button-padding: 12px 18px;
    }
    a.gb-button, button, input[type="submit"] {
        padding:var(--button-padding);
    }

    .order-news-container div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"] {
        background-color: var(--btn-bg);
        color:var(--btn-font-clr);
        font-size: 1rem;
        padding:var(--button-padding);
    }


    a.gb-button.btn-transparent-light, button.btn-transparent-light {
        background: none;
        border: 2px solid #ffffff;
        color: #ffffff;
    }

    a.gb-button.btn-transparent-light:hover, button.btn-transparent-light:hover {
        opacity: 0.8;
    }

    a.gb-button.btn-transparent-dark, button.btn-transparent-dark {
        background: none;
        border: 2px solid #000000;
        color: #000000;
    }

    a.gb-button.btn-transparent-dark:hover, button.btn-transparent-dark:hover {
        opacity: 0.8;
    }

    span.gb-button { 
        opacity: 0.5;
        cursor:not-allowed;
    }

    /* Yleiset button-tyylit no background -buttonille*/
    .gb-button.btn-no-bg, .is-root-container .gb-button.btn-no-bg {
        background: none;
        text-decoration: none; /* Poistetaan oletusalaviiva */
        letter-spacing: 4px;
        font-weight: bold;
        padding: 5px 0;
        position: relative; /* Tarvitaan pseudo-elementille */
        overflow: hidden; /* Estää pseudo-elementin vuotamisen ulos */
        opacity:1; /* Oletuksena näkyvä */
        transform: translateY(0); /* Ei animoitu aloitusasento */
        transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease; /* Siirtymät */
        text-transform: uppercase;
        font-weight: bold
    }

    /* Alaviivan animaatio kaikille painikkeille */
    .gb-button.btn-no-bg::after, .is-root-container .gb-button.btn-no-bg::after {
        content: ""; /* Pseudo-elementin sisältö */
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%; /* Täysin näkyvissä */
        height: 2px; /* Viivan paksuus */
        background-color: var( --no-bg-btn-clr); /* Sama väri kuin tekstillä */
        transform: scaleX(0); /* Piilotettu vaakatasossa */
        transform-origin: left; /* Animaatio alkaa vasemmalta */
        transition: transform 0.9s ease; /* Viive voidaan poistaa */
    }

    /* Alaviiva ilmestyy aina, kun painike näkyy */
    .gb-button.btn-no-bg.visible::after {
        transform: scaleX(0.2); /* Viiva ilmestyy automaattisesti */
        background-color: var( --no-bg-btn-clr);
    }

    /* Hover-efekti: alaviiva poistuu */
    .gb-button.btn-no-bg:hover::after {
        transform: scaleX(1); /* Poistuu hoverin aikana */
        background-color: var( --no-bg-btn-hover-clr);
    }
}