/* =========================================================
   Pricing Packages Widget — Frontend Styles
   Defaults match the original design. All visual props are
   overridable via Elementor controls (selectors target these).
   ========================================================= */

.ppw-section {
	--ppw-lime: #C2FF83;
	--ppw-ink: #000000;
	/* background-color: #f3f3f0; */
	color: var(--ppw-ink);
	padding: 80px 0;
	-webkit-font-smoothing: antialiased;
}

.ppw-container {
	width: 100%;
	margin: 0 auto;
}

/* ---------- Heading ---------- */
.ppw-head { margin-bottom: 48px; max-width: 66%; }

.ppw-eyebrow {
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .78rem;
	margin: 0 0 12px;
	color: var(--ppw-ink);
}
.ppw-eyebrow span {
	display: inline-block;
	/* width: 34px; height: 2px; */
	background: var(--ppw-lime);
	vertical-align: middle;
	margin-right: 10px;
}
.ppw-title {
	font-weight: 700;
	font-size: 2.6rem;
	letter-spacing: -.02em;
	margin: 0;
}
.ppw-subtitle {
	color: #6b6b6b;
	font-size: 1rem;
	line-height: 1.6;
	margin: 16px 0 0;
}

/* ---------- Grid ---------- */
.ppw-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ppw-cols-1 .ppw-grid { grid-template-columns: 1fr; }
.ppw-cols-2 .ppw-grid { grid-template-columns: repeat(2, 1fr); }
.ppw-cols-3 .ppw-grid { grid-template-columns: repeat(3, 1fr); }


.ppw-cols-4 .ppw-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.ppw-cols-3 .ppw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.ppw-cols-3 .ppw-grid { grid-template-columns: 1fr; }
	.ppw-head { max-width: 100%; }
	.ppw-title { font-size: 2rem; }
}

/* ---------- Card ---------- */
.ppw-card {
	position: relative;
	background-color: #ffffff;
	border: 1px solid #e6e6e2;
	border-radius: 18px;
	padding: 38px 34px 34px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .35s cubic-bezier(.22,.61,.36,1),
	            box-shadow .35s cubic-bezier(.22,.61,.36,1),
	            background-color .35s ease,
	            border-color .35s ease;
	will-change: transform;
}
.ppw-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 50px -22px rgba(0,0,0,.25);
}

/* Featured (dark) defaults */
.ppw-card.ppw-featured {
	background-color: var(--ppw-ink);
	color: #fff;
	border-color: var(--ppw-ink);
}
.ppw-card.ppw-featured .ppw-plan-desc { color: #b9b9b9; }
.ppw-card.ppw-featured .ppw-per { color: #9a9a9a; }
.ppw-card.ppw-featured .ppw-feature li { color: #e9e9e9; }
.ppw-card.ppw-featured .ppw-feature li i { color: var(--ppw-lime); }
.ppw-card.ppw-featured .ppw-plan-name,
.ppw-card.ppw-featured .ppw-price { color: #fff; }

/* ---------- Badge ---------- */
.ppw-badge {
	position: absolute;
	top: 0; right: 0;
	background: var(--ppw-lime);
	color: var(--ppw-ink);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 7px 16px;
	border-radius: 0 18px 0 14px;
	text-transform: uppercase;
	z-index: 2;
}

/* ---------- Text ---------- */
.ppw-plan-name {
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 1.18rem;
	margin: 0 0 14px;
}
.ppw-plan-desc {
	color: #6b6b6b;
	font-size: .95rem;
	line-height: 1.55;
	margin: 0 0 30px;
	min-height: 54px;
}
.ppw-price-row { margin-bottom: 30px; }
.ppw-price {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}
.ppw-per {
	font-size: .95rem;
	color: #6b6b6b;
	font-weight: 500;
	margin-left: 4px;
}

/* ---------- Features ---------- */
.ppw-feature {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	flex: 1;
}
.ppw-feature li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	font-size: .95rem;
	color: #2a2a2a;
}
.ppw-feature li i {
	color: var(--ppw-ink);
	font-size: .85rem;
	width: 16px;
	flex-shrink: 0;
}

/* ---------- Button ---------- */
.ppw-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 24px;
	border-radius: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .85rem;
	border: none;
	text-decoration: none;
	transition: .3s ease;
}
.ppw-btn-dark { background: var(--ppw-ink); color: #fff; }
.ppw-btn-dark:hover { background: #1f1f1f; color: var(--ppw-lime); }
.ppw-btn-lime { background: var(--ppw-lime); color: var(--ppw-ink); }
.ppw-btn-lime:hover { background: #a9f25e; color: var(--ppw-ink); }
.ppw-btn i { transition: transform .3s ease; }
.ppw-btn:hover i { transform: translate(3px, -3px); }