/**
 * Framebrand Sponsorship Table widget styles.
 *
 * Defaults are the Figma values (nodes 2212:41146 / 2249:69039):
 * 80px/56px section padding, a 440px feature column plus equal package
 * columns, a 280px #260D40 header band, #8069F0 accents, 32px check marks.
 */

.fb-sptable {
	--fb-sp-bg: #ffffff;
	--fb-sp-pad: 80px 56px;
	--fb-sp-label-w: 440px;

	--fb-sp-tabframe: #161616;
	--fb-sp-tab-bg: #ffffff;
	--fb-sp-tab-color: #5f5f5f;
	--fb-sp-tab-color-active: #ffffff;
	--fb-sp-note-color: #161616;
	--fb-sp-note-gap: 40px;

	--fb-sp-intro-w: 262px;
	--fb-sp-intro-h: 110px;
	--fb-sp-head-bg: #260d40;
	--fb-sp-head-min-h: 280px;
	--fb-sp-head-border: #eeeeee;
	--fb-sp-head-color: #ffffff;
	--fb-sp-sub-color: rgba(255, 255, 255, 0.8);
	--fb-sp-meta-h: 84px;
	--fb-sp-tag-bg: #f6f5fa;
	--fb-sp-tag-color: #260d40;
	--fb-sp-cta-bg: #8069f0;
	--fb-sp-cta-color: #ffffff;

	--fb-sp-row-bg: #ffffff;
	--fb-sp-row-color: #161616;
	--fb-sp-row-border: rgba(238, 238, 238, 0.93);
	--fb-sp-row-pad: 24px 16px;
	--fb-sp-mark-pad: 8px 16px;
	--fb-sp-check: #8069f0;
	--fb-sp-check-size: 32px;

	--fb-sp-notes-title-color: #260d40;
	--fb-sp-notes-color: #161616;
	--fb-sp-stepper-bg: #7d67eb;
	--fb-sp-stepper-color: #ffffff;

	--fb-sp-cols: 6;

	/* This site's <body> is 24px/36px/0.48px; isolate so nothing inherits it. */
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;

	background: var(--fb-sp-bg);
	padding: var(--fb-sp-pad);
	box-sizing: border-box;
	width: 100%;
}

.fb-sptable *,
.fb-sptable *::before,
.fb-sptable *::after {
	box-sizing: border-box;
}

/* --- Tab bar ------------------------------------------------------------- */

.fb-sptable__tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.fb-sptable__tabs-frame {
	display: inline-flex;
	background: var(--fb-sp-tabframe);
	padding: 2px;
}

/* Qualified with the element so theme/kit `button` rules can't win. */
.fb-sptable button.fb-sptable__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 0;
	margin: 0;
	padding: 10px 16px;
	border: 4px solid var(--fb-sp-tab-bg);
	border-radius: 0;
	background: var(--fb-sp-tab-bg);
	color: var(--fb-sp-tab-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fb-sptable button.fb-sptable__tab--active {
	background: #8069f0;
	color: var(--fb-sp-tab-color-active);
}

.fb-sptable p.fb-sptable__note {
	margin: 0 0 var(--fb-sp-note-gap);
	text-align: center;
	color: var(--fb-sp-note-color);
}

/* --- Panels -------------------------------------------------------------- */

.fb-sptable__panel[hidden] {
	display: none;
}

.fb-sptable__scroll {
	width: 100%;
	overflow-x: auto;
}

.fb-sptable__grid {
	display: grid;
	grid-template-columns: var(--fb-sp-label-w) repeat(var(--fb-sp-cols), minmax(140px, 1fr));
	min-width: 100%;
}

.fb-sptable__row {
	display: contents;
}

.fb-sptable__cell {
	display: flex;
	background: var(--fb-sp-row-bg);
	box-shadow:
		inset 0 1px 0 var(--fb-sp-row-border),
		inset 0 -1px 0 var(--fb-sp-row-border);
	padding: var(--fb-sp-row-pad);
	align-items: center;
}

/* --- Header band --------------------------------------------------------- */

/* The design stacks a package cell as 24px padding, an 86px name/price group,
   an 8px gap, then a 138px block of an 84px breakdown box above the 46px
   button — 280px in all. Fixing the band and the breakdown box is what starts
   every breakdown on the same line and leaves every button on one baseline,
   however many lines a column happens to carry. */
.fb-sptable__row--head .fb-sptable__cell {
	background: var(--fb-sp-head-bg);
	box-shadow: none;
	color: var(--fb-sp-head-color);
	min-height: var(--fb-sp-head-min-h);
	padding: 24px;
}

/* Qualified so the header cell's own 24px padding can't win on specificity. */
.fb-sptable__row--head .fb-sptable__cell--intro {
	padding: 16px;
	align-items: center;
	border-bottom: 1px solid var(--fb-sp-head-border);
}

/* A 262x110 block centred in the band — the design tops the two lines out in
   it, which is why the label reads above the band's centre line. */
.fb-sptable__intro {
	display: block;
	width: var(--fb-sp-intro-w);
	max-width: 100%;
	min-height: var(--fb-sp-intro-h);
	color: var(--fb-sp-head-color);
}

.fb-sptable__cell--pkg {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}

.fb-sptable__pkg-top,
.fb-sptable__pkg-bottom,
.fb-sptable__pkg-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.fb-sptable__pkg-top {
	gap: 24px;
}

.fb-sptable__pkg-bottom,
.fb-sptable__pkg-meta {
	gap: 8px;
}

.fb-sptable__pkg-meta {
	min-height: var(--fb-sp-meta-h);
}

.fb-sptable__pkg-name,
.fb-sptable__pkg-price {
	color: var(--fb-sp-head-color);
	white-space: nowrap;
}

.fb-sptable__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 14px;
	border-radius: 54px;
	background: var(--fb-sp-tag-bg);
	color: var(--fb-sp-tag-color);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.3766px;
	white-space: nowrap;
}

