/**
 * IDRS3D 2.0 — Global Interaction & Focus System.
 *
 * Pointer/touch interactions do not inherit the native WebKit blue treatment.
 * Keyboard focus remains explicit, high-contrast and independent of page layout.
 */

:root {
	--idrs3d-interaction-focus-color: #ed1c24;
	--idrs3d-interaction-focus-width: 3px;
	--idrs3d-interaction-focus-offset: 3px;
	/* Authoritative source: My Port computed selected-card state. */
	--idrs3d-red-state-border-width: 1px;
	--idrs3d-red-state-border-style: solid;
	--idrs3d-red-state-border-color: #ed1c24;
	--idrs3d-red-state-radius: 0px;
	--idrs3d-red-state-background: #fff8f8;
	--idrs3d-red-state-inner-edge: inset 0 0 0 1px #ed1c24;
	--idrs3d-red-state-transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

:where(
	a[href],
	area[href],
	button,
	input:not([type="hidden"]),
	select,
	textarea,
	summary,
	[role="button"],
	[role="link"],
	[tabindex]:not([tabindex="-1"])
) {
	-webkit-tap-highlight-color: transparent;
}

/*
 * Important declarations in a named layer intentionally outrank unlayered
 * Astra/WooCommerce important focus recipes without escalating selector
 * specificity or coupling the system to individual components.
 */
@layer idrs3d-interaction {
@supports selector(:focus-visible) {
	/*
	 * Astra mutates the border colour of WordPress block buttons on every
	 * :focus, including touch focus in Safari. Preserve the declared Auto CTA
	 * component border for pointer focus; keyboard focus continues to use the
	 * shared red outline below.
	 */
	.idrs-auto-btn-primary .wp-block-button__link {
		--idrs3d-interaction-resting-border: var(--idrs-red, #ed1c24);
	}

	.idrs-auto-btn-outline .wp-block-button__link {
		--idrs3d-interaction-resting-border: rgba(255, 255, 255, 0.8);
	}

	:root body :where(
		.idrs-auto-btn-primary,
		.idrs-auto-btn-outline
	) .wp-block-button__link:hover,
	:root body :where(
		.idrs-auto-btn-primary,
		.idrs-auto-btn-outline
	) .wp-block-button__link:focus:not(:focus-visible) {
		border-color: var(--idrs3d-interaction-resting-border) !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	}

	:root body :where(
		.idrs-auto-btn-primary,
		.idrs-auto-btn-outline
	) .wp-block-button__link:focus-visible {
		border-color: var(--idrs3d-interaction-resting-border) !important;
	}

	:root body :where(
		a[href],
		area[href],
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"])
	):focus:not(:focus-visible) {
		/* Override vendor :focus rules only when the browser confirms pointer focus. */
		outline: none !important;
	}

	:root body :where(
		a[href],
		area[href],
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		/* A single accessible token wins over Astra/WooCommerce focus recipes. */
		outline: var(--idrs3d-interaction-focus-width) solid var(--idrs3d-interaction-focus-color) !important;
		outline-offset: var(--idrs3d-interaction-focus-offset) !important;
	}

	/*
	 * Components own selection; the global layer owns keyboard focus. When an
	 * option is already selected, use the neutral My Port focus treatment so a
	 * second red state ring is never painted.
	 */
	:root body .idrs3d-ui-option-card.is-selected:focus-visible,
	:root body .idrs3d-clean-choice.is-selected:focus-visible,
	:root body .idrs3d-clean-choice[aria-pressed="true"]:focus-visible {
		outline-color: #111820 !important;
	}

	/* Explicitly replace Astra/WooCommerce blue focus on shared product cards. */
	:root body a.idrs3d-cs-product__image:focus-visible,
	:root body a.wc-block-grid__product-link:focus-visible,
	:root body a.idrs3d-product-card__image:focus-visible,
	:root body a.idrs3d-product-card__link:focus-visible {
		outline: var(--idrs3d-interaction-focus-width) solid var(--idrs3d-interaction-focus-color) !important;
		outline-offset: var(--idrs3d-interaction-focus-offset) !important;
		box-shadow: none !important;
	}

	/*
	 * IDRS3D Unified Red State.
	 * The values are the computed My Port master values. The inset edge sits on
	 * the same perimeter as the border, so only one rectangular state is visible.
	 * No external outline or halo is painted for these controls.
	 */
	:root body :where(
		.idrs3d-ui-option-card.is-selected,
		.idrs3d-ui-option-card[aria-pressed="true"],
		.idrs3d-ui-option-card:focus-visible,
		.idrs3d-clean-choice.is-selected,
		.idrs3d-clean-choice.is-active,
		.idrs3d-clean-choice[aria-pressed="true"],
		.idrs3d-clean-choice:focus-visible
	) {
		border-width: var(--idrs3d-red-state-border-width) !important;
		border-style: var(--idrs3d-red-state-border-style) !important;
		border-color: var(--idrs3d-red-state-border-color) !important;
		border-radius: var(--idrs3d-red-state-radius) !important;
		background-color: var(--idrs3d-red-state-background) !important;
		box-shadow: var(--idrs3d-red-state-inner-edge) !important;
		outline: none !important;
		outline-offset: 0 !important;
		transition: var(--idrs3d-red-state-transition) !important;
		-webkit-tap-highlight-color: transparent;
	}

	:root body :where(
		.idrs3d-ps--ui-foundation .idrs3d-ui-field--dropdown select,
		.idrs3d-ps--ui-foundation .quantity .qty,
		.idrs3d-ps--ui-foundation input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
		body.idrs3d-my-account-ui .woocommerce input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
		body.idrs3d-my-account-ui .woocommerce select,
		body.idrs3d-my-account-ui .woocommerce textarea,
		.idrs-contact-card input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
		.idrs-contact-card select,
		.idrs-contact-card textarea,
		.idrs3d-clean-select,
		.idrs3d-clean-config select,
		.idrs3d-clean-config input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
		.idrs3d-clean-config textarea
	):focus {
		border-width: var(--idrs3d-red-state-border-width) !important;
		border-style: var(--idrs3d-red-state-border-style) !important;
		border-color: var(--idrs3d-red-state-border-color) !important;
		border-radius: var(--idrs3d-red-state-radius) !important;
		background-color: var(--idrs3d-red-state-background) !important;
		box-shadow: var(--idrs3d-red-state-inner-edge) !important;
		outline: none !important;
		outline-offset: 0 !important;
		transition: var(--idrs3d-red-state-transition) !important;
		-webkit-tap-highlight-color: transparent;
	}
}

@supports not selector(:focus-visible) {
	:root body :where(
		a[href],
		area[href],
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"])
	):focus {
		outline: var(--idrs3d-interaction-focus-width) solid var(--idrs3d-interaction-focus-color) !important;
		outline-offset: var(--idrs3d-interaction-focus-offset) !important;
	}
}

@media (forced-colors: active) {
	:root body :where(
		a[href],
		area[href],
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		outline-color: CanvasText !important;
	}

	:root body :where(
		.idrs3d-ui-option-card,
		.idrs3d-clean-choice,
		.idrs3d-clean-select,
		.idrs3d-ps--ui-foundation select,
		.idrs3d-ps--ui-foundation .quantity .qty,
		body.idrs3d-my-account-ui .woocommerce input,
		body.idrs3d-my-account-ui .woocommerce select,
		body.idrs3d-my-account-ui .woocommerce textarea,
		.idrs-contact-card input,
		.idrs-contact-card select,
		.idrs-contact-card textarea
	):focus-visible {
		border-color: CanvasText !important;
		box-shadow: none !important;
		outline: 2px solid CanvasText !important;
		outline-offset: 2px !important;
	}
}
}