/**
 * Faddom UI components — buttons (Figma)
 *
 * Variants:
 *   --primary            Orange CTA
 *   --secondary          Light teal
 *   --tertiary-outline   Border (inner), light bg
 *   --tertiary-white     White, no border
 *   --primary-inverse    Dark teal, white text
 *
 * Size:
 *   (default)            height 44 / gap 8 / pad 12 16 12 24
 *   --high               height 56 / gap 12 / pad 18 16 18 24
 *
 * States: normal = hover = focus/pressed; disabled = 40% opacity
 *
 * Usage:
 *   <button class="faddom-btn faddom-btn--primary">Label</button>
 *   <button class="faddom-btn faddom-btn--primary faddom-btn--high">Label</button>
 *   With icon: … <span class="faddom-btn__icon" aria-hidden="true">…</span>
 */

button.faddom-btn,
a.faddom-btn,
.faddom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	height: 44px;
	gap: 8px;
	padding: 12px 16px 12px 24px;
	border-radius: 12px;
	border: none;
	box-shadow: none;
	font-family: var(--faddom-type-caption-m-family) !important;
	font-size: var(--faddom-type-caption-m-size) !important;
	font-weight: var(--faddom-type-caption-m-weight) !important;
	letter-spacing: var(--faddom-type-caption-m-tracking) !important;
	text-transform: var(--faddom-type-caption-m-transform) !important;
	text-decoration: none;
	line-height: var(--faddom-type-caption-m-line) !important;
	cursor: pointer;
	background-image: none;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s ease !important;
}

/* Higher size */
button.faddom-btn--high,
a.faddom-btn--high,
.faddom-btn--high {
	height: 56px;
	gap: 12px;
	padding: 18px 16px 18px 24px;
}

@media (max-width: 1024px) {
	button.faddom-btn--high,
	a.faddom-btn--high,
	.faddom-btn--high {
		height: 48px;
		gap: 8px;
		padding: 16px 12px 16px 20px;
	}
}

button.faddom-btn:disabled,
a.faddom-btn:disabled,
.faddom-btn:disabled,
button.faddom-btn.is-disabled,
a.faddom-btn.is-disabled,
.faddom-btn.is-disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
	pointer-events: none;
}

.faddom-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.faddom-btn__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ */
/* Primary — orange CTA                                               */
/* ------------------------------------------------------------------ */

button.faddom-btn--primary,
a.faddom-btn--primary,
.faddom-btn--primary {
	background: var(--faddom-color-orange-300);
	background-color: var(--faddom-color-orange-300);
	color: var(--faddom-color-aqua-800);
}

button.faddom-btn--primary:hover,
button.faddom-btn--primary:focus,
button.faddom-btn--primary:active,
a.faddom-btn--primary:hover,
a.faddom-btn--primary:focus,
a.faddom-btn--primary:active,
.faddom-btn--primary:hover,
.faddom-btn--primary:focus,
.faddom-btn--primary:active {
	background: var(--faddom-color-orange-300);
	background-color: var(--faddom-color-orange-300);
	color: var(--faddom-color-aqua-800);
	transform: none !important;
}

/* ------------------------------------------------------------------ */
/* Secondary — light teal                                             */
/* ------------------------------------------------------------------ */

button.faddom-btn--secondary,
a.faddom-btn--secondary,
.faddom-btn--secondary {
	background: var(--faddom-color-aqua-75);
	background-color: var(--faddom-color-aqua-75)!important;
	color: var(--faddom-color-aqua-800);
	box-shadow: inset 0 0 0 1px #06232333;
}

button.faddom-btn--secondary:hover,
a.faddom-btn--secondary:hover,
.faddom-btn--secondary:hover {
	background: var(--faddom-color-aqua-100);
	background-color: var(--faddom-color-aqua-100)!important;
	color: var(--faddom-color-aqua-800);
	transform: none !important;
}
button.faddom-btn--secondary:focus,
button.faddom-btn--secondary:active,
a.faddom-btn--secondary:focus,
a.faddom-btn--secondary:active,
.faddom-btn--secondary:focus,
.faddom-btn--secondary:active {
	background: var(--faddom-color-aqua-200);
	background-color: var(--faddom-color-aqua-200)!important;
	color: var(--faddom-color-aqua-800);
	transform: none !important;
}

/* ------------------------------------------------------------------ */
/* Tertiary — Outline (inner border)                                  */
/* ------------------------------------------------------------------ */

button.faddom-btn--tertiary-outline,
a.faddom-btn--tertiary-outline,
.faddom-btn--tertiary-outline {
	background: transparent;
	background-color: transparent!important;
	color: var(--faddom-color-aqua-800);
	box-shadow: inset 0 0 0 1px #06232366;
}

button.faddom-btn--tertiary-outline:hover,
a.faddom-btn--tertiary-outline:hover,
.faddom-btn--tertiary-outline:hover {
	background: var(--faddom-color-aqua-25);
	background-color: var(--faddom-color-aqua-25)!important;
	color: var(--faddom-color-aqua-800);
	box-shadow: inset 0 0 0 1px #06232366;
	transform: none !important;
}
button.faddom-btn--tertiary-outline:focus,
button.faddom-btn--tertiary-outline:active,
a.faddom-btn--tertiary-outline:focus,
a.faddom-btn--tertiary-outline:active,
.faddom-btn--tertiary-outline:focus,
.faddom-btn--tertiary-outline:active {
	background: var(--faddom-color-aqua-50);
	background-color: var(--faddom-color-aqua-50)!important;
	color: var(--faddom-color-aqua-800);
	box-shadow: inset 0 0 0 1px #06232366;
	transform: none !important;
}
/* ------------------------------------------------------------------ */
/* Tertiary — White (no border)                                       */
/* ------------------------------------------------------------------ */

