/* Utilities: Graphics & Codes — shared front-end styling for all three
 * shortcode widgets. Kept in one file (rather than per-tool) since the
 * three tools share the same visual language (tabs/mode-switcher, form
 * rows, swatches, buttons). */

.util-graphics-widget {
	box-sizing: border-box;
	max-width: 640px;
	margin: 1.5em 0;
	padding: 1.25em 1.5em 1.5em;
	border: 1px solid #d8dcdf;
	border-radius: 8px;
	background: #fafbfc;
	font-size: 15px;
	line-height: 1.5;
}

.util-graphics-widget *,
.util-graphics-widget *::before,
.util-graphics-widget *::after {
	box-sizing: border-box;
}

.util-graphics-widget h3 {
	margin: 0 0 .75em;
	font-size: 1.05em;
}

/* Mode / tab switcher shared by the color-tools widget */
.ug-mode-switcher {
	display: flex;
	gap: .4em;
	margin-bottom: 1em;
	flex-wrap: wrap;
}

.ug-mode-btn {
	padding: .45em .9em;
	border: 1px solid #c9ced2;
	border-radius: 20px;
	background: #fff;
	cursor: pointer;
	font-size: .92em;
}

.ug-mode-btn.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.ug-panel {
	display: none;
}

.ug-panel.is-active {
	display: block;
}

/* Form rows */
.ug-row {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-bottom: .75em;
	flex-wrap: wrap;
}

.ug-row label {
	min-width: 120px;
	font-weight: 600;
	font-size: .9em;
}

.ug-row input[type="text"],
.ug-row input[type="url"],
.ug-row input[type="tel"],
.ug-row input[type="email"],
.ug-row input[type="number"],
.ug-row select,
.ug-row textarea {
	flex: 1 1 180px;
	padding: .45em .6em;
	border: 1px solid #c9ced2;
	border-radius: 4px;
	font-size: .95em;
	min-width: 0;
}

.ug-row textarea {
	min-height: 4em;
	resize: vertical;
}

.ug-row input[type="color"] {
	width: 46px;
	height: 34px;
	padding: 2px;
	border: 1px solid #c9ced2;
	border-radius: 4px;
	cursor: pointer;
}

.ug-row input[type="range"] {
	flex: 1 1 180px;
}

/* Repeatable field groups (phones/emails) */
.ug-repeatable-list {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin-bottom: .5em;
}

.ug-repeatable-item {
	display: flex;
	gap: .5em;
	align-items: center;
	flex-wrap: wrap;
}

.ug-repeatable-item input {
	flex: 1 1 140px;
}

.ug-repeatable-item select {
	flex: 0 0 110px;
}

.ug-icon-btn {
	background: #fff;
	border: 1px solid #c9ced2;
	border-radius: 4px;
	width: 32px;
	height: 32px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}

.ug-icon-btn:hover {
	background: #f0f0f1;
}

.ug-btn {
	display: inline-block;
	padding: .55em 1.1em;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	cursor: pointer;
	font-size: .92em;
	text-decoration: none;
}

.ug-btn:hover {
	background: #175a8c;
	border-color: #175a8c;
	color: #fff;
}

.ug-btn.ug-btn-secondary {
	background: #fff;
	color: #2271b1;
}

.ug-btn.ug-btn-secondary:hover {
	background: #f0f6fb;
}

.ug-btn-row {
	display: flex;
	gap: .6em;
	flex-wrap: wrap;
	margin-top: .75em;
}

/* Color swatch + value readouts (picker/preview mode) */
.ug-swatch {
	width: 100%;
	height: 90px;
	border-radius: 6px;
	border: 1px solid #c9ced2;
	margin-bottom: .9em;
}

.ug-value-row {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: .5em;
}

.ug-value-row code {
	flex: 1;
	padding: .4em .6em;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
	font-size: .92em;
}

.ug-copy-btn {
	flex: 0 0 auto;
	padding: .35em .7em;
	border: 1px solid #c9ced2;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: .85em;
}

.ug-copy-btn.copied {
	background: #d7f5dc;
	border-color: #7fc98f;
}

/* Average-mode dynamic color-input list */
.ug-average-inputs {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin-bottom: .75em;
}

.ug-average-row {
	display: flex;
	align-items: center;
	gap: .6em;
}

.ug-note {
	font-size: .85em;
	color: #646970;
	margin-top: .5em;
}

/* QR generator preview + controls */
.ug-qr-layout {
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap;
}

.ug-qr-controls {
	flex: 1 1 260px;
	min-width: 240px;
}

.ug-qr-preview-col {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75em;
}

.ug-qr-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #d8dcdf;
	border-radius: 6px;
	padding: .75em;
	min-height: 120px;
	min-width: 120px;
}

.ug-qr-preview canvas,
.ug-qr-preview svg,
.ug-qr-preview img {
	max-width: 100%;
	height: auto;
}

.ug-logo-preview {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-top: .4em;
}

.ug-logo-preview img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border: 1px solid #c9ced2;
	border-radius: 4px;
	background: #fff;
}

.ug-field-group {
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	padding: .8em .9em;
	margin-bottom: .9em;
	background: #fff;
}

.ug-field-group > legend {
	font-weight: 600;
	font-size: .9em;
	padding: 0 .4em;
}

.ug-handoff-msg {
	margin-top: .75em;
	padding: .6em .8em;
	border-radius: 4px;
	font-size: .88em;
	background: #eaf2fb;
	border: 1px solid #b9d6ef;
	color: #1d4b73;
}

.ug-handoff-msg.is-success {
	background: #e7f6ea;
	border-color: #a9dab5;
	color: #245c33;
}

.ug-inline-toggle {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: 1em;
	font-weight: 600;
	font-size: .92em;
}

@media (max-width: 480px) {
	.util-graphics-widget {
		padding: 1em;
	}

	.ug-row label {
		min-width: 0;
		flex-basis: 100%;
	}
}