/**
 * Outlined floating labels — label sits on the top border of the field.
 * White pad on the label cuts the border line behind the text (Material outlined).
 */

:root {
	--anak-fl-surface: #ffffff;
	--anak-fl-border: #d0d5dd;
	--anak-fl-border-focus: #2f6f6a;
	--anak-fl-text: #18181b;
	--anak-fl-label: #667085;
	--anak-fl-required: #475467;
	--anak-fl-focus-ring: rgba(47, 111, 106, 0.22);
	--anak-fl-label-pad: 0.75em;
}

body.woocommerce-checkout {
	--anak-fl-border: var(--checkout-border-strong, #98a2b3);
	--anak-fl-border-focus: var(--checkout-primary, #2f6f6a);
	--anak-fl-text: var(--checkout-text, #18181b);
	--anak-fl-label: var(--checkout-text-secondary, #667085);
	--anak-fl-required: var(--checkout-error, #475467);
	--anak-fl-focus-ring: var(--checkout-focus, rgba(47, 111, 106, 0.22));
	--anak-fl-surface: var(--checkout-surface, #ffffff);
}

/* —— Checkout fields: outlined floating label —— */
body.woocommerce-checkout .anak-co__fields .form-row,
body.woocommerce-checkout .anak-co__installments,
body.woocommerce-checkout .anak-co__otp-field {
	position: relative !important;
	/* Room above the input so the label can sit on the border without clipping */
	padding: var(--anak-fl-label-pad) 6px 0 !important;
	margin-bottom: 12px !important;
	float: none !important;
	clear: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

body.woocommerce-checkout .anak-co__fields .form-row > label,
body.woocommerce-checkout .anak-co__installments-label,
body.woocommerce-checkout .anak-co__otp-label {
	position: absolute !important;
	/* Center on the input’s top border (= padding-top of the row) */
	top: var(--anak-fl-label-pad) !important;
	inset-inline-start: 18px !important;
	inset-inline-end: auto !important;
	left: 18px;
	right: auto;
	transform: translateY(-50%) !important;
	z-index: 6 !important;
	display: inline-block !important;
	float: none !important;
	width: auto !important;
	max-width: calc(100% - 36px) !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 7px !important;
	/* Solid surface + halo so the border is fully masked behind the text */
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: 0 0 0 3px #fff !important;
	border: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: start !important;
	color: var(--anak-fl-label) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body.woocommerce-checkout .anak-co__fields .form-row > label,
html[dir="rtl"] body.woocommerce-checkout .anak-co__installments-label,
html[dir="rtl"] body.woocommerce-checkout .anak-co__otp-label,
body.rtl.woocommerce-checkout .anak-co__fields .form-row > label,
body.rtl.woocommerce-checkout .anak-co__installments-label,
body.rtl.woocommerce-checkout .anak-co__otp-label {
	left: auto !important;
	right: 18px !important;
}

body.woocommerce-checkout .anak-co__fields .form-row > label .required,
body.woocommerce-checkout .anak-co__fields .form-row > label .optional {
	color: var(--anak-fl-required) !important;
	border: 0 !important;
	text-decoration: none !important;
}

body.woocommerce-checkout .anak-co__fields .form-row > label .optional {
	color: var(--anak-fl-label) !important;
	font-weight: 500 !important;
}

body.woocommerce-checkout .anak-co__fields .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout .anak-co__fields .form-row .woocommerce-input-wrapper .select2-container {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	position: relative;
	z-index: 1;
}

body.woocommerce-checkout .anak-co__fields .form-row .input-text,
body.woocommerce-checkout .anak-co__fields .form-row select,
body.woocommerce-checkout .anak-co__fields .form-row textarea.input-text,
body.woocommerce-checkout .anak-co__fields .form-row .select2-selection--single,
body.woocommerce-checkout .anak-co__installments-select,
body.woocommerce-checkout .anak-co__otp-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
	position: relative;
	z-index: 1;
}

body.woocommerce-checkout .anak-co__fields .form-row:focus-within > label,
body.woocommerce-checkout .anak-co__installments:focus-within .anak-co__installments-label,
body.woocommerce-checkout .anak-co__otp-field:focus-within .anak-co__otp-label {
	color: var(--anak-fl-border-focus) !important;
	box-shadow: 0 0 0 3px #fff !important;
}

/* Checkbox / marketing rows — never float these labels */
body.woocommerce-checkout .anak-co-marketing,
body.woocommerce-checkout .anak-co__checkbox-row,
body.woocommerce-checkout .anak-co__consent,
body.woocommerce-checkout .anak-co__otp-terms,
body.woocommerce-checkout .form-row:has(> label.woocommerce-form__label-for-checkbox),
body.woocommerce-checkout .form-row:has(> label .input-checkbox) {
	padding-top: 0 !important;
	padding-inline: 0 !important;
}

body.woocommerce-checkout .form-row:has(> label.woocommerce-form__label-for-checkbox) > label,
body.woocommerce-checkout .form-row:has(> label .input-checkbox) > label,
body.woocommerce-checkout .anak-co-marketing > label,
body.woocommerce-checkout .anak-co__consent > label,
body.woocommerce-checkout .anak-co__otp-terms {
	position: static !important;
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: none !important;
	pointer-events: auto !important;
	white-space: normal !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
}

/* Non-checkout WC forms (account etc.) */
.woocommerce form .form-row:not(.create-account):has(> label):not(:has(> label.woocommerce-form__label-for-checkbox)):not(:has(> label .input-checkbox)) {
	position: relative;
	padding-top: var(--anak-fl-label-pad);
	overflow: visible;
}

.woocommerce form .form-row:not(:has(> label.woocommerce-form__label-for-checkbox)):not(:has(> label .input-checkbox)) > label {
	position: absolute;
	top: var(--anak-fl-label-pad);
	inset-inline-start: 12px;
	inset-inline-end: auto;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-block;
	width: auto;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 0 7px;
	background-color: #fff;
	box-shadow: 0 0 0 3px #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--anak-fl-label);
	white-space: nowrap;
	pointer-events: none;
}

body:not(.woocommerce-checkout) .woocommerce form .form-row .input-text,
body:not(.woocommerce-checkout) .woocommerce form .form-row select {
	min-height: 48px;
	border-radius: 8px;
	border: 1px solid var(--anak-fl-border);
	background: var(--anak-fl-surface);
	color: var(--anak-fl-text);
	padding-inline: 12px;
	width: 100%;
	box-sizing: border-box;
}

body:not(.woocommerce-checkout) .woocommerce form .form-row .input-text:focus,
body:not(.woocommerce-checkout) .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--anak-fl-border-focus);
	box-shadow: 0 0 0 3px var(--anak-fl-focus-ring);
}

/* Mobile: keep pairs readable; slightly tighter label inset */
@media (max-width: 767px) {
	body.woocommerce-checkout .anak-co__fields .form-row > label,
	body.woocommerce-checkout .anak-co__installments-label,
	body.woocommerce-checkout .anak-co__otp-label {
		inset-inline-start: 14px !important;
		left: 14px;
		font-size: 11px !important;
		max-width: calc(100% - 28px) !important;
	}

	html[dir="rtl"] body.woocommerce-checkout .anak-co__fields .form-row > label,
	html[dir="rtl"] body.woocommerce-checkout .anak-co__installments-label,
	html[dir="rtl"] body.woocommerce-checkout .anak-co__otp-label,
	body.rtl.woocommerce-checkout .anak-co__fields .form-row > label,
	body.rtl.woocommerce-checkout .anak-co__installments-label,
	body.rtl.woocommerce-checkout .anak-co__otp-label {
		left: auto !important;
		right: 14px !important;
	}
}