/* All selectors are prefixed with .sizemint- to avoid the CSS collisions found
   in competitor plugins (one plugin's activation broke another plugin's
   unrelated admin styling). Never add a bare element selector here. */

.sizemint-trigger-wrap {
	font-family: var( --sizemint-font-family );
	margin: var( --sizemint-spacing-unit ) 0;
}

/*
 * The direct fix for the Astra failure: every visual property here is a
 * real, solid Sizemint token — never `background: none`, never
 * `border: 1px solid currentColor` — so a theme's own `color` value can
 * no longer make this button blend into invisibility. This is true in
 * both Theme and Custom mode; Custom mode only changes which concrete
 * values these tokens resolve to, never whether they're concrete at all.
 */
.sizemint-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --sizemint-font-family );
	font-size: var( --sizemint-font-size-base );
	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.25 ) calc( var( --sizemint-spacing-unit ) * 2 );
	min-height: var( --sizemint-min-touch-target );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

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

/*
 * Guarantees a visible focus indicator regardless of what the active
 * theme does globally — many WordPress themes strip the browser's
 * default focus outline site-wide, which would otherwise make the
 * Escape-key focus-restoration behavior invisible to keyboard users even
 * though it's actually working correctly. :focus-visible keeps this from
 * showing on an ordinary mouse click, matching how modern browsers only
 * show it for keyboard/programmatic focus; :focus is a fallback for
 * older browsers without :focus-visible support.
 */
.sizemint-trigger:focus {
	/* Any focus (mouse or keyboard) re-asserts the button's own real
	   colors — the actual fix: a theme's own focus styling (e.g. a
	   generic `button:focus`) could previously win specifically on this
	   state even though the resting button was already protected,
	   which is exactly what produced a theme-colored (often blue)
	   button on focus. This is a plain :focus fallback outline for
	   browsers without :focus-visible support; the next two rules
	   refine it for modern browsers, per the smaller, deliberate
	   requirement to only show the strong keyboard-style ring for
	   genuine keyboard focus, not an ordinary mouse click. */
	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-trigger:focus:not( :focus-visible ) {
	outline: none;
}

.sizemint-trigger: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;
}

.sizemint-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.5 );
}

/*
 * Without this, the rule above (.sizemint-popup { display: flex; }) has the
 * same CSS specificity as the browser's own built-in "[hidden] { display:
 * none; }" rule, and — because this stylesheet loads after the browser's
 * default one — silently wins the tie every time, regardless of what the
 * JavaScript correctly decides. The popup would then stay visually stuck
 * open even when its `hidden` property is genuinely true, making Escape,
 * the overlay click, and the close button all appear broken even though
 * their logic was firing correctly. Adding the attribute to the selector
 * makes this rule more specific than the plain class rule above, so it
 * reliably wins instead.
 */
.sizemint-popup[hidden] {
	display: none;
}

.sizemint-popup__inner {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	background: var( --sizemint-surface );
	max-width: 90vw;
	max-height: 85vh;
	overflow: auto;
	padding: calc( var( --sizemint-spacing-unit ) * 3 );
	position: relative;
	border-radius: var( --sizemint-popup-radius );
}

.sizemint-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	color: var( --sizemint-text-color );
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	min-width: var( --sizemint-min-touch-target );
	min-height: var( --sizemint-min-touch-target );
}

.sizemint-popup__close:focus {
	color: var( --sizemint-text-color );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: 2px;
}

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

.sizemint-popup__close:focus-visible {
	color: var( --sizemint-text-color );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: 2px;
}

.sizemint-popup__title {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	margin: 0 28px 16px 0;
	font-size: 18px;
	font-weight: 600;
}

/* The storefront cm/in toggle for a standalone Size Chart's own
   measurement values — mirrors Fit Finder's unit toggle visual
   treatment for consistency between the two components, but uses its
   own class names entirely (never .sizemint-fitfinder-*), since the two
   unit systems are deliberately kept independent: this one converts
   already-fixed display values for the shopper's convenience, while
   Fit Finder's own toggle affects what the shopper actively types
   into a matching algorithm. Different job, same visual language. */
.sizemint-chart-unit-toggle-wrap {
	margin-bottom: var( --sizemint-spacing-unit );
}

.sizemint-chart-unit-toggle {
	display: inline-flex;
	border: 1px solid var( --sizemint-border-color );
	border-radius: var( --sizemint-button-radius );
	overflow: hidden;
}

.sizemint-chart-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-chart-unit-btn:first-child {
	border-left: none;
}

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

