/**
 * Fanatyco AI Size Recommendation – Front-End Styles
 *
 * Premium, minimal, modern styling that blends with any WooCommerce theme.
 * Uses CSS custom properties for easy theming via the admin accent color.
 */

/* ── Variables ──────────────────────────────────────────────────────── */

.fanatyco-sr {
	--fsr-accent: #1a1a2e;
	--fsr-accent-light: rgba(26, 26, 46, 0.12);
	--fsr-accent-mid: rgba(26, 26, 46, 0.30);
	--fsr-text: #1a1a2e;
	--fsr-text-secondary: #6b7280;
	--fsr-bg: #ffffff;
	--fsr-bg-subtle: #f8f9fa;
	--fsr-border: #e5e7eb;
	--fsr-radius: 10px;
	--fsr-radius-sm: 6px;
	--fsr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fsr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--fsr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--fsr-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
	--fsr-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pulsing Animation ─────────────────────────────────────────────── */

@keyframes fsr-pulse {
	/* Cyan attention-pulse — pulls the eye to the primary size picker
	   on a fresh page load. Brand accent (#1a1a2e) was too close to
	   the box border to read at a glance; #00c6fe gives a clearly
	   visible ring against #f8f9fa backgrounds while staying within
	   the brand's secondary palette. Spread widened to 8px so the
	   ring is also more pronounced. */
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 198, 254, 0.65); }
	50%      { box-shadow: 0 0 0 8px rgba(0, 198, 254, 0); }
}

/* ── Wrapper ────────────────────────────────────────────────────────── */

.fanatyco-sr {
	font-family: var(--fsr-font);
	margin: 15px 0 20px;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Ensure full width inside WooCommerce form containers. */
	width: 100% !important;
	clear: both;
}

/* Force parent WooCommerce flex container to wrap so our full-width
   wrapper pushes quantity + Add to Cart to the next row. */
.woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	flex-wrap: wrap !important;
}

/* CSS backup for hiding the WooCommerce size variation row when our widget
   is on the page. The JS `hideWcSizeOnLoad` IIFE handles this at runtime,
   but it can run before the variations form is in the DOM (lazy-loaded
   variation forms, slow mobile connections, AJAX product galleries). This
   rule keeps the row hidden regardless of timing. We target the <tr>
   whose <select> name contains "size", which matches WooCommerce's
   default name pattern (`attribute_pa_size`, `attribute_size`). */
form.cart:has(#fanatyco-sr-wrapper) table.variations tr:has(select[name*="size" i]) {
	display: none !important;
}
/* Fallback for browsers without :has() — match the row by descendant.
   Slightly less precise (would hide any tr whose select name contains
   "size") but harmless because we're already inside form.cart with our
   wrapper present. */
@supports not (selector(:has(*))) {
	form.cart .fanatyco-sr ~ table.variations tr td.value:has(select[name*="size" i]),
	form.cart table.variations tr td.value select[name*="size" i] {
		display: none !important;
	}
	/* As a last resort, target via the select itself and hide its row. */
	form.cart table.variations select[name*="size" i] {
		visibility: hidden;
		height: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}
}

.fanatyco-sr *,
.fanatyco-sr *::before,
.fanatyco-sr *::after {
	box-sizing: border-box;
}

/* Force the system font on every text-bearing element inside the
   widget. The Shoptimizer theme + Elementor global typography push
   "Press Start 2P" onto headings and buttons on product pages, which
   leaked into our trigger label, form fields, result text, picker
   options, etc. Press Start 2P is intentionally chunky / pixel-arty
   and degrades readability on a measurement form. We override with
   !important so theme rules can't win. The Add to Cart button sits
   OUTSIDE .fanatyco-sr (it's WC's .single_add_to_cart_button) so it
   keeps its theme styling — which is what the customer expects. */
.fanatyco-sr,
.fanatyco-sr *,
.fanatyco-sr *::before,
.fanatyco-sr *::after {
	font-family: var(--fsr-font) !important;
}

