/* ═══════════════════════════════════════════
   MindMatch Quiz — v1.3.0
   ═══════════════════════════════════════════ */

.mmq-wrap {
	max-width: 680px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif !important;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 8px 48px rgba(26,68,68,0.10), 0 2px 8px rgba(26,68,68,0.05);
	position: relative;
	overflow: hidden;
	min-height: 480px;
}

/* Teal accent stripe along the top of the card */
.mmq-wrap::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, #2bb5ba 0%, #1a4444 100%);
	border-radius: 24px 24px 0 0;
}

/* ── Progress (original style kept) ── */
.mmq-progress-wrap {
	height: 5px;
	background: #e0f0f0;
	border-radius: 99px;
	margin-bottom: 0.6rem;
	overflow: hidden;
}
.mmq-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #2bb5ba, #1a4444);
	border-radius: 99px;
	transition: width 0.45s cubic-bezier(.4,0,.2,1);
}
.mmq-step-counter {
	font-size: 0.75rem;
	color: #8aabab;
	text-align: right;
	margin-bottom: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── Steps ── */
.mmq-step {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: none;
}
.mmq-step--active { display: flex; }

/* Slide animations */
.mmq-slide-out-left  { animation: mmq-out-left  0.32s ease forwards; }
.mmq-slide-out-right { animation: mmq-out-right 0.32s ease forwards; }
.mmq-slide-in-right  { animation: mmq-in-right  0.32s ease forwards; }
.mmq-slide-in-left   { animation: mmq-in-left   0.32s ease forwards; }

@keyframes mmq-out-left  { to { opacity:0; transform:translateX(-40px); } }
@keyframes mmq-out-right { to { opacity:0; transform:translateX(40px);  } }
@keyframes mmq-in-right  { from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:none; } }
@keyframes mmq-in-left   { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }

/* Step icon — rounded tile */
.mmq-step-icon {
	font-size: 2rem;
	margin-bottom: 0.85rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: linear-gradient(135deg, #e8f8f8 0%, #d0f0f0 100%);
}

/* Step title / sub */
.mmq-step-title {
	font-size: 1.45rem !important;
	font-weight: 800 !important;
	color: #1a4444 !important;
	margin: 0 0 0.4rem !important;
	padding: 0 !important;
	border: none !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
}
.mmq-step-sub {
	font-size: 0.9rem;
	color: #6a9898;
	margin: 0 0 1.5rem;
	font-weight: 500;
}

/* ── Chips ── */
.mmq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 1.75rem;
	max-width: 560px;
}
.mmq-chip {
	padding: 0.45rem 1rem;
	border-radius: 50px;
	border: 2px solid #deeaea;
	background: #f7fbfb;
	color: #3a6868;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
	font-family: inherit;
	letter-spacing: -0.01em;
}
.mmq-chip:hover {
	border-color: #2bb5ba;
	color: #2bb5ba;
	background: #f0fafa;
}
.mmq-chip--selected {
	background: #2bb5ba;
	border-color: #2bb5ba;
	color: #fff;
	transform: scale(1.04);
	box-shadow: 0 2px 12px rgba(43,181,186,0.28);
}
/* Tick prefix on selected chips */
.mmq-chip--selected::before {
	content: '✓ ';
	font-size: 0.78em;
	font-weight: 900;
}

/* ── Option cards ── */
.mmq-option-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.75rem;
}
.mmq-option-cards--2 { grid-template-columns: repeat(2, 1fr); }
.mmq-option-cards--3 { grid-template-columns: repeat(3, 1fr); }