.sizemint-chart-unit-btn:focus {
	/* Re-asserts the button's own real colors on focus, not just an
	   outline — the same fix already applied to every other storefront
	   button, so a theme's own focus styling can't recolor this one
	   either. Only the DEFAULT (unpressed) colors here; the pressed
	   state's own colors are re-asserted separately below, at higher
	   specificity, so a focused pressed button doesn't lose its
	   distinct active appearance to this rule. */
	background: var( --sizemint-result-background );
	color: var( --sizemint-text-color );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: -2px;
}

.sizemint-chart-unit-btn:focus:not( :focus-visible ) {
	outline: none;
}

.sizemint-chart-unit-btn:focus-visible {
	background: var( --sizemint-result-background );
	color: var( --sizemint-text-color );
	outline: 2px solid var( --sizemint-focus-ring-color );
	outline-offset: -2px;
}

.sizemint-chart-unit-btn[aria-pressed="true"]:focus,
.sizemint-chart-unit-btn[aria-pressed="true"]:focus-visible {
	background: var( --sizemint-accent );
	color: var( --sizemint-button-text );
}

.sizemint-chart-table {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	border-collapse: collapse;
	width: 100%;
}

.sizemint-chart-table td,
.sizemint-chart-table th {
	border: 1px solid var( --sizemint-table-border );
	padding: var( --sizemint-spacing-unit ) calc( var( --sizemint-spacing-unit ) * 1.5 );
	text-align: center;
}

/* Alternating row shading for readability on longer charts. */
.sizemint-chart-table tr:nth-child(even) td {
	background: var( --sizemint-table-row-alt-background );
}

/* The chart builder's own instructions state the first row is always the
   header, so it can be styled reliably by position alone — no markup or
   PHP change needed to tell CSS which row this is. */
.sizemint-chart-table tr:first-child td {
	background: var( --sizemint-table-header-background );
	color: var( --sizemint-table-header-text );
	font-weight: 600;
	border-bottom: 2px solid var( --sizemint-table-border );
}

/* The Fit Finder-linked chart uses real <th> elements for its header row
   (Size, Chest, Waist...) rather than relying on the :first-child
   position trick above — style them directly with the same look,
   since a <th> is unambiguously always a header regardless of position. */
.sizemint-chart-table th {
	background: var( --sizemint-table-header-background );
	color: var( --sizemint-table-header-text );
	font-weight: 600;
	border-bottom: 2px solid var( --sizemint-table-border );
}

/*
 * Mobile transformation (<=768px): a table wider than "Size + one
 * measurement" must not force horizontal scrolling on a real phone.
 * .sizemint-chart-table--compact (content-aware, decided server-side by
 * actual column count — see SIZEMINT_Public::render_chart_table_markup())
 * opts a genuinely narrow chart OUT of this, since a two-column table
 * already fits any mobile width without help.
 *
 * The technique: hide the header row (its information becomes each
 * cell's own data-label instead), turn each data row into a bordered
 * block, and lay each cell out as its own label/value pair via
 * ::before with the cell's data-label attribute as content. Same DOM,
 * same PHP output either way — only the CSS decides table vs. card.
 */
@media ( max-width: 768px ) {
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) {
		border: none;
	}
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:not(:first-child) {
		display: block;
		margin-bottom: var( --sizemint-spacing-unit );
		border: 1px solid var( --sizemint-table-border );
		border-radius: var( --sizemint-table-radius );
		overflow: hidden;
	}
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:not(:first-child) td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var( --sizemint-spacing-unit );
		border: none;
		border-bottom: 1px solid var( --sizemint-table-border );
	}
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:not(:first-child) td:last-child {
		border-bottom: none;
	}
	/* The size label itself (first cell of each row) becomes the card's
	   own heading rather than a labeled row like the others. */
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:not(:first-child) td:first-child {
		background: var( --sizemint-table-header-background );
		color: var( --sizemint-table-header-text );
		font-weight: 700;
		font-size: 1.1em;
		justify-content: flex-start;
	}
	.sizemint-chart-table:not( .sizemint-chart-table--compact ) tr:not(:first-child) td:not(:first-child)::before {
		content: attr( data-label );
		font-weight: 600;
		color: var( --sizemint-table-header-text );
	}
}

.sizemint-chart-framing {
	font-family: var( --sizemint-font-family );
	color: var( --sizemint-text-color );
	margin: 8px 0 4px;
	font-size: 0.9em;
	opacity: 0.85;
}

.sizemint-chart-fitfinder-link-wrap {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #e5e5e5;
}

.sizemint-chart-view-fitfinder-link {
	background: none;
	border: none;
	color: var( --sizemint-text-color );
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.95em;
	padding: 0;
}

@media ( max-width: 480px ) {
	.sizemint-popup__inner {
		max-width: 95vw;
		padding: 16px;
	}
}