/**
 * Partner promo — the sidebar/mobile advert box on articles.
 *
 * Same visual language as the partner bar on the price pages (kurs-tabell.css): the dark
 * blue → eToro Forest gradient, the Mint check marks, the green pill button. Laid out as a
 * column here, because the slot is ~300 px wide instead of the full content width.
 *
 * The card itself is rendered inside a noindex iframe (/?kgn_promo=cat|post), so these rules
 * are loaded both by the article and by that small document.
 */

/* ---- the slot on the article ---- */
.kgn-pr-slot { display: flex; flex-direction: column; gap: 16px; }
.kgn-pr-slot--mobile { max-width: 28em; margin: 0 auto 2rem; }
.kgn-pr__frame {
	display: block;
	width: 100%;
	height: 430px;           /* replaced by the real height as soon as the document reports it */
	border: 0;
	color-scheme: normal;
}
.kgn-pr-slot--mobile .kgn-pr__frame { height: 470px; }

/* The parent theme has no global border-box rule, so widths on the button were counted
   without its own padding and it grew past the card's edges. Scoped to the card only. */
.kgn-pr, .kgn-pr *, .kgn-pr *::before, .kgn-pr *::after { box-sizing: border-box; }

/* ---- the card ---- */
.kgn-pr {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: linear-gradient(155deg, #0a2540 0%, #0b3a5e 52%, #075434 100%); /* ends in eToro Forest */
	color: #fff;
	overflow: hidden;
}
.kgn-pr__body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 20px 18px; text-align: center; }

.kgn-pr__logo { display: flex; align-items: center; justify-content: center; width: 100%; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.kgn-pr__logo img { display: block; height: 26px; width: auto; max-width: 150px; }

.kgn-pr__title {
	display: block;
	margin: 2px 0 0;
	font-size: 21px;
	line-height: 1.25;
	font-weight: 900;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: #fff;
}
/* the theme forces 17px/1.9 on p and li, so the card pins its own type */
.kgn-pr__text {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: rgba(255,255,255,0.82) !important;
}

.kgn-pr__points { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 2px 0 0 !important; padding: 0 !important; list-style: none !important; }
.kgn-pr__points li {
	display: flex !important;
	align-items: flex-start;
	gap: 9px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 700;
	text-align: left;
	color: #fff !important;
	list-style: none !important;
}
.kgn-pr__points li::before { content: none !important; }
.kgn-pr__points svg { flex: 0 0 16px; margin-top: 2px; color: #6dff8a; } /* eToro Mint */

.kgn-pr__label { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,0.6); }
/* Wording drawn from the stylesheet rather than sitting as text in the document.
   The frame document overrides this with whatever is set in Theme Options. */
.kgn-pr__label::before { content: "Annon" "selenke"; }
.kgn-pr__btn {
	display: block;
	width: 100%;
	padding: 13px 20px;
	border-radius: 999px;
	background: #00d084;
	color: #fff !important;
	font-weight: 800;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.18);
	transition: transform .15s ease, background .15s ease;
}
.kgn-pr__btn:hover, .kgn-pr__btn:focus { background: #35b782; color: #fff !important; transform: translateY(-1px); }
.kgn-pr__btn:focus-visible { outline: 2px solid #6dff8a; outline-offset: 3px; }

/* ---- per placement ----
   The card is the same document in both slots; the wrapper class says which one it sits in.
   Sidekolonnen: knappen trekkes inn fra kanten og får litt større tekst.
   Mobil: punktene sentreres, som resten av innholdet i kortet. */
.kgn-pr--sidebar .kgn-pr__btn { width: calc(100% - 20px); font-size: 18px; }
/* Mobil: blokken med punkter sentreres som helhet, men linjene står venstrestilt inni den,
   slik at de grønne hakene ligger rett under hverandre. */
.kgn-pr--mobile .kgn-pr__points { width: auto; max-width: 100%; }
.kgn-pr--mobile .kgn-pr__btn { font-size: 18px; }

.kgn-pr__warn {
	padding: 10px 18px 12px;
	border-top: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.18);
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255,255,255,0.72);
	text-align: center;
}
.kgn-pr__warn a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kgn-pr__warn a:hover { color: #00d084; }

/* ---- which slot is shown ---- */
.kgn-pr-slot--sidebar { display: none; }
@media (min-width: 1030px) {
	.kgn-pr-slot--sidebar { display: flex; position: sticky; top: 15%; }
	.kgn-pr-slot--mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kgn-pr__btn { transition: none; }
	.kgn-pr__btn:hover, .kgn-pr__btn:focus { transform: none; }
}

/* ---------------------------------------------------------------------------
   Sidebar column.
   These three declarations used to live in advertisement-style.css, which is no
   longer loaded: everything else in that file styled the old advert markup and is
   now dead. Kept here so the column itself is unchanged.
   --------------------------------------------------------------------------- */
@media (min-width: 1030px) {
	.guider-blocks-flex { gap: 20px; max-width: 285px !important; position: relative; }
}