// Design layer for the React screens: one set of tokens and controls on top of the legacy
// base styles. Loaded last; !important only where the legacy CSS uses it.

$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";

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

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

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

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

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

			&::before {
				content: none !important;
			}

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

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

		&__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 .ssgsw-switch__track {
			background: #b6c2d1;
		}

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

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

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

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

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

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

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

		&:hover {
			border-color: var(--ssgsw-primary) !important;
		}

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

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

		&:focus-visible {
			box-shadow: var(--ssgsw-ring) !important;
			outline: 0;
		}

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

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

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

		&:hover {
			border-color: var(--ssgsw-primary) !important;
		}

		&:checked {
			border: 5px solid var(--ssgsw-primary) !important;
		}

		&:focus-visible {
			box-shadow: var(--ssgsw-ring) !important;
			outline: 0;
		}

		&[aria-disabled='true'] {
			background: var(--ssgsw-bg-soft) !important;
			border-color: var(--ssgsw-line) !important;
			cursor: pointer;
		}
	}

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

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

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

		&.aliceblue {
			background: var(--ssgsw-primary-soft);
			color: var(--ssgsw-ink);
		}
	}

	.ssgsw-badge-new {
		background: #dcfce7 !important;
		color: #15803d !important;
		border-radius: 999px;
	}

	.ssgsw-badge-beta {
		background: #fef3c7 !important;
		color: #b45309 !important;
		border-radius: 999px;
	}

	// Always-on rows (Sync SKU): normal text, switch shown on but not clickable.
	.ssgsw-settings .ssgsw-row-locked {
		opacity: 1 !important;

		> label {
			cursor: default !important;
		}

		.ssgsw-switch__input:disabled + .ssgsw-switch__track {
			opacity: 0.55;
		}
	}

	.ssgsw-settings .ssgs-dashboard__block h3 {
		color: var(--ssgsw-ink);
		font-size: 15px;
		font-weight: 600;
	}

	// --- Buttons ----------------------------------------------------------------------------
	.ssgsw-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;

		&__icon {
			width: 16px;
			height: 16px;
		}

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

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

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

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

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

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

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

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

	// --- Settings: section cards and rows ---------------------------------------------------
	.ssgsw-settings {
		margin-top: 20px;
		padding: 0 !important;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

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

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

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

		// Switch rows: switch, title and badges on one line; the rest lines up under the title.
		.form-group {
			margin: 0;
			padding: 20px 0;
			border-top: 1px solid var(--ssgsw-line);

			&:first-of-type {
				border-top: 0;
				padding-top: 0;
			}

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

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

				.ssgsw-switch {
					position: relative;
				}

				.ssgs-badge {
					margin: 0;
				}
			}

			> .description,
			> .ssgsw_description,
			> .ssgsw-product-images-options,
			> .ssgsw-separate-attributes,
			> .ssgsw_attributes_wrap,
			> .ssgsw-notice-info {
				margin-left: 52px !important;
			}

			> .description {
				margin-top: 6px !important;
				margin-bottom: 0 !important;
			}
		}

		.form-group + .form-group {
			margin-top: 0;
		}

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

	// --- Sync mode cards and direction options ----------------------------------------------
	.sync-modes {
		.entry-title {
			margin-bottom: 16px;

			.title {
				color: var(--ssgsw-ink);
				font-size: 15px;
				font-weight: 600;
			}

			.description {
				color: var(--ssgsw-subtle);
				font-size: 13px;
			}
		}

		&__grid {
			display: grid !important;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			gap: 16px;
			max-width: 760px;
		}

		&__card {
			width: auto !important;
			gap: 12px !important;
			padding: 20px !important;
			border: 1px solid var(--ssgsw-line) !important;
			border-radius: 12px !important;
			background: #fff !important;
			box-shadow: none !important;
			transition: border-color 0.15s ease, background-color 0.15s ease;

			&:hover {
				border-color: var(--ssgsw-line-strong) !important;
			}

			&:has(input:focus-visible) {
				box-shadow: var(--ssgsw-ring) !important;
			}

			.icon svg {
				width: 26px;
				height: 26px;

				path {
					stroke: var(--ssgsw-subtle);
				}
			}

			.text .title {
				color: var(--ssgsw-ink);
				font-size: 15px;
			}

			.text p {
				color: var(--ssgsw-subtle);
				font-size: 13px;
				line-height: 1.55;
			}

			.check-mark {
				border-color: var(--ssgsw-primary) !important;
				background-color: var(--ssgsw-primary) !important;
			}

			&.active {
				background: var(--ssgsw-primary-soft) !important;

				.icon svg path {
					stroke: var(--ssgsw-primary) !important;
				}
			}
		}

		.sync-modes__direction {
			margin-top: 36px;
		}

		.radio-group {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 760px;
			padding: 0 !important;
			background: transparent !important;

			.radio-label {
				display: block;
				margin: 0 !important;
				padding: 14px 16px 14px 46px !important;
				border: 1px solid var(--ssgsw-line);
				border-radius: 10px;
				background: #fff;
				cursor: pointer;
				transition: border-color 0.15s ease, background-color 0.15s ease;

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

				&:has(input:checked) {
					background: var(--ssgsw-primary-soft);
				}

				input[type='radio'] {
					position: absolute;
					top: 17px;
					left: 16px;
				}

				.radio-text {
					color: var(--ssgsw-ink);
					font-size: 14px;
					font-weight: 600;
				}

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

				&.ssgsw-ultimate {
					.radio-text,
					p {
						opacity: 0.6;
					}
				}
			}
		}

		&__scheduled {
			margin-top: 36px;
		}
	}

	// --- Inputs and selects in settings -----------------------------------------------------
	.ssgsw-settings select,
	.ssgsw-settings input[type='text'],
	.ssgsw-settings input[type='number'],
	.ssgsw-settings input[type='search'] {
		height: 40px !important;
		min-height: 40px;
		padding: 0 12px !important;
		border: 1px solid var(--ssgsw-line-strong) !important;
		border-radius: 8px !important;
		background-color: #fff !important;
		box-shadow: none !important;
		color: var(--ssgsw-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 !important;
		}

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

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

	.ssgsw-settings select {
		appearance: none;
		padding-right: 36px !important;
		background-image: url($chevron) !important;
		background-repeat: no-repeat !important;
		background-position: right 10px center !important;
		background-size: 18px 18px !important;
		cursor: pointer;
	}

	// Filter builder.
	.ssgsw-filter-builder {
		margin-top: 0;

		.filter-row1 {
			margin-bottom: 6px;
			color: var(--ssgsw-ink);
			font-size: 13px;
			font-weight: 600;
		}

		.filter-row {
			margin-bottom: 10px;
		}

		.remove-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			padding: 0;
			border: 1px solid transparent;
			border-radius: 8px;
			background: transparent;
			color: var(--ssgsw-subtle);
			font-size: 18px;

			&:hover:not(:disabled) {
				border-color: #fecaca;
				background: #fef2f2;
				color: var(--ssgsw-danger);
			}
		}

		.ssgsw_add_filter_button {
			height: 36px;
			margin-top: 4px;
			padding: 0 14px;
			border: 1px dashed var(--ssgsw-line-strong);
			border-radius: 8px;
			background: #fff;
			color: var(--ssgsw-primary);
			font-weight: 600;
			transition: border-color 0.15s ease, background-color 0.15s ease;

			&:hover:not(:disabled) {
				border-color: var(--ssgsw-primary);
				background: var(--ssgsw-primary-soft);
			}

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

	// Gallery column count: label sits flush with its select.
	.ssgsw-gallery-column-count {
		label {
			padding-left: 0 !important;
			margin-bottom: 6px;
			font-size: 13px;
		}

		select {
			width: 96px !important;
			min-width: 96px;
		}

		p {
			font-size: 12px !important;
		}
	}

	.ssgsw-product-images-options {
		background: var(--ssgsw-bg-soft);
		border-color: var(--ssgsw-line);
		border-radius: 10px;
	}

	.ssgsw-notice-info {
		border-radius: 8px;
		border-color: #c7dafc;
		background: var(--ssgsw-primary-soft);
		color: #1e3a8a;
	}

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

	.ssgsw-field-select__control {
		min-height: 42px;
		padding: 5px 8px;
		gap: 6px;
		border: 1px solid var(--ssgsw-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(--ssgsw-primary);
			box-shadow: var(--ssgsw-ring);
		}


	}

	// Beats the generic settings input rule above.
	.ssgsw-settings .ssgsw-field-select__control input[type='text'] {
		flex: 1 1 160px;
		height: 30px !important;
		min-height: 0;
		padding: 0 4px !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

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

		button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			padding: 0;
			border-radius: 4px;
			color: var(--ssgsw-subtle);

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

	.ssgsw-field-select__list {
		margin-top: 6px;
		padding: 6px;
		border: 1px solid var(--ssgsw-line);
		border-radius: 10px;
		box-shadow: var(--ssgsw-shadow-lg);
	}

	.ssgsw-field-select__option,
	.ssgsw-field-select__empty {
		padding: 8px 10px;
		border-radius: 6px;
		font-size: 13px;
	}

	.ssgsw-field-select__option.is-active {
		background: var(--ssgsw-primary-soft);
		color: var(--ssgsw-primary);
	}

	.ssgsw-field-select__option.is-disabled.is-active {
		background: var(--ssgsw-bg-soft);
		color: var(--ssgsw-subtle);
	}

	.ssgsw-field-select__hint {
		margin: 8px 0 0;
		color: var(--ssgsw-subtle);
		font-size: 12px;
	}

	// --- Modals (Modal.jsx keeps the legacy popup classes) ----------------------------------
	.ssgs_popup-container {
		background: rgba(15, 23, 42, 0.45) !important;
	}

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

		.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 !important;
			border-radius: 8px;
			background: transparent !important;
			color: var(--ssgsw-subtle);
			font-size: 22px;
			line-height: 1;
			cursor: pointer;

			&:hover {
				background: #f1f5f9 !important;
				color: var(--ssgsw-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 !important;
			height: 40px !important;
			min-width: 0 !important;
			margin: 0 !important;
			padding: 0 !important;
			border-radius: 50%;
			background: #fee2e2 !important;

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

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

		.profile-description,
		.ssgsw_extra_class,
		.profile-details p {
			margin: 0 !important;
			color: var(--ssgsw-subtle);
			font-size: 14px !important;
			line-height: 1.6;
		}

		.ssgs_first_section {
			margin-top: 24px;
		}

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

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

			&:hover {
				border-color: var(--ssgsw-primary) !important;
				color: var(--ssgsw-primary) !important;
			}
		}

		.ssgs_button_section .ssgsw-react-primary-button,
		.osgs_button_section .ssgsw_dismiss_notice,
		.osgs_button_section .ssgsw-react-primary-button {
			border-color: var(--ssgsw-primary) !important;
			background: var(--ssgsw-primary) !important;
			color: #fff !important;

			&:hover {
				background: var(--ssgsw-primary-hover) !important;
				color: #fff !important;
			}
		}

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

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

		.ssgs_button_section .ssgsw_save_changes23 {
			border-color: #fecaca !important;
			color: var(--ssgsw-danger) !important;

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

	// --- Save bar ---------------------------------------------------------------------------
	.ssgsw_button_container {
		border-radius: 12px;
		box-shadow: var(--ssgsw-shadow-lg);

		button {
			border-radius: 8px !important;
			font-weight: 600;
		}
	}

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

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

	.ssgsw-banner {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 16px 20px 0 0;
		padding: 12px 16px;
		border: 1px solid #fde68a;
		border-radius: 10px;
		background: #fffbeb;

		p {
			flex: 1;
			margin: 0;
			color: var(--ssgsw-ink);
			font-weight: 500;
		}

		&__action {
			color: #b45309;
			font-weight: 600;
			text-decoration: none;

			&:hover {
				color: #92400e;
			}
		}
	}

	// --- Status icon (toasts, dialogs, banners) ---------------------------------------------
	.ssgsw-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;
		}
	}

	// --- Add-ons page -----------------------------------------------------------------------
	.ssgsw-addons {
		max-width: 1080px;
		padding: 24px 20px 40px 0;

		&__header {
			h1 {
				margin: 0 0 6px;
				padding: 0;
				color: var(--ssgsw-ink);
				font-size: 24px;
				font-weight: 600;
				line-height: 1.3;
			}

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

		&__grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 20px;
			margin-top: 24px;
		}
	}

	.ssgsw-addon {
		display: flex;
		flex-direction: column;
		padding: 24px;
		border: 1px solid var(--ssgsw-line);
		border-radius: 12px;
		background: #fff;
		box-shadow: var(--ssgsw-shadow-sm);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;

		&:hover {
			border-color: var(--ssgsw-line-strong);
			box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
		}

		&__head {
			display: flex;
			align-items: center;
			gap: 14px;
		}

		&__icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: none;
			width: 52px;
			height: 52px;
			border: 1px solid var(--ssgsw-line);
			border-radius: 12px;
			background: var(--ssgsw-bg-soft);

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

		&__title {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 6px;

			h2 {
				margin: 0;
				padding: 0;
				color: var(--ssgsw-ink);
				font-size: 16px;
				font-weight: 600;
				line-height: 1.3;
			}
		}

		&__text {
			flex: 1;
			margin: 16px 0 20px;
			color: var(--ssgsw-body);
			font-size: 14px;
			line-height: 1.6;
		}

		&__actions {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			padding-top: 16px;
			border-top: 1px solid var(--ssgsw-line);
		}
	}

	.ssgsw-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 0 8px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 600;
		line-height: 20px;

		&__dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: currentColor;
		}

		&--success {
			background: #dcfce7;
			color: #15803d;
		}

		&--neutral {
			background: #f1f5f9;
			color: #475569;
		}

		&--muted {
			background: var(--ssgsw-bg-soft);
			border: 1px solid var(--ssgsw-line);
			color: var(--ssgsw-subtle);
		}
	}

	@media only screen and (max-width: 782px) {
		.ssgsw-settings .ssgs-dashboard__block {
			padding: 20px 16px !important;

			.form-group {
				> .description,
				> .ssgsw_description,
				> .ssgsw-product-images-options,
				> .ssgsw-separate-attributes,
				> .ssgsw_attributes_wrap,
				> .ssgsw-notice-info {
					margin-left: 0 !important;
				}
			}
		}

		.ssgsw-addons {
			padding-right: 0;
		}

		.ssgsw-banner {
			margin-right: 0;
		}
	}

	@media only screen and (max-width: 480px) {
		.ssgsw-addons__grid {
			grid-template-columns: 1fr;
		}
	}
}

@keyframes ssgsw-spin {
	to {
		transform: rotate(360deg);
	}
}