/**
 * Matching flow — "יצירת פרופיל" wizard.
 *
 * UI: shortcodes/matching_flow.php  →  [matching_flow]
 *
 * Ported from the handed-over design mock. Everything is scoped under .cob-mf
 * so none of it can reach the rest of the site, and the theme's own resets are
 * neutralised only inside that scope.
 */

.cob-mf {
	--mf-blue: #1E56A0;
	--mf-blue-light: #EAF1FB;
	--mf-green: #22B14C;
	--mf-pink: #E3316E;
	--mf-pink-dark: #C81E56;
	--mf-pink-light: #FBE1EA;
	--mf-border: #D7DEE8;
	--mf-text: #1F2430;
	--mf-text-secondary: #6B7280;
	--mf-text-muted: #9CA3AF;
	--mf-bg: #F7F8FA;

	background: var(--mf-bg);
	color: var(--mf-text);
	font-family: -apple-system, "Segoe UI", Arial, sans-serif;
	padding: 32px 16px;
	text-align: right;
}

.cob-mf *,
.cob-mf *::before,
.cob-mf *::after {
	box-sizing: border-box;
}

.cob-mf [hidden] {
	display: none !important;
}

/* The account screen (shortcodes/login_page.php, rendered inline on /join)
   sits outside .cob-mf so it keeps its own full-width two-column layout
   instead of being squeezed into the wizard card — which means showing it
   hides the wizard shell itself, and neither root is covered by the rule
   above. Nothing else here styles .mf-account: the login page's own
   stylesheet is meant to be the only thing describing it. */
.cob-mf[hidden],
.mf-account[hidden] {
	display: none !important;
}

.mf-wrap {
	max-width: 620px;
	margin: 0 auto;
}

/* ------------------------------------------------------------- steppers */

.mf-stepper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 28px;
	position: relative;
}

.mf-stepper::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 8%;
	left: 8%;
	height: 2px;
	background: var(--mf-border);
	z-index: 0;
}

.mf-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
}

.mf-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var(--mf-border);
	color: var(--mf-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.mf-step.is-done .mf-dot { background: var(--mf-green); border-color: var(--mf-green); color: #fff; }
.mf-step.is-active .mf-dot { border-color: var(--mf-pink); color: var(--mf-pink); background: var(--mf-pink-light); }

.mf-label { font-size: 11px; color: var(--mf-text-muted); text-align: center; }
.mf-step.is-active .mf-label { color: var(--mf-pink); font-weight: 700; }
.mf-step.is-done .mf-label { color: var(--mf-green); }

.mf-stepper2-wrap { margin-bottom: 8px; }

.mf-stepper2-title {
	font-size: 20px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 24px;
}

.mf-stepper2 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	margin-bottom: 28px;
}

.mf-stepper2::before {
	content: "";
	position: absolute;
	top: 19px;
	right: 6%;
	left: 6%;
	height: 2px;
	background: var(--mf-border);
	z-index: 0;
}

.mf-step2 {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.mf-dot2 {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var(--mf-border);
	color: var(--mf-text-muted);
	font-size: 14px;
	font-weight: 700;
}

.mf-step2.is-done .mf-dot2 { background: var(--mf-green); border-color: var(--mf-green); color: #fff; }
.mf-step2.is-done { cursor: pointer; }

.mf-step2.is-active .mf-dot2 {
	background: var(--mf-pink);
	border-color: var(--mf-pink);
	color: #fff;
	box-shadow: 0 0 0 5px var(--mf-pink-light);
}

.mf-label2 { font-size: 12px; color: var(--mf-text-muted); text-align: center; font-weight: 500; }
.mf-step2.is-active .mf-label2 { color: var(--mf-pink); font-weight: 700; }
.mf-step2.is-done .mf-label2 { color: var(--mf-green); font-weight: 600; }

/* ----------------------------------------------------------------- card */

.mf-card {
	background: #fff;
	border: 1px solid var(--mf-border);
	border-radius: 14px;
	padding: 32px 28px;
	box-shadow: 0 1px 3px rgba(20, 30, 50, 0.06);
}

.cob-mf h1 {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 6px;
	padding: 0;
	color: var(--mf-text);
	line-height: 1.3;
}

.mf-sub {
	font-size: 14px;
	color: var(--mf-text-secondary);
	margin-bottom: 24px;
	line-height: 1.5;
}

.mf-note {
	font-size: 12.5px;
	color: var(--mf-text-secondary);
	line-height: 1.6;
	margin-bottom: 18px;
}

.mf-empty {
	font-size: 13px;
	color: var(--mf-text-secondary);
	line-height: 1.7;
}

.mf-error {
	font-size: 13px;
	color: #B0134F;
	background: var(--mf-pink-light);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 14px;
	line-height: 1.6;
}

.mf-error a { color: inherit; font-weight: 700; }

.mf-notice {
	font-size: 12.5px;
	color: #1B5E20;
	background: #E9F7EE;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 16px;
}

.mf-section-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--mf-text-secondary);
	margin-bottom: 10px;
}

.mf-section-label--spaced { margin-top: 8px; }

.mf-divider {
	border-top: 1px solid var(--mf-border);
	margin: 24px 0 18px;
	padding-top: 18px;
}

/* --------------------------------------------------------------- fields */

.mf-field { margin-bottom: 18px; }

.mf-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--mf-text);
}