/* ── Theme Override Resets ──────────────────────────────────────────── */
/* Prevent WooCommerce themes from overriding our button/pill styles.  */

#fanatyco-sr-wrapper button,
#fanatyco-sr-wrapper .fsr-profile-pill {
	background-image: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

#fanatyco-sr-wrapper .fsr-profile-pill {
	background-color: var(--fsr-bg) !important;
	color: var(--fsr-text-secondary) !important;
	border: 1px solid var(--fsr-border) !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	border-radius: 20px !important;
}

#fanatyco-sr-wrapper .fsr-profile-pill:hover {
	border-color: var(--fsr-accent-mid) !important;
	color: var(--fsr-text) !important;
}

#fanatyco-sr-wrapper .fsr-profile-pill--active {
	background-color: var(--fsr-accent) !important;
	border-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-profile-pill--active:hover {
	color: #ffffff !important;
	opacity: 0.9;
}

#fanatyco-sr-wrapper .fsr-submit {
	border: none !important;
}

#fanatyco-sr-wrapper .fsr-submit--filled {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-submit--outlined {
	background-color: transparent !important;
	color: var(--fsr-accent) !important;
	border: 2px solid var(--fsr-accent) !important;
}

#fanatyco-sr-wrapper .fsr-submit--outlined:hover {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-profile-btn--primary {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-profile-btn--ghost {
	background-color: transparent !important;
	color: var(--fsr-text-secondary) !important;
	border: 1px solid var(--fsr-border) !important;
}

#fanatyco-sr-wrapper .fsr-profile-bar__add {
	background-color: transparent !important;
	color: var(--fsr-accent) !important;
}

#fanatyco-sr-wrapper .fsr-unit-pill {
	background-color: transparent !important;
	color: var(--fsr-text-secondary) !important;
	border: none !important;
}

#fanatyco-sr-wrapper .fsr-unit-pill--active {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-result__link {
	background-color: transparent !important;
	color: var(--fsr-accent) !important;
	border: none !important;
	border-bottom: 1px solid transparent !important;
	padding: 0 !important;
	font-size: 13px !important;
}

#fanatyco-sr-wrapper .fsr-result__link:hover {
	border-bottom-color: var(--fsr-accent) !important;
}

#fanatyco-sr-wrapper .fsr-result__retry {
	background-color: transparent !important;
	color: var(--fsr-text-secondary) !important;
	border: none !important;
	border-bottom: 1px dashed var(--fsr-border) !important;
	padding: 4px 0 !important;
	font-size: 12px !important;
}

#fanatyco-sr-wrapper .fsr-result__retry:hover {
	color: var(--fsr-text) !important;
}

#fanatyco-sr-wrapper .fsr-result__sep {
	color: var(--fsr-border) !important;
}

#fanatyco-sr-wrapper .fsr-error__retry {
	background-color: transparent !important;
	color: var(--fsr-accent) !important;
	border: 1px solid var(--fsr-accent) !important;
	padding: 8px 20px !important;
	font-size: 13px !important;
}

#fanatyco-sr-wrapper .fsr-error__retry:hover {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
}

#fanatyco-sr-wrapper .fsr-result__select-btn {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 10px 24px !important;
}

#fanatyco-sr-wrapper .fsr-result__badge {
	background-color: var(--fsr-accent) !important;
	color: #ffffff !important;
	border: none !important;
}

#fanatyco-sr-wrapper .fsr-modal__close {
	background-color: var(--fsr-bg-subtle) !important;
	color: var(--fsr-text-secondary) !important;
	border: none !important;
}

#fanatyco-sr-wrapper .fsr-modal__close:hover {
	background-color: var(--fsr-border) !important;
	color: var(--fsr-text) !important;
}

#fanatyco-sr-wrapper .fsr-fit-help {
	background-color: transparent !important;
	color: var(--fsr-text-secondary) !important;
}

/* ── Trigger / Header ──────────────────────────────────────────────── */

