/**
 * CDSWerx Icon Box Widget Styles
 *
 * Layout, icon, separator (line + icon), and content styles for the Icon Box widget.
 * Supports icon positions: top, left, right, bottom.
 * Supports icon shapes: circle, rounded, square.
 * Button styles come from button-widget.css (shared dependency).
 *
 * @package CDSWerx_Widget_Library
 * @since   2.12.0
 */

/* ============================================
   Base Layout
   ============================================ */

.elementor-widget-cdswerx-icon-box .cdswerx-icon-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--cdswerx-icon-box-icon-margin, 15px);
}

/* ============================================
   Link wrapper — reset link styles
   ============================================ */

.cdswerx-icon-box__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: inherit;
	align-items: inherit;
	gap: inherit;
	width: 100%;
}

/* ============================================
   Alignment — drives align-items for top/bottom (column) layouts.
   Position classes for left/right come after and override align-items
   for their row layouts, preserving vertical alignment behaviour.
   ============================================ */

.cdswerx-icon-box-align-left .cdswerx-icon-box,
.cdswerx-icon-box-align-left .cdswerx-icon-box__link {
	align-items: flex-start;
}

.cdswerx-icon-box-align-center .cdswerx-icon-box,
.cdswerx-icon-box-align-center .cdswerx-icon-box__link {
	align-items: center;
}

.cdswerx-icon-box-align-right .cdswerx-icon-box,
.cdswerx-icon-box-align-right .cdswerx-icon-box__link {
	align-items: flex-end;
}

.cdswerx-icon-box-align-justify .cdswerx-icon-box,
.cdswerx-icon-box-align-justify .cdswerx-icon-box__link {
	align-items: flex-start;
}

/* ============================================
   Position: Left / Right / Bottom (Desktop)
   ============================================ */

.cdswerx-icon-box-position-left .cdswerx-icon-box,
.cdswerx-icon-box-position-left .cdswerx-icon-box__link {
	flex-direction: row;
	align-items: flex-start;
	text-align: start;
}

.cdswerx-icon-box-position-right .cdswerx-icon-box,
.cdswerx-icon-box-position-right .cdswerx-icon-box__link {
	flex-direction: row-reverse;
	align-items: flex-start;
	text-align: end;
}

.cdswerx-icon-box-position-top .cdswerx-icon-box,
.cdswerx-icon-box-position-top .cdswerx-icon-box__link {
	flex-direction: column;
	text-align: center;
}

.cdswerx-icon-box-position-bottom .cdswerx-icon-box,
.cdswerx-icon-box-position-bottom .cdswerx-icon-box__link {
	flex-direction: column-reverse;
	text-align: center;
}

/* ============================================
   Position: Tablet Responsive
   ============================================ */

@media (max-width: 1024px) {
	.cdswerx-icon-box-tablet-align-left .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-left .cdswerx-icon-box__link {
		align-items: flex-start;
	}

	.cdswerx-icon-box-tablet-align-center .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-center .cdswerx-icon-box__link {
		align-items: center;
	}

	.cdswerx-icon-box-tablet-align-right .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-right .cdswerx-icon-box__link {
		align-items: flex-end;
	}

	.cdswerx-icon-box-tablet-align-justify .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-justify .cdswerx-icon-box__link {
		align-items: flex-start;
	}

	.cdswerx-icon-box-tablet-position-left .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-left .cdswerx-icon-box__link {
		flex-direction: row;
		align-items: flex-start;
		text-align: start;
	}

	.cdswerx-icon-box-tablet-position-right .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-right .cdswerx-icon-box__link {
		flex-direction: row-reverse;
		align-items: flex-start;
		text-align: end;
	}

	.cdswerx-icon-box-tablet-position-top .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-top .cdswerx-icon-box__link {
		flex-direction: column;
		text-align: center;
	}

	.cdswerx-icon-box-tablet-position-bottom .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-bottom .cdswerx-icon-box__link {
		flex-direction: column-reverse;
		text-align: center;
	}
}

/* ============================================
   Position: Mobile Responsive
   ============================================ */

@media (max-width: 767px) {
	.cdswerx-icon-box-mobile-align-left .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-left .cdswerx-icon-box__link {
		align-items: flex-start;
	}

	.cdswerx-icon-box-mobile-align-center .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-center .cdswerx-icon-box__link {
		align-items: center;
	}

	.cdswerx-icon-box-mobile-align-right .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-right .cdswerx-icon-box__link {
		align-items: flex-end;
	}

	.cdswerx-icon-box-mobile-align-justify .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-justify .cdswerx-icon-box__link {
		align-items: flex-start;
	}

	.cdswerx-icon-box-mobile-position-left .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-left .cdswerx-icon-box__link {
		flex-direction: row;
		align-items: flex-start;
		text-align: start;
	}

	.cdswerx-icon-box-mobile-position-right .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-right .cdswerx-icon-box__link {
		flex-direction: row-reverse;
		align-items: flex-start;
		text-align: end;
	}

	.cdswerx-icon-box-mobile-position-top .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-top .cdswerx-icon-box__link {
		flex-direction: column;
		text-align: center;
	}

	.cdswerx-icon-box-mobile-position-bottom .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-bottom .cdswerx-icon-box__link {
		flex-direction: column-reverse;
		text-align: center;
	}
}

