/**
 * Personalisation fields on the product page.
 *
 * Colours are taken from Blocksy's palette variables so the block follows the
 * theme's colours from the Customizer instead of pinning its own.
 */

.isik-personalization {
	border: 1px solid var(--theme-border-color, rgba(224, 229, 235, 0.8));
	border-radius: var(--theme-border-radius, 6px);
	margin: 0 0 1.75em;
	padding: 1.25em 1.35em 0.5em;
}

.isik-personalization__heading {
	font-size: 1rem;
	letter-spacing: 0.04em;
	margin: 0 0 1em;
	text-transform: uppercase;
}

.isik-field-row {
	margin: 0 0 1.25em;
}

.isik-field-row__label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.35em;
}

.isik-field-row__label .required {
	border: 0;
	color: var(--theme-danger-color, #b32d2e);
	margin-left: 0.15em;
	text-decoration: none;
}

.isik-field-row__price {
	color: var(--theme-text-color, inherit);
	font-weight: 400;
	opacity: 0.75;
}

.isik-field-row__help {
	display: block;
	font-size: 0.85em;
	margin: 0.35em 0 0;
	opacity: 0.72;
}

/* Sits before the input in the markup, so it needs pulling above the label. */
.isik-field-row > .isik-field-row__help:first-of-type {
	margin: -0.15em 0 0.5em;
}

.isik-personalization .isik-input {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

.isik-personalization .isik-input--file {
	background: var(--theme-form-field-background-color, transparent);
	border: 1px dashed var(--theme-form-field-border-initial-color, rgba(224, 229, 235, 0.9));
	border-radius: var(--theme-border-radius, 4px);
	padding: 0.75em;
}

/* Radio buttons ------------------------------------------------------- */

.isik-choices {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.isik-choice {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5em;
	margin: 0;
}

.isik-choice em {
	font-style: normal;
	opacity: 0.75;
}

/* Colour swatches ----------------------------------------------------- */

.isik-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55em;
}

.isik-swatch {
	align-items: center;
	border: 1px solid var(--theme-border-color, rgba(224, 229, 235, 0.9));
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5em;
	margin: 0;
	padding: 0.3em 0.85em 0.3em 0.35em;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.isik-swatch input {
	/* Kept in the accessibility tree — the visible pill is the control. */
	height: 1px;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.isik-swatch__dot {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	display: inline-block;
	flex: none;
	height: 1.15em;
	width: 1.15em;
}

.isik-swatch__label {
	font-size: 0.92em;
}

.isik-swatch:has(input:checked) {
	border-color: var(--theme-palette-color-1, #52796f);
	box-shadow: 0 0 0 1px var(--theme-palette-color-1, #52796f);
}

.isik-swatch:has(input:focus-visible) {
	outline: 2px solid var(--theme-palette-color-1, #52796f);
	outline-offset: 2px;
}

/* Browsers without :has() still get a visible state from the outline. */
.isik-swatch input:focus-visible {
	height: auto;
	opacity: 1;
	position: static;
	width: auto;
}

.isik-checkbox-inline {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5em;
	margin: 0;
}

/* Cart and checkout --------------------------------------------------- */

.woocommerce-cart .variation,
.woocommerce-checkout .variation {
	font-size: 0.88em;
	line-height: 1.6;
}