/**
 * SFS Commerce OS — the "Size Guide" icon + popup on the WooCommerce
 * single-product page. Deliberately theme-neutral (not the admin
 * dashboard design system) since this renders inside whatever
 * storefront theme the store uses.
 */

.sfs-size-guide-trigger {
	margin: 10px 0;
}

.sfs-size-guide-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	text-decoration: underline;
}

/* The native `hidden` attribute must actually hide this overlay --
   `display: flex` below would otherwise beat the browser's own
   `[hidden] { display: none }` rule regardless of specificity (author
   CSS always wins over UA CSS), which is exactly why the popup was
   showing immediately on page load/refresh instead of waiting for the
   Size Guide link to be clicked. */
.sfs-size-guide-overlay[hidden] {
	display: none;
}

.sfs-size-guide-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.sfs-size-guide-modal {
	position: relative;
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	max-width: 640px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
}

.sfs-size-guide-modal h3 {
	margin: 0 0 14px;
}

.sfs-size-guide-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

/* Wide charts (many size columns/regions) must scroll inside their own
   container on narrow screens instead of overflowing the modal/page --
   without this, a table wider than the viewport pushes the whole
   popup/page layout sideways on mobile. */
.sfs-size-guide-chart {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sfs-size-guide-chart table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
}

.sfs-size-guide-chart th,
.sfs-size-guide-chart td {
	border: 1px solid #ddd;
	padding: 8px 10px;
	text-align: left;
}

.sfs-size-guide-chart th {
	background: #f7f5f2;
}

.sfs-size-guide-video,
.sfs-size-guide-video-fallback {
	margin-top: 18px;
}

.sfs-size-guide-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Illustration image (Settings -> Size Guides -> Illustration image
   URL) -- no fixed dimensions on the <img> itself; this is what makes
   it "auto-fit" regardless of the source photo's real size. */
.sfs-size-guide-image {
	margin-top: 18px;
	text-align: center;
}

.sfs-size-guide-image img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Standalone page shortcode ([sfs_size_guide id="..."]) -- same chart
   styling above, plus its own title/spacing since there's no modal
   wrapper around it here. */
.sfs-size-guide-standalone {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0;
}

.sfs-size-guide-standalone-title {
	margin: 0 0 16px;
}

/* Inch/CM toggle -- see product-size-guide-frontend.js and
   SizeGuideFrontend::render_unit_toggle(). Only has a visible effect on
   charts whose HTML wraps values as .sfs-unit-in / .sfs-unit-cm spans;
   a plain-text chart with no spans just shows a toggle that does
   nothing, which is harmless. */
.sfs-size-guide-unit-toggle {
	display: inline-flex;
	border: 1px solid #ddd;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 14px;
}

.sfs-size-guide-unit-btn {
	background: transparent;
	border: none;
	padding: 5px 16px;
	font-size: 13px;
	cursor: pointer;
	color: #777;
}

.sfs-size-guide-unit-btn.sfs-unit-active {
	background: #222;
	color: #fff;
	font-weight: 500;
}

.sfs-size-guide-chart .sfs-unit-cm {
	display: none;
}

.sfs-size-guide-body.sfs-size-guide-show-cm .sfs-unit-in {
	display: none;
}

.sfs-size-guide-body.sfs-size-guide-show-cm .sfs-unit-cm {
	display: inline;
}

/* Controls row (region dropdown + unit toggle side by side) */
.sfs-size-guide-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.sfs-size-guide-controls .sfs-size-guide-unit-toggle {
	margin-bottom: 0;
}

.sfs-size-guide-region-select {
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 13px;
	background: #fff;
}

/* US/UK/EU/AU/IT region dropdown -- see product-size-guide-frontend.js
   and SizeGuideFrontend::render_region_select(). "US" is the default
   shown (matches the dropdown's own default selected option) since it
   has no hide rule below; every other region starts hidden and only
   appears once its matching sfs-size-guide-region-{code} class is set
   on the .sfs-size-guide-body wrapper. */
.sfs-size-guide-chart .sfs-region-uk,
.sfs-size-guide-chart .sfs-region-eu,
.sfs-size-guide-chart .sfs-region-au,
.sfs-size-guide-chart .sfs-region-it,
.sfs-size-guide-chart .sfs-region-ae,
.sfs-size-guide-chart .sfs-region-pk {
	display: none;
}

.sfs-size-guide-body.sfs-size-guide-region-uk .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-uk .sfs-region-uk { display: inline; }
.sfs-size-guide-body.sfs-size-guide-region-eu .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-eu .sfs-region-eu { display: inline; }
.sfs-size-guide-body.sfs-size-guide-region-au .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-au .sfs-region-au { display: inline; }
.sfs-size-guide-body.sfs-size-guide-region-it .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-it .sfs-region-it { display: inline; }
.sfs-size-guide-body.sfs-size-guide-region-ae .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-ae .sfs-region-ae { display: inline; }
.sfs-size-guide-body.sfs-size-guide-region-pk .sfs-region-us { display: none; }
.sfs-size-guide-body.sfs-size-guide-region-pk .sfs-region-pk { display: inline; }

/* Tablet -- slightly tighter modal so the chart has more room before
   the table needs to scroll. */
@media (max-width: 768px) {
	.sfs-size-guide-modal {
		padding: 18px;
		max-height: 85vh;
	}
}

/* Mobile -- the popup overlay's own 20px padding plus the modal's own
   padding leaves very little width for an 7-8 column chart, so this
   trims both further and shrinks the table text so more columns fit
   before the horizontal scroll (added above) has to kick in. The
   region/unit controls also stack full-width instead of staying
   side-by-side, since two pill controls next to each other get
   cramped under ~360px. */
@media (max-width: 480px) {
	.sfs-size-guide-overlay {
		padding: 10px;
	}

	.sfs-size-guide-modal {
		padding: 14px;
		border-radius: 6px;
	}

	.sfs-size-guide-close {
		top: 8px;
		right: 10px;
	}

	.sfs-size-guide-chart table {
		font-size: 12px;
		min-width: 420px;
	}

	.sfs-size-guide-chart th,
	.sfs-size-guide-chart td {
		padding: 6px 8px;
	}

	.sfs-size-guide-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.sfs-size-guide-region-select,
	.sfs-size-guide-unit-toggle {
		width: 100%;
	}

	.sfs-size-guide-unit-toggle {
		display: flex;
	}

	.sfs-size-guide-unit-btn {
		flex: 1;
	}
}