.webko-badge {
	position: relative;
	display: block;
	margin: 0 0 0.5rem;
}

.webko-badge__trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	padding: 0.45em 0.75em;
	border: 0;
	background: rgba(120, 105, 90, 0.75);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.2;
	cursor: pointer;
}

.webko-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.75em;
	font-style: italic;
}

.webko-badge__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.webko-badge__tooltip {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: max-content;
	max-width: min(18rem, 80vw);
	padding: 0.6em 0.8em;
	border-radius: 4px;
	background: #4a3f35;
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: left;
}

.webko-badge__tooltip[hidden] {
	display: none;
}

.webko-optout {
	display: inline-block;
	margin-left: 0.35em;
	color: inherit;
	font-size: 0.8125em;
	opacity: 0.7;
	text-decoration: underline;
}

.webko-optout:hover,
.webko-optout:focus-visible {
	opacity: 1;
}

.webko-restore {
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

/* Fjern-linket ved siden af rabatbeløbet i kurvens totaler (samme
 * affordance som WooCommerces eget kuponrækkes fjern-link). Renderes ind
 * i kundens tema, inde i selve totaltabellen — klassen dobles derfor for
 * specificitet (0,2,0), og alt et tema typisk sætter på en tabellink
 * nulstilles eksplicit. Diskret med vilje: en influencers rabat skal ikke
 * kunne klikkes væk ved et uheld. */
.webko-fee-optout.webko-fee-optout {
	display: inline;
	margin-left: 0.4em;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.8125em;
	font-weight: 400;
	font-style: normal;
	line-height: inherit;
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
	opacity: 0.65;
	cursor: pointer;
}

.webko-fee-optout.webko-fee-optout:hover,
.webko-fee-optout.webko-fee-optout:focus-visible {
	opacity: 1;
}

.webko-fee-optout.webko-fee-optout:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Rabatsignal: notits på produktsiden og toast ved ankomst.
 *
 * De to siger det samme to steder i forløbet og deler derfor udtryk. Ser de
 * forskellige ud, læses de som to ubeslægtede beskeder.
 *
 * Om robustheden: komponenterne rendres ind i kundens tema, som vi ikke kan
 * teste imod. Hver klasse er derfor doblet i selektoren (.x.x), hvilket giver
 * specificitet 0,2,0 og slår stort set enhver temaregel — uden !important, så
 * det stadig kan overskrives bevidst. Alt hvad et tema typisk sætter på p,
 * span og button nulstilles eksplicit; arves der noget, er det med vilje.
 *
 * Om farverne: ingen ny kulør. Butikkens mørkeste tone på dens lyseste
 * baggrund er det stærkeste signal der findes, og det koster intet
 * brandmæssigt i en varm, rolig palet.
 * ------------------------------------------------------------------------- */

.webko-discount-notice,
.webko-toast {
	--webko-ink: #372f27;
	--webko-ink: oklch(0.29 0.018 62);
	--webko-cream: #f7f2ea;
	--webko-cream: oklch(0.96 0.011 85);
	--webko-quiet: rgba(247, 242, 234, 0.72);
	--webko-radius: 3px;
}

/* --- Notits på produktsiden --- */

.webko-discount-notice.webko-discount-notice {
	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: 32rem;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem 0.95rem;
	border: 0;
	border-radius: var(--webko-radius);
	background: var(--webko-ink);
	color: var(--webko-cream);
	font-family: inherit;
	font-style: normal;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	list-style: none;
	float: none;
}

.webko-discount-notice__lead.webko-discount-notice__lead {
	display: block;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

/* Procenten bærer linjen. Størrelsesspringet er bevidst under 1,5 — nok til
 * at øjet lander der først, ikke nok til at det råber. */
.webko-discount-notice__amount.webko-discount-notice__amount {
	display: inline;
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
	white-space: nowrap;
}

.webko-discount-notice__note.webko-discount-notice__note {
	display: block;
	margin: 0.3rem 0 0;
	padding: 0;
	color: var(--webko-quiet);
	font-size: 0.8125rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Toast ved ankomst --- */

.webko-toast.webko-toast {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 999999;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	width: auto;
	max-width: min(24rem, calc(100vw - 2rem));
	margin: 0;
	padding: 1rem 1.1rem;
	border: 0;
	border-radius: var(--webko-radius);
	background: var(--webko-ink);
	color: var(--webko-cream);
	font-family: inherit;
	text-align: left;
	text-transform: none;
	box-shadow: 0 10px 34px rgba(41, 34, 28, 0.26);
	animation: webko-toast-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.webko-toast__text.webko-toast__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

.webko-toast__close.webko-toast__close {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 1.75rem;
	height: 1.75rem;
	min-height: 0;
	margin: -0.15rem -0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--webko-radius);
	background: none;
	box-shadow: none;
	color: var(--webko-quiet);
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color 160ms ease-out, background-color 160ms ease-out;
}

.webko-toast__close.webko-toast__close:hover,
.webko-toast__close.webko-toast__close:focus-visible {
	background: rgba(247, 242, 234, 0.12);
	color: var(--webko-cream);
}

.webko-toast__close.webko-toast__close:focus-visible {
	outline: 2px solid var(--webko-cream);
	outline-offset: 1px;
}

@keyframes webko-toast-in {
	from {
		transform: translateY(0.75rem);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.webko-toast.webko-toast {
		animation: none;
	}

	.webko-toast__close.webko-toast__close {
		transition: none;
	}
}