/**
 * Custom Fields frontend styles.
 *
 * Hand-authored rather than built: `Module_Base::enqueue_frontend_assets()`
 * falls back to `<slug>.css` when a module ships no built `<slug>.min.css`.
 *
 * @package  wp-3d-configurator\modules\custom-fields\assets\frontend\
 * @author WP Configurator
 * @version 1.3.3
 */

/* Option layers sit side by side as chips; a field needs the full row. */
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-textfield,
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-textarea,
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-select,
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-radio,
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-checkbox,
.wp3dconf-parent-control .wp3dconf-control-item.wp3dconf-layer-type-switch {
	display: block;
	width: 100%;
	cursor: default;
}

[class^="wp3dconf"] .wp3dconf-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
}

[class^="wp3dconf"] .wp3dconf-field-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	color: var(--wp3dconf-text-dark);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}

[class^="wp3dconf"] .wp3dconf-field-label-text {
	overflow-wrap: anywhere;
}

[class^="wp3dconf"] input.wp3dconf-field-input,
[class^="wp3dconf"] textarea.wp3dconf-field-input,
[class^="wp3dconf"] select.wp3dconf-field-input {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp3dconf-text-dark);
	background: var(--wp3dconf-white);
	border: 1px solid var(--wp3dconf-border-light);
	border-radius: 4px;
}

[class^="wp3dconf"] input.wp3dconf-field-input::placeholder,
[class^="wp3dconf"] textarea.wp3dconf-field-input::placeholder {
	color: var(--wp3dconf-text-muted);
	opacity: 1;
}

[class^="wp3dconf"] input.wp3dconf-field-input:focus,
[class^="wp3dconf"] textarea.wp3dconf-field-input:focus,
[class^="wp3dconf"] select.wp3dconf-field-input:focus {
	outline: none;
	border-color: var(--wp3dconf-primary);
	box-shadow: none;
}

[class^="wp3dconf"] textarea.wp3dconf-field-input {
	display: block;
	min-height: 80px;
	resize: vertical;
	font-family: inherit;
}

[class^="wp3dconf"] select.wp3dconf-field-input {
	appearance: none;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

/* Conditional Logic can disable a layer; make that state unmistakable. */
.wp3dconf-layer-type-textfield.wp3dconf-layer-disabled input.wp3dconf-field-input,
.wp3dconf-layer-type-textarea.wp3dconf-layer-disabled textarea.wp3dconf-field-input,
.wp3dconf-layer-type-select.wp3dconf-layer-disabled select.wp3dconf-field-input {
	pointer-events: none;
	opacity: 0.5;
}

/* Radio and checkbox render their choices as rows, so unlike an <option> each
   one can carry a real price. */
[class^="wp3dconf"] .wp3dconf-field-choices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

[class^="wp3dconf"] .wp3dconf-field-choice {
	margin: 0;
	padding: 0;
}

/* The whole row is the target, not the 18px box beside the text — the price
   sits at the far end of it, and aiming for the control alone on a phone is a
   miss waiting to happen. */
[class^="wp3dconf"] .wp3dconf-choice-label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 12px;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp3dconf-text-dark);
	background: var(--wp3dconf-white);
	border: 1px solid var(--wp3dconf-border-light);
	border-radius: 4px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

[class^="wp3dconf"] .wp3dconf-choice-label:hover {
	border-color: var(--wp3dconf-border-dark);
	background: var(--wp3dconf-bg-item);
}

/* Marking the row as chosen needs `:has()`, so it is additive: without support
   the control still carries the state, which is what a native one does today. */
[class^="wp3dconf"] .wp3dconf-choice-label:has(.wp3dconf-choice-input:checked) {
	border-color: var(--wp3dconf-primary);
	background: var(--wp3dconf-control-title-bg);
}

/* The ring belongs on the row a keyboard user is actually moving between,
   rather than on the 18px control inside it. */
[class^="wp3dconf"] .wp3dconf-choice-label:has(.wp3dconf-choice-input:focus-visible) {
	outline: 2px solid var(--wp3dconf-primary);
	outline-offset: 2px;
}

/* The native control is restyled rather than hidden behind a stand-in, so the
   row keeps its own semantics, keyboard behaviour and `checked` state. */
