/* GENERAL
--------------------------------------------------- */
/* inline-flex in plaats van inline-block: bij een knoptekst die over twee regels
loopt bleef het pijltje anders als laatste woord onder de tekst hangen. Nu staat
het altijd rechts naast de tekst, verticaal gecentreerd over beide regels. */
.wp-block-button a,
.px-button .px-button-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
text-decoration: none;
border-radius: var(--border-radius-button);
transition: var(--transition);
line-height: 1;
cursor: pointer;
letter-spacing: 1px;
min-height: var(--button-height);
}

/* UNIVERSAL BUTTON HOVER — SVG ARROW
--------------------------------------------------- */
.wp-block-button a span,
.px-button .px-button-link span {
display: inline-block;
transition: transform 0.25s ease;
}

.wp-block-button a:hover span,
.wp-block-button a:focus span,
.px-button .px-button-link:hover span,
.px-button .px-button-link:focus span {
transform: translateX(4px);
}

@media (min-width : 1025px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 60px;
}
} /* End @media */
@media (min-width : 992px) and (max-width : 1024px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 60px;
}
} /* End @media */
@media (max-width : 992px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 40px;
}
} /* End @media */
/* SVG ICON
--------------------------------------------------- */
.px-button-link span,
.px-button-link svg {
vertical-align: -0.1em;
}

.px-button-link span {
padding-left: 10px;
padding-right: 4px;
flex: none; /* pijltje nooit laten meekrimpen als de tekst afbreekt */
}

.button-style-highlight .px-button-link svg path {
fill: var(--text);
}

.button-style-highlight .px-button-link:active svg path,
.button-style-highlight .px-button-link:focus svg path,
.button-style-highlight .px-button-link:hover svg path {
fill: var(--text);
}

.px-button.button-style-white-transparent .px-button-link svg path {
fill: var(--white);
}

.px-button.button-style-white-transparent .px-button-link:active svg path,
.px-button.button-style-white-transparent .px-button-link:focus svg path,
.px-button.button-style-white-transparent .px-button-link:hover svg path {
fill: var(--white);
}

.button-style-highlight-border .px-button-link svg path {
fill: var(--yellow);
}

.button-style-highlight-border .px-button-link:active svg path,
.button-style-highlight-border .px-button-link:focus svg path,
.button-style-highlight-border .px-button-link:hover svg path {
fill: var(--yellow);
}


/* BUTTON POPUP
--------------------------------------------------- */
.px-button-popup {
position: fixed;
max-width: 1300px;
display:none;
border-radius:var(--border-radius-button);
background: white;
text-align:left;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 3rem 4rem;
z-index:99999999999999999999999999999999999999;
-webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
overflow:visible;
}

.px-button-popup-text-wrap > p {
font-size:17px !important;
line-height: 27px !important;
}

.px-button-popup-text-wrap {
margin-bottom: 30px;
}

.px-button-popup.px-popup-type-form {
max-width: 900px;
}

.px-popup-off-screen-height {
height:80%;
padding-bottom:0px !important;
}

.px-button-popup .px-button-popup-inner {
margin-bottom:30px;
overflow-y: scroll;
position:relative;
height:100%;
}

.px-button-popup .px-button-popup-inner::-webkit-scrollbar {
display:none !important;
}

.px-button-popup .px-button-popup-content-wrap strong {
color:var(--olive);
}

.px-button-popup .px-button-popup-close-icon {
cursor:pointer;
line-height:1;
border-radius:var(--border-radius-button);
background:var(--yellow);
height:40px;
width:40px;
text-align:center;
}

.px-button-popup .px-button-popup-close-icon svg {
width:20px;
height:20px;
position:relative;
top:9px;
}

.px-button-popup .px-button-popup-content-wrap img {
border-radius:var(--border-radius);
width:100%;
height:400px;
object-fit:cover;
margin:20px 0px;
}

/* GRAVITY FORMS AJAX SPINNER INSIDE POPUP
---------------------------------------------------
In the popup/form context the Gravity Forms AJAX spinner (an <img>) gets
blown up to full width with object-fit:cover, so the loading icon fills
the whole popup. Force it back to the normal small spinner. !important is
needed because the rule that enlarges it (a Gravity Forms / Beaver Builder
bundle rule) also uses !important. */
.px-button-popup .gform_ajax_spinner {
width: 65px !important;
height: 65px !important;
max-width: none !important;
object-fit: contain !important;
}

html.px-button-popup-open {
overflow-y: hidden;
}

