/*
 * Feeding Wear Finder Pro — frontend styles.
 * All selectors are namespaced under .fwfp- to avoid colliding with the
 * active theme. No generic class names (.button, .card, .container, ...).
 */

.fwfp-finder {
	--fwfp-accent: #000;
	--fwfp-accent-dark: #000;
	--fwfp-button-hover: var(--fwfp-accent-dark);
	--fwfp-bg: #f7faf8;
	--fwfp-card-bg: #ffffff;
	--fwfp-border: #e3ece7;
	--fwfp-text: #16261f;
	--fwfp-text-muted: #5b6b62;
	--fwfp-radius: 14px;
	--fwfp-radius-sm: 10px;
	--fwfp-shadow: 0 1px 2px rgba(16, 40, 29, 0.06), 0 4px 16px rgba(16, 40, 29, 0.06);

	box-sizing: border-box;
	max-width: 1250px;
	margin: 0 auto;
	padding: 28px 20px 40px;
	background: var(--fwfp-bg);
	border: 1px solid var(--fwfp-border);
	border-radius: var(--fwfp-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fwfp-text);
	line-height: 1.5;
}

.fwfp-finder *,
.fwfp-finder *::before,
.fwfp-finder *::after {
	box-sizing: inherit;
}

.fwfp-finder [hidden] {
	display: none !important;
}

/* ---------- Layout screens ---------- */

/*
 * Screens are toggled via the [hidden] attribute (see fwfp-finder.js
 * showScreen()), which previously snapped instantly with no transition.
 * This fades/lifts the screen in on becoming visible — a purely
 * presentational :not([hidden]) animation, so it costs no JS changes and
 * never blocks interaction (the screen is fully interactive immediately).
 */
@media (prefers-reduced-motion: no-preference) {
	.fwfp-screen:not([hidden]) {
		animation: fwfp-screen-in 280ms ease-out;
	}
}

@keyframes fwfp-screen-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fwfp-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.fwfp-screen--question,
.fwfp-screen--result,
.fwfp-screen--error {
	text-align: left;
	align-items: stretch;
}

/* ---------- Typography ---------- */

.fwfp-title {
	margin: 6px 0 0;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	color: var(--fwfp-accent-dark);
}

.fwfp-subtitle {
	margin: 0 0 8px;
	max-width: 46em;
	color: var(--fwfp-text-muted);
	font-size: 16px;
}

/*
 * Finder Title and Best Match Heading are <h2> elements, whose content
 * model doesn't allow a block-level <p> — but they're edited as rich text
 * (Settings) and rendered as HTML, so their content could in principle
 * include one anyway (a pasted paragraph, for example). Neutralizing any
 * stray block spacing here means that never shows up as a visible layout
 * glitch. (.fwfp-subtitle/.fwfp-loading-text/.fwfp-answer-summary are
 * plain <div>s, so a nested <p> there is valid and needs no such handling.)
 */
.fwfp-title p,
.fwfp-best-match__heading p {
	margin: 0;
	display: inline;
}

.fwfp-subtitle p,
.fwfp-loading-text p,
.fwfp-answer-summary p {
	margin: 0 0 4px;
}

.fwfp-subtitle p:last-child,
.fwfp-loading-text p:last-child,
.fwfp-answer-summary p:last-child {
	margin-bottom: 0;
}

.fwfp-question__title {
	margin: 4px 0 0;
	font-size: clamp(19px, 3vw, 24px);
	font-weight: 700;
}

.fwfp-question__description {
	margin: -6px 0 4px;
	color: var(--fwfp-text-muted);
	font-size: 14px;
}

.fwfp-best-match__heading {
	margin: 0 0 4px;
	font-size: clamp(20px, 3.5vw, 26px);
	font-weight: 700;
	color: var(--fwfp-accent-dark);
}

