/*
 * Locked breakpoints (do not diverge from these without an explicit
 * decision): desktop >=1024px, tablet 769-1023px, mobile <=768px,
 * small mobile <=480px, very small <=375px must still function fully.
 */

.sizemint-fitfinder-framing {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	margin: var( --sizemint-spacing-unit ) 0 calc( var( --sizemint-spacing-unit ) / 2 );
	font-size: 0.9em;
	opacity: var( --sizemint-text-muted-opacity );
}

.sizemint-fitfinder-trigger {
	margin-bottom: var( --sizemint-spacing-unit );
}

/* Popup-level polish: this only affects Fit Finder's own popup, never
   the shared .sizemint-popup rules in public.css, which stay untouched. */
.sizemint-fitfinder-popup .sizemint-popup__inner {
	border-radius: var( --sizemint-popup-radius );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.15 );
	width: 100%;
	max-width: 580px;
}

.sizemint-fitfinder-popup-header {
	margin: 0 28px calc( var( --sizemint-spacing-unit ) / 2 ) 0;
}

.sizemint-fitfinder-popup-title {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	font-weight: var( --sizemint-heading-weight );
	font-size: 1.2em;
	margin: 0 0 4px;
}

.sizemint-fitfinder-popup-subtitle {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	opacity: var( --sizemint-text-muted-opacity );
	font-size: 0.9em;
	margin: 0;
}

/* The consolidated unit selector: one control, owned by the measurements
   section as a whole -- not visually attached to any single field. */
.sizemint-fitfinder-measurements-group {
	margin-bottom: calc( var( --sizemint-spacing-unit ) * 2 );
}

.sizemint-fitfinder-measurements-heading {
	font-family: var( --sizemint-font-family );
	font-weight: var( --sizemint-heading-weight );
	color: var( --sizemint-text-color );
	margin: 0 0 var( --sizemint-spacing-unit );
}

.sizemint-fitfinder-field {
	margin-bottom: calc( var( --sizemint-spacing-unit ) * 1.75 );
}

.sizemint-fitfinder-field label {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

.sizemint-fitfinder-hint {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	font-size: 0.9em;
	opacity: var( --sizemint-text-muted-opacity );
	margin: 0 0 calc( var( --sizemint-spacing-unit ) * 1.75 );
}

.sizemint-fitfinder-input-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 var( --sizemint-spacing-unit );
}

.sizemint-fitfinder-input {
	/* Bounded, not growing to fill all available row width — the actual
	   values entered are always short (a body measurement realistically
	   tops out around 200cm / 4 characters with a decimal), so letting
	   the field stretch to fill the whole popup width looked
	   disproportionate, particularly on mobile. 120px comfortably fits
	   up to 4-5 characters with normal padding, without looking like an
	   oversized, mostly-empty box. */
	flex: 0 1 120px;
	min-width: 0;
	max-width: 120px;
	padding: 10px 12px;
	font-size: 1.05em;
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	background: var( --sizemint-surface );
	border: 1px solid var( --sizemint-border-color );
	border-radius: var( --sizemint-button-radius ) 0 0 var( --sizemint-button-radius );
	border-right: none;
	min-height: var( --sizemint-min-touch-target );
}

/* The per-field, non-interactive unit indicator. flex-shrink: 0 and a
   real minimum width are the actual fix for the clipping seen at real
   mobile widths -- without these, a narrow row (a long theme font, a
   zoomed browser, a small popup) could compress this element before it
   ever reached the old 480px "mobile" media query. */
.sizemint-fitfinder-unit-label {
	flex-shrink: 0;
	min-width: 44px;
	padding: 10px 12px;
	border: 1px solid var( --sizemint-border-color );
	border-left: none;
	border-radius: 0 var( --sizemint-button-radius ) var( --sizemint-button-radius ) 0;
	background: var( --sizemint-result-background );
	font-family: var( --sizemint-font-family );
	font-size: 0.95em;
	color: var( --sizemint-text-color );
	opacity: var( --sizemint-text-muted-opacity );
	display: flex;
	align-items: center;
	justify-content: center;
}

.sizemint-fitfinder-unit-toggle {
	/* inline-flex, not flex: this container's own parent isn't a flex
	   layout, so a plain `display: flex` here still generated a
	   full-width block box regardless of how small its own children
	   (the cm/in buttons) actually were — flex-shrink: 0 on this
	   element did nothing, since that property only applies when an
	   element is itself a flex ITEM inside a flex parent, which this
	   wasn't. inline-flex sizes the box to its actual content instead. */
	display: inline-flex;
	border: 1px solid var( --sizemint-border-color );
	border-radius: var( --sizemint-button-radius );
	overflow: hidden;
}

.sizemint-fitfinder-unit-btn {
	flex-shrink: 0;
	min-width: 44px;
	background: var( --sizemint-result-background );
	color: var( --sizemint-text-color );
	border: none;
	border-left: 1px solid var( --sizemint-border-color );
	padding: 10px 16px;
	cursor: pointer;
	font-family: var( --sizemint-font-family );
	font-size: 0.95em;
	min-height: var( --sizemint-min-touch-target );
}

.sizemint-fitfinder-unit-btn:first-child {
	border-left: none;
}

