/*
 * The option selectors, styled here for the same reason as the button: a form
 * control inherits something different in every WooCommerce theme. Kept quiet on
 * purpose, so it reads as part of the product page rather than a widget dropped
 * on top of it. The custom properties are the seam a merchant restyles through.
 *
 * No class name here contains "price": the plugin prefixes the theme's price
 * markup with "From", and it would otherwise prefix our own estimate too.
 */
.bindl-options {
	--bindl-options-gap: 0.75em;
	--bindl-options-border: rgba(0, 0, 0, 0.18);
	--bindl-options-radius: 6px;
	/* Lists and buttons share one size, the theme's own for form controls
	   where it declares one, so neither reads heavier than the other. */
	--bindl-options-font-size: var(--wp--preset--font-size--small, 0.9em);
	--bindl-options-height: 2.6em;

	display: flex;
	flex-direction: column;
	gap: var(--bindl-options-gap);
	margin: 0 0 1em;
	max-width: 22em;
}

/* A theme's colourways, and a value the picked format or theme does not sell. */
.bindl-options [hidden] {
	display: none !important;
}

.bindl-option {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.bindl-option-label {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.75;
}

/* Two classes: WooCommerce sizes `.woocommerce-page select` itself, which
   outranked one class and left the lists smaller than the buttons. */
.bindl-options .bindl-option-select {
	box-sizing: border-box;
	height: var(--bindl-options-height);
	padding: 0 0.7em;
	border: 1px solid var(--bindl-options-border);
	border-radius: var(--bindl-options-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--bindl-options-font-size);
	line-height: normal;
}

.bindl-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.bindl-swatch {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: var(--bindl-options-height);
	padding: 0 0.7em;
	border: 1px solid var(--bindl-options-border);
	border-radius: var(--bindl-options-radius);
	cursor: pointer;
	font-size: var(--bindl-options-font-size);
	line-height: 1.2;
}

/* The empty choice has no colour: an outlined dot crossed by a slash. */
.bindl-swatch-none .bindl-swatch-dot {
	background: linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
	border-style: dashed;
	opacity: 0.6;
}

/* The radio itself is hidden but still focusable, so keyboard use survives. */
.bindl-swatch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bindl-swatch-dot {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border: 1px solid var(--bindl-options-border);
	border-radius: 50%;
	background: currentColor;
}

.bindl-swatch:has(input:checked) {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}

.bindl-swatch:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bindl-themes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.5em, 1fr));
	gap: 0.5em;
}

.bindl-theme {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.3em;
	border: 1px solid var(--bindl-options-border);
	border-radius: var(--bindl-options-radius);
	cursor: pointer;
	font-size: var(--bindl-options-font-size);
	line-height: 1.2;
	text-align: center;
}

.bindl-theme input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Stretched on its own: a theme that centres every label holding a radio
   (Horizon does) shrank the blank book's picture, which has no image, to nothing. */
.bindl-theme-picture {
	display: block;
	align-self: stretch;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: calc(var(--bindl-options-radius) * 0.6);
	background: rgba(0, 0, 0, 0.05);
}

.bindl-theme-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The blank book: an empty page, drawn rather than pictured. */
.bindl-theme-blank {
	background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.05) 6px 12px);
	box-shadow: inset 0 0 0 1px var(--bindl-options-border);
}

.bindl-theme:has(input:checked) {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}

.bindl-theme:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bindl-swatch-off {
	opacity: 0.4;
	cursor: not-allowed;
}

.bindl-estimated {
	margin: 0;
	font-size: 1.05em;
}

.bindl-estimated-label {
	opacity: 0.75;
}