.fwfp-answer-summary {
	margin: 0 0 18px;
	color: var(--fwfp-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Buttons ---------- */

.fwfp-button {
	appearance: none;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.fwfp-button--disabled {
	background: transparent;
	border-color: var(--fwfp-border);
	color: var(--fwfp-text-muted);
	cursor: not-allowed;
}

.fwfp-button--primary {
	background: var(--fwfp-accent);
	color: #ffffff;
}

.fwfp-button--primary:hover {
	background: var(--fwfp-button-hover);
}

.fwfp-button--secondary {
	background: transparent;
	border-color: var(--fwfp-border);
	color: var(--fwfp-text);
}

.fwfp-button--secondary:hover {
	border-color: var(--fwfp-accent);
	color: var(--fwfp-accent-dark);
}

.fwfp-button:focus-visible,
.fwfp-product-card__link:focus-visible,
.fwfp-promo__code-copy:focus-visible {
	outline: 3px solid var(--fwfp-accent);
	outline-offset: 2px;
}

/*
 * .fwfp-answer is a <label> wrapping a visually-hidden native <input> —
 * keyboard focus actually lands on the <input>, not the label, so
 * :focus-visible on the label itself would never match. :focus-within
 * matches the label whenever its input has focus, giving keyboard users a
 * visible ring around the whole card instead of no indicator at all.
 */
.fwfp-answer:focus-within {
	outline: 3px solid var(--fwfp-accent);
	outline-offset: 2px;
}

.fwfp-button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.fwfp-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

/* ---------- Progress bar ---------- */

.fwfp-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fwfp-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fwfp-text-muted);
}

.fwfp-progress__track {
	height: 6px;
	border-radius: 999px;
	background: var(--fwfp-border);
	overflow: hidden;
}

.fwfp-progress__fill {
	height: 100%;
	background: var(--fwfp-accent);
	border-radius: inherit;
	width: 0%;
	transition: width 300ms ease-out;
}

/* ---------- Answers ---------- */

.fwfp-answers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fwfp-answer {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--fwfp-card-bg);
	border: 2px solid var(--fwfp-border);
	border-radius: var(--fwfp-radius-sm);
	padding: 16px 18px;
	min-height: 56px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--fwfp-text);
	text-align: left;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.fwfp-answer:hover {
	border-color: var(--fwfp-accent);
}

.fwfp-answer input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fwfp-answer[data-selected="true"] {
	border-color: var(--fwfp-accent);
	background: color-mix(in srgb, var(--fwfp-accent) 8%, var(--fwfp-card-bg));
}