.fb-sptable__pkg-sub {
	color: var(--fb-sp-sub-color);
}

.fb-sptable a.fb-sptable__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 167px;
	max-width: 100%;
	padding: 14px 16px;
	border-radius: 5px;
	background: var(--fb-sp-cta-bg);
	color: var(--fb-sp-cta-color);
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.18s ease;
}

.fb-sptable a.fb-sptable__cta:hover,
.fb-sptable a.fb-sptable__cta:focus-visible {
	filter: brightness(1.1);
}

/* --- Feature rows -------------------------------------------------------- */

.fb-sptable__cell--label {
	justify-content: flex-start;
}

.fb-sptable__feature {
	color: var(--fb-sp-row-color);
	overflow-wrap: break-word;
	min-width: 0;
}

/* The design pads mark cells 8px vertically, not the label cells' 24px, so a
   32px check still fits inside a 74px row. */
.fb-sptable__cell--mark {
	justify-content: center;
	padding: var(--fb-sp-mark-pad);
}

.fb-sptable__check {
	display: block;
	width: var(--fb-sp-check-size);
	height: var(--fb-sp-check-size);
	color: var(--fb-sp-check);
	flex: 0 0 auto;
}

/* --- Notes --------------------------------------------------------------- */

.fb-sptable__notes {
	margin-top: 40px;
}

.fb-sptable h3.fb-sptable__notes-title {
	margin: 0 0 20px;
	padding-left: 16px;
	color: var(--fb-sp-notes-title-color);
}

.fb-sptable ol.fb-sptable__notes-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fb-sptable .fb-sptable__note-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	list-style: none;
}

.fb-sptable__stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 112px;
	background: var(--fb-sp-stepper-bg);
	color: var(--fb-sp-stepper-color);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: -0.14px;
}

.fb-sptable__note-text {
	color: var(--fb-sp-notes-color);
	overflow-wrap: break-word;
	min-width: 0;
}

/* --- Below 1024px -------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Too little width left for a 280px band to be anything but empty space. */
	.fb-sptable {
		--fb-sp-head-min-h: 0px;
		--fb-sp-intro-h: 0px;
	}

	.fb-sptable__grid {
		grid-template-columns: 280px repeat(var(--fb-sp-cols), minmax(180px, 1fr));
	}

	/* 24px of padding each side leaves too little for the button. */
	.fb-sptable__row--head .fb-sptable__cell {
		padding: 16px 12px;
	}

	.fb-sptable a.fb-sptable__cta {
		width: 100%;
		padding: 12px 8px;
		white-space: normal;
		text-align: center;
		overflow-wrap: break-word;
	}

	.fb-sptable__pkg-name,
	.fb-sptable__pkg-price {
		white-space: normal;
	}

	.fb-sptable__intro {
		width: auto;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.fb-sptable__grid {
		grid-template-columns: 220px repeat(var(--fb-sp-cols), minmax(170px, 1fr));
	}

	.fb-sptable__cell {
		padding: 16px 12px;
	}

	.fb-sptable .fb-sptable__note-item {
		padding: 12px 0;
	}

	.fb-sptable h3.fb-sptable__notes-title {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-sptable *,
	.fb-sptable *::before,
	.fb-sptable *::after {
		transition-duration: 0.01ms !important;
	}
}