/**
 * ShapeOptions — frontend styles.
 *
 * Minimal on purpose: inherits the theme's typography and only paints what
 * the theme has no opinion about. Every selector is namespaced `.of-`, so
 * nothing here can reach an element this plugin did not render.
 *
 * Custom properties
 * -----------------
 * --shapeoptions-accent, --shapeoptions-radius, --shapeoptions-choice-pad-*, --shapeoptions-choice-font come from the
 * Style Settings admin page (see class-shapeoptions-style-settings.php); the fallbacks
 * in this file are what renders if that page was never saved.
 * --shapeoptions-field-gap  (default 22px) space below each option field.
 * --shapeoptions-label-gap  (default 12px) space under a field's label.
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1. Group & field layout
 *  2. Labels & inputs
 *  3. Choices — inline, stacked, boxed
 *  4. Hints & validation
 *  5. Help-text positions — below label, tooltip
 *  6. Separator & range output
 *  7. Collapsible section
 *  8. Options total
 *  9. Switch / toggle
 * 10. Media queries
 */

/* === 1. Group & field layout === */

.shapeoptions-group {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	margin: 0 0 var( --shapeoptions-field-gap, 22px );
	padding: 0;
	column-gap: 1.5em;
	row-gap: var( --shapeoptions-field-gap, 22px );
}

.shapeoptions-field {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
}

/* Field width. The builder offers a fixed set of widths, so each one is a
   class — this used to read the value out of an inline `style` attribute with
   `[style*="--shapeoptions-field-width"]`, which meant markup carrying presentation and
   an attribute-substring selector doing the matching. */
.shapeoptions-field--w25,
.shapeoptions-field--w33,
.shapeoptions-field--w50,
.shapeoptions-field--w66 {
	flex-basis: calc( var( --shapeoptions-field-width ) - 0.75em );
	max-width: calc( var( --shapeoptions-field-width ) - 0.75em );
}

.shapeoptions-field--w25 { --shapeoptions-field-width: 25%; }
.shapeoptions-field--w33 { --shapeoptions-field-width: 33.333%; }
.shapeoptions-field--w50 { --shapeoptions-field-width: 50%; }
.shapeoptions-field--w66 { --shapeoptions-field-width: 66.666%; }

.shapeoptions-field--w100 {
	flex-basis: 100%;
	max-width: 100%;
}

/* Per-field corner shape, overriding the site-wide Style Settings value. */
.shapeoptions-field--shape-sharp { --shapeoptions-radius: 2px; }
.shapeoptions-field--shape-rounded { --shapeoptions-radius: 10px; }

/* === /1. Group & field layout === */

/* === 2. Labels & inputs === */

.shapeoptions-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: var( --shapeoptions-label-gap, 12px );
}

.shapeoptions-field__input {
	max-width: 100%;
}

/* === /2. Labels & inputs === */

/* === 3. Choices — inline, stacked, boxed === */

.shapeoptions-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.25em;
}

.shapeoptions-field__choices--stacked {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.6em;
}

.shapeoptions-field__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
}

/* Native radio/checkbox dot & checkmark follow the site's chosen accent
   color (Style Settings) instead of the browser/OS default blue. Supported
   in all current browsers; older ones just keep their own default color. */
