/**
 * casinoexpo-eeat frontend
 *
 * Byline overst och forfattarruta nederst pa inlagg och sidor. Forfattarrutan
 * speglar recensionernas .cexpo-forfattare sa att inlagg, sidor och recensioner
 * ser likadana ut. Skillnaden ar accentfargen: har anvands en bla, redaktionell
 * accent. Gront ar reserverat for casino-CTA:erna och forekommer inte har.
 *
 * Specificiteten loses med upprepad klass (.cexpo-eeat.cexpo-eeat.cexpo-eeat),
 * exakt som i casinoexpo-compare. Det vinner over GeneratePress utan !important.
 */

.cexpo-eeat.cexpo-eeat.cexpo-eeat {
	--cexpo-accent: #1e874e;
	--cexpo-accent-dark: #145e37;
	--cexpo-heading: #0c3b26;
	--cexpo-tint: #eaf6ef;
	--cexpo-tint-2: #cde9d8;
	--cexpo-text: var(--contrast, #1a1a1a);
	--cexpo-muted: #5a5f66;
	--cexpo-line: #e2e4e8;
	--cexpo-bg-soft: #f6f7f9;
	--cexpo-warn-bg: #fff8e5;
	--cexpo-warn-line: #e8c95a;
	--cexpo-radius: 10px;

	color: var(--cexpo-text);
	line-height: 1.6;
}

.cexpo-eeat.cexpo-eeat.cexpo-eeat * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- byline */

.cexpo-eeat.cexpo-eeat.cexpo-eeat.cexpo-eeat__byline-wrap {
	margin: 0 0 22px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cexpo-line);
}

.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	font-size: 0.88em;
	color: var(--cexpo-muted);
	line-height: 1.4;
}

