/*
 * LC Médical — Comptoir : forms.
 * ONE control scale with buttons.css (tokens.css, --lc-ctl-*): fields, selects (native and select2), textareas and
 * quantity steppers are 48px (--lc-ctl-md; the stepper next to the PDP add-to-cart is 56px = --lc-ctl-lg), 1.5px
 * --lc-ctl-border, 4px radius, paper ground; hover darkens the border, focus turns it medical blue and the global
 * 3px ring (base.css) shows on top. Blocksy renders classic fields from the --theme-form-* variables (mapped in
 * tokens.css). This file adds the label, hint, error and choice patterns and tames plugin forms (lc-core .lc-field,
 * lc-b2b .lc-pro-form) and WooCommerce's own .form-row fields. Labels are always visible; placeholders never replace them.
 *
 *   <div class="lc-field"><label for="x">Nom et prénom</label><input id="x"><p class="lc-field__hint">…</p></div>
 *   error: aria-invalid="true" on the input + <p class="lc-field__error" role="alert">…</p>
 */

body .lc-field {
	display: grid;
	gap: 6px;
}

body .lc-field > label,
body .lc-pro-form__row > label,
body .woocommerce form .form-row > label {
	margin: 0;
	font-family: var(--lc-font-text);
	font-size: var(--lc-fs-sm);
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-ink);
}

/* One field rule for our fields, plugin fields and WooCommerce's .form-row fields (checkout, account, address). */
body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row, .lc-coupon__row) :is(input:not([type='checkbox'], [type='radio'], [type='hidden'], [type='submit'], [type='button'], [type='file'], [type='range'], .qty), select:not(.select2-hidden-accessible), textarea) {
	inline-size: 100%;
	min-block-size: var(--lc-ctl-md);
	padding: 0.65em var(--lc-ctl-px);
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border);
	border-radius: var(--lc-ctl-r);
	background-color: var(--lc-ctl-bg);
	box-shadow: none;
	color: var(--lc-ink);
	font: 400 var(--lc-ctl-fs) / 1.4 var(--lc-font-text);
	transition: border-color var(--lc-dur-fast) linear;
}

body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row) textarea {
	min-block-size: 8rem;
	resize: vertical;
}

body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row, .lc-coupon__row) :is(input, select, textarea):hover {
	border-color: var(--lc-ctl-border-hover);
}

body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row, .lc-coupon__row) :is(input, select, textarea):focus {
	border-color: var(--lc-ctl-border-focus);
}

body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row, .lc-coupon__row) :is(input, select, textarea):disabled {
	background-color: var(--lc-shelf-2);
	color: var(--lc-ink-muted);
	cursor: not-allowed;
}

/* Read-only values lc-core fixes (city, price). */
body .lc-field :is(input.lc-fixed, select.lc-fixed) {
	background-color: var(--lc-shelf-2);
}

/* Errors: named, close to the field, never colour alone. */
body :is(input, select, textarea)[aria-invalid='true'],
body .woocommerce-invalid :is(input, select, textarea),
body .lc-field [aria-invalid='true'] {
	border-color: var(--lc-red-ink);
	outline: 0;
}

.lc-field__error {
	margin: 0;
	font-size: var(--lc-fs-sm);
	font-weight: 700;
	color: var(--lc-red-ink);
}

.lc-field__hint,
body .lc-pro-form__hint {
	margin: 0;
	font-size: var(--lc-fs-sm);
	color: var(--lc-ink-muted);
}

/* Select: our own chevron, same height as inputs. */
body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row) select:not(.select2-hidden-accessible, [multiple]) {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 1.2em;
}

html[dir='rtl'] body :is(.lc-field, .lc-pro-form__row, .woocommerce form .form-row) select:not(.select2-hidden-accessible, [multiple]) {
	background-position: left 0.8em center;
	padding-inline: 2.6em 0.9em;
}

/* Choice rows (consent, delivery options): the whole row is the target. */
.lc-choice,
body .lc-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	min-block-size: var(--lc-tap);
	padding-block: 0.4em;
	font-size: var(--lc-fs-sm);
	line-height: 1.45;
	cursor: pointer;
}

.lc-choice input,
body .lc-newsletter__consent input {
	flex: none;
	margin-block-start: 0.2em;
}

/* Plugin messages. */
body .lc-newsletter__msg,
body .lc-rental__status {
	border-radius: var(--lc-r-field);
	font-size: var(--lc-fs-sm);
}

body .lc-rental__status.is-success {
	background: var(--lc-ok-bg);
	color: var(--lc-ok-deep);
}

body .lc-rental__status.is-error {
	background: var(--lc-err-bg);
	color: var(--lc-err);
}

body .lc-rental__rx {
	background: var(--lc-warn-bg);
	color: var(--lc-warn);
	border-radius: var(--lc-r-field);
}

body .lc-rental__sim {
	background: var(--lc-blue-100);
	color: var(--lc-navy-900);
	border-radius: var(--lc-r-field);
}

/* lc-b2b */
body .lc-pro-notice {
	border: 1px solid var(--lc-navy-200);
	border-radius: var(--lc-r-field);
	background: var(--lc-blue-50);
}

