/* PKVService — restores layout behaviour lost when ElementsKit widgets were migrated to
   native Elementor widgets.

   ElementsKit's icon-box had an "enable_equal_height" option that made every card in a row
   the same height. Native Elementor has no equivalent, so the migrated cards ended up
   ragged. The widgets already carry `selector{height:100%}`, but height:100% only resolves
   if the column's widget-wrap stretches — which is what this does. */

/* A column whose only widget is an icon-box: let that widget fill the column height. */
.elementor-widget-wrap > .elementor-widget-icon-box:only-child {
	display: flex;
	flex-grow: 1;
}

.elementor-widget-wrap > .elementor-widget-icon-box:only-child > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Columns in a row already stretch by default; make sure the wrap does not collapse. */
.elementor-widget-wrap:has(> .elementor-widget-icon-box:only-child) {
	align-content: stretch;
}

/* Counter numbers on mobile.

   Elementor lays the number out as a flex row of [prefix][number][suffix], where the prefix
   and suffix have flex-grow driven by the widget's alignment control. On desktop these
   counters sit to the RIGHT of an icon, so a left-aligned number is correct there and is left
   alone. On phones the icon is hidden (see hide_mobile above), which left the number hanging
   at the left edge while its label underneath stayed centred.

   Zeroing the prefix/suffix growth and centring the row keeps "100" and its "+" together and
   centres them as one unit, matching the label. */
@media (max-width: 767px) {
	.elementor-widget-counter .elementor-counter-number-wrapper {
		--counter-prefix-grow: 0;
		--counter-suffix-grow: 0;
		justify-content: center;
		text-align: center;
	}
}

/* Accordion / toggle indicator: size AND vertical alignment.

   Size — Elementor already sizes the icon as `svg { width: 1em; height: 1em }`. The problem is
   what that `em` resolves against: the icon <span> sits INSIDE the tab title, which renders as
   an <h3>, so it inherited the theme's h3 font-size (~28px) rather than the widget's configured
   14px "Icon Size". Elementor emits no font-size rule for that control here, only colour, so an
   explicit font-size gives the existing 1em rule something sensible to resolve against.

   Alignment — Elementor positions the icon with `float: right`, and a floated box aligns to the
   TOP of its containing block. While the icon was oversized it filled the row and the float went
   unnoticed; at 14px it visibly hovered above the label. Laying the title out as a flex row
   centres the icon against the text instead, and `margin-left:auto` keeps it hard right without
   the float. */
.elementor-accordion .elementor-tab-title,
.elementor-toggle .elementor-tab-title {
	display: flex;
	align-items: center;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon {
	float: none;
	width: auto;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon-right,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon-right {
	order: 2;
	margin-left: auto;
	padding-left: 14px;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon-left,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon-left {
	order: 0;
	padding-right: 14px;
}

/* Let the label take the remaining width so the right-hand icon stays pinned to the edge. */
.elementor-accordion .elementor-tab-title .elementor-accordion-title,
.elementor-toggle .elementor-tab-title .elementor-toggle-title {
	flex: 1 1 auto;
	order: 1;
}