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

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
    --fs: 1.4rem; 
    --lh: 1; 
    --p: 1.5rem; 
    --br: 0; 
    --gap: 1rem;

    --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); 
    --icon-bg-clr: var(--clr-primary-120); --icon-hover-bg-clr: var(--clr-primary);

    display: inline-flex; justify-content: center; align-items: center; min-height: 4rem; gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: 0 var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: none;
    
    transition-duration: var(--ts-duration);
    transition-timing-function: var(--ts-function);

    font-family: var(--font-primary); font-weight: 900; text-transform: uppercase; transition-property: color, background-color, border-color, box-shadow, -webkit-box-shadow;
}
.btn span, .gform_button span, .gform_next_button span, .gform_previous_button span, .button span { font: inherit; color: inherit; }
.btn i, .gform_button i, .gform_next_button i, .gform_previous_button i { --clr: inherit; }
.btn:hover, .gform_button:hover, .gform_next_button:hover, .gform_previous_button:hover, .button:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; box-shadow: var(--hover-box-shadow)!important; }
.btn:hover i, .gform_button:hover i, .gform_next_button:hover i, .gform_previous_button:hover i { --clr: var(--hover-clr); }
.btn:focus, .gform_button:focus, .gform_next_button:focus, .gform_previous_button:focus, .gform_button:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important;  box-shadow: var(--focus-box-shadow)!important; }
.btn:focus i, .gform_button:focus i, .gform_next_button:focus i, .gform_previous_button:focus i, .gform_button:focus i { --clr: var(--focus-clr); }
.btn:active, .gform_next_button:active, .gform_previous_button:active, .button:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; box-shadow: var(--active-box-shadow)!important; }
.btn:active i, .gform_next_button:active i, .gform_previous_button:active i { --clr: var(--active-clr); }

.btn.btn--small { --p: 0 1.5rem; --fs: 1.4rem; min-height: 3.3rem; }
.btn.btn--large { --p: 0 2.6rem; --fs: 1.8rem; min-height: 5.3rem; }

.btn.btn--square { --p: 0; aspect-ratio: 1/1; }

.btn.btn--primary, .button { --clr: rgb(255,255,255); --bg-clr: var(--clr-primary); --hover-bg-clr: var(--clr-primary-120); }
.btn.btn--white { --clr: var(--clr-dark); --bg-clr: #fff; --hover-bg-clr: var(--clr-light); --icon-bg-clr: var(--clr-light); --icon-hover-bg-clr: #fff; }
.btn.btn--link { --clr: #ffff; --hover-clr: rgba(255, 255, 255, 0.7); --bg-clr: transparent; --box-shadow: none; overflow: visible !important; }
.btn.btn--link i{ transition: color var(--ts-duration) ease, transform var(--ts-duration) ease; }
.btn.btn--link:has(.btn__text + .btn__icon):hover i{ transform: translateX(.6rem); }

.btn:has(.btn__icon){ position: relative; overflow: hidden; }
.btn :is(.btn__text, .btn__icon i){ position: relative; z-index: 2; }
.btn .btn__icon i{ font-size: 1.1rem; margin-bottom: .35em; }

.btn:not(.btn--link):has(.btn__text) .btn__icon{ padding-left: 2rem; }
.btn:not(.btn--link) .btn__icon::before{ content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; width: calc(var(--p) + 2.8rem); background-color: var(--icon-bg-clr); clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 26% 100%, 0 0); transition: background var(--ts-duration) ease, clip-path var(--ts-duration) ease; }
.btn:not(.btn--link):hover .btn__icon::before{ background-color: var(--icon-hover-bg-clr); /* clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 15% 100%, 15% 0); */ }

.btn .btn__text:has(.btn__label){ display: flex; flex-direction: column; align-items: start; }
.btn .btn__text .btn__label{ font-size: 1.2rem; color: var(--clr-primary); line-height: 1.4; }
.btn .btn__text i:is(:first-child){ font-size: 2.2rem; }

.btn-group { --gap: 1rem; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--gap); }  


.wpb-bg-clr--primary .btn.btn--primary{ --icon-bg-clr: var(--clr-primary-140); --icon-hover-bg-clr: var(--clr-primary); --hover-bg-clr: var(--clr-primary-140); }

@media(min-width: 768px){
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --p: 2.2rem; --fs: 1.8rem; min-height: 5.9rem; }

    .btn .btn__icon i{ font-size: 1.3rem; }
    .btn:not(.btn--link):has(.btn__text) .btn__icon{ padding-left: 3.2rem; }
    .btn:not(.btn--link) .btn__icon::before{ width: calc(var(--p) + 4rem); }
}