/**
 * WooCommerce EPO Keyboard Accessibility - Styles
 *
 * Visual focus indicators and accessibility improvements
 *
 * @package WC_EPO_Keyboard_Accessibility
 * @version 1.0.0
 */

/* ===================================================
   Screen Reader Only Text
   =================================================== */

.wc-epo-a11y-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ===================================================
   Focus Indicators - Swatches
   =================================================== */

/* General focus style for labels containing swatches */
label.tm-epo-field-label:focus {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

label.tm-epo-field-label.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Enhanced focus for visual swatches */
.tc-epo-style-wrapper:focus-within .tm-epo-style,
label.tm-epo-field-label.wc-epo-a11y-focused .tm-epo-style {
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
	transform: scale(1.05);
	transition: all 0.2s ease;
}

/* Round swatches */
.tm-epo-style.round:focus,
.tm-epo-style.round2:focus {
	outline: 3px solid #4A90E2;
	outline-offset: 3px;
}

/* Variation Swatches (Woodmart Product Variations) */
.wd-swatch:focus,
.wd-swatch.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
	transform: scale(1.05);
	transition: all 0.2s ease;
	z-index: 10;
}

.wd-swatch.wd-selected:focus,
.wd-swatch.wd-selected.wc-epo-a11y-focused {
	outline: 3px solid #2E7D32;
	box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.3);
}

/* ===================================================
   Focus Indicators - Accordions
   =================================================== */

.toggle-header:focus,
.toggle-header.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: -3px;
	box-shadow: inset 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* ===================================================
   Focus Indicators - Range Sliders
   =================================================== */

.tm-range-picker.wc-epo-a11y-focused {
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
	border-radius: 4px;
}

.noUi-handle:focus {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

.noUi-handle:focus::before,
.noUi-handle:focus::after {
	background: #4A90E2;
}

/* ===================================================
   Focus Indicators - Tabs
   =================================================== */

.tm-tab-header:focus,
.tm-tab-header.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: -3px;
	box-shadow: inset 0 0 0 3px rgba(74, 144, 226, 0.2);
	z-index: 1;
}

/* ===================================================
   Focus Indicators - Modals
   =================================================== */

.tc-lightbox-container:focus-within,
.tcfloatbox:focus-within {
	outline: 3px solid #4A90E2;
	outline-offset: -3px;
}

.floatbox-cancel:focus,
.tc-lightbox-close:focus {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

/* ===================================================
   Focus Indicators - Tooltips
   =================================================== */

[data-tm-tooltip-html]:focus,
[data-tm-tip-html]:focus {
	outline: 3px dashed #4A90E2;
	outline-offset: 2px;
}

.wc-epo-a11y-tooltip-visible {
	background-color: rgba(74, 144, 226, 0.1);
}

/* ===================================================
   Focus Indicators - Buttons & Links
   =================================================== */

.tm-extra-product-options button:focus,
.tm-extra-product-options .button:focus,
.tm-extra-product-options a:focus {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* ===================================================
   Focus Indicators - Header Dropdown
   =================================================== */

.wd-header-cats .menu-opener:focus,
.wd-header-cats .menu-opener.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* ===================================================
   Focus Indicators - Video Overlay
   =================================================== */

.elementor-custom-embed-image-overlay:focus,
.elementor-custom-embed-image-overlay.wc-epo-a11y-focused {
	outline: 3px solid #4A90E2;
	outline-offset: -3px;
	box-shadow: inset 0 0 0 3px rgba(74, 144, 226, 0.3);
}

.elementor-custom-embed-image-overlay:focus .elementor-custom-embed-play,
.elementor-custom-embed-image-overlay.wc-epo-a11y-focused .elementor-custom-embed-play {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

.elementor-custom-embed-image-overlay:focus .elementor-custom-embed-play svg,
.elementor-custom-embed-image-overlay.wc-epo-a11y-focused .elementor-custom-embed-play svg {
	fill: #4A90E2;
}

/* ===================================================
   High Contrast Mode Support
   =================================================== */

@media (prefers-contrast: high) {
	label.tm-epo-field-label:focus,
	label.tm-epo-field-label.wc-epo-a11y-focused {
		outline-width: 4px;
		outline-color: currentColor;
	}

	.toggle-header:focus,
	.toggle-header.wc-epo-a11y-focused {
		outline-width: 4px;
		outline-color: currentColor;
	}

	.tm-tab-header:focus,
	.tm-tab-header.wc-epo-a11y-focused {
		outline-width: 4px;
		outline-color: currentColor;
	}
}

/* ===================================================
   Reduced Motion Support
   =================================================== */

@media (prefers-reduced-motion: reduce) {
	.tc-epo-style-wrapper:focus-within .tm-epo-style,
	label.tm-epo-field-label.wc-epo-a11y-focused .tm-epo-style {
		transition: none;
		transform: none;
	}

	.elementor-custom-embed-image-overlay:focus .elementor-custom-embed-play,
	.elementor-custom-embed-image-overlay.wc-epo-a11y-focused .elementor-custom-embed-play {
		transition: none;
		transform: none;
	}

	.wd-swatch:focus,
	.wd-swatch.wc-epo-a11y-focused {
		transition: none;
		transform: none;
	}

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===================================================
   Skip to Content Link (Optional)
   =================================================== */

.wc-epo-a11y-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #4A90E2;
	color: white;
	padding: 8px;
	text-decoration: none;
	z-index: 100000;
}

.wc-epo-a11y-skip-link:focus {
	top: 0;
	outline: 3px solid white;
	outline-offset: -3px;
}

/* ===================================================
   Enhanced Hover States for Keyboard Users
   =================================================== */

/* Ensure hover states are also visible during keyboard focus */
label.tm-epo-field-label:focus .tc-label,
label.tm-epo-field-label.wc-epo-a11y-focused .tc-label {
	font-weight: bold;
}

/* ===================================================
   Keyboard Navigation Hints (Optional)
   =================================================== */

.wc-epo-a11y-hint {
	font-size: 0.875em;
	color: #666;
	font-style: italic;
	margin-top: 4px;
	display: block;
}

/* ===================================================
   Improved Contrast for Disabled Elements
   =================================================== */

.tm-extra-product-options input:disabled + label,
.tm-extra-product-options button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ===================================================
   Focus Visible Polyfill Support
   =================================================== */

/* Only show focus styles when using keyboard, not mouse */
.tm-extra-product-options *:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.tm-extra-product-options *:focus-visible {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
}

/* ===================================================
   Print Styles - Remove Focus Indicators
   =================================================== */

@media print {
	*:focus,
	.wc-epo-a11y-focused {
		outline: none !important;
		box-shadow: none !important;
	}
}