html.px-button-popup-open header {
display:none !important;
}

@media (max-width : 767px) {.px-button-popup {
width:100%;
height: 100%;
padding:40px;
padding-top:70px;
padding-bottom:0px;
border-radius: 0px !important;
}
.px-button-popup .px-button-popup-inner {
padding-bottom: 60px;
}

.px-button-popup .px-button-popup-content-wrap img {
height:250px;
}

.px-popup-off-screen-height {
height:90%;
}
} /* End @media */


/* HIGHTLIGHT BORDER COLOR
--------------------------------------------------- */
.px-button.button-style-highlight-border .px-button-link {
background-color: white;
color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.px-button.button-style-highlight-border .px-button-link:active,
.px-button.button-style-highlight-border .px-button-link:focus,
.px-button.button-style-highlight-border .px-button-link:hover {
color: var(--yellow);
background-color: rgba(251,186,0,0.05);
}

/* HIGHTLIGHT COLOR
--------------------------------------------------- */
.wp-block-button a,
.px-button.button-style-highlight .px-button-link {
color: var(--text);
background-color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.wp-block-button a:active,
.wp-block-button a:focus,
.wp-block-button a:hover,
.px-button.button-style-highlight .px-button-link:active,
.px-button.button-style-highlight .px-button-link:focus,
.px-button.button-style-highlight .px-button-link:hover {
color: var(--text);
}

/* HIGHTLIGHT COLOR WITH WHITE BORDER
--------------------------------------------------- */
.px-button.button-style-highlight-white-border .px-button-link {
color: var(--text);
background-color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.px-button.button-style-highlight-white-border .px-button-link:active,
.px-button.button-style-highlight-white-border .px-button-link:focus,
.px-button.button-style-highlight-white-border .px-button-link:hover {
color: var(--text);
}

/* WHITE TRANSPARENT COLOR
--------------------------------------------------- */
.px-button.button-style-white-transparent .px-button-link {
color: var(--white);
background-color: transparent;
border: var(--border-width) solid var(--white);
}

.px-button.button-style-white-transparent .px-button-link:active,
.px-button.button-style-white-transparent .px-button-link:focus,
.px-button.button-style-white-transparent .px-button-link:hover {
color: var(--white);
background-color: rgba(255,255,255,0.1);
}

/* PRIMARY COLOR
--------------------------------------------------- */
.px-button.button-style-primary .px-button-link {
color: var(--white);
background-color: var(--olive);
border: var(--border-width) solid var(--olive);
}

.px-button.button-style-primary .px-button-link:active,
.px-button.button-style-primary .px-button-link:focus,
.px-button.button-style-primary .px-button-link:hover {
color: var(--white);
}

.button-style-primary .px-button-link svg path {
fill: var(--white);
}

/* SECONDARY COLOR
--------------------------------------------------- */
.px-button.button-style-secondary .px-button-link {
color: var(--blue);
background-color: var(--light-blue);
border: var(--border-width) solid var(--light-blue);
}

.px-button.button-style-secondary .px-button-link:active,
.px-button.button-style-secondary .px-button-link:focus,
.px-button.button-style-secondary .px-button-link:hover {
color: var(--blue);
}

.button-style-secondary .px-button-link svg path {
fill: var(--blue);
}

/* MOBILE
--------------------------------------------------- */
@media (max-width : 767px) {
.px-button-popup- {
width: 100%;
padding: 3rem 1.5rem;
}

} /* End @media */
/* GUTENBERG WP BLOCK BUTTON
--------------------------------------------------- */
.wp-block-button a {
color: var(--text) !important;
font-weight: 700 !important;
text-decoration: none !important;
margin-bottom: var(--distance-default);
}

.wp-block-button a::after {
display: none !important;
}


/* BUTTON POPUP CLOSE
--------------------------------------------------- */
.px-button-popup-close-container {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
display: flex;
align-items: center;
}

.px-button-popup-close {
display: flex;
align-items: center;
gap: 12px;
border: 0;
cursor: pointer;
padding: 10px 16px;
border-radius: var(--border-radius-button);
background: transparent;
color: inherit;
font-weight: 700;
line-height: 1;
transition: var(--transition);
}

.px-button-popup-close:hover {
opacity: 0.85;
}

.px-button-popup-close-text {
font-size: 14px;
letter-spacing: 0.2px;
white-space: nowrap;
}
@media (min-width : 768px) {.px-button-popup-close-text {
display: none !important;
}
} /* End @media */