/* ============================================================
   RF Support Packages widget — Reloadux Addons
   ============================================================ */

.rfsupportpackages-root {
	/* ─── Defaults ─── */

	/* Section */
	--rf-sp-section-bg: #ffffff;
	--rf-sp-max-width: 1440px;
	--rf-sp-section-padding-block: 0px;
	--rf-sp-section-padding-inline: 0px;
	--rf-sp-font-family: "TT Norms Pro Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
	--rf-sp-body-color: #3b3e45;

	/* Sidebar (desktop) */
	--rf-sp-sidebar-bg: #ffffff;
	--rf-sp-sidebar-radius: 48px;
	--rf-sp-sidebar-padding: 0 0 200px 40px;
	--rf-sp-sidebar-width: 310px;

	/* Tab list */
	--rf-sp-tablist-border-color: #dcdcdc;
	--rf-sp-tablist-border-width: 1px;
	--rf-sp-tablist-radius: 16px;
	--rf-sp-tablist-padding: 8px;
	--rf-sp-tablist-width: 270px;

	/* Tabs */
	--rf-sp-tab-color: #3b3e45;
	--rf-sp-tab-color-hover: #3b3e45;
	--rf-sp-tab-color-active: #ffffff;
	--rf-sp-tab-bg: transparent;
	--rf-sp-tab-bg-hover: #f7f7f7;
	--rf-sp-tab-bg-active: #2f2f2f;
	--rf-sp-tab-radius: 33px;
	--rf-sp-tab-radius-active: 12px;
	--rf-sp-tab-padding: 12px 16px;

	/* Cards — shared */
	--rf-sp-card-radius: 16px;
	--rf-sp-card-gap: 20px;
	--rf-sp-card-grid-padding: 0 40px;
	--rf-sp-card-header-padding: 24px 20px 17px;
	--rf-sp-card-body-padding: 16px 18px;
	--rf-sp-card-body-padding-complete: 16px;
	--rf-sp-card-body-gap: 28px;
	--rf-sp-feature-gap: 8px;
	--rf-sp-icon-size: 24px;
	--rf-sp-icon-label-gap: 4px;

	/* Basic tier */
	--rf-sp-basic-bg: #ffffff;
	--rf-sp-basic-border-color: #dcdcdc;
	--rf-sp-basic-border-width: 1px;
	--rf-sp-basic-header-bg: #f7f7f7;
	--rf-sp-basic-header-divider: #dcdcdc;
	--rf-sp-basic-title-color: #2f2f2f;
	--rf-sp-basic-subtitle-color: #2f2f2f;
	--rf-sp-basic-feat-color: #2f2f2f;
	--rf-sp-basic-feat-icon: #51bc51;
	--rf-sp-basic-muted-opacity: 0.6;
	--rf-sp-basic-muted-icon: #dcdcdc;
	--rf-sp-basic-cta-bg: #1070d7;
	--rf-sp-basic-cta-color: #ffffff;
	--rf-sp-basic-cta-border-color: transparent;
	--rf-sp-basic-cta-border-width: 0;
	--rf-sp-basic-cta-radius: 33px;
	--rf-sp-basic-cta-padding: 8px 12px;

	/* Extended tier */
	--rf-sp-extended-bg: #1070d7;
	--rf-sp-extended-border-color: transparent;
	--rf-sp-extended-border-width: 0;
	--rf-sp-extended-header-bg: #1070d7;
	--rf-sp-extended-header-divider: rgba(255, 255, 255, 0.2);
	--rf-sp-extended-title-color: #ffffff;
	--rf-sp-extended-subtitle-color: #ffffff;
	--rf-sp-extended-feat-color: #ffffff;
	--rf-sp-extended-feat-icon: #51bc51;
	--rf-sp-extended-muted-opacity: 0.6;
	--rf-sp-extended-muted-icon: rgba(255, 255, 255, 0.4);
	--rf-sp-extended-cta-bg: #ffffff;
	--rf-sp-extended-cta-color: #000000;
	--rf-sp-extended-cta-border-color: #dcdcdc;
	--rf-sp-extended-cta-border-width: 1px;
	--rf-sp-extended-cta-radius: 33px;
	--rf-sp-extended-cta-padding: 8px 12px;

	/* Complete tier */
	--rf-sp-complete-bg: #0a4585;
	--rf-sp-complete-border-color: transparent;
	--rf-sp-complete-border-width: 0;
	--rf-sp-complete-header-bg: #0a4585;
	--rf-sp-complete-header-divider: rgba(255, 255, 255, 0.2);
	--rf-sp-complete-title-color: #ffffff;
	--rf-sp-complete-subtitle-color: #ffffff;
	--rf-sp-complete-feat-color: #ffffff;
	--rf-sp-complete-feat-icon: #51bc51;
	--rf-sp-complete-muted-opacity: 0.6;
	--rf-sp-complete-muted-icon: rgba(255, 255, 255, 0.4);
	--rf-sp-complete-cta-bg: #1070d7;
	--rf-sp-complete-cta-color: #ffffff;
	--rf-sp-complete-cta-border-color: transparent;
	--rf-sp-complete-cta-border-width: 0;
	--rf-sp-complete-cta-radius: 33px;
	--rf-sp-complete-cta-padding: 8px 12px;

	/* Popular badge */
	--rf-sp-badge-bg: #fec90d;
	--rf-sp-badge-color: #2f2f2f;
	--rf-sp-badge-radius: 24px;
	--rf-sp-badge-padding: 0 16px;
	--rf-sp-badge-height: 32px;

	/* Pagination dots */
	--rf-sp-dot-color: #dcdcdc;
	--rf-sp-dot-size: 5px;
	--rf-sp-dot-active-color: #1070d7;
	--rf-sp-dot-active-width: 17px;
	--rf-sp-dot-active-radius: 2.5px;

	/* Tablet card sizing */
	--rf-sp-tablet-card-max: 480px;

	background: var(--rf-sp-section-bg);
	padding: var(--rf-sp-section-padding-block) var(--rf-sp-section-padding-inline);
}