button.faddom-btn--tertiary-white,
a.faddom-btn--tertiary-white,
.faddom-btn--tertiary-white {
	background: var(--faddom-color-white);
	background-color: var(--faddom-color-white)!important;
	color: var(--faddom-color-aqua-800);
	box-shadow: none;
}

button.faddom-btn--tertiary-white:hover,
a.faddom-btn--tertiary-white:hover,
.faddom-btn--tertiary-white:hover {
	background: var(--faddom-color-aqua-25);
	background-color: var(--faddom-color-aqua-25)!important;
	color: var(--faddom-color-aqua-800);
	transform: none !important;
}

button.faddom-btn--tertiary-white:focus,
button.faddom-btn--tertiary-white:active,
a.faddom-btn--tertiary-white:focus,
a.faddom-btn--tertiary-white:active,
.faddom-btn--tertiary-white:focus,
.faddom-btn--tertiary-white:active {
	background: var(--faddom-color-aqua-50);
	background-color: var(--faddom-color-aqua-50)!important;
	color: var(--faddom-color-aqua-800);
	transform: none !important;
}
/* ------------------------------------------------------------------ */
/* Primary Inverse — dark teal                                        */
/* ------------------------------------------------------------------ */

button.faddom-btn--primary-inverse,
a.faddom-btn--primary-inverse,
.faddom-btn--primary-inverse {
	background: var(--faddom-color-aqua-600);
	background-color: var(--faddom-color-aqua-600)!important;
	color: var(--faddom-color-white);
}

button.faddom-btn--primary-inverse:hover,
a.faddom-btn--primary-inverse:hover,
.faddom-btn--primary-inverse:hover {
	background: var(--faddom-color-aqua-700);
	background-color: var(--faddom-color-aqua-700)!important;
	color: var(--faddom-color-white);
	transform: none !important;
}
button.faddom-btn--primary-inverse:focus,
button.faddom-btn--primary-inverse:active,
a.faddom-btn--primary-inverse:focus,
a.faddom-btn--primary-inverse:active,
.faddom-btn--primary-inverse:focus,
.faddom-btn--primary-inverse:active {
	background: var(--faddom-color-aqua-800);
	background-color: var(--faddom-color-aqua-800)!important;
	color: var(--faddom-color-white);
	transform: none !important;
}

/* ------------------------------------------------------------------ */
/* Layout helpers                                                     */
/* ------------------------------------------------------------------ */

button.faddom-btn--block,
a.faddom-btn--block,
.faddom-btn--block {
	width: 100%;
}

button.faddom-btn--fit,
a.faddom-btn--fit,
.faddom-btn--fit {
	width: auto !important;
	max-width: max-content;
	align-self: flex-start;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Pagination — Elementor loop grid (.pagination-numbers-faddom)       */
/* ------------------------------------------------------------------ */

.pagination-numbers-faddom .elementor-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.pagination-numbers-faddom .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	position: relative;
}

.pagination-numbers-faddom .elementor-pagination .page-numbers:not(.prev):not(.next):not(.dots) {
	padding: 6px 9.5px;
	border-radius: 8px;
	width: 32px;
	height: 32px;
}

.pagination-numbers-faddom .elementor-pagination .elementor-screen-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pagination-numbers-faddom .elementor-pagination .page-numbers.current {
	background-color: var(--faddom-color-white, #ffffff);
}

.pagination-numbers-faddom .elementor-pagination .page-numbers.prev,
.pagination-numbers-faddom .elementor-pagination .page-numbers.next {
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 0;
	color: transparent;
	background-color: transparent;
	background-image: url("../svg/faddom-pagination-arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

.pagination-numbers-faddom .elementor-pagination .page-numbers.prev {
	transform: scaleX(-1);
}

/* Disabled prev/next (Elementor renders a span when at first/last page) */
.pagination-numbers-faddom .elementor-pagination span.page-numbers.prev,
.pagination-numbers-faddom .elementor-pagination span.page-numbers.next {
	opacity: 0.9;
	pointer-events: none;
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Page ruler — vertical tick strip                        */
/* ------------------------------------------------------------------ */

.faddom-page-ruler {
	display: none;
}

@media (min-width: 1366px) {
	body {
		position: relative;
	}

	.faddom-page-ruler {
		display: block;
		position: absolute;
		top: 28px;
		left: 16px;
		width: 8px;
		height: calc(100% - 28px);
		background-image: url("../svg/faddom-page-ruler.svg");
		background-repeat: repeat-y;
		background-position: top left;
		background-size: 8px 306px;
		pointer-events: none;
		z-index: 2;
	}
}

/* How it works extra CTA — hidden on Use Case until ACF steps_show_cta_button is on */
body.single-use-case:not(.faddom-el-edit):not(.faddom-show-steps-cta) .additional-cta {
	display: none !important;
}

.additional-cta .elementor-button-content-wrapper {
	flex-direction: row-reverse;
	gap: 12px;
}