/**
 * Ketabbin UX accessibility safety layer v1.
 * Activated only by independent body classes from versioned feature flags.
 */

body[class*="ketabbin-ux-"] {
	--kb-ux-focus-color: #005fcc;
	--kb-ux-focus-gap: 3px;
	--kb-ux-target-min: 44px;
	--kb-ux-ui-small: 12px;
	--kb-ux-ui-body: 14px;
}

/*
 * Compact product-card actions. This late, opt-in layer contains the broad
 * global button rules that previously enlarged card labels and bag SVGs.
 */
.ketabbin-ux-product-card-actions-v1 :is(
	.kb-store-card,
	.woocommerce ul.products li.product,
	.wc-block-grid__product,
	.wp-block-post
) .kb-server-cart-form {
	display: block !important;
	inline-size: 100% !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
}

.ketabbin-ux-product-card-actions-v1 :is(
	.kb-store-card__buy,
	.kb-card-purchase-action,
	.woocommerce ul.products li.product .button,
	.wc-block-grid__product .wp-block-button__link
) {
	display: inline-flex !important;
	inline-size: 100% !important;
	min-inline-size: 0 !important;
	max-inline-size: 100% !important;
	block-size: auto !important;
	min-block-size: 44px !important;
	max-block-size: 52px !important;
	margin-block: 8px 0 !important;
	padding-block: 8px !important;
	padding-inline: 10px !important;
	align-items: center !important;
	justify-content: center !important;
	flex-flow: row nowrap !important;
	gap: 7px !important;
	border-radius: 11px !important;
	font-size: clamp(11px, 2.9vw, 14px) !important;
	line-height: 1.35 !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

.ketabbin-ux-product-card-actions-v1 :is(
	.kb-store-card__buy,
	.kb-card-purchase-action,
	.woocommerce ul.products li.product .button,
	.wc-block-grid__product .wp-block-button__link
) :is(span, b) {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ketabbin-ux-product-card-actions-v1 :is(
	.kb-store-card__buy,
	.kb-card-purchase-action,
	.woocommerce ul.products li.product .button
) svg {
	inline-size: 22px !important;
	block-size: 22px !important;
	min-inline-size: 22px !important;
	max-inline-size: 22px !important;
	flex: 0 0 22px !important;
	fill: none !important;
	stroke: currentColor !important;
}

.ketabbin-ux-product-card-actions-v1 .woocommerce ul.products li.product .kb-loop-core-actions {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 48px;
	gap: 8px !important;
	inline-size: 100%;
	margin-block-start: 8px;
}

.ketabbin-ux-product-card-actions-v1 .woocommerce ul.products li.product .kb-loop-core-actions > * {
	min-inline-size: 0;
	max-inline-size: 100%;
}

@media (max-width: 430px) {
	.ketabbin-ux-product-card-actions-v1 :is(
		.kb-store-card__buy,
		.kb-card-purchase-action,
		.woocommerce ul.products li.product .button
	) {
		min-block-size: 46px !important;
		padding-inline: 7px !important;
		font-size: 12px !important;
	}
}

/*
 * Soft-keyboard/Visual Viewport containment. Core enables this class through
 * an independent default-off flag; the Theme only consumes measured tokens.
 */
.ketabbin-ux-visual-viewport-v1 {
	--kb-visual-viewport-height: 100dvb;
	--kb-visual-viewport-offset-top: 0px;
}

@media (max-width: 48rem) {
	.ketabbin-ux-visual-viewport-v1 [data-kb-ux-dialog-enhanced-v1="1"] > dialog.kb-ux-dialog-v1__surface {
		max-block-size: calc(var(--kb-visual-viewport-height, 100dvb) - 2rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ketabbin-ux-visual-viewport-v1 .kb-ux-notification-v1[data-kb-ux-notifications-enhanced-v1="1"] {
		inset-block-start: calc(var(--kb-visual-viewport-offset-top, 0px) + var(--kb-ux-space-2, 0.5rem));
		max-block-size: calc(var(--kb-visual-viewport-height, 100dvb) - 1rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ketabbin-ux-visual-viewport-v1 :where(.kb-chat, .kb-reader) {
		max-block-size: var(--kb-visual-viewport-height, 100dvb);
		min-block-size: 0;
		overflow: auto;
		overscroll-behavior: contain;
	}

	.ketabbin-ux-visual-viewport-v1 .kb-wc-system-page--checkout {
		scroll-padding-block-end: max(1rem, env(safe-area-inset-bottom));
	}
}

.ketabbin-ux-focus-visibility-v1 :where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[role="button"],
	[role="option"],
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 3px solid var(--kb-ux-focus-color) !important;
	outline-color: Highlight !important;
	outline-offset: var(--kb-ux-focus-gap) !important;
	box-shadow: 0 0 0 2px Canvas !important;
}

.ketabbin-ux-focus-visibility-v1 :where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[role="button"],
	[role="option"]
):focus:not(:focus-visible) {
	outline: none;
}

@media (pointer: coarse) {
	.ketabbin-ux-touch-targets-v1 :where(
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		select,
		summary,
		.button,
		[role="button"],
		.kb-mobile-store-nav a,
		.kb-commerce-actions > a,
		.kb-command-icon-button,
		.kb-category-toggle
	) {
		min-inline-size: var(--kb-ux-target-min) !important;
		min-block-size: var(--kb-ux-target-min) !important;
	}
}

.ketabbin-ux-readable-type-v1 :where(
	.kb-auth-eyebrow,
	.kb-auth-message,
	.kb-auth-check,
	.kb-auth-form__meta > a,
	.kb-search-results strong,
	.kb-search-results small,
	.kb-search-results__empty,
	.kb-commerce-nav .kb-nav a,
	.kb-store-card__meta,
	.kb-store-card__body > small,
	.kb-store-card__price del,
	.kb-category-grid small,
	.kb-service-strip small,
	.kb-member-card small,
	.kb-member-card a,
	.kb-mobile-store-nav a
) {
	font-size: var(--kb-ux-ui-small) !important;
	line-height: 1.65 !important;
}

.ketabbin-ux-readable-type-v1 :where(
	input,
	select,
	textarea,
	button,
	.button
) {
	font-size: max(var(--kb-ux-ui-body), 1em);
	line-height: 1.5;
}

.ketabbin-ux-bidi-inputs-v1[dir="rtl"] :where(
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[inputmode="numeric"],
	[data-kb-bidi="ltr"],
	code,
	kbd
) {
	direction: ltr;
	text-align: left;
	unicode-bidi: plaintext;
}

@media (prefers-reduced-motion: reduce) {
	.ketabbin-ux-reduced-motion-v1 *,
	.ketabbin-ux-reduced-motion-v1 *::before,
	.ketabbin-ux-reduced-motion-v1 *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

@media (forced-colors: active) {
	.ketabbin-ux-focus-visibility-v1 :focus-visible {
		outline-color: Highlight !important;
		box-shadow: none !important;
	}
}

/* Mobile/RTL safety is a separate default-off body class controlled by Core. */
.ketabbin-ux-mobile-rtl-safety-v1 {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.ketabbin-ux-mobile-rtl-safety-v1 :where(img, video, iframe, svg, canvas) {
	max-inline-size: 100%;
	height: auto;
}

.ketabbin-ux-mobile-rtl-safety-v1 :where(p, li, dd, dt, td, th, label, legend, button, a) {
	overflow-wrap: anywhere;
	word-break: normal;
}

.ketabbin-ux-mobile-rtl-safety-v1 :where([id], [tabindex="-1"]) {
	scroll-margin-block-start: 96px;
}

@media (max-width: 700px) {
	.ketabbin-ux-mobile-rtl-safety-v1 :where(.kb-commerce-header, .kb-mobile-store-nav) {
		padding-inline-start: max(12px, env(safe-area-inset-left));
		padding-inline-end: max(12px, env(safe-area-inset-right));
	}

	.ketabbin-ux-mobile-rtl-safety-v1 .kb-mobile-store-nav {
		padding-block-end: max(8px, env(safe-area-inset-bottom));
	}

	.ketabbin-ux-mobile-rtl-safety-v1 :where(input, select, textarea) {
		max-inline-size: 100%;
		font-size: 16px;
	}
}

@media (max-width: 360px) {
	.ketabbin-ux-mobile-rtl-safety-v1 :where(.kb-grid, .kb-home-grid, .kb-category-grid) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (forced-colors: active) {
	.ketabbin-ux-mobile-rtl-safety-v1 :where(button, .button, [role="button"]) {
		border: 1px solid ButtonText;
	}
}

/*
 * Direction-aware safe-area correction. Activated only by the independent
 * mobile_logical_safe_area_v1 Core flag. CSS env() exposes physical edges;
 * these tokens map them to logical start/end without inventing unsupported
 * safe-area-inset-inline-* environment variables.
 */
.ketabbin-ux-logical-safe-area-v1 {
	--kb-safe-area-top: env(safe-area-inset-top);
	--kb-safe-area-right: env(safe-area-inset-right);
	--kb-safe-area-bottom: env(safe-area-inset-bottom);
	--kb-safe-area-left: env(safe-area-inset-left);
}

:root[dir="rtl"] body.ketabbin-ux-logical-safe-area-v1 {
	--kb-safe-inline-start: var(--kb-safe-area-right);
	--kb-safe-inline-end: var(--kb-safe-area-left);
}

:root[dir="ltr"] body.ketabbin-ux-logical-safe-area-v1 {
	--kb-safe-inline-start: var(--kb-safe-area-left);
	--kb-safe-inline-end: var(--kb-safe-area-right);
}

@media (max-width: 700px) {
	.ketabbin-ux-logical-safe-area-v1 :where(.kb-commerce-header, .kb-mobile-store-nav) {
		padding-inline-start: max(12px, var(--kb-safe-inline-start));
		padding-inline-end: max(12px, var(--kb-safe-inline-end));
	}

	.ketabbin-ux-logical-safe-area-v1 .kb-mobile-store-nav {
		padding-block-end: max(8px, var(--kb-safe-area-bottom));
	}
}

@media (max-width: 30rem) {
	.ketabbin-ux-logical-safe-area-v1 [data-kb-ux-dialog-enhanced-v1="1"] > dialog.kb-ux-dialog-v1__surface {
		padding-block-start: max(var(--kb-space-4, 1rem), var(--kb-safe-area-top));
		padding-block-end: max(var(--kb-space-4, 1rem), var(--kb-safe-area-bottom));
		padding-inline-start: max(var(--kb-space-4, 1rem), var(--kb-safe-inline-start));
		padding-inline-end: max(var(--kb-space-4, 1rem), var(--kb-safe-inline-end));
	}

	.ketabbin-ux-logical-safe-area-v1 .kb-ux-notification-v1[data-kb-ux-notifications-enhanced-v1="1"] {
		inset-inline-start: auto;
		inset-inline-end: max(var(--kb-ux-space-2, 0.5rem), var(--kb-safe-inline-end));
		inset-block-start: max(var(--kb-ux-space-2, 0.5rem), var(--kb-safe-area-top));
		max-block-size: calc(100dvb - 1rem - var(--kb-safe-area-top) - var(--kb-safe-area-bottom));
		max-inline-size: calc(100dvi - 1rem - var(--kb-safe-inline-start) - var(--kb-safe-inline-end));
	}

	.ketabbin-ux-logical-safe-area-v1 .kb-ux-tooltip-v1[data-kb-ux-tooltip-enhanced-v1="1"] .kb-ux-tooltip-v1__content {
		inset-block-end: max(var(--kb-ux-space-3, 0.75rem), var(--kb-safe-area-bottom));
		inset-inline-start: max(var(--kb-ux-space-3, 0.75rem), var(--kb-safe-inline-start));
		inset-inline-end: max(var(--kb-ux-space-3, 0.75rem), var(--kb-safe-inline-end));
	}
}