/* Mittpunkt mellan posterna. Forsta posten och pillen far ingen. */
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__byline > * + *::before {
	content: "\00B7";
	margin: 0 8px;
	color: var(--cexpo-line);
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__byline > .cexpo-eeat__pill::before {
	content: none;
}

.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__person {
	display: inline-flex;
	align-items: center;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 8px;
	flex: 0 0 34px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__namn,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fakt,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__datum {
	white-space: nowrap;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__namn a,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fakt a {
	color: var(--cexpo-accent-dark);
	font-weight: 600;
	text-decoration: none;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__namn a:hover,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fakt a:hover {
	text-decoration: underline;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__datum time {
	color: inherit;
}

/* Faktagranskad-markor, samma gula stil som recensionernas niva--granskad. */
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__pill {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cexpo-warn-bg);
	color: #7a5b00;
	border: 1px solid var(--cexpo-warn-line);
	white-space: nowrap;
}

/* ---------------------------------------------------------- forfattarruta */

.cexpo-eeat.cexpo-eeat.cexpo-eeat.cexpo-eeat__sektion {
	margin: 32px 0 0;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__rubrik {
	margin: 0 0 12px;
}

.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__forfattare {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--cexpo-bg-soft);
	border: 1px solid var(--cexpo-line);
	border-radius: var(--cexpo-radius);
	padding: 16px 18px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__media {
	flex: 0 0 auto;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__foto {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 72px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__text {
	flex: 1 1 auto;
	min-width: 0;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fnamn {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 1.05em;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__titel {
	display: block;
	font-weight: 400;
	color: var(--cexpo-muted);
	font-size: 0.88em;
	margin-top: 1px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__expertis {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 9px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__tagg {
	font-size: 0.78em;
	background: #fff;
	border: 1px solid var(--cexpo-line);
	border-radius: 999px;
	padding: 2px 10px;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__text p {
	margin: 0 0 0.6em;
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__granskad {
	font-size: 0.9em;
	color: var(--cexpo-muted);
}
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fnamn a,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__lank a,
.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__granskad a {
	color: var(--cexpo-accent-dark);
}

@media (max-width: 600px) {
	.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__forfattare {
		flex-direction: column;
	}
	.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__namn,
	.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fakt,
	.cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__datum {
		white-space: normal;
	}
}

/* =====================================================================
   Innehallsdesign for vanliga inlagg och sidor (samma redaktionella look
   som recensionerna). Aktiveras via kroppsklassen fsp-eeat-design, som
   pluginen satter pa singular inlagg/sidor som inte ar recensioner och
   bara nar installningen "Innehallsdesign" ar pa. Kan stangas av dar.

   Allt scopas med direkt-barn-selektorer (> h2, > p ...). Det gor att bara
   den lopande texten pa toppniva pavekas. Egna block med egen styling
   (faktarutor, tabeller, FAQ, .alert) och sidans verktyg har sina
   paragrafer/rubriker nastlade och rors darfor inte. EEAT:s egen byline
   och forfattarruta ligger i .cexpo-eeat-block (inte som losa h2/p/ul i
   .entry-content) och pavekas inte heller. Recensionerna styrs av
   cexpo-modern och far aldrig den har klassen.
   ===================================================================== */

/* Brodtext: luftigare och mjukare farg */
body.fsp-eeat-design .entry-content > p {
	font-size: 1.05rem;
	line-height: 1.78;
	color: #2b333d;
	margin: 0 0 1.15em;
}
/* Forsta stycket far en diskret ingress-kansla */
body.fsp-eeat-design .entry-content > p:first-of-type {
	font-size: 1.1rem;
	color: #1f2733;
}

/* Sidans titel (H1). Den ligger utanfor .entry-content och stylas darfor separat
   sa den far samma feta navy-stil som ovriga rubriker i stallet for temats
   tunnare vikt. */
/* Rubrikerna scopas med tredubblad klass (samma knep som cexpo-modern anvander
   pa recensionerna) sa vikten 600 vinner over temats tyngre rubrikstil. Utan det
   slog temats fetare h2 igenom pa sidorna medan recensionerna sag ratt ut. */
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design h1.entry-title,
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-header h1 {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cexpo-heading);
	font-weight: 700 !important;
	letter-spacing: -0.015em;
}

/* Sektionsrubriker (H2) i navy + Sora. Temats storlek behalls. */
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h2 {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cexpo-heading);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

/* Underrubriker (H3/H4): Sora, navy, med liten bla accentstapel ovanfor */
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h3,
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h4 {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cexpo-heading);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 1.7em 0 0.9em;
}
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h3 {
	display: inline-block;
	font-size: 1.32rem;
}
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h4 { font-size: 1.12rem; }
/* Accent: en bla understrykning strax under rubriken, nagot bredare an texten */
body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h3::after {
	content: "";
	display: block;
	width: calc(100% + 18px);
	height: 3px;
	background: linear-gradient(90deg, var(--cexpo-accent), var(--cexpo-accent-dark));
	margin: 5px 0 0 0;
}

/* Lankar i lopande text: redaktionellt bla med mjuk understrykning */
body.fsp-eeat-design .entry-content > p a {
	color: var(--cexpo-accent-dark);
	text-decoration: underline;
	text-decoration-color: rgba(45, 108, 179, 0.35);
	text-underline-offset: 2px;
}
body.fsp-eeat-design .entry-content > p a:hover {
	text-decoration-color: var(--cexpo-accent-dark);
}
/* Diskret betoning */
body.fsp-eeat-design .entry-content > p strong {
	color: var(--cexpo-heading);
	font-weight: 700;
}

/* Listor pa toppniva: blagra markorer och luft */
body.fsp-eeat-design .entry-content > ul,
body.fsp-eeat-design .entry-content > ol {
	font-size: 1.05rem;
	line-height: 1.78;
	color: #2b333d;
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}
body.fsp-eeat-design .entry-content > ul > li,
body.fsp-eeat-design .entry-content > ol > li {
	margin: 0 0 0.45em;
}
body.fsp-eeat-design .entry-content > ul > li::marker {
	color: var(--cexpo-accent);
}
body.fsp-eeat-design .entry-content > ol > li::marker {
	color: var(--cexpo-accent-dark);
	font-weight: 700;
}

@media (max-width: 600px) {
	body.fsp-eeat-design .entry-content > p,
	body.fsp-eeat-design .entry-content > ul,
	body.fsp-eeat-design .entry-content > ol {
		font-size: 1.02rem;
		line-height: 1.72;
	}
	body.fsp-eeat-design.fsp-eeat-design.fsp-eeat-design .entry-content > h3 { font-size: 1.2rem; }
	body.fsp-eeat-design .entry-content > p:first-of-type { font-size: 1.06rem; }
}

/* FAQ pa sidor: identisk look som recensionernas (matchar .cexpo-faq__item).
   Recensionerna stylas av Compare (.cexpo-recension); samma regler upprepas
   har sa att fragor och svar pa vanliga sidor ser likadana ut. Traffar bade
   recensionsmarkup (.cexpo-faq__item), en .faq-wrapper med <details>, och
   fristaende <details> pa toppniva i innehallet. */
body.fsp-eeat-design .entry-content .cexpo-faq__item,
body.fsp-eeat-design .entry-content .faq details,
body.fsp-eeat-design .entry-content > details {
	border-bottom: 1px solid #e2e4e8;
	padding: 4px 0;
}
body.fsp-eeat-design .entry-content .cexpo-faq__item > summary,
body.fsp-eeat-design .entry-content .faq details > summary,
body.fsp-eeat-design .entry-content > details > summary {
	cursor: pointer;
	font-weight: 600;
	padding: 8px 0;
}

/* FAQ-fragor som h3-rubriker (samma som recensionerna). Anvand
   <summary><h3>Fraga</h3></summary> i FAQ-markupen pa sidan. H3:n ligger
   nastlad i summary, sa den pavekas inte av de vanliga > h3-reglerna ovan. */
body.fsp-eeat-design .entry-content .cexpo-faq__item summary h3,
body.fsp-eeat-design .entry-content .faq details summary h3,
body.fsp-eeat-design .entry-content > details summary h3 {
	display: inline;
	margin: 0;
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--cexpo-heading);
	letter-spacing: -0.01em;
}

/* ============================================================
   Innehallsforteckning (samma upplagg som recensionerna)
   Byggs av casinoexpo-eeat pa vanliga inlagg/sidor. Visas som ett
   samlat kort (recensionerna anvander ett helbreddsband). Scopas mot
   kroppsklassen sa overig sajt ar orord.
   ============================================================ */
body.fsp-eeat-design .cexpo-toc {
	margin: 1.6em 0 2em;
	padding: 14px 22px;
	background: var(--cexpo-tint);
	border: 1px solid #d8e6f7;
	border-radius: 12px;
}
/* Infalld som standard: rubriken ar en klickbar summary med pil. Lankarna
   ligger kvar i DOM aven hopfallda, sa sokmotorer laser dem som vanligt. */
body.fsp-eeat-design .cexpo-toc__rubrik {
	margin: 0;
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cexpo-heading);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
}
body.fsp-eeat-design .cexpo-toc__rubrik::-webkit-details-marker { display: none; }
body.fsp-eeat-design .cexpo-toc__rubrik::after {
	content: "\25BE";
	color: var(--cexpo-accent);
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.15s ease;
}
body.fsp-eeat-design .cexpo-toc__detalj[open] > .cexpo-toc__rubrik { margin-bottom: 12px; }
body.fsp-eeat-design .cexpo-toc__detalj[open] > .cexpo-toc__rubrik::after { transform: rotate(180deg); }
body.fsp-eeat-design .cexpo-toc__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 28px;
}
@media (max-width: 600px) {
	body.fsp-eeat-design .cexpo-toc__lista {
		grid-template-columns: 1fr;
	}
}
body.fsp-eeat-design .cexpo-toc__lista li {
	margin: 0;
	padding: 0;
}
body.fsp-eeat-design .cexpo-toc__lista a {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	padding: 5px 0;
	color: var(--cexpo-accent-dark);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}
body.fsp-eeat-design .cexpo-toc__lista a::before {
	content: "\2193";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cexpo-accent);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.fsp-eeat-design .cexpo-toc__lista a:hover {
	text-decoration: underline;
}

/* ============================================================
   Tabeller pa inlagg/sidor (samma navy-stil som recensionerna)
   Bara sidans egna toppniva-tabeller och tabeller i .cexpo-tabell-wrap
   stylas (direkt-barn), sa egna klassade tabeller med egen stil
   (t.ex. .cx-rtp-tabell, som ligger i en egen wrapper) lamnas ororda.
   Wrappa breda tabeller i <div class="cexpo-tabell-wrap"> for vagrat
   skroll pa mobil samt rundade horn.
   ============================================================ */
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap {
	overflow-x: auto;
	margin: 1.4em 0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(19, 49, 92, 0.08);
	-webkit-overflow-scrolling: touch;
}
/* Bare toppniva-tabell: rundade horn och mjuk skugga som RTP-sidan, utan
   att man behover linda den. Separat border-modell behovs sa att
   horncellerna kan rundas. Breda tabeller bor anda lindas i
   .cexpo-tabell-wrap for vagrat skroll pa mobil. */
body.fsp-eeat-design .entry-content > table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: #fff;
	font-size: 1rem;
	margin: 1.4em 0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(19, 49, 92, 0.08);
}
body.fsp-eeat-design .entry-content > table thead th:first-child {
	border-top-left-radius: 12px;
}
body.fsp-eeat-design .entry-content > table thead th:last-child {
	border-top-right-radius: 12px;
}
body.fsp-eeat-design .entry-content > table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 12px;
}
body.fsp-eeat-design .entry-content > table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 12px;
}
/* Tabell i wrappen: wrappen ger rundning och skugga, sjalva tabellen ar plan. */
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table {
	border-collapse: collapse;
	width: 100%;
	background: #fff;
	font-size: 1rem;
	min-width: 560px;
	margin: 0;
}
body.fsp-eeat-design .entry-content > table th,
body.fsp-eeat-design .entry-content > table td,
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table th,
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #e2e4e8;
	vertical-align: top;
}
body.fsp-eeat-design .entry-content > table thead th,
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table thead th {
	background: var(--cexpo-heading);
	color: #fff;
	font-weight: 600;
	border-bottom: 0;
	white-space: nowrap;
}
body.fsp-eeat-design .entry-content > table tbody tr:nth-child(even),
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table tbody tr:nth-child(even) {
	background: #f6f7f9;
}
body.fsp-eeat-design .entry-content > table tbody tr:hover,
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table tbody tr:hover {
	background: #eef3f9;
}
body.fsp-eeat-design .entry-content > table tbody tr:last-child td,
body.fsp-eeat-design .entry-content .cexpo-tabell-wrap > table tbody tr:last-child td {
	border-bottom: 0;
}

/* Scroll-signal for breda tabeller. Ytan pinnar signalen sa den inte skrollar
   med tabellen. Marginalen ligger pa ytan sa signalen aligns med wrappen.
   Signalen tands bara nar det finns mer att skrolla at hoger (JS satter --mer). */
body.fsp-eeat-design .entry-content .cexpo-tabellyta {
	position: relative;
	margin: 1.4em 0;
}
body.fsp-eeat-design .entry-content .cexpo-tabellyta > .cexpo-tabell-wrap {
	margin: 0;
}
body.fsp-eeat-design .entry-content .cexpo-tabellyta__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 34px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(19, 49, 92, 0.16));
	border-radius: 0 12px 12px 0;
}
body.fsp-eeat-design .entry-content .cexpo-tabellyta--mer .cexpo-tabellyta__fade {
	opacity: 1;
}

/* ============================================================
   Innehallskomponenter (cx) for inlagg och sidor (v1.7.0).
   Skrivs som HTML i ett Anpassat HTML-block, klassbaserade.
   Variablerna definieras pa body.fsp-eeat-design sa de nar
   komponenterna under .entry-content. Byline-blockets egna
   variabler ligger pa .cexpo-eeat och racker inte hit.
   Scopas under body.fsp-eeat-design .entry-content for att
   vinna over temat och pluginets egna direkt-barn-regler.
   ============================================================ */

body.fsp-eeat-design {
	--cexpo-navy: var(--cexpo-heading);
	--cexpo-navy-dark: #14233f;
	--cexpo-accent: #1e874e;
	--cexpo-accent-dark: #145e37;
	--cexpo-heading: #0c3b26;
	--cexpo-tint: #eaf6ef;
	--cexpo-tint-2: #cde9d8;
	--cexpo-ok: #1a7a3c;
	--cexpo-ok-dark: #145e2e;
	--cexpo-danger: #b32d2e;
	--cexpo-danger-bg: #fdeceb;
	--cexpo-band: var(--cexpo-tint);
	--cexpo-soft: #f6f7f9;
	--cexpo-rule: #eef0f3;
	--cexpo-line: #e2e4e8;
	--cexpo-muted: #5a5f66;
	--cexpo-body: #2b333d;
	--cexpo-ink: #1f2733;
	--cexpo-radius: 10px;
}

/* Hjalpklasser: rad, etikett, CTA. CTA ar accentbla. */
body.fsp-eeat-design .entry-content .cx-rad{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--cexpo-rule);font-size:1rem}
body.fsp-eeat-design .entry-content .cx-rad:last-child{border-bottom:0}
body.fsp-eeat-design .entry-content .cx-rad > span:first-child{color:var(--cexpo-muted)}
body.fsp-eeat-design .entry-content .cx-rad > span:last-child{color:var(--cexpo-ink);font-weight:600;text-align:right}

body.fsp-eeat-design .entry-content .cx-etikett{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--cexpo-navy);color:#fff}

body.fsp-eeat-design .entry-content .cx-cta{display:block;text-align:center;background:var(--cexpo-accent) !important;color:#fff !important;text-decoration:none !important;padding:11px 16px;border-radius:8px;font-weight:600}
body.fsp-eeat-design .entry-content .cx-cta:hover{background:var(--cexpo-accent-dark) !important;color:#fff !important}

/* Bonusruta: vit med navy rubriktext, tunn delningslinje, accentbla CTA. */
body.fsp-eeat-design .entry-content .cx-bonus{margin:1.8em 0;background:#fff;border:1px solid var(--cexpo-line);border-radius:var(--cexpo-radius);overflow:hidden}
body.fsp-eeat-design .entry-content .cx-bonus-head{padding:14px 18px 12px;border-bottom:1px solid var(--cexpo-rule)}
body.fsp-eeat-design .entry-content .cx-bonus-namn{display:block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cexpo-muted);margin-bottom:3px}
body.fsp-eeat-design .entry-content .cx-bonus-erbj{display:block;font-size:1.3rem;font-weight:700;color:var(--cexpo-navy);line-height:1.2}
body.fsp-eeat-design .entry-content .cx-bonus-kropp{padding:2px 18px}
body.fsp-eeat-design .entry-content .cx-bonus .cx-cta{margin:10px 18px 16px}

/* Rakneexempel: lugn gra box med en accentbla vansterkant. */
body.fsp-eeat-design .entry-content .cx-rakneexempel{margin:1.8em 0;background:var(--cexpo-soft);border:1px solid var(--cexpo-line);border-left:4px solid var(--cexpo-accent);border-radius:0;padding:14px 18px}
body.fsp-eeat-design .entry-content .cx-rakneexempel .cx-rubrik{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cexpo-accent-dark);font-weight:600;margin-bottom:6px}
body.fsp-eeat-design .entry-content .cx-rakneexempel strong{color:var(--cexpo-navy)}

/* RTP-matare */
body.fsp-eeat-design .entry-content .cx-rtp{margin:1.8em 0;background:#fff;border:1px solid var(--cexpo-line);border-radius:var(--cexpo-radius);padding:15px 18px}
body.fsp-eeat-design .entry-content .cx-rtp-topp{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
body.fsp-eeat-design .entry-content .cx-rtp-varde{font-size:1.25rem;font-weight:700;color:var(--cexpo-navy)}
body.fsp-eeat-design .entry-content .cx-rtp-bar{height:8px;border-radius:5px;background:#e7ebf0;overflow:hidden}
body.fsp-eeat-design .entry-content .cx-rtp-fyll{height:100%;background:var(--cexpo-accent)}
body.fsp-eeat-design .entry-content .cx-rtp-not{font-size:.85rem;color:var(--cexpo-muted);margin-top:8px}

/* Trygghetsruta: vit, gron bock for ja, rod kryss for nej. */
body.fsp-eeat-design .entry-content ul.cx-trygghet{margin:1.8em 0;list-style:none;padding:6px 18px;background:#fff;border:1px solid var(--cexpo-line);border-radius:var(--cexpo-radius)}
body.fsp-eeat-design .entry-content ul.cx-trygghet li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--cexpo-rule);margin:0}
body.fsp-eeat-design .entry-content ul.cx-trygghet li:first-child{border-top:0}
body.fsp-eeat-design .entry-content ul.cx-trygghet li::before{position:absolute;left:0;top:9px;font-weight:700}
body.fsp-eeat-design .entry-content ul.cx-trygghet li.cx-ja::before{content:"\2713";color:var(--cexpo-ok)}
body.fsp-eeat-design .entry-content ul.cx-trygghet li.cx-nej::before{content:"\2715";color:var(--cexpo-danger)}

/* Spelansvar: lugn gra box. */
body.fsp-eeat-design .entry-content .cx-spelansvar{margin:2em 0;background:var(--cexpo-soft);border:1px solid var(--cexpo-line);border-radius:var(--cexpo-radius);padding:14px 18px;font-size:.95rem;color:var(--cexpo-body);line-height:1.65}
body.fsp-eeat-design .entry-content .cx-spelansvar strong{color:var(--cexpo-navy)}

/* Callouts: info, tips, varning. Ensidig kant, darfor border-radius 0. */
body.fsp-eeat-design .entry-content .cx-info,
body.fsp-eeat-design .entry-content .cx-tips,
body.fsp-eeat-design .entry-content .cx-varning{margin:1.4em 0;padding:11px 15px;border-radius:0;border-left:4px solid;font-size:.95rem;color:var(--cexpo-body);line-height:1.6}
body.fsp-eeat-design .entry-content .cx-info{background:#f6f9fd;border-left-color:var(--cexpo-accent)}
body.fsp-eeat-design .entry-content .cx-info strong{color:var(--cexpo-accent-dark)}
body.fsp-eeat-design .entry-content .cx-tips{background:#f3f8f4;border-left-color:var(--cexpo-ok)}
body.fsp-eeat-design .entry-content .cx-tips strong{color:var(--cexpo-ok-dark)}
body.fsp-eeat-design .entry-content .cx-varning{background:var(--cexpo-danger-bg);border-left-color:var(--cexpo-danger)}
body.fsp-eeat-design .entry-content .cx-varning strong{color:var(--cexpo-danger)}

/* For- och nackdelar: recensionsstil, tva kolumner, gron plus och rod minus,
   inga fargblock. Etiketterna (strong) ar valfria och visas som diskret navy. */
body.fsp-eeat-design .entry-content .cx-fornackdelar{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;margin:1.8em 0}
body.fsp-eeat-design .entry-content .cx-for > strong,
body.fsp-eeat-design .entry-content .cx-nack > strong{display:block;margin-bottom:6px;color:var(--cexpo-navy);font-weight:600}
body.fsp-eeat-design .entry-content .cx-for ul,
body.fsp-eeat-design .entry-content .cx-nack ul{list-style:none;margin:0;padding:0}
body.fsp-eeat-design .entry-content .cx-for li,
body.fsp-eeat-design .entry-content .cx-nack li{position:relative;padding:5px 0 5px 22px;line-height:1.5;margin:0}
body.fsp-eeat-design .entry-content .cx-for li::before{content:"+";position:absolute;left:0;color:var(--cexpo-ok);font-weight:800}
body.fsp-eeat-design .entry-content .cx-nack li::before{content:"\2212";position:absolute;left:0;color:var(--cexpo-danger);font-weight:800}

/* Steg: strikt bla nummerlista som recensionerna, inga cirklar. */
body.fsp-eeat-design .entry-content ol.cx-steg{list-style:none;counter-reset:cxsteg;margin:1.8em 0;padding:0}
body.fsp-eeat-design .entry-content ol.cx-steg li{position:relative;counter-increment:cxsteg;padding:6px 0 6px 30px;margin:0;line-height:1.6}
body.fsp-eeat-design .entry-content ol.cx-steg li::before{content:counter(cxsteg)".";position:absolute;left:0;color:var(--cexpo-accent-dark);font-weight:700}

/* Checklista */
body.fsp-eeat-design .entry-content ul.cx-checklista{list-style:none;margin:1.8em 0;padding:0}
body.fsp-eeat-design .entry-content ul.cx-checklista li{position:relative;padding:6px 0 6px 26px;line-height:1.55;margin:0}
body.fsp-eeat-design .entry-content ul.cx-checklista li::before{content:"\2713";position:absolute;left:0;top:6px;color:var(--cexpo-ok);font-weight:700}

/* Begreppsruta */
body.fsp-eeat-design .entry-content .cx-begrepp{margin:1.8em 0;background:var(--cexpo-soft);border:1px solid var(--cexpo-line);border-radius:var(--cexpo-radius);padding:13px 18px}
body.fsp-eeat-design .entry-content .cx-begrepp-term{display:block;font-weight:700;color:var(--cexpo-navy);margin-bottom:3px}
body.fsp-eeat-design .entry-content .cx-begrepp p{margin:0;line-height:1.6}

/* Mobil */
@media (max-width:600px){
	body.fsp-eeat-design .entry-content .cx-bonus-erbj{font-size:1.2rem}
	body.fsp-eeat-design .entry-content .cx-fornackdelar{grid-template-columns:1fr;gap:14px}
}

/*
 * Rubrikavstavning pa sma skarmar. hyphens: auto anvander webblasarens
 * svenska avstavningsordlista (kraver lang="sv" pa html-elementet, vilket
 * WordPress satter). hyphenate-limit-chars begransar till langre ord sa
 * korta ord aldrig avstavas. text-wrap: balance jamnar ut radlangderna sa
 * inte ett ensamt ord eller skiljetecken hamnar pa sista raden. Samma
 * regler och brytpunkt 640 px som i compare-pluginens cexpo.css sa
 * rubrikerna beter sig likadant pa alla sidor.
 */
@media (max-width: 640px) {
	body.fsp-eeat-design h1.entry-title,
	body.fsp-eeat-design .entry-header h1,
	body.fsp-eeat-design .entry-content h1,
	body.fsp-eeat-design .entry-content h2,
	body.fsp-eeat-design .entry-content h3,
	body.fsp-eeat-design .entry-content h4 {
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 4;
		hyphenate-limit-chars: 10 5 4;
		overflow-wrap: break-word;
		text-wrap: balance;
	}
}

/* ============================================================
   Fargat sidhuvud (hero) och brodsmulor pa inlagg och sidor.
   Samma navy som recensionerna. Full bredd: den gra ramen runt
   innehallet tas bort sa sidan ligger kant i kant pa vitt.
   ============================================================ */
body.cexpo-har-hero,
body.cexpo-har-hero #page,
body.cexpo-har-hero .site,
body.cexpo-har-hero .site-content {
	background: #fff;
}
body.cexpo-har-hero .site {
	box-shadow: none;
}

.cexpo-page-hero {
	/* Samma tonade bla hero som recensionerna (cexpo-modern): en diagonal
	   bla-till-navy-gradient med en diskret prickstruktur och en varm guldglod
	   uppe till hoger. */
	background:
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		radial-gradient(860px 460px at 82% -25%, rgba(184, 134, 11, 0.18), transparent 60%),
		linear-gradient(158deg, var(--cexpo-accent) 0%, var(--cexpo-accent-dark) 44%, var(--cexpo-heading) 100%);
	color: #fff;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cexpo-page-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 28px 24px 30px;
}
.cexpo-page-hero__titel {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #fff;
	/* Vikt 700 som recensionernas hero-rubrik, tidigare 800 gjorde sidornas H1
	   onodigt fet. */
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}
/* Introt (forsta stycket) i sidhuvudet, ljus text mot navy. Fyller hela
   bandets innehallsbredd, som rubriken och bylinen. */
.cexpo-page-hero__intro {
	margin: 0 0 18px;
	color: #dbe4f0;
	font-size: 1.05rem;
	line-height: 1.6;
}
.cexpo-page-hero__intro p { margin: 0; }
.cexpo-page-hero__intro strong { color: #fff; font-weight: 700; }
.cexpo-page-hero__intro a { color: #fff; text-decoration: underline; }
/* Bylinen i heron: ljusa farger mot navy, ingen ram. Selektorerna upprepar
   klassen for att vinna over basreglernas specificitet (fyra klasser). */
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat.cexpo-eeat__byline-wrap {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__byline {
	color: var(--cexpo-tint-2);
}
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__namn a,
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__fakt a {
	color: #fff;
}
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__datum {
	color: var(--cexpo-tint-2);
}
.cexpo-page-hero .cexpo-eeat.cexpo-eeat.cexpo-eeat .cexpo-eeat__byline > * + *::before {
	color: #6b7f9c;
}

.cexpo-brodsmulor {
	background: #fff;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cexpo-brodsmulor__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 14px 24px 2px;
	font-size: 0.9rem;
}
.cexpo-brodsmulor ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.cexpo-brodsmulor li { display: inline-flex; align-items: center; }
.cexpo-brodsmulor a { color: var(--cexpo-accent-dark); text-decoration: none; }
.cexpo-brodsmulor a:hover { text-decoration: underline; }
.cexpo-brodsmulor__sep { margin: 0 8px; color: #9aa1ab; }
.cexpo-brodsmulor__nu { color: #5a5f66; }

/* Mindre lucka mellan brodsmulan och innehallet pa hero-sidor: nolla toppmarginalen
   pa forsta innehallselementet sa det inte adderas till behallarens padding. */
body.cexpo-har-hero .entry-content { margin-top: 0; }
body.cexpo-har-hero .entry-content > *:first-child { margin-top: 0; }