/* MYVAGON Elementor Plan Card
   All selectors are scoped under .empc- so this file cannot collide with
   or affect any other plugin or theme styles. */

.empc-card-outer {
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: border-box;
}

.empc-card-outer * {
	box-sizing: border-box;
}

.empc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: 24px;
}

.empc-card.empc-hover-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.empc-card.empc-hover-lift:hover {
	transform: translateY(-4px);
}

.empc-card.empc-has-badge {
	margin-top: 16px;
}

.empc-card-inner {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Badge */
.empc-badge {
	position: absolute;
	top: -16px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 32px);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.empc-badge-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Header */
.empc-plan-name {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	word-break: break-word;
}

.empc-description {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	word-break: break-word;
}

.empc-subtext {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	word-break: break-word;
}

/* Price */
.empc-price-block {
	width: 100%;
	margin-top: 20px;
}

.empc-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
}

.empc-price-currency {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.empc-price-amount {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	word-break: break-word;
}

.empc-price-period {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #a8a8b3;
}

.empc-price-note {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #7c3aed;
	word-break: break-word;
}

/* Divider */
.empc-divider {
	width: 100%;
	height: 1px;
	margin: 24px 0;
	background-color: #ededf2;
	border: 0;
}

/* Section label */
.empc-section-label {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/* Capacity rows */
.empc-capacity-row {
	width: 100%;
	margin-bottom: 16px;
}

.empc-capacity-row:last-child {
	margin-bottom: 0;
}

.empc-capacity-row-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.empc-capacity-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	word-break: break-word;
}

.empc-capacity-value {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.empc-progress-track {
	width: 100%;
	height: 6px;
	margin-top: 8px;
	border-radius: 999px;
	background-color: #ededf2;
	overflow: hidden;
}

.empc-progress-fill {
	height: 100%;
	border-radius: 999px;
	max-width: 100%;
}

/* Mini badge (BETA-style pill) */
.empc-mini-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	border-radius: 999px;
	background-color: #f3e8ff;
	color: #7c3aed;
	white-space: nowrap;
}

/* Included feature list */
.empc-included-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.empc-included-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.empc-included-item:last-child {
	margin-bottom: 0;
}

.empc-check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	background-color: #7c3aed;
}

.empc-check-icon svg {
	width: 60%;
	height: 60%;
	fill: #ffffff;
}

.empc-item-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	word-break: break-word;
}

/* Unavailable feature: grayed out with a strikethrough, and a muted
   (non-purple) check icon, instead of the normal available styling. */
.empc-included-item--unavailable .empc-item-text {
	color: #b4b4be;
	text-decoration: line-through;
}

.empc-included-item--unavailable .empc-check-icon {
	background-color: #e4e4ea;
}

.empc-included-item--unavailable .empc-check-icon svg {
	fill: #ffffff;
}

/* Mini badge position: default ("end") lets the text column grow so the
   badge lands at the end of the row; "inline" collapses that growth so
   the badge sits right next to the text instead. */
.empc-included-list--badge-inline .empc-item-text {
	flex: 0 1 auto;
}

/* Button */
.empc-button {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin-top: 28px;
	padding: 16px 24px;
	border: 0;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, background, color, border-color, opacity, box-shadow, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

.empc-button--full {
	display: flex;
	width: 100%;
}

.empc-button--pinned {
	margin-top: auto !important;
}

/* When the CTA is placed at the top (right after the description), add
   breathing room before whatever follows it (secondary text or price),
   since in that position it's no longer preceded by its usual spacing. */
.empc-button + .empc-subtext,
.empc-button + .empc-price-block {
	margin-top: 16px;
}

/* Responsive layout: keep cards side by side (no stacking) on tablet
   and mobile, so a row of cards can scroll horizontally instead. This
   only takes effect on cards where the "Keep Side by Side on
   Mobile/Tablet" option is enabled (adds the empc-scroll-item class);
   it has no effect on any other card. The parent row/container still
   needs Flex Wrap set to "No Wrap" (and horizontal overflow allowed)
   for the row itself to scroll - that's a container-level setting. */
@media (max-width: 1024px) {
	.empc-card-outer.empc-scroll-item {
		width: auto;
		flex: 0 0 auto;
	}
}

.empc-button--filled {
	background: linear-gradient(90deg, #8b5cf6, #6d28d9);
	color: #ffffff;
}

.empc-button--outline {
	background: transparent;
	border: 2px solid #161623;
	color: #161623;
}

.empc-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =========================================================
   Fully fluid, viewport-independent sizing on top of Elementor's
   own responsive controls, so the card degrades gracefully even
   at viewport widths between the standard editor breakpoints.
   ========================================================= */
.empc-plan-name {
	font-size: clamp(22px, 6vw, 28px);
}

.empc-description,
.empc-subtext,
.empc-capacity-label,
.empc-capacity-value,
.empc-item-text,
.empc-button {
	font-size: clamp(13px, 3.6vw, 15px);
}

.empc-price-amount {
	font-size: clamp(32px, 9vw, 42px);
}

.empc-price-currency {
	font-size: clamp(18px, 5vw, 22px);
}

@media (max-width: 480px) {
	.empc-card {
		border-radius: 18px;
	}

	.empc-capacity-row-top {
		flex-wrap: wrap;
	}

	.empc-badge {
		left: 16px;
	}
}