.sizemint-fitfinder-unit-btn[aria-pressed="true"] {
	background: var( --sizemint-accent );
	color: var( --sizemint-button-text );
	font-weight: 600;
}

.sizemint-fitfinder-unit-btn:focus-visible,
.sizemint-fitfinder-unit-btn:focus {
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: -2px;
}

.sizemint-fitfinder-submit {
	display: block;
	width: 100%;
	font-family: var( --sizemint-font-family );
	background: var( --sizemint-button-background );
	color: var( --sizemint-button-text );
	border: 1px solid var( --sizemint-button-border );
	border-radius: var( --sizemint-button-radius );
	padding: calc( var( --sizemint-spacing-unit ) * 1.5 ) calc( var( --sizemint-spacing-unit ) * 2 );
	min-height: var( --sizemint-min-touch-target );
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sizemint-fitfinder-submit:hover {
	background: var( --sizemint-button-hover-background );
}

.sizemint-fitfinder-submit:focus {
	background: var( --sizemint-button-background );
	color: var( --sizemint-button-text );
	border-color: var( --sizemint-button-border );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: 2px;
}

.sizemint-fitfinder-submit:focus:not( :focus-visible ) {
	outline: none;
}

.sizemint-fitfinder-submit:focus-visible {
	background: var( --sizemint-button-background );
	color: var( --sizemint-button-text );
	border-color: var( --sizemint-button-border );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: 2px;
}

/* The result area reads as a deliberate part of the popup, not trailing
   content appended beneath it. */
.sizemint-fitfinder-result-content:empty {
	margin: 0;
}

.sizemint-fitfinder-result-content:not(:empty) {
	margin-top: calc( var( --sizemint-spacing-unit ) * 2.25 );
	padding-top: calc( var( --sizemint-spacing-unit ) * 2 );
	border-top: 1px solid var( --sizemint-border-color );
}

.sizemint-fitfinder-result-size {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 6px;
}

.sizemint-fitfinder-result-explanation {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	margin: 0 0 var( --sizemint-spacing-unit );
	opacity: var( --sizemint-text-muted-opacity );
}

.sizemint-fitfinder-result-boundary-note {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	font-size: 0.9em;
	opacity: 0.8;
	margin: 0 0 var( --sizemint-spacing-unit );
}

/* Four visually distinct confidence states, matching the four functional
   classifications the algorithm already produces. */
.sizemint-fitfinder-result-size--strong {
	color: var( --sizemint-accent );
}

.sizemint-fitfinder-result-size--close {
	color: var( --sizemint-text-color );
}

.sizemint-fitfinder-result-size--near {
	color: var( --sizemint-text-color );
	opacity: 0.9;
}

/* Calm, informational tone — not styled like an error, deliberately. */
.sizemint-fitfinder-result-availability--unavailable {
	font-family: var( --sizemint-font-family );
	font-size: 0.95em;
	font-weight: 600;
	color: var( --sizemint-result-warning-text );
	background: var( --sizemint-result-warning-background );
	padding: var( --sizemint-spacing-unit ) calc( var( --sizemint-spacing-unit ) * 1.25 );
	border-radius: var( --sizemint-button-radius );
	margin: 0;
}

.sizemint-fitfinder-result-message--outside {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	margin: 0;
	opacity: var( --sizemint-text-muted-opacity );
}

/* The reciprocal "check the full size chart" link, shown inside a
   no-confident-match result — no explicit rule existed for this
   before, meaning it relied entirely on browser/theme default button
   styling, exactly the aggressive-theme-CSS risk (generic `button`
   rules) the spec specifically warned about. Explicit and
   token-driven now, matching every other Sizemint control. */
.sizemint-fitfinder-view-chart-link {
	background: none;
	border: none;
	color: var( --sizemint-accent );
	text-decoration: underline;
	cursor: pointer;
	font-family: var( --sizemint-font-family );
	font-size: 0.95em;
	padding: 0;
}

.sizemint-fitfinder-view-chart-link:focus-visible,
.sizemint-fitfinder-view-chart-link:focus {
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: 2px;
}

.sizemint-fitfinder-result-message--error {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-result-error-text );
	margin: 0;
}

/* Tablet / narrow desktop (769-1023px): still spacious, no structural
   change needed beyond the popup's own max-width already constraining it. */

/* Mobile (<=768px). Now that individual fields no longer stretch to
   fill available width, the popup itself can be a little less
   edge-to-edge too — a visible margin around it reads more
   intentional than filling almost the whole viewport. */
@media ( max-width: 768px ) {
	.sizemint-fitfinder-popup .sizemint-popup__inner {
		max-width: 88vw;
	}
}

/* Small mobile (<=480px): aggressive compact spacing. Still leaves a
   visible margin rather than running edge-to-edge, even at this width. */
@media ( max-width: 480px ) {
	.sizemint-fitfinder-popup .sizemint-popup__inner {
		max-width: 90vw;
		padding: calc( var( --sizemint-spacing-unit ) * 2 );
	}
}

/* Very small (<=375px): must still function -- no horizontal scrolling,
   no clipped controls, unit label/toggle keep their protected minimum
   width from the base rules above rather than gaining new shrinking
   behavior here. */
@media ( max-width: 375px ) {
	.sizemint-fitfinder-popup .sizemint-popup__inner {
		padding: calc( var( --sizemint-spacing-unit ) * 1.5 );
	}
}