/* GG Memberships ------------------------------------------------------------ */
.gg-memberships {
	font-family: var(--gg-font-sans, 'Poppins', sans-serif);
	text-align: center;
}

.gg-memberships__heading {
	font-family: var(--gg-font-serif, 'Playfair Display', serif);
	margin: 0 0 34px;
	transition: color .2s ease;
}

/* When a sub-heading is present, the main heading's bottom margin shrinks so the two sit
   closer together, with the sub-heading itself then carrying the larger gap down to the
   pricing cards (see .gg-memberships__subheading below) — so spacing to the cards stays
   correct whether or not a sub-heading is used. */
.gg-memberships__heading--has-subheading {
	margin-bottom: 10px;
}

.gg-memberships__subheading {
	max-width: 640px;
	margin: 14px auto 34px;
	font-size: 16px;
	line-height: 1.6;
	color: #5b6472;
	transition: color .2s ease;
}

.gg-memberships__grid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
}

.gg-memberships__card {
	position: relative;
	overflow: visible;
	flex: 1 1 260px;
	max-width: 300px;
	border-radius: 16px;
	border: 2px solid transparent;
	padding: 34px 26px;
	color: #20304A;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, border-width .25s ease, border-radius .25s ease, background-color .25s ease;
}

.gg-memberships__card.is-featured {
	color: #FBF3E7;
	transform: translateY(-10px);
	padding-top: 44px;
}

/* Hover effects (chosen via the "Hover Animation" style control) are plain CSS :hover,
   which triggers correctly on tap on touchscreens too, so no separate mobile handling is
   needed. Featured cards are already lifted -10px by default (above) — the lift/scale
   hover effects add their movement ON TOP of that baseline so the featured card doesn't
   "jump" back down on hover. These are sensible DEFAULT amounts; the "Hover Transform
   Amount" Elementor control (higher CSS specificity, added dynamically per-instance)
   overrides them whenever an admin actually changes it. */
.gg-memberships[data-card-hover="lift"] .gg-memberships__card:not(.is-featured):hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 34px rgba(20, 30, 50, 0.14);
}
.gg-memberships[data-card-hover="lift"] .gg-memberships__card.is-featured:hover {
	transform: translateY(-16px);
	box-shadow: 0 16px 34px rgba(20, 30, 50, 0.22);
}

.gg-memberships[data-card-hover="lift-shadow"] .gg-memberships__card:not(.is-featured):hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 44px rgba(20, 30, 50, 0.2);
}
.gg-memberships[data-card-hover="lift-shadow"] .gg-memberships__card.is-featured:hover {
	transform: translateY(-16px);
	box-shadow: 0 22px 44px rgba(20, 30, 50, 0.3);
}

.gg-memberships[data-card-hover="scale"] .gg-memberships__card:not(.is-featured):hover {
	transform: scale(1.035);
}
.gg-memberships[data-card-hover="scale"] .gg-memberships__card.is-featured:hover {
	transform: translateY(-10px) scale(1.035);
}

.gg-memberships[data-card-hover="border"] .gg-memberships__card:hover {
	border-color: #D9A441;
}

/* ---------------- "What's Included" feature list ---------------- */
.gg-memberships__features {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: left;
}

.gg-memberships__features-heading {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 10px;
	opacity: .85;
}

.gg-memberships__features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gg-memberships__feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
}

.gg-memberships__feature-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(47, 140, 130, 0.12);
	color: #2F8C82;
	box-sizing: border-box;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.gg-memberships__feature-icon i,
.gg-memberships__feature-icon svg {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.gg-memberships__feature-text {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
}

.gg-memberships__card.is-featured .gg-memberships__features-heading,
.gg-memberships__card.is-featured .gg-memberships__feature-text {
	color: #FBF3E7;
}

.gg-memberships__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #D9A441;
	color: #20304A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 6px 14px;
	border-radius: 20px;
	white-space: nowrap;
	z-index: 3;
}

/* Icon/image wrapper — every element that sits above it (title, price, description,
   button) has its own z-index so the decorative graphic can visually sit "under" the
   text without ever blocking it, matching the reference's layered card look. */
.gg-memberships__icon-wrap {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}

/* Default (bottom-right) position variant. Bottom offset is fixed to clear the button's
   height + padding, so the decorative graphic sits visibly in the gap above the button
   instead of hiding behind its opaque background. */
.gg-memberships[data-icon-position="bottom-right"] .gg-memberships__icon-wrap {
	right: 16px;
	bottom: 78px;
}

/* Top-center variant: back in normal flow, above the title, centered. */
.gg-memberships[data-icon-position="top-center"] .gg-memberships__icon-wrap {
	position: static;
	display: block;
	margin: 0 auto 10px;
	text-align: center;
}

/* Top-right variant. */
.gg-memberships[data-icon-position="top-right"] .gg-memberships__icon-wrap {
	top: 18px;
	right: 18px;
	bottom: auto;
}

.gg-memberships__icon {
	display: inline-flex;
	font-size: 30px;
	opacity: 0.85;
}

.gg-memberships__icon .gg-icon-svg {
	width: 30px;
	height: 30px;
}

.gg-memberships__deco-img {
	display: inline-block;
	width: 90px;
	height: auto;
	opacity: 0.9;
}

.gg-memberships__title,
.gg-memberships__subtitle,
.gg-memberships__price-row,
.gg-memberships__period,
.gg-memberships__desc,
.gg-memberships__button {
	position: relative;
	z-index: 2;
}

.gg-memberships__title {
	margin: 0 0 4px;
	font-family: var(--gg-font-serif, 'Playfair Display', serif);
	font-size: 20px;
}

.gg-memberships__subtitle {
	font-size: 11px;
	letter-spacing: 1px;
	opacity: 0.75;
	margin-bottom: 14px;
}

.gg-memberships__price-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
}

.gg-memberships__currency {
	font-size: 16px;
	margin-top: 4px;
}

.gg-memberships__period {
	font-size: 12px;
	opacity: 0.75;
	margin-bottom: 16px;
}

.gg-memberships__desc {
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.85;
	margin: 0 0 20px;
}

.gg-memberships__button {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 11px 18px;
	border-radius: 8px;
	background: #152744;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Featured-button background/text color intentionally NOT hardcoded here anymore — it's
   fully driven by the "Featured Card Button" Elementor style section (its own dedicated
   section, not competing with this file for the same properties), so there's only ever one
   source of truth for those colors. */

.gg-memberships__footnote {
	margin-top: 26px;
	font-size: 12px;
	color: #5b6472;
	transition: color .2s ease;
}

@media (max-width: 900px) {
	.gg-memberships__grid { flex-direction: column; align-items: stretch; }
	.gg-memberships__card { max-width: 420px; margin: 0 auto; }
	.gg-memberships__card.is-featured { transform: none; }
}