/* ─── Scoped reset ─── */

.rfsupportpackages-root *,
.rfsupportpackages-root *::before,
.rfsupportpackages-root *::after {
	box-sizing: border-box;
}

.rfsupportpackages-root ul,
.rfsupportpackages-root ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rfsupportpackages-root li,
.rfsupportpackages-root p,
.rfsupportpackages-root h1,
.rfsupportpackages-root h2,
.rfsupportpackages-root h3,
.rfsupportpackages-root h4,
.rfsupportpackages-root h5,
.rfsupportpackages-root h6 {
	margin: 0;
}

.rfsupportpackages-root button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.rfsupportpackages-root svg {
	display: block;
	max-width: 100%;
}

/* ─── Layout root ─── */

.rfsupportpackages-root .support-packages {
	display: flex;
	width: 100%;
	max-width: var(--rf-sp-max-width);
	margin-inline: auto;
	font-family: var(--rf-sp-font-family);
	font-weight: 500;
	color: var(--rf-sp-body-color);
	background: var(--rf-sp-section-bg);
}

.rfsupportpackages-root .support-packages__dots { display: none; }

/* ─── Sidebar ─── */

.rfsupportpackages-root .support-packages__sidebar {
	flex: 0 0 var(--rf-sp-sidebar-width);
	width: var(--rf-sp-sidebar-width);
	background: var(--rf-sp-sidebar-bg);
	border-radius: var(--rf-sp-sidebar-radius);
	padding: var(--rf-sp-sidebar-padding);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.rfsupportpackages-root .support-packages__tabs {
	width: var(--rf-sp-tablist-width);
	max-width: 100%;
	border: var(--rf-sp-tablist-border-width) solid var(--rf-sp-tablist-border-color);
	border-radius: var(--rf-sp-tablist-radius);
	padding: var(--rf-sp-tablist-padding);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--rf-sp-tablist-gap, 4px);
}

.rfsupportpackages-root .support-packages__tabs > li {
	width: 100%;
	min-width: 0;
	list-style: none;
}

.rfsupportpackages-root .support-packages__tab {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: var(--rf-sp-tab-padding);
	border-radius: var(--rf-sp-tab-radius);
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: var(--rf-sp-tab-color);
	text-align: left;
	background: var(--rf-sp-tab-bg);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: background-color 120ms ease, color 120ms ease;
}

.rfsupportpackages-root .support-packages__tab:hover {
	background: var(--rf-sp-tab-bg-hover);
	color: var(--rf-sp-tab-color-hover);
	border-radius: var(--rf-sp-tab-radius-active);
}

.rfsupportpackages-root .support-packages__tab.is-active {
	background: var(--rf-sp-tab-bg-active);
	color: var(--rf-sp-tab-color-active);
	border-radius: var(--rf-sp-tab-radius-active);
}

/* ─── Grid ─── */

.rfsupportpackages-root .support-packages__grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0 40px;
	align-items: stretch;
}

.rfsupportpackages-root .support-packages__grid--two-card {
	grid-template-columns: repeat(2, 1fr);
}

/* ─── Card (shared base) ─── */

.rfsupportpackages-root .support-packages__tier {
	display: flex;
	flex-direction: column;
	border-radius: var(--rf-sp-card-radius);
	overflow: clip;
}