.cob-mf .mf-input,
.cob-mf select {
	width: 100%;
	border: 1.5px solid var(--mf-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--mf-text);
	margin: 0;
}

.cob-mf .mf-input:focus,
.cob-mf select:focus {
	outline: none;
	border-color: var(--mf-pink);
}

.mf-input--filled { background: var(--mf-bg); color: var(--mf-text-secondary); }
.mf-input--narrow { max-width: 400px; margin: 0 auto 18px; display: block; }
.mf-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

/* ------------------------------------------------------------- select2 ---
   Select2 renders its own box with a fixed short height and small font,
   ignoring .mf-input — these rules make it match the surrounding inputs
   (mf-p-region, mf-p-tracks) instead of collapsing/overflowing its text. */
.cob-mf .select2-container { width: 100% !important; display: block; }

.cob-mf .select2-container--default .select2-selection--single,
.cob-mf .select2-container--default .select2-selection--multiple {
	min-height: 44px;
	height: auto;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1.5px solid var(--mf-border);
	border-radius: 8px;
	background: var(--mf-bg);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.cob-mf .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--mf-text-secondary);
	font-size: 14px;
	line-height: 1.4;
}

.cob-mf .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
}

.cob-mf .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
}

.cob-mf .select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin: 0;
	border-color: var(--mf-border);
	border-radius: 6px;
	font-size: 13px;
	padding: 2px 6px;
}

.cob-mf .select2-container--default .select2-search--inline .select2-search__field {
	font-family: inherit;
	font-size: 14px;
	margin-top: 0;
}

.cob-mf .select2-container--default.select2-container--focus .select2-selection--single,
.cob-mf .select2-container--default.select2-container--focus .select2-selection--multiple,
.cob-mf .select2-container--default.select2-container--open .select2-selection--single,
.cob-mf .select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--mf-pink);
	background: #ffffff;
}

.cob-mf .select2-dropdown { border-color: var(--mf-border); border-radius: 8px; font-size: 14px; }

/* ---------------------------------------------------------------- pills */

.mf-pillgroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
}

.mf-pillgroup--inline {
	justify-content: flex-start;
	gap: 8px;
	margin: 0 0 4px;
}

.cob-mf .mf-pill {
	border: 1.5px solid #DAD6F5;
	border-radius: 999px;
	padding: 14px 26px;
	font-size: 15px;
	font-weight: 600;
	color: #131B41;
	background: #fff;
	cursor: pointer;
	transition: .15s;
	text-align: center;
	font-family: inherit;
	line-height: 1.3;
}

