/**
 * Wappbiz Feature Accordion — accordion rows + crossfading image panel.
 *
 * Matches the client's Figma design exactly: one soft mint-green rounded
 * outer wrapper containing the whole block; accordion rows are plain (no
 * fill, no toggle icon) inside a single white card with thin divider
 * lines between rows; the active row shows a bold dark title + a
 * checklist of points with green checkmarks; closed rows are plain
 * light-grey single-line titles. Image panel sits on the other side
 * inside the same soft wrapper.
 *
 * Class names use a `wpb-facc-` prefix, deliberately distinct from any
 * generic "accordion" naming, and every visually load-bearing rule below
 * carries !important — this widget was previously rendering with a green
 * active-row fill and a chevron toggle icon that neither this file nor
 * the widget's PHP ever defined, which only happens when something else
 * on the site wins on specificity; !important plus unique class names
 * closes that off regardless of what that something else turns out to be.
 */

.wpb-facc {
	display: flex !important;
	box-sizing: border-box !important;
	align-items: stretch !important;
	gap: 40px !important;
	padding: 40px !important;
	margin: 0 !important;
	background-color: #eaf6ef !important;
	background-image: none !important;
	border: none !important;
	border-radius: 24px !important;
	list-style: none !important;
}

.wpb-facc,
.wpb-facc * {
	box-sizing: border-box !important;
}

.wpb-facc--image-right {
	flex-direction: row !important;
}

.wpb-facc--image-left {
	flex-direction: row-reverse !important;
}

.wpb-facc-col {
	min-width: 0;
}

