@media only screen and (min-width: 320px) {
    :root {
        --button-padding: 12px 18px;
        --button-radius:50px;
    }
    a.gb-button, button, input[type="submit"] {
        transition: all var(--transition-speed) var(--transition-timing-function);
        font-weight:600;
    }
    .wp-admin button, .wp-admin .admin-ui-navigable-region a{
        font-weight:400;
    }
    .order-news-container div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"] {
        background-color: unset;
        font-weight:600;
        font-size:1rem;
        display: flex;
        align-items: center;
    }


    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*/
    a.gb-button, .editor-styles-wrapper a.gb-button, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"] {
        padding:0px;
        background: none;
        text-decoration: none; /* Poistetaan oletusalaviiva */
        letter-spacing: 4px;
        font-weight: 600;
        padding:0px;
        padding-bottom: 5px;
        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;
        border:0px;
        font-size:14px;
        display:inline-flex;
        align-items:center;
    }

    /* Alaviivan animaatio kaikille painikkeille */
    a.gb-button::before, .editor-styles-wrapper a.gb-button::before, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"]::before {
        content: ""; /* Pseudo-elementin sisältö */
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%; /* Täysin näkyvissä */
        height: 2px; /* Viivan paksuus */
        background-color: var( --link-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 */
        border-radius:0px;
    }
    a.gb-button::after, .editor-styles-wrapper a.gb-button::after, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"]::after {
        content: "";
        width: 25px;
        height: 20px;
        margin-left:5px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.499' height='9.018' viewBox='0 0 19.499 9.018'%3E%3Cpath data-name='Path 101' d='M16.72,7.72a.75.75,0,0,1,1.06,0l3.75,3.75a.75.75,0,0,1,0,1.06l-3.75,3.75a.75.75,0,1,1-1.06-1.06l2.47-2.47H3a.75.75,0,1,1,0-1.5H19.19L16.72,8.78a.75.75,0,0,1,0-1.06Z' transform='translate(-2.25 -7.501)' fill='%23fd6034' fill-rule='evenodd'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: margin-left 0.9s ease;
        display:flex;
    }
    .wrapper-alternate-color div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"]{
        color:var(--link-clr);
    }
    a.gb-button:hover::after, .editor-styles-wrapper a.gb-button:hover::after, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"]:hover::after {
        /*Move slightly to the right*/
        margin-left:10px;
    }
    /* Alaviiva ilmestyy aina, kun painike näkyy */
    .gb-button.visible::before, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"].visible::before {
        transform: scaleX(0.2); /* Viiva ilmestyy automaattisesti */
        background-color: var( --link-clr);
    }

    /* Hover-efekti: alaviiva poistuu */
    .gb-button:hover::before, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"]:hover::before {
        transform: scaleX(1); /* Poistuu hoverin aikana */
        background-color: var( --link-clr);
    }
    /*button with borders*/
        a.gb-button.btn-borders, .editor-styles-wrapper a.gb-button.btn-borders, div.wpforms-container-full form.wpforms-form button[type=submit][class~="wpforms-submit"].btn-borders{
        border: 1px solid var(--green);
        color: var(--green);
        border-radius: var(--button-radius);
        padding:var(--button-padding);
        transition: all 0.9s ease;
    }
    a.gb-button.btn-borders:hover, .editor-styles-wrapper a.gb-button.btn-borders:hover {
        border: 1px solid var(--orange);
        color: white;
        background:var(--green);
    }
    a.gb-button.btn-borders::before, .editor-styles-wrapper a.gb-button.btn-borders::before, a.gb-button.btn-borders::after, .editor-styles-wrapper a.gb-button.btn-borders::after{
        display: none;
    }
}