/**
 * MK Comparison Table — affiliate sammenligning (frontend + editor).
 *
 * Prefixes: mk-ac- (tabeller/kort), mk-pl- (produktliste / test-side layout)
 */

/* ——— Design tokens (produktliste / mockup) ——— */
.mk-pl-page,
.mk-pl-sidebar,
.mk-pl-product-card,
.mk-pl-articles {
	--mk-pl-green-dark: #1a4338;
	--mk-pl-green-mid: #245a4a;
	--mk-pl-accent: #3ecf8e;
	--mk-pl-accent-hover: #2fb87a;
	--mk-pl-border: #e2e6ea;
	--mk-pl-bg-soft: #f4f6f7;
	--mk-pl-text: #1c1c1c;
	--mk-pl-text-muted: #5c656d;
}

/* ——— Fuld bredde + luft ——— */
.wp-block-group.alignfull.mk-pl-page {
	padding-left: max(1rem, env(safe-area-inset-left, 0px));
	padding-right: max(1rem, env(safe-area-inset-right, 0px));
	box-sizing: border-box;
}

/* ——— To kolonner: filter + hovedindhold ——— */
.mk-pl-layout {
	align-items: flex-start;
	gap: 1.75rem;
}

.mk-pl-sidebar {
	background: var(--mk-pl-bg-soft);
	border: 1px solid var(--mk-pl-border);
	border-radius: 10px;
	padding: 1.1rem 1rem 1.25rem;
	min-width: 0;
}

.mk-pl-main {
	min-width: 0;
}

/* Filter header: Filtrer | Nulstil */
.mk-pl-filter-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--mk-pl-border);
}

.mk-pl-filter-head__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--mk-pl-text);
}

.mk-pl-filter-head__reset {
	margin: 0;
	font-size: 0.9rem;
}

.mk-pl-filter-head__reset a {
	color: var(--mk-pl-green-mid);
	font-weight: 600;
	text-decoration: none;
}

.mk-pl-filter-head__reset a:hover {
	text-decoration: underline;
}

/* Details = accordion (core/details, WP 6.3+) */
.mk-pl-sidebar .wp-block-details.mk-pl-filter-details,
.mk-pl-sidebar details.mk-pl-filter-details {
	border-bottom: 1px solid #dde2e6;
	padding: 0.35rem 0;
}

.mk-pl-sidebar .mk-pl-filter-details summary,
.mk-pl-sidebar details.mk-pl-filter-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--mk-pl-text);
	list-style: none;
	padding: 0.4rem 0;
}

.mk-pl-sidebar .mk-pl-filter-details summary::-webkit-details-marker,
.mk-pl-sidebar details.mk-pl-filter-details summary::-webkit-details-marker {
	display: none;
}

