/*!
 * CzarCommerce Inputs — FASE 12.3
 * -----------------------------------------------------------------------------
 * Form controls próprios. Opt-in:
 *   .czar-field           wrapper (label + input + help/error)
 *   .czar-label           label
 *   .czar-input           text/email/password/url/tel/number/search/date
 *   .czar-textarea        textarea (multi-line)
 *   .czar-select          select nativo estilizado
 *   .czar-help            mensagem auxiliar
 *   .czar-error           mensagem de erro (aria-live recomendado no markup)
 *   .czar-checkbox        wrapper inline-flex p/ checkbox + label
 *   .czar-radio           wrapper inline-flex p/ radio + label
 *   .czar-switch          toggle switch (checkbox visualmente diferente)
 *
 * Coexiste com inputs legacy do Woo (.input-text, .wd-field, etc).
 */

.czar-field {
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-2);
	margin-bottom: var(--czar-space-4);
}

.czar-label {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-sm);
	font-weight: var(--czar-font-weight-medium, 500);
	color: var(--czar-color-text);
	line-height: var(--czar-line-height-snug);
}

.czar-label-required::after {
	content: "*";
	margin-left: 0.25ch;
	color: var(--czar-color-sale, #d33);
}

.czar-input,
.czar-textarea,
.czar-select {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	line-height: var(--czar-line-height-normal);
	color: var(--czar-color-text);

	width: 100%;
	padding: var(--czar-space-3) var(--czar-space-4);
	background-color: var(--czar-color-bg, #fff);
	border: 1.5px solid color-mix(in srgb, var(--czar-color-text) 18%, transparent);
	border-radius: var(--czar-input-radius, var(--czar-radius-md));
	box-shadow: none;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;

	-webkit-appearance: none;
	appearance: none;
}

.czar-input:hover,
.czar-textarea:hover,
.czar-select:hover {
	border-color: color-mix(in srgb, var(--czar-color-primary) 50%, transparent);
}

.czar-input:focus-visible,
.czar-textarea:focus-visible,
.czar-select:focus-visible {
	outline: none;
	border-color: var(--czar-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--czar-color-primary) 22%, transparent);
}

.czar-input::placeholder,
.czar-textarea::placeholder {
	color: color-mix(in srgb, var(--czar-color-text) 55%, transparent);
	opacity: 1;
}

.czar-input[aria-invalid="true"],
.czar-textarea[aria-invalid="true"],
.czar-select[aria-invalid="true"] {
	border-color: var(--czar-color-sale, #d33);
}
.czar-input[aria-invalid="true"]:focus-visible,
.czar-textarea[aria-invalid="true"]:focus-visible,
.czar-select[aria-invalid="true"]:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--czar-color-sale, #d33) 22%, transparent);
}

.czar-input:disabled,
.czar-textarea:disabled,
.czar-select:disabled {
	background-color: color-mix(in srgb, var(--czar-color-text) 5%, transparent);
	color: color-mix(in srgb, var(--czar-color-text) 55%, transparent);
	cursor: not-allowed;
}

.czar-textarea {
	min-height: calc(var(--czar-space-12) + var(--czar-space-4));
	resize: vertical;
}

.czar-select {
	background-image: linear-gradient(
		45deg, transparent 50%, var(--czar-color-text) 50%
	), linear-gradient(
		135deg, var(--czar-color-text) 50%, transparent 50%
	);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 13px) calc(50% - 2px);
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--czar-space-8);
}

.czar-help {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-xs);
	color: color-mix(in srgb, var(--czar-color-text) 70%, transparent);
	line-height: var(--czar-line-height-snug);
}

.czar-error {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-xs);
	color: var(--czar-color-sale, #d33);
	font-weight: var(--czar-font-weight-medium, 500);
	line-height: var(--czar-line-height-snug);
}

/* ---- Checkbox / Radio (custom apparency, native sob o capô) ---- */

.czar-checkbox,
.czar-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--czar-space-2);
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	color: var(--czar-color-text);
	line-height: var(--czar-line-height-snug);
	cursor: pointer;
	user-select: none;
}

.czar-checkbox input[type="checkbox"],
.czar-radio input[type="radio"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--czar-color-primary);
	cursor: pointer;
}

.czar-checkbox input[disabled],
.czar-radio input[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* ---- Switch (checkbox visualmente diferente) ---- */

.czar-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--czar-space-3);
	cursor: pointer;
	user-select: none;
}

.czar-switch input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 2.4em;
	height: 1.35em;
	background-color: color-mix(in srgb, var(--czar-color-text) 22%, transparent);
	border-radius: var(--czar-radius-full);
	transition: background-color 0.18s ease;
	cursor: pointer;
}

.czar-switch input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.15em;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: var(--czar-shadow-sm);
	transition: left 0.18s ease;
}

.czar-switch input[type="checkbox"]:checked {
	background-color: var(--czar-color-primary);
}

.czar-switch input[type="checkbox"]:checked::after {
	left: calc(100% - 1.15em);
}

.czar-switch input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--czar-color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.czar-input,
	.czar-textarea,
	.czar-select,
	.czar-switch input[type="checkbox"],
	.czar-switch input[type="checkbox"]::after {
		transition: none;
	}
}