.fsr-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--fsr-bg-subtle);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius);
	cursor: pointer;
	user-select: none;
	transition: all var(--fsr-transition);
	/* Mobile: opt out of the 300ms tap delay and the double-tap-zoom
	   gesture so taps fire immediately. `pointer-events: auto` is a
	   defensive override against any parent rule (page builder, theme,
	   accessibility plugin) that disables clicks on descendants. */
	touch-action: manipulation;
	pointer-events: auto;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
}

.fsr-trigger--pulse {
	animation: fsr-pulse 2s ease-in-out infinite;
}

.fsr-trigger--pulse:hover,
.fsr-trigger--pulse[aria-expanded="true"] {
	animation: none;
}

.fsr-trigger:hover {
	border-color: var(--fsr-accent-mid);
	box-shadow: var(--fsr-shadow-sm);
}

.fsr-trigger:focus-visible {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

.fsr-trigger[aria-expanded="true"] {
	border-radius: var(--fsr-radius) var(--fsr-radius) 0 0;
	border-bottom-color: transparent;
	background: var(--fsr-bg);
}

.fsr-trigger__content {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fsr-trigger__icon {
	color: var(--fsr-accent);
	flex-shrink: 0;
}

.fsr-trigger__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--fsr-text);
	letter-spacing: 0.01em;
}

.fsr-trigger__chevron {
	color: var(--fsr-text-secondary);
	transition: transform var(--fsr-transition);
	flex-shrink: 0;
}

.fsr-trigger[aria-expanded="true"] .fsr-trigger__chevron {
	transform: rotate(180deg);
}

/* ── Trigger: Size Selected State ─────────────────────────────────── */

.fsr-trigger--has-size .fsr-trigger__title {
	color: var(--fsr-accent);
}

.fsr-trigger__size-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fsr-accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 12px;
	margin-left: 6px;
	letter-spacing: 0.03em;
}

/* ── Form Panel ────────────────────────────────────────────────────── */

.fsr-form-panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	border: 1px solid var(--fsr-border);
	border-top: none;
	border-radius: 0 0 var(--fsr-radius) var(--fsr-radius);
	background: var(--fsr-bg);
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.3s ease,
	            padding 0.3s ease;
	padding: 0 20px;
}

.fsr-form-panel[aria-hidden="false"] {
	max-height: 900px;
	opacity: 1;
	padding: 20px;
}

/* ── Direct Size Picker ───────────────────────────────────────────────
   Native <select> styled to match the trigger box. As of the
   "dropdown-first" UX, this picker is the PRIMARY CTA (rendered above
   the Find Your Size trigger) and is the element that pulses on a
   fresh page load. The trigger below carries the "Not sure? Find your
   right size" label and serves as the fallback for shoppers who
   want the AI recommendation flow. */

.fsr-direct {
	margin: 0 0 10px;
}

.fsr-direct__box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	background: var(--fsr-bg-subtle);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius);
	cursor: pointer;
	transition: border-color var(--fsr-transition), box-shadow var(--fsr-transition);
	margin: 0;
}

.fsr-direct__box:hover {
	border-color: var(--fsr-accent-mid);
	box-shadow: var(--fsr-shadow-sm);
}

.fsr-direct__box:focus-within {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

/* Pulsing ring — added by JS only on a fresh load (no saved size).
   Reuses the trigger's existing @keyframes fsr-pulse for visual
   consistency between the two boxes' attention states. */
.fsr-direct__box--pulse {
	animation: fsr-pulse 2s ease-in-out infinite;
}
.fsr-direct__box--pulse:hover {
	animation: none;
}

.fsr-direct__icon {
	color: var(--fsr-accent);
	flex-shrink: 0;
}

.fsr-direct__chevron {
	color: var(--fsr-text-secondary);
	flex-shrink: 0;
	pointer-events: none;
}

/* The native <select> reset to inherit the box's look. We strip the
   browser's default chrome (border, arrow, padding) and let the parent
   .fsr-direct__box draw the visual chrome instead. */
.fsr-direct__select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: var(--fsr-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--fsr-text);
	letter-spacing: 0.01em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Some themes inject a background-image arrow on every select; kill it. */
	background-image: none !important;
	height: auto !important;
	line-height: normal !important;
}

