/**
 * PowerX Brands Component Styles
 * ThemeForest Commercial Standard - Clean, Universal, Responsive
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1.0 Component Scope & Card Dimensions
 * 2.0 Logo Wrap & SVG Scalability
 * 3.0 Dual Logo Cross-Fade Layering
 * 4.0 Interactive Hover Effects (Zoom, Glow, Grayscale)
 * 5.0 Classic Grid Layout
 * 6.0 Continuous Marquee Scroll Engine
 * 7.0 Swiper Carousel & Navigation Controls (Sharp Edges)
 * -----------------------------------------------------------------------------
 *
 * @package PowerX_Core
 */

/* =============================================================================
   1.0 COMPONENT SCOPE & CARD DIMENSIONS
   ============================================================================= */
.elementor-widget-px-brands,
.elementor-widget-px-brands-v2 {
	width: 100%;
}

.px-brands-wrapper {
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	--px-brand-gap: 20px;
	--px-brand-card-h: 150px;
	--px-brand-card-pad: 16px 20px;
	--px-brand-logo-max-h: 100px;
	--px-brand-logo-max-w: 100%;
}


/* ==========================================================================
   Card Styling
   ========================================================================== */
.px-brands-wrapper .px-brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--px-brand-card-h, 150px);
	min-height: var(--px-brand-card-h, 150px);
	padding: var(--px-brand-card-pad, 16px 20px);
	background-color: var(--px-brand-card-bg, var(--powerx-neutral-0, #ffffff));
	border-style: var(--px-brand-card-border-style, solid);
	border-width: var(--px-brand-card-border-width, 1px);
	border-color: var(--px-brand-card-border, transparent);
	outline: none;
	border-radius: var(--px-brand-card-radius, var(--powerx-radius-lg, 4px));
	position: relative;
	overflow: hidden;
	text-align: center;
	box-shadow: none;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anti-FOUC & Motion Stagger Isolation */
.px-brands-wrapper[data-px-motion="stagger"] .px-brand-card {
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}

.px-brands-wrapper[data-px-motion="stagger"].px-motion-active .px-brand-card {
	visibility: visible;
}

/* Guarantee 100% visibility in Elementor Editor Canvas */
body.elementor-editor-active .px-brands-wrapper .px-brand-card,
body.elementor-edit-mode .px-brands-wrapper .px-brand-card,
.elementor-editor-preview .px-brands-wrapper .px-brand-card {
	opacity: 1;
	visibility: visible;
	transform: none;
	filter: none;
}

.px-brands-wrapper .px-brand-card:hover {
	background-color: var(--px-brand-card-bg-hover, transparent);
	border-color: var(--px-brand-card-border-hover, var(--px-brand-card-border, transparent));
	outline: none;
	box-shadow: none;
	transform: none !important;
}

.px-brands-wrapper .px-brand-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border-radius: inherit;
}

.px-brands-wrapper .px-brand-link:focus-visible {
	outline: 2px solid var(--powerx-primary-500, #4945ff);
	outline-offset: -2px;
}

/* =============================================================================
   2.0 LOGO WRAP & SVG SCALABILITY
   ============================================================================= */
.px-brands-wrapper .px-brand-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: var(--px-brand-logo-max-h, 48px);
	max-height: var(--px-brand-logo-max-h, 48px);
}

.px-brands-wrapper .px-brand-logo-img {
	display: block;
	width: auto;
	height: 100%;
	max-height: var(--px-brand-logo-max-h, 48px);
	max-width: var(--px-brand-logo-max-w, 85%);
	object-fit: contain;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   3.0 DUAL LOGO CROSS-FADE LAYERING
   ============================================================================= */
.px-brands-wrapper .px-brand-logo-wrap.px-swap-p-s,
.px-brands-wrapper .px-brand-logo-wrap.px-swap-s-p {
	display: grid;
	place-items: center;
}

.px-brands-wrapper .px-brand-logo-wrap.px-swap-p-s .px-brand-logo-img,
.px-brands-wrapper .px-brand-logo-wrap.px-swap-s-p .px-brand-logo-img {
	grid-area: 1 / 1;
}

/* Mode 1: Primary visible initially, Secondary fades in on hover */
.px-brands-wrapper .px-brand-logo-wrap.px-swap-p-s .px-logo-primary {
	opacity: 1;
	z-index: var(--powerx-z-content, 1);
}
.px-brands-wrapper .px-brand-logo-wrap.px-swap-p-s .px-logo-secondary {
	opacity: 0;
	z-index: var(--powerx-z-card, 2);
	pointer-events: none;
}
.px-brands-wrapper .px-brand-card:hover .px-brand-logo-wrap.px-swap-p-s .px-logo-primary {
	opacity: 0;
}
.px-brands-wrapper .px-brand-card:hover .px-brand-logo-wrap.px-swap-p-s .px-logo-secondary {
	opacity: 1;
	pointer-events: auto;
}

/* Mode 2: Secondary visible initially, Primary fades in on hover */
.px-brands-wrapper .px-brand-logo-wrap.px-swap-s-p .px-logo-secondary {
	opacity: 1;
	z-index: var(--powerx-z-content, 1);
}
.px-brands-wrapper .px-brand-logo-wrap.px-swap-s-p .px-logo-primary {
	opacity: 0;
	z-index: var(--powerx-z-card, 2);
	pointer-events: none;
}
.px-brands-wrapper .px-brand-card:hover .px-brand-logo-wrap.px-swap-s-p .px-logo-secondary {
	opacity: 0;
}
.px-brands-wrapper .px-brand-card:hover .px-brand-logo-wrap.px-swap-s-p .px-logo-primary {
	opacity: 1;
	pointer-events: auto;
}

.px-brands-wrapper .px-brand-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-align: center;
	word-break: break-word;
	color: var(--px-brand-title-color, var(--powerx-text-heading, #0f172a));
	padding: 8px 14px;
	border-radius: var(--powerx-radius-sm, 4px);
	background: var(--px-brand-title-bg, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--px-brand-title-border, rgba(0, 0, 0, 0.06));
	transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 90%;
}

.px-brands-wrapper .px-brand-card:hover .px-brand-title {
	color: var(--e-global-color-primary, var(--powerx-primary-500, #4945ff));
	border-color: var(--e-global-color-primary, var(--powerx-primary-500, #4945ff));
	background: rgba(73, 69, 255, 0.05);
}

/* =============================================================================
   4.0 INTERACTIVE HOVER EFFECTS (ZOOM, GLOW, GRAYSCALE)
   ============================================================================= */
.px-brands-wrapper.px-effect-zoom .px-brand-card:hover .px-brand-logo-img {
	filter: brightness(1.05);
}

.px-brands-wrapper.px-effect-shadow .px-brand-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.px-brands-wrapper.px-effect-opacity .px-brand-logo-img {
	opacity: 0.7;
}
.px-brands-wrapper.px-effect-opacity .px-brand-card:hover .px-brand-logo-img {
	opacity: 1;
}

.px-brands-wrapper.px-effect-glow .px-brand-card:hover {
	box-shadow: 0 8px 24px rgba(255, 212, 0, 0.2);
}

.px-brands-wrapper.px-is-grayscale .px-brand-logo-img {
	filter: grayscale(100%);
}
.px-brands-wrapper.px-is-grayscale .px-brand-card:hover .px-brand-logo-img {
	filter: grayscale(0%);
}

/* =============================================================================
   5.0 CLASSIC GRID LAYOUT
   ============================================================================= */
.px-brands-wrapper .px-brand-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(var(--px-grid-cols, 6), minmax(0, 1fr));
	gap: var(--px-brand-gap, 20px);
}

/* =============================================================================
   6.0 CONTINUOUS MARQUEE SCROLL ENGINE
   ============================================================================= */
.px-brands-wrapper .px-marquee-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	container-type: inline-size;
}

.px-brands-wrapper .px-marquee-track {
	display: flex;
	align-items: center;
	gap: var(--px-brand-gap, 20px);
	width: max-content;
	animation: px-brands-scroll var(--px-marquee-duration, 30s) linear infinite;
	will-change: transform;
}

.px-brands-wrapper.px-layout-marquee .px-brand-card,
.px-brands-wrapper .px-marquee-track .px-brand-card {
	flex: 0 0 var(--px-brand-card-w, calc((100% - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
	width: var(--px-brand-card-w, calc((100% - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
	max-width: var(--px-brand-card-w, calc((100% - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
	min-width: 0;
}

@supports (width: 1cqw) {
	.px-brands-wrapper.px-layout-marquee .px-brand-card,
	.px-brands-wrapper .px-marquee-track .px-brand-card {
		flex: 0 0 var(--px-brand-card-w, calc((100cqw - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
		width: var(--px-brand-card-w, calc((100cqw - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
		max-width: var(--px-brand-card-w, calc((100cqw - ((var(--px-grid-cols, 6) - 1) * var(--px-brand-gap, 20px))) / var(--px-grid-cols, 6)));
	}
}

.px-brands-wrapper .px-marquee-track.px-direction-right {
	animation-direction: reverse;
}

.px-brands-wrapper.px-pause-on-hover:hover .px-marquee-track,
.px-brands-wrapper .px-marquee-container.px-pause-on-hover:hover .px-marquee-track {
	animation-play-state: paused;
}

.px-brands-wrapper .px-fade-mask,
.px-brands-wrapper.px-fade-mask {
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

@keyframes px-brands-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* =============================================================================
   7.0 SWIPER CAROUSEL & NAVIGATION CONTROLS (SHARP EDGES)
   ============================================================================= */
.px-brands-wrapper .px-brands-carousel-container {
	position: relative;
	width: 100%;
}

.px-brands-wrapper .px-brand-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.px-brands-wrapper .px-brand-swiper .swiper-wrapper {
	display: flex;
	align-items: center;
}

.px-brands-wrapper .px-brand-swiper .swiper-slide {
	flex-shrink: 0;
	height: auto;
}

/* Navigation Arrows */
.px-brands-wrapper .px-brand-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--px-brand-arrow-size, 42px);
	height: var(--px-brand-arrow-size, 42px);
	background: var(--px-brand-arrow-bg, var(--powerx-surface-0, #ffffff));
	border-width: var(--px-brand-arrow-border-width, 0px);
	border-style: var(--px-brand-arrow-border-style, none);
	border-color: var(--px-brand-arrow-border, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--px-brand-arrow-color, var(--powerx-text-title, #1e293b));
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	z-index: var(--powerx-z-active, 30);
	transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
	-webkit-user-select: none;
}

.px-brands-wrapper .px-brand-nav-btn svg {
	width: var(--px-brand-arrow-icon-size, 18px);
	height: var(--px-brand-arrow-icon-size, 18px);
	transition: fill 0.25s ease, stroke 0.25s ease, transform 0.25s ease;
}

.px-brands-wrapper .px-brand-nav-btn:hover {
	background: var(--e-global-color-primary, var(--powerx-primary-color, var(--powerx-primary-500, #4945ff)));
	color: var(--powerx-color-on-dark, #ffffff);
	border-color: transparent;
	transform: translateY(-50%);
	box-shadow: 0 6px 20px rgba(73, 69, 255, 0.25);
}

.px-brands-wrapper .px-brand-prev,
.px-brands-wrapper .px-arrows-outside .px-brand-prev {
	left: var(--px-brand-arrow-offset, -18px);
}

.px-brands-wrapper .px-brand-next,
.px-brands-wrapper .px-arrows-outside .px-brand-next {
	right: var(--px-brand-arrow-offset, -18px);
}

.px-brands-wrapper .px-arrows-inside .px-brand-prev {
	left: 10px;
}

.px-brands-wrapper .px-arrows-inside .px-brand-next {
	right: 10px;
}

@media (max-width: 767px) {
	.px-brands-wrapper .px-arrows-hide-mobile .px-brand-nav-btn,
	.px-brands-wrapper.px-arrows-hide-mobile .px-brand-nav-btn {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.px-brands-wrapper .px-arrows-hide-tablet .px-brand-nav-btn,
	.px-brands-wrapper.px-arrows-hide-tablet .px-brand-nav-btn {
		display: none;
	}
}

/* Pagination Dots */
.px-brands-wrapper .px-brand-pagination {
	position: relative;
	margin-top: var(--px-brand-dot-offset-y, 20px);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-brand-dot-gap, 8px);
	z-index: var(--powerx-z-active, 20);
}

.px-brands-wrapper .px-brand-pagination .swiper-pagination-bullet {
	width: var(--px-brand-dot-size, 8px);
	height: var(--px-brand-dot-size, 8px);
	background: var(--px-brand-bullet-bg, var(--powerx-border-medium, #94a3b8));
	opacity: 0.5;
	border-radius: var(--px-brand-dot-radius, 0);
	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-brands-wrapper .px-brand-pagination .swiper-pagination-bullet:hover {
	opacity: 0.9;
	background: var(--px-brand-bullet-hover-bg, var(--powerx-border-light, #cbd5e1));
}

.px-brands-wrapper .px-brand-pagination .swiper-pagination-bullet-active {
	width: 24px;
	opacity: 1;
	background: var(--e-global-color-primary, var(--powerx-primary-color, var(--powerx-primary-500, #4945ff)));
}

@media (prefers-reduced-motion: reduce) {
	.px-brands-wrapper .px-marquee-track {
		animation: none;
		will-change: auto;
		transform: none;
	}
	.px-brands-wrapper .px-marquee-container {
		overflow-x: auto;
		scrollbar-width: thin;
	}
}