/**
 * Package comparison: core Table block style "Pakketvergelijking".
 * See lib/package-compare.php.
 */

.wp-block-table.is-style-zdb-pakketten {
	--zdb-purple: #68439a;
	--zdb-purple-dark: #4f307b;
	--zdb-green: #496b3c;
	--zdb-green-light: #edf5e8;
	--zdb-teal: #267d80;
	--zdb-border: #e5e1e9;
	--zdb-text: #373342;
	--zdb-sticky-top: 0px;

	margin: 30px 0;
	border: 1px solid var(--zdb-border);
	border-radius: 0.25rem;
	background: #fff;
	color: var(--zdb-text);
	font-size: 14px;
	line-height: 1.5;
}

.wp-block-table.is-style-zdb-pakketten table {
	min-width: 760px;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.wp-block-table.is-style-zdb-pakketten thead,
.wp-block-table.is-style-zdb-pakketten tfoot {
	border: 0;
}

.wp-block-table.is-style-zdb-pakketten th,
.wp-block-table.is-style-zdb-pakketten td {
	padding: 13px 8px;
	border: 0;
	border-right: 1px solid var(--zdb-border);
	border-bottom: 1px solid var(--zdb-border);
	text-align: center;
	vertical-align: middle;
	overflow-wrap: break-word;
	background: #fff;
}

.wp-block-table.is-style-zdb-pakketten tr > :first-child {
	width: 22%;
	padding-left: 18px;
	text-align: left;
	font-weight: 600;
}

.wp-block-table.is-style-zdb-pakketten tr > :last-child {
	border-right: 0;
}

/* Package headers */
.wp-block-table.is-style-zdb-pakketten thead th {
	padding: 21px 8px;
	border-bottom: 4px solid #392255;
	background: var(--zdb-purple);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
}

.wp-block-table.is-style-zdb-pakketten thead th:first-child {
	padding-left: 18px;
	background: var(--zdb-purple-dark);
}

.wp-block-table.is-style-zdb-pakketten thead th:nth-child(4) {
	border-bottom-color: #31512a;
	background: var(--zdb-green);
}

.wp-block-table.is-style-zdb-pakketten thead th:nth-child(5) {
	background: var(--zdb-purple-dark);
}

.wp-block-table.is-style-zdb-pakketten thead th:nth-child(6) {
	border-bottom-color: #1d6264;
	background: var(--zdb-teal);
}

.wp-block-table.is-style-zdb-pakketten thead th * {
	color: inherit;
}

.wp-block-table.is-style-zdb-pakketten thead th:first-child {
	border-top-left-radius: calc(0.25rem - 1px);
}

.wp-block-table.is-style-zdb-pakketten thead th:last-child {
	border-top-right-radius: calc(0.25rem - 1px);
}

.wp-block-table.is-style-zdb-pakketten tfoot td:first-child {
	border-bottom-left-radius: calc(0.25rem - 1px);
}

.wp-block-table.is-style-zdb-pakketten tfoot td:last-child {
	border-bottom-right-radius: calc(0.25rem - 1px);
}

/* Price */
.wp-block-table.is-style-zdb-pakketten thead strong {
	display: block;
	margin-top: 6px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
}

/* Small print and old price */
.wp-block-table.is-style-zdb-pakketten thead em,
.wp-block-table.is-style-zdb-pakketten thead s {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

/* Features */
.wp-block-table.is-style-zdb-pakketten tbody tr:nth-child(even) > * {
	background: #f8f7fa;
}

.wp-block-table.is-style-zdb-pakketten tbody tr:nth-child(even) > :first-child {
	background: #f1eef5;
}

.wp-block-table.is-style-zdb-pakketten tbody tr:last-child > * {
	border-bottom: 0;
}

.wp-block-table.is-style-zdb-pakketten .zdb-pakketten__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--zdb-green-light);
	color: var(--zdb-green);
	font-size: 16px;
	font-weight: 800;
}

.wp-block-table.is-style-zdb-pakketten .zdb-pakketten__dash {
	color: #c1bdc8;
	font-size: 19px;
}

/* Buttons */
.wp-block-table.is-style-zdb-pakketten tfoot td {
	padding: 16px 8px;
	border-top: 2px solid #e2d8ee;
	border-bottom: 0;
	background: #f3eff8;
}

.wp-block-table.is-style-zdb-pakketten tfoot td:first-child {
	color: var(--zdb-purple-dark);
	font-weight: 700;
}

.wp-block-table.is-style-zdb-pakketten tfoot a {
	display: block;
	padding: 12px 8px;
	border-radius: 0.25rem;
	background: var(--zdb-purple);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.wp-block-table.is-style-zdb-pakketten tfoot a:hover,
.wp-block-table.is-style-zdb-pakketten tfoot a:focus {
	background: var(--zdb-purple-dark);
	color: #fff;
}

.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(4) a {
	background: var(--zdb-green);
}

.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(6) a {
	background: var(--zdb-teal);
}

.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(4) a:hover,
.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(4) a:focus,
.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(6) a:hover,
.wp-block-table.is-style-zdb-pakketten tfoot td:nth-child(6) a:focus {
	filter: brightness(0.85);
}

/* Small screens: scroll sideways with the feature column fixed */
@media (max-width: 1024px) {
	.wp-block-table.is-style-zdb-pakketten {
		overflow-x: auto;
	}

	.wp-block-table.is-style-zdb-pakketten tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 170px;
		box-shadow: 4px 0 8px -4px rgba(65, 45, 86, 0.15);
	}
}

/* Large screens: no scrolling, so the header and buttons can stick to the viewport */
@media (min-width: 1025px) and (min-height: 700px) {
	/* Below Kadence's sticky site header (163px, plus the admin bar) */
	.wp-block-table.is-style-zdb-pakketten {
		--zdb-sticky-top: 163px;

		overflow: visible;
	}

	.admin-bar .wp-block-table.is-style-zdb-pakketten {
		--zdb-sticky-top: 195px;
	}

	.wp-block-table.is-style-zdb-pakketten thead th {
		position: sticky;
		top: var(--zdb-sticky-top);
		z-index: 2;
	}

	.wp-block-table.is-style-zdb-pakketten tfoot td {
		position: sticky;
		bottom: 0;
		z-index: 2;
	}
}