.mmq-option-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.25rem 1rem;
	border-radius: 16px;
	border: 2px solid #e0eded;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
	font-family: inherit;
	text-align: center;
}
.mmq-option-card:hover {
	border-color: #2bb5ba;
	background: #f0fafa;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(43,181,186,0.12);
}
.mmq-option-card--selected {
	border-color: #2bb5ba;
	background: #e8f8f8;
	box-shadow: 0 0 0 3px rgba(43,181,186,0.2);
}
.mmq-option-card__icon { font-size: 1.8rem; line-height: 1; }
.mmq-option-card strong { font-size: 0.95rem; color: #1a4444; display: block; }
.mmq-option-card span  { font-size: 0.78rem; color: #6a9898; }

/* ── Text inputs ── */
.mmq-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 420px;
	margin-bottom: 1rem;
}
.mmq-text-input {
	width: 100%;
	padding: 0.75rem 1.1rem;
	border: 2px solid #deeaea;
	border-radius: 12px;
	font-size: 0.95rem;
	font-family: inherit;
	color: #1a2a2a;
	outline: none;
	text-transform: none !important;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: #f7fbfb;
}
.mmq-text-input:focus {
	border-color: #2bb5ba;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(43,181,186,0.15);
}

/* Skip label */
.mmq-skip-label {
	font-size: 0.82rem;
	color: #6a9898;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	margin-bottom: 1.5rem;
}

/* Privacy note */
.mmq-privacy-note {
	font-size: 0.78rem;
	color: #8aabab;
	margin-bottom: 1.25rem;
}

/* ── Buttons ── */
.mmq-next-btn {
	padding: 0.875rem 2.75rem;
	background: linear-gradient(135deg, #2bb5ba 0%, #1a4444 100%);
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity 0.2s, transform 0.18s, box-shadow 0.2s;
	box-shadow: 0 6px 22px rgba(26,68,68,0.22);
	letter-spacing: -0.01em;
}
.mmq-next-btn:hover {
	opacity: 0.88;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(43,181,186,0.32);
}

.mmq-skip-btn {
	background: none;
	border: none;
	color: #8aabab;
	font-size: 0.82rem;
	cursor: pointer;
	margin-top: 0.75rem;
	font-family: inherit;
	text-decoration: underline;
}
.mmq-skip-btn:hover { color: #1a4444; }

.mmq-back-btn {
	position: absolute;
	bottom: 1.5rem;
	left: 2rem;
	background: none;
	border: none;
	color: #8aabab;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: color 0.18s;
}
.mmq-back-btn:hover { color: #1a4444; }

/* ── Matching screen ── */
.mmq-step--matching { padding: 1rem 0 2rem; }

.mmq-match-ring-wrap {
	position: relative;
	width: 130px;
	height: 130px;
	margin: 0 auto 1.5rem;
}
.mmq-match-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.mmq-match-ring__track {
	fill: none;
	stroke: #e0f0f0;
	stroke-width: 7;
}
.mmq-match-ring__fill {
	fill: none;
	stroke: #2bb5ba;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 327;
	stroke-dashoffset: 327;
	animation: mmq-ring-fill 1.2s ease forwards, mmq-ring-spin 1.8s linear 1.2s infinite;
	transform-origin: center;
}
@keyframes mmq-ring-fill { to { stroke-dashoffset: 0; } }
@keyframes mmq-ring-spin  { to { transform: rotate(360deg); } }

.mmq-match-heart {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mmq-match-heart svg {
	width: 40px;
	height: 40px;
	animation: mmq-pulse 1.4s ease-in-out infinite;
}
@keyframes mmq-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.2); }
}

.mmq-match-title {
	font-size: 1.3rem !important;
	font-weight: 800 !important;
	color: #1a4444 !important;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	border: none !important;
	letter-spacing: -0.02em !important;
}
.mmq-match-steps {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-align: left;
}
.mmq-match-step {
	font-size: 0.9rem;
	color: #c0d8d8;
	font-weight: 500;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s, transform 0.4s, color 0.4s;
	margin: 0;
}
.mmq-match-step--active {
	opacity: 1;
	transform: none;
	color: #2bb5ba;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.mmq-wrap { padding: 1.75rem 1.25rem 2.5rem; }
	.mmq-option-cards { grid-template-columns: 1fr; }
	.mmq-option-cards--2 { grid-template-columns: 1fr 1fr; }
	.mmq-option-cards--3 { grid-template-columns: 1fr 1fr 1fr; }
	.mmq-step-title { font-size: 1.2rem !important; }
}
@media (max-width: 420px) {
	.mmq-option-cards--3 { grid-template-columns: 1fr; }
	.mmq-option-cards--2 { grid-template-columns: 1fr; }
}


/* Distance radius dropdown — enlarged for readability */
#mmq-radius {
	min-height: 56px;
	padding: 0.95rem 2.6rem 0.95rem 1.1rem;
	font-size: 1rem;
	line-height: 1.35;
	border-radius: 14px;
	appearance: auto;
	-webkit-appearance: menulist;
}
#mmq-radius option {
	font-size: 1rem;
}
#mmq-radius-group label {
	font-size: 0.95rem;
}