.cob-mf .mf-pill:hover { border-color: #B7ACEB; }

.cob-mf .mf-pill.is-selected {
	border-color: transparent;
	color: #fff;
	background: linear-gradient(135deg, #E3316E, #C81E56);
	box-shadow: 0 0 22px rgba(214, 41, 94, 0.4);
}

.cob-mf .mf-pill--dashed { border-style: dashed; color: var(--mf-text-secondary); font-weight: 500; }
.cob-mf .mf-pill--dashed.is-selected { border-style: solid; }
.cob-mf .mf-pill--sm { padding: 8px 16px; font-size: 13px; }

/* ---------------------------------------------------------------- chips */

.mf-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.cob-mf .mf-chip {
	border: 1.5px solid var(--mf-border);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	background: #fff;
	color: var(--mf-text);
	font-family: inherit;
	transition: .15s;
}

.cob-mf .mf-chip:hover { border-color: #B7C6DE; }

.cob-mf .mf-chip.is-selected {
	background: var(--mf-pink);
	border-color: var(--mf-pink);
	color: #fff;
}

/* ----------------------------------------------------- location dropdown */

.mf-loc { position: relative; max-width: 340px; margin: 0 auto 18px; }

.mf-loc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1.5px solid var(--mf-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14.5px;
	cursor: pointer;
	background: #fff;
	color: var(--mf-text-muted);
}

.mf-loc-trigger.has-value { color: var(--mf-text); font-weight: 600; }
.mf-loc-trigger:focus { outline: none; border-color: var(--mf-pink); }

.mf-loc-chevron {
	width: 16px;
	height: 16px;
	color: var(--mf-text-muted);
	transition: transform .15s;
	flex-shrink: 0;
}

.mf-loc-trigger.is-open .mf-loc-chevron { transform: rotate(180deg); }

.mf-loc-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 20;
	background: #fff;
	border: 1.5px solid var(--mf-border);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(20, 20, 30, 0.14);
	padding: 8px;
}

.cob-mf .mf-loc-search {
	width: 100%;
	border: 1.5px solid var(--mf-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13.5px;
	margin: 0 0 6px;
	font-family: inherit;
}

.cob-mf .mf-loc-search:focus { outline: none; border-color: var(--mf-pink); }

.mf-loc-options { max-height: 20vh; overflow-y: auto; }

.mf-loc-option {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
}

.mf-loc-option:hover { background: var(--mf-pink-light); }

.mf-field--dropdown { position: relative; }

.mf-loc-option--multi.is-selected { background: var(--mf-pink-light); font-weight: 600; }

.mf-loc-option:not(.mf-loc-option--special) + .mf-loc-option--special { border-top: 1px solid var(--mf-border); margin-top: 4px; padding-top: 12px; }

.mf-loc-empty {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--mf-text-muted);
	text-align: center;
}

/* -------------------------------------------------------------- preview */

.mf-stats { display: flex; gap: 10px; margin-bottom: 22px; }

.mf-stat {
	flex: 1;
	background: var(--mf-pink-light);
	border-radius: 10px;
	padding: 16px 10px;
	text-align: center;
}

.mf-stat--loading { background: var(--mf-bg); color: var(--mf-text-muted); font-size: 13px; }
.mf-stat-num { font-size: 22px; font-weight: 800; color: var(--mf-pink-dark); }
.mf-stat-lbl { font-size: 11.5px; color: var(--mf-text-secondary); margin-top: 4px; line-height: 1.3; }
.mf-stat-lbl--lg { font-size: 13px; margin-top: 0; }

/* -------------------------------------------------------------- CV step */

.mf-dropzone {
	border: 1.5px dashed var(--mf-border);
	border-radius: 10px;
	padding: 34px 16px;
	text-align: center;
	margin-bottom: 16px;
	cursor: pointer;
}

.mf-dropzone:hover,
.mf-dropzone.is-dragover { border-color: var(--mf-pink); }
.mf-dropzone.is-busy { opacity: 1; pointer-events: none; }
.mf-dropzone.is-busy .mf-dropzone-icon { display: none; }

.mf-dropzone-icon { font-size: 30px; color: var(--mf-text-muted); margin-bottom: 8px; }
.mf-dropzone-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.mf-dropzone-sub { font-size: 12.5px; color: var(--mf-text-secondary); }

/* CV upload — analyzing spinner (same technique as onboarding's circular-progress) */
.mf-dropzone-spinner { display: none; width: 56px; height: 56px; margin: 0 auto 8px; }
.mf-dropzone.is-busy .mf-dropzone-spinner { display: block; }

.mf-spinner-svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.mf-spinner-track { fill: none; stroke: var(--mf-pink-light); stroke-width: 8; }
.mf-spinner-bar {
	fill: none;
	stroke: var(--mf-pink);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 339.292; /* 2 * PI * 54 */
	stroke-dashoffset: 339.292;
	animation: mf-spinner-progress 3s ease-in-out infinite;
}

@keyframes mf-spinner-progress {
	0% { stroke-dashoffset: 339.292; }
	50% { stroke-dashoffset: 84.823; }
	100% { stroke-dashoffset: 339.292; }
}

.mf-filepill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--mf-border);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 13.5px;
}

