/*** ---------- Buttons ---------- ***/
a { color: var(--clr-text); }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
    /* --fs: 1.4rem;  */
    --lh: 1; 
    --p: 0 2rem; 
    --br: 10rem; 
    --gap: .8rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: 0 0 0 .5rem var(--clr-primary-20); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; justify-content: center; align-items: center; min-height: 4.5rem; gap: var(--gap); font-size: var(--fs); font-weight: 500; line-height: var(--lh); padding: var(--p); color: var(--clr)!important; background-color: var(--bg-clr)!important; border-radius: var(--br); border: var(--border)!important; box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); font-family: var(--font-primary); transition-property: var(--tsp);

    span { font: inherit; color: inherit; }
    i { --clr: inherit; color: inherit; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transform: rotateZ(0deg); transition-property: var(--tsp), transform; }

    &:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
        i { --clr: var(--hover-clr); color: var(--hover-clr); }
    }
    &:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
        i { --clr: var(--focus-clr); color: var(--focus-clr); }
    }
    &:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
        i { --clr: var(--active-clr); color: var(--active-clr); }
    }

    /* Button sizes */
    &.btn--small { --p: 0 1.6rem; --fs: 1.4rem; min-height: 4rem; }

    &.btn--block { width: 100%; }
    
    /* Button variations */
    &.btn--square { --p: 0; aspect-ratio: 1/1; }

    &.btn--primary { --bg-clr: var(--clr-primary); --border: 2px solid var(--clr-primary); --hover-bg-clr : var(--clr-secondary); --hover-border: 2px solid transparent; }
    &.btn--secondary, &.gform_next_button, &.gform_previous_button { --bg-clr: var(--clr-secondary); --border: 2px solid var(--clr-secondary); --hover-bg-clr: var(--clr-primary); --hover-border: 2px solid transparent; }
    &.btn--dark { --bg-clr: var(--clr-dark); --border: 2px solid var(--clr-dark); }
    &.btn--white { --clr: var(--clr-dark); --bg-clr: #fff; --border: 2px solid #fff; --hover-bg-clr: var(--clr-primary); --hover-clr: #FFFF; --hover-border: 2px solid var(--hover-bg-clr); }
    &.btn--white-primary { --clr: var(--clr-primary); --bg-clr: #fff; --border: 2px solid #fff; --hover-bg-clr: var(--clr-primary); --hover-clr: #FFFF; --hover-border: 2px solid var(--hover-bg-clr); }

    &.btn--outline { --clr: var(--clr-dark); --bg-clr: transparent; --border: 2px solid rgba(var(--clr-dark-110-rgb), .2); --hover-bg-clr: var(--clr-primary); --hover-clr: #fff; --hover-border: 2px solid var(--clr-primary); 
        .wpb-icon { --clr: var(--clr-dark); }
        &:hover .wpb-icon { --clr: #FFF; }
    }

    &.btn--outline-orange { --clr: var(--clr-secondary); --bg-clr: transparent; --border: 2px solid var(--clr-secondary); --hover-bg-clr: var(--clr-primary); --hover-clr: #fff; --hover-border: 2px solid var(--clr-primary); 
        .wpb-icon { --clr: var(--clr-dark); }
        &:hover .wpb-icon { --clr: #FFF; }
    }

    &.btn--outline-white { --clr: #fff; --bg-clr: transparent; --border: 2px solid #fff; --hover-bg-clr: var(--clr-primary); --hover-clr: #fff; --hover-border: 2px solid var(--clr-primary); 
        .wpb-icon { --clr: var(--clr-dark); }
        &:hover .wpb-icon { --clr: #FFF; }
    }

    &.btn--outline-primary { --clr: var(--clr-primary); --bg-clr: transparent; --border: 1px solid var(--clr-primary); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
    
    &.btn--shadow { --box-shadow: 0px .1rem .4rem 0px rgba(0,0,0,.14); }
    
    &.btn--link { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; min-height: 0; --p: 0; --hover-clr: var(--clr-primary); }

    &.btn--link--primary { --clr: var(--clr-primary); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; min-height: 0; --p: 0; text-align: start; }
    &.btn--link--white { --clr: #FFF; --hover-clr: var(--clr-secondary); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; min-height: 0; --p: 0; text-align: start; }

    &.btn--ghost::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

    /* .fa-arrow-right-long { transform: rotate(-45deg); } */
    &:hover {
        .fa-arrow-right-long, .fa-long-arrow-right, .fa-mug-hot { transform: rotate(-45deg); }
    }

    /* Button hover variations */
    &.btn--hover-primary { --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); --hover-clr: #fff; }
    &.btn--hover-secondary { --hover-bg-clr: var(--clr-secondary); --hover-border: 1px solid var(--clr-secondary); --hover-clr: #fff; }
    &.btn--hover-white { --hover-bg-clr: #fff; --hover-border: 2px solid #fff; --hover-clr: var(--clr-dark); }
    &.btn--hover-outline { --hover-bg-clr: transparent; --hover-border: 2px solid var(--clr-dark); --hover-clr: var(--clr-dark); }
    &.btn--hover-outline-light, &.gform_next_button, &.gform_previous_button { --hover-bg-clr: transparent; --hover-border: 2px solid var(--clr-border); --hover-clr: var(--clr-dark); }
    &.btn--hover-outline-orange { --hover-bg-clr: transparent; --hover-border: 2px solid var(--clr-secondary); --hover-clr: var(--clr-secondary); }
    &.btn--hover-outline-white { --hover-bg-clr: transparent; --hover-border: 2px solid #fff; --hover-clr: #fff; }
}

.btn:hover i[class*="fa-mug"] {
    animation: wave-45-45 2s infinite linear;
}

.wpb-bg-clr--gradient{  
    .btn--outline{ --border: 1px solid #FFFF; --clr: #FFFF; }
}

.btn-group { --gap: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
    &.btn-group--bordered { position: relative; border: 1px solid var(--clr-border); border-radius: 3rem; padding: .4rem .5rem; justify-content: start; gap: 0; 
        .btn { --fs: 1.6rem; --bg-clr: transparent; --border: none; --clr: var(--clr-text); min-height: 4.4rem; --p: 0 1.6rem;
            &.active { --bg-clr: var(--clr-light); }
        }
    }
    &.btn-group--center { justify-content: center; }
}  

@media (max-width: 575.98px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
        
        &.btn--mobile-small { --p: 0 1.6rem; --fs: 1.4rem; min-height: 4rem; }
    }
}

@media (min-width: 576px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 

        /* Button sizes */
        &.btn--large { --p: 0 2.4rem; --fs: 1.6rem; min-height: 5.2rem; }
    }
}

.page-template-template-lp, .wpb-header--form {
    [type="submit"] {
        --bg-clr: var(--clr-secondary);
        --border: 2px solid var(--clr-secondary);
        --hover-bg-clr: #fff;
        --hover-clr: var(--clr-text);
        --hover-border: 2px solid #fff;
    }
}