/* ============================================================
   RF Segmented Toggle
   Pill-shaped tablist with N options; one active at a time.
   A single absolutely-positioned indicator slides between
   options for a smooth visual transition.

   All rules namespaced under .rft-toggle.
   Tokens are exposed as CSS custom properties on the root
   so Elementor controls can override them per-widget.
   ============================================================ */

.rft-toggle-wrap {
	display: flex;
	justify-content: flex-start;
}

.rft-toggle {
	/* ── Tokens (overridable via Elementor selectors) ───────── */
	--rft-toggle-bg: #ffffff;
	--rft-toggle-radius: 48px;
	--rft-toggle-padding: 8px;
	--rft-toggle-shadow: 0 12px 14px rgba(0, 0, 0, 0.03);

	--rft-toggle-option-radius: 33px;
	--rft-toggle-option-color: #3b3e45;
	--rft-toggle-option-color-hover: #2f2f2f;
	--rft-toggle-option-color-active: #ffffff;
	--rft-toggle-option-letter-spacing: -0.01em;

	--rft-toggle-indicator-bg: #2f2f2f;
	--rft-toggle-indicator-radius: var(--rft-toggle-option-radius);

	--rft-toggle-anim-duration: 280ms;
	--rft-toggle-anim-ease: cubic-bezier(0.4, 0, 0.2, 1);

	--rft-toggle-font-stack: "TT Norms Pro Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;

	/* ── Layout ────────────────────────────────────────────── */
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--rft-toggle-padding);
	background: var(--rft-toggle-bg);
	border-radius: var(--rft-toggle-radius);
	box-shadow: var(--rft-toggle-shadow);
	font-family: var(--rft-toggle-font-stack);
	isolation: isolate;
}

/* Full-width variant — buttons share the row equally. */
.rft-toggle.is-full {
	display: flex;
	width: 100%;
}

.rft-toggle.is-full .rft-toggle__option {
	flex: 1 1 0;
}

/* The dark pill that slides behind the active option. */
.rft-toggle__indicator {
	position: absolute;
	top: var(--rft-toggle-padding);
	left: var(--rft-toggle-padding);
	height: calc(100% - (var(--rft-toggle-padding) * 2));
	width: 0;
	background: var(--rft-toggle-indicator-bg);
	border-radius: var(--rft-toggle-indicator-radius);
	transform: translateX(0);
	transition:
		transform var(--rft-toggle-anim-duration) var(--rft-toggle-anim-ease),
		width var(--rft-toggle-anim-duration) var(--rft-toggle-anim-ease);
	pointer-events: none;
	z-index: 0;
}

/* Suppress transition until JS measures the initial position. */
.rft-toggle.is-initializing .rft-toggle__indicator {
	transition: none;
}

/* Defensive reset for all states — beats theme/Elementor button styles
   (e.g. accent-colored hover backgrounds bleeding through the indicator). */
.rft-toggle .rft-toggle__option,
.rft-toggle .rft-toggle__option:hover,
.rft-toggle .rft-toggle__option:focus,
.rft-toggle .rft-toggle__option:active,
.rft-toggle .rft-toggle__option.is-active {
	background: transparent;
	background-color: transparent;
	border: none;
	box-shadow: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.rft-toggle__option {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 19px;
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: var(--rft-toggle-option-letter-spacing);
	color: var(--rft-toggle-option-color);
	border-radius: var(--rft-toggle-option-radius);
	white-space: nowrap;
	cursor: pointer;
	transition: color calc(var(--rft-toggle-anim-duration) * 0.79) var(--rft-toggle-anim-ease);
	-webkit-tap-highlight-color: transparent;
}

.rft-toggle .rft-toggle__option:hover:not(.is-active) {
	color: var(--rft-toggle-option-color-hover);
}

.rft-toggle .rft-toggle__option:focus-visible {
	outline: 2px solid var(--rft-toggle-indicator-bg);
	outline-offset: 2px;
}

.rft-toggle .rft-toggle__option.is-active {
	color: var(--rft-toggle-option-color-active);
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.rft-toggle__indicator,
	.rft-toggle__option {
		transition: none !important;
	}
}

/* ── Variant: Bordered (Blue) ──────────────────────────── */
.rft-toggle.is-style-bordered {
	--rft-toggle-padding: 8px !important;
	background: #ffffff !important;
	border: 1px solid #dcdcdc !important;
	border-radius: 31px !important;
	box-shadow: none !important;
	padding: 8px !important;
}

.rft-toggle.is-style-bordered .rft-toggle__indicator {
	background: #1070d7 !important;
	border-radius: 33px !important;
}

.rft-toggle.is-style-bordered .rft-toggle__option {
	color: #2f2f2f !important;
	border-radius: 33px !important;
	padding: 12px 19px !important;
	font-size: 16px !important;
	line-height: 22px !important;
	letter-spacing: 0 !important;
	font-weight: 500 !important;
}

.rft-toggle.is-style-bordered .rft-toggle__option:hover:not(.is-active) {
	color: #2f2f2f !important;
}

.rft-toggle.is-style-bordered .rft-toggle__option.is-active {
	color: #ffffff !important;
	font-weight: 700 !important;
}