.wppo-input,
.wppo-textarea,
.wppo-select {
	/* Reset WordPress admin overrides */
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 38px;
	padding: 9px 12px;
	border: 1px solid var(--wppo-border) !important;
	border-radius: var(--wppo-radius-sm) !important;
	background: #fff !important;
	background-image: none;
	color: var(--wppo-text-main) !important;
	font-size: 13.5px !important;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.5;
	transition: var(--wppo-transition);
	box-shadow: none !important;

	&:focus,
	&:focus-visible {
		outline: none !important;
		border-color: var(--wppo-primary) !important;
		box-shadow: 0 0 0 3px var(--wppo-primary-soft) !important;
	}

	&::placeholder {
		color: var(--wppo-text-light);
		opacity: 1;
	}

	&:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		background: var(--wppo-bg-app) !important;
	}
}

.wppo-textarea {
	resize: vertical;
	min-height: 80px;
	height: auto;
}

.wppo-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Arrow SVG — fill value matches --wppo-select-arrow (#64748b) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 36px !important;
	cursor: pointer;
}

/* Number input — hide browser spinners for cleaner look */
.wppo-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

/* Buttons */
.wppo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: var(--wppo-radius-sm);
	cursor: pointer;
	transition: var(--wppo-transition);
	border: 1px solid transparent;
	white-space: nowrap;
	letter-spacing: 0.01em;

	&--full {
		width: 100%;
	}

	&--sm {
		padding: 6px 12px;
		font-size: 12.5px;
	}

	&--primary {
		background: var(--wppo-primary);
		color: #fff;
		box-shadow: 0 1px 3px color-mix(in srgb, var(--wppo-primary) 30%, transparent);

		&:hover:not(:disabled) {
			background: var(--wppo-primary-hover);
			box-shadow: 0 4px 12px color-mix(in srgb, var(--wppo-primary) 35%, transparent);
			transform: translateY(-1px);
		}

		&:active:not(:disabled) {
			transform: translateY(0);
		}
	}

	&--secondary {
		background: #fff;
		border-color: var(--wppo-border);
		color: var(--wppo-text-main);

		&:hover:not(:disabled) {
			background: var(--wppo-bg-app);
			border-color: var(--wppo-border-hover);
		}
	}

	&--danger {
		background: var(--wppo-danger);
		color: #fff;
		box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);

		&:hover:not(:disabled) {
			background: var(--wppo-danger-hover);
			box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
			transform: translateY(-1px);
		}
	}

	&--ghost {
		background: transparent;
		border: 1px solid transparent;
		color: var(--wppo-text-muted);

		&:hover:not(:disabled) {
			background: var(--wppo-bg-app);
			color: var(--wppo-primary);
			border-color: var(--wppo-border);
		}
	}

	&:disabled {
		opacity: 0.45;
		cursor: not-allowed;
		transform: none !important;
		box-shadow: none !important;
	}

	svg {
		width: 1em;
		height: 1em;
		flex-shrink: 0;
	}
}

/* Toggle Switch — kept for any non-WP-component usage */
.wppo-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;

	input {
		opacity: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.wppo-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--wppo-border-hover);
		transition: 0.25s ease;
		border-radius: 22px;

		&:before {
			position: absolute;
			content: "";
			height: 16px;
			width: 16px;
			left: 3px;
			bottom: 3px;
			background-color: white;
			transition: 0.25s ease;
			border-radius: 50%;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		}
	}

	input:checked + .wppo-slider {
		background-color: var(--wppo-primary);
	}

	input:checked + .wppo-slider:before {
		transform: translateX(18px);
	}

	input:focus-visible + .wppo-slider {
		outline: 2px solid var(--wppo-primary);
		outline-offset: 2px;
	}
}