// Settings tab: inline styles from the removed templates/dashboard/settings.php as classes, plus the
// responsive fixes from react-conver.md §22.4–22.5.

.ssgsw-react {
	.ssgsw-fieldset {
		border: 0;
		margin: 0;
		padding: 0;
		min-width: 0;

		> legend:not(.screen-reader-text) {
			padding: 0;
			width: 100%;
			float: left;

			+ * {
				clear: both;
			}
		}
	}

	// Sync mode cards are labels around a visually hidden radio.
	.sync-modes__card {
		cursor: pointer;
	}

	.radio-label[aria-disabled='true'],
	.radio-label.ssgsw-promo {
		cursor: pointer;
	}

	.radio-label .ssgs-badge.purple {
		margin-left: 6px;
	}

	.ssgsw-badge-new {
		background-color: #10b981;
		color: #fff;
		margin-left: 5px;
	}

	.ssgsw-badge-beta {
		background-color: #a52a2a;
	}

	.ssgsw-text-danger {
		color: #a52a2a;
	}

	.ssgsw-row-locked {
		opacity: 0.6;

		label,
		input {
			cursor: not-allowed;
		}
	}

	// Separate attributes + attribute picker.
	.ssgsw-separate-attributes {
		margin-top: -10px;

		.description p {
			margin: 0;
			color: #64748b;
			font-size: 13px;
		}
	}

	.ssgsw-plain-check {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 0;
		margin-bottom: 5px;

		input {
			width: 18px;
			height: 18px;
			margin: 0 10px 0 0 !important;
			cursor: pointer;
		}

		.label-text {
			font-weight: 600;
			font-size: 15px;
			color: #1e293b;
		}
	}

	.ssgsw_attributes_wrap {
		padding: 28px;
		background-color: #fff;
	}

	.ssgsw-attributes-header {
		margin-bottom: 12px;
		border-bottom: 1px solid #e2e8f0;
		padding-bottom: 8px;
	}

	.ssgsw_attribute_item {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 10px;
		break-inside: avoid-column;

		input {
			width: 16px;
			height: 16px;
			margin: 0;
			cursor: pointer;
		}

		label {
			cursor: pointer;
			padding-left: 0 !important;
			margin-bottom: 0;
			font-size: 14px;
			color: #334155;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.ssgsw-attributes-all {
		color: #1e293b !important;
		font-weight: 700 !important;
	}

	.ssgsw_attributes_columns {
		column-count: 3;
		column-gap: 30px;
		width: 100%;
	}

	// Product images group.
	.ssgsw-product-images-options {
		margin-top: 16px;
		padding: 20px;
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
	}

	.ssgsw-product-images-options__title {
		margin: 0 0 16px;
		font-weight: 600;
		font-size: 14px;
		color: #1e293b;
	}

	.ssgsw-product-images-option--featured {
		padding-bottom: 30px;
		border-bottom: 1px solid #e2e8f0;
		margin-bottom: -20px;
	}

	.ssgsw-product-images-nested {
		margin: 12px 0 0;
	}

	.ssgsw-gallery-column-count {
		margin: 12px 0 0;

		label {
			padding-left: 0;
			display: block;
			font-weight: 600;
			font-size: 13px;
			color: #1e293b;
			margin-bottom: 8px;
		}

		select {
			width: 80px;
			min-width: 80px;
		}

		p {
			margin: 8px 0 0;
			color: #64748b;
			font-size: 13px;
		}
	}

	.ssgsw-notice-info {
		margin-top: 16px;
		padding: 12px 14px;
		background: #eff6ff;
		border: 1px solid #bfdbfe;
		border-radius: 6px;
		color: #1e40af;
		font-size: 13px;
		line-height: 1.5;
	}

	// Filter builder: a real grid instead of the undefined w-1/3 / w-1/4 utilities (§22.2 W4).
	.ssgsw-filter-builder {
		margin-top: -20px;

		.filter-row1,
		.filter-row {
			display: grid;
			grid-template-columns: 2fr 1.4fr 2fr 40px;
			gap: 10px;
			align-items: center;
		}

		.filter-select,
		.filter-input {
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
		}

		// The cells are <label>s inside .form-group, which the legacy phone CSS indents by 50px.
		.ssgsw-filter-cell {
			display: block;
			min-width: 0;
			padding-left: 0 !important;
			margin: 0;
		}

		.ssgsw-filter-cell .filter-select,
		.ssgsw-filter-cell .filter-input {
			width: 100% !important;
			margin: 0 !important;
		}

		.ssgsw-filter-cell__label {
			display: none;
		}

		.remove-btn {
			cursor: pointer;
		}

		.ssgsw_add_filter_button {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: var(--ssgsw-blue);
			border: 1px solid var(--ssgsw-blue);
			background: #fff;
			padding: 8px 12px;
			border-radius: 4px;
			cursor: pointer;
		}
	}

	// Custom field multi-select (replaces select2).
	.ssgsw-field-select {
		position: relative;
		width: 90%;
		max-width: 100%;
	}

	.ssgsw-field-select__control {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		min-height: 40px;
		padding: 6px 8px;
		border: 1px solid #aaa;
		border-radius: 4px;
		background: #fff;
		box-sizing: border-box;
		cursor: text;

		input {
			flex: 1 1 160px;
			min-width: 120px;
			border: 0 !important;
			box-shadow: none !important;
			padding: 2px 4px;
			font-size: 14px;
		}
	}

	.ssgsw-field-select__tag {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 2px 4px 2px 8px;
		background: #e4e4e4;
		border: 1px solid #aaa;
		border-radius: 4px;
		font-size: 13px;

		button {
			border: 0;
			background: transparent;
			cursor: pointer;
			font-size: 16px;
			line-height: 1;
			color: #555;
		}
	}

	.ssgsw-field-select__list {
		position: absolute;
		z-index: 1000;
		left: 0;
		right: 0;
		max-height: 260px;
		overflow-y: auto;
		margin: 4px 0 0;
		padding: 4px 0;
		background: #fff;
		border: 1px solid #aaa;
		border-radius: 4px;
		box-shadow: 0 8px 20px rgba(20, 27, 56, 0.12);
		list-style: none;
	}

	.ssgsw-field-select__option,
	.ssgsw-field-select__empty {
		margin: 0;
		padding: 8px 12px;
		font-size: 14px;
	}

	.ssgsw-field-select__option {
		cursor: pointer;

		&.is-active {
			background: var(--ssgsw-blue);
			color: #fff;
		}

		&.is-disabled {
			color: #999;
			cursor: not-allowed;

			&.is-active {
				background: #f0f0f0;
				color: #999;
			}
		}
	}

	.ssgsw-field-select__empty {
		color: var(--ssgsw-muted);
	}

	// Sticky save bar: full width on phones.
	.ssgsw_button_container button {
		cursor: pointer;
	}

	@media only screen and (max-width: 782px) {
		// Sync mode cards stack instead of shrinking to ~50px wide (§22.2 W2).
		.sync-modes__grid {
			flex-direction: column;
		}

		.sync-modes__card {
			width: 100%;
			box-sizing: border-box;
		}

		.ssgsw_cron_wrap .ssgsw_addons-input {
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
		}

		.ssgsw-filter-builder {
			.filter-row1 {
				display: none;
			}

			.filter-row {
				grid-template-columns: 1fr;
				padding: 12px;
				border: 1px solid var(--ssgsw-border);
				border-radius: 6px;
				margin-bottom: 10px;
			}

			.ssgsw-filter-cell__label {
				display: block;
				font-weight: 600;
				margin-bottom: 4px;
			}
		}

		.ssgsw_attributes_columns {
			column-count: 2;
		}

		.ssgsw-field-select {
			width: 100%;
		}
	}

	@media only screen and (max-width: 575px) {
		.ssgsw_attributes_columns {
			column-count: 1;
		}

		.ssgsw_attributes_wrap {
			padding: 16px;
		}

		.ssgsw_button_container {
			display: flex;
			flex-direction: column;
			gap: 8px;

			button {
				width: 100%;
			}
		}
	}
}