/* ============================================
   Icon Wrapper
   ============================================ */

.cdswerx-icon-box__icon-wrap {
	flex-shrink: 0;
	line-height: 1;
}

.cdswerx-icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	transition-property: color, background-color, border-color, transform, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.cdswerx-icon-box__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cdswerx-icon-box__icon i {
	line-height: 1;
}

/* ============================================
   Icon View: Stacked
   ============================================ */

.cdswerx-icon-view-stacked .cdswerx-icon-box__icon {
	padding: 0.5em;
	background-color: #6ec1e4;
	color: #fff;
}

/* ============================================
   Icon View: Framed
   ============================================ */

.cdswerx-icon-view-framed .cdswerx-icon-box__icon {
	padding: 0.5em;
	border: 3px solid #6ec1e4;
	color: #6ec1e4;
}

/* ============================================
   Icon Shape: circle / rounded / square
   ============================================ */

.cdswerx-icon-shape-circle .cdswerx-icon-box__icon {
	border-radius: 50%;
}

.cdswerx-icon-shape-rounded .cdswerx-icon-box__icon {
	border-radius: 0.5em;
}

.cdswerx-icon-shape-square .cdswerx-icon-box__icon {
	border-radius: 0;
}

/* ============================================
   Content Area
   ============================================ */

.cdswerx-icon-box__content {
	flex: 1;
	min-width: 0;
}

.cdswerx-icon-box__heading {
	margin: 0;
	padding: 0;
	transition-property: color;
	transition-duration: 0.3s;
}

.cdswerx-icon-box__description {
	margin: 0;
	transition-property: color;
	transition-duration: 0.3s;
}

.cdswerx-icon-box__description p:first-child {
	margin-top: 0;
}

.cdswerx-icon-box__description p:last-child {
	margin-bottom: 0;
}

/* ============================================
   Separator (shared wrapper)
   — display: inline-block so it follows parent text-align
   ============================================ */

.cdswerx-icon-box__separator {
	display: inline-block;
	margin: 10px 0;
}

/* Separator: standard line (single line) */
.cdswerx-icon-box__separator-line {
	display: block;
	border-bottom: 2px solid #e0e0e0;
}

/* Separator: "With Icon"  —  line + icon + line  */
.cdswerx-icon-box__separator--with-icon {
	display: inline-flex;
	align-items: center;
}

.cdswerx-icon-box__separator--with-icon .cdswerx-icon-box__separator-line {
	flex: 1;
}

/* Separator: icon element (shared by "with icon" variant) */
.cdswerx-icon-box__separator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
	color: #e0e0e0;
	margin: 0 8px;
}

.cdswerx-icon-box__separator-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ============================================
   CTA Button Wrapper
   ============================================ */

.cdswerx-icon-box .cdswerx-cta-button {
	margin-top: 15px;
}

/* ==========================================================================
   Description List Marker Modes
   Applied via list_marker_view control (Default / Numbers / Bullets / Icon).
   Bullets mode uses native CSS list-style-type (value set by Elementor selector).
   Icon mode removes native markers and injects a PHP span instead.
   ========================================================================== */

/* Base list defaults — outside position with left indent so wrapped text aligns
   flush with the first line, not under the bullet. Resets browser margin.
   Users can override via the List Margin / List Padding Elementor controls. */
.cdswerx-icon-box__description ul,
.cdswerx-icon-box__description ol {
	margin: 0;
	padding: 0 0 0 1.5em;
	list-style-position: outside;
}

/* None mode — hide markers, keep ul/li tags */
.cdswerx-icon-box__description--marker-none ul,
.cdswerx-icon-box__description--marker-none ol {
	list-style: none;
}

/* Numbers mode — force decimal counters on both ul and ol */
.cdswerx-icon-box__description--marker-numbers ul,
.cdswerx-icon-box__description--marker-numbers ol {
	list-style-type: decimal;
	padding-left: 1.5em;
}

/* Bullets mode — uses native CSS list-style-type (value set by Elementor selector) */
.cdswerx-icon-box__description--marker-bullets ul,
.cdswerx-icon-box__description--marker-bullets ol {
	padding-left: 1.5em;
}

/* Icon mode — remove native markers, inject span */
.cdswerx-icon-box__description--icon-marker ul,
.cdswerx-icon-box__description--icon-marker ol {
	list-style: none;
	padding-left: 0;
}

.cdswerx-icon-box__description--icon-marker li {
	display: flex;
	align-items: baseline;
}

/* Injected marker span (icon mode) */
.cdswerx-icon-box__list-marker {
	flex-shrink: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.cdswerx-icon-box__list-marker svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
}

/* List Style Position — Inside: bullets/markers flush-left with surrounding text */
.cdswerx-icon-box__description--list-inside ul,
.cdswerx-icon-box__description--list-inside ol {
	list-style-position: outside;
	padding-left: 1.2em;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-icon-box__description--list-underline li a {
	background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
	background-size: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.55s cubic-bezier(0.32, 0.32, 0.15, 1.17);
	text-decoration: none;
}

.cdswerx-icon-box__description--list-underline li a:hover {
	background-size: 100% 100%;
}