.mf-filepill-name { font-weight: 700; }

.cob-mf .mf-filepill-remove {
	color: var(--mf-text-secondary);
	cursor: pointer;
	font-size: 12px;
	text-decoration: underline;
	background: none;
	border: none;
	font-family: inherit;
	padding: 0;
}

/* ----------------------------------------------------------- role picker */

.mf-rolelist {
	border: 1px solid var(--mf-border);
	border-radius: 8px;
	overflow: hidden;
	margin: 14px 0 18px;
}

.mf-rolelist:empty { display: none; }

.mf-roleitem {
	padding: 11px 14px;
	font-size: 13.5px;
	cursor: pointer;
	border-bottom: 1px solid var(--mf-border);
}

.mf-roleitem:last-child { border-bottom: none; }
.mf-roleitem:hover { background: var(--mf-bg); }
.mf-roleitem.is-empty { color: var(--mf-text-muted); cursor: default; }
.mf-roleitem.is-empty:hover { background: none; }

.mf-roleitem.is-selected {
	background: var(--mf-pink-light);
	color: var(--mf-pink-dark);
	font-weight: 700;
}

.mf-roleitem.is-manual {
	color: var(--mf-pink-dark);
	font-weight: 700;
}
.mf-roleitem.is-manual:hover { background: var(--mf-pink-light); }

.mf-role-more { margin: -8px 0 18px; }

/* --------------------------------------------------------- skill search */

.mf-skill-search { position: relative; margin-bottom: 20px; }

.mf-search-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--mf-text-secondary);
	margin-bottom: 8px;
	display: block;
}

.mf-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	z-index: 15;
	background: #fff;
	border: 1.5px solid var(--mf-border);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(20, 20, 30, 0.14);
	padding: 6px;
	max-height: 220px;
	overflow-y: auto;
}

.mf-suggestion {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	cursor: pointer;
}

.mf-suggestion:hover { background: var(--mf-pink-light); }
.mf-suggestion.is-empty { color: var(--mf-text-muted); font-size: 12.5px; cursor: default; }
.mf-suggestion.is-empty:hover { background: none; }

/* --------------------------------------------------- privacy / forwarding */

.mf-toggle-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--mf-border);
}

.mf-toggle-row:first-of-type { border-top: none; }
.mf-toggle-text { flex: 1; }

.mf-toggle-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--mf-text);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.mf-toggle-title svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--mf-text-secondary); }
.mf-toggle-desc { font-size: 12px; color: var(--mf-text-secondary); line-height: 1.6; }

.mf-tog {
	position: relative;
	width: 38px;
	height: 22px;
	display: block;
	flex-shrink: 0;
	margin-top: 2px;
}

