// Design layer for the FlexOrder React screens (same system as FlexStock): tokens and
// controls on top of the legacy styles in main.scss. Imported last; !important only where
// the legacy rules use it. Scope: .osgsw-ui (the app wrapper and the overlay portal).

$check-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E";
$dash-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E";
$chevron: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E";

.osgsw-ui {
	--osgsw-primary: #005ae0;
	--osgsw-primary-hover: #004bbd;
	--osgsw-primary-soft: #eef4ff;
	--osgsw-ink: #0f172a;
	--osgsw-body: #334155;
	--osgsw-subtle: #64748b;
	--osgsw-line: #e2e8f0;
	--osgsw-line-strong: #cbd5e1;
	--osgsw-bg-soft: #f8fafc;
	--osgsw-success: #16a34a;
	--osgsw-danger: #dc2626;
	--osgsw-ring: 0 0 0 3px rgba(0, 90, 224, 0.22);
	--osgsw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--osgsw-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
	--osgsw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	font-family: var(--osgsw-font);

	// Only keyboard focus draws a ring; mouse clicks leave no outline.
	:focus:not(:focus-visible) {
		outline: 0;
		box-shadow: none;
	}

	:focus-visible {
		outline: 0;
		box-shadow: var(--osgsw-ring);
	}

	// --- Switch -----------------------------------------------------------------------------
	.osgsw-switch {
		position: relative;
		display: inline-flex;
		flex: none;
		width: 40px;
		height: 22px;
		vertical-align: middle;

		.osgsw-switch__input {
			position: absolute;
			inset: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			min-width: 0;
			margin: 0;
			// WordPress core sets opacity on disabled checkboxes; the input must stay invisible.
			opacity: 0;
			cursor: pointer;
			appearance: none;
			border: 0;
			box-shadow: none;

			&::before {
				content: none;
			}

			&:disabled {
				cursor: not-allowed;
			}
		}

		.osgsw-switch__track {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 999px;
			background: var(--osgsw-line-strong);
			transition: background-color 0.2s ease, box-shadow 0.2s ease;
		}

		.osgsw-switch__thumb {
			position: absolute;
			top: 2px;
			left: 2px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
			transition: transform 0.2s ease;
		}

		&:hover .osgsw-switch__track {
			background: #b6c2d1;
		}

		.osgsw-switch__input:checked+.osgsw-switch__track {
			background: var(--osgsw-primary);
		}

		.osgsw-switch__input:checked+.osgsw-switch__track .osgsw-switch__thumb {
			transform: translateX(18px);
		}

		.osgsw-switch__input:focus-visible+.osgsw-switch__track {
			box-shadow: var(--osgsw-ring);
		}

		.osgsw-switch__input:disabled+.osgsw-switch__track,
		&.is-locked .osgsw-switch__track {
			opacity: 0.5;
		}

		&.osgsw-switch--danger .osgsw-switch__input:checked+.osgsw-switch__track {
			background: var(--osgsw-danger);
		}
	}

	// --- Checkbox ---------------------------------------------------------------------------
	input[type='checkbox']:not(.osgsw-switch__input) {
		appearance: none;
		position: relative;
		flex: none;
		width: 18px;
		height: 18px;
		min-width: 18px;
		margin: 0;
		padding: 0;
		border: 1.5px solid var(--osgsw-line-strong);
		border-radius: 5px;
		background: #fff no-repeat center / 12px 12px;
		box-shadow: none;
		vertical-align: middle;
		cursor: pointer;
		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;

		&::before {
			content: none;
			display: none;
		}

		&:hover {
			border-color: var(--osgsw-primary);
		}

		&:checked,
		&:indeterminate {
			border-color: var(--osgsw-primary);
			background-color: var(--osgsw-primary);
			background-image: url($check-icon);
		}

		&:indeterminate {
			background-image: url($dash-icon);
		}

		&:focus-visible {
			box-shadow: var(--osgsw-ring);
		}

		&:disabled,
		&[aria-disabled='true'] {
			opacity: 0.55;
		}
	}

	// --- Radio ------------------------------------------------------------------------------
	input[type='radio'] {
		appearance: none;
		flex: none;
		width: 18px;
		height: 18px;
		min-width: 18px;
		margin: 0;
		padding: 0;
		border: 1.5px solid var(--osgsw-line-strong);
		border-radius: 50%;
		background: #fff;
		box-shadow: none;
		cursor: pointer;
		transition: border-color 0.15s ease, border-width 0.15s ease;

		&::before {
			content: none;
			display: none;
		}

		&:hover {
			border-color: var(--osgsw-primary);
		}

		&:checked {
			border: 5px solid var(--osgsw-primary);
		}

		&:focus-visible {
			box-shadow: var(--osgsw-ring);
		}
	}

	// --- Badges -----------------------------------------------------------------------------
	.ssgs-badge {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin: 0 2px;
		padding: 0 8px;
		border-radius: 6px;
		font-size: 10px;
		font-weight: 600;
		line-height: 22px;
		letter-spacing: 0.01em;
		vertical-align: middle;
		white-space: nowrap;

		&.gray {
			background: #f1f5f9;
			color: var(--osgsw-body);
			font-weight: 500;
		}

		&.green {
			background: #109e5a;
			color: #fff;
		}

		&.purple {
			background: #f3e8ff;
			color: #7e22ce;
			border-radius: 999px;
		}
	}

	.osgsw-pro-badge {
		flex: none;
		margin: 0 0 0 4px;
		font-size: 11px;
		letter-spacing: 0.04em;
	}

	// --- Buttons ----------------------------------------------------------------------------
	.osgsw-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 38px;
		padding: 0 16px;
		border: 1px solid transparent;
		border-radius: 8px;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

		&--primary {
			background: var(--osgsw-primary);
			color: #fff;

			&:hover,
			&:focus {
				background: var(--osgsw-primary-hover);
				color: #fff;
			}
		}

		&--secondary {
			background: #fff;
			border-color: var(--osgsw-line-strong);
			color: var(--osgsw-ink);

			&:hover,
			&:focus {
				border-color: var(--osgsw-primary);
				color: var(--osgsw-primary);
			}
		}

		&[disabled] {
			opacity: 0.75;
			cursor: wait;
		}
	}

	.ssgs-btn {
		border-radius: 8px;
		font-weight: 600;
		transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	}

	.osgsw-btn-busy {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	// --- Spinner, progress ------------------------------------------------------------------
	.osgsw-spinner {
		display: inline-block;
		flex: none;
		width: 16px;
		height: 16px;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: osgsw-spin 0.7s linear infinite;

		&--lg {
			width: 36px;
			height: 36px;
			border-width: 3px;
			border-color: var(--osgsw-primary);
			border-right-color: var(--osgsw-line);
		}
	}

	.osgsw-progress {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin-top: 8px;

		&__track {
			flex: 1;
			height: 8px;
			overflow: hidden;
			border-radius: 999px;
			background: var(--osgsw-line);
		}

		&__bar {
			height: 100%;
			border-radius: inherit;
			background: var(--osgsw-primary);
			transition: width 0.3s ease;
		}

		&__value {
			min-width: 44px;
			color: var(--osgsw-body);
			font-size: 13px;
			font-weight: 600;
			text-align: right;
		}
	}

	// --- Status icon, banner ----------------------------------------------------------------
	.osgsw-status-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 28px;
		height: 28px;
		border-radius: 50%;

		svg {
			width: 16px;
			height: 16px;
		}

		&--success {
			background: #dcfce7;
			color: #16a34a;
		}

		&--error {
			background: #fee2e2;
			color: #dc2626;
		}

		&--warning {
			background: #fef3c7;
			color: #d97706;
		}

		&--info {
			background: #dbeafe;
			color: #2563eb;
		}
	}

	.osgsw-banner {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 16px 20px 0;
		padding: 12px 12px 12px 16px;
		border: 1px solid #c7dafc;
		border-radius: 10px;
		background: var(--osgsw-primary-soft);
		box-shadow: var(--osgsw-shadow-sm);

		p {
			flex: 1;
			margin: 0;
			color: var(--osgsw-ink);
			font-size: 14px;
			line-height: 1.5;
		}

		strong {
			font-weight: 600;
		}

		&--warning {
			border-color: #fde68a;
			background: #fffbeb;
		}

		&__action {
			flex: none;
			color: var(--osgsw-primary);
			font-weight: 600;
			text-decoration: none;
			white-space: nowrap;

			&:hover {
				color: var(--osgsw-primary-hover);
			}
		}

		&__close {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: none;
			width: 28px;
			height: 28px;
			padding: 0;
			border: 0;
			border-radius: 6px;
			background: transparent;
			color: var(--osgsw-subtle);
			font-size: 20px;
			line-height: 1;
			cursor: pointer;

			&:hover {
				background: rgba(15, 23, 42, 0.06);
				color: var(--osgsw-ink);
			}
		}
	}

	// --- Setup: welcome screen --------------------------------------------------------------
	.osgsw-welcome {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 440px;
		padding: 40px 24px 48px;
		text-align: center;

		&__media {
			margin: 0 0 24px;

			img {
				display: block;
				width: min(360px, 80%);
				height: auto;
				margin: 0 auto;
			}
		}

		&__content {
			max-width: 540px;
		}

		&__title {
			margin: 0 0 10px;
			color: var(--osgsw-ink);
			font-size: 22px;
			font-weight: 600;
			line-height: 1.35;
		}

		&__text {
			margin: 0;
			color: var(--osgsw-subtle);
			font-size: 15px;
			line-height: 1.6;
		}

		&__button {
			margin-top: 24px;
		}

		&__link {
			display: block;
			margin-top: 14px;
			color: var(--osgsw-primary);
			font-weight: 500;
			text-decoration: underline;
			text-underline-offset: 3px;
		}
	}

	// --- Setup: steps -----------------------------------------------------------------------
	.osgsw-dropzone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 28px 24px;
		border: 1.5px dashed var(--osgsw-line-strong);
		border-radius: 12px;
		background: var(--osgsw-bg-soft);
		text-align: center;
		cursor: pointer;
		transition: border-color 0.15s ease, background-color 0.15s ease;

		&:hover,
		&.is-dragging {
			border-color: var(--osgsw-primary);
			background: var(--osgsw-primary-soft);
		}

		&__icon {
			margin-bottom: 6px;
			line-height: 0;
		}

		&__title {
			margin: 0;
			color: var(--osgsw-ink);
			font-size: 15px;
		}

		&__hint {
			margin: 0;
			color: var(--osgsw-subtle);
			font-size: 13px;
		}

		&__browse {
			color: var(--osgsw-primary);
			font-weight: 600;
			text-decoration: underline;
		}
	}

	.osgsw-field-message {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin: 10px 0 0;
		font-size: 13px;
		font-weight: 500;

		svg {
			width: 14px;
			height: 14px;
		}

		&--error {
			color: var(--osgsw-danger);
		}

		&--success {
			color: var(--osgsw-success);
		}
	}

	.osgsw-hint-box {
		margin: 16px 0 0;
		padding: 12px 14px;
		border: 1px solid #fde4cc;
		border-radius: 10px;
		background: #fff7ed;
		color: var(--osgsw-body);
		font-size: 13px;
		line-height: 1.6;
		text-align: center;
	}

	.osgsw-consent {
		display: flex;
		margin-top: 28px;
	}

	.osgsw-check-row {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 0;
		color: var(--osgsw-ink);
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}

	.osgsw-field {
		margin-bottom: 24px;

		&__label {
			display: block;
			margin-bottom: 6px;
			font-weight: 600;
		}

		&__help {
			margin: 0 0 10px;
			max-width: none;
			color: var(--osgsw-subtle);
			text-align: left;
		}
	}

	.ssgs-input {
		width: 100%;
		height: 42px;
		padding: 0 12px;
		border: 1px solid var(--osgsw-line-strong);
		border-radius: 8px;
		background: #fff;
		box-shadow: none;
		color: var(--osgsw-ink);
		font-size: 14px;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover {
			border-color: #94a3b8;
		}

		&:focus {
			border-color: var(--osgsw-primary);
			box-shadow: var(--osgsw-ring);
			outline: 0;
		}
	}

	.osgsw-copy-field {
		display: flex;
		gap: 10px;
		max-width: 620px;
		margin: 20px auto;

		.ssgs-input {
			flex: 1;
			background: var(--osgsw-bg-soft);
			cursor: pointer;
		}

		.ssgs-btn {
			height: 42px;
			padding: 0 20px;
		}
	}

	.osgsw-steps {
		margin: 0;
		padding-left: 20px;
		color: var(--osgsw-body);
		line-height: 2;

		li {
			padding-left: 4px;
		}
	}

	.osgsw-serial {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		margin-right: 8px;
		border-radius: 50%;
		background: var(--osgsw-primary);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
	}

	.osgsw-step-controls {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32px;
		padding-top: 20px;
	}

	.osgsw-step-progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4px;
		overflow: hidden;
		border-radius: 999px;
		background: var(--osgsw-line);

		.ssgs-progressbar__percentage {
			height: 100%;
			border-radius: inherit;
			background: var(--osgsw-primary);
			transition: width 0.3s ease;
		}
	}

	.osgsw-finish {
		padding: 32px 0;

		&__media {
			margin: 0 0 20px;

			img {
				width: 80px;
				height: 80px;
			}

			&--lg img {
				width: 100px;
				height: 100px;
			}
		}

		&__title {
			margin: 0 0 10px;
			color: var(--osgsw-ink);
			font-size: 20px;
			font-weight: 600;

			&--success {
				color: #15803d;
				font-size: 24px;
			}
		}

		&__text {
			margin: 0 auto 24px;
			color: var(--osgsw-subtle);
			font-size: 15px;
		}

		&__notice {
			display: inline-flex;
			margin: 0 auto 24px;
			text-align: left;
		}

		&__actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 12px;
		}
	}

	// --- Settings: cards and rows -----------------------------------------------------------
	.osgsw-settings {
		margin: 20px 20px 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;

		.ssgs-dashboard__block {
			margin-bottom: 24px;
			padding: 28px 32px;
			border: 1px solid var(--osgsw-line);
			border-radius: 12px;
			background: #fff;
			box-shadow: var(--osgsw-shadow-sm);

			>.title {
				margin: 0 0 8px;
				padding: 0 0 16px;
				border-bottom: 1px solid var(--osgsw-line);
				color: var(--osgsw-ink);
				font-size: 16px;
				font-weight: 600;
				line-height: 1.4;
			}

			.description p {
				margin: 0;
				color: var(--osgsw-subtle);
				font-size: 13px;
				line-height: 1.6;
			}

			// Rows: switch, title and badge on one line; the rest lines up under the title.
			// Rows are separated by spacing only (no divider lines).
			.form-group {
				margin: 0;
				padding: 14px 0;
				border: 0;

				&:nth-child(2) {
					padding-top: 8px;
				}

				&:last-child {
					padding-bottom: 0;
				}

				>label {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 6px 12px;
					padding-left: 0;
					margin: 0;
					cursor: pointer;
				}

				>.description,
				>.osgsw_description,
				>.osgsw-address-fields {
					margin-left: 52px;
				}

				>.description {
					max-width: none;
					margin-top: 6px;
				}

				>.osgsw_description,
				>.osgsw-address-fields {
					margin-top: 14px;
				}
			}

			.osgsw-separator-row>.description,
			.osgsw-separator-row>.osgsw_description {
				margin-left: 0;
			}

			.label-text {
				color: var(--osgsw-ink);
				font-size: 14px;
				font-weight: 600;
				line-height: 22px;
			}
		}

		.osgsw-promo>label {
			cursor: pointer;
		}

		// Inputs and selects.
		select,
		input[type='text'],
		input[type='number'],
		input[type='date'],
		input[type='search'] {
			height: 40px;
			min-height: 40px;
			padding: 0 12px;
			border: 1px solid var(--osgsw-line-strong);
			border-radius: 8px;
			background-color: #fff;
			box-shadow: none;
			color: var(--osgsw-ink);
			font-family: inherit;
			font-size: 14px;
			line-height: 38px;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;

			&:hover {
				border-color: #94a3b8;
			}

			&:focus {
				border-color: var(--osgsw-primary);
				box-shadow: var(--osgsw-ring);
				outline: 0;
			}

			&:disabled {
				background-color: var(--osgsw-bg-soft);
				color: var(--osgsw-subtle);
				cursor: not-allowed;
			}
		}

		select {
			appearance: none;
			min-width: 220px;
			padding-right: 36px;
			background-image: url($chevron);
			background-repeat: no-repeat;
			background-position: right 10px center;
			background-size: 18px 18px;
			cursor: pointer;
		}
	}

	// Custom dropdown triggers (button styled as a select).
	.osgsw-custom-select {
		height: 40px;
		min-height: 40px;
		padding: 0 10px 0 12px;
		border: 1px solid var(--osgsw-line-strong);
		border-radius: 8px;
		background: #fff;
		color: var(--osgsw-ink);
		font-family: inherit;
		font-size: 14px;
		text-align: left;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover {
			border-color: #94a3b8;
		}

		&.is-open {
			border-color: var(--osgsw-primary);
			box-shadow: var(--osgsw-ring);
		}

		&.is-open .osgsw-chevron {
			transform: rotate(180deg);
		}

		&--sm {
			width: 260px;
			max-width: 100%;
		}
	}

	.osgsw-chevron {
		color: var(--osgsw-subtle);
		transition: transform 0.15s ease;
	}

	.osgsw-select-label {
		margin-bottom: 6px;
		color: var(--osgsw-ink);
		font-size: 13px;
		font-weight: 600;
	}

	.osgsw-dropdown {
		top: calc(100% + 6px);
		margin: 0;
		padding: 6px;
		border: 1px solid var(--osgsw-line);
		border-radius: 10px;
		box-shadow: var(--osgsw-shadow-lg);

		&--sm {
			width: 260px;
			max-width: 100%;
		}

		&--scroll {
			max-height: 240px;
		}
	}

	.osgsw-dropdown__item {
		width: 100%;
		margin: 0;
		padding: 8px 10px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: var(--osgsw-ink);
		font-family: inherit;
		font-size: 14px;
		text-align: left;

		&:hover,
		&:focus-visible,
		&[aria-selected='true'] {
			background: var(--osgsw-primary-soft);
		}

		&[aria-selected='true'] {
			color: var(--osgsw-primary);
			font-weight: 600;
		}

		&--pro {
			opacity: 1;
			color: var(--osgsw-subtle);
		}

		&--check {
			gap: 10px;
		}
	}

	.osgsw-sorting-controls {
		gap: 16px;
	}

	// Filter box, panels, status tags.
	.osgsw-filter-box {
		padding: 16px;
		border-color: var(--osgsw-line);
		border-radius: 10px;
	}

	.osgsw-filter-panel {
		padding: 16px;
		border-color: var(--osgsw-line);
		border-radius: 10px;
		background: var(--osgsw-bg-soft);

		&__close {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			top: 10px;
			right: 10px;
			border-radius: 6px;

			&:hover {
				background: #fef2f2;
				color: var(--osgsw-danger);
			}
		}
	}

	.osgsw-status-tag {
		gap: 2px;
		padding: 0 4px 0 10px;
		border-radius: 6px;
		background: #eef2f7;
		color: var(--osgsw-ink);
		font-size: 13px;
		font-weight: 500;
		line-height: 28px;

		&__remove {
			width: 20px;
			height: 20px;
			justify-content: center;
			border-radius: 4px;
			color: var(--osgsw-subtle);
			opacity: 1;

			&:hover {
				background: var(--osgsw-line);
				color: var(--osgsw-danger);
			}
		}
	}

	.osgsw-radio-group {
		gap: 10px;
		flex-wrap: wrap;
	}

	.osgsw-radio-label {
		gap: 10px;
		padding: 8px 14px 8px 12px;
		border: 1px solid var(--osgsw-line);
		border-radius: 8px;
		background: #fff;
		color: var(--osgsw-ink);
		font-weight: 500;
		transition: border-color 0.15s ease, background-color 0.15s ease;

		&:hover {
			border-color: var(--osgsw-line-strong);
		}

		&:has(input:checked) {
			border-color: #c7dafc;
			background: var(--osgsw-primary-soft);
		}
	}

	.osgsw-date-row {
		gap: 12px;
		padding-left: 0;
		color: var(--osgsw-body);
	}

	.osgsw-date-label {
		gap: 8px;
		padding-left: 0;
		color: var(--osgsw-body);
		font-weight: 500;
	}

	.osgsw-number-input {
		width: 96px;
	}

	// Address sub-fields: a plain vertical checklist under the row's description.
	.osgsw-address-fields {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.osgsw-fields-grid {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	label.osgsw-field-item {
		gap: 10px;
		padding-left: 0;
		color: var(--osgsw-ink);
		font-size: 14px;

		&--pro span:first-of-type {
			color: var(--osgsw-subtle);
		}
	}

	// Custom field picker.
	.osgsw-cf-select {
		width: 100%;
		max-width: 640px;
	}

	.osgsw-cf-select__input-area {
		min-height: 42px;
		padding: 5px 8px;
		border-color: var(--osgsw-line-strong);
		border-radius: 8px;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover {
			border-color: #94a3b8;
		}

		&:focus-within {
			border-color: var(--osgsw-primary);
			box-shadow: var(--osgsw-ring);
		}
	}

	// Beats the settings-wide input[type='text'] rule, which gave the search box its own border.
	.osgsw-settings input[type='text'].osgsw-cf-select__search,
	.osgsw-cf-select__search {
		flex: 1 1 160px;
		min-width: 120px;
		height: 30px;
		min-height: 0;
		padding: 0 4px;
		border: 0;
		box-shadow: none;
		background: transparent;
		font-size: 14px;
	}

	.osgsw-cf-select__tag {
		gap: 2px;
		padding: 0 4px 0 10px;
		border-radius: 6px;
		background: #eef2f7;
		color: var(--osgsw-ink);
		font-size: 13px;
		line-height: 28px;
	}

	.osgsw-cf-select__tag-remove {
		justify-content: center;
		width: 20px;
		height: 20px;
		border-radius: 4px;
		color: var(--osgsw-subtle);

		&:hover {
			background: var(--osgsw-line);
			color: var(--osgsw-danger);
		}
	}

	// Opens upward when there isn't room below (e.g. above the sticky save bar).
	.osgsw-cf-select.is-above .osgsw-cf-select__dropdown {
		top: auto;
		bottom: calc(100% + 6px);
	}

	.osgsw-cf-select__dropdown {
		top: calc(100% + 6px);
		margin: 0;
		padding: 6px;
		border: 1px solid var(--osgsw-line);
		border-radius: 10px;
		box-shadow: var(--osgsw-shadow-lg);
		list-style: none;
	}

	.osgsw-cf-select__option {
		margin: 0;
		padding: 8px 10px;
		border-bottom: 0;
		border-radius: 6px;
		font-size: 13px;

		&:hover,
		&.is-active {
			background: var(--osgsw-primary-soft);
			color: var(--osgsw-primary);
		}
	}

	.osgsw-cf-select__empty {
		margin: 0;
	}

	.osgsw-cf-count {
		margin: 8px 0 0;
		color: var(--osgsw-subtle);
		font-size: 12px;
		font-weight: 400;
	}

	// Save bar.
	// Width auto + border-box: a legacy width: 100% plus the side margins made the page scroll sideways.
	.ssgsw_button_container {
		z-index: 10;
		display: flex;
		gap: 10px;
		width: auto;
		max-width: none;
		box-sizing: border-box;
		margin: 0 20px;
		padding: 16px 20px;
		border: 1px solid var(--osgsw-line);
		border-radius: 12px;
		box-shadow: var(--osgsw-shadow-lg);
	}

	.ssgsw_save_button,
	.ssgsw_save_close {
		display: inline-flex;
		align-items: center;
		height: 40px;
		margin: 0;
		padding: 0 18px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
	}

	.ssgsw_save_button:hover:not(:disabled) {
		background-color: var(--osgsw-primary-hover);
	}

	.ssgsw_save_close {
		border-color: var(--osgsw-line-strong);
		color: var(--osgsw-ink);

		&:hover:not(:disabled) {
			border-color: var(--osgsw-primary);
			color: var(--osgsw-primary);
		}
	}

	// --- Modals (Modal.jsx keeps the legacy popup classes) ----------------------------------
	.ssgs_popup-container {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background: rgba(15, 23, 42, 0.45);
	}

	.ssgs_popup-content {
		position: relative;
		width: min(480px, 92vw);
		padding: 28px;
		border: 0;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
		color: var(--osgsw-ink);
		text-align: left;

		.ssgs_close_button {
			position: absolute;
			top: 14px;
			right: 14px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			padding: 0;
			border: 0;
			border-radius: 8px;
			background: transparent;
			color: var(--osgsw-subtle);
			font-size: 22px;
			line-height: 1;
			cursor: pointer;

			&:hover {
				background: #f1f5f9;
				color: var(--osgsw-ink);
			}
		}

		.profile-section {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			margin: 0;
			padding-right: 28px;
		}

		.profile-image {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: none;
			width: 40px;
			height: 40px;
			margin: 0;
			padding: 0;
			border-radius: 50%;
			background: #fee2e2;

			.dashicons {
				width: 22px;
				height: 22px;
				margin: 0;
				color: var(--osgsw-danger);
				font-size: 22px;
			}
		}

		.profile-title {
			margin: 0 0 6px;
			color: var(--osgsw-ink);
			font-size: 17px;
			font-weight: 600;
			line-height: 1.4;
		}

		.profile-description {
			margin: 0;
			color: var(--osgsw-subtle);
			font-size: 14px;
			line-height: 1.6;
		}

		.ssgs_first_section {
			margin-top: 24px;
		}

		.ssgs_button_section {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: 10px;
		}

		.ssgs_button_section button {
			height: 38px;
			margin: 0;
			padding: 0 16px;
			border: 1px solid var(--osgsw-line-strong);
			border-radius: 8px;
			background: #fff;
			color: var(--osgsw-ink);
			font-family: inherit;
			font-size: 14px;
			font-weight: 600;
			line-height: 1;
			cursor: pointer;
			transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

			&:hover {
				border-color: var(--osgsw-primary);
				color: var(--osgsw-primary);
			}
		}

		.ssgs_button_section .osgsw-modal-primary {
			border-color: var(--osgsw-primary);
			background: var(--osgsw-primary);
			color: #fff;

			&:hover {
				background: var(--osgsw-primary-hover);
				color: #fff;
			}
		}

		.ssgs_button_section .ssgsw_save_changes:not(.ssgsw_save_changes23) {
			border-color: var(--osgsw-danger);
			background: var(--osgsw-danger);
			color: #fff;

			&:hover {
				background: #b91c1c;
				color: #fff;
			}
		}

		.ssgs_button_section .ssgsw_save_changes23 {
			border-color: #fecaca;
			color: var(--osgsw-danger);

			&:hover {
				background: #fef2f2;
			}
		}
	}

	// --- Toasts and dialogs (rendered in the portal) ----------------------------------------
	.osgsw-toasts {
		position: fixed;
		top: 46px;
		right: 20px;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: min(380px, calc(100vw - 32px));
	}

	.osgsw-toast {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 280px;
		padding: 12px 12px 12px 14px;
		border: 1px solid var(--osgsw-line);
		border-radius: 10px;
		background: #fff;
		box-shadow: var(--osgsw-shadow-lg);
		color: var(--osgsw-ink);
		animation: osgsw-toast-in 0.2s ease-out;

		&__body {
			flex: 1;
			min-width: 0;

			strong {
				display: block;
				font-size: 14px;
				font-weight: 600;
				line-height: 20px;
			}

			p {
				margin: 2px 0 0;
				color: var(--osgsw-subtle);
				font-size: 13px;
			}
		}

		&__close {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: none;
			width: 28px;
			height: 28px;
			padding: 0;
			border: 0;
			border-radius: 6px;
			background: transparent;
			color: var(--osgsw-subtle);
			font-size: 20px;
			line-height: 1;
			cursor: pointer;

			&:hover {
				background: #f1f5f9;
				color: var(--osgsw-ink);
			}
		}
	}

	.osgsw-dialog-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background: rgba(15, 23, 42, 0.45);
	}

	.osgsw-dialog {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: min(440px, 100%);
		padding: 28px 28px 24px;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
		box-sizing: border-box;
		color: var(--osgsw-ink);
		text-align: center;

		.osgsw-dialog__icon {
			width: 44px;
			height: 44px;

			svg {
				width: 22px;
				height: 22px;
			}
		}

		h2 {
			margin: 14px 0 6px;
			color: var(--osgsw-ink);
			font-size: 17px;
			font-weight: 600;
			line-height: 1.4;
		}

		p {
			margin: 0 0 18px;
			color: var(--osgsw-subtle);
			font-size: 14px;
		}

		&__text {
			margin: 4px 0 0;
		}

		&__hint {
			margin: 12px 0 0;
			font-size: 13px;
		}

		&--progress h2 {
			margin-top: 16px;
		}
	}

	// --- Phones -----------------------------------------------------------------------------
	@media only screen and (max-width: 782px) {
		.osgsw-settings {
			margin: 16px 0 0;

			.ssgs-dashboard__block {
				padding: 20px 16px;

				.form-group {

					>.description,
					>.osgsw_description,
					>.osgsw-address-fields {
						margin-left: 0;
					}
				}
			}

			select {
				width: 100%;
				min-width: 0;
			}
		}

		.osgsw-select-wrap,
		.osgsw-custom-select--sm,
		.osgsw-dropdown--sm {
			width: 100%;
		}

		.osgsw-banner {
			flex-wrap: wrap;
			margin: 16px 0 0;
		}

		.ssgsw_button_container {
			margin: 0;
		}

		.osgsw-copy-field {
			flex-direction: column;
		}

		.osgsw-welcome {
			min-height: 0;
			padding: 32px 16px 40px;
		}
	}

	@media only screen and (max-width: 575px) {
		.osgsw-toasts {
			left: 16px;
			right: 16px;
			max-width: none;
		}

		.osgsw-toast {
			min-width: 0;
		}

		.osgsw-dialog-backdrop,
		.ssgs_popup-container {
			align-items: flex-end;
			padding: 0;
		}

		.osgsw-dialog,
		.ssgs_popup-content {
			width: 100%;
			border-radius: 16px 16px 0 0;
		}

		.ssgsw_button_container {
			flex-direction: column;

			button {
				justify-content: center;
				width: 100%;
			}
		}
	}

	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms;
			animation-iteration-count: 1;
			transition-duration: 0.01ms;
		}
	}
}

@keyframes osgsw-toast-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}