/**
 * Recure-placering
 *
 * Designen ar medvetet inte distinkt. Placeringen ska se ut som en del av
 * kupongerna.se, inte som en annons - darav samma orange, samma blaa knapp
 * och samma kantiga form som resten av sajten. Enda friheten som tagits ar
 * en mjuk skugga i stallet for platt ram, sa rutan later som ett kort i
 * samma familj som innehallskorten nedanfor.
 */

.recure-slot {
	margin: var(--recure-mt, 16px) auto var(--recure-mb, 16px);
	padding: 0 12px;
	box-sizing: border-box;
}

/* Ingen reserverad hojd. Rutan skrivs ut dold och avslojas forst nar den
   placerats, sa nagon plats behover inte hallas oppen - och en fast
   min-hojd ger bara dott utrymme under nar innehallet ar lagre. */

/* Dold tills JavaScript flyttat den pa plats. Tas bort direkt efter
   placering - syns aldrig for besokaren. */
.recure-slot--pending {
	display: none;
}

/* ------------------------------------------------------------------ */

.recure-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: var(--recure-max, 1194px);
	margin: 0 auto;
	padding: 16px 56px 16px 20px;
	background: var(--recure-box-bg, #fff);
	border: 1px solid var(--recure-border, #e6e6e6);
	border-left: 4px solid var(--recure-accent, #f5822a);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

.recure-box--b {
	display: block;
	padding: 0;
	border-left: 1px solid var(--recure-border, #e6e6e6);
	background: var(--recure-soft, #fbe0e4);
}

.recure-eyebrow {
	margin: 0;
	padding: 6px 14px;
	background: var(--recure-accent, #f5822a);
	color: var(--recure-eyebrow-text, #fff);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.4;
}

.recure-b-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 56px 16px 20px;
}

/* ---- Logotyp ------------------------------------------------------ */

.recure-logo {
	flex: 0 0 124px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--recure-border, #e6e6e6);
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #1a1a1a;
}

.recure-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* ---- Text --------------------------------------------------------- */

.recure-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.recure-headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 4px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--recure-head, #1a1a1a);
}

.recure-badge {
	display: inline-block;
	padding: 2px 8px;
	background: var(--recure-badge, #f5822a);
	color: var(--recure-badge-text, #fff);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: nowrap;
}

.recure-subs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.recure-subs li {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--recure-sub, #5a5a5a);
	list-style: none;
	background: none;
}

/* Temat lagger en egen punktmarkering pa li-element via ::before.
   Nollstalls har och slas pa igen nedan for de stilar som vill ha en. */
.recure-subs li::before {
	content: none;
	display: none;
}

/* Punkterna pa en rad, separerade med tunna avdelare. Haller rutan lag
   nar man har flera korta saljargument i stallet for en lang mening. */
.recure-subs--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 3px 10px;
}

.recure-subs--inline li + li::before {
	content: "\00b7";
	display: inline;
	margin-right: 10px;
	color: #b8b8b8;
	background: none;
}

/* Bockar framfor varje rad. Lasbart men tar mer hojd. */
.recure-subs--checks li {
	position: relative;
	padding-left: 17px;
}

.recure-subs--checks li::before {
	content: "\2713";
	display: block;
	background: none;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--recure-accent, #f5822a);
}

/* ---- Knapp -------------------------------------------------------- */

.recure-cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 13px 28px;
	border: 0;
	background: var(--recure-cta, #2196c6);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .15s ease;
}

.recure-cta:hover,
.recure-cta:focus {
	filter: brightness(.92);
	color: #fff !important;
	text-decoration: none !important;
}

.recure-cta:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

/* ---- Stangknapp ---------------------------------------------------- */

.recure-close {
	position: absolute;
	top: 9px;
	right: 9px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	color: #444;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.recure-close svg {
	width: 12px;
	height: 12px;
	display: block;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.recure-close:hover,
.recure-close:focus {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.recure-close:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.recure-cta,
	.recure-close {
		transition: none;
	}
}

/* ---- Mobil --------------------------------------------------------- */

@media (max-width: 700px) {
	.recure-slot {
		margin-top: var(--recure-mt-mobile, 10px);
		margin-bottom: var(--recure-mb-mobile, 10px);
		padding: 0 8px;
	}

	/* Loggan bredvid texten i stallet for staplat. Det staplade laget gjorde
	   rutan cirka 230 px hog pa telefon - halva skarmen innan besokaren sag
	   nagot av det de faktiskt kom for. */
	.recure-box {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;
		padding: 11px 34px 11px 11px;
		text-align: left;
	}

	.recure-b-inner {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;
		padding: 11px 34px 11px 11px;
		text-align: left;
	}

	.recure-logo {
		flex: 0 0 74px;
		height: 40px;
		padding: 4px;
	}

	.recure-copy {
		flex: 1 1 140px;
	}

	.recure-headline {
		gap: 6px;
		margin-bottom: 3px;
		font-size: 13.5px;
	}

	.recure-badge {
		font-size: 10px;
		padding: 1px 6px;
	}

	.recure-subs li {
		font-size: 11.5px;
	}

	/* Knappen bryts ner pa egen rad och tar full bredd. */
	.recure-cta {
		flex: 1 0 100%;
		width: 100%;
		margin-top: 2px;
		padding: 11px 16px;
		text-align: center;
		box-sizing: border-box;
	}

	.recure-close {
		top: 7px;
		right: 7px;
		width: 24px;
		height: 24px;
	}

	.recure-close svg {
		width: 11px;
		height: 11px;
	}
}