/* Once the user has actually picked a size, give the box the same accent
   treatment as the Find Your Size trigger when it has a size. */
.fsr-direct__box--has-size {
	border-color: var(--fsr-accent-mid);
}

.fsr-direct__box--has-size .fsr-direct__select {
	color: var(--fsr-accent);
}

/* ── Form ───────────────────────────────────────────────────────────── */

.fsr-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fsr-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fsr-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--fsr-text);
	letter-spacing: 0.01em;
}

.fsr-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	font-family: var(--fsr-font);
	color: var(--fsr-text);
	background: var(--fsr-bg);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius-sm);
	outline: none;
	transition: border-color var(--fsr-transition), box-shadow var(--fsr-transition);
	-webkit-appearance: none;
	appearance: none;
}

.fsr-input:focus {
	border-color: var(--fsr-accent);
	box-shadow: 0 0 0 3px var(--fsr-accent-light);
}

.fsr-input::placeholder {
	color: #9ca3af;
}

.fsr-input.fsr-input--error,
.fsr-select.fsr-select--error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* ── Field Header (label + unit toggle) ───────────────────────────── */

.fsr-field-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ── Unit Toggle Pills ────────────────────────────────────────────── */

.fsr-unit-toggle {
	display: flex;
	background: var(--fsr-bg-subtle);
	border: 1px solid var(--fsr-border);
	border-radius: 14px;
	padding: 2px;
}

.fsr-unit-pill {
	padding: 3px 10px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	font-family: var(--fsr-font);
	color: var(--fsr-text-secondary);
	background: transparent;
	border: none;
	border-radius: 12px !important;
	cursor: pointer;
	transition: all var(--fsr-transition);
	line-height: 1.2;
}

.fsr-unit-pill--active {
	background: var(--fsr-accent);
	color: #ffffff;
}

/* ── Custom Select ────────────────────────────────────────────────── */

.fsr-select {
	flex: 1;
	padding: 10px 32px 10px 14px;
	font-size: 14px;
	font-family: var(--fsr-font);
	color: var(--fsr-text);
	background: var(--fsr-bg);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius-sm);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	cursor: pointer;
	transition: border-color var(--fsr-transition), box-shadow var(--fsr-transition);
}

.fsr-select:focus {
	border-color: var(--fsr-accent);
	box-shadow: 0 0 0 3px var(--fsr-accent-light);
}

/* ── Height Selector ──────────────────────────────────────────────── */

.fsr-height-imperial {
	display: flex;
	gap: 8px;
}

/* ── Input with Unit Suffix ───────────────────────────────────────── */

.fsr-input-with-unit {
	position: relative;
	display: flex;
	align-items: center;
}

.fsr-input-with-unit .fsr-input {
	padding-right: 42px;
}

.fsr-input-unit {
	position: absolute;
	right: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fsr-text-secondary);
	pointer-events: none;
}

/* Hide number input spin buttons for cleaner look */
.fsr-input[type="number"]::-webkit-inner-spin-button,
.fsr-input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fsr-input[type="number"] {
	-moz-appearance: textfield;
}

/* ── Fit Options ───────────────────────────────────────────────────── */

.fsr-fit-options {
	display: flex;
	gap: 8px;
}

.fsr-fit-option {
	flex: 1;
	cursor: pointer;
}

.fsr-fit-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.fsr-fit-option__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	padding: 12px 8px 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fsr-text-secondary);
	background: var(--fsr-bg);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius-sm);
	transition: all var(--fsr-transition);
	white-space: nowrap;
	position: relative;
}

.fsr-fit-option:hover .fsr-fit-option__label {
	border-color: var(--fsr-accent-mid);
	color: var(--fsr-text);
}

.fsr-fit-option__label--pulse {
	animation: fsr-pulse 2s ease-in-out infinite;
}

