/* === GLOBAL BUTTON STYLES === */

.waves-button,
.elementor-button,
.wpjb-button {
    border: 2px solid transparent; /* Utilize transparent border on ALL buttons for sizing consistency */
    border-radius: 8px;
    padding: 10px 20px;
    max-width: 200px;
    /* margin: 5px 10px !important; */
    font-weight: bold;
    text-align: center;
    justify-content: center;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* cursor: pointer !important; */
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
}
.waves-button:hover {
  transform: scale(1.05);
}
.waves-button.inactive,
.elementor-button.inactive,
.wpjb-button.inactive {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
	transform: none;
}

.fcpas-disabled-button {
    cursor: not-allowed;
    pointer-events: none; /* Disable interactions for inputs, textareas, and buttons */
    opacity: 0.6; /* Reduce opacity */
    transform: none;
}

/* === PRIMARY BUTTON === */
/* .waves-button--primary,  THIS SELECTOR CAN CAUSE ISSUES. By using the below, you ensure that only the CLICKABLE thing is styled--not any divs around it or anything else. This is because other tools like Elementor might apply your class to multiple things.*/
/* Main selector: Apply to “the clickable thing” inside your wrapper */
.waves-button.waves-button--primary :is(a, button, input[type="submit"]),
/* STOP-GAP selectors: Treat each of these button classes as a Waves primary for now. If you find that one of these plugins/tools allows you to apply your custom class to the button, delete its selectors here. */
.user-registration-Button,
.ur-submit-button,
.wpjb-form-job-apply,
.wpjb-form-toggle,
.wpjb-submit,
.frm_button_submit 
{
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-radius: var(--waves-border-radius);
    line-height: 40px; 
    padding: 0 20px;
    min-height: var(--button-height-fat);
}
/* Hover / hover state */
.waves-button.waves-button--primary :is(a, button, input[type="submit"]):hover,
.user-registration-Button:hover,
.ur-submit-button:hover,
.wpjb-form-job-apply:hover,
.wpjb-form-toggle:hover,
.wpjb-submit:hover,
.frm_button_submit:hover {
	transform: scale(1.03);
}

/* Active/pressed state (covers: class on the element OR on a wrapper) */
:is(
	.waves-button.waves-button--secondary,
	.waves-button.waves-button--secondary :is(a, button, input[type="submit"])
):active{
	transform: scale(0.99);
}
/* Disabled / inactive */
.waves-button.waves-button--primary :is(a, button, input[type="submit"]).inactive,
.waves-button.waves-button--primary :is(button, input[type="submit"]):disabled,
.user-registration-Button.inactive,
.user-registration-Button:disabled,
.ur-submit-button.inactive,
.ur-submit-button:disabled,
.wpjb-submit.inactive,
.wpjb-submit:disabled,
.frm_button_submit.inactive,
.frm_button_submit:disabled {
	background-color: #9ab9e8;
	color: #f0f0f0;
	transform: none;
	pointer-events: none;
	cursor: not-allowed;
}
/* Icons inside a primary button inherit text color, even if SVGs paths have inline fill (i.e., if the SVG code already specifies fill color) */
.waves-button.waves-button--primary
:is(a, button, input[type="submit"])
:is(svg, svg *) ,
.user-registration-Button :is(svg, svg *),
.ur-submit-button :is(svg, svg *),
.wpjb-form-job-apply :is(svg, svg *),
.wpjb-form-toggle :is(svg, svg *),
.wpjb-submit :is(svg, svg *),
.frm_button_submit :is(svg, svg *) {
	fill: currentColor;
	color: currentColor;
}

/* === SECONDARY BUTTON === */
/* Style the clickable thing inside a Waves secondary wrapper */
.waves-button.waves-button--secondary :is(a, button, input[type="submit"]),
a.waves-button.waves-button--secondary {
	border: 2px solid var(--color-primary-light);
	background-color: var(--color-white);
	color: var(--color-primary-light);
}
/* Hover state on the clickable thing */
.waves-button.waves-button--secondary :is(a, button, input[type="submit"]):hover {
	background-color: var(--color-primary-light);
	color: var(--color-white);
	transform: scale(1.03);
}
/* Active/pressed state (covers: class on the element OR on a wrapper) */
:is(
	.waves-button.waves-button--secondary,
	.waves-button.waves-button--secondary :is(a, button, input[type="submit"])
):active{
	transform: scale(0.99);
}

/* Disabled / inactive */
.waves-button.waves-button--secondary :is(a, button, input[type="submit"]).inactive,
.waves-button.waves-button--secondary :is(button, input[type="submit"]):disabled {
	background-color: #f0f0f0;
	color: #aaa;
	border-color: #ccc;
	transform: none;
	pointer-events: none;
	cursor: not-allowed;
}
/* Icons in secondary follow text color (including inline-filled SVG paths) */
.waves-button.waves-button--secondary
:is(a, button, input[type="submit"])
:is(svg, svg *) {
	fill: currentColor;
	color: currentColor;
}


.user-registration-Button {
    margin: 40px 0px;
    background-color: var(--color-primary-light) !important;
}