[class^="wp3dconf"] input.wp3dconf-choice-input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-color: var(--wp3dconf-white);
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid var(--wp3dconf-border-dark);
	border-radius: 4px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

[class^="wp3dconf"] input.wp3dconf-choice-input[type="radio"] {
	border-radius: 50%;
}

[class^="wp3dconf"] input.wp3dconf-choice-input:checked {
	background-color: var(--wp3dconf-primary);
	border-color: var(--wp3dconf-primary);
}

/* An inset ring rather than a pseudo-element: `::before` on a replaced element
   is not something every browser honours. */
[class^="wp3dconf"] input.wp3dconf-choice-input[type="radio"]:checked {
	box-shadow: inset 0 0 0 3px var(--wp3dconf-white);
}

/* The tick is a background image for the same reason. White is hardcoded
   because a data URI cannot read a custom property. */
[class^="wp3dconf"] input.wp3dconf-choice-input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}

[class^="wp3dconf"] input.wp3dconf-choice-input:focus-visible {
	outline: 2px solid var(--wp3dconf-primary);
	outline-offset: 2px;
}

/* Where the row draws the ring, the control must not draw a second one. */
@supports selector(:has(*)) {
	[class^="wp3dconf"] input.wp3dconf-choice-input:focus-visible {
		outline: none;
	}
}

[class^="wp3dconf"] .wp3dconf-choice-text {
	flex: 1;
	overflow-wrap: anywhere;
}

/* Prices keep to one line at the end of the row, so the labels above them stay
   in a readable column. */
[class^="wp3dconf"] .wp3dconf-choice-label .wp3dconf-price {
	flex: none;
	white-space: nowrap;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	[class^="wp3dconf"] .wp3dconf-choice-label,
	[class^="wp3dconf"] input.wp3dconf-choice-input {
		transition: none;
	}
}

/* The group heading is not a control label here — each choice has its own. */
.wp3dconf-field-radio > .wp3dconf-field-label,
.wp3dconf-field-checkbox > .wp3dconf-field-label {
	cursor: default;
	margin-bottom: 4px;
}

.wp3dconf-layer-type-radio.wp3dconf-layer-disabled .wp3dconf-field-choices,
.wp3dconf-layer-type-checkbox.wp3dconf-layer-disabled .wp3dconf-field-choices {
	pointer-events: none;
	opacity: 0.5;
}

/* A switch is a checkbox the stylesheet turns into a slider. */
[class^="wp3dconf"] .wp3dconf-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 44px;
	height: 24px;
	flex: none;
	cursor: pointer;
}

[class^="wp3dconf"] input.wp3dconf-switch-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

[class^="wp3dconf"] .wp3dconf-switch-slider {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: var(--wp3dconf-border-dark);
	transition: background 0.2s ease;
}

[class^="wp3dconf"] .wp3dconf-switch-slider::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp3dconf-white);
	transition: transform 0.2s ease;
}

[class^="wp3dconf"] .wp3dconf-switch-input:checked + .wp3dconf-switch-slider {
	background: var(--wp3dconf-primary);
}

[class^="wp3dconf"] .wp3dconf-switch-input:checked + .wp3dconf-switch-slider::before {
	transform: translateX(20px);
}

[class^="wp3dconf"] .wp3dconf-switch-input:focus-visible + .wp3dconf-switch-slider {
	outline: 2px solid var(--wp3dconf-primary);
	outline-offset: 2px;
}

/* The label and the toggle sit on one row rather than stacking.
   The `[class^="wp3dconf"]` prefix is load-bearing: without it only
   `flex-direction` loses to the base `.wp3dconf-field` rule, leaving the other
   two to centre a column — a stacked toggle under a centred label, which reads
   as a theme problem rather than a specificity one. */
[class^="wp3dconf"] .wp3dconf-field-switch {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
}

/* The label takes the free space, so its price lands at the right edge the way
   every other field's does and the toggle sits beyond it. It carries the
   input's `for`, so the whole row toggles — matching the choice rows. */
[class^="wp3dconf"] .wp3dconf-field-switch > .wp3dconf-field-label {
	flex: 1;
	min-width: 0;
}

.wp3dconf-layer-type-switch.wp3dconf-layer-disabled .wp3dconf-switch {
	pointer-events: none;
	opacity: 0.5;
}