.mk-pl-sidebar .mk-pl-filter-details summary::after,
.mk-pl-sidebar details.mk-pl-filter-details summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-left: auto;
	flex-shrink: 0;
	border-right: 2px solid var(--mk-pl-text-muted);
	border-bottom: 2px solid var(--mk-pl-text-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.mk-pl-sidebar details.mk-pl-filter-details[open] summary::after {
	transform: rotate(-135deg);
}

.mk-pl-sidebar .mk-pl-filter-details .wp-block-paragraph,
.mk-pl-sidebar details.mk-pl-filter-details .wp-block-paragraph {
	margin-top: 0.35rem;
	margin-bottom: 0.65rem;
	color: var(--mk-pl-text-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* Sidebar: mørkegrøn nyhedsbrev-boks */
.mk-pl-sidebar-cta {
	background: var(--mk-pl-green-dark);
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 4px 16px rgba(26, 67, 56, 0.2);
}

.mk-pl-sidebar-cta .mk-pl-sidebar-cta__text {
	margin-top: 0;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.95);
}

.mk-pl-sidebar-cta .mk-pl-sidebar-cta__btn .wp-block-button__link,
.mk-pl-sidebar-cta .wp-block-button__link {
	background: var(--mk-pl-accent) !important;
	color: #0a1f18 !important;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	padding: 0.65rem 1rem !important;
	width: 100%;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, filter 0.15s ease;
}

.mk-pl-sidebar-cta .mk-pl-sidebar-cta__btn .wp-block-button__link:hover,
.mk-pl-sidebar-cta .wp-block-button__link:hover {
	background: var(--mk-pl-accent-hover) !important;
	color: #071510 !important;
	filter: brightness(1.02);
}

/* Liste-overskrift */
.mk-pl-list-heading {
	margin-top: 0;
	margin-bottom: 1.15rem;
	color: var(--mk-pl-text);
}

/* ——— Vandret produktkort ——— */
.mk-pl-product-card {
	background: #fff;
	border: 1px solid var(--mk-pl-border);
	border-radius: 10px;
	padding: 1.15rem 1.2rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.mk-pl-product-card__cols {
	gap: 1.25rem 1.5rem;
	align-items: center !important;
}

.mk-pl-product-card__image {
	margin: 0;
}

.mk-pl-product-card__image img {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mk-pl-product-card__brand {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	color: var(--mk-pl-text);
}

.mk-pl-product-card__model {
	margin: 0 0 0.65rem;
	color: var(--mk-pl-text);
}

.mk-pl-product-card__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.mk-pl-product-card__link-buy {
	margin: 0;
}

.mk-pl-product-card__link-buy a {
	color: var(--mk-pl-green-mid);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.mk-pl-product-card__link-buy a:hover {
	text-decoration: underline;
}

.mk-pl-product-card__link-compare {
	margin: 0;
}

.mk-pl-product-card__link-compare a {
	color: var(--mk-pl-text-muted);
	font-size: 0.88rem;
	text-decoration: none;
}

.mk-pl-product-card__link-compare a:hover {
	text-decoration: underline;
}

.mk-pl-product-card__col-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	text-align: right;
	gap: 0.5rem;
}

.mk-pl-product-card__rating {
	width: 100%;
	text-align: right;
}

.mk-pl-product-card__rating-label {
	margin: 0 0 0.1rem;
	color: var(--mk-pl-text-muted);
}

.mk-pl-product-card__rating-score {
	margin: 0;
	line-height: 1.1;
	color: var(--mk-pl-green-dark);
}

.mk-pl-product-card__buttons {
	width: 100%;
	justify-content: flex-end !important;
	margin: 0;
}

.mk-pl-product-card__buttons .mk-pl-btn-price .wp-block-button__link {
	background: var(--mk-pl-accent) !important;
	color: #0a1f18 !important;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	padding: 0.55rem 1.35rem !important;
	font-size: 0.95rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(62, 207, 142, 0.35);
	transition: background 0.15s ease, transform 0.1s ease;
}

.mk-pl-product-card__buttons .mk-pl-btn-price .wp-block-button__link:hover {
	background: var(--mk-pl-accent-hover) !important;
	color: #071510 !important;
	transform: translateY(-1px);
}

.mk-pl-product-card__price {
	margin: 0.15rem 0 0;
	color: var(--mk-pl-text);
}

@media (max-width: 781px) {
	.mk-pl-product-card__col-cta {
		align-items: flex-start;
		text-align: left;
	}

	.mk-pl-product-card__rating {
		text-align: left;
	}

	.mk-pl-product-card__buttons {
		justify-content: flex-start !important;
	}

	.mk-pl-product-card__price {
		text-align: left !important;
	}
}

/* ——— Artikel-banner (mørkegrøn) ——— */
.mk-pl-articles {
	background: linear-gradient(145deg, var(--mk-pl-green-dark) 0%, #16352c 100%);
	border-radius: 10px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.mk-pl-articles__title {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff !important;
}

.mk-pl-articles__cols {
	gap: 1rem;
}

.mk-pl-articles__item .mk-pl-articles__thumb {
	margin: 0 0 0.5rem;
	border-radius: 8px;
	overflow: hidden;
}

.mk-pl-articles__item .mk-pl-articles__thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

.mk-pl-articles__headline {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.35;
	font-weight: 600;
}

.mk-pl-articles__headline a {
	color: #fff !important;
	text-decoration: none;
	opacity: 0.96;
}

.mk-pl-articles__headline a:hover {
	text-decoration: underline;
	opacity: 1;
}

@media (max-width: 781px) {
	.mk-pl-layout {
		flex-direction: column;
	}

	.mk-pl-layout > .wp-block-column.mk-pl-sidebar {
		flex-basis: 100% !important;
	}

	.mk-pl-layout > .wp-block-column.mk-pl-main {
		flex-basis: 100% !important;
	}
}

/* ——— Scroll wrapper (mobil) ——— */
.mk-ac-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	border: 1px solid #e2e6ea;
	background: #fff;
}

.mk-ac-table-wrap .wp-block-table {
	margin: 0;
}

.mk-ac-table-wrap .wp-block-table figure {
	margin: 0;
}

/* ——— Table base ——— */
.mk-ac-table table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.45;
}

.mk-ac-table--narrow table {
	min-width: 360px;
}

.mk-ac-table thead th {
	text-align: left;
	vertical-align: bottom;
	padding: 0.85rem 0.75rem;
	background: #f4f6f8;
	border-bottom: 2px solid #dce2e8;
	font-weight: 600;
}

.mk-ac-table .mk-ac-corner {
	width: 28%;
	min-width: 7rem;
	background: #eef1f4;
}

.mk-ac-table tbody th[scope="row"] {
	text-align: left;
	font-weight: 500;
	padding: 0.65rem 0.75rem;
	background: #fafbfc;
	border-bottom: 1px solid #e8ecf0;
}

.mk-ac-table tbody td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid #e8ecf0;
	vertical-align: middle;
}

.mk-ac-table tbody tr:last-child th,
.mk-ac-table tbody tr:last-child td {
	border-bottom: none;
}

/* Featured column header (Anbefalet) */
.mk-ac-table .mk-ac-th--featured {
	background: linear-gradient(180deg, #e8f5f3 0%, #f4f6f8 100%);
	border-left: 1px solid #c5ddd8;
	border-right: 1px solid #c5ddd8;
	position: relative;
}

.mk-ac-badge {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.15rem 0.45rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #0d4a42;
	background: #bfe8e0;
	border-radius: 3px;
	vertical-align: middle;
}

/* Highlight featured column: 3 produkter = kolonne 2 (første produkt efter label-kolonne) */
.mk-ac-table:not(.mk-ac-table--narrow) tbody tr td:nth-child(2),
.mk-ac-table:not(.mk-ac-table--narrow) thead tr th:nth-child(2) {
	box-shadow: inset 1px 0 0 #c5ddd8;
}

/* 2 produkter: “Anbefalet” er tredje kolonne */
.mk-ac-table--narrow thead .mk-ac-th--featured {
	background: linear-gradient(180deg, #e8f5f3 0%, #f4f6f8 100%);
}

.mk-ac-table--narrow tbody tr td:nth-child(3),
.mk-ac-table--narrow thead tr th:nth-child(3) {
	box-shadow: inset 1px 0 0 #c5ddd8, inset -1px 0 0 #c5ddd8;
}

/* CTA row */
.mk-ac-row-cta th,
.mk-ac-row-cta td {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	vertical-align: middle;
	background: #f9fafb;
}

.mk-ac-cta {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	color: #fff !important;
	background: #178a7c;
	border-radius: 4px;
	border: none;
	transition: background-color 0.15s ease, filter 0.15s ease;
}

.mk-ac-cta:hover,
.mk-ac-cta:focus {
	background: #136f64;
	filter: brightness(1.02);
	color: #fff !important;
}

/* Disclaimer */
.mk-ac-disclaimer {
	margin-top: 0.5rem;
	opacity: 0.95;
}

/* ——— Card row (three columns) ——— */
.mk-ac-cards .wp-block-columns {
	align-items: stretch;
}

.mk-ac-card {
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	padding: 1rem 1rem 1.25rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mk-ac-card--featured {
	border-color: #9dcccf;
	background: linear-gradient(180deg, #f0faf8 0%, #fff 45%);
	box-shadow: 0 4px 14px rgba(23, 138, 124, 0.12);
}

.mk-ac-card .wp-block-heading,
.mk-ac-card p {
	margin-top: 0;
}

.mk-ac-card__list {
	margin: 0 0 1rem;
	padding-left: 1.15rem;
}

.mk-ac-card__list li {
	margin-bottom: 0.35rem;
}

.mk-ac-card .mk-ac-card__button .wp-block-button__link {
	background-color: #178a7c;
	color: #fff;
	font-weight: 600;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.mk-ac-card .mk-ac-card__button .wp-block-button__link:hover {
	background-color: #136f64;
	color: #fff;
}

@media (max-width: 781px) {
	.mk-ac-cards .wp-block-columns {
		flex-direction: column;
	}
}