.wpb-facc-col-image {
	flex: 1 1 50% !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* ------------------------------------------------------------------------
 * Image panel — deliberately simple. The frame is a plain padded box with
 * the gradient background. The images inside are all stacked in the same
 * grid cell (grid + grid-area: 1/1), so they occupy one shared box and
 * crossfade between each other; that box's height comes from the images'
 * own natural aspect ratio (height: auto), so nothing here has a
 * hardcoded pixel size and nothing depends on a percentage height
 * resolving against an ancestor.
 * --------------------------------------------------------------------- */

.wpb-facc-image-frame {
	--wpb-facc-image-padding: 40px;
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	padding: var( --wpb-facc-image-padding ) !important;
	box-sizing: border-box !important;
	border-radius: 16px !important;
	background: linear-gradient(259.51deg, rgba(39, 171, 105, 0.17) 1.07%, rgba(39, 171, 105, 0) 111.39%) !important;
}

.wpb-facc-image {
	grid-area: 1 / 1 !important;
	justify-self: center !important;
	align-self: center !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	opacity: 0 !important;
	transition: opacity 0.45s ease !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

.wpb-facc-image.is-active {
	opacity: 1 !important;
}

/* Row's own inline image is desktop-hidden; only used on mobile. */
.wpb-facc-row-mobile-image {
	display: none !important;
}

/* ------------------------------------------------------------------------
 * Accordion rows — each row is its OWN separate bordered box (all 4
 * sides), stacked with a real gap between them. There is no shared outer
 * card around the row stack; .wpb-facc-rows is just a plain flex list.
 * --------------------------------------------------------------------- */

.wpb-facc-rows {
	flex: 1 1 50% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 20px !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
}

.wpb-facc-row {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1px solid #e9edec !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04) !important;
	list-style: none !important;
	overflow: hidden !important;
	flex: 0 0 auto !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/*
 * The open row absorbs whatever vertical space is left over in the
 * column, so the rows fill the panel instead of leaving a gap at the
 * bottom when the image side is taller than the rows side.
 *
 * display: flex + flex-direction: column here (overriding the base
 * display: block) is what lets .wpb-facc-row-panel — a grid item sized by
 * `grid-template-rows: 1fr` — actually stretch to fill that extra height
 * instead of sitting at its own natural content height with a gap below
 * it. Without this, the row itself grows taller but its content stays
 * pinned to the top, leaving visible empty space above the row's bottom
 * border — exactly what made a row button placed after the checklist sit
 * mid-card instead of at the card's actual bottom edge.
 */
.wpb-facc-row.is-active {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

.wpb-facc-row.is-active .wpb-facc-row-panel {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.wpb-facc-row-trigger {
	display: block !important;
	flex-shrink: 0 !important;
	width: 100% !important;
	padding: 20px 24px !important;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left !important;
	font: inherit;
	color: inherit;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.wpb-facc-row-trigger:focus-visible {
	outline: 2px solid #25b06a;
	outline-offset: -2px;
}

/*
 * Typographic properties here are deliberately NOT !important — the
 * Typography / Typography (Active) Style controls generate plain CSS
 * without !important, so an !important default here would silently win
 * and make those controls do nothing. Only layout/reset properties keep
 * !important.
 */
.wpb-facc-row-title {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: #a7b0b6;
	background: none !important;
	border: none !important;
	transition: color 0.3s ease !important;
}

.wpb-facc-row.is-active .wpb-facc-row-title {
	color: #10151a;
	font-weight: 700;
}

/*
 * Height animation is driven entirely by JS (wappbiz-feature-accordion.js,
 * animatePanel()) via the Web Animations API animating real `height` in
 * pixels, not CSS. This replaced an earlier CSS Grid `0fr -> 1fr` technique
 * that needed no JS measurement at all, but `fr` units don't interpolate
 * smoothly the way `px` does — the motion visibly stuck/stuttered partway
 * through instead of easing continuously. WAAPI's compositor-backed
 * animation of a real measured pixel height doesn't have that limitation.
 * `overflow: hidden` here is the CSS-side half of the contract — JS sets
 * `overflow: hidden` inline only while actively animating (so a tall
 * dropdown/focus outline inside an open panel isn't clipped at rest), this
 * base rule keeps it clipped by default before JS has run for any reason.
 */
.wpb-facc-row-panel {
	display: block !important;
	height: 0;
	overflow: hidden !important;
	background: none !important;
	border: none !important;
	margin: 0 !important;
}

.wpb-facc-row.is-active .wpb-facc-row-panel {
	height: auto;
}

.wpb-facc-row-panel[hidden] {
	display: none !important;
}

.wpb-facc-row-panel-inner {
	padding: 0 24px 22px !important;
	margin: 0 !important;
	/*
	 * Flex column so the row button (when present) can be pushed to the
	 * bottom of the panel via margin-top: auto, rather than sitting right
	 * after the checklist. Height 100% lets it fill the row when
	 * .wpb-facc-row.is-active flex-grows to absorb leftover column space
	 * (see .wpb-facc-row.is-active below) — without this the panel-inner
	 * would stay only as tall as its own content and the button would have
	 * nothing to push against.
	 */
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	/*
	 * No CSS opacity/transform transition here — the content fade+rise is
	 * animated by the same JS that drives the height (see animatePanel()
	 * in wappbiz-feature-accordion.js), so both animations are driven by
	 * one single WAAPI timeline instead of a CSS transition potentially
	 * fighting a JS-set inline style value, which was a contributing
	 * factor to the previous version's "stuck" feeling.
	 */
}

.wpb-facc-points {
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wpb-facc-point {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}

.wpb-facc-point::before,
.wpb-facc-point::marker {
	content: none !important;
}

.wpb-facc-point-icon {
	flex-shrink: 0;
	display: inline-flex !important;
	margin-top: 3px !important;
	color: #22a566 !important;
}

.wpb-facc-point-text {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #55636c !important;
	background: none !important;
}

/*
 * Row button — optional, per-row (Content -> Feature Rows -> Show Button).
 * margin-top: auto (set via the widget's "Spacing Above Button" control,
 * default 16px, which resolves to margin-top since that's the only side
 * used) pushes it to the bottom of .wpb-facc-row-panel-inner's flex column,
 * so it always sits flush with the row's own bottom edge regardless of how
 * much checklist content sits above it — including when the active row has
 * grown taller than its own content via flex: 1 1 auto.
 */
.wpb-facc-row-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	align-self: flex-start !important;
	margin-top: auto !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	background-color: #25b06a !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	border: none !important;
	transition: background-color 0.2s ease !important;
}

.wpb-facc-row-button:hover {
	background-color: #1c8c55 !important;
	color: #ffffff !important;
}

.wpb-facc-points,
.wpb-facc-row-mobile-image {
	flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------------
 * Responsive — stack, hide desktop image panel, show per-row image instead.
 * --------------------------------------------------------------------- */

@media (max-width: 782px) {
	.wpb-facc {
		flex-direction: column !important;
		gap: 20px !important;
		padding: 20px !important;
		border-radius: 18px !important;
	}

	.wpb-facc-col-image {
		display: none !important;
	}

	.wpb-facc-row-mobile-image {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		border-radius: 14px !important;
		margin-top: 14px !important;
		object-fit: cover !important;
	}

	.wpb-facc-row-trigger {
		padding: 16px 18px !important;
	}

	.wpb-facc-row-panel-inner {
		padding: 0 18px 18px !important;
	}

	.wpb-facc-row-title {
		font-size: 15px;
	}
}

/*
 * Respect reduced-motion: keep the open/close + crossfade functional but
 * instant, no animated transition.
 */
@media (prefers-reduced-motion: reduce) {
	.wpb-facc-image,
	.wpb-facc-row,
	.wpb-facc-row-title,
	.wpb-facc-row-panel,
	.wpb-facc-row-panel-inner {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------------
 * Page-specific override — post 8, element 53cd787 only. Zeroes out the
 * wrapper's own padding/gap for this one placement (its outer section/
 * column already supplies that spacing), without touching every other
 * instance of the widget site-wide.
 * --------------------------------------------------------------------- */
.elementor-8 .elementor-element.elementor-element-53cd787 .wpb-facc {
	padding: 0px !important;
	gap: 0px !important;
}