body .lc-pro-notice--error {
	border-color: var(--lc-err-line);
	background: var(--lc-err-bg);
	color: var(--lc-err);
}

/* Browser autofill keeps the paper ground. */
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px var(--lc-paper) inset;
	-webkit-text-fill-color: var(--lc-ink);
	caret-color: var(--lc-ink);
}

/* ---------- select2 / selectWoo (WooCommerce country, state, city): same height, border, radius and focus as a field ---------- */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
	box-sizing: border-box;
	min-block-size: var(--lc-ctl-md);
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border);
	border-radius: var(--lc-ctl-r);
	background-color: var(--lc-ctl-bg);
}

body .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	block-size: var(--lc-ctl-md);
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-block: 0;
	padding-inline: var(--lc-ctl-px) 2.6em;
	color: var(--lc-ink);
	font: 400 var(--lc-ctl-fs) / 1.4 var(--lc-font-text);
}

body .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--lc-ink-faint);
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
	block-size: 100%;
	inset-inline: auto 0.6em;
}

body .select2-container--default:hover .select2-selection {
	border-color: var(--lc-ctl-border-hover);
}

body .select2-container--default.select2-container--focus .select2-selection,
body .select2-container--default.select2-container--open .select2-selection {
	border-color: var(--lc-ctl-border-focus);
}

body .select2-container--default.select2-container--focus .select2-selection {
	outline: 3px solid var(--lc-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--lc-focus-halo);
}

body .select2-dropdown {
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border-focus);
	border-radius: var(--lc-ctl-r);
	background: var(--lc-ctl-bg);
	box-shadow: var(--lc-shadow-panel);
	font-family: var(--lc-font-text);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
	min-block-size: var(--lc-ctl-sm);
	padding: 0.4em var(--lc-ctl-px);
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border);
	border-radius: var(--lc-ctl-r);
	font: 400 var(--lc-ctl-fs) / 1.4 var(--lc-font-text);
}

body .select2-container--default .select2-results__option {
	display: flex;
	align-items: center;
	min-block-size: var(--lc-ctl-sm);
	padding: 0.5em var(--lc-ctl-px);
	color: var(--lc-ink);
	font-size: var(--lc-ctl-fs);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--lc-action);
	color: var(--lc-on-action);
}

body .select2-container--default .select2-results__option[aria-selected='true']:not(.select2-results__option--highlighted),
body .select2-container--default .select2-results__option[data-selected='true']:not(.select2-results__option--highlighted) {
	background: var(--lc-blue-50);
	color: var(--lc-link);
	font-weight: 700;
}

/* ---------- Checkboxes and radios: one size, one border, one checked fill ---------- */
body :is(.lc-field, .lc-choice, .lc-pro-form__row, .woocommerce form .form-row, .lc-newsletter__consent) :is(input[type='checkbox'], input[type='radio']) {
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border);
	accent-color: var(--lc-action);
}

body :is(.lc-field, .lc-choice, .lc-pro-form__row, .woocommerce form .form-row, .lc-newsletter__consent) :is(input[type='checkbox'], input[type='radio']):checked {
	border-color: var(--lc-action);
	background-color: var(--lc-action);
}

body :is(.lc-field, .lc-choice, .lc-pro-form__row, .woocommerce form .form-row, .lc-newsletter__consent) input[type='checkbox'] {
	border-radius: 3px;
}

/* ---------- Quantity steppers: the stepper is as tall as the button beside it ----------
   md (48px) by default and in cart lines; lg (56px) on the product page, next to the lg add-to-cart. `html body` lifts the
   rule over the stepper's own definition in product-card.css. */
html body .quantity.quantity {
	--lc-q-h: var(--lc-ctl-md);
	min-block-size: var(--lc-q-h);
	border: var(--lc-ctl-bw) solid var(--lc-ctl-border);
	border-radius: var(--lc-ctl-r);
	background-color: var(--lc-ctl-bg);
}

html body :is(.lc-pdp__cart, .single-product form.cart, .lc-buybar) .quantity.quantity {
	--lc-q-h: var(--lc-ctl-lg);
}

html body .quantity.quantity:hover {
	border-color: var(--lc-ctl-border-hover);
}

html body .quantity.quantity:focus-within {
	border-color: var(--lc-ctl-border-focus);
}

/* Coupon row: the apply button is as tall as the code field. */
body .lc-coupon__row .lc-btn,
body .woocommerce-form-coupon .button {
	--_h: var(--lc-ctl-md);
	--_fs: var(--lc-btn-md-fs);
	--_ls: var(--lc-btn-md-ls);
	--_px: var(--lc-btn-md-px);
	--_py: var(--lc-btn-md-py);
}

/* Password reveal (WooCommerce): a 44px target, centred in the field's end edge. */
body .woocommerce form .password-input {
	position: relative;
	display: block;
}

body .woocommerce form .password-input .show-password-input {
	position: absolute;
	inset-inline-end: 2px;
	inset-block-start: 50%;
	inset-block-end: auto;
	inline-size: var(--lc-tap);
	block-size: var(--lc-tap);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	cursor: pointer;
}

body .woocommerce form .password-input input[type='password'],
body .woocommerce form .password-input input[type='text'] {
	padding-inline-end: calc(var(--lc-tap) + 4px);
}