/* ----------------------------------------------------------------------------
 * redxgym Magicline - Rate Bundles (dark card optics)
 * Cards bring their own dark box so the BELIEBT badge / border read correctly.
 * Section background stays transparent (style the section in Elementor).
 * Override --rxg-* to tune.
 * ---------------------------------------------------------------------------- */
.rxg-bundles {
	--rxg-primary:      #e30613;
	--rxg-primary-hover:#c30510;
	--rxg-card-bg:      #161616;
	--rxg-card-border:  rgba(255,255,255,.10);
	--rxg-text:         #f4f4f4;
	--rxg-muted:        rgba(255,255,255,.55);
	--rxg-hair:         rgba(255,255,255,.12);
	--rxg-radius:       0;
	--rxg-card-pad:     1.9rem;
	--rxg-anton:        'Anton', sans-serif;
	--rxg-font:         'Inter', sans-serif;

	font-family: var(--rxg-font);
	color: var(--rxg-text);
}
.rxg-bundles *, .rxg-bundles *::before, .rxg-bundles *::after { box-sizing: border-box; }

/* ---------------- Slider ---------------- */
.rxg-bundles__slider {
	position: relative;
}
.rxg-bundles__grid {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;                 /* Firefox */
	/* Room so the "BELIEBT" badge (top:-13px) and the highlight glow aren't
	   clipped - overflow-x forces overflow-y to auto. */
	padding: 20px 8px 1.75rem;
	scroll-padding-left: 8px;
}
.rxg-bundles__grid::-webkit-scrollbar { display: none; } /* WebKit */

/* When everything fits (no overflow), center the row instead of left-aligning.
   Only applied while not scrollable, so it can't clip the first slide. */
.rxg-bundles__slider:not(.is-scrollable) .rxg-bundles__grid { justify-content: center; }

/* Cards become fixed-width slides */
.rxg-bundles__card {
	scroll-snap-align: start;
	flex: 0 0 86%;                         /* mobile: peek next card */
	max-width: 400px;
}
@media (min-width: 700px) {
	.rxg-bundles__card { flex-basis: calc((100% - 1.5rem) / 2); max-width: none; }
}
@media (min-width: 1000px) {
	/* show 3 across; a 4th (or more) scrolls into view */
	.rxg-bundles__card { flex-basis: calc((100% - 3rem) / 3); }
}

/* Navigation arrows (desktop; touch users swipe) */
.rxg-bundles__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--rxg-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
	transition: background .15s ease, opacity .15s ease, transform .15s ease;
}
.rxg-bundles__arrow:hover { background: var(--rxg-primary-hover); }
.rxg-bundles__arrow:active { transform: translateY(-50%) scale(.94); }
.rxg-bundles__arrow--prev { left: -10px; }
.rxg-bundles__arrow--next { right: -10px; }
.rxg-bundles__arrow[disabled] { opacity: 0; pointer-events: none; }
.rxg-bundles__arrow:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--rxg-primary) 55%, white);
	outline-offset: 2px;
}
@media (min-width: 1000px) {
	/* only show arrows when the track can actually scroll */
	.rxg-bundles__slider.is-scrollable .rxg-bundles__arrow { display: flex; }
}

/* ---------------- Card ---------------- */
.rxg-bundles__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--rxg-card-bg);
	border: 1px solid var(--rxg-card-border);
	border-radius: var(--rxg-radius);
	padding: var(--rxg-card-pad);
}
.rxg-bundles__card.is-highlight {
	border-color: var(--rxg-primary);
	box-shadow: 0 0 0 1px var(--rxg-primary), 0 18px 50px -20px rgba(227,6,19,.55);
}

/* BELIEBT badge */
.rxg-bundles__badge {
	position: absolute;
	top: -13px;
	left: var(--rxg-card-pad);
	background: var(--rxg-primary);
	color: #fff;
	font-family: var(--rxg-anton);
	font-size: .8rem;
	letter-spacing: .06em;
	padding: .3rem .85rem;
	border-radius: 0;
	line-height: 1.3;
}

/* Name */
.rxg-bundles__name {
	font-family: var(--rxg-anton);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: #fff;
}

/* Price */
.rxg-bundles__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	margin-bottom: 1rem;
}
.rxg-bundles__price-regular {
	font-family: var(--rxg-anton);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--rxg-primary);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	opacity: .9;
}
.rxg-bundles__price-main {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	flex-wrap: wrap;
}
.rxg-bundles__price-cur {
	color: var(--rxg-primary);
	font-family: var(--rxg-anton);
	font-size: 1.5rem;
	line-height: 1;
}
.rxg-bundles__price-amount {
	font-family: var(--rxg-anton);
	font-size: 3.2rem;
	line-height: .9;
	color: #fff;
	letter-spacing: .01em;
}
.rxg-bundles__price-unit {
	color: var(--rxg-muted);
	font-size: .95rem;
	margin-left: .25rem;
}

/* Term chip */
.rxg-bundles__term-chip {
	display: inline-block;
	align-self: flex-start;
	border: 1px solid var(--rxg-primary);
	color: var(--rxg-primary);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	padding: .32rem .7rem;
	border-radius: 0;
	margin-bottom: 1.1rem;
}

/* Description */
.rxg-bundles__description {
	font-style: italic;
	color: var(--rxg-muted);
	font-size: .92rem;
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--rxg-hair);
}