.mf-tog input { opacity: 0; width: 0; height: 0; position: absolute; }

.mf-tog-track {
	position: absolute;
	inset: 0;
	border-radius: 11px;
	background: #C8C8DC;
	transition: background .2s;
	cursor: pointer;
}

.mf-tog-track::after {
	content: '';
	position: absolute;
	top: 3px;
	right: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.mf-tog input:checked + .mf-tog-track { background: var(--mf-blue); }
.mf-tog input:checked + .mf-tog-track::after { transform: translateX(-16px); }

.mf-email-hint {
	font-size: 12px;
	color: var(--mf-text-secondary);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0 4px;
}

.mf-email-hint svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--mf-text-muted); }
.mf-email-hint strong { color: var(--mf-text); font-weight: 700; }

.mf-email-warning {
	font-size: 12px;
	color: #7B3A00;
	background: #FFF3E0;
	border: 1px solid #FFCC80;
	border-radius: 8px;
	padding: 9px 12px;
	line-height: 1.6;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 4px;
}

.mf-email-warning svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: #E65100; }

.cob-mf .mf-reactivate {
	color: #E65100;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 12px;
	padding: 0;
	white-space: nowrap;
}

.cob-mf .mf-reactivate:hover { color: #BF360C; }

/* ----------------------------------------------------------- communities */

.mf-comm-explainer { font-size: 12px; color: var(--mf-text-secondary); margin-bottom: 12px; }

.mf-commcard {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1.5px solid var(--mf-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: pointer;
}

.mf-commcard:hover { border-color: #B7C6DE; }
.mf-commcard.is-selected { border-color: var(--mf-green); background: #F0FBF3; }
.mf-commcard.is-locked { cursor: default; }
.mf-commcard.is-locked:hover { border-color: var(--mf-green); }

.mf-checkbox {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 2px solid var(--mf-border);
	flex-shrink: 0;
	margin-top: 2px;
	position: relative;
}

.mf-commcard.is-selected .mf-checkbox { border-color: var(--mf-green); background: var(--mf-green); }

.mf-commcard.is-selected .mf-checkbox::after {
	content: "✓";
	position: absolute;
	inset: 0;
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mf-commtitle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mf-commtitle { font-size: 14px; font-weight: 700; }
.mf-commsub { font-size: 12.5px; color: var(--mf-text-secondary); margin-top: 2px; }

.mf-commbadge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 9px;
	white-space: nowrap;
}

.mf-commbadge--open { background: #E9F7EE; color: var(--mf-green); }
.mf-commbadge--closed { background: #FFF3E0; color: #B4680A; }

.mf-commaction { font-size: 11.5px; color: var(--mf-text-muted); margin-top: 5px; }
.mf-commcard.is-selected .mf-commaction { font-weight: 700; }
.mf-commcard--open.is-selected .mf-commaction { color: var(--mf-green); }
.mf-commcard--closed.is-selected .mf-commaction { color: #B4680A; }

/* ------------------------------------------------ experience + education */

.mf-entry { position: relative; }

.mf-entry + .mf-entry {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--mf-border);
}

.cob-mf .mf-entry-remove {
	position: absolute;
	top: -6px;
	left: 0;
	font-size: 12px;
	color: var(--mf-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}

.cob-mf .mf-entry-remove:hover { color: #C0392B; }

.cob-mf .mf-add-entry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--mf-pink-dark);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
	margin: 2px 0 18px;
	font-family: inherit;
}

.cob-mf .mf-add-entry:hover { color: var(--mf-pink); }
.mf-add-entry svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------- buttons */

.mf-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 22px;
	gap: 10px;
}

/* Pre-account screens centre their content, so a lone button pushed to one
   side reads as misaligned. The button keeps its own size — it is centred,
   never stretched, on any screen width. */
.mf-footer--center { justify-content: center; }

.cob-mf .mf-footer--center .mf-btn {
	width: auto;
	flex: 0 0 auto;
}

.cob-mf .mf-btn {
	background: linear-gradient(135deg, var(--mf-pink), var(--mf-pink-dark));
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 26px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

.cob-mf .mf-btn:disabled,
.cob-mf .mf-btn.is-busy {
	background: #B9C6DA;
	cursor: not-allowed;
}

.cob-mf .mf-btn--wide { width: 100%; padding: 13px; font-size: 15px; }

.cob-mf .mf-btn-skip {
	background: none;
	border: 1.5px solid var(--mf-border);
	color: var(--mf-text-secondary);
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 13.5px;
	cursor: pointer;
	font-family: inherit;
}

.mf-link-line {
	text-align: center;
	font-size: 12.5px;
	color: var(--mf-text-secondary);
	margin-top: 14px;
}

.mf-link-line a { color: var(--mf-pink); text-decoration: none; font-weight: 700; }

.mf-later-line { text-align: center; font-size: 13px; margin-top: 16px; }

.cob-mf .mf-later-line button {
	color: var(--mf-text-secondary);
	text-decoration: underline;
	cursor: pointer;
	font-weight: 600;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	padding: 0;
}

.cob-mf .mf-later-line button:hover { color: var(--mf-pink); }

/* --------------------------------------------------------------- modals */

.mf-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 23, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}

.mf-modal {
	background: #fff;
	border-radius: 18px;
	max-width: 480px;
	width: 100%;
	padding: 40px 30px 30px;
	position: relative;
	text-align: center;
	box-shadow: 0 16px 44px rgba(15, 17, 23, 0.28);
}

.cob-mf .mf-modal-close {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 22px;
	line-height: 1;
	color: #4B5563;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
}

.cob-mf .mf-modal h1 { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
.mf-modal .mf-sub { font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
.mf-emoji { font-size: 34px; margin-bottom: 8px; }

.mf-destgroup { display: flex; flex-direction: column; gap: 12px; }

.cob-mf .mf-destbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	background: linear-gradient(135deg, #E3316E, #C81E56);
	position: relative;
	text-decoration: none;
}

.cob-mf .mf-destbtn--secondary { background: var(--mf-pink-light); color: #B0134F; }
.cob-mf .mf-destbtn.is-recommended { box-shadow: 0 0 0 3px rgba(227, 49, 110, 0.28); }

.mf-destbadge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: #131B41;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ------------------------------------------------------------- confetti */

.mf-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 18px;
	pointer-events: none;
}

.mf-confetti-piece {
	position: absolute;
	top: -20px;
	width: 8px;
	height: 14px;
	opacity: 0.9;
	animation: mf-confetti-fall 2.6s ease-in forwards;
}

@keyframes mf-confetti-fall {
	0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(340px) rotate(360deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mf-confetti { display: none; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 520px) {
	/* The extra top padding clears the site's fixed mobile header, which would
	   otherwise sit on top of the stepper. scroll-margin-top keeps the same
	   clearance when a step change scrolls the wizard back into view.
	   Same 76px the login page uses for this. */
	.cob-mf {
		padding: 76px 10px 16px;
		scroll-margin-top: 76px;
	}

	.mf-card { padding: 22px 18px; border-radius: 10px; }
	.cob-mf h1 { font-size: 18px; }
	.mf-sub { font-size: 13px; margin-bottom: 18px; }
	.mf-dot { width: 24px; height: 24px; font-size: 11px; }
	.mf-label { font-size: 9.5px; }
	.mf-stats { gap: 6px; }
	.mf-stat { padding: 12px 6px; }
	.mf-stat-num { font-size: 18px; }
	.mf-stat-lbl { font-size: 10.5px; }
	.mf-footer { flex-wrap: wrap; }
	.cob-mf .mf-footer .mf-btn,
	.cob-mf .mf-footer .mf-btn-skip { width: 100%; text-align: center; }
	.cob-mf .mf-pill { padding: 12px 20px; font-size: 14px; }
	.cob-mf .mf-btn--wide { font-size: 14px; padding: 12px; }
}