.fsr-fit-option input[type="radio"]:checked + .fsr-fit-option__label {
	background: var(--fsr-accent);
	border-color: var(--fsr-accent);
	color: #ffffff;
	box-shadow: var(--fsr-shadow-sm);
	animation: none;
}

.fsr-fit-option input[type="radio"]:focus-visible + .fsr-fit-option__label {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

/* ── Fit Icon ──────────────────────────────────────────────────────── */

.fsr-fit-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.fsr-fit-option input[type="radio"]:checked + .fsr-fit-option__label .fsr-fit-icon {
	opacity: 1;
}

.fsr-fit-option__name {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ── Fit Help Tooltip ──────────────────────────────────────────────── */

.fsr-fit-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	font-size: 9px;
	font-weight: 700;
	font-family: var(--fsr-font);
	color: var(--fsr-text-secondary);
	border: 1px solid var(--fsr-border);
	cursor: help;
	position: relative;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
	transition: all var(--fsr-transition);
}

.fsr-fit-option input[type="radio"]:checked + .fsr-fit-option__label .fsr-fit-help {
	color: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.4);
}

.fsr-fit-help::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 12px;
	background: var(--fsr-text);
	color: #ffffff;
	font-size: 11px;
	font-weight: 400;
	border-radius: 6px;
	white-space: normal;
	width: 160px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 10;
	pointer-events: none;
	line-height: 1.4;
}

.fsr-fit-help::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--fsr-text);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 10;
	pointer-events: none;
}

.fsr-fit-help:hover::after,
.fsr-fit-help:focus::after,
.fsr-fit-help:hover::before,
.fsr-fit-help:focus::before {
	opacity: 1;
	visibility: visible;
}

/* ── Submit Button ─────────────────────────────────────────────────── */

.fsr-submit,
#fanatyco-sr-wrapper .fsr-submit,
form.cart .fsr-submit,
form.cart button.fsr-submit,
.woocommerce div.product form.cart button.fsr-submit,
.elementor-widget-woocommerce-product-add-to-cart form.cart button.fsr-submit,
.elementor-widget-wc-add-to-cart form.cart button.fsr-submit {
	display: block !important;
	width: calc(100% + 40px) !important;
	margin: 4px -20px -20px !important;
	margin-inline-start: -20px !important;
	margin-inline-end: 0 !important;
	margin-block-start: 4px !important;
	padding: 14px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: var(--fsr-font) !important;
	border-radius: 0 0 var(--fsr-radius) var(--fsr-radius) !important;
	cursor: pointer;
	transition: all var(--fsr-transition);
	letter-spacing: 0.02em !important;
	border: none !important;
	outline: none !important;
}

.fsr-submit--filled {
	background: var(--fsr-accent);
	color: #ffffff;
}

.fsr-submit--filled:hover {
	opacity: 0.9;
	box-shadow: var(--fsr-shadow-md);
	transform: translateY(-1px);
}

.fsr-submit--outlined {
	background: transparent;
	color: var(--fsr-accent);
	border: 2px solid var(--fsr-accent);
}

.fsr-submit--outlined:hover {
	background: var(--fsr-accent);
	color: #ffffff;
}

.fsr-submit:focus-visible {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

.fsr-submit:active {
	transform: translateY(0);
}

/* ── Loading State ─────────────────────────────────────────────────── */

.fsr-loading {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	gap: 16px;
}

.fsr-loading[aria-hidden="false"] {
	display: flex;
}

.fsr-loading__spinner {
	display: flex;
	gap: 6px;
}

.fsr-loading__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fsr-accent);
	animation: fsr-dot-pulse 1.4s ease-in-out infinite;
}

.fsr-loading__dot:nth-child(2) {
	animation-delay: 0.16s;
}

.fsr-loading__dot:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes fsr-dot-pulse {
	0%, 80%, 100% {
		opacity: 0.25;
		transform: scale(0.8);
	}
	40% {
		opacity: 1;
		transform: scale(1);
	}
}