.fwfp-answer[data-selected="true"]::after {
	content: "\2713";
	margin-left: auto;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--fwfp-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.fwfp-validation-message {
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* ---------- Loading ---------- */

.fwfp-spinner {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--fwfp-border);
	border-top-color: var(--fwfp-accent);
	animation: fwfp-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.fwfp-spinner {
		animation: none;
	}
}

@keyframes fwfp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Result / product cards ---------- */

.fwfp-fallback-message {
	background: #fff7e6;
	border: 1px solid #f0d9a6;
	border-radius: var(--fwfp-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0;
}

.fwfp-best-match {
	margin-top: 6px;
}

/*
 * auto-fit (not auto-fill): auto-fill would keep reserving empty column
 * tracks whenever the container is wide enough for more of them than
 * there are cards, leaving a visible gap on the right. auto-fit collapses
 * those empty tracks so the actual cards stretch to fill the row.
 */
.fwfp-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.fwfp-product-card {
	position: relative;
	background: var(--fwfp-card-bg);
	border: 1px solid var(--fwfp-border);
	border-radius: var(--fwfp-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: var(--fwfp-shadow);
}

.fwfp-product-card--best {
	border-color: var(--fwfp-accent);
}

/*
 * Positioned absolutely (out of the card's normal flex flow) and anchored
 * to .fwfp-product-card (position: relative), so it overlays the top of
 * the image instead of taking up its own row — otherwise the badge would
 * push everything below it down only on the best-match card, leaving its
 * image/title/price misaligned with the other cards in the same grid row.
 */
.fwfp-best-match-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fwfp-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(16, 40, 29, 0.25);
}

/*
 * 3:4, not square — these are full-length apparel photos (portrait), and
 * object-fit: contain never crops, so a 1:1 box just meant wide empty
 * bars down both sides of every portrait shot. A portrait-ish box fits
 * that photography without needing to crop anyone out of frame.
 */
.fwfp-product-card__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	border-radius: var(--fwfp-radius-sm);
	background: var(--fwfp-card-bg);
	border: 1px solid var(--fwfp-border);
	margin-bottom: 6px;
}

.fwfp-product-card__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.fwfp-product-card__price {
	font-size: 15px;
	font-weight: 600;
	color: var(--fwfp-accent-dark);
}

.fwfp-product-card__rating {
	font-size: 13px;
	color: var(--fwfp-text-muted);
}

.fwfp-product-card__score {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	background: color-mix(in srgb, var(--fwfp-accent) 12%, var(--fwfp-card-bg));
	color: var(--fwfp-accent-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.fwfp-product-card__score::before {
	content: "\2605"; /* filled star */
	font-size: 11px;
}

.fwfp-product-card__why-wrap {
	background: color-mix(in srgb, var(--fwfp-accent) 6%, var(--fwfp-card-bg));
	border: 1px solid var(--fwfp-border);
	border-radius: var(--fwfp-radius-sm);
	padding: 10px 12px;
	margin-top: 2px;
}

.fwfp-product-card__why-heading {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fwfp-accent-dark);
}

.fwfp-product-card__why {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 13px;
}

.fwfp-product-card__why li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.fwfp-product-card__why li::before {
	content: "\2713";
	color: var(--fwfp-accent);
	font-weight: 700;
	flex: 0 0 auto;
}

.fwfp-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

/*
 * A full 999px pill forces round caps on both ends, so once a narrower
 * grid card wraps this label to two lines, the button reads as a
 * squashed oval instead of a button. A smaller, fixed corner radius
 * keeps a clean rectangular shape at any width, and nowrap+ellipsis
 * keeps the label itself to one line.
 */
.fwfp-product-card__actions .fwfp-button {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--fwfp-radius-sm);
	padding: 11px 12px;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.fwfp-error-message {
	background: #fdecea;
	border: 1px solid #f3b3ac;
	border-radius: var(--fwfp-radius-sm);
	padding: 14px 16px;
	color: #611a15;
}

.fwfp-noscript {
	background: #fff7e6;
	border: 1px solid #f0d9a6;
	border-radius: var(--fwfp-radius-sm);
	padding: 12px 16px;
}

/* ---------- Post-results promo ---------- */

.fwfp-promo {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--fwfp-border);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.fwfp-promo__tagline {
	margin: 0;
	max-width: 32em;
	font-size: 18px;
	font-weight: 700;
	color: var(--fwfp-accent-dark);
}

.fwfp-promo__question {
	margin: 0 0 16px;
	max-width: 32em;
	color: var(--fwfp-text-muted);
	font-size: 15px;
}

.fwfp-promo__benefit {
	width: 100%;
	max-width: 26em;
	background: color-mix(in srgb, var(--fwfp-accent) 6%, var(--fwfp-card-bg));
	border: 1px solid var(--fwfp-border);
	border-radius: var(--fwfp-radius);
	padding: 18px 20px;
	margin-bottom: 24px;
}

.fwfp-promo__benefit-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--fwfp-accent-dark);
}

.fwfp-promo__benefit-text {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--fwfp-text);
}

.fwfp-promo__code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fwfp-card-bg);
	border: 1px dashed var(--fwfp-accent);
	border-radius: var(--fwfp-radius-sm);
	padding: 6px 8px 6px 16px;
}

.fwfp-promo__code-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fwfp-accent-dark);
}

.fwfp-promo__code-copy {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--fwfp-accent);
	border: none;
	border-radius: var(--fwfp-radius-sm);
	padding: 7px 12px;
	transition: background-color 150ms ease;
}

.fwfp-promo__code-copy:hover {
	background: var(--fwfp-button-hover);
}

.fwfp-promo__code-copy--done {
	background: var(--fwfp-accent-dark);
}

.fwfp-promo__reassurance-heading {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--fwfp-text);
}

.fwfp-promo__reassurance-text {
	margin: 2px 0 16px;
	color: var(--fwfp-text-muted);
	font-size: 14px;
}

.fwfp-promo__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ---------- Responsive ---------- */

@media (min-width: 600px) {
	.fwfp-finder {
		padding: 40px;
	}
}

@media (min-width: 768px) {
	.fwfp-answers {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}