.rfsupportpackages-root .support-packages__tier-header {
	padding: var(--rf-sp-card-header-padding);
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.rfsupportpackages-root .support-packages__tier-title {
	font-family: inherit;
	font-weight: 500;
	font-size: 24px;
	line-height: 30px;
}

.rfsupportpackages-root .support-packages__tier-subtitle {
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}

.rfsupportpackages-root .support-packages__tier-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--rf-sp-card-body-gap);
}

.rfsupportpackages-root .support-packages__features {
	display: flex;
	flex-direction: column;
	gap: var(--rf-sp-feature-gap);
	width: 100%;
}

.rfsupportpackages-root .support-packages__feature {
	display: flex;
	gap: var(--rf-sp-icon-label-gap);
	align-items: center;
	width: 100%;
}

.rfsupportpackages-root .support-packages__feature-icon {
	flex: 0 0 var(--rf-sp-icon-size);
	width: var(--rf-sp-icon-size);
	height: var(--rf-sp-icon-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rfsupportpackages-root .support-packages__feature-label {
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.015em;
}

/* Two-line label */
.rfsupportpackages-root .support-packages__feature--two-line .support-packages__feature-label {
	white-space: normal;
}
.rfsupportpackages-root .support-packages__feature--two-line .support-packages__feature-icon {
	align-self: flex-start;
	margin-top: 8px;
}

.rfsupportpackages-root .support-packages__cta {
	width: 100%;
	height: 40px;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: filter 120ms ease, transform 120ms ease;
	text-decoration: none;
}
.rfsupportpackages-root .support-packages__cta:hover { filter: brightness(0.95); }
.rfsupportpackages-root .support-packages__cta:active { transform: translateY(1px); }

/* ─── Icon (inline SVG via <use>) ─── */

.rfsupportpackages-root .support-packages__feature-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─── Tier: Basic (white) ─── */

.rfsupportpackages-root .support-packages__tier--basic {
	background: var(--rf-sp-basic-bg);
	border: var(--rf-sp-basic-border-width) solid var(--rf-sp-basic-border-color);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__tier-header {
	background: var(--rf-sp-basic-header-bg);
	border-bottom: 1px solid var(--rf-sp-basic-header-divider);
	color: var(--rf-sp-basic-title-color);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__tier-title {
	color: var(--rf-sp-basic-title-color);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__tier-subtitle {
	color: var(--rf-sp-basic-subtitle-color);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__tier-body {
	padding: var(--rf-sp-card-body-padding);
	color: var(--rf-sp-basic-feat-color);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__feature-icon {
	color: var(--rf-sp-basic-feat-icon);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__feature.is-muted .support-packages__feature-icon {
	color: var(--rf-sp-basic-muted-icon);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__feature.is-muted .support-packages__feature-label {
	opacity: var(--rf-sp-basic-muted-opacity);
}
.rfsupportpackages-root .support-packages__tier--basic .support-packages__cta {
	background: var(--rf-sp-basic-cta-bg);
	color: var(--rf-sp-basic-cta-color);
	border: var(--rf-sp-basic-cta-border-width) solid var(--rf-sp-basic-cta-border-color);
	border-radius: var(--rf-sp-basic-cta-radius);
	padding: var(--rf-sp-basic-cta-padding);
}

/* ─── Tier: Extended (blue) ─── */

.rfsupportpackages-root .support-packages__tier--extended {
	background: var(--rf-sp-extended-bg);
	border: var(--rf-sp-extended-border-width) solid var(--rf-sp-extended-border-color);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__tier-header {
	background: var(--rf-sp-extended-header-bg);
	border-bottom: 1px solid var(--rf-sp-extended-header-divider);
	color: var(--rf-sp-extended-title-color);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__tier-title {
	color: var(--rf-sp-extended-title-color);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__tier-subtitle {
	color: var(--rf-sp-extended-subtitle-color);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__tier-body {
	padding: var(--rf-sp-card-body-padding);
	color: var(--rf-sp-extended-feat-color);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__feature-icon {
	color: var(--rf-sp-extended-feat-icon);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__feature.is-muted .support-packages__feature-icon {
	color: var(--rf-sp-extended-muted-icon);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__feature.is-muted .support-packages__feature-label {
	opacity: var(--rf-sp-extended-muted-opacity);
}
.rfsupportpackages-root .support-packages__tier--extended .support-packages__cta {
	background: var(--rf-sp-extended-cta-bg);
	color: var(--rf-sp-extended-cta-color);
	border: var(--rf-sp-extended-cta-border-width) solid var(--rf-sp-extended-cta-border-color);
	border-radius: var(--rf-sp-extended-cta-radius);
	padding: var(--rf-sp-extended-cta-padding);
}

/* ─── Tier: Complete (dark blue, Popular) ─── */

.rfsupportpackages-root .support-packages__tier--complete {
	background: var(--rf-sp-complete-bg);
	border: var(--rf-sp-complete-border-width) solid var(--rf-sp-complete-border-color);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__tier-header {
	background: var(--rf-sp-complete-header-bg);
	border-bottom: 1px solid var(--rf-sp-complete-header-divider);
	color: var(--rf-sp-complete-title-color);
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__tier-header-text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__tier-title {
	color: var(--rf-sp-complete-title-color);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__tier-subtitle {
	color: var(--rf-sp-complete-subtitle-color);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__tier-body {
	padding: var(--rf-sp-card-body-padding-complete);
	color: var(--rf-sp-complete-feat-color);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__feature-icon {
	color: var(--rf-sp-complete-feat-icon);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__feature.is-muted .support-packages__feature-icon {
	color: var(--rf-sp-complete-muted-icon);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__feature.is-muted .support-packages__feature-label {
	opacity: var(--rf-sp-complete-muted-opacity);
}
.rfsupportpackages-root .support-packages__tier--complete .support-packages__cta {
	background: var(--rf-sp-complete-cta-bg);
	color: var(--rf-sp-complete-cta-color);
	border: var(--rf-sp-complete-cta-border-width) solid var(--rf-sp-complete-cta-border-color);
	border-radius: var(--rf-sp-complete-cta-radius);
	padding: var(--rf-sp-complete-cta-padding);
}

.rfsupportpackages-root .support-packages__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--rf-sp-badge-height);
	padding: var(--rf-sp-badge-padding);
	border-radius: var(--rf-sp-badge-radius);
	background: var(--rf-sp-badge-bg);
	color: var(--rf-sp-badge-color);
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

/* ─── Screen-reader only ─── */

.rfsupportpackages-root .support-packages__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Phone + tablet (≤1199px)
   ============================================================ */
@media (max-width: 1199px) {

	.rfsupportpackages-root .support-packages {
		width: 100%;
		max-width: 100vw;
		flex-direction: column;
		gap: 16px;
		padding: 16px 0;
		overflow-x: clip;
	}

	/* Tabs */
	.rfsupportpackages-root .support-packages__sidebar {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 16px;
		border-radius: 0;
		background: transparent;
	}
	.rfsupportpackages-root .support-packages__tabs {
		width: fit-content;
		max-width: 100%;
		flex-direction: row;
		align-items: stretch;
		border: var(--rf-sp-tablist-border-width) solid var(--rf-sp-tablist-border-color);
		border-radius: var(--rf-sp-tablist-radius);
		padding: 4px;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}
	.rfsupportpackages-root .support-packages__tabs::-webkit-scrollbar { display: none; }
	.rfsupportpackages-root .support-packages__tabs > li {
		flex: 0 0 auto;
		width: auto;
	}
	.rfsupportpackages-root .support-packages__tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: auto;
		padding: 9px 12px;
		border-radius: var(--rf-sp-tab-radius-active);
		font-size: 14px;
		line-height: 22px;
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: normal;
		text-align: center;
	}
	.rfsupportpackages-root .support-packages__tab.is-active {
		border-radius: var(--rf-sp-tab-radius-active);
	}

	/* Card carousel */
	.rfsupportpackages-root .support-packages__grid {
		flex: 0 0 auto;
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		padding: 0 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
	}
	.rfsupportpackages-root .support-packages__grid::-webkit-scrollbar { display: none; }

	.rfsupportpackages-root .support-packages__tier {
		flex: 0 0 min(calc(100vw - 47px), var(--rf-sp-tablet-card-max));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.rfsupportpackages-root .support-packages__tier:last-child {
		flex-basis: min(calc(100vw - 32px), var(--rf-sp-tablet-card-max));
	}

	.rfsupportpackages-root.is-snap-loose .support-packages__tier {
		scroll-snap-stop: normal;
	}

	/* Pagination dots */
	.rfsupportpackages-root .support-packages__dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4px;
	}
	.rfsupportpackages-root.is-dots-hidden .support-packages__dots {
		display: none;
	}
	.rfsupportpackages-root .support-packages__dot {
		flex: 0 0 auto;
		width: var(--rf-sp-dot-size);
		height: var(--rf-sp-dot-size);
		border-radius: 50%;
		background: var(--rf-sp-dot-color);
		padding: 0;
		border: none;
		cursor: pointer;
		transition: width 200ms ease, background-color 200ms ease;
	}
	.rfsupportpackages-root .support-packages__dot.is-active {
		width: var(--rf-sp-dot-active-width);
		border-radius: var(--rf-sp-dot-active-radius);
		background: var(--rf-sp-dot-active-color);
	}
}