.fsr-loading__text {
	font-size: 14px;
	color: var(--fsr-text-secondary);
	text-align: center;
	margin: 0;
	min-height: 1.4em;
	transition: opacity 0.3s ease;
}

.fsr-loading__text.fsr-loading__text--fading {
	opacity: 0;
}

/* ── Result Card ───────────────────────────────────────────────────── */

.fsr-result {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 0 0;
}

.fsr-result[aria-hidden="false"] {
	display: flex;
	animation: fsr-fade-in 0.4s ease;
}

@keyframes fsr-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fsr-result__card {
	width: 100%;
	text-align: center;
	padding: 24px 20px;
	background: var(--fsr-bg-subtle);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius);
	position: relative;
}

.fsr-result__badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--fsr-accent);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.fsr-result__short {
	font-size: 16px;
	font-weight: 600;
	color: var(--fsr-text);
	margin: 0 0 12px;
	line-height: 1.5;
	display: inline;
}

.fsr-result__link {
	display: inline;
	font-size: inherit;
	font-weight: 500;
	color: var(--fsr-accent);
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	padding: 0;
	font-family: var(--fsr-font);
	transition: border-color var(--fsr-transition);
}

.fsr-result__text-wrap {
	font-size: 16px;
	font-weight: 600;
	color: var(--fsr-text);
	line-height: 1.5;
	margin: 0 0 12px;
	text-align: center;
}

.fsr-result__link:hover {
	border-bottom-color: var(--fsr-accent);
}

.fsr-result__link:focus-visible {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

.fsr-result__select-btn {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--fsr-font);
	color: #ffffff;
	background: var(--fsr-accent);
	border: none;
	border-radius: var(--fsr-radius-sm);
	cursor: pointer;
	transition: all var(--fsr-transition);
}

.fsr-result__select-btn:hover {
	opacity: 0.9;
	box-shadow: var(--fsr-shadow-sm);
}

/* ── Select Size + WC Dropdown Row ──────────────────────────────── */

.fsr-result__size-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.fsr-result__size-row .fsr-result__select-btn {
	margin-top: 0;
}

.fsr-result__size-row .fsr-wc-size-select {
	padding: 10px 32px 10px 14px;
	font-size: 13px;
	font-family: var(--fsr-font);
	color: var(--fsr-text);
	background: var(--fsr-bg);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius-sm);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	cursor: pointer;
	transition: border-color var(--fsr-transition), box-shadow var(--fsr-transition);
	min-width: 0;
}

.fsr-result__size-row .fsr-wc-size-select:focus {
	border-color: var(--fsr-accent);
	box-shadow: 0 0 0 3px var(--fsr-accent-light);
}

.fsr-result__retry {
	font-size: 12px;
	color: var(--fsr-text-secondary);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	font-family: var(--fsr-font);
	border-bottom: 1px dashed var(--fsr-border);
	transition: color var(--fsr-transition);
}

.fsr-result__retry:hover {
	color: var(--fsr-text);
}

/* ── Error State ───────────────────────────────────────────────────── */

.fsr-error {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 20px;
	text-align: center;
}

.fsr-error[aria-hidden="false"] {
	display: flex;
	animation: fsr-fade-in 0.3s ease;
}

.fsr-error__text {
	font-size: 14px;
	color: var(--fsr-text-secondary);
	margin: 0;
	line-height: 1.5;
}

.fsr-error__retry {
	font-size: 13px;
	font-weight: 500;
	color: var(--fsr-accent);
	background: none;
	border: 1px solid var(--fsr-accent);
	border-radius: var(--fsr-radius-sm);
	padding: 8px 20px;
	cursor: pointer;
	font-family: var(--fsr-font);
	transition: all var(--fsr-transition);
}

.fsr-error__retry:hover {
	background: var(--fsr-accent);
	color: #ffffff;
}

/* ── Modal ──────────────────────────────────────────────────────────── */

.fsr-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.fsr-modal[aria-hidden="false"] {
	display: flex;
}

