.sp-real-box-shadow-component {
	.sp-real-bs-header {
		margin: 14px 0 10px;
	}

	.sp-real-bs-actions {
		.sp-real-bs-reset {
			width: 26px;
			height: 26px;
			padding: 0;
			background: transparent;
			border: none;
			color: #6b7280;

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

		.sp-real-bs-unit-select {
			height: 26px;
			min-height: 26px;
			min-width: 64px;
			padding: 0 22px 0 8px;
			background: #fff;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			color: #2f2f2f;
			font-size: 11px;
			line-height: 24px;
		}

		.sp-real-bs-action {
			width: 26px;
			height: 26px;
			padding: 0;
			background: transparent;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			color: #6b7280;
			transition: all 0.15s ease;

			&:hover {
				background: #f3f4f6;
				color: #1e1e1e;
			}

			&.active {
				background: #3858e9;
				border-color: #3858e9;

				&:hover {
					background: #3858e9;
				}
			}

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

	// Preset swatch grid (layout via tailwind-class utilities).
	.sp-real-bs-presets {
		margin-bottom: 16px;

		.sp-real-bs-swatch {
			position: relative;
			aspect-ratio: 1 / 1;
			min-height: 30px;
			background: #fff;
			border: 1px solid #DDDDDD;
			border-radius: 4px;
			transition: transform 0.15s ease, border-color 0.15s ease;

			&:hover {
				transform: scale(1.05);
			}

			.sp-real-bs-check {
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translate(50%, -50%);
				width: 12px;
				height: 12px;
				background: var(--sp-real-primary-color);
				border-radius: 50%;
			}
		}
	}

	// Custom X / Y / Blur / Spread inputs — one connected group with dividers.
	.sp-real-bs-spacing {
		.sp-real-bs-spacing-fields {
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			overflow: hidden;

			.sp-real-bs-field {

				&:not(:last-child) {
					border-right: 1px solid #e0e0e0;
				}

				input[type="number"] {
					width: 100%;
					min-height: 30px;
					padding: 4px 0;
					text-align: center;
					background: transparent;
					border: none;
					box-shadow: none;

					&:focus {
						box-shadow: none;
						outline: none;
					}

					&::-webkit-inner-spin-button {
						margin-right: 0 !important;
						height: 30px;
						cursor: pointer;
					}
				}

			}
		}
	}

	.sp-real-custom-bs-labels {
		margin-top: 5px;
		font-size: 10px;
		color: #6b7280;
		text-align: center;
	}

	.sp-real-bs-reset:focus {
		outline: none;
		box-shadow: none;
	}
}