/* ============================================================
   Joybunch — Form elements (input/select/textarea/check/radio/switch)
   element 7
   References tokens. Includes WC compatibility selectors.
   ============================================================ */

/* ---------- Field wrapper + label ---------- */
.f-field { display: block; margin-bottom: var(--joy-space-md); }

.f-label {
	display: block;
	font: 600 var(--joy-text-sm)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
	margin: 0 0 6px;
}
.f-label .req { color: var(--joy-coral-dark); margin-left: 2px; font-weight: 700; }

/* ---------- Text input / email / tel / number / password ---------- */
.f-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce-page form .form-row input.input-text {
	display: block;
	width: 100%;
	padding: 14px 16px;
	min-height: var(--height-input);
	font: 400 var(--joy-text-md)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
	background: var(--color-surface-default);
	border: 1px solid var(--border-color-default);
	border-radius: var(--joy-radius-md);
	transition: border-color var(--dur-fast) var(--ease),
	            background var(--dur-fast) var(--ease);
	box-shadow: none;
}
.f-input::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--joy-gray);
}
.f-input:hover:not(:disabled):not(.is-error):not(.is-success),
input:hover:not(:disabled):not(.is-error):not(.is-success),
textarea:hover:not(:disabled):not(.is-error):not(.is-success) {
	border-color: var(--border-color-emphasis);
}
.f-input:focus,
input:focus,
textarea:focus {
	border-color: var(--color-focus-ring);
	border-width: 2px;
	padding: 13px 15px;
	outline: none;
}

/* States */
.f-input.is-error,
input.is-error,
textarea.is-error {
	border-color: var(--border-color-error);
	background: #FEF2F0;
}
.f-input.is-success,
input.is-success,
textarea.is-success {
	border-color: var(--border-color-success);
}
.f-input:disabled,
input:disabled,
textarea:disabled {
	background: var(--color-bg-disabled);
	color: var(--joy-gray);
	cursor: not-allowed;
}
.f-input[readonly],
input[readonly] {
	border-color: transparent;
	background: var(--color-bg-disabled);
}

/* Textarea (taller min-height) */
textarea,
.f-textarea {
	min-height: 96px;
	resize: vertical;
}

/* ---------- Helper text (always reserved space below input — prevents CLS) ---------- */
.f-helper {
	font: 400 var(--joy-text-sm)/1.45 var(--joy-font-body);
	color: var(--color-text-secondary);
	margin: 6px 0 0;
}
.f-helper.is-error   { color: var(--color-text-error); }
.f-helper.is-success { color: var(--color-text-success); }

/* ---------- Select (custom chevron) ---------- */
.f-select,
select {
	display: block;
	width: 100%;
	padding: 14px 40px 14px 16px;
	min-height: var(--height-input);
	font: 400 var(--joy-text-md)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
	background-color: var(--color-surface-default);
	border: 1px solid var(--border-color-default);
	border-radius: var(--joy-radius-md);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A4F45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	transition: border-color var(--dur-fast) var(--ease);
}
.f-select:focus,
select:focus {
	border-color: var(--color-focus-ring);
	border-width: 2px;
	padding: 13px 39px 13px 15px;
	outline: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* ---------- Checkbox ---------- */
.f-check {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.f-check + .f-check-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	min-height: 44px;
	cursor: pointer;
	font: 400 var(--joy-text-md)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
}
.f-check + .f-check-label::before {
	content: '';
	width: 22px; height: 22px;
	flex-shrink: 0;
	border: 2px solid var(--border-color-default);
	background: var(--color-surface-default);
	border-radius: 6px;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}
.f-check:checked + .f-check-label::before {
	border-color: var(--joy-coral);
	background: var(--joy-coral) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") no-repeat center / 14px;
}
.f-check:focus-visible + .f-check-label::before {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}
.f-check:disabled + .f-check-label {
	color: var(--joy-gray);
	cursor: not-allowed;
}
.f-check:disabled + .f-check-label::before {
	background: var(--color-bg-disabled);
	border-color: var(--joy-gray-light);
}

/* ---------- Radio (same pattern as checkbox, circular) ---------- */
.f-radio {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.f-radio + .f-radio-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	min-height: 44px;
	cursor: pointer;
	font: 400 var(--joy-text-md)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
}
.f-radio + .f-radio-label::before {
	content: '';
	width: 22px; height: 22px;
	flex-shrink: 0;
	border: 2px solid var(--border-color-default);
	background: var(--color-surface-default);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}
.f-radio:checked + .f-radio-label::before {
	border-color: var(--joy-coral);
	background: radial-gradient(var(--joy-coral) 45%, white 50%);
}
.f-radio:focus-visible + .f-radio-label::before {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}
.f-radio:disabled + .f-radio-label {
	color: var(--joy-gray);
	cursor: not-allowed;
}
.f-radio:disabled + .f-radio-label::before {
	background: var(--color-bg-disabled);
	border-color: var(--joy-gray-light);
}

/* ---------- Switch / toggle ---------- */
.f-switch {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.f-switch + .f-switch-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	min-height: 44px;
	cursor: pointer;
	font: 500 var(--joy-text-md)/1.4 var(--joy-font-body);
	color: var(--color-text-primary);
	position: relative;
}
.f-switch + .f-switch-label::before {
	content: '';
	width: 40px; height: 24px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--joy-gray-light);
	transition: background var(--dur-fast) var(--ease);
}
.f-switch + .f-switch-label::after {
	content: '';
	position: absolute;
	left: 2px; top: calc(50% - 10px);
	width: 20px; height: 20px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform var(--dur-fast) var(--ease);
}
.f-switch:checked + .f-switch-label::before { background: var(--joy-coral); }
.f-switch:checked + .f-switch-label::after { transform: translateX(16px); }
.f-switch:focus-visible + .f-switch-label::before {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
}

/* ---------- Inline form layout helpers ---------- */
.f-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--joy-space-md);
}
@media (min-width: 641px) {
	.f-row--2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fieldset (group) ---------- */
.f-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 var(--joy-space-lg);
	border-bottom: 1px solid var(--border-color-divider);
	padding-bottom: var(--joy-space-lg);
}
.f-fieldset:last-child { border-bottom: none; padding-bottom: 0; }
.f-legend {
	font: 700 var(--joy-text-md)/1.3 var(--joy-font-display);
	color: var(--color-text-primary);
	margin: 0 0 var(--joy-space-md);
	padding: 0;
}