.fsr-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: fsr-backdrop-in 0.25s ease;
}

@keyframes fsr-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fsr-modal__container {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 80vh;
	background: var(--fsr-bg);
	border-radius: 14px;
	box-shadow: var(--fsr-shadow-lg);
	display: flex;
	flex-direction: column;
	animation: fsr-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

@keyframes fsr-modal-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.fsr-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 0;
}

.fsr-modal__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--fsr-text);
	margin: 0;
}

.fsr-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--fsr-bg-subtle);
	color: var(--fsr-text-secondary);
	cursor: pointer;
	transition: all var(--fsr-transition);
	flex-shrink: 0;
}

.fsr-modal__close:hover {
	background: var(--fsr-border);
	color: var(--fsr-text);
}

.fsr-modal__close:focus-visible {
	outline: 2px solid var(--fsr-accent);
	outline-offset: 2px;
}

.fsr-modal__body {
	padding: 20px 24px 24px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.7;
	color: var(--fsr-text);
}

.fsr-modal__body p {
	margin: 0 0 12px;
}

.fsr-modal__body p:last-child {
	margin-bottom: 0;
}

/* ── Modal Markdown Content ──────────────────────────────────────── */

.fsr-modal__body .fsr-md-heading {
	font-size: 15px;
	font-weight: 700;
	color: var(--fsr-text);
	margin: 18px 0 8px;
	line-height: 1.4;
}

.fsr-modal__body .fsr-md-heading:first-child {
	margin-top: 0;
}

.fsr-modal__body strong {
	font-weight: 700;
	color: var(--fsr-text);
}

.fsr-modal__body em {
	font-style: italic;
}

/* Markdown table styling */
.fsr-modal__body .fsr-md-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
	font-size: 13px;
	line-height: 1.4;
}

.fsr-modal__body .fsr-md-table td {
	padding: 8px 12px;
	border: 1px solid var(--fsr-border);
	color: var(--fsr-text);
	vertical-align: top;
}

.fsr-modal__body .fsr-md-table tr:first-child td {
	background: var(--fsr-bg-subtle);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fsr-text-secondary);
}

.fsr-modal__body .fsr-md-table tr:nth-child(even) td {
	background: rgba(248, 249, 250, 0.5);
}

/* Markdown list styling */
.fsr-modal__body .fsr-md-list {
	margin: 8px 0 12px;
	padding-left: 20px;
}

.fsr-modal__body .fsr-md-list li {
	margin: 0 0 6px;
	line-height: 1.6;
	color: var(--fsr-text);
}

.fsr-modal__body .fsr-md-list li:last-child {
	margin-bottom: 0;
}

/* ── Modal Close Button × ────────────────────────────────────────── */

#fanatyco-sr-wrapper .fsr-modal__close {
	font-size: 22px !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

/* ── Profile Bar ───────────────────────────────────────────────────── */

.fsr-profile-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.fsr-profile-bar__pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.fsr-profile-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--fsr-font);
	color: var(--fsr-text-secondary);
	background: var(--fsr-bg);
	border: 1px solid var(--fsr-border);
	border-radius: 20px;
	cursor: pointer;
	transition: all var(--fsr-transition);
	white-space: nowrap;
	line-height: 1;
}

.fsr-profile-pill:hover {
	border-color: var(--fsr-accent-mid);
	color: var(--fsr-text);
}

.fsr-profile-pill--active {
	background: var(--fsr-accent);
	border-color: var(--fsr-accent);
	color: #ffffff;
}

.fsr-profile-pill--active:hover {
	color: #ffffff;
	opacity: 0.9;
}

.fsr-profile-pill__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	color: inherit;
	cursor: pointer;
	font-size: 10px;
	line-height: 1;
	padding: 0;
	transition: background var(--fsr-transition);
}

.fsr-profile-pill__remove:hover {
	background: rgba(255, 255, 255, 0.5);
}

.fsr-profile-pill:not(.fsr-profile-pill--active) .fsr-profile-pill__remove {
	background: var(--fsr-border);
}

