/* PX Expand Card */

.pxec {
	position: relative;
}

.pxec-card {
	--pxec-duration: 400ms;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	padding: 24px 28px;
	border-radius: 24px;
	background-color: #52BC82;
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	transition:
		height var(--pxec-duration) cubic-bezier(.4, 0, .2, 1),
		background-color .3s ease,
		box-shadow .3s ease;
}

/* ---------- Header: icon | title | toggle ---------- */
.pxec-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "icon title toggle";
	align-items: center;
	column-gap: 20px;
	row-gap: 24px;
}

.pxec-no-icon .pxec-head {
	grid-template-columns: 1fr auto;
	grid-template-areas: "title toggle";
}

.pxec-card.is-open .pxec-head {
	grid-template-areas:
		"icon  .     toggle"
		"title title title";
	align-items: start;
}

.pxec-no-icon.is-open .pxec-head {
	grid-template-areas: "title toggle";
}

.pxec-icon {
	grid-area: icon;
	font-size: 56px;
	line-height: 0;
	color: #fff;
	transition: color .3s ease;
}

.pxec-icon i {
	line-height: 1;
}

.pxec-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: fill .3s ease;
}

/* Uploaded SVGs: JS (monoSvg) rewrites colored parts to currentColor so Icon Color applies */
.pxec-svg-mono-yes .pxec-icon svg * {
	transition: fill .3s ease, stroke .3s ease;
}

.pxec-title {
	grid-area: title;
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	transition: color .3s ease;
}

/* ---------- Toggle (+ rotates into ×) ---------- */
.pxec-toggle {
	--pxec-toggle-size: 44px;
	--pxec-toggle-bg: #fff;
	--pxec-toggle-color: #52BC82;
	grid-area: toggle;
	position: relative;
	flex-shrink: 0;
	width: var(--pxec-toggle-size);
	height: var(--pxec-toggle-size);
	margin: 0;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .2s ease, color .3s ease, background-color .3s ease;
}

/* Higher specificity so theme button styles (e.g. Astra button:hover) can't override it */
.pxec .pxec-card .pxec-toggle,
.pxec .pxec-card .pxec-toggle:hover,
.pxec .pxec-card .pxec-toggle:focus,
.pxec .pxec-card .pxec-toggle:active {
	background-color: var(--pxec-toggle-bg);
	background-image: none;
	color: var(--pxec-toggle-color);
	border: 0;
	box-shadow: none;
}

.pxec .pxec-card .pxec-toggle:hover {
	transform: scale(1.06);
}

.pxec-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pxec-toggle::before,
.pxec-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46%;
	height: max(3px, calc(var(--pxec-toggle-size) * .09));
	border-radius: 3px;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--pxec-duration) cubic-bezier(.4, 0, .2, 1);
}

.pxec-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pxec-card.is-open .pxec-toggle::before {
	transform: translate(-50%, -50%) rotate(135deg);
}

.pxec-card.is-open .pxec-toggle::after {
	transform: translate(-50%, -50%) rotate(225deg);
}

/* ---------- Body ---------- */
.pxec-body {
	display: none;
	padding-top: 20px;
}

.pxec-card.is-open .pxec-body {
	display: block;
	animation: pxec-fade-in var(--pxec-duration) ease both;
}

.pxec-card.is-closing .pxec-body {
	opacity: 0;
	transition: opacity calc(var(--pxec-duration) * .4) ease;
	animation: none;
}

.pxec-desc {
	font-size: 16px;
	line-height: 1.45;
	color: #1c1c1c;
	transition: color .3s ease;
}

.pxec-desc > :first-child { margin-top: 0; }
.pxec-desc > :last-child  { margin-bottom: 0; }

/* Reset theme list margins (Astra adds margin-left: 3em) */
.pxec .pxec-desc ul,
.pxec .pxec-desc ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.pxec .pxec-desc li {
	margin: 0;
}

/* ---------- Button ---------- */
.pxec-btn-wrap {
	margin-top: 22px;
}

.pxec-btn {
	--pxec-btn-bg: #fff;
	--pxec-btn-color: #52BC82;
	display: inline-flex;
	align-items: center;
	gap: 28px;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color .3s ease, color .3s ease;
}

/* Higher specificity so theme link styles (a, a:hover, a:visited) can't override it */
.pxec .pxec-card .pxec-btn,
.pxec .pxec-card .pxec-btn:hover,
.pxec .pxec-card .pxec-btn:focus,
.pxec .pxec-card .pxec-btn:visited {
	background-color: var(--pxec-btn-bg);
	color: var(--pxec-btn-color);
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.pxec-btn-arrow {
	display: inline-flex;
	line-height: 0;
	transition: transform .25s ease;
}

.pxec-btn-arrow svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.pxec-btn:hover .pxec-btn-arrow {
	transform: translateX(4px);
}

@keyframes pxec-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Overlay mode ---------- */
.pxec-mode-overlay.pxec-raised {
	position: relative;
	z-index: 30;
}

.pxec-mode-overlay .pxec-card.is-floating {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}

@media (prefers-reduced-motion: reduce) {
	.pxec-card { --pxec-duration: 0ms !important; }
}