/*!
 * ACF Color Palette Lock — admin styles.
 *
 * Hides the freeform Iris controls (color square, hue strip, hex input,
 * alpha slider, action buttons) for ACF color_picker fields so that
 * editors can ONLY click a palette swatch. The palette row itself is
 * promoted: bigger swatches, more padding, and shown on focus.
 *
 * Also styles the little swatch dots injected by the JS into select/radio
 * options for catalogued color-choice fields.
 */

/* =========================================================================
 * 1. color_picker fields — hide freeform Iris controls.
 * ====================================================================== */

.acf-field.wdg-acf-color-locked .wp-picker-input-wrap input.wp-color-picker,
.acf-field.wdg-acf-color-locked .wp-picker-input-wrap .button.wp-picker-clear,
.acf-field.wdg-acf-color-locked .wp-picker-input-wrap .button.wp-picker-default,
.acf-field.wdg-acf-color-locked .wp-picker-holder .iris-picker-inner,
.acf-field.wdg-acf-color-locked .wp-picker-holder .iris-square,
.acf-field.wdg-acf-color-locked .wp-picker-holder .iris-strip,
.acf-field.wdg-acf-color-locked .wp-picker-holder .iris-slider-offset,
.acf-field.wdg-acf-color-locked .wp-picker-holder .iris-square-handle,
.acf-field.wdg-acf-color-locked .wp-picker-active .iris-picker-inner {
	display: none !important;
}

.acf-field.wdg-acf-color-locked .iris-picker {
	height: auto !important;
	min-height: 0 !important;
	width: 240px !important;
	padding: 8px !important;
	box-sizing: content-box;
}

.acf-field.wdg-acf-color-locked .iris-palette-container {
	position: static !important;
	margin: 0 !important;
	width: auto !important;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.acf-field.wdg-acf-color-locked .iris-palette {
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	border: 2px solid #ddd;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	float: none !important;
	transition: transform 0.1s ease, border-color 0.1s ease;
}

.acf-field.wdg-acf-color-locked .iris-palette:hover {
	transform: scale(1.1);
	border-color: #2271b1;
}

.acf-field.wdg-acf-color-locked .wp-color-result {
	box-shadow: 0 0 0 1px #ddd inset;
}

/* =========================================================================
 * 2. Select / radio palette swatches.
 * ====================================================================== */

.acf-field.wdg-acf-color-palette .acf-radio-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.acf-field.wdg-acf-color-palette .acf-radio-list li {
	margin: 0;
}

.acf-field.wdg-acf-color-palette .acf-radio-list label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.acf-field.wdg-acf-color-palette .acf-radio-list input[type="radio"]:checked + .wdg-acf-palette-swatch,
.acf-field.wdg-acf-color-palette .acf-radio-list label:has(input:checked) {
	border-color: #2271b1;
}

.wdg-acf-palette-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	vertical-align: middle;
	box-sizing: border-box;
}

.acf-field.wdg-acf-color-palette select option[data-wdg-swatch] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.acf-field.wdg-acf-color-palette select option[value]:not([data-wdg-swatch]) {
	color: #b32d2e;
	font-style: italic;
}