.shapeoptions-field__choice input {
	accent-color: var( --shapeoptions-accent, #2271b1 );
}

.shapeoptions-field__choices--stacked .shapeoptions-field__choice {
	display: flex;
	width: 100%;
}

/* Boxed: bordered option cards (bigger padding, rounded corners) rather
   than a thin inline chip. Selecting one just recolors the (still 1px)
   border, so cards never shift size. Size and shape follow the global
   Style Settings. */
.shapeoptions-field__choices--boxed {
	gap: 0.75em;
	font-size: var( --shapeoptions-choice-font, 1em );
}

.shapeoptions-field__choices--boxed .shapeoptions-field__choice {
	/* Deliberately light/subtle so the selected state (below) reads as a
	   clear step up in contrast, not just a different hue at the same
	   weight. Border width never changes — only color/shadow/background —
	   so a card never shifts size or nudges its neighbors when selected. */
	border: 1px solid #e5e7eb;
	border-radius: var( --shapeoptions-radius, 10px );
	padding: var( --shapeoptions-choice-pad-y, 0.85em ) var( --shapeoptions-choice-pad-x, 1.25em );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.shapeoptions-field__choices--boxed .shapeoptions-field__choice:hover {
	border-color: #9ca3af;
}

.shapeoptions-field__choices--boxed .shapeoptions-field__choice:has( input:checked ),
.shapeoptions-field__choices--boxed .shapeoptions-field__choice--checked {
	border-color: var( --shapeoptions-accent, #111827 );
	background: #f9fafb;
	box-shadow: 0 0 0 1px var( --shapeoptions-accent, #111827 );
}

.shapeoptions-field__choices--boxed .shapeoptions-field__choice:has( input:focus-visible ) {
	outline: 2px solid var( --shapeoptions-accent, #2271b1 );
	outline-offset: 2px;
}

.shapeoptions-field__hint {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 0.25em;
}

/* === /3. Choices — inline, stacked, boxed === */

/* === 4. Hints & validation === */

/* Required-field validation. Shown instead of the browser's native bubble,
   which anchors to the field's real <input> — invisible for boxed choice
   fields that hide it for custom styling (see shapeoptionsValidateField in
   shapeoptions-frontend.js). */
.shapeoptions-field__error {
	display: block;
	margin: 0.4em 0 0;
	font-size: 0.85em;
	font-weight: 600;
	color: #dc2626;
}

.shapeoptions-field--invalid .shapeoptions-field__label {
	color: #dc2626;
}

/* Scoped through .shapeoptions-group for specificity (0,3,0 and up) rather than
   `!important`, for the same reason as the section header below: it has to
   beat a theme's own input border rule, not silence every later one. */
.shapeoptions-group .shapeoptions-field--invalid .shapeoptions-field__choices--boxed .shapeoptions-field__choice,
.shapeoptions-group .shapeoptions-field--invalid .shapeoptions-field__input,
.shapeoptions-group .shapeoptions-field--invalid select,
.shapeoptions-group .shapeoptions-field--invalid textarea {
	border-color: #dc2626;
}

/* === /4. Hints & validation === */

/* === 5. Help-text positions === */

/* Help text position: default markup order is label, input, hint ("below
   field"). "Below label" reflows the same markup with flexbox instead of
   touching every field handler's render order.
   The [hidden] override is required: add-ons hide fields by setting the
   `hidden` attribute, and without it this rule's
   `display: flex` — equal specificity to the browser's own
   `[hidden]{display:none}`, declared later in our stylesheet — would win and
   keep every hidden field visibly showing. */
.shapeoptions-field--help-below-label {
	display: flex;
	flex-direction: column;
}

.shapeoptions-field--help-below-label[hidden] {
	display: none;
}

.shapeoptions-field--help-below-label .shapeoptions-field__label {
	order: 0;
}

.shapeoptions-field--help-below-label .shapeoptions-field__hint {
	order: 1;
	margin: 0 0 0.4em;
}

.shapeoptions-field--help-below-label .shapeoptions-field__input,
.shapeoptions-field--help-below-label .shapeoptions-field__choices,
.shapeoptions-field--help-below-label .shapeoptions-field__choice,
.shapeoptions-field--help-below-label > select,
.shapeoptions-field--help-below-label > input,
.shapeoptions-field--help-below-label > textarea {
	order: 2;
}

/* Tooltip: hide the hint text, show it in a title-style bubble on hover/focus
   of a small (?) marker appended next to the label. */
.shapeoptions-field--help-tooltip .shapeoptions-field__hint--tooltip {
	position: relative;
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0 0 0.4em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	font-size: 0.8em;
	vertical-align: middle;
	cursor: help;
}

.shapeoptions-field--help-tooltip .shapeoptions-field__hint--tooltip::before {
	content: "?";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
}

.shapeoptions-field--help-tooltip .shapeoptions-field__hint--tooltip::after {
	content: attr( data-shapeoptions-hint );
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX( -50% ) translateY( -6px );
	background: #1d2327;
	color: #fff;
	font-size: 0.9em;
	white-space: nowrap;
	max-width: 220px;
	white-space: normal;
	padding: 6px 10px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 1;
}

.shapeoptions-field--help-tooltip .shapeoptions-field__hint--tooltip:hover::after,
.shapeoptions-field--help-tooltip .shapeoptions-field__hint--tooltip:focus-visible::after {
	opacity: 1;
}

/* === /5. Help-text positions === */

/* === 6. Separator & range output === */

.shapeoptions-field__separator {
	margin: 1.25em 0;
}

.shapeoptions-field__range-output {
	margin-inline-start: 0.5em;
	font-variant-numeric: tabular-nums;
}

/* === /6. Separator & range output === */

/* === 7. Collapsible section === */

/* Plain <button> elements inherit heavy theme styling (background, padding,
   borders) from selectors like `form button` or `.woocommerce button.button`,
   which out-specificity a bare class. This used to answer that with thirteen
   `!important` declarations; the selector below wins on specificity instead
   (0,3,0 — three classes), which beats `.woocommerce button.button` (0,2,1)
   without taking the property away from anyone downstream who has a good
   reason to restyle it. */
.shapeoptions-group .shapeoptions-field--section .shapeoptions-section {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	background: none;
	color: inherit;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	padding: 0.4em 0;
	font: inherit;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
}

.shapeoptions-section__icon {
	transition: transform 0.15s ease;
}

.shapeoptions-section[aria-expanded="false"] .shapeoptions-section__icon {
	transform: rotate( -90deg );
}

/* === /7. Collapsible section === */

/* === 8. Options total === */

.shapeoptions-total {
	font-weight: 700;
	margin: 0.5em 0 0;
}

.shapeoptions-total[hidden] {
	display: none;
}

/* === /8. Options total === */

/* === 9. Switch / toggle === */
.shapeoptions-field__switch input {
	position: absolute;
	opacity: 0;
}

.shapeoptions-field__switch .shapeoptions-field__switch-track {
	width: 2.4em;
	height: 1.3em;
	border-radius: 1.3em;
	background: #cbd5e1;
	position: relative;
	transition: background 0.15s ease;
	flex: 0 0 auto;
}

.shapeoptions-field__switch .shapeoptions-field__switch-track::after {
	content: "";
	position: absolute;
	inset: 2px auto 2px 2px;
	width: calc( 1.3em - 4px );
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.shapeoptions-field__switch input:checked + .shapeoptions-field__switch-track {
	background: var( --shapeoptions-accent, #16a34a );
}

.shapeoptions-field__switch input:checked + .shapeoptions-field__switch-track::after {
	transform: translateX( 1.1em );
}

.shapeoptions-field__switch input:focus-visible + .shapeoptions-field__switch-track {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* === /9. Switch / toggle === */

/* === 10. Media queries === */

/* Grouped at the foot of the file, as the one place to look for every
   responsive override. Below this width the multi-column field widths
   stop making sense, so every field takes the full row. */
@media ( max-width: 480px ) {
	.shapeoptions-field--w25,
	.shapeoptions-field--w33,
	.shapeoptions-field--w50,
	.shapeoptions-field--w66 {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* === /10. Media queries === */