.fsr-profile-pill:not(.fsr-profile-pill--active) .fsr-profile-pill__remove:hover {
	background: #d1d5db;
}

.fsr-profile-bar__add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--fsr-font);
	color: var(--fsr-accent);
	background: none;
	border: 1px dashed var(--fsr-accent-mid);
	border-radius: 20px;
	cursor: pointer;
	transition: all var(--fsr-transition);
	white-space: nowrap;
	line-height: 1;
}

.fsr-profile-bar__add:hover {
	border-style: solid;
	background: var(--fsr-accent-light);
}

/* ── New Profile Form ──────────────────────────────────────────────── */

.fsr-new-profile-form {
	display: none;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	margin-bottom: 16px;
	background: var(--fsr-bg-subtle);
	border: 1px solid var(--fsr-border);
	border-radius: var(--fsr-radius-sm);
	animation: fsr-fade-in 0.25s ease;
}

.fsr-new-profile-form[aria-hidden="false"] {
	display: flex;
}

.fsr-new-profile-form__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--fsr-text);
	margin: 0;
}

.fsr-new-profile-form__actions {
	display: flex;
	gap: 8px;
}

.fsr-profile-btn {
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--fsr-font);
	border-radius: var(--fsr-radius-sm);
	cursor: pointer;
	transition: all var(--fsr-transition);
	border: none;
}

.fsr-profile-btn--primary {
	background: var(--fsr-accent);
	color: #ffffff;
}

.fsr-profile-btn--primary:hover {
	opacity: 0.9;
}

.fsr-profile-btn--ghost {
	background: none;
	color: var(--fsr-text-secondary);
	border: 1px solid var(--fsr-border);
}

.fsr-profile-btn--ghost:hover {
	background: var(--fsr-bg-subtle);
	color: var(--fsr-text);
}

/* ── Result Profile Name ───────────────────────────────────────────── */

.fsr-result__profile-name {
	font-size: 12px;
	font-weight: 500;
	color: var(--fsr-text-secondary);
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fsr-result__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.fsr-result__sep {
	color: var(--fsr-border);
	font-size: 12px;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	/* When togglePanel() smooth-scrolls the trigger to top on mobile,
	   leave room for the sticky site header so the trigger isn't
	   hidden beneath it. Tuned to the Fanatyco Shoptimizer header
	   which is ~70px tall when stuck; 90px gives breathing room. */
	.fsr-trigger {
		scroll-margin-top: 90px;
	}
}

@media (max-width: 480px) {
	.fsr-fit-options {
		flex-direction: column;
	}

	.fsr-fit-option__label {
		flex-direction: row;
		gap: 8px;
		padding: 10px 12px;
	}

	.fsr-trigger__title {
		font-size: 13px;
	}

	.fsr-result__short {
		font-size: 15px;
	}

	/* See-why modal — centered card with all four sides visible (was
	   a bottom-attached sheet with no bottom border). Top offset
	   pushes the close button away from the OS / browser chrome area
	   so it's reachable on small phones. */
	.fsr-modal__container {
		max-width: calc(100% - 24px);
		max-height: 85vh;
		border-radius: 14px;
		margin: 0 auto;
	}

	/* Bigger, more obvious close button on phones. The default 32×32
	   target was too tight a tap target near the viewport edge, and
	   the position sat too close to the device's status / URL-bar
	   area on tall phones. */
	.fsr-modal__header {
		padding: 16px 16px 0 20px;
	}
	.fsr-modal__close {
		width: 40px;
		height: 40px;
		font-size: 26px;
	}

	.fsr-form-panel[aria-hidden="false"] {
		padding: 16px;
	}

	.fsr-profile-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.fsr-profile-bar__add span {
		display: inline;
	}

	.fsr-height-imperial {
		flex-direction: column;
	}

	.fsr-field-header {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* ── Print ──────────────────────────────────────────────────────────── */

@media print {
	.fanatyco-sr {
		display: none;
	}
}