.ttqb {
	--ttqb-accent: var(--wpex-accent, #3858e9);
	--ttqb-text: var(--wpex-text-1, #000);
	--ttqb-text-muted: var(--wpex-text-3, #616161);
	--ttqb-bg: var(--wpex-surface-1, #fff);
	--ttqb-bg-alt: var(--wpex-surface-2, #f6f6f6);
	--ttqb-bg-strong: var(--wpex-surface-3, #e4e4e4);
	--ttqb-border: var(--wpex-border-main, #dcdcde);
	--ttqb-input-border: var(--wpex-input-border-color, #ddd);
	--ttqb-radius: 12px;
	--ttqb-input-radius: 10px;
	--ttqb-input-height: 40px;
	--ttqb-danger: #d63638;
	--ttqb-focus: 0 0 0 3px color-mix(in srgb, var(--ttqb-accent) 25%, transparent);
	color: var(--ttqb-text);
	font-size: 15px;
	line-height: 1.5;
}

/* Loaded only with the shortcode, so this hides the docs TOC on the builder page. */
.vcex-table-of-contents {
	display: none;
}

.ttqb *,
.ttqb *::before,
.ttqb *::after {
	box-sizing: border-box;
}

.ttqb [hidden] {
	display: none !important;
}

/* Sections */
.ttqb-section {
	padding: 24px;
	margin: 0 0 20px;
	background: var(--ttqb-bg);
	border: 1px solid var(--ttqb-border);
	border-radius: var(--ttqb-radius);
}

.ttqb-section:last-of-type {
	margin-bottom: 0;
}

.ttqb-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 18px;
}

.ttqb .ttqb-section__title {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.ttqb-section__desc {
	margin: -8px 0 16px;
	font-size: 14px;
	color: var(--ttqb-text-muted);
}

.ttqb-section__desc code {
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--ttqb-bg-alt);
	font-size: 13px;
}

.ttqb-section--output .ttqb-section__desc {
	margin: 12px 0 0;
}

/* Grid */
.ttqb-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 560px) {
	.ttqb-grid--2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.ttqb-grid--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Fields */
.ttqb-field {
	display: block;
	margin: 0;
	font-weight: 400;
}

.ttqb-field__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ttqb-text);
}

.ttqb input[type="text"],
.ttqb input[type="number"],
.ttqb select,
.ttqb textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 14px;
	height: var(--ttqb-input-height);
	border: 1px solid var(--ttqb-input-border);
	border-radius: var(--ttqb-input-radius);
	background: var(--ttqb-bg);
	color: var(--ttqb-text);
	font: inherit;
	font-size: 14px;
	line-height: normal;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ttqb input[type="text"]:focus,
.ttqb input[type="number"]:focus,
.ttqb textarea:focus {
	border-color: var(--ttqb-accent);
	box-shadow: var(--ttqb-focus);
}

.ttqb input::placeholder {
	color: var(--ttqb-text-muted);
	opacity: 0.7;
}

.ttqb select {
	padding-right: 36px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23616161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* Clause rows */
.ttqb-rows:empty {
	display: none;
}

.ttqb-row {
	position: relative;
	padding: 18px 48px 18px 18px;
	margin: 0 0 12px;
	border-radius: var(--ttqb-input-radius);
	background: var(--ttqb-bg-alt);
}

.ttqb-row__remove {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ttqb-text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.ttqb-row__remove:hover,
.ttqb-row__remove:focus-visible {
	background: color-mix(in srgb, var(--ttqb-danger) 12%, transparent);
	color: var(--ttqb-danger);
	outline: none;
}

/* Buttons */
.ttqb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	margin: 0;
	border: 1px solid var(--ttqb-text);
	border-radius: 8px;
	background: var(--ttqb-text);
	color: var(--ttqb-bg);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.ttqb-button:hover {
	background: var(--ttqb-accent);
	border-color: var(--ttqb-accent);
	color: #fff;
}

.ttqb-button:focus-visible {
	outline: none;
	box-shadow: var(--ttqb-focus);
}

.ttqb-button--secondary {
	background: transparent;
	border-color: var(--ttqb-border);
	color: var(--ttqb-text);
}

.ttqb-button--secondary:hover {
	background: var(--ttqb-bg-alt);
	border-color: var(--ttqb-border);
	color: var(--ttqb-text);
}

.ttqb-button--secondary::before {
	content: "+";
	margin-right: 6px;
	font-size: 16px;
	line-height: 1;
}

/* Segmented toggle */
.ttqb-toggle {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: var(--ttqb-bg-alt);
	font-size: 13px;
}

.ttqb-toggle label {
	position: relative;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.ttqb-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ttqb-toggle span {
	display: block;
	padding: 5px 14px;
	border-radius: 999px;
	line-height: 1.4;
	color: var(--ttqb-text-muted);
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.ttqb-toggle input:not(:checked):hover + span {
	color: var(--ttqb-text);
}

.ttqb-toggle input:checked + span {
	background: var(--ttqb-bg);
	color: var(--ttqb-text);
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ttqb-toggle input:focus-visible + span {
	box-shadow: var(--ttqb-focus);
}

/* On/off switch */
.ttqb-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	user-select: none;
}

.ttqb-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ttqb-switch__track {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--ttqb-bg-strong);
	transition: background-color 0.2s;
}

.ttqb-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s;
}

.ttqb-switch input:checked + .ttqb-switch__track {
	background: var(--ttqb-accent);
}

.ttqb-switch input:checked + .ttqb-switch__track::after {
	transform: translateX( 18px );
}

.ttqb-switch input:focus-visible + .ttqb-switch__track {
	box-shadow: var(--ttqb-focus);
}

/* Output */
.ttqb textarea.ttqb-output {
	height: auto;
	padding: 14px 16px;
	background: var(--ttqb-bg-alt);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-all;
	resize: vertical;
}

/* Select2 */
.ttqb .select2-container {
	display: block;
	width: 100% !important;
	font-size: 14px;
}

.ttqb .select2-container--default .select2-selection--single {
	height: var(--ttqb-input-height);
	border: 1px solid var(--ttqb-input-border);
	border-radius: var(--ttqb-input-radius);
	background: var(--ttqb-bg);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ttqb .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 36px 0 14px;
	color: var(--ttqb-text);
	line-height: calc( var(--ttqb-input-height) - 2px );
}

.ttqb .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--ttqb-text-muted);
	opacity: 0.7;
}

.ttqb .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	width: 36px;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23616161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.ttqb .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.ttqb .select2-container--default.select2-container--focus .select2-selection--single,
.ttqb .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--ttqb-accent);
	box-shadow: var(--ttqb-focus);
}

.ttqb .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.ttqb .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
	border-radius: var(--ttqb-input-radius);
}

.ttqb-select2-dropdown.select2-dropdown {
	margin-top: 4px;
	border: 1px solid var(--wpex-border-main, #dcdcde);
	border-radius: 10px;
	background: var(--wpex-surface-1, #fff);
	color: var(--wpex-text-1, #000);
	font-size: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ttqb-select2-dropdown.select2-dropdown--above {
	margin-top: -4px;
}

.ttqb-select2-dropdown .select2-search--dropdown {
	padding: 8px;
	border-bottom: 1px solid var(--wpex-border-main, #dcdcde);
}

.ttqb-select2-dropdown .select2-search--dropdown .select2-search__field {
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--wpex-input-border-color, #ddd);
	border-radius: 8px;
	font: inherit;
	outline: none;
}

.ttqb-select2-dropdown .select2-results__options {
	padding: 6px;
	max-height: 260px;
}

.ttqb-select2-dropdown .select2-results__option {
	padding: 7px 10px;
	border-radius: 6px;
}

.ttqb-select2-dropdown .select2-results__group {
	padding: 8px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wpex-text-1, #000);
}

.ttqb-select2-dropdown .select2-results__option[role="group"] {
	padding: 0;
}

.ttqb-select2-dropdown .select2-results__option[role="group"] .select2-results__option {
	padding-left: 10px;
}

.ttqb-select2-dropdown .select2-results__option--highlighted[aria-selected],
.ttqb-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--wpex-accent, #3858e9);
	color: #fff;
}

.ttqb-select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.ttqb-select2-dropdown .select2-results__option--selected:not(.select2-results__option--highlighted) {
	background: var(--wpex-surface-2, #f6f6f6);
}