/* Recently Followed – A/B Tests: sticky results bar, limit notices, preview badge. */

/* Sticky bar (appears after scrolling past the result header) */
.rf-ab-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(90deg, #ff5a8a 0%, #c13fd8 55%, #631eed 100%);
	color: #fff;
	box-shadow: 0 -6px 24px rgba(42, 3, 101, 0.25);
	transform: translateY(110%);
	transition: transform 0.25s ease;
	font-family: inherit;
}
.rf-ab-bar.is-visible { transform: translateY(0); }
.rf-ab-bar-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.rf-ab-avatars { display: flex; flex: none; }
.rf-ab-avatars img,
.rf-ab-avatars i {
	display: block;
	width: 34px;
	height: 34px;
	margin-left: -10px;
	border: 2px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, #f6c9a8, #9c5e46);
}
.rf-ab-avatars > :first-child { margin-left: 0; }
.rf-ab-avatars .is-blur { filter: blur(3px); }
.rf-ab-bar-body { flex: 1; min-width: 0; }
.rf-ab-bar-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; }
/* Arm B: "@user recently followed" + three counters with emoji (design SS1) */
.rf-ab-bar-inner.rf-ab-bar-sum { gap: 16px; }
.rf-ab-bar-sum .rf-ab-bar-body { flex: 0 1 auto; }
.rf-ab-bar-kicker { margin: 0; overflow: hidden; color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; line-height: 1.4; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rf-ab-bar-total { margin: 0; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.rf-ab-counts { flex: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; }
.rf-ab-count { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; padding: 6px 14px 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: #fff; }
.rf-ab-count i { grid-row: span 2; font-size: 22px; font-style: normal; line-height: 1; }
.rf-ab-count b { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rf-ab-count em { font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 1.2; opacity: 0.85; }
.rf-ab-bar-cta {
	flex: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	background: #fff;
	color: #2a0365;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	padding: 12px 18px;
	white-space: nowrap;
}
.rf-ab-bar-cta:hover,
.rf-ab-bar-cta:focus-visible { background: #f5edff; }
.rf-ab-bar-close {
	flex: none;
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	opacity: 0.85;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}
body.rf-ab-bar-open { padding-bottom: 76px; }

/* Limit notices (variants A and B of the limit test).
   The red bar (Figma frame) stands on the top edge of the search box: narrower than the box, flat bottom. */
.rf-ab-limit-alert {
	appearance: none;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: calc(100% - 56px);
	margin: 0 auto;
	padding: 11px 16px 12px;
	border-radius: 8px 8px 0 0;
	background: #e14141;
	box-shadow: inset 0 1.5px 0 rgba(255, 203, 203, .32);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.rf-ab-limit-alert:hover { background: #d93838; }
.rf-ab-limit-alert:focus-visible { outline: 2px solid #631eed; outline-offset: 2px; }
.rf-ab-limit-alert b { font-weight: 700; }
.rf-ab-limit-alert-icon { flex: none; width: 21px; height: 21px; }
.rf-ab-limit-alert-text { min-width: 0; }
.rf-ab-limit-alert-chev { flex: none; width: 7px; height: 12px; margin-left: 5px; }
.animated_button_1-search-container.rf-ab-has-limit-alert { position: relative; z-index: 1; border: 1px solid #e3def0; border-radius: 12px; }
/* The limit box is the Figma bar F1 (Frame 2147238772): one sentence, hours / minutes / seconds with thin dividers and
   a white button on the brand gradient. Sizes are taken from the SVG (84px high, 66px per unit, 169x48 button). */
.rf-ab-limit-box {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 760px;
	min-height: 84px;
	margin: 16px auto;
	padding: 18px 18px 18px 16px;
	border-radius: 12px;
	background: linear-gradient(109deg, #305bde 0%, #e156f3 100%);
	color: #fff;
	text-align: left;
}
/* Inside the result card, under the Followers / Following tabs: the tabs' 15px side inset, the card's 16px flex gap
   as spacing, and above the plugin's blurred overlay. */
.rf-ab-limit-box.is-in-card { position: relative; z-index: 2; max-width: none; margin: 0 15px; }
/* The plugin sizes that overlay (lock + "Ready to see who's behind the blur?") as 67% of the card, which reached
   up to the box once the card got taller: keep it on the list (the plugin's max-height 470px). */
.rf-ab-has-limit-box > .irfo_user_trail_end.irfo_unpaid_wrap { height: 470px; }
/* The rows blur themselves (filter: blur(15px)) inside the scrolling list, whose top edge cut the first avatar's glow flat.
   The list starts 44px higher, under the box, and its top padding (the plugin's 7px + 44px) keeps the rows in place. */
.irfo_single_users_wrap.rf-ab-has-limit-box > .irfo_users_wrap { margin-top: -44px !important; padding-top: 51px !important; }
.rf-ab-limit-title { flex: 1; min-width: 0; margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 22px; text-wrap: balance; }
.rf-ab-limit-units { display: flex; flex: none; }
.rf-ab-limit-unit { position: relative; display: grid; justify-items: center; width: 66px; }
.rf-ab-limit-unit + .rf-ab-limit-unit::before { content: ""; position: absolute; left: 0; top: -3px; bottom: -3px; width: 1px; border-radius: 1px; background: rgba(255, 255, 255, .2); }
.rf-ab-limit-unit b { color: #fff; font-size: 28px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rf-ab-limit-unit em { color: rgba(255, 255, 255, .92); font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.35; }
/* The theme styles every button and its :hover / :focus (hello-elementor: pink border, pink background), so the button
   restates its look with an id selector, which also beats the search snippet's margin/padding reset. */
#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta,
.rf-ab-limit-box .rf-ab-limit-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 169px;
	height: 48px;
	margin: 0 0 0 8px;
	padding: 0 12px;
	appearance: none;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #47159f;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 11px 12px -4px rgba(47, 1, 151, .14), 0 3px 3px rgba(47, 1, 151, .12), 0 1px 1px rgba(47, 1, 151, .12), 0 0 0 1px rgba(47, 1, 151, .08);
	transition: transform .15s ease, box-shadow .15s ease;
}
#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta:hover,
#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta:focus,
.rf-ab-limit-box .rf-ab-limit-cta:hover,
.rf-ab-limit-box .rf-ab-limit-cta:focus {
	border: 0;
	background: #fff;
	color: #47159f;
	transform: translateY(-1px);
	box-shadow: 0 14px 16px -4px rgba(47, 1, 151, .2), 0 3px 3px rgba(47, 1, 151, .12), 0 1px 1px rgba(47, 1, 151, .12), 0 0 0 1px rgba(47, 1, 151, .08);
}
.rf-ab-limit-box .rf-ab-limit-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rf-ab-limit-cta svg { width: 19px; height: 19px; flex: none; }
@media (prefers-reduced-motion: reduce) {
	#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta,
	.rf-ab-limit-box .rf-ab-limit-cta { transition: none; }
	#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta:hover,
	.rf-ab-limit-box .rf-ab-limit-cta:hover { transform: none; }
}

/* Preview badge (only for people who opened a preview link; never counted) */
.rf-ab-preview {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 9995;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 24px);
	padding: 7px 8px 7px 14px;
	border-radius: 999px;
	background: #1d1730;
	color: #fff;
	font: 600 12.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.rf-ab-preview button { appearance: none; border: 0; cursor: pointer; background: #fff; color: #1d1730; border-radius: 999px; padding: 5px 10px; font: inherit; }
.rf-ab-preview-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer; }
.rf-ab-preview.is-open { border-radius: 18px; }
.rf-ab-preview.is-open .rf-ab-preview-text { display: block; -webkit-line-clamp: none; }
body.rf-ab-bar-open .rf-ab-preview { bottom: 88px; }

/* The plugin's pricing popup (#ifro_customModal) has z-index 1000, so nothing of ours may stay on top of it. */
body.ifro_modal-open .rf-ab-bar,
body.ifro_modal-open .rf-ab-preview { visibility: hidden; }

/* The site's own fixed "Reveal User" bar (mobile) sits in the same spot. It is hidden while our bar is on screen,
   except during popups, so popups look exactly as they do for the control group. */
body:not(.ifro_modal-open) .rf-ab-covered { visibility: hidden !important; }

@media (max-width: 767px) {
	.rf-ab-preview { bottom: 64px; } /* above the site's mobile "Reveal User" bar */
	/* hello-elementor sets nowrap on every button, which cut the red bar's sentence off on phones.
	   Wider screens keep it on one line, as in the Figma bar. */
	.rf-ab-limit-alert { white-space: normal; }
	/* The limit bar stacks: sentence, time, full-width button. */
	.rf-ab-limit-box { flex-wrap: wrap; justify-content: center; gap: 12px; text-align: center; }
	.rf-ab-limit-title { flex-basis: 100%; }
	.rf-ab-limit-unit { width: 74px; }
	#animated_button_1-search-wrapper .rf-ab-limit-box .rf-ab-limit-cta,
	.rf-ab-limit-box .rf-ab-limit-cta { width: 100%; margin: 0; }
}

@media (max-width: 600px) {
	.rf-ab-bar-inner { gap: 10px; }
	.rf-ab-avatars img,
	.rf-ab-avatars i { width: 28px; height: 28px; margin-left: -8px; }
	.rf-ab-bar-text { font-size: 13px; }
	/* Arm B stacks: title, the three counters in one row, then a full-width button. */
	.rf-ab-bar-inner.rf-ab-bar-sum { position: relative; flex-wrap: wrap; gap: 8px 10px; }
	.rf-ab-bar-sum .rf-ab-bar-body { flex-basis: calc(100% - 34px); }
	.rf-ab-bar-sum .rf-ab-counts { flex-basis: 100%; justify-content: space-between; gap: 6px; }
	.rf-ab-bar-sum .rf-ab-count { flex: 1; column-gap: 6px; padding: 5px 8px; }
	.rf-ab-bar-sum .rf-ab-count i { font-size: 18px; }
	.rf-ab-bar-sum .rf-ab-count b { font-size: 18px; }
	.rf-ab-bar-sum .rf-ab-bar-cta { order: 9; width: 100%; }
	.rf-ab-bar-sum .rf-ab-bar-close { position: absolute; top: -4px; right: -4px; }
	body.rf-ab-bar-open.rf-ab-bar-tall { padding-bottom: 150px; }
	body.rf-ab-bar-open.rf-ab-bar-tall .rf-ab-preview { bottom: 162px; }
	.rf-ab-bar-cta { font-size: 13px; padding: 10px 12px; }
	.rf-ab-limit-alert { width: calc(100% - 24px); font-size: 13.5px; }
}

/* The new test components size their own boxes, whatever box-sizing the theme uses */
.rf-ab-sum,
.rf-ab-sum *,
.rf-ab-recent,
.rf-ab-recent * { box-sizing: border-box; }

/* Result view test (variant A, guests): summary rows instead of the plugin's list */
.irfo_single_users_wrap.rf-ab-sum-on .irfo_most_rct_ab_testing_wrap,
.irfo_single_users_wrap.rf-ab-sum-on .irfo_users_wrap,
.irfo_single_users_wrap.rf-ab-sum-on .irfo_unpaid_wrap,
.irfo_single_users_wrap.rf-ab-sum-on .irfo_load_more_wrap { display: none !important; }
/* Side insets follow the plugin's Followers / Following tabs (irfo-public.css): 15px, 30px up to 600px, 15px up to 480px, 7px up to 360px. */
.rf-ab-sum { display: grid; gap: 18px; margin: 14px 15px 15px; text-align: left; }
.rf-ab-sum-rows { display: grid; border-radius: 14px; background: #fff; }
.rf-ab-sum-row { display: flex; align-items: center; gap: 10px; padding: 16px 12px; border-bottom: 1px solid #ece6f7; }
.rf-ab-sum-row:last-child { border-bottom: 0; }
/* Avatar stack: same-size round frames with a white ring and a fixed overlap; the text follows right after the last face. */
.rf-ab-sum-avatars { display: flex; flex: none; align-items: center; }
.rf-ab-sum-avatars .rf-ab-av { position: relative; display: block; flex: none; width: 44px; height: 44px; margin-left: -24px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #ece7f5; box-shadow: 0 1px 3px rgba(42, 3, 101, .12); }
.rf-ab-sum-avatars .rf-ab-av:first-child { z-index: 3; margin-left: 0; }
.rf-ab-sum-avatars .rf-ab-av:nth-child(2) { z-index: 2; }
.rf-ab-sum-avatars .rf-ab-av:nth-child(3) { z-index: 1; }
.rf-ab-sum-avatars .rf-ab-av img,
.rf-ab-sum-avatars .rf-ab-av i { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; background: linear-gradient(135deg, #d9d2e3, #9a91ad); }
.rf-ab-sum-avatars .rf-ab-av.is-blur img { filter: blur(4px); transform: scale(1.3); }
.rf-ab-sum-avatars .rf-ab-av.is-blur i { background: linear-gradient(135deg, #b9aecb, #6d6485); filter: blur(3px); transform: scale(1.3); }
.rf-ab-sum-text { flex: 1; min-width: 0; margin: 0; color: #1d1730; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.rf-ab-sum-user { color: #631eed; font-weight: 700; }
.rf-ab-sum-hidden { display: inline-block; color: #631eed; filter: blur(5px); user-select: none; }
.rf-ab-sum-tag { flex: none; padding: 5px 12px; border: 1px solid #e4d9ff; border-radius: 999px; background: #f3eeff; color: #2a0365; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rf-ab-sum-skel { flex: 1; height: 14px; border-radius: 7px; background: #f1ecf6; }
.rf-ab-sum-empty { margin: 0; padding: 16px 12px; color: #6f6784; }
/* Banner under the summary (design BN33): brand violet, a lock pattern that fades out behind the text,
   a lock tile styled like the site's button, and the site's own animated button (.animated_button_1-generate-button-irfo). */
.rf-ab-sum-cta { position: relative; display: grid; justify-items: center; gap: 10px; padding: 34px 22px 30px; overflow: hidden; isolation: isolate; border: 1.5px solid #e6dcfb; border-radius: 20px; background: #f8f5ff; text-align: center; }
.rf-ab-sum-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='%23d9ccfb' d='M17 20v-3a5 5 0 0 1 10 0v3h.4A2.6 2.6 0 0 1 30 22.6v6.8a2.6 2.6 0 0 1-2.6 2.6H16.6A2.6 2.6 0 0 1 14 29.4v-6.8a2.6 2.6 0 0 1 2.6-2.6H17Zm2.2 0h5.6v-3a2.8 2.8 0 0 0-5.6 0v3Z'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 75%); mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 75%); }
.rf-ab-sum-lock { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #9968f8; border-radius: 14px; background: #631eed; color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 12px 24px -10px rgba(99, 30, 237, .6); }
.rf-ab-sum-lock svg { display: block; width: 24px; height: 24px; }
.rf-ab-sum-title { margin: 0; color: #2a0365; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.rf-ab-sum-sub { margin: 0; max-width: 42ch; color: #5c5476; font-size: 15px; line-height: 1.5; }
/* The site's "Reveal User" button (#animated_button_1-search-wrapper-irfo .animated_button_1-generate-button-irfo), repeated with
   a stronger selector: outside that wrapper the theme's own button rules (pink border, transparent background) win. */
.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo { --animated_button_1-shadow-wide: transparent; --animated_button_1-shadow-inset: rgba(255, 255, 255, 0.04); position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 220px; max-width: 100%; height: auto; margin: 8px 0 0; padding: 12px 26px; border: 1px solid #9968f8; border-radius: 8px; background: #631eed; color: #fff; font: inherit; line-height: 1; text-transform: none; cursor: pointer; overflow: visible; box-shadow: 0 0 120px var(--animated_button_1-shadow-wide), inset 0 1px 1px var(--animated_button_1-shadow-inset); transition: transform .3s, background-color .3s, box-shadow .3s; }
.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo:hover,
.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo:focus-visible { --animated_button_1-shadow-wide: rgba(208, 173, 255, 0.4); --animated_button_1-shadow-inset: rgba(255, 255, 255, 0.35); border-color: #9968f8; background: #631eed; color: #fff; transform: scale(1.05); }
.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo span { color: #fff; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: .005em; }
.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo svg.animated_button_1-icon { width: 20px; height: 22px; margin-right: 8px; fill: #fff; }

/* Recent searches test (variant A) */
/* Recent searches (result view A, design RS1): one row of chips under the search box, then the counter. */
/* Same width as the search box: the row starts at its left edge, "Clear" sits at its right edge, the counter is centred. */
.rf-ab-recent { display: grid; justify-items: center; gap: 12px; width: 100%; margin: 16px 0 0; text-align: center; }
/* One line: on narrow screens the chips scroll sideways instead of stacking. */
.rf-ab-recent-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: 100%; padding: 4px 2px 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rf-ab-recent-row::-webkit-scrollbar { display: none; }
.rf-ab-recent-row > * { flex: none; }
.rf-ab-recent-label { margin-right: 2px; color: #6d6485; font-size: 14px; font-weight: 700; }
.rf-ab-recent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid #ece6f6; box-shadow: none; }
.rf-ab-recent .rf-ab-recent-go { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px 0 0; border: 0; background: transparent; color: #1b1440; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: none; }
.rf-ab-recent .rf-ab-recent-go:hover,
.rf-ab-recent .rf-ab-recent-go:focus { background: transparent; color: #631eed; }
.rf-ab-recent-avatar { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: #efe7fe; color: #631eed; font-size: 13px; font-weight: 800; }
.rf-ab-recent-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-ab-recent-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-ab-recent .rf-ab-recent-x { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1eef7; color: #6d6485; font: 700 14px/1 system-ui, sans-serif; cursor: pointer; box-shadow: none; }
.rf-ab-recent .rf-ab-recent-x:hover,
.rf-ab-recent .rf-ab-recent-x:focus { background: #e6e0f2; color: #2a0365; }
.rf-ab-recent .rf-ab-recent-clear { margin: 0 0 0 auto; padding: 4px 6px; border: 0; background: transparent; color: #631eed; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none; }
.rf-ab-recent .rf-ab-recent-clear:hover,
.rf-ab-recent .rf-ab-recent-clear:focus { background: transparent; color: #4a12c9; text-decoration: underline; }
.rf-ab-recent-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #4b4366; font-size: 14px; font-variant-numeric: tabular-nums; }
.rf-ab-recent-count i { width: 8px; height: 8px; border-radius: 50%; background: #1fbf5c; box-shadow: 0 0 0 5px rgba(31, 191, 92, .15); }
.rf-ab-recent-count b { color: #1b1440; font-weight: 800; }

/* The Pro offer (Pro test A, exit test A): pill MB8, offer box OB8 inside the plugin's Pro popup, exit card MB10.
   Built from the picked designs; font sizes and colours as in the gallery. */
.rf-ab-pill,
.rf-ab-pill *,
.rf-ab-obx,
.rf-ab-obx *,
.rf-ab-exit,
.rf-ab-exit * { box-sizing: border-box; }
.rf-ab-flap { display: inline-flex; flex: none; align-items: center; gap: 4px; line-height: 1; }
.rf-ab-flap > span { position: relative; display: inline-grid; place-items: center; width: 34px; height: 36px; overflow: hidden; border-radius: 7px; background: linear-gradient(180deg, #2a1470 0 50%, #1f0d5c 50% 100%); color: #fff; box-shadow: 0 6px 12px -6px rgba(42, 20, 112, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.rf-ab-flap > span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.35); }
.rf-ab-flap > span.s { background: linear-gradient(180deg, #ff5a8a 0 50%, #e94a7c 50% 100%); }
.rf-ab-flap b { position: relative; z-index: 1; color: inherit; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rf-ab-flap > i { font-style: normal; font-weight: 800; opacity: 0.6; }
.rf-ab-flap.glass > span { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.rf-ab-flap.glass > span.s { background: rgba(255, 90, 138, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 143, 180, 0.5); color: #ffb3cb; }

/* MB8: the pill (below the plugin's popup, z-index 1000; hidden while a popup or the exit card is open) */
.rf-ab-pill { position: fixed; left: 50%; bottom: 16px; z-index: 998; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: #1b1440; color: #fff; font-family: inherit; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; translate: -50% 0; box-shadow: 0 18px 36px -14px rgba(27, 20, 64, 0.8); transition: bottom 0.2s ease; animation: rf-ab-rise 0.35s ease both; }
.rf-ab-pill:focus-visible { outline: 2px solid #9968f8; outline-offset: 3px; }
.rf-ab-pill-lbl b { color: #fff; font-weight: 700; }
.rf-ab-pill .rf-ab-flap > span { width: 28px; height: 30px; border-radius: 6px; }
.rf-ab-pill .rf-ab-flap b { font-size: 15px; }
.rf-ab-pill-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid #9968f8; border-radius: 999px; background: #631eed; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35); }
.rf-ab-pill:hover .rf-ab-pill-btn { background: #5516d8; }
body.ifro_modal-open .rf-ab-pill,
body.rf-ab-exit-open .rf-ab-pill { display: none; }
body.ifro_modal-open .rf-ab-exit { display: none; }
@keyframes rf-ab-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* OB8 and the offer prices inside the plugin's Pro popup */
#ifro_customModal .rf-ab-obx { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 22px 0; padding: 10px 10px 10px 14px; border-radius: 12px; background: radial-gradient(100% 140% at 0% 0%, #4b1fb0 0%, rgba(75, 31, 176, 0) 60%), #1b1440; color: #fff; text-align: left; }
#ifro_customModal .rf-ab-obx-text { display: grid; margin: 0; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.3; text-align: left; }
#ifro_customModal .rf-ab-obx-text b { color: #fff; font-weight: 700; }
#ifro_customModal .rf-ab-obx-text span { color: #b8b0d6; font-size: 11.5px; }
#ifro_customModal .rf-ab-obx .rf-ab-flap > span { width: 34px; height: 38px; }
#ifro_customModal.rf-ab-offer-on .irfo_toggle_group_flex { flex-wrap: wrap; }
#ifro_customModal .rf-ab-plan-line { flex-basis: 100%; margin: 2px 0 0; color: #6d6485; font-size: 11.5px; font-weight: 500; line-height: 1.3; text-align: left; white-space: nowrap; }
#ifro_customModal .rf-ab-plan-line s { margin-left: 3px; color: #a39bb6; }
#ifro_customModal.rf-ab-offer-on .irfo_plan_save_wrap { top: -11px; height: 20px; }
#ifro_customModal.rf-ab-offer-on .irfo_price_wrap { flex-wrap: wrap; align-content: flex-end; }
#ifro_customModal .rf-ab-was { flex-basis: 100%; margin: 0 0 2px; color: #a39bb6; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; text-decoration: line-through; }

/* MB10: the exit card (above everything, like a popup) */
.rf-ab-exit { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; background: rgba(22, 14, 44, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: rf-ab-fade 0.2s ease both; }
.rf-ab-exit-card { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 360px; padding: 22px 20px 16px; border-radius: 16px; background: #fff; color: #2a0365; font-family: inherit; text-align: center; box-shadow: 0 30px 60px -20px rgba(22, 14, 44, 0.6); animation: rf-ab-pop 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
.rf-ab-exit .rf-ab-exit-title { margin: 0; color: #2a0365; font-size: 20px; font-weight: 800; line-height: 1.25; }
.rf-ab-exit-title span { background: linear-gradient(90deg, #3910f7, #a137c0, #ff5a8a, #fba54c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-ab-exit .rf-ab-exit-text { margin: 0; color: #5c5476; font-size: 13.5px; line-height: 1.4; }
.rf-ab-exit-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: 1px solid #9968f8; border-radius: 8px; background: #631eed; color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35); }
.rf-ab-exit-btn:hover { background: #5516d8; }
.rf-ab-exit-card:focus { outline: none; }
.rf-ab-exit-btn svg { width: 16px; height: 16px; }
.rf-ab-exit-skip { color: #6d6485; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rf-ab-exit-btn:focus-visible,
.rf-ab-exit-skip:focus-visible { outline: 2px solid #9968f8; outline-offset: 2px; }
body.rf-ab-exit-open { overflow: hidden; }
@keyframes rf-ab-fade { from { opacity: 0; } }
@keyframes rf-ab-pop { from { opacity: 0; transform: scale(0.94); } }

@media (max-width: 600px) {
	.rf-ab-pill { left: 10px; right: 10px; justify-content: space-between; gap: 8px; padding-left: 12px; font-size: 13px; translate: none; }
}
@media (max-width: 480px) {
	#ifro_customModal .rf-ab-obx { flex-direction: column; gap: 8px; margin: 12px 16px 0; text-align: center; }
	#ifro_customModal .rf-ab-obx-text { text-align: center; }
	#ifro_customModal .rf-ab-plan-line { text-align: center; }
}
@media (max-width: 410px) {
	#ifro_customModal .rf-ab-was { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.rf-ab-pill,
	.rf-ab-exit,
	.rf-ab-exit-card { animation: none; transition: none; }
}

@media (max-width: 600px) {
	.rf-ab-sum-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 14px 4px; }
	.rf-ab-sum-avatars .rf-ab-av { width: 38px; height: 38px; margin-left: -20px; }
	.rf-ab-sum-avatars .rf-ab-av:first-child { margin-left: 0; }
	.rf-ab-sum-text { font-size: 14px; }
	.rf-ab-sum-tag { grid-column: 2; justify-self: start; font-size: 12px; }
	.rf-ab-sum-title { font-size: 18px; }
}

/* The site's search snippet resets spacing inside its wrapper with an id selector
   (#animated_button_1-search-wrapper * { margin: 0; padding: 0; }), which beats class selectors.
   The limit notice, the result summary and the recent searches sit inside that wrapper, so their spacing is repeated here. */
#animated_button_1-search-wrapper .rf-ab-limit-alert { margin: 0 auto; padding: 11px 16px 12px; }
#animated_button_1-search-wrapper .rf-ab-limit-alert-chev { margin-left: 5px; }
#animated_button_1-search-wrapper .rf-ab-limit-box { margin: 16px auto; padding: 18px 18px 18px 16px; }
#animated_button_1-search-wrapper .rf-ab-limit-box.is-in-card { margin: 0 15px; }
#animated_button_1-search-wrapper .rf-ab-limit-title { margin: 0; }
#animated_button_1-search-wrapper .rf-ab-sum { margin: 14px 15px 15px; }
@media (max-width: 600px) {
	.rf-ab-sum,
	#animated_button_1-search-wrapper .rf-ab-sum { margin-right: 30px; margin-bottom: 30px; margin-left: 30px; }
}
@media (max-width: 480px) {
	.rf-ab-sum,
	#animated_button_1-search-wrapper .rf-ab-sum { margin-right: 15px; margin-bottom: 15px; margin-left: 15px; }
}
@media (max-width: 360px) {
	.rf-ab-sum,
	#animated_button_1-search-wrapper .rf-ab-sum { margin-right: 7px; margin-bottom: 7px; margin-left: 7px; }
}
#animated_button_1-search-wrapper .rf-ab-sum-row { padding: 16px 12px; }
#animated_button_1-search-wrapper .rf-ab-sum-avatars .rf-ab-av { margin-left: -24px; }
#animated_button_1-search-wrapper .rf-ab-sum-avatars .rf-ab-av:first-child { margin-left: 0; }
#animated_button_1-search-wrapper .rf-ab-sum-text { margin: 0; }
#animated_button_1-search-wrapper .rf-ab-sum-tag { padding: 5px 12px; }
#animated_button_1-search-wrapper .rf-ab-sum-empty { margin: 0; padding: 16px 12px; }
#animated_button_1-search-wrapper .rf-ab-sum-cta { padding: 34px 22px 30px; }
#animated_button_1-search-wrapper .rf-ab-sum-cta .rf-ab-sum-btn.animated_button_1-generate-button-irfo { margin: 8px 0 0; padding: 12px 26px; }
#animated_button_1-search-wrapper .rf-ab-sum-title { margin: 0; }
#animated_button_1-search-wrapper .rf-ab-sum-sub { margin: 0; }
#animated_button_1-search-wrapper .rf-ab-sum-btn { margin-top: 8px; padding: 13px 26px; }
#animated_button_1-search-wrapper .rf-ab-recent { margin: 16px 0 0; }
#animated_button_1-search-wrapper .rf-ab-recent-chip { padding: 4px 6px 4px 4px; }
#animated_button_1-search-wrapper .rf-ab-recent .rf-ab-recent-go { padding: 0 4px 0 0; }
#animated_button_1-search-wrapper .rf-ab-recent .rf-ab-recent-clear { margin: 0 0 0 auto; padding: 4px 6px; }
#animated_button_1-search-wrapper .rf-ab-recent-row { padding: 4px 2px 8px; }
#animated_button_1-search-wrapper .rf-ab-recent-count { margin: 0; }
@media (max-width: 600px) {
	#animated_button_1-search-wrapper .rf-ab-sum-row { padding: 14px 4px; }
	#animated_button_1-search-wrapper .rf-ab-sum-avatars .rf-ab-av { margin-left: -20px; }
	#animated_button_1-search-wrapper .rf-ab-sum-avatars .rf-ab-av:first-child { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rf-ab-bar { transition: none; }
}

/* After the id rules above, so the phone padding of the limit bar wins over the desktop one. */
@media (max-width: 767px) {
	#animated_button_1-search-wrapper .rf-ab-limit-box { padding: 16px 14px; }
}

/* Similar accounts test (variant A, design SA3): one row of chips between the profile and the tabs.
   Same side insets as the tabs; chips in the inactive tab's colour; the row scrolls sideways instead of wrapping. */
.rf-ab-sim,
.rf-ab-sim * { box-sizing: border-box; }
/* Similar accounts (result view A): a block inside the result card, no frame of its own — title and ‹ › on top, a row of pills
   (photo, @username, full name) that scrolls sideways. */
.rf-ab-sim { display: block; flex: 0 0 auto; align-self: stretch; width: auto; min-width: 0; max-width: 100%; margin: 0 0 16px; padding: 0; overflow: hidden; border: 0; background: transparent; text-align: left; }
.rf-ab-sim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.rf-ab-sim-title { margin: 0; color: #2a0365; font-size: 14px; font-weight: 800; line-height: 1.3; }
.rf-ab-sim-arrows { display: flex; gap: 6px; }
.rf-ab-sim .rf-ab-sim-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1eef7; color: #631eed; line-height: 0; cursor: pointer; box-shadow: none; }
.rf-ab-sim .rf-ab-sim-arrow svg { display: block; width: 16px; height: 16px; }
.rf-ab-sim .rf-ab-sim-arrow:hover,
.rf-ab-sim .rf-ab-sim-arrow:focus { background: #e6e0f2; color: #631eed; }
.rf-ab-sim-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.rf-ab-sim-row::-webkit-scrollbar { display: none; }
.rf-ab-sim .rf-ab-sim-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 14px 4px 4px; border: 1px solid #ece6f6; border-radius: 999px; background: #fff; color: #1b1440; font: inherit; line-height: 1.2; text-align: left; white-space: nowrap; cursor: pointer; box-shadow: none; scroll-snap-align: start; }
.rf-ab-sim .rf-ab-sim-chip:hover,
.rf-ab-sim .rf-ab-sim-chip:focus { border-color: #d9ccfb; background: #fff; color: #1b1440; }
.rf-ab-sim .rf-ab-sim-chip:focus-visible { outline: 2px solid #631eed; outline-offset: 2px; }
.rf-ab-sim-chip img,
.rf-ab-sim-chip i { display: block; width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #d9d2e3, #9a91ad); }
.rf-ab-sim-text { display: grid; gap: 1px; max-width: 170px; }
.rf-ab-sim-text b { overflow: hidden; color: #1b1440; font-size: 14px; font-weight: 700; text-overflow: ellipsis; }
.rf-ab-sim-text small { overflow: hidden; color: #6d6485; font-size: 12px; text-overflow: ellipsis; }
#animated_button_1-search-wrapper .rf-ab-sim { margin: 0 0 16px; }
#animated_button_1-search-wrapper .rf-ab-sim { padding: 0; }
#animated_button_1-search-wrapper .rf-ab-sim-title { margin: 0; }
#animated_button_1-search-wrapper .rf-ab-sim-head { margin: 0 0 10px; }
#animated_button_1-search-wrapper .rf-ab-sim-row { padding: 0 0 2px; }
#animated_button_1-search-wrapper .rf-ab-sim .rf-ab-sim-chip { padding: 4px 14px 4px 4px; }
@media (max-width: 600px) {
}
@media (max-width: 480px) {
}
@media (max-width: 360px) {
}
@media (max-width: 480px) {
	.rf-ab-sum-cta,
	#animated_button_1-search-wrapper .rf-ab-sum-cta { padding: 28px 14px 22px; }
	.rf-ab-sum-title { font-size: 19px; }
	.rf-ab-sum-sub { font-size: 14px; }
	.rf-ab-sum-cta button.rf-ab-sum-btn.animated_button_1-generate-button-irfo { width: 100%; }
}
@media (max-width: 760px) {
	.rf-ab-recent-row { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
	.rf-ab-recent .rf-ab-recent-go { font-size: 14px; }
	.rf-ab-recent-avatar { width: 26px; height: 26px; }
}
@media (max-width: 600px) {
	.rf-ab-sim-arrows { display: none; }
}