/**
 * PowerX Icon Box Component Styles
 * ThemeForest Commercial Standard - Clean, Universal, Responsive
 *
 * Architecture (Tasks 244 & 381):
 * - Direction/alignment custom property contract (--px-ib-direction, --px-ib-valign).
 * - Eliminates redundant combinatorial selector explosions via scoped layout rules.
 * - Strict SSOT design tokens, 4px border radius standard, and zero hover lift.
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1.0 Component Scope & Card Container
 * 2.0 Layout Grid & Alignment (Unified Custom Properties Contract)
 * 3.0 Icon Area & Background Shaping
 * 4.0 Content Area (Title & Description)
 * 5.0 Action Button & Link (Stacked / Inline)
 * 6.0 Responsive Breakpoints (Tablet & Mobile)
 * -----------------------------------------------------------------------------
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

/* =============================================================================
   1.0 COMPONENT SCOPE & CARD CONTAINER
   ============================================================================= */
.elementor-widget-px-icon-box {
	max-width: 100%;
}

.elementor-widget-px-icon-box:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial) {
	width: 100%;
}

.px-icon-box-wrapper {
	position: relative;
	max-width: 100%;
	width: 100%;
}

.px-icon-box-card {
	display: flex;
	flex-direction: var(--px-ib-direction, row);
	align-items: var(--px-ib-valign, center);
	width: 100%;
	max-width: 100%;
	position: relative;
	background-color: var(--px-ib-bg, transparent);
	border-width: var(--px-ib-border-width, 1px);
	border-style: var(--px-ib-border-style, none);
	border-color: var(--px-ib-border, transparent);
	border-radius: var(--px-ib-radius, var(--powerx-radius-sm, 4px));
	padding: var(--px-ib-padding, 24px 28px);
	box-shadow: var(--px-ib-shadow, none);
	gap: var(--px-ib-gap, 24px);
	transition: background-color var(--px-ib-transition, 0.3s) cubic-bezier(0.4, 0, 0.2, 1),
	            border-color var(--px-ib-transition, 0.3s) cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow var(--px-ib-transition, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	color: inherit;
}

/* Elementor Inline & Flex Container Support */
.elementor-widget-px-icon-box.elementor-widget__width-auto,
.elementor-widget-px-icon-box.elementor-widget__width-initial {
	width: auto;
	flex: 0 0 auto;
}

.elementor-widget-px-icon-box.elementor-widget__width-auto .px-icon-box-wrapper,
.elementor-widget-px-icon-box.elementor-widget__width-initial .px-icon-box-wrapper,
.elementor-widget-px-icon-box.elementor-widget__width-auto .px-icon-box-card,
.elementor-widget-px-icon-box.elementor-widget__width-initial .px-icon-box-card {
	width: auto;
}

.px-icon-box-card:hover {
	background-color: var(--px-ib-bg-hover, var(--px-ib-bg, transparent));
	border-color: var(--px-ib-border-hover, var(--px-ib-border, transparent));
	box-shadow: var(--px-ib-shadow-hover, var(--px-ib-shadow, none));
}

/* Card Link Mode */
a.px-icon-box-card {
	cursor: pointer;
}

/* =============================================================================
   2.0 LAYOUT GRID & ALIGNMENT (UNIFIED CUSTOM PROPERTIES CONTRACT)
   ============================================================================= */

/* Position: Left (Default) */
.elementor-widget-px-icon-box.px-pos-left {
	--px-ib-direction: row;
}

.elementor-widget-px-icon-box.px-pos-left .px-ib-content {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/* Position: Right */
.elementor-widget-px-icon-box.px-pos-right {
	--px-ib-direction: row-reverse;
}

.elementor-widget-px-icon-box.px-pos-right .px-ib-content {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/* Position: Top */
.elementor-widget-px-icon-box.px-pos-top {
	--px-ib-direction: column;
	--px-ib-valign: flex-start;
}

.elementor-widget-px-icon-box.px-pos-top .px-ib-content {
	width: 100%;
	flex: 1 1 auto;
}

.elementor-widget-px-icon-box.px-pos-top .px-ib-icon-wrapper {
	margin-left: 0;
	margin-right: auto;
	align-self: flex-start;
}

.elementor-widget-px-icon-box.px-pos-top .px-ib-action-wrapper {
	margin-left: 0;
	margin-right: auto;
	align-self: var(--px-ib-action-self, flex-start);
	align-items: var(--px-ib-action-items, flex-start);
	justify-content: var(--px-ib-action-justify, flex-start);
	text-align: var(--px-ib-action-text-align, left);
	width: 100%;
	flex: 0 0 100%;
	margin-top: var(--px-ib-action-margin-top, 16px);
}

/* Overall Alignment Classes - Desktop */
.elementor-widget-px-icon-box.px-align-center .px-icon-box-card,
.elementor-widget-px-icon-box.px-align-center .px-ib-title,
.elementor-widget-px-icon-box.px-align-center .px-ib-desc {
	text-align: center;
}
.elementor-widget-px-icon-box.px-align-center .px-icon-box-card {
	--px-ib-action-self: center;
	--px-ib-action-items: center;
	--px-ib-action-justify: center;
	--px-ib-action-text-align: center;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-center .px-ib-icon-wrapper {
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-center .px-ib-action-wrapper {
	margin-left: auto;
	margin-right: auto;
	align-self: center;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.elementor-widget-px-icon-box.px-align-right .px-icon-box-card,
.elementor-widget-px-icon-box.px-align-right .px-ib-title,
.elementor-widget-px-icon-box.px-align-right .px-ib-desc {
	text-align: right;
}
.elementor-widget-px-icon-box.px-align-right .px-icon-box-card {
	--px-ib-action-self: flex-end;
	--px-ib-action-items: flex-end;
	--px-ib-action-justify: flex-end;
	--px-ib-action-text-align: right;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-right .px-ib-icon-wrapper {
	margin-left: auto;
	margin-right: 0;
	align-self: flex-end;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-right .px-ib-action-wrapper {
	margin-left: auto;
	margin-right: 0;
	align-self: flex-end;
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}

.elementor-widget-px-icon-box.px-align-left .px-icon-box-card,
.elementor-widget-px-icon-box.px-align-left .px-ib-title,
.elementor-widget-px-icon-box.px-align-left .px-ib-desc {
	text-align: left;
}
.elementor-widget-px-icon-box.px-align-left .px-icon-box-card {
	--px-ib-action-self: flex-start;
	--px-ib-action-items: flex-start;
	--px-ib-action-justify: flex-start;
	--px-ib-action-text-align: left;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-left .px-ib-icon-wrapper {
	margin-left: 0;
	margin-right: auto;
	align-self: flex-start;
}
.elementor-widget-px-icon-box.px-pos-top.px-align-left .px-ib-action-wrapper {
	margin-left: 0;
	margin-right: auto;
	align-self: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

/* =============================================================================
   3.0 ICON AREA & BACKGROUND SHAPING
   ============================================================================= */
.px-ib-icon-wrapper,
.elementor-widget-px-icon-box .px-ib-icon-wrapper,
.elementor-widget-px-icon-box.elementor-view-stacked .elementor-icon,
.elementor-widget-px-icon-box .elementor-view-stacked .elementor-icon,
.elementor-widget-px-icon-box .elementor-icon,
.px-icon-box-card .px-ib-icon-wrapper,
.px-icon-box-card.elementor-view-stacked .elementor-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--px-ib-icon-box-size, 80px);
	height: var(--px-ib-icon-box-size, 80px);
	min-width: var(--px-ib-icon-box-size, 80px);
	min-height: var(--px-ib-icon-box-size, 80px);
	background-color: var(--px-ib-icon-bg, transparent);
	border-width: var(--px-ib-icon-border-width, 1px);
	border-style: var(--px-ib-icon-border-style, none);
	border-color: var(--px-ib-icon-border-color, transparent);
	border-radius: var(--px-ib-icon-radius, var(--powerx-radius-full, 9999px));
	color: var(--px-ib-icon-color, var(--powerx-primary-500, #4945ff));
	padding: 0;
	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),
	            color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-icon-wrapper,
.elementor-widget-px-icon-box:hover .px-ib-icon-wrapper,
.elementor-widget-px-icon-box:hover .elementor-icon,
.elementor-widget-px-icon-box.elementor-view-stacked:hover .elementor-icon {
	background-color: var(--px-ib-icon-bg-hover, var(--px-ib-icon-bg, transparent));
	border-color: var(--px-ib-icon-border-color-hover, var(--px-ib-icon-border-color, transparent));
	color: var(--px-ib-icon-color-hover, var(--px-ib-icon-color, currentColor));
}

.px-ib-icon-wrapper i,
.px-ib-icon-wrapper svg {
	font-size: var(--px-ib-icon-size, 60px);
	width: var(--px-ib-icon-size, 60px);
	min-width: var(--px-ib-icon-size, 60px);
	max-width: var(--px-ib-icon-size, 60px);
	height: var(--px-ib-icon-size, 60px);
	min-height: var(--px-ib-icon-size, 60px);
	flex-shrink: 0;
	line-height: 1;
	display: inline-block;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
	transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

/* SVG Path & Shape color inheritance for Illustrator/Figma scoped icons */
.px-ib-icon-wrapper svg path,
.px-ib-icon-wrapper svg polygon,
.px-ib-icon-wrapper svg circle,
.px-ib-icon-wrapper svg rect,
.px-ib-icon-wrapper svg [class*="st"] {
	fill: currentColor;
	transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-icon-wrapper svg path,
.px-icon-box-card:hover .px-ib-icon-wrapper svg polygon,
.px-icon-box-card:hover .px-ib-icon-wrapper svg circle,
.px-icon-box-card:hover .px-ib-icon-wrapper svg rect,
.px-icon-box-card:hover .px-ib-icon-wrapper svg [class*="st"] {
	fill: currentColor;
}

.px-ib-icon-wrapper img.px-ib-img {
	width: var(--px-ib-icon-size, 60px);
	min-width: var(--px-ib-icon-size, 60px);
	max-width: var(--px-ib-icon-size, 60px);
	height: auto;
	display: block;
	object-fit: contain;
}

/* Icon view default (No background box) */
.px-icon-box-card.px-icon-view-default .px-ib-icon-wrapper,
.elementor-view-default .px-ib-icon-wrapper,
.elementor-view-default .elementor-icon {
	background-color: transparent;
	border-color: transparent;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	border-radius: var(--powerx-radius-sm, 4px);
}

/* =============================================================================
   4.0 CONTENT AREA (TITLE & DESCRIPTION)
   ============================================================================= */
.px-ib-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: var(--px-ib-content-valign, flex-start);
	min-width: 0;
	width: 100%;
}

.px-ib-title {
	width: 100%;
	margin: 0 0 var(--px-ib-title-gap, 8px) 0;
	padding: 0;
	color: var(--px-ib-title-color, var(--powerx-heading-color, var(--powerx-neutral-900, #212134)));
	font-size: var(--px-ib-title-size, 20px);
	font-weight: var(--px-ib-title-weight, 700);
	line-height: 1.35;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-title {
	color: var(--px-ib-title-color-hover, var(--px-ib-title-color, inherit));
}

.px-ib-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.px-icon-box-card:hover .px-ib-title a {
	color: inherit;
}

.px-ib-desc {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--px-ib-desc-color, var(--powerx-text-color, var(--powerx-neutral-600, #666687)));
	font-size: var(--px-ib-desc-size, var(--powerx-card-desc-size, 15px));
	line-height: 1.6;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-desc {
	color: var(--px-ib-desc-color-hover, var(--px-ib-desc-color, var(--powerx-neutral-700, #4a4a6a)));
}

/* =============================================================================
   5.0 ACTION BUTTON & LINK (STACKED / INLINE)
   ============================================================================= */
.px-ib-action-wrapper {
	flex-shrink: 0;
	display: flex;
	align-self: var(--px-ib-action-self, var(--px-ib-action-valign, center));
	align-items: var(--px-ib-action-items, center);
	justify-content: var(--px-ib-action-justify, center);
	text-align: var(--px-ib-action-text-align, center);
	text-decoration: none;
	color: inherit;
}

/* Stacked Layout (Circle arrow on top, text below) */
.px-ib-action-wrapper.px-action-stacked {
	flex-direction: column;
	align-items: var(--px-ib-action-items, center);
	justify-content: var(--px-ib-action-justify, center);
	text-align: var(--px-ib-action-text-align, center);
	gap: var(--px-ib-action-gap, 8px);
}

/* Inline Layout (Text and icon side by side) */
.px-ib-action-wrapper.px-action-inline {
	flex-direction: row;
	align-items: center;
	justify-content: var(--px-ib-action-justify, flex-start);
	text-align: var(--px-ib-action-text-align, left);
	gap: var(--px-ib-action-gap, 8px);
}

/* Action Position: Bottom */
.elementor-widget-px-icon-box.px-action-pos-bottom .px-icon-box-card {
	flex-wrap: wrap;
}
.elementor-widget-px-icon-box.px-action-pos-bottom .px-ib-action-wrapper {
	width: 100%;
	flex: 0 0 100%;
	margin-top: var(--px-ib-action-margin-top, 16px);
}

/* Action Alignments */
.elementor-widget-px-icon-box.px-action-align-left .px-ib-action-wrapper {
	justify-content: flex-start;
	align-items: flex-start;
	align-self: flex-start;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

.elementor-widget-px-icon-box.px-action-align-center .px-ib-action-wrapper {
	justify-content: center;
	align-items: center;
	align-self: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.elementor-widget-px-icon-box.px-action-align-right .px-ib-action-wrapper {
	justify-content: flex-end;
	align-items: flex-end;
	align-self: flex-end;
	text-align: right;
	margin-left: auto;
	margin-right: 0;
}

/* Action Icon Circle Button */
.px-ib-action-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--px-ib-action-btn-size, 46px);
	height: var(--px-ib-action-btn-size, 46px);
	border-radius: var(--px-ib-action-btn-radius, var(--powerx-radius-full, 9999px));
	border-width: var(--px-ib-action-btn-border-width, 2px);
	border-style: var(--px-ib-action-btn-border-style, solid);
	border-color: var(--px-ib-action-btn-border, var(--powerx-primary-500, #4945ff));
	background-color: var(--px-ib-action-btn-bg, transparent);
	color: var(--px-ib-action-btn-color, var(--powerx-neutral-900, #212134));
	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),
	            color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-action-icon-box,
.px-ib-action-wrapper:hover .px-ib-action-icon-box {
	background-color: var(--px-ib-action-btn-bg-hover, var(--powerx-primary-500, #4945ff));
	border-color: var(--px-ib-action-btn-border-hover, var(--powerx-primary-500, #4945ff));
	color: var(--px-ib-action-btn-color-hover, #ffffff);
}

.px-ib-action-icon-box i,
.px-ib-action-icon-box svg {
	font-size: var(--px-ib-action-icon-size, 16px);
	width: var(--px-ib-action-icon-size, 16px);
	height: var(--px-ib-action-icon-size, 16px);
	display: inline-block;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
	line-height: 1;
}

/* Action Text */
.px-ib-action-text {
	font-size: var(--px-ib-action-text-size, 11px);
	font-weight: var(--px-ib-action-text-weight, 700);
	letter-spacing: var(--px-ib-action-text-spacing, 0.8px);
	text-transform: uppercase;
	color: var(--px-ib-action-text-color, var(--powerx-neutral-900, #212134));
	white-space: nowrap;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-icon-box-card:hover .px-ib-action-text,
.px-ib-action-wrapper:hover .px-ib-action-text {
	color: var(--px-ib-action-text-color-hover, var(--px-ib-action-text-color, var(--powerx-primary-500, #4945ff)));
}

/* =============================================================================
   6.0 RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ============================================================================= */

/* Tablet Breakpoint (max-width: 1024px) */
@media (max-width: 1024px) {
	.elementor-widget-px-icon-box.px-tablet-pos-left {
		--px-ib-direction: row;
	}

	.elementor-widget-px-icon-box.px-tablet-pos-right {
		--px-ib-direction: row-reverse;
	}

	.elementor-widget-px-icon-box.px-tablet-pos-top {
		--px-ib-direction: column;
		--px-ib-valign: flex-start;
	}

	.elementor-widget-px-icon-box.px-tablet-pos-top .px-ib-content {
		width: 100%;
		flex: 1 1 auto;
	}

	.elementor-widget-px-icon-box.px-tablet-pos-top .px-ib-icon-wrapper {
		margin-left: 0;
		margin-right: auto;
		align-self: flex-start;
	}

	.elementor-widget-px-icon-box.px-tablet-pos-top .px-ib-action-wrapper {
		width: 100%;
		flex: 0 0 100%;
		margin-top: var(--px-ib-action-margin-top, 16px);
	}

	.elementor-widget-px-icon-box.px-tablet-action-pos-bottom .px-icon-box-card {
		flex-wrap: wrap;
	}

	.elementor-widget-px-icon-box.px-tablet-action-pos-bottom .px-ib-action-wrapper {
		width: 100%;
		flex: 0 0 100%;
		margin-top: var(--px-ib-action-margin-top, 16px);
	}

	.elementor-widget-px-icon-box.px-tablet-align-center .px-icon-box-card,
	.elementor-widget-px-icon-box.px-tablet-align-center .px-ib-title,
	.elementor-widget-px-icon-box.px-tablet-align-center .px-ib-desc {
		text-align: center;
	}

	.elementor-widget-px-icon-box.px-tablet-align-right .px-icon-box-card,
	.elementor-widget-px-icon-box.px-tablet-align-right .px-ib-title,
	.elementor-widget-px-icon-box.px-tablet-align-right .px-ib-desc {
		text-align: right;
	}

	.elementor-widget-px-icon-box.px-tablet-align-left .px-icon-box-card,
	.elementor-widget-px-icon-box.px-tablet-align-left .px-ib-title,
	.elementor-widget-px-icon-box.px-tablet-align-left .px-ib-desc {
		text-align: left;
	}

	.elementor-widget-px-icon-box.px-tablet-action-align-left .px-ib-action-wrapper {
		justify-content: flex-start;
		align-items: flex-start;
		align-self: flex-start;
		text-align: left;
		margin-left: 0;
		margin-right: auto;
	}

	.elementor-widget-px-icon-box.px-tablet-action-align-center .px-ib-action-wrapper {
		justify-content: center;
		align-items: center;
		align-self: center;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.elementor-widget-px-icon-box.px-tablet-action-align-right .px-ib-action-wrapper {
		justify-content: flex-end;
		align-items: flex-end;
		align-self: flex-end;
		text-align: right;
		margin-left: auto;
		margin-right: 0;
	}
}

/* Mobile Breakpoint (max-width: 767px) */
@media (max-width: 767px) {
	.elementor-widget-px-icon-box.px-mobile-pos-left {
		--px-ib-direction: row;
	}

	.elementor-widget-px-icon-box.px-mobile-pos-right {
		--px-ib-direction: row-reverse;
	}

	.elementor-widget-px-icon-box.px-mobile-pos-top {
		--px-ib-direction: column;
		--px-ib-valign: flex-start;
	}

	.elementor-widget-px-icon-box.px-mobile-pos-top .px-ib-content {
		width: 100%;
		flex: 1 1 auto;
	}

	.elementor-widget-px-icon-box.px-mobile-pos-top .px-ib-icon-wrapper {
		margin-left: 0;
		margin-right: auto;
		align-self: flex-start;
	}

	.elementor-widget-px-icon-box.px-mobile-pos-top .px-ib-action-wrapper {
		width: 100%;
		flex: 0 0 100%;
		margin-top: var(--px-ib-action-margin-top, 16px);
	}

	.elementor-widget-px-icon-box.px-mobile-action-pos-bottom .px-icon-box-card {
		flex-wrap: wrap;
	}

	.elementor-widget-px-icon-box.px-mobile-action-pos-bottom .px-ib-action-wrapper {
		width: 100%;
		flex: 0 0 100%;
		margin-top: var(--px-ib-action-margin-top, 16px);
	}

	.elementor-widget-px-icon-box.px-mobile-align-center .px-icon-box-card,
	.elementor-widget-px-icon-box.px-mobile-align-center .px-ib-title,
	.elementor-widget-px-icon-box.px-mobile-align-center .px-ib-desc {
		text-align: center;
	}

	.elementor-widget-px-icon-box.px-mobile-align-right .px-icon-box-card,
	.elementor-widget-px-icon-box.px-mobile-align-right .px-ib-title,
	.elementor-widget-px-icon-box.px-mobile-align-right .px-ib-desc {
		text-align: right;
	}

	.elementor-widget-px-icon-box.px-mobile-align-left .px-icon-box-card,
	.elementor-widget-px-icon-box.px-mobile-align-left .px-ib-title,
	.elementor-widget-px-icon-box.px-mobile-align-left .px-ib-desc {
		text-align: left;
	}

	.elementor-widget-px-icon-box.px-mobile-action-align-left .px-ib-action-wrapper {
		justify-content: flex-start;
		align-items: flex-start;
		align-self: flex-start;
		text-align: left;
		margin-left: 0;
		margin-right: auto;
	}

	.elementor-widget-px-icon-box.px-mobile-action-align-center .px-ib-action-wrapper {
		justify-content: center;
		align-items: center;
		align-self: center;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.elementor-widget-px-icon-box.px-mobile-action-align-right .px-ib-action-wrapper {
		justify-content: flex-end;
		align-items: flex-end;
		align-self: flex-end;
		text-align: right;
		margin-left: auto;
		margin-right: 0;
	}
}