/**
 * PowerX Core - Universal Widget CSS Primitives
 *
 * Single source of truth for:
 *   1.0 Universal Accessible Focus-Visible Ring (WCAG 2.2 AA)
 *   2.0 Universal Card Surface Standard (Borders, Elevation & Hovers)
 *   3.0 Universal Empty-State & Placeholder Component
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

/* =============================================================================
 * 1.0 UNIVERSAL ACCESSIBLE FOCUS-VISIBLE PRIMITIVE
 * ============================================================================= */
:root {
	--px-focus-ring-width: 2px;
	--px-focus-ring-offset: 2px;
	--px-focus-ring-color: var(--powerx-primary-500, #4945ff);
	--px-focus-ring-style: solid;
}

.px-focus-visible:focus-visible,
.px-card-surface:focus-visible,
.elementor-widget[class*="elementor-widget-px-"] a:focus-visible,
.elementor-widget[class*="elementor-widget-px-"] button:focus-visible,
.elementor-widget[class*="elementor-widget-px-"] [tabindex="0"]:focus-visible,
.powerx-cat-card:focus-visible,
.px-product-card:focus-visible,
.px-kb-item-header:focus-visible,
.px-brand-card:focus-visible {
	outline: var(--px-focus-ring-width) var(--px-focus-ring-style) var(--px-focus-ring-color);
	outline-offset: var(--px-focus-ring-offset);
	transition: outline-offset 0.15s ease;
}

@media (forced-colors: active) {
	.px-focus-visible:focus-visible,
	.px-card-surface:focus-visible,
	.elementor-widget[class*="elementor-widget-px-"] a:focus-visible,
	.elementor-widget[class*="elementor-widget-px-"] button:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

/* =============================================================================
 * 2.0 UNIVERSAL CARD SURFACE PRIMITIVE (SSOT ARCHITECTURE)
 * ============================================================================= */
:root {
	--px-card-surface-bg: var(--powerx-neutral-0, #ffffff);
	--px-card-surface-border: var(--powerx-neutral-150, #eaeaef);
	--px-card-surface-border-width: 1px;
	--px-card-surface-radius: var(--powerx-radius-sm, 4px);
	--px-card-surface-shadow: var(--powerx-shadow-sm, 0 1px 3px 0 rgba(33, 33, 52, 0.08));
	--px-card-surface-hover-border: var(--powerx-neutral-300, #c0c0cf);
	--px-card-surface-hover-shadow: var(--powerx-shadow-md, 0 4px 6px -1px rgba(33, 33, 52, 0.08));
}

.px-card-surface {
	background-color: var(--px-card-surface-bg);
	border: var(--px-card-surface-border-width) solid var(--px-card-surface-border);
	border-radius: var(--px-card-surface-radius);
	box-shadow: var(--px-card-surface-shadow);
	box-sizing: border-box;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
	position: relative;
}

.px-card-surface:hover,
.px-card-surface--hover:hover {
	border-color: var(--px-card-surface-hover-border);
	box-shadow: var(--px-card-surface-hover-shadow);
}

.px-card-surface--flat {
	box-shadow: none;
}

.px-card-surface--ghost {
	border-color: transparent;
	box-shadow: none;
	background-color: transparent;
}

/* =============================================================================
 * 3.0 UNIVERSAL EMPTY-STATE & PLACEHOLDER PRIMITIVE
 * ============================================================================= */
.px-widget-empty-state,
.px-widget-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 24px;
	background-color: var(--powerx-neutral-100, #f6f6f9);
	border: 1.5px dashed var(--powerx-neutral-200, #dcdce4);
	border-radius: var(--powerx-radius-sm, 4px);
	color: var(--powerx-neutral-600, #666687);
	font-family: var(--powerx-font-family, inherit);
	box-sizing: border-box;
	width: 100%;
	margin: 12px 0;
}

.px-widget-empty-state__icon,
.px-widget-placeholder__icon {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 12px;
	color: var(--powerx-neutral-400, #a5a5ba);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.px-widget-empty-state__title,
.px-widget-placeholder__title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--powerx-neutral-800, #32324d);
	margin: 0 0 6px 0;
	line-height: 1.35;
}

.px-widget-empty-state__desc,
.px-widget-placeholder__desc {
	font-size: 13px;
	color: var(--powerx-neutral-600, #666687);
	margin: 0;
	max-width: 480px;
	line-height: 1.5;
}

/* =============================================================================
 * 4.0 UNIVERSAL CAROUSEL NAVIGATION ARROWS PRIMITIVE (TASK 237)
 * ============================================================================= */
:root {
	--px-arrow-size: 42px;
	--px-arrow-bg: var(--powerx-neutral-0, #ffffff);
	--px-arrow-color: var(--powerx-neutral-900, #1e293b);
	--px-arrow-border: var(--powerx-neutral-150, #eaeaef);
	--px-arrow-radius: var(--powerx-radius-sm, 4px);
	--px-arrow-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	--px-arrow-hover-bg: var(--powerx-primary-500, #4945ff);
	--px-arrow-hover-color: #ffffff;
	--px-arrow-hover-border: var(--powerx-primary-500, #4945ff);
	--px-arrow-hover-shadow: 0 6px 20px rgba(73, 69, 255, 0.25);
	--px-arrow-offset: -18px;
}

.px-carousel-nav,
.px-brand-nav-btn,
.px-prod-nav-btn,
.px-cat-nav-btn,
.px-slider-nav-btn,
.px-loop-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--px-arrow-size);
	height: var(--px-arrow-size);
	background: var(--px-arrow-bg);
	border: 1px solid var(--px-arrow-border);
	border-radius: var(--px-arrow-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--px-arrow-color);
	box-shadow: var(--px-arrow-shadow);
	cursor: pointer;
	z-index: var(--powerx-z-active, 10);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	user-select: none;
	-webkit-user-select: none;
	padding: 0;
	margin: 0;
}

.px-carousel-nav svg,
.px-brand-nav-btn svg,
.px-prod-nav-btn svg,
.px-cat-nav-btn svg,
.px-slider-nav-btn svg,
.px-loop-nav svg {
	width: 18px;
	height: 18px;
	transition: fill 0.25s ease, stroke 0.25s ease;
}

.px-carousel-nav:hover,
.px-brand-nav-btn:hover,
.px-prod-nav-btn:hover,
.px-cat-nav-btn:hover,
.px-slider-nav-btn:hover,
.px-loop-nav:hover {
	background: var(--px-arrow-hover-bg);
	color: var(--px-arrow-hover-color);
	border-color: var(--px-arrow-hover-border);
	box-shadow: var(--px-arrow-hover-shadow);
}

.px-carousel-prev,
.px-brand-prev,
.px-prod-prev,
.px-cat-prev,
.px-slider-prev,
.px-loop-prev,
.px-arrows-outside .px-carousel-prev,
.px-arrows-outside .px-brand-prev,
.px-arrows-outside .px-prod-prev,
.px-arrows-outside .px-cat-prev {
	left: var(--px-arrow-offset);
}

.px-carousel-next,
.px-brand-next,
.px-prod-next,
.px-cat-next,
.px-slider-next,
.px-loop-next,
.px-arrows-outside .px-carousel-next,
.px-arrows-outside .px-brand-next,
.px-arrows-outside .px-prod-next,
.px-arrows-outside .px-cat-next {
	right: var(--px-arrow-offset);
}

.px-arrows-inside .px-carousel-prev,
.px-arrows-inside .px-brand-prev,
.px-arrows-inside .px-prod-prev,
.px-arrows-inside .px-cat-prev,
.px-arrows-inside .px-slider-prev,
.px-arrows-inside .px-loop-prev {
	left: 10px;
}

.px-arrows-inside .px-carousel-next,
.px-arrows-inside .px-brand-next,
.px-arrows-inside .px-prod-next,
.px-arrows-inside .px-cat-next,
.px-arrows-inside .px-slider-next,
.px-arrows-inside .px-loop-next {
	right: 10px;
}

.swiper-button-disabled.px-carousel-nav,
.swiper-button-disabled.px-brand-nav-btn,
.swiper-button-disabled.px-prod-nav-btn,
.swiper-button-disabled.px-cat-nav-btn,
.swiper-button-disabled.px-slider-nav-btn,
.swiper-button-disabled.px-loop-nav,
.px-carousel-nav.swiper-button-disabled,
.px-brand-nav-btn.swiper-button-disabled,
.px-prod-nav-btn.swiper-button-disabled,
.px-cat-nav-btn.swiper-button-disabled,
.px-slider-nav-btn.swiper-button-disabled,
.px-loop-nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 767px) {
	.px-arrows-hide-mobile .px-carousel-nav,
	.px-arrows-hide-mobile .px-brand-nav-btn,
	.px-arrows-hide-mobile .px-prod-nav-btn,
	.px-arrows-hide-mobile .px-cat-nav-btn,
	.px-arrows-hide-mobile .px-slider-nav-btn,
	.px-arrows-hide-mobile .px-loop-nav,
	[class*="-wrapper"].px-arrows-hide-mobile [class*="-nav-btn"],
	[class*="-widget"].px-arrows-hide-mobile [class*="-nav-btn"] {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.px-arrows-hide-tablet .px-carousel-nav,
	.px-arrows-hide-tablet .px-brand-nav-btn,
	.px-arrows-hide-tablet .px-prod-nav-btn,
	.px-arrows-hide-tablet .px-cat-nav-btn,
	.px-arrows-hide-tablet .px-slider-nav-btn,
	.px-arrows-hide-tablet .px-loop-nav,
	[class*="-wrapper"].px-arrows-hide-tablet [class*="-nav-btn"],
	[class*="-widget"].px-arrows-hide-tablet [class*="-nav-btn"] {
		display: none;
	}
}

/* =============================================================================
 * 5.0 UNIVERSAL CAROUSEL PAGINATION PRIMITIVE (TASK 238)
 * ============================================================================= */
:root {
	--px-bullet-size: 8px;
	--px-bullet-active-w: 24px;
	--px-bullet-bg: var(--powerx-neutral-400, #94a3b8);
	--px-bullet-hover-bg: var(--powerx-neutral-300, #cbd5e1);
	--px-bullet-active-bg: var(--powerx-primary-500, #4945ff);
	--px-bullet-radius: var(--powerx-radius-sm, 4px);
}

.px-carousel-dots,
.px-brand-pagination,
.px-prod-pagination,
.px-cat-pagination,
.px-slider-wrapper .swiper-pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: var(--powerx-z-active, 20);
}

.px-carousel-dots .swiper-pagination-bullet,
.px-brand-pagination .swiper-pagination-bullet,
.px-prod-pagination .swiper-pagination-bullet,
.px-cat-pagination .swiper-pagination-bullet,
.px-slider-wrapper .swiper-pagination-bullet {
	width: var(--px-bullet-size);
	height: var(--px-bullet-size);
	background: var(--px-bullet-bg);
	opacity: 0.5;
	border-radius: var(--px-bullet-radius);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0;
	cursor: pointer;
	display: inline-block;
}

.px-carousel-dots .swiper-pagination-bullet:hover,
.px-brand-pagination .swiper-pagination-bullet:hover,
.px-prod-pagination .swiper-pagination-bullet:hover,
.px-cat-pagination .swiper-pagination-bullet:hover,
.px-slider-wrapper .swiper-pagination-bullet:hover {
	opacity: 0.9;
	background: var(--px-bullet-hover-bg);
}

.px-carousel-dots .swiper-pagination-bullet-active,
.px-brand-pagination .swiper-pagination-bullet-active,
.px-prod-pagination .swiper-pagination-bullet-active,
.px-cat-pagination .swiper-pagination-bullet-active,
.px-slider-wrapper .swiper-pagination-bullet-active {
	width: var(--px-bullet-active-w);
	opacity: 1;
	background: var(--px-bullet-active-bg);
}

/* =============================================================================
 * 6.0 UNIVERSAL COLLECTION GRID & SWIPER PRIMITIVES (TASK 384)
 * ============================================================================= */
.px-collection-grid,
.px-loop-grid-wrapper,
.px-products-grid-container {
	display: grid;
	grid-template-columns: repeat(var(--px-grid-cols, 4), minmax(0, 1fr));
	gap: var(--px-grid-gap, 16px);
	width: 100%;
}

.px-collection-swiper,
.px-loop-swiper,
.px-prod-swiper,
.px-cat-swiper,
.px-brand-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin: 0;
	padding: 0;
}

.px-collection-swiper.px-swiper-linear .swiper-wrapper,
.px-loop-swiper.px-swiper-linear .swiper-wrapper {
	transition-timing-function: linear;
}

/* =============================================================================
 * 7.0 UNIVERSAL MENU-TREE & ACCORDION STATE PRIMITIVES (TASKS 373 & 397)
 * ============================================================================= */
:root {
	--px-menu-tree-indent: 16px;
	--px-menu-tree-line-color: var(--powerx-neutral-200, #e2e8f0);
	--px-menu-tree-line-width: 1px;
	--px-menu-bullet-size: 5px;
	--px-menu-bullet-color: var(--powerx-neutral-400, #a5a5ba);
	--px-menu-bullet-active-color: var(--powerx-primary-500, #4945ff);
	--px-menu-item-radius: var(--powerx-radius-sm, 4px);
}

/* Unified Open & Closed State Contract */
[data-state="closed"] > [role="region"],
[data-state="closed"] > .px-acc-panel,
.is-closed > [role="region"],
.is-closed > .px-acc-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

[data-state="open"] > [role="region"],
[data-state="open"] > .px-acc-panel,
.is-open > [role="region"],
.is-open > .px-acc-panel {
	max-height: none;
	opacity: 1;
	overflow: visible;
}

/* Unified State Trigger State Contract */
[data-state="open"] > button,
[data-state="open"] > .px-acc-trigger,
.is-open > button,
.is-open > .px-acc-trigger {
	color: var(--powerx-primary-500, #4945ff);
}

/* Universal Menu Tree Bullet & Sublist */
.px-menu-tree-bullet,
.px-acc-bullet {
	width: var(--px-menu-bullet-size);
	height: var(--px-menu-bullet-size);
	border-radius: 50%;
	background-color: var(--px-menu-bullet-color);
	flex-shrink: 0;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.px-menu-tree-sublist,
.px-acc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}