/* Benefits */
.rxg-bundles__benefits {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}
.rxg-bundles__benefit {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .6rem;
	align-items: start;
	font-size: .92rem;
	line-height: 1.35;
}
.rxg-bundles__benefit[hidden] { display: none; }
.rxg-bundles__check {
	color: var(--rxg-primary);
	margin-top: .1rem;
	flex-shrink: 0;
}

.rxg-bundles__benefits-toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: none;
	padding: 0 0 .2rem;
	margin: 0 0 1.4rem;
	color: var(--rxg-primary);
	font: inherit;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
}
.rxg-bundles__benefits-toggle .rxg-bundles__chevron { transition: transform .2s ease; }
.rxg-bundles__benefits-toggle[aria-expanded="true"] .rxg-bundles__chevron { transform: rotate(180deg); }
.rxg-bundles__benefits-toggle-less { display: none; }
.rxg-bundles__benefits-toggle[aria-expanded="true"] .rxg-bundles__benefits-toggle-more { display: none; }
.rxg-bundles__benefits-toggle[aria-expanded="true"] .rxg-bundles__benefits-toggle-less { display: inline; }

/* CTA */
.rxg-bundles__cta {
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .95rem 1.25rem;
	border-radius: var(--rxg-radius);
	border: 1px solid var(--rxg-hair);
	background: transparent;
	color: #fff;
	margin-top: auto;
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.rxg-bundles__cta:hover  { border-color: var(--rxg-primary); }
.rxg-bundles__cta:active { transform: translateY(1px); }
.rxg-bundles__card.is-highlight .rxg-bundles__cta {
	background: var(--rxg-primary);
	border-color: var(--rxg-primary);
}
.rxg-bundles__card.is-highlight .rxg-bundles__cta:hover { background: var(--rxg-primary-hover); }
.rxg-bundles__cta:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--rxg-primary) 50%, transparent);
	outline-offset: 2px;
}

/* A single (solo) button should still sit at the card bottom */
.rxg-bundles__cta--solo{ margin-top:auto; }
.rxg-bundles__cta--checkout.rxg-bundles__cta--solo{ margin-top:auto; }

/* Second (online conclusion) button – primary filled, sits below the lead CTA */
.rxg-bundles__cta--checkout {
	margin-top: .5rem;
	background: var(--rxg-primary);
	border-color: var(--rxg-primary);
}
.rxg-bundles__cta--checkout:hover { background: var(--rxg-primary-hover); border-color: var(--rxg-primary-hover); }
/* When a checkout button is present, keep the lead button as the outline one */
.rxg-bundles__card.is-highlight .rxg-bundles__cta--checkout { background: var(--rxg-primary); }


/* Optional modules */
.rxg-bundles__optional {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rxg-hair);
}
.rxg-bundles__optional-title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rxg-muted);
	margin: 0 0 .75rem;
}
.rxg-bundles__optional-list { display: flex; flex-direction: column; gap: .5rem; }
.rxg-bundles__optional-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .6rem;
	align-items: center;
	padding: .65rem .8rem;
	border: 1px solid var(--rxg-hair);
	border-radius: 0;
	cursor: pointer;
	font-size: .9rem;
	transition: border-color .15s ease;
}
.rxg-bundles__optional-item:hover { border-color: color-mix(in oklab, var(--rxg-primary) 45%, var(--rxg-hair)); }
.rxg-bundles__optional-checkbox { accent-color: var(--rxg-primary); width: 1.05rem; height: 1.05rem; margin: 0; }
.rxg-bundles__optional-name { font-weight: 600; }
.rxg-bundles__optional-price { color: var(--rxg-primary); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.rxg-bundles__optional-price--free { color: var(--rxg-muted); font-weight: 600; }
.rxg-bundles__optional-freq { color: var(--rxg-muted); font-weight: 400; }

/* Vertragsdetails button */
.rxg-bundles__details-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: none;
	padding: 0;
	margin-top: 1.2rem;
	color: var(--rxg-muted);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
	transition: color .15s ease;
}
.rxg-bundles__details-btn:hover { color: #fff; }

/* ---------------- Modal ---------------- */
.rxg-bundles__modal[hidden] { display: none; }
.rxg-bundles__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.rxg-bundles__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(2px);
}
.rxg-bundles__modal-box {
	position: relative;
	width: min(620px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: #121212;
	border: 1px solid var(--rxg-card-border);
	border-top: 3px solid var(--rxg-primary);
	border-radius: var(--rxg-radius);
	padding: 1.9rem;
	color: var(--rxg-text);
}
.rxg-bundles__modal-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 2.4rem;
	height: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--rxg-hair);
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.rxg-bundles__modal-close:hover { border-color: var(--rxg-primary); background: rgba(227,6,19,.1); }

.rxg-bundles__modal-eyebrow {
	color: var(--rxg-primary);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 .35rem;
}
.rxg-bundles__modal-title {
	font-family: var(--rxg-anton);
	font-weight: 400;
	font-size: 1.6rem;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	color: #fff;
}
.rxg-bundles__modal-rows {
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
}
.rxg-bundles__modal-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--rxg-hair);
}
.rxg-bundles__modal-row dt { color: var(--rxg-muted); margin: 0; }
.rxg-bundles__modal-row dd { margin: 0; font-weight: 600; text-align: right; }
.rxg-bundles__modal-row--total dt,
.rxg-bundles__modal-row--total dd {
	color: var(--rxg-primary);
	font-weight: 700;
}
.rxg-bundles__modal-footnote {
	font-size: .82rem;
	line-height: 1.6;
	